Skip to content

Instantly share code, notes, and snippets.

@k1r0s
Created November 27, 2018 23:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save k1r0s/71208f13495fcb579d497c1b3bb39b6d to your computer and use it in GitHub Desktop.
Save k1r0s/71208f13495fcb579d497c1b3bb39b6d to your computer and use it in GitHub Desktop.
thoughts on superfine
import { h, patch } from "superfine";
import EvtEmitter from "event-emitter";
const emitter = new EvtEmitter;
let readonlyState = {
count: 0,
text: ""
};
const events = {
PUT_COUNT: 0,
NEW_TEXT: 1,
}
const pushState = updater => render(readonlyState = { ...readonlyState, ...updater(readonlyState) });
const trigger = (evt, ...args) => emitter.emit(evt, ...args);
emitter.on(events.PUT_COUNT, op => pushState(state => ({ count: state.count + op })));
emitter.on(events.NEW_TEXT, op => pushState(() => ({ text: op })));
const view = STATE => (
<div>
<div>
<h1>{STATE.count}</h1>
<button onclick={() => trigger(events.PUT_COUNT, -1)}>-</button>
<button onclick={() => trigger(events.PUT_COUNT, 1)}>+</button>
</div>
<br/>
<div>
<h1>{STATE.text}</h1>
<input value={STATE.text} onkeyup={evt => trigger(events.NEW_TEXT, evt.target.value)}/>
<button onclick={() => console.log(STATE.text)}>get input value</button>
</div>
</div>
);
const app = (view, container, node) =>
state =>
node = patch(node, view(state), container);
const render = app(view, document.querySelector("#app"));
render(readonlyState);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment