made with esnextbin
Created
December 5, 2016 13:57
-
-
Save voronianski/1fbca0bc6537a402e915c0cee53aa4a7 to your computer and use it in GitHub Desktop.
esnextbin sketch
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ESNextbin Sketch</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| </body> | |
| </html> |
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 barracks from 'barracks'; | |
| import { create, h, diff, patch } from 'virtual-dom'; | |
| let view; | |
| let domNode; | |
| const store = barracks(); | |
| const counter = store.model({ | |
| namespace: 'counter', | |
| state: { | |
| count: 0 | |
| }, | |
| reducers: { | |
| increment(state, data) { | |
| return {count: ++state.count} | |
| }, | |
| decrement(state, data) { | |
| return {count: --state.count} | |
| } | |
| } | |
| }); | |
| const createSend = store.start(); | |
| const sendAction = createSend('dispatcher', true); | |
| const render = state => { | |
| const children = [ | |
| h('h3', {}, `Barracks counter ${state.counter.count}!`) | |
| ]; | |
| if (state.counter.count >= 2) { | |
| const button = h('button', { | |
| onclick() { | |
| sendAction('counter:increment'); | |
| } | |
| }, 'Increment'); | |
| children.push(button); | |
| } | |
| return h('div', {}, children) | |
| }; | |
| const updateDom = state => { | |
| const newView = render(state); | |
| const patches = diff(view, newView); | |
| view = newView; | |
| domNode = patch(domNode, patches); | |
| }; | |
| store.use({ | |
| onError(err, state, createSend) { | |
| console.error('error:', err); | |
| }, | |
| onAction(state, data, name, caller, createSend) { | |
| console.log(`on ${name}:`, data); | |
| }, | |
| onStateChange(state, data, prev, caller, createSend) { | |
| console.log(state, prev); | |
| updateDom(state); | |
| } | |
| }); | |
| view = render(store.state()); | |
| domNode = create(view); | |
| document.getElementById('app').appendChild(domNode); | |
| sendAction('counter:increment'); | |
| setTimeout(() => { | |
| sendAction('counter:increment'); | |
| }, 1000); |
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
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "barracks": "9.0.0", | |
| "virtual-dom": "2.1.1" | |
| } | |
| } |
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
| 'use strict'; | |
| var _barracks = require('barracks'); | |
| var _barracks2 = _interopRequireDefault(_barracks); | |
| var _virtualDom = require('virtual-dom'); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| var view = void 0; | |
| var domNode = void 0; | |
| var store = (0, _barracks2.default)(); | |
| var counter = store.model({ | |
| namespace: 'counter', | |
| state: { | |
| count: 0 | |
| }, | |
| reducers: { | |
| increment: function increment(state, data) { | |
| return { count: ++state.count }; | |
| }, | |
| decrement: function decrement(state, data) { | |
| return { count: --state.count }; | |
| } | |
| } | |
| }); | |
| var createSend = store.start(); | |
| var sendAction = createSend('dispatcher', true); | |
| var render = function render(state) { | |
| var children = [(0, _virtualDom.h)('h3', {}, 'Barracks counter ' + state.counter.count + '!')]; | |
| if (state.counter.count >= 2) { | |
| var button = (0, _virtualDom.h)('button', { | |
| onclick: function onclick() { | |
| sendAction('counter:increment'); | |
| } | |
| }, 'Increment'); | |
| children.push(button); | |
| } | |
| return (0, _virtualDom.h)('div', {}, children); | |
| }; | |
| var updateDom = function updateDom(state) { | |
| var newView = render(state); | |
| var patches = (0, _virtualDom.diff)(view, newView); | |
| view = newView; | |
| domNode = (0, _virtualDom.patch)(domNode, patches); | |
| }; | |
| store.use({ | |
| onError: function onError(err, state, createSend) { | |
| console.error('error:', err); | |
| }, | |
| onAction: function onAction(state, data, name, caller, createSend) { | |
| console.log('on ' + name + ':', data); | |
| }, | |
| onStateChange: function onStateChange(state, data, prev, caller, createSend) { | |
| console.log(state, prev); | |
| updateDom(state); | |
| } | |
| }); | |
| view = render(store.state()); | |
| domNode = (0, _virtualDom.create)(view); | |
| document.getElementById('app').appendChild(domNode); | |
| sendAction('counter:increment'); | |
| setTimeout(function () { | |
| sendAction('counter:increment'); | |
| }, 1000); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment