closures 0.7.1 → 0.7.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +41 -1
- package/dist/closures.cjs +445 -614
- package/dist/closures.js +443 -611
- package/dist/closures.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
@@ -1,3 +1,43 @@
|
|
1
1
|
# closures
|
2
2
|
|
3
|
-
This is a fork of [petit-dom](https://github.com/yelouafi/petit-dom) by Yassine Elouafi, but with added "closure components" inspired by [Mithril.js](https://mithril.js.org/components.html#closure-component-state). For more thorough documentation, checkout the README for `petit-dom`. **This is experimental and not well-tested, so I recommend using Mithril.js or Preact instead.**
|
3
|
+
This is a fork of [petit-dom](https://github.com/yelouafi/petit-dom) by Yassine Elouafi, but with added "closure components" inspired by [Mithril.js](https://mithril.js.org/components.html#closure-component-state). For more thorough documentation, checkout the README for `petit-dom`. **This is experimental and not well-tested, so I recommend using Mithril.js or Preact instead.**
|
4
|
+
|
5
|
+
## Example
|
6
|
+
|
7
|
+
[Live Example](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4IWAA60ATsQAEwOYQpzpTACYxpK+gCUYWWgDcYc1nLDTaWOQHJqUWnACuauLYDcAHTQ+wztGpiCHo5AEEJCQAKRQg0CHlWAEoFHzk5AHoMuUdqDCg5OGIMRjkjCAw5BydXeDScmHk6APkAXjk4hO9fNHS1YldeqJTWgD45KPr0wijbdQgjWwop9KVZwgBGJaraFqTl3tXpqIARXYAjWBVFZoYzfZXjgBVpCAkrhR2W+4Oj49tzs5iMR6NtFPQHBBqABrRATEbjW7yADU7Q2ZhUtji1DUOAYtiSK0JhyS3VYPh8WUK4nepjoknoIjgfgCQRCvTOzkuMBiXzuyVSh36gzWtkIACZtki5AAqOTi0k+ck9KlFEowfwFelSNBMlmBYKhF5vWDDQXpIRwWiwfCOADmswAsrthOo5MbaQTuvU9AZjDyzWNzatLdaYLbaA7bABVNCGFowN0e2Be+rJb1Cxoi3nSgVBmZigDMUpd8jlhcVaGVPjUaE00iiMwiEmuHXixDhAFYfnJ1LRqM48cR8OdaOoAJ6kyggOAwWBs+gIHiF8WIAAshYAtAAGRDbtgcECYHB4fDUOACGj0RjMHhsAC6VCgcWhS9QR64eGqLjc09c5B4EhiAkOBECyAIJGhO0z2sDJv1qOAAAFt3wAB2fANgyeYijgxwf3gfAsDifB+GnYhxwkbgZxxN5RFYe9WCAA)
|
8
|
+
|
9
|
+
```js
|
10
|
+
import { h, render, onRemove } from 'closures';
|
11
|
+
|
12
|
+
function App({ init }) {
|
13
|
+
// local state via closures
|
14
|
+
let count = init;
|
15
|
+
|
16
|
+
return () => (
|
17
|
+
h('div',
|
18
|
+
h('h1', count),
|
19
|
+
h(Double, { count }),
|
20
|
+
h(Triple, { count }),
|
21
|
+
h('button', { onclick: () => count += 1 }, 'increment')
|
22
|
+
)
|
23
|
+
);
|
24
|
+
}
|
25
|
+
|
26
|
+
// simple components
|
27
|
+
function Double({ count }) {
|
28
|
+
return h('h2', count * 2);
|
29
|
+
}
|
30
|
+
|
31
|
+
// stateful components
|
32
|
+
function Triple() {
|
33
|
+
console.log('Mounted Triple');
|
34
|
+
|
35
|
+
onRemove(() => {
|
36
|
+
console.log('Unmounted Triple');
|
37
|
+
});
|
38
|
+
|
39
|
+
return ({ count }) => h('h3', count * 3);
|
40
|
+
}
|
41
|
+
|
42
|
+
render(h(App, { init: 5 }), document.body);
|
43
|
+
```
|