requirebin sketch

index.js

// require() some stuff from npm (like you were using browserify)
// and then hit Run Code to run it on the right

var IncrementalDOM = require('incremental-dom'),
    elementOpen = IncrementalDOM.elementOpen,
    elementOpenStart = IncrementalDOM.elementOpenStart,
    elementOpenEnd = IncrementalDOM.elementOpenEnd,
    elementClose = IncrementalDOM.elementClose,
    elementVoid = IncrementalDOM.elementVoid,
    text = IncrementalDOM.text,
    attr = IncrementalDOM.attr;


function render(data) {
  elementVoid('input', '', [ 'type', 'text' ]);
  elementOpenStart('div', '', null);
  	attr("id", "d1");
  elementOpenEnd();
    if (data.someCondition) {
      text(data.text);
    }
  elementClose('div');
  elementOpen('div');
  text('хуй');
  elementClose('div');

}

var patch = require('incremental-dom').patch;

var data = {
  text: 'Hello World!',
  someCondition: true
};

patch(document.body, function() {
	render(data);
});

patch(document.getElementById('d1'), function() {
	render(data);
});

data.text = 'Hello World! 2';

patch(document.body, function() {
  render(data);
});

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){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")}},{}],"incremental-dom":[function(require,module,exports){(function(process){"use strict";var inAttributes=false;var inSkip=false;var assertInPatch=function(context){if(!context){throw new Error("Cannot call currentElement() unless in patch")}};var assertKeyedTagMatches=function(nodeName,tag,key){if(nodeName!==tag){throw new Error('Was expecting node with key "'+key+'" to be a '+tag+", not a "+nodeName+".")}};var assertNoUnclosedTags=function(openElement,root){if(openElement===root){return}var currentElement=openElement;var openTags=[];while(currentElement&&currentElement!==root){openTags.push(currentElement.nodeName.toLowerCase());currentElement=currentElement.parentNode}throw new Error("One or more tags were not closed:\n"+openTags.join("\n"))};var assertNotInAttributes=function(functionName){if(inAttributes){throw new Error(functionName+"() may not be called between "+"elementOpenStart() and elementOpenEnd().")}};var assertNotInSkip=function(functionName){if(inSkip){throw new Error(functionName+"() may not be called inside an element "+"that has called skip().")}};var assertInAttributes=function(functionName){if(!inAttributes){throw new Error(functionName+"() must be called after "+"elementOpenStart().")}};var assertVirtualAttributesClosed=function(){if(inAttributes){throw new Error("elementOpenEnd() must be called after calling "+"elementOpenStart().")}};var assertPlaceholderKeySpecified=function(key){if(!key){throw new Error("Placeholder elements must have a key specified.")}};var assertCloseMatchesOpenTag=function(nodeName,tag){if(nodeName!==tag){throw new Error("Received a call to close "+tag+" but "+nodeName+" was open.")}};var assertNoChildrenDeclaredYet=function(functionName,previousNode){if(previousNode!==null){throw new Error(functionName+"() must come before any child "+"declarations inside the current element.")}};var setInAttributes=function(value){var previous=inAttributes;inAttributes=value;return previous};var setInSkip=function(value){var previous=inSkip;inSkip=value;return previous};exports.notifications={nodesCreated:null,nodesDeleted:null};function Context(){this.created=exports.notifications.nodesCreated&&[];this.deleted=exports.notifications.nodesDeleted&&[]}Context.prototype.markCreated=function(node){if(this.created){this.created.push(node)}};Context.prototype.markDeleted=function(node){if(this.deleted){this.deleted.push(node)}};Context.prototype.notifyChanges=function(){if(this.created&&this.created.length>0){exports.notifications.nodesCreated(this.created)}if(this.deleted&&this.deleted.length>0){exports.notifications.nodesDeleted(this.deleted)}};var hasOwnProperty=Object.prototype.hasOwnProperty;var create=Object.create;var has=function(map,property){return hasOwnProperty.call(map,property)};var createMap=function(){return create(null)};function NodeData(nodeName,key){this.attrs=createMap();this.attrsArr=[];this.newAttrs=createMap();this.key=key;this.keyMap=null;this.keyMapValid=true;this.nodeName=nodeName;this.text=null}var initData=function(node,nodeName,key){var data=new NodeData(nodeName,key);node["__incrementalDOMData"]=data;return data};var getData=function(node){var data=node["__incrementalDOMData"];if(!data){var nodeName=node.nodeName.toLowerCase();var key=null;if(node instanceof Element){key=node.getAttribute("key")}data=initData(node,nodeName,key)}return data};exports.symbols={"default":"__default",placeholder:"__placeholder"};exports.applyAttr=function(el,name,value){if(value==null){el.removeAttribute(name)}else{el.setAttribute(name,value)}};exports.applyProp=function(el,name,value){el[name]=value};var applyStyle=function(el,name,style){if(typeof style==="string"){el.style.cssText=style}else{el.style.cssText="";var elStyle=el.style;var obj=style;for(var prop in obj){if(has(obj,prop)){elStyle[prop]=obj[prop]}}}};var applyAttributeTyped=function(el,name,value){var type=typeof value;if(type==="object"||type==="function"){exports.applyProp(el,name,value)}else{exports.applyAttr(el,name,value)}};var updateAttribute=function(el,name,value){var data=getData(el);var attrs=data.attrs;if(attrs[name]===value){return}var mutator=exports.attributes[name]||exports.attributes[exports.symbols.default];mutator(el,name,value);attrs[name]=value};exports.attributes=createMap();exports.attributes[exports.symbols.default]=applyAttributeTyped;exports.attributes[exports.symbols.placeholder]=function(){};exports.attributes["style"]=applyStyle;var getNamespaceForTag=function(tag,parent){if(tag==="svg"){return"http://www.w3.org/2000/svg"}if(getData(parent).nodeName==="foreignObject"){return null}return parent.namespaceURI};var createElement=function(doc,parent,tag,key,statics){var namespace=getNamespaceForTag(tag,parent);var el;if(namespace){el=doc.createElementNS(namespace,tag)}else{el=doc.createElement(tag)}initData(el,tag,key);if(statics){for(var i=0;i<statics.length;i+=2){updateAttribute(el,statics[i],statics[i+1])}}return el};var createText=function(doc){var node=doc.createTextNode("");initData(node,"#text",null);return node};var createKeyMap=function(el){var map=createMap();var children=el.children;var count=children.length;for(var i=0;i<count;i+=1){var child=children[i];var key=getData(child).key;if(key){map[key]=child}}return map};var getKeyMap=function(el){var data=getData(el);if(!data.keyMap){data.keyMap=createKeyMap(el)}return data.keyMap};var getChild=function(parent,key){return key?getKeyMap(parent)[key]:null};var registerChild=function(parent,key,child){getKeyMap(parent)[key]=child};var context=null;var currentNode;var currentParent;var previousNode;var root;var doc;exports.patch=function(node,fn,data){var prevContext=context;var prevRoot=root;var prevDoc=doc;var prevCurrentNode=currentNode;var prevCurrentParent=currentParent;var prevPreviousNode=previousNode;var previousInAttributes=false;var previousInSkip=false;context=new Context;root=node;doc=node.ownerDocument;currentNode=node;currentParent=null;previousNode=null;if(process.env.NODE_ENV!=="production"){previousInAttributes=setInAttributes(false);previousInSkip=setInSkip(false)}enterNode();fn(data);exitNode();if(process.env.NODE_ENV!=="production"){assertVirtualAttributesClosed();assertNoUnclosedTags(previousNode,node);setInAttributes(previousInAttributes);setInSkip(previousInSkip)}context.notifyChanges();context=prevContext;root=prevRoot;doc=prevDoc;currentNode=prevCurrentNode;currentParent=prevCurrentParent;previousNode=prevPreviousNode};var matches=function(nodeName,key){var data=getData(currentNode);return nodeName===data.nodeName&&key==data.key};var alignWithDOM=function(nodeName,key,statics){if(currentNode&&matches(nodeName,key)){return}var node;if(key){node=getChild(currentParent,key);if(node&&process.env.NODE_ENV!=="production"){assertKeyedTagMatches(getData(node).nodeName,nodeName,key)}}if(!node){if(nodeName==="#text"){node=createText(doc)}else{node=createElement(doc,currentParent,nodeName,key,statics)}if(key){registerChild(currentParent,key,node)}context.markCreated(node)}if(currentNode&&getData(currentNode).key){currentParent.replaceChild(node,currentNode);getData(currentParent).keyMapValid=false}else{currentParent.insertBefore(node,currentNode)}currentNode=node};var clearUnvisitedDOM=function(){var node=currentParent;var data=getData(node);var keyMap=data.keyMap;var keyMapValid=data.keyMapValid;var child=node.lastChild;var key;if(child===previousNode&&keyMapValid){return}if(data.attrs[exports.symbols.placeholder]&&node!==root){return}while(child!==previousNode){node.removeChild(child);context.markDeleted(child);key=getData(child).key;if(key){delete keyMap[key]}child=node.lastChild}if(!keyMapValid){for(key in keyMap){child=keyMap[key];if(child.parentNode!==node){context.markDeleted(child);delete keyMap[key]}}data.keyMapValid=true}};var enterNode=function(){currentParent=currentNode;currentNode=currentNode.firstChild;previousNode=null};var nextNode=function(){previousNode=currentNode;currentNode=currentNode.nextSibling};var exitNode=function(){clearUnvisitedDOM();previousNode=currentParent;currentNode=currentParent.nextSibling;currentParent=currentParent.parentNode};var _elementOpen=function(tag,key,statics){alignWithDOM(tag,key,statics);enterNode();return currentParent};var _elementClose=function(){if(process.env.NODE_ENV!=="production"){setInSkip(false)}exitNode();return previousNode};var _text=function(){alignWithDOM("#text",null,null);nextNode();return previousNode};exports.currentElement=function(){if(process.env.NODE_ENV!=="production"){assertInPatch(context);assertNotInAttributes("currentElement")}return currentParent};exports.skip=function(){if(process.env.NODE_ENV!=="production"){assertNoChildrenDeclaredYet("skip",previousNode);setInSkip(true)}previousNode=currentParent.lastChild};var ATTRIBUTES_OFFSET=3;var argsBuilder=[];exports.elementOpen=function(tag,key,statics,var_args){if(process.env.NODE_ENV!=="production"){assertNotInAttributes("elementOpen");assertNotInSkip("elementOpen")}var node=_elementOpen(tag,key,statics);var data=getData(node);var attrsArr=data.attrsArr;var newAttrs=data.newAttrs;var attrsChanged=false;var i=ATTRIBUTES_OFFSET;var j=0;for(;i<arguments.length;i+=1,j+=1){if(attrsArr[j]!==arguments[i]){attrsChanged=true;break}}for(;i<arguments.length;i+=1,j+=1){attrsArr[j]=arguments[i]}if(j<attrsArr.length){attrsChanged=true;attrsArr.length=j}if(attrsChanged){for(i=ATTRIBUTES_OFFSET;i<arguments.length;i+=2){newAttrs[arguments[i]]=arguments[i+1]}for(var attr in newAttrs){updateAttribute(node,attr,newAttrs[attr]);newAttrs[attr]=undefined}}return node};exports.elementOpenStart=function(tag,key,statics){if(process.env.NODE_ENV!=="production"){assertNotInAttributes("elementOpenStart");setInAttributes(true)}argsBuilder[0]=tag;argsBuilder[1]=key;argsBuilder[2]=statics};exports.attr=function(name,value){if(process.env.NODE_ENV!=="production"){assertInAttributes("attr")}argsBuilder.push(name,value)};exports.elementOpenEnd=function(){if(process.env.NODE_ENV!=="production"){assertInAttributes("elementOpenEnd");setInAttributes(false)}var node=exports.elementOpen.apply(null,argsBuilder);argsBuilder.length=0;return node};exports.elementClose=function(tag){if(process.env.NODE_ENV!=="production"){assertNotInAttributes("elementClose")}var node=_elementClose();if(process.env.NODE_ENV!=="production"){assertCloseMatchesOpenTag(getData(node).nodeName,tag)}return node};exports.elementVoid=function(tag,key,statics,var_args){var node=exports.elementOpen.apply(null,arguments);exports.elementClose.apply(null,arguments);return node};exports.elementPlaceholder=function(tag,key,statics,var_args){if(process.env.NODE_ENV!=="production"){assertPlaceholderKeySpecified(key)}exports.elementOpen.apply(null,arguments);exports.skip();return exports.elementClose.apply(null,arguments)};exports.text=function(value,var_args){if(process.env.NODE_ENV!=="production"){assertNotInAttributes("text");assertNotInSkip("text")}var node=_text();var data=getData(node);if(data.text!==value){data.text=value;var formatted=value;for(var i=1;i<arguments.length;i+=1){formatted=arguments[i](formatted)}node.data=formatted}return node}}).call(this,require("_process"))},{_process:1}]},{},[]);var IncrementalDOM=require("incremental-dom"),elementOpen=IncrementalDOM.elementOpen,elementOpenStart=IncrementalDOM.elementOpenStart,elementOpenEnd=IncrementalDOM.elementOpenEnd,elementClose=IncrementalDOM.elementClose,elementVoid=IncrementalDOM.elementVoid,text=IncrementalDOM.text,attr=IncrementalDOM.attr;function render(data){elementVoid("input","",["type","text"]);elementOpenStart("div","",null);attr("id","d1");elementOpenEnd();if(data.someCondition){text(data.text)}elementClose("div");elementOpen("div");text("хуй");elementClose("div")}var patch=require("incremental-dom").patch;var data={text:"Hello World!",someCondition:true};patch(document.body,function(){render(data)});patch(document.getElementById("d1"),function(){render(data)});data.text="Hello World! 2";patch(document.body,function(){render(data)});

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "incremental-dom": "0.3.0"
  }
}

page-body.html

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

page-head.html

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

requirebin.md

made with requirebin