Last active
July 6, 2018 09:41
-
-
Save uchcode/5a2ea478aab127ba1a3e1c5c3f5a5bbd to your computer and use it in GitHub Desktop.
superfine + class = Ultrapp ref: https://qiita.com/tom-u/items/094d712c33f4a5cb9b79
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Ultrapp</title> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script type="module"> | |
| import * as superfine from 'https://unpkg.com/superfine?module' | |
| const { h } = superfine | |
| class Ultrapp { | |
| constructor(container, state, view) { | |
| const patch = (lastNode => state => { | |
| lastNode = superfine.patch ? | |
| superfine.patch(lastNode, view(state), container) : | |
| superfine.render(lastNode, view(state), container); | |
| })(); | |
| const proxy = state => new Proxy(state, { | |
| set(target, property, value, receiver) { | |
| target[property] = typeof value == 'object' ? proxy(value) : value; | |
| patch(p); | |
| return true; | |
| } | |
| }); | |
| const p = proxy(state); | |
| patch(p); | |
| return (p => { | |
| let _test = p; | |
| if (Object.getPrototypeOf(_test=Object.getPrototypeOf(_test)) === null) { | |
| var propertyNames = Object.getOwnPropertyNames(p); | |
| } else { | |
| var propertyNames = Object.getOwnPropertyNames(Object.getPrototypeOf(p)); | |
| } | |
| return propertyNames | |
| .filter(e => e !== 'constructor') | |
| .reduce((o,c) => ({...o,[c]: function() { | |
| const r = p[c](...arguments); | |
| return r === p ? this : r; | |
| }}), this); | |
| })(p); | |
| } | |
| } | |
| class State { | |
| constructor(count=0) { this.count = count } | |
| add(by=1) { this.count += by } | |
| sub(by=1) { this.count -= by } | |
| } | |
| (() => { | |
| new Ultrapp(s1, new State(), state => | |
| h("div", {}, [ | |
| h("h1", {}, state.count), | |
| h("button", { onclick: () => state.sub() }, "-"), | |
| h("button", { onclick: () => state.add() }, "+"), | |
| ]) | |
| ) | |
| })(); | |
| (() => { | |
| const display = state => h("h1", {}, state.count) | |
| const addButton = state => h("button", { onclick: () => state.add() }, "+") | |
| const subButton = state => h("button", { onclick: () => state.sub() }, "-") | |
| new Ultrapp(s2, new State(), state => | |
| h("div", {}, [display(state), subButton(state), addButton(state)]) | |
| ) | |
| })(); | |
| (() => { | |
| new Ultrapp(s3, { | |
| count: 0, | |
| add(by=1) { this.count += by }, | |
| sub(by=1) { this.count -= by }, | |
| }, (state) => | |
| h("div", {}, [ | |
| h("h1", {}, state.count), | |
| h("button", { onclick: () => state.sub() }, "-"), | |
| h("button", { onclick: () => state.add() }, "+"), | |
| ]) | |
| ) | |
| })(); | |
| </script> | |
| </head> | |
| <body> | |
| <section id="s1"></section> | |
| <br><hr> | |
| <section id="s2"></section> | |
| <br><hr> | |
| <section id="s3"></section> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment