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 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
+ ```