requirebin sketch

index.js

var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');
var virtualize = require('vdom-virtualize');

// 1: Create a function that declares what the DOM should look like
function render(count)  {
  var html = '<div id="test">Count is <span>' + count + '</span></div>';
  return virtualize.fromHTML(html);
}

// 2: Initialise the document
var count = 0;      // We need some app data. Here we just store a count.

var tree = render(count);               // We need an initial tree
var rootNode = createElement(tree);     // Create an initial root DOM node ...
document.body.appendChild(rootNode);    // ... and it should be in the document

// 3: Wire up the update logic
setInterval(function update(){
  count++;
  var newTree = render(count);
  var patches = diff(tree, newTree);
  patch(rootNode, patches);
}, 500);

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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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}({"6SZW89":[function(require,module,exports){var diff=require("vtree/diff");module.exports=diff},{"vtree/diff":4}],"virtual-dom/diff":[function(require,module,exports){module.exports=require("6SZW89")},{}],3:[function(require,module,exports){module.exports=isObject;function isObject(x){return typeof x==="object"&&x!==null}},{}],4:[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");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(isThunk(b)){if(isThunk(a)){b=b.vnode=b.render(a);a=a.vnode}else{b=b.vnode=b.render(null)}}if(a===b){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(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 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=shuffle.moves={};while(freeIndex<len){var move=aMatch[i];if(move!==undefined){shuffle[i]=bChildren[move];moves[move]=moveIndex++}else if(i in aMatch){shuffle[i]=undefined;moves[move]=moveIndex++}else{while(bMatch[freeIndex]!==undefined){freeIndex++}if(freeIndex<len){var freeChild=bChildren[freeIndex];if(freeChild){moves[freeIndex]=moveIndex++;shuffle[i]=freeChild}freeIndex++}}i++}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}}},{"./is-thunk":5,"./is-vnode":6,"./is-vtext":7,"./is-widget":8,"./vpatch":10,"is-object":3,"x-is-array":11}],5:[function(require,module,exports){module.exports=isThunk;function isThunk(t){return t&&t.type==="Thunk"}},{}],6:[function(require,module,exports){var version=require("./version");module.exports=isVirtualNode;function isVirtualNode(x){return x&&x.type==="VirtualNode"&&x.version===version}},{"./version":9}],7:[function(require,module,exports){var version=require("./version");module.exports=isVirtualText;function isVirtualText(x){return x&&x.type==="VirtualText"&&x.version===version}},{"./version":9}],8:[function(require,module,exports){module.exports=isWidget;function isWidget(w){return w&&w.type==="Widget"}},{}],9:[function(require,module,exports){module.exports="1"},{}],10:[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;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":9}],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]"}},{}]},{},[]);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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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){module.exports=isObject;function isObject(x){return typeof x==="object"&&x!==null}},{}],3:[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":2,"vtree/is-vhook":10}],4:[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");module.exports=createElement;function createElement(vnode,opts){var doc=opts?opts.document||document:document;var warn=opts?opts.warn:null;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":3,"global/document":6,"vtree/is-vnode":11,"vtree/is-vtext":12,"vtree/is-widget":13}],5:[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}},{}],6:[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 self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"min-document":1}],7:[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;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;for(i=0;i<len;i++){children.push(domNode.childNodes[i])}for(i=0;i<len;i++){var move=bIndex[i];if(move!==undefined){var node=children[move];domNode.removeChild(node);domNode.insertBefore(node,childNodes[i])}}}},{"./apply-properties":3,"./create-element":4,"./update-widget":9,"vtree/is-widget":13,"vtree/vpatch":15}],8:[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){var indices=patchIndices(patches);if(indices.length===0){return rootNode}var index=domIndex(rootNode,patches.a,indices);var ownerDocument=rootNode.ownerDocument;var renderOptions;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":5,"./patch-op":7,"global/document":6,"x-is-array":16}],9:[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":13}],10:[function(require,module,exports){module.exports=isHook;function isHook(hook){return hook&&typeof hook.hook==="function"&&!hook.hasOwnProperty("hook")}},{}],11:[function(require,module,exports){var version=require("./version");module.exports=isVirtualNode;function isVirtualNode(x){return x&&x.type==="VirtualNode"&&x.version===version}},{"./version":14}],12:[function(require,module,exports){var version=require("./version");module.exports=isVirtualText;function isVirtualText(x){return x&&x.type==="VirtualText"&&x.version===version}},{"./version":14}],13:[function(require,module,exports){module.exports=isWidget;function isWidget(w){return w&&w.type==="Widget"}},{}],14:[function(require,module,exports){module.exports="1"},{}],15:[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;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":14}],16:[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]"}},{}],"virtual-dom/patch":[function(require,module,exports){module.exports=require("+4fcEL")},{}],"+4fcEL":[function(require,module,exports){var patch=require("vdom/patch");module.exports=patch},{"vdom/patch":8}]},{},[]);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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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){},{}],WTQaIJ:[function(require,module,exports){var createElement=require("vdom/create-element");module.exports=createElement},{"vdom/create-element":6}],"virtual-dom/create-element":[function(require,module,exports){module.exports=require("WTQaIJ")},{}],4:[function(require,module,exports){module.exports=isObject;function isObject(x){return typeof x==="object"&&x!==null}},{}],5:[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":4,"vtree/is-vhook":8}],6:[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");module.exports=createElement;function createElement(vnode,opts){var doc=opts?opts.document||document:document;var warn=opts?opts.warn:null;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":5,"global/document":7,"vtree/is-vnode":9,"vtree/is-vtext":10,"vtree/is-widget":11}],7:[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 self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"min-document":1}],8:[function(require,module,exports){module.exports=isHook;function isHook(hook){return hook&&typeof hook.hook==="function"&&!hook.hasOwnProperty("hook")}},{}],9:[function(require,module,exports){var version=require("./version");module.exports=isVirtualNode;function isVirtualNode(x){return x&&x.type==="VirtualNode"&&x.version===version}},{"./version":12}],10:[function(require,module,exports){var version=require("./version");module.exports=isVirtualText;function isVirtualText(x){return x&&x.type==="VirtualText"&&x.version===version}},{"./version":12}],11:[function(require,module,exports){module.exports=isWidget;function isWidget(w){return w&&w.type==="Widget"}},{}],12:[function(require,module,exports){module.exports="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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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}({"01FrXA":[function(require,module,exports){var VNode=require("vtree/vnode"),VText=require("vtree/vtext");module.exports=createVNode;function createVNode(domNode,key){key=key||null;if(domNode.nodeType==1)return createFromElement(domNode,key);if(domNode.nodeType==3)return createFromTextNode(domNode,key);return}createVNode.fromHTML=function(html,key){var domNode=document.createElement("div");domNode.innerHTML=html;domNode=domNode.children[0]||domNode;return createVNode(domNode,key)};function createFromTextNode(tNode){return new VText(tNode.nodeValue)}function createFromElement(el){var tagName=el.tagName,namespace=el.namespaceURI=="http://www.w3.org/1999/xhtml"?null:el.namespaceURI,properties=getElementProperties(el),children=[];for(var i=0;i<el.childNodes.length;i++){children.push(createVNode(el.childNodes[i]))}return new VNode(tagName,properties,children,null,namespace)}function getElementProperties(el){var obj={};props.forEach(function(propName){if(!el[propName])return;if("style"==propName){var css={},styleProp;for(var i=0;i<el.style;i++){styleProp=el.style[i];css[styleProp]=el.style.getPropertyValue(styleProp)}obj[propName]=css;return}if("dataset"==propName){var data={};for(var p in el.dataset){data[p]=el.dataset[p]}obj[propName]=data;return}if("attributes"==propName)return;obj[propName]=el[propName];return});return obj}var props=module.exports.properties=["accept","accessKey","action","alt","async","autoComplete","autoPlay","cellPadding","cellSpacing","checked","className","colSpan","content","contentEditable","controls","crossOrigin","data","defer","dir","download","draggable","encType","formNoValidate","href","hrefLang","htmlFor","httpEquiv","icon","id","label","lang","list","loop","max","mediaGroup","method","min","multiple","muted","name","noValidate","pattern","placeholder","poster","preload","radioGroup","readOnly","rel","required","rowSpan","sandbox","scope","scrollLeft","scrolling","scrollTop","selected","span","spellCheck","src","srcDoc","srcSet","start","step","style","tabIndex","target","title","type","value","autoCapitalize","autoCorrect","property","attributes"];var attrs=module.exports.attrs=["allowFullScreen","allowTransparency","charSet","cols","contextMenu","dateTime","disabled","form","frameBorder","height","hidden","maxLength","role","rows","seamless","size","width","wmode","cx","cy","d","dx","dy","fill","fx","fy","gradientTransform","gradientUnits","offset","points","r","rx","ry","spreadMethod","stopColor","stopOpacity","stroke","strokeLinecap","strokeWidth","textAnchor","transform","version","viewBox","x1","x2","x","y1","y2","y"]},{"vtree/vnode":7,"vtree/vtext":8}],"vdom-virtualize":[function(require,module,exports){module.exports=require("01FrXA")},{}],3:[function(require,module,exports){module.exports=isHook;function isHook(hook){return hook&&typeof hook.hook==="function"&&!hook.hasOwnProperty("hook")}},{}],4:[function(require,module,exports){var version=require("./version");module.exports=isVirtualNode;function isVirtualNode(x){return x&&x.type==="VirtualNode"&&x.version===version}},{"./version":6}],5:[function(require,module,exports){module.exports=isWidget;function isWidget(w){return w&&w.type==="Widget"}},{}],6:[function(require,module,exports){module.exports="1"},{}],7:[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":3,"./is-vnode":4,"./is-widget":5,"./version":6}],8:[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":6}]},{},[]);var diff=require("virtual-dom/diff");var patch=require("virtual-dom/patch");var createElement=require("virtual-dom/create-element");var virtualize=require("vdom-virtualize");function render(count){var html='<div id="test">Count is <span>'+count+"</span></div>";return virtualize.fromHTML(html)}var count=0;var tree=render(count);var rootNode=createElement(tree);document.body.appendChild(rootNode);setInterval(function update(){count++;var newTree=render(count);var patches=diff(tree,newTree);patch(rootNode,patches)},500);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "virtual-dom": "0.0.12",
    "vdom-virtualize": "0.0.3"
  }
}

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