requirebin sketch

index.js

'use strict';
var h, mainLoop, render, viewLoop, viewModel;

mainLoop = require('main-loop');

h = require('virtual-dom/h');

viewModel = {
  count: 0,
  countUp: function() {
    return this.count += 1;
  }
};

render = function(vm) {
  return h('div', [
    h('p', [vm.count.toString()]), h('input', {
      type: 'button',
      onclick: vm.countUp.bind(vm),
      value: "Count up"
    })
  ]);
};

viewLoop = mainLoop(viewModel, render);

document.body.appendChild(viewLoop.target);

Object.observe(viewModel, function() {
  return viewLoop.update(viewModel);
});

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){},{}],2:[function(require,module,exports){var process=module.exports={};process.nextTick=function(){var canSetImmediate=typeof window!=="undefined"&&window.setImmediate;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}if(canPost){var queue=[];window.addEventListener("message",function(ev){var source=ev.source;if((source===window||source===null)&&ev.data==="process-tick"){ev.stopPropagation();if(queue.length>0){var fn=queue.shift();fn()}}},true);return function nextTick(fn){queue.push(fn);window.postMessage("process-tick","*")}}return function nextTick(fn){setTimeout(fn,0)}}();process.title="browser";process.browser=true;process.env={};process.argv=[];function noop(){}process.on=noop;process.addListener=noop;process.once=noop;process.off=noop;process.removeListener=noop;process.removeAllListeners=noop;process.emit=noop;process.binding=function(name){throw new Error("process.binding is not supported")};process.cwd=function(){return"/"};process.chdir=function(dir){throw new Error("process.chdir is not supported")}},{}],3:[function(require,module,exports){module.exports=function(obj){if(typeof obj==="string")return camelCase(obj);return walk(obj)};function walk(obj){if(!obj||typeof obj!=="object")return obj;if(isArray(obj))return map(obj,walk);return reduce(objectKeys(obj),function(acc,key){var camel=camelCase(key);acc[camel]=walk(obj[key]);return acc},{})}function camelCase(str){return str.replace(/[_.-](\w|$)/g,function(_,x){return x.toUpperCase()})}var isArray=Array.isArray||function(obj){return Object.prototype.toString.call(obj)==="[object Array]"};var has=Object.prototype.hasOwnProperty;var objectKeys=Object.keys||function(obj){var keys=[];for(var key in obj){if(has.call(obj,key))keys.push(key)}return keys};function map(xs,f){if(xs.map)return xs.map(f);var res=[];for(var i=0;i<xs.length;i++){res.push(f(xs[i],i))}return res}function reduce(xs,f,acc){if(xs.reduce)return xs.reduce(f,acc);for(var i=0;i<xs.length;i++){acc=f(acc,xs[i],i)}return acc}},{}],4:[function(require,module,exports){var nargs=/\{([0-9a-zA-Z]+)\}/g;var slice=Array.prototype.slice;module.exports=template;function template(string){var args;if(arguments.length===2&&typeof arguments[1]==="object"){args=arguments[1]}else{args=slice.call(arguments,1)}if(!args||!args.hasOwnProperty){args={}}return string.replace(nargs,function replaceArg(match,i,index){var result;if(string[index-1]==="{"&&string[index+match.length]==="}"){return i}else{result=args.hasOwnProperty(i)?args[i]:null;if(result===null||result===undefined){return""}return result}})}},{}],5:[function(require,module,exports){module.exports=hasKeys;function hasKeys(source){return source!==null&&(typeof source==="object"||typeof source==="function")}},{}],6:[function(require,module,exports){var Keys=require("object-keys");var hasKeys=require("./has-keys");module.exports=extend;function extend(target){var sources=[].slice.call(arguments,1);for(var i=0;i<sources.length;i++){var source=sources[i];if(!hasKeys(source)){continue}var keys=Keys(source);for(var j=0;j<keys.length;j++){var name=keys[j];target[name]=source[name]}}return target}},{"./has-keys":5,"object-keys":8}],7:[function(require,module,exports){var hasOwn=Object.prototype.hasOwnProperty;var toString=Object.prototype.toString;var isFunction=function(fn){var isFunc=typeof fn==="function"&&!(fn instanceof RegExp)||toString.call(fn)==="[object Function]";if(!isFunc&&typeof window!=="undefined"){isFunc=fn===window.setTimeout||fn===window.alert||fn===window.confirm||fn===window.prompt}return isFunc};module.exports=function forEach(obj,fn){if(!isFunction(fn)){throw new TypeError("iterator must be a function")}var i,k,isString=typeof obj==="string",l=obj.length,context=arguments.length>2?arguments[2]:null;if(l===+l){for(i=0;i<l;i++){if(context===null){fn(isString?obj.charAt(i):obj[i],i,obj)}else{fn.call(context,isString?obj.charAt(i):obj[i],i,obj)}}}else{for(k in obj){if(hasOwn.call(obj,k)){if(context===null){fn(obj[k],k,obj)}else{fn.call(context,obj[k],k,obj)}}}}}},{}],8:[function(require,module,exports){module.exports=Object.keys||require("./shim")},{"./shim":10}],9:[function(require,module,exports){var toString=Object.prototype.toString;module.exports=function isArguments(value){var str=toString.call(value);var isArguments=str==="[object Arguments]";if(!isArguments){isArguments=str!=="[object Array]"&&value!==null&&typeof value==="object"&&typeof value.length==="number"&&value.length>=0&&toString.call(value.callee)==="[object Function]"}return isArguments}},{}],10:[function(require,module,exports){(function(){"use strict";var has=Object.prototype.hasOwnProperty,toString=Object.prototype.toString,forEach=require("./foreach"),isArgs=require("./isArguments"),hasDontEnumBug=!{toString:null}.propertyIsEnumerable("toString"),hasProtoEnumBug=function(){}.propertyIsEnumerable("prototype"),dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],keysShim;keysShim=function keys(object){var isObject=object!==null&&typeof object==="object",isFunction=toString.call(object)==="[object Function]",isArguments=isArgs(object),theKeys=[];if(!isObject&&!isFunction&&!isArguments){throw new TypeError("Object.keys called on a non-object")}if(isArguments){forEach(object,function(value){theKeys.push(value)})}else{var name,skipProto=hasProtoEnumBug&&isFunction;for(name in object){if(!(skipProto&&name==="prototype")&&has.call(object,name)){theKeys.push(name)}}}if(hasDontEnumBug){var ctor=object.constructor,skipConstructor=ctor&&ctor.prototype===object;forEach(dontEnums,function(dontEnum){if(!(skipConstructor&&dontEnum==="constructor")&&has.call(object,dontEnum)){theKeys.push(dontEnum)}})}return theKeys};module.exports=keysShim})()},{"./foreach":7,"./isArguments":9}],11:[function(require,module,exports){var camelize=require("camelize");var template=require("string-template");var extend=require("xtend/mutable");module.exports=TypedError;function TypedError(args){if(!args){throw new Error("args is required")}if(!args.type){throw new Error("args.type is required")}if(!args.message){throw new Error("args.message is required")}var message=args.message;if(args.type&&!args.name){var errorName=camelize(args.type)+"Error";args.name=errorName[0].toUpperCase()+errorName.substr(1)}createError.type=args.type;createError._name=args.name;return createError;function createError(opts){var result=new Error;Object.defineProperty(result,"type",{value:result.type,enumerable:true,writable:true,configurable:true});var options=extend({},args,opts);extend(result,options);result.message=template(message,options);return result}}},{camelize:3,"string-template":4,"xtend/mutable":6}],12:[function(require,module,exports){var now=require("performance-now"),global=typeof window==="undefined"?{}:window,vendors=["moz","webkit"],suffix="AnimationFrame",raf=global["request"+suffix],caf=global["cancel"+suffix]||global["cancelRequest"+suffix],isNative=true;for(var i=0;i<vendors.length&&!raf;i++){raf=global[vendors[i]+"Request"+suffix];caf=global[vendors[i]+"Cancel"+suffix]||global[vendors[i]+"CancelRequest"+suffix]}if(!raf||!caf){isNative=false;var last=0,id=0,queue=[],frameDuration=1e3/60;raf=function(callback){if(queue.length===0){var _now=now(),next=Math.max(0,frameDuration-(_now-last));last=next+_now;setTimeout(function(){var cp=queue.slice(0);queue.length=0;for(var i=0;i<cp.length;i++){if(!cp[i].cancelled){try{cp[i].callback(last)}catch(e){setTimeout(function(){throw e},0)}}}},Math.round(next))}queue.push({handle:++id,callback:callback,cancelled:false});return id};caf=function(handle){for(var i=0;i<queue.length;i++){if(queue[i].handle===handle){queue[i].cancelled=true}}}}module.exports=function(fn){if(!isNative){return raf.call(global,fn)}return raf.call(global,function(){try{fn.apply(this,arguments)}catch(e){setTimeout(function(){throw e},0)}})};module.exports.cancel=function(){caf.apply(global,arguments)}},{"performance-now":13}],13:[function(require,module,exports){(function(process){(function(){var getNanoSeconds,hrtime,loadTime;if(typeof performance!=="undefined"&&performance!==null&&performance.now){module.exports=function(){return performance.now()}}else if(typeof process!=="undefined"&&process!==null&&process.hrtime){module.exports=function(){return(getNanoSeconds()-loadTime)/1e6};hrtime=process.hrtime;getNanoSeconds=function(){var hr;hr=hrtime();return hr[0]*1e9+hr[1]};loadTime=getNanoSeconds()}else if(Date.now){module.exports=function(){return Date.now()-loadTime};loadTime=Date.now()}else{module.exports=function(){return(new Date).getTime()-loadTime};loadTime=(new Date).getTime()}}).call(this)}).call(this,require("_process"))},{_process:2}],14:[function(require,module,exports){var isObject=require("is-object");var isHook=require("vtree/is-vhook");module.exports=applyProperties;function applyProperties(node,props,previous){for(var propName in props){var propValue=props[propName];if(propValue===undefined){removeProperty(node,props,previous,propName)}else if(isHook(propValue)){propValue.hook(node,propName,previous?previous[propName]:undefined)}else{if(isObject(propValue)){patchObject(node,props,previous,propName,propValue)}else if(propValue!==undefined){node[propName]=propValue}}}}function removeProperty(node,props,previous,propName){if(previous){var previousValue=previous[propName];if(!isHook(previousValue)){if(propName==="style"){for(var i in previousValue){node.style[i]=""}}else if(typeof previousValue==="string"){node[propName]=""}else{node[propName]=null}}}}function patchObject(node,props,previous,propName,propValue){if(previous&&isObject(previous[propName])&&getPrototype(previous[propName])!==getPrototype(propValue)){node[propName]=previousValue;return}if(!isObject(node[propName])){node[propName]={}}var replacer=propName==="style"?"":undefined;for(var k in propValue){var value=propValue[k];node[propName][k]=value===undefined?replacer:value}}function getPrototype(value){if(Object.getPrototypeOf){return Object.getPrototypeOf(value)}else if(value.__proto__){return value.__proto__}else if(value.constructor){return value.constructor.prototype}}},{"is-object":18,"vtree/is-vhook":26}],15:[function(require,module,exports){var document=require("global/document");var applyProperties=require("./apply-properties");var isVNode=require("vtree/is-vnode");var isVText=require("vtree/is-vtext");var isWidget=require("vtree/is-widget");var handleThunk=require("vtree/handle-thunk");module.exports=createElement;function createElement(vnode,opts){var doc=opts?opts.document||document:document;var warn=opts?opts.warn:null;vnode=handleThunk(vnode).a;if(isWidget(vnode)){return vnode.init()}else if(isVText(vnode)){return doc.createTextNode(vnode.text)}else if(!isVNode(vnode)){if(warn){warn("Item is not a valid virtual dom node",vnode)}return null}var node=vnode.namespace===null?doc.createElement(vnode.tagName):doc.createElementNS(vnode.namespace,vnode.tagName);var props=vnode.properties;applyProperties(node,props);var children=vnode.children;for(var i=0;i<children.length;i++){var childNode=createElement(children[i],opts);if(childNode){node.appendChild(childNode)}}return node}},{"./apply-properties":14,"global/document":17,"vtree/handle-thunk":24,"vtree/is-vnode":27,"vtree/is-vtext":28,"vtree/is-widget":29}],16:[function(require,module,exports){var noChild={};module.exports=domIndex;function domIndex(rootNode,tree,indices,nodes){if(!indices||indices.length===0){return{}}else{indices.sort(ascending);return recurse(rootNode,tree,indices,nodes,0)}}function recurse(rootNode,tree,indices,nodes,rootIndex){nodes=nodes||{};if(rootNode){if(indexInRange(indices,rootIndex,rootIndex)){nodes[rootIndex]=rootNode}var vChildren=tree.children;if(vChildren){var childNodes=rootNode.childNodes;for(var i=0;i<tree.children.length;i++){rootIndex+=1;var vChild=vChildren[i]||noChild;var nextIndex=rootIndex+(vChild.count||0);if(indexInRange(indices,rootIndex,nextIndex)){recurse(childNodes[i],vChild,indices,nodes,rootIndex)}rootIndex=nextIndex}}}return nodes}function indexInRange(indices,left,right){if(indices.length===0){return false}var minIndex=0;var maxIndex=indices.length-1;var currentIndex;var currentItem;while(minIndex<=maxIndex){currentIndex=(maxIndex+minIndex)/2>>0;currentItem=indices[currentIndex];if(minIndex===maxIndex){return currentItem>=left&&currentItem<=right}else if(currentItem<left){minIndex=currentIndex+1}else if(currentItem>right){maxIndex=currentIndex-1}else{return true}}return false}function ascending(a,b){return a>b?1:-1}},{}],17:[function(require,module,exports){(function(global){var topLevel=typeof global!=="undefined"?global:typeof window!=="undefined"?window:{};var minDoc=require("min-document");if(typeof document!=="undefined"){module.exports=document}else{var doccy=topLevel["__GLOBAL_DOCUMENT_CACHE@4"];if(!doccy){doccy=topLevel["__GLOBAL_DOCUMENT_CACHE@4"]=minDoc}module.exports=doccy}}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"min-document":1}],18:[function(require,module,exports){module.exports=isObject;function isObject(x){return typeof x==="object"&&x!==null}},{}],19:[function(require,module,exports){var nativeIsArray=Array.isArray;var toString=Object.prototype.toString;module.exports=nativeIsArray||isArray;function isArray(obj){return toString.call(obj)==="[object Array]"}},{}],20:[function(require,module,exports){var applyProperties=require("./apply-properties");var isWidget=require("vtree/is-widget");var VPatch=require("vtree/vpatch");var render=require("./create-element");var updateWidget=require("./update-widget");module.exports=applyPatch;function applyPatch(vpatch,domNode,renderOptions){var type=vpatch.type;var vNode=vpatch.vNode;var patch=vpatch.patch;switch(type){case VPatch.REMOVE:return removeNode(domNode,vNode);case VPatch.INSERT:return insertNode(domNode,patch,renderOptions);case VPatch.VTEXT:return stringPatch(domNode,vNode,patch,renderOptions);case VPatch.WIDGET:return widgetPatch(domNode,vNode,patch,renderOptions);case VPatch.VNODE:return vNodePatch(domNode,vNode,patch,renderOptions);case VPatch.ORDER:reorderChildren(domNode,patch);return domNode;case VPatch.PROPS:applyProperties(domNode,patch,vNode.properties);return domNode;case VPatch.THUNK:return replaceRoot(domNode,renderOptions.patch(domNode,patch,renderOptions));default:return domNode}}function removeNode(domNode,vNode){var parentNode=domNode.parentNode;if(parentNode){parentNode.removeChild(domNode)}destroyWidget(domNode,vNode);return null}function insertNode(parentNode,vNode,renderOptions){var newNode=render(vNode,renderOptions);if(parentNode){parentNode.appendChild(newNode)}return parentNode}function stringPatch(domNode,leftVNode,vText,renderOptions){var newNode;if(domNode.nodeType===3){domNode.replaceData(0,domNode.length,vText.text);newNode=domNode}else{var parentNode=domNode.parentNode;newNode=render(vText,renderOptions);if(parentNode){parentNode.replaceChild(newNode,domNode)}}destroyWidget(domNode,leftVNode);return newNode}function widgetPatch(domNode,leftVNode,widget,renderOptions){if(updateWidget(leftVNode,widget)){return widget.update(leftVNode,domNode)||domNode}var parentNode=domNode.parentNode;var newWidget=render(widget,renderOptions);if(parentNode){parentNode.replaceChild(newWidget,domNode)}destroyWidget(domNode,leftVNode);return newWidget}function vNodePatch(domNode,leftVNode,vNode,renderOptions){var parentNode=domNode.parentNode;var newNode=render(vNode,renderOptions);if(parentNode){parentNode.replaceChild(newNode,domNode)}destroyWidget(domNode,leftVNode);return newNode}function destroyWidget(domNode,w){if(typeof w.destroy==="function"&&isWidget(w)){w.destroy(domNode)}}function reorderChildren(domNode,bIndex){var children=[];var childNodes=domNode.childNodes;var len=childNodes.length;var i;var reverseIndex=bIndex.reverse;for(i=0;i<len;i++){children.push(domNode.childNodes[i])}var insertOffset=0;var move;var node;var insertNode;for(i=0;i<len;i++){move=bIndex[i];if(move!==undefined&&move!==i){if(reverseIndex[i]>i){insertOffset++}node=children[move];insertNode=childNodes[i+insertOffset];if(node!==insertNode){domNode.insertBefore(node,insertNode)}if(move<i){insertOffset--}}if(i in bIndex.removes){insertOffset++}}}function replaceRoot(oldRoot,newRoot){if(oldRoot&&newRoot&&oldRoot!==newRoot&&oldRoot.parentNode){console.log(oldRoot);oldRoot.parentNode.replaceChild(newRoot,oldRoot)}return newRoot}},{"./apply-properties":14,"./create-element":15,"./update-widget":22,"vtree/is-widget":29,"vtree/vpatch":33}],21:[function(require,module,exports){var document=require("global/document");var isArray=require("x-is-array");var domIndex=require("./dom-index");var patchOp=require("./patch-op");module.exports=patch;function patch(rootNode,patches){return patchRecursive(rootNode,patches)}function patchRecursive(rootNode,patches,renderOptions){var indices=patchIndices(patches);if(indices.length===0){return rootNode}var index=domIndex(rootNode,patches.a,indices);var ownerDocument=rootNode.ownerDocument;if(!renderOptions){renderOptions={patch:patchRecursive};if(ownerDocument!==document){renderOptions.document=ownerDocument}}for(var i=0;i<indices.length;i++){var nodeIndex=indices[i];rootNode=applyPatch(rootNode,index[nodeIndex],patches[nodeIndex],renderOptions)}return rootNode}function applyPatch(rootNode,domNode,patchList,renderOptions){if(!domNode){return rootNode}var newNode;if(isArray(patchList)){for(var i=0;i<patchList.length;i++){newNode=patchOp(patchList[i],domNode,renderOptions);if(domNode===rootNode){rootNode=newNode}}}else{newNode=patchOp(patchList,domNode,renderOptions);if(domNode===rootNode){rootNode=newNode}}return rootNode}function patchIndices(patches){var indices=[];for(var key in patches){if(key!=="a"){indices.push(Number(key))}}return indices}},{"./dom-index":16,"./patch-op":20,"global/document":17,"x-is-array":19}],22:[function(require,module,exports){var isWidget=require("vtree/is-widget");module.exports=updateWidget;function updateWidget(a,b){if(isWidget(a)&&isWidget(b)){if("name"in a&&"name"in b){return a.id===b.id}else{return a.init===b.init}}return false}},{"vtree/is-widget":29}],23:[function(require,module,exports){var isArray=require("x-is-array");var isObject=require("is-object");var VPatch=require("./vpatch");var isVNode=require("./is-vnode");var isVText=require("./is-vtext");var isWidget=require("./is-widget");var isThunk=require("./is-thunk");var handleThunk=require("./handle-thunk");module.exports=diff;function diff(a,b){var patch={a:a};walk(a,b,patch,0);return patch}function walk(a,b,patch,index){if(a===b){if(isThunk(a)||isThunk(b)){thunks(a,b,patch,index)}else{hooks(b,patch,index)}return}var apply=patch[index];if(b==null){apply=appendPatch(apply,new VPatch(VPatch.REMOVE,a,b));destroyWidgets(a,patch,index)}else if(isThunk(a)||isThunk(b)){thunks(a,b,patch,index)}else if(isVNode(b)){if(isVNode(a)){if(a.tagName===b.tagName&&a.namespace===b.namespace&&a.key===b.key){var propsPatch=diffProps(a.properties,b.properties,b.hooks);if(propsPatch){apply=appendPatch(apply,new VPatch(VPatch.PROPS,a,propsPatch))}}else{apply=appendPatch(apply,new VPatch(VPatch.VNODE,a,b));destroyWidgets(a,patch,index)}apply=diffChildren(a,b,patch,apply,index)}else{apply=appendPatch(apply,new VPatch(VPatch.VNODE,a,b));destroyWidgets(a,patch,index)}}else if(isVText(b)){if(!isVText(a)){apply=appendPatch(apply,new VPatch(VPatch.VTEXT,a,b));destroyWidgets(a,patch,index)}else if(a.text!==b.text){apply=appendPatch(apply,new VPatch(VPatch.VTEXT,a,b))}}else if(isWidget(b)){apply=appendPatch(apply,new VPatch(VPatch.WIDGET,a,b));if(!isWidget(a)){destroyWidgets(a,patch,index)}}if(apply){patch[index]=apply}}function diffProps(a,b,hooks){var diff;for(var aKey in a){if(!(aKey in b)){diff=diff||{};diff[aKey]=undefined}var aValue=a[aKey];var bValue=b[aKey];if(hooks&&aKey in hooks){diff=diff||{};diff[aKey]=bValue}else{if(isObject(aValue)&&isObject(bValue)){if(getPrototype(bValue)!==getPrototype(aValue)){diff=diff||{};diff[aKey]=bValue}else{var objectDiff=diffProps(aValue,bValue);if(objectDiff){diff=diff||{};diff[aKey]=objectDiff}}}else if(aValue!==bValue){diff=diff||{};diff[aKey]=bValue}}}for(var bKey in b){if(!(bKey in a)){diff=diff||{};diff[bKey]=b[bKey]}}return diff}function getPrototype(value){if(Object.getPrototypeOf){return Object.getPrototypeOf(value)}else if(value.__proto__){return value.__proto__}else if(value.constructor){return value.constructor.prototype}}function diffChildren(a,b,patch,apply,index){var aChildren=a.children;var bChildren=reorder(aChildren,b.children);var aLen=aChildren.length;var bLen=bChildren.length;var len=aLen>bLen?aLen:bLen;for(var i=0;i<len;i++){var leftNode=aChildren[i];var rightNode=bChildren[i];index+=1;if(!leftNode){if(rightNode){apply=appendPatch(apply,new VPatch(VPatch.INSERT,null,rightNode))}}else if(!rightNode){if(leftNode){patch[index]=new VPatch(VPatch.REMOVE,leftNode,null);destroyWidgets(leftNode,patch,index)}}else{walk(leftNode,rightNode,patch,index)}if(isVNode(leftNode)&&leftNode.count){index+=leftNode.count}}if(bChildren.moves){apply=appendPatch(apply,new VPatch(VPatch.ORDER,a,bChildren.moves))}return apply}function destroyWidgets(vNode,patch,index){if(isWidget(vNode)){if(typeof vNode.destroy==="function"){patch[index]=new VPatch(VPatch.REMOVE,vNode,null)}}else if(isVNode(vNode)&&vNode.hasWidgets){var children=vNode.children;var len=children.length;for(var i=0;i<len;i++){var child=children[i];index+=1;destroyWidgets(child,patch,index);if(isVNode(child)&&child.count){index+=child.count}}}}function thunks(a,b,patch,index){var nodes=handleThunk(a,b);var thunkPatch=diff(nodes.a,nodes.b);if(hasPatches(thunkPatch)){patch[index]=new VPatch(VPatch.THUNK,null,thunkPatch)}}function hasPatches(patch){for(var index in patch){if(index!=="a"){return true}}return false}function hooks(vNode,patch,index){if(isVNode(vNode)){if(vNode.hooks){patch[index]=new VPatch(VPatch.PROPS,vNode.hooks,vNode.hooks)}if(vNode.descendantHooks){var children=vNode.children;var len=children.length;for(var i=0;i<len;i++){var child=children[i];index+=1;hooks(child,patch,index);if(isVNode(child)&&child.count){index+=child.count}}}}}function reorder(aChildren,bChildren){var bKeys=keyIndex(bChildren);if(!bKeys){return bChildren}var aKeys=keyIndex(aChildren);if(!aKeys){return bChildren}var bMatch={},aMatch={};for(var key in bKeys){bMatch[bKeys[key]]=aKeys[key]}for(var key in aKeys){aMatch[aKeys[key]]=bKeys[key]}var aLen=aChildren.length;var bLen=bChildren.length;var len=aLen>bLen?aLen:bLen;var shuffle=[];var freeIndex=0;var i=0;var moveIndex=0;var moves={};var removes=moves.removes={};var reverse=moves.reverse={};var hasMoves=false;while(freeIndex<len){var move=aMatch[i];if(move!==undefined){shuffle[i]=bChildren[move];if(move!==moveIndex){moves[move]=moveIndex;reverse[moveIndex]=move;hasMoves=true}moveIndex++}else if(i in aMatch){shuffle[i]=undefined;removes[i]=moveIndex++;hasMoves=true}else{while(bMatch[freeIndex]!==undefined){freeIndex++}if(freeIndex<len){var freeChild=bChildren[freeIndex];if(freeChild){shuffle[i]=freeChild;if(freeIndex!==moveIndex){hasMoves=true;moves[freeIndex]=moveIndex;reverse[moveIndex]=freeIndex}moveIndex++}freeIndex++}}i++}if(hasMoves){shuffle.moves=moves}return shuffle}function keyIndex(children){var i,keys;for(i=0;i<children.length;i++){var child=children[i];if(child.key!==undefined){keys=keys||{};keys[child.key]=i}}return keys}function appendPatch(apply,patch){if(apply){if(isArray(apply)){apply.push(patch)}else{apply=[apply,patch]}return apply}else{return patch}}},{"./handle-thunk":24,"./is-thunk":25,"./is-vnode":27,"./is-vtext":28,"./is-widget":29,"./vpatch":33,"is-object":30,"x-is-array":31}],24:[function(require,module,exports){var isVNode=require("./is-vnode");var isVText=require("./is-vtext");var isWidget=require("./is-widget");var isThunk=require("./is-thunk");module.exports=handleThunk;function handleThunk(a,b){var renderedA=a;var renderedB=b;if(isThunk(b)){renderedB=renderThunk(b,a)}if(isThunk(a)){renderedA=renderThunk(a,null)}return{a:renderedA,b:renderedB}}function renderThunk(thunk,previous){var renderedThunk=thunk.vnode;if(!renderedThunk){renderedThunk=thunk.vnode=thunk.render(previous)}if(!(isVNode(renderedThunk)||isVText(renderedThunk)||isWidget(renderedThunk))){throw new Error("thunk did not return a valid node")}return renderedThunk}},{"./is-thunk":25,"./is-vnode":27,"./is-vtext":28,"./is-widget":29}],25:[function(require,module,exports){module.exports=isThunk;function isThunk(t){return t&&t.type==="Thunk"}},{}],26:[function(require,module,exports){module.exports=isHook;function isHook(hook){return hook&&typeof hook.hook==="function"&&!hook.hasOwnProperty("hook")}},{}],27:[function(require,module,exports){var version=require("./version");module.exports=isVirtualNode;function isVirtualNode(x){return x&&x.type==="VirtualNode"&&x.version===version}},{"./version":32}],28:[function(require,module,exports){var version=require("./version");module.exports=isVirtualText;function isVirtualText(x){return x&&x.type==="VirtualText"&&x.version===version}},{"./version":32}],29:[function(require,module,exports){module.exports=isWidget;function isWidget(w){return w&&w.type==="Widget"}},{}],30:[function(require,module,exports){module.exports=require(18)},{}],31:[function(require,module,exports){module.exports=require(19)},{}],32:[function(require,module,exports){module.exports="1"},{}],33:[function(require,module,exports){var version=require("./version");VirtualPatch.NONE=0;VirtualPatch.VTEXT=1;VirtualPatch.VNODE=2;VirtualPatch.WIDGET=3;VirtualPatch.PROPS=4;VirtualPatch.ORDER=5;VirtualPatch.INSERT=6;VirtualPatch.REMOVE=7;VirtualPatch.THUNK=8;module.exports=VirtualPatch;function VirtualPatch(type,vNode,patch){this.type=Number(type);this.vNode=vNode;this.patch=patch}VirtualPatch.prototype.version=version;VirtualPatch.prototype.type="VirtualPatch"},{"./version":32}],"main-loop":[function(require,module,exports){var raf=require("raf");var vtreeDiff=require("vtree/diff");var vdomCreate=require("vdom/create-element");var vdomPatch=require("vdom/patch");var TypedError=require("error/typed");var InvalidUpdateInRender=TypedError({type:"main-loop.invalid.update.in-render",message:"main-loop: Unexpected update occurred in loop.\n"+"We are currently rendering a view, "+"you can't change state right now.\n"+"The diff is: {stringDiff}.\n"+"SUGGESTED FIX: find the state mutation in your view "+"or rendering function and remove it.\n"+"The view should not have any side effects.\n",diff:null,stringDiff:null});module.exports=main;function main(initialState,view,opts){opts=opts||{};var currentState=initialState;var create=opts.create||vdomCreate;var diff=opts.diff||vtreeDiff;var patch=opts.patch||vdomPatch;var redrawScheduled=false;var tree=opts.initialTree||view(currentState);var target=opts.target||create(tree,opts);var inRenderingTransaction=false;currentState=null;return{target:target,update:update};function update(state){if(inRenderingTransaction){throw InvalidUpdateInRender({diff:state._diff,stringDiff:JSON.stringify(state._diff)})}if(currentState===null&&!redrawScheduled){redrawScheduled=true;raf(redraw)}currentState=state}function redraw(){redrawScheduled=false;if(currentState===null){return}inRenderingTransaction=true;var newTree=view(currentState);if(opts.createOnly){create(newTree,opts)}else{var patches=diff(tree,newTree,opts);target=patch(target,patches,opts)}inRenderingTransaction=false;tree=newTree;currentState=null}}},{"error/typed":11,raf:12,"vdom/create-element":15,"vdom/patch":21,"vtree/diff":23}]},{},[]);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){var isArray=require("x-is-array");var isString=require("x-is-string");var VNode=require("vtree/vnode.js");var VText=require("vtree/vtext.js");var isVNode=require("vtree/is-vnode");var isVText=require("vtree/is-vtext");var isWidget=require("vtree/is-widget");var parseTag=require("./parse-tag");module.exports=h;function h(tagName,properties,children){var tag,props,childNodes,key;if(!children){if(isChildren(properties)){children=properties;properties=undefined}}tag=parseTag(tagName,properties);if(!isString(tag)){props=tag.properties;tag=tag.tagName}else{props=properties}if(isArray(children)){var len=children.length;for(var i=0;i<len;i++){var child=children[i];if(isString(child)){children[i]=new VText(child)}}childNodes=children}else if(isString(children)){childNodes=[new VText(children)]}else if(isChild(children)){childNodes=[children]}if(props&&"key"in props){key=props.key;delete props.key}return new VNode(tag,props,childNodes,key)}function isChild(x){return isVNode(x)||isVText(x)||isWidget(x)}function isChildren(x){return isArray(x)||isString(x)||isChild(x)}},{"./parse-tag":2,"vtree/is-vnode":5,"vtree/is-vtext":6,"vtree/is-widget":7,"vtree/vnode.js":9,"vtree/vtext.js":10,"x-is-array":11,"x-is-string":12}],2:[function(require,module,exports){var split=require("browser-split");var classIdSplit=/([\.#]?[a-zA-Z0-9_:-]+)/;var notClassId=/^\.|#/;module.exports=parseTag;function parseTag(tag,props){if(!tag){return"div"}var noId=!props||!("id"in props);var tagParts=split(tag,classIdSplit);var tagName=null;if(notClassId.test(tagParts[1])){tagName="div"}var id,classes,part,type,i;for(i=0;i<tagParts.length;i++){part=tagParts[i];if(!part){continue}type=part.charAt(0);if(!tagName){tagName=part}else if(type==="."){classes=classes||[];classes.push(part.substring(1,part.length))}else if(type==="#"&&noId){id=part.substring(1,part.length)}}var parsedTags;if(props){if(id!==undefined&&!("id"in props)){props.id=id}if(classes){if(props.className){classes.push(props.className)}props.className=classes.join(" ")}parsedTags=tagName}else if(classes||id!==undefined){var properties={};if(id!==undefined){properties.id=id}if(classes){properties.className=classes.join(" ")}parsedTags={tagName:tagName,properties:properties}}else{parsedTags=tagName}return parsedTags}},{"browser-split":3}],3:[function(require,module,exports){module.exports=function split(undef){var nativeSplit=String.prototype.split,compliantExecNpcg=/()??/.exec("")[1]===undef,self;self=function(str,separator,limit){if(Object.prototype.toString.call(separator)!=="[object RegExp]"){return nativeSplit.call(str,separator,limit)}var output=[],flags=(separator.ignoreCase?"i":"")+(separator.multiline?"m":"")+(separator.extended?"x":"")+(separator.sticky?"y":""),lastLastIndex=0,separator=new RegExp(separator.source,flags+"g"),separator2,match,lastIndex,lastLength;str+="";if(!compliantExecNpcg){separator2=new RegExp("^"+separator.source+"$(?!\\s)",flags)}limit=limit===undef?-1>>>0:limit>>>0;while(match=separator.exec(str)){lastIndex=match.index+match[0].length;if(lastIndex>lastLastIndex){output.push(str.slice(lastLastIndex,match.index));if(!compliantExecNpcg&&match.length>1){match[0].replace(separator2,function(){for(var i=1;i<arguments.length-2;i++){if(arguments[i]===undef){match[i]=undef}}})}if(match.length>1&&match.index<str.length){Array.prototype.push.apply(output,match.slice(1))}lastLength=match[0].length;
lastLastIndex=lastIndex;if(output.length>=limit){break}}if(separator.lastIndex===match.index){separator.lastIndex++}}if(lastLastIndex===str.length){if(lastLength||!separator.test("")){output.push("")}}else{output.push(str.slice(lastLastIndex))}return output.length>limit?output.slice(0,limit):output};return self}()},{}],4:[function(require,module,exports){module.exports=isHook;function isHook(hook){return hook&&typeof hook.hook==="function"&&!hook.hasOwnProperty("hook")}},{}],5:[function(require,module,exports){var version=require("./version");module.exports=isVirtualNode;function isVirtualNode(x){return x&&x.type==="VirtualNode"&&x.version===version}},{"./version":8}],6:[function(require,module,exports){var version=require("./version");module.exports=isVirtualText;function isVirtualText(x){return x&&x.type==="VirtualText"&&x.version===version}},{"./version":8}],7:[function(require,module,exports){module.exports=isWidget;function isWidget(w){return w&&w.type==="Widget"}},{}],8:[function(require,module,exports){module.exports="1"},{}],9:[function(require,module,exports){var version=require("./version");var isVNode=require("./is-vnode");var isWidget=require("./is-widget");var isVHook=require("./is-vhook");module.exports=VirtualNode;var noProperties={};var noChildren=[];function VirtualNode(tagName,properties,children,key,namespace){this.tagName=tagName;this.properties=properties||noProperties;this.children=children||noChildren;this.key=key!=null?String(key):undefined;this.namespace=typeof namespace==="string"?namespace:null;var count=children&&children.length||0;var descendants=0;var hasWidgets=false;var descendantHooks=false;var hooks;for(var propName in properties){if(properties.hasOwnProperty(propName)){var property=properties[propName];if(isVHook(property)){if(!hooks){hooks={}}hooks[propName]=property}}}for(var i=0;i<count;i++){var child=children[i];if(isVNode(child)){descendants+=child.count||0;if(!hasWidgets&&child.hasWidgets){hasWidgets=true}if(!descendantHooks&&(child.hooks||child.descendantHooks)){descendantHooks=true}}else if(!hasWidgets&&isWidget(child)){if(typeof child.destroy==="function"){hasWidgets=true}}}this.count=count+descendants;this.hasWidgets=hasWidgets;this.hooks=hooks;this.descendantHooks=descendantHooks}VirtualNode.prototype.version=version;VirtualNode.prototype.type="VirtualNode"},{"./is-vhook":4,"./is-vnode":5,"./is-widget":7,"./version":8}],10:[function(require,module,exports){var version=require("./version");module.exports=VirtualText;function VirtualText(text){this.text=String(text)}VirtualText.prototype.version=version;VirtualText.prototype.type="VirtualText"},{"./version":8}],11:[function(require,module,exports){var nativeIsArray=Array.isArray;var toString=Object.prototype.toString;module.exports=nativeIsArray||isArray;function isArray(obj){return toString.call(obj)==="[object Array]"}},{}],12:[function(require,module,exports){var toString=Object.prototype.toString;module.exports=isString;function isString(obj){return toString.call(obj)==="[object String]"}},{}],"virtual-dom/h":[function(require,module,exports){var h=require("./h/index.js");module.exports=h},{"./h/index.js":1}]},{},[]);"use strict";var h,mainLoop,render,viewLoop,viewModel;mainLoop=require("main-loop");h=require("virtual-dom/h");viewModel={count:0,countUp:function(){return this.count+=1}};render=function(vm){return h("div",[h("p",[vm.count.toString()]),h("input",{type:"button",onclick:vm.countUp.bind(vm),value:"Count up"})])};viewLoop=mainLoop(viewModel,render);document.body.appendChild(viewLoop.target);Object.observe(viewModel,function(){return viewLoop.update(viewModel)});

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "main-loop": "2.3.0",
    "virtual-dom": "0.0.20"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin