-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplayground.html
61 lines (51 loc) · 1.7 KB
/
playground.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Siggy Playground</title>
<script type="importmap">
{
"imports": {
"signal-polyfill": "https://esm.sh/*signal-polyfill",
"scheduler-polyfill": "https://esm.sh/*scheduler-polyfill",
"signal-utils": "https://esm.sh/*signal-utils",
"signal-utils/": "https://esm.sh/*signal-utils/",
"siggy": "./dist/main.mjs"
}
}
</script>
<script type="module">
import * as Siggy from 'siggy';
const $root = document.getElementById('root');
$root.innerText = "Siggy Playground loaded.";
console.log("Module:", Siggy)
</script>
<script type="module">
import { createElement as h, sig, createSignal, createEffect, createComputed, onCleanup } from "siggy";
const counter = sig(0);
const isEven = sig(() => (counter() & 1) == 0);
const parity = sig(() => (isEven() ? "even" : "odd"));
// sig(() => {
// console.log("isEven", isEven())
// });
// sig(() => {
// console.log("parity", parity())
// });
function MyComponent({ message, counter }) {
return h('div', null,
h('h1', { "data-parity": parity }, `The parity is: `, parity),
h('p', null, `Message: ${message}`),
h('p', null, `Counter: `, counter),
h('button', { onClick: () => counter(counter() + 1) }, 'Increment Counter'),
);
}
const app = h(MyComponent, { message: "Hello World", counter: counter });
document.body.appendChild(app);
// setInterval(() => counter.set(counter.get() + 1), 1000);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>