You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.6 KiB
HTML
57 lines
1.6 KiB
HTML
5 years ago
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
|
|
<title>Document</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<state-provider value="1" id="prov1" name="state1">
|
||
|
|
<b>lalal</b>
|
||
|
|
<div id="1">
|
||
|
|
Hello World
|
||
|
|
<state-provider value="2" id="prov2" name="state2">
|
||
|
|
<span id="2">
|
||
|
|
<state-consumer id="cons1" name="state1"></state-consumer>
|
||
|
|
</span>
|
||
|
|
</state-provider>
|
||
|
|
</div>
|
||
|
|
</state-provider>
|
||
|
|
<div id="root"></div>
|
||
|
|
<script type="module">
|
||
|
|
import './components/generic/Provider.js'
|
||
|
|
import './components/generic/Consumer.js'
|
||
|
|
|
||
|
|
const prov1 = document.getElementById('prov1')
|
||
|
|
const cons1 = document.getElementById('cons1')
|
||
|
|
|
||
|
|
cons1.onChange = console.log
|
||
|
|
|
||
|
|
prov1.setAttribute('value', 'change1')
|
||
|
|
prov1.value = 'change2'
|
||
|
|
prov1.value = { val: 'change3', test: 'testing objects' }
|
||
|
|
|
||
|
|
console.log(prov1.observers.length, 'should be 1')
|
||
|
|
cons1.remove()
|
||
|
|
console.log(prov1.observers.length, 'should be 0')
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const root = document.getElementById('root')
|
||
|
|
|
||
|
|
root.innerHTML = `
|
||
|
|
<state-provider id="prov3" value="initial">
|
||
|
|
<state-consumer id="cons3" onChange=${console.log}></state-consumer>
|
||
|
|
</state-provider>
|
||
|
|
`
|
||
|
|
|
||
|
|
const prov3 = document.getElementById('prov3')
|
||
|
|
const cons3 = document.getElementById('cons3')
|
||
|
|
|
||
|
|
console.log(prov3)
|
||
|
|
console.log(typeof cons3.getAttribute('onChange'))
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|