Last active
July 12, 2018 01:21
-
-
Save uchcode/26416a19c25e81aea6d55687e8111adc to your computer and use it in GitHub Desktop.
Superfineの管理と部品化のサンプルコード ref: https://qiita.com/tom-u/items/08f8b1dd2cf5303a193e
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
| import * as superfine from 'https://unpkg.com/superfine?module'; | |
| export class SuperfineManager { | |
| constructor(container, template) { | |
| this.container = container; | |
| this.template = template; | |
| this.node = null; | |
| this.update = null; | |
| } | |
| setup(node) { | |
| this.node = node; | |
| this.update = () => { | |
| this.node = superfine.patch(this.node, this.template(), this.container); | |
| return this; | |
| } | |
| return this; | |
| } | |
| teardown() { | |
| // this.update = () => { | |
| // this.node = superfine.patch(null, null, this.container); | |
| // return this; | |
| // } | |
| return this; | |
| } | |
| mount(node) { | |
| this.setup(node).update(); | |
| return this; | |
| } | |
| unmount() { | |
| this.teardown().update(); | |
| return this; | |
| } | |
| } | |
| export class SuperfineComponents extends Array { | |
| h(name, attributes, children) { | |
| this.push(superfine.h(name, attributes, children)); | |
| return this; | |
| } | |
| } | |
| export class Counter extends SuperfineComponents { | |
| display(attributes, children=this.state.count) { | |
| return this.h('h2', attributes, children); | |
| } | |
| addButton(attributes, children='+') { | |
| const handlers = { | |
| onclick: () => { this.state.count++ } | |
| } | |
| const properties = Object.assign(handlers, attributes); | |
| return this.h('button', properties, children); | |
| } | |
| subButton(app, attributes, children='-') { | |
| const handlers = { | |
| onclick: () => { this.state.count-- } | |
| } | |
| const properties = Object.assign(handlers, attributes); | |
| return this.h('button', properties, children); | |
| } | |
| } | |
| export const counter = state => { | |
| const c = new Counter(); | |
| c.state = state; | |
| return c; | |
| }; | |
| SuperfineManager.prototype.pushTo = function(array) { | |
| array.push(this); | |
| return this; | |
| } | |
| const state = {count:0}; | |
| const proxy = new Proxy(state, { | |
| set(target, property, value, receiver) { | |
| target[property] = value; | |
| managers.forEach(m => m.update()); | |
| return true; | |
| } | |
| }); | |
| const managers = []; | |
| new SuperfineManager(document.querySelector('#s1'), () => | |
| superfine.h('div', {}, counter(proxy) | |
| .h('h1', {}, 'S1 Counter') | |
| .display() | |
| .subButton() | |
| .addButton() | |
| ) | |
| ) | |
| .mount() | |
| .pushTo(managers); | |
| new SuperfineManager(document.querySelector('#s2'), () => | |
| superfine.h('div', {}, counter(proxy) | |
| .h('h1', {}, 'S2 Counter') | |
| .addButton() | |
| .subButton() | |
| .display() | |
| ) | |
| ) | |
| .mount() | |
| .pushTo(managers); |
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>SuperfineView</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" src="/script.js" defer></script> | |
| </head> | |
| <body> | |
| <section id="s1"></section> | |
| <section id="s2"></section> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment