requirebin sketch

index.js

var snabbdom = require('snabbdom');
var EventEmitter = require('events');
var ee = new EventEmitter();

var patch = snabbdom.init([
  require('snabbdom/modules/class'),
  require('snabbdom/modules/props'),
  require('snabbdom/modules/style'),
  require('snabbdom/modules/eventlisteners'),
]);
  
var h = require('snabbdom/h');

var app = (function() {
  var actions = {
    changeInput: function(name) {	
      ee.emit('changeInput', name);
    }
  };
  
  var store = {
  	state: {
  		input: ''
  	},
  
  	onChangeInput: function(name) {
  		this.state.input = name;
  		ee.emit('triggerView', this.state);
  	}
  }
  
  var view = {
    oldNode: document.querySelector('.placeholder'),
  
    inputHandler: function(e) {
      actions.changeInput(e.target.value);
    },
   
    render: function(state) {
      var template = 
        h('div', [
          h('input', {
            props: { type: 'text', placeholder: 'Type  your name' },
            on   : { input: this.inputHandler }
          }),
          h('span', state.input)
        ]);
  		
      this.oldNode = patch(this.oldNode, template);
		}
	};
    
	view.render(store.state);

	return {
    store: store,
    view: view,
    actions: actions
  }
})(); 

var dispatcher = (function() {
  ee.on('changeInput', function(name) {
  	app.store.onChangeInput(name);
  });
  ee.on('triggerView', function(state) {
    app.view.render(state);
  });
})();

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports={array:Array.isArray,primitive:function(s){return typeof s==="string"||typeof s==="number"}}},{}],2:[function(require,module,exports){module.exports=function(sel,data,children,text,elm){var key=data===undefined?undefined:data.key;return{sel:sel,data:data,children:children,text:text,elm:elm,key:key}}},{}],snabbdom:[function(require,module,exports){"use strict";var VNode=require("./vnode");var is=require("./is");function isUndef(s){return s===undefined}function isDef(s){return s!==undefined}function emptyNodeAt(elm){return VNode(elm.tagName,{},[],undefined,elm)}var emptyNode=VNode("",{},[],undefined,undefined);function sameVnode(vnode1,vnode2){return vnode1.key===vnode2.key&&vnode1.sel===vnode2.sel}function createKeyToOldIdx(children,beginIdx,endIdx){var i,map={},key;for(i=beginIdx;i<=endIdx;++i){key=children[i].key;if(isDef(key))map[key]=i}return map}function createRmCb(childElm,listeners){return function(){if(--listeners===0)childElm.parentElement.removeChild(childElm)}}var hooks=["create","update","remove","destroy","pre","post"];function init(modules){var i,j,cbs={};for(i=0;i<hooks.length;++i){cbs[hooks[i]]=[];for(j=0;j<modules.length;++j){if(modules[j][hooks[i]]!==undefined)cbs[hooks[i]].push(modules[j][hooks[i]])}}function createElm(vnode,insertedVnodeQueue){var i,data=vnode.data;if(isDef(data)){if(isDef(i=data.hook)&&isDef(i=i.init))i(vnode);if(isDef(i=data.vnode))vnode=i}var elm,children=vnode.children,sel=vnode.sel;if(isDef(sel)){var hashIdx=sel.indexOf("#");var dotIdx=sel.indexOf(".",hashIdx);var hash=hashIdx>0?hashIdx:sel.length;var dot=dotIdx>0?dotIdx:sel.length;var tag=hashIdx!==-1||dotIdx!==-1?sel.slice(0,Math.min(hash,dot)):sel;elm=vnode.elm=isDef(data)&&isDef(i=data.ns)?document.createElementNS(i,tag):document.createElement(tag);if(hash<dot)elm.id=sel.slice(hash+1,dot);if(dotIdx>0)elm.className=sel.slice(dot+1).replace(/\./g," ");if(is.array(children)){for(i=0;i<children.length;++i){elm.appendChild(createElm(children[i],insertedVnodeQueue))}}else if(is.primitive(vnode.text)){elm.appendChild(document.createTextNode(vnode.text))}for(i=0;i<cbs.create.length;++i)cbs.create[i](emptyNode,vnode);i=vnode.data.hook;if(isDef(i)){if(i.create)i.create(emptyNode,vnode);if(i.insert)insertedVnodeQueue.push(vnode)}}else{elm=vnode.elm=document.createTextNode(vnode.text)}return vnode.elm}function addVnodes(parentElm,before,vnodes,startIdx,endIdx,insertedVnodeQueue){for(;startIdx<=endIdx;++startIdx){parentElm.insertBefore(createElm(vnodes[startIdx],insertedVnodeQueue),before)}}function invokeDestroyHook(vnode){var i=vnode.data,j;if(isDef(i)){if(isDef(i=i.hook)&&isDef(i=i.destroy))i(vnode);for(i=0;i<cbs.destroy.length;++i)cbs.destroy[i](vnode);if(isDef(i=vnode.children)){for(j=0;j<vnode.children.length;++j){invokeDestroyHook(vnode.children[j])}}}}function removeVnodes(parentElm,vnodes,startIdx,endIdx){for(;startIdx<=endIdx;++startIdx){var i,listeners,rm,ch=vnodes[startIdx];if(isDef(ch)){if(isDef(ch.sel)){invokeDestroyHook(ch);listeners=cbs.remove.length+1;rm=createRmCb(ch.elm,listeners);for(i=0;i<cbs.remove.length;++i)cbs.remove[i](ch,rm);if(isDef(i=ch.data)&&isDef(i=i.hook)&&isDef(i=i.remove)){i(ch,rm)}else{rm()}}else{parentElm.removeChild(ch.elm)}}}}function updateChildren(parentElm,oldCh,newCh,insertedVnodeQueue){var oldStartIdx=0,newStartIdx=0;var oldEndIdx=oldCh.length-1;var oldStartVnode=oldCh[0];var oldEndVnode=oldCh[oldEndIdx];var newEndIdx=newCh.length-1;var newStartVnode=newCh[0];var newEndVnode=newCh[newEndIdx];var oldKeyToIdx,idxInOld,elmToMove,before;while(oldStartIdx<=oldEndIdx&&newStartIdx<=newEndIdx){if(isUndef(oldStartVnode)){oldStartVnode=oldCh[++oldStartIdx]}else if(isUndef(oldEndVnode)){oldEndVnode=oldCh[--oldEndIdx]}else if(sameVnode(oldStartVnode,newStartVnode)){patchVnode(oldStartVnode,newStartVnode,insertedVnodeQueue);oldStartVnode=oldCh[++oldStartIdx];newStartVnode=newCh[++newStartIdx]}else if(sameVnode(oldEndVnode,newEndVnode)){patchVnode(oldEndVnode,newEndVnode,insertedVnodeQueue);oldEndVnode=oldCh[--oldEndIdx];newEndVnode=newCh[--newEndIdx]}else if(sameVnode(oldStartVnode,newEndVnode)){patchVnode(oldStartVnode,newEndVnode,insertedVnodeQueue);parentElm.insertBefore(oldStartVnode.elm,oldEndVnode.elm.nextSibling);oldStartVnode=oldCh[++oldStartIdx];newEndVnode=newCh[--newEndIdx]}else if(sameVnode(oldEndVnode,newStartVnode)){patchVnode(oldEndVnode,newStartVnode,insertedVnodeQueue);parentElm.insertBefore(oldEndVnode.elm,oldStartVnode.elm);oldEndVnode=oldCh[--oldEndIdx];newStartVnode=newCh[++newStartIdx]}else{if(isUndef(oldKeyToIdx))oldKeyToIdx=createKeyToOldIdx(oldCh,oldStartIdx,oldEndIdx);idxInOld=oldKeyToIdx[newStartVnode.key];if(isUndef(idxInOld)){parentElm.insertBefore(createElm(newStartVnode,insertedVnodeQueue),oldStartVnode.elm);newStartVnode=newCh[++newStartIdx]}else{elmToMove=oldCh[idxInOld];patchVnode(elmToMove,newStartVnode,insertedVnodeQueue);oldCh[idxInOld]=undefined;parentElm.insertBefore(elmToMove.elm,oldStartVnode.elm);newStartVnode=newCh[++newStartIdx]}}}if(oldStartIdx>oldEndIdx){before=isUndef(newCh[newEndIdx+1])?null:newCh[newEndIdx+1].elm;addVnodes(parentElm,before,newCh,newStartIdx,newEndIdx,insertedVnodeQueue)}else if(newStartIdx>newEndIdx){removeVnodes(parentElm,oldCh,oldStartIdx,oldEndIdx)}}function patchVnode(oldVnode,vnode,insertedVnodeQueue){var i,hook;if(isDef(i=vnode.data)&&isDef(hook=i.hook)&&isDef(i=hook.prepatch)){i(oldVnode,vnode)}if(isDef(i=oldVnode.data)&&isDef(i=i.vnode))oldVnode=i;if(isDef(i=vnode.data)&&isDef(i=i.vnode))vnode=i;var elm=vnode.elm=oldVnode.elm,oldCh=oldVnode.children,ch=vnode.children;if(oldVnode===vnode)return;if(isDef(vnode.data)){for(i=0;i<cbs.update.length;++i)cbs.update[i](oldVnode,vnode);i=vnode.data.hook;if(isDef(i)&&isDef(i=i.update))i(oldVnode,vnode)}if(isUndef(vnode.text)){if(isDef(oldCh)&&isDef(ch)){if(oldCh!==ch)updateChildren(elm,oldCh,ch,insertedVnodeQueue)}else if(isDef(ch)){addVnodes(elm,null,ch,0,ch.length-1,insertedVnodeQueue)}else if(isDef(oldCh)){removeVnodes(elm,oldCh,0,oldCh.length-1)}}else if(oldVnode.text!==vnode.text){elm.textContent=vnode.text}if(isDef(hook)&&isDef(i=hook.postpatch)){i(oldVnode,vnode)}}return function(oldVnode,vnode){var i;var insertedVnodeQueue=[];for(i=0;i<cbs.pre.length;++i)cbs.pre[i]();if(oldVnode instanceof Element){if(oldVnode.parentElement!==null){createElm(vnode,insertedVnodeQueue);oldVnode.parentElement.replaceChild(vnode.elm,oldVnode)}else{oldVnode=emptyNodeAt(oldVnode);patchVnode(oldVnode,vnode,insertedVnodeQueue)}}else{patchVnode(oldVnode,vnode,insertedVnodeQueue)}for(i=0;i<insertedVnodeQueue.length;++i){insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i])}for(i=0;i<cbs.post.length;++i)cbs.post[i]();return vnode}}module.exports={init:init}},{"./is":1,"./vnode":2}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"snabbdom/modules/class":[function(require,module,exports){function updateClass(oldVnode,vnode){var cur,name,elm=vnode.elm,oldClass=oldVnode.data.class||{},klass=vnode.data.class||{};for(name in oldClass){if(!klass[name]){elm.classList.remove(name)}}for(name in klass){cur=klass[name];if(cur!==oldClass[name]){elm.classList[cur?"add":"remove"](name)}}}module.exports={create:updateClass,update:updateClass}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"snabbdom/modules/props":[function(require,module,exports){function updateProps(oldVnode,vnode){var key,cur,old,elm=vnode.elm,oldProps=oldVnode.data.props||{},props=vnode.data.props||{};for(key in oldProps){if(!props[key]){delete elm[key]}}for(key in props){cur=props[key];old=oldProps[key];if(old!==cur){elm[key]=cur}}}module.exports={create:updateProps,update:updateProps}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"snabbdom/modules/style":[function(require,module,exports){var raf=window&&window.requestAnimationFrame||setTimeout;var nextFrame=function(fn){raf(function(){raf(fn)})};function setNextFrame(obj,prop,val){nextFrame(function(){obj[prop]=val})}function updateStyle(oldVnode,vnode){var cur,name,elm=vnode.elm,oldStyle=oldVnode.data.style||{},style=vnode.data.style||{},oldHasDel="delayed"in oldStyle;for(name in oldStyle){if(!style[name]){elm.style[name]=""}}for(name in style){cur=style[name];if(name==="delayed"){for(name in style.delayed){cur=style.delayed[name];if(!oldHasDel||cur!==oldStyle.delayed[name]){setNextFrame(elm.style,name,cur)}}}else if(name!=="remove"&&cur!==oldStyle[name]){elm.style[name]=cur}}}function applyDestroyStyle(vnode){var style,name,elm=vnode.elm,s=vnode.data.style;if(!s||!(style=s.destroy))return;for(name in style){elm.style[name]=style[name]}}function applyRemoveStyle(vnode,rm){var s=vnode.data.style;if(!s||!s.remove){rm();return}var name,elm=vnode.elm,idx,i=0,maxDur=0,compStyle,style=s.remove,amount=0,applied=[];for(name in style){applied.push(name);elm.style[name]=style[name]}compStyle=getComputedStyle(elm);var props=compStyle["transition-property"].split(", ");for(;i<props.length;++i){if(applied.indexOf(props[i])!==-1)amount++}elm.addEventListener("transitionend",function(ev){if(ev.target===elm)--amount;if(amount===0)rm()})}module.exports={create:updateStyle,update:updateStyle,destroy:applyDestroyStyle,remove:applyRemoveStyle}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports={array:Array.isArray,primitive:function(s){return typeof s==="string"||typeof s==="number"}}},{}],"snabbdom/modules/eventlisteners":[function(require,module,exports){var is=require("../is");function arrInvoker(arr){return function(){arr.length===2?arr[0](arr[1]):arr[0].apply(undefined,arr.slice(1))}}function fnInvoker(o){return function(ev){o.fn(ev)}}function updateEventListeners(oldVnode,vnode){var name,cur,old,elm=vnode.elm,oldOn=oldVnode.data.on||{},on=vnode.data.on;if(!on)return;for(name in on){cur=on[name];old=oldOn[name];if(old===undefined){if(is.array(cur)){elm.addEventListener(name,arrInvoker(cur))}else{cur={fn:cur};on[name]=cur;elm.addEventListener(name,fnInvoker(cur))}}else if(is.array(old)){old.length=cur.length;for(var i=0;i<old.length;++i)old[i]=cur[i];on[name]=old}else{old.fn=cur;on[name]=old}}}module.exports={create:updateEventListeners,update:updateEventListeners}},{"../is":1}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports={array:Array.isArray,primitive:function(s){return typeof s==="string"||typeof s==="number"}}},{}],2:[function(require,module,exports){module.exports=function(sel,data,children,text,elm){var key=data===undefined?undefined:data.key;return{sel:sel,data:data,children:children,text:text,elm:elm,key:key}}},{}],"snabbdom/h":[function(require,module,exports){var VNode=require("./vnode");var is=require("./is");function addNS(data,children){data.ns="http://www.w3.org/2000/svg";if(children!==undefined){for(var i=0;i<children.length;++i){addNS(children[i].data,children[i].children)}}}module.exports=function h(sel,b,c){var data={},children,text,i;if(arguments.length===3){data=b;if(is.array(c)){children=c}else if(is.primitive(c)){text=c}}else if(arguments.length===2){if(is.array(b)){children=b}else if(is.primitive(b)){text=b}else{data=b}}if(is.array(children)){for(i=0;i<children.length;++i){if(is.primitive(children[i]))children[i]=VNode(undefined,undefined,undefined,children[i])}}if(sel[0]==="s"&&sel[1]==="v"&&sel[2]==="g"){addNS(data,children)}return VNode(sel,data,children,text,undefined)}},{"./is":1,"./vnode":2}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({events:[function(require,module,exports){function EventEmitter(){this._events=this._events||{};this._maxListeners=this._maxListeners||undefined}module.exports=EventEmitter;EventEmitter.EventEmitter=EventEmitter;EventEmitter.prototype._events=undefined;EventEmitter.prototype._maxListeners=undefined;EventEmitter.defaultMaxListeners=10;EventEmitter.prototype.setMaxListeners=function(n){if(!isNumber(n)||n<0||isNaN(n))throw TypeError("n must be a positive number");this._maxListeners=n;return this};EventEmitter.prototype.emit=function(type){var er,handler,len,args,i,listeners;if(!this._events)this._events={};if(type==="error"){if(!this._events.error||isObject(this._events.error)&&!this._events.error.length){er=arguments[1];if(er instanceof Error){throw er}else{throw TypeError('Uncaught, unspecified "error" event.')}return false}}handler=this._events[type];if(isUndefined(handler))return false;if(isFunction(handler)){switch(arguments.length){case 1:handler.call(this);break;case 2:handler.call(this,arguments[1]);break;case 3:handler.call(this,arguments[1],arguments[2]);break;default:len=arguments.length;args=new Array(len-1);for(i=1;i<len;i++)args[i-1]=arguments[i];handler.apply(this,args)}}else if(isObject(handler)){len=arguments.length;args=new Array(len-1);for(i=1;i<len;i++)args[i-1]=arguments[i];listeners=handler.slice();len=listeners.length;for(i=0;i<len;i++)listeners[i].apply(this,args)}return true};EventEmitter.prototype.addListener=function(type,listener){var m;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events)this._events={};if(this._events.newListener)this.emit("newListener",type,isFunction(listener.listener)?listener.listener:listener);if(!this._events[type])this._events[type]=listener;else if(isObject(this._events[type]))this._events[type].push(listener);else this._events[type]=[this._events[type],listener];if(isObject(this._events[type])&&!this._events[type].warned){var m;if(!isUndefined(this._maxListeners)){m=this._maxListeners}else{m=EventEmitter.defaultMaxListeners}if(m&&m>0&&this._events[type].length>m){this._events[type].warned=true;console.error("(node) warning: possible EventEmitter memory "+"leak detected. %d listeners added. "+"Use emitter.setMaxListeners() to increase limit.",this._events[type].length);if(typeof console.trace==="function"){console.trace()}}}return this};EventEmitter.prototype.on=EventEmitter.prototype.addListener;EventEmitter.prototype.once=function(type,listener){if(!isFunction(listener))throw TypeError("listener must be a function");var fired=false;function g(){this.removeListener(type,g);if(!fired){fired=true;listener.apply(this,arguments)}}g.listener=listener;this.on(type,g);return this};EventEmitter.prototype.removeListener=function(type,listener){var list,position,length,i;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events||!this._events[type])return this;list=this._events[type];length=list.length;position=-1;if(list===listener||isFunction(list.listener)&&list.listener===listener){delete this._events[type];if(this._events.removeListener)this.emit("removeListener",type,listener)}else if(isObject(list)){for(i=length;i-->0;){if(list[i]===listener||list[i].listener&&list[i].listener===listener){position=i;break}}if(position<0)return this;if(list.length===1){list.length=0;delete this._events[type]}else{list.splice(position,1)}if(this._events.removeListener)this.emit("removeListener",type,listener)}return this};EventEmitter.prototype.removeAllListeners=function(type){var key,listeners;if(!this._events)return this;if(!this._events.removeListener){if(arguments.length===0)this._events={};else if(this._events[type])delete this._events[type];return this}if(arguments.length===0){for(key in this._events){if(key==="removeListener")continue;this.removeAllListeners(key)}this.removeAllListeners("removeListener");this._events={};return this}listeners=this._events[type];if(isFunction(listeners)){this.removeListener(type,listeners)}else{while(listeners.length)this.removeListener(type,listeners[listeners.length-1])}delete this._events[type];return this};EventEmitter.prototype.listeners=function(type){var ret;if(!this._events||!this._events[type])ret=[];else if(isFunction(this._events[type]))ret=[this._events[type]];else ret=this._events[type].slice();return ret};EventEmitter.listenerCount=function(emitter,type){var ret;if(!emitter._events||!emitter._events[type])ret=0;else if(isFunction(emitter._events[type]))ret=1;else ret=emitter._events[type].length;return ret};function isFunction(arg){return typeof arg==="function"}function isNumber(arg){return typeof arg==="number"}function isObject(arg){return typeof arg==="object"&&arg!==null}function isUndefined(arg){return arg===void 0}},{}]},{},[]);var snabbdom=require("snabbdom");var EventEmitter=require("events");var ee=new EventEmitter;var patch=snabbdom.init([require("snabbdom/modules/class"),require("snabbdom/modules/props"),require("snabbdom/modules/style"),require("snabbdom/modules/eventlisteners")]);var h=require("snabbdom/h");var app=function(){var actions={changeInput:function(name){ee.emit("changeInput",name)}};var store={state:{input:""},onChangeInput:function(name){this.state.input=name;ee.emit("triggerView",this.state)}};var view={oldNode:document.querySelector(".placeholder"),inputHandler:function(e){actions.changeInput(e.target.value)},render:function(state){var template=h("div",[h("input",{props:{type:"text",placeholder:"Type  your name"},on:{input:this.inputHandler}}),h("span",state.input)]);this.oldNode=patch(this.oldNode,template)}};view.render(store.state);return{store:store,view:view,actions:actions}}();var dispatcher=function(){ee.on("changeInput",function(name){app.store.onChangeInput(name)});ee.on("triggerView",function(state){app.view.render(state)})}();

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "snabbdom": "0.3.1"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->
<div class="placeholder"></div>

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin