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 deku = require('deku');

var dom = deku.element;
var render = deku.render;
var tree = deku.tree;

var App = {
  render: function(component, setState) {
    var state = component.state;
    
	  function submit(e) {
		  e.preventDefault();
      console.log('HELLO', state);
  		setState({ submitted: !state.submitted });
		};
    
		var classes = {
      'active': state.submitted
    };
    
    return dom('form.box', { class: classes, onSubmit: submit }, [
      dom('button', { type: 'submit' }, 'Submit')
    ]);
  }
};


var app = tree(dom(App));

render(app, document.body);

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 Emitter=require("component-emitter");module.exports=Application;function Application(element){if(!(this instanceof Application))return new Application(element);this.options={};this.sources={};this.element=element}Emitter(Application.prototype);Application.prototype.use=function(plugin){plugin(this);return this};Application.prototype.option=function(name,val){this.options[name]=val;return this};Application.prototype.set=function(name,data){this.sources[name]=data;this.emit("source",name,data);return this};Application.prototype.mount=function(element){this.element=element;this.emit("mount",element);return this};Application.prototype.unmount=function(){if(!this.element)return;this.element=null;this.emit("unmount");return this}},{"component-emitter":8}],2:[function(require,module,exports){var raf=require("component-raf");var Pool=require("dom-pool");var walk=require("dom-walk");var isDom=require("is-dom");var uid=require("get-uid");var throttle=require("per-frame");var keypath=require("object-path");var type=require("component-type");var utils=require("./utils");var svg=require("./svg");var defaults=utils.defaults;var forEach=require("fast.js/forEach");var assign=require("fast.js/object/assign");var reduce=require("fast.js/reduce");var isPromise=require("is-promise");var events={onBlur:"blur",onChange:"change",onClick:"click",onContextMenu:"contextmenu",onCopy:"copy",onCut:"cut",onDoubleClick:"dblclick",onDrag:"drag",onDragEnd:"dragend",onDragEnter:"dragenter",onDragExit:"dragexit",onDragLeave:"dragleave",onDragOver:"dragover",onDragStart:"dragstart",onDrop:"drop",onFocus:"focus",onInput:"input",onKeyDown:"keydown",onKeyUp:"keyup",onMouseDown:"mousedown",onMouseEnter:"mouseenter",onMouseLeave:"mouseleave",onMouseMove:"mousemove",onMouseOut:"mouseout",onMouseOver:"mouseover",onMouseUp:"mouseup",onPaste:"paste",onScroll:"scroll",onSubmit:"submit",onTouchCancel:"touchcancel",onTouchEnd:"touchend",onTouchMove:"touchmove",onTouchStart:"touchstart"};var avoidPooling=["input","textarea"];module.exports=render;function render(app,container,opts){var frameId;var isRendering;var rootId="root";var currentElement;var currentNativeElement;var connections={};var components={};var entities={};var pools={};var handlers={};var mountQueue=[];var children={};children[rootId]={};if(!isDom(container)){throw new Error("Container element must be a DOM element")}var options=defaults(assign({},app.options||{},opts||{}),{pooling:true,batching:true,validateProps:false});addNativeEventListeners();app.on("unmount",onunmount);app.on("mount",onmount);app.on("source",onupdate);if(app.element)render();function teardown(){removeNativeEventListeners();removeNativeElement();app.off("unmount",onunmount);app.off("mount",onmount);app.off("source",onupdate)}function onmount(){invalidate()}function onunmount(){removeNativeElement();currentElement=null}function onupdate(name,data){if(!connections[name])return;connections[name].forEach(function(update){update(data)})}function mountEntity(entity){register(entity);setSources(entity);children[entity.id]={};entities[entity.id]=entity;commit(entity);trigger("beforeMount",entity,[entity.context]);trigger("beforeRender",entity,[entity.context]);var virtualElement=renderEntity(entity);var nativeElement=toNative(entity.id,"0",virtualElement);entity.virtualElement=virtualElement;entity.nativeElement=nativeElement;mountQueue.push(entity.id);return nativeElement}function unmountEntity(entityId){var entity=entities[entityId];if(!entity)return;trigger("beforeUnmount",entity,[entity.context,entity.nativeElement]);unmountChildren(entityId);removeAllEvents(entityId);var componentEntities=components[entityId].entities;delete componentEntities[entityId];delete components[entityId];delete entities[entityId];delete children[entityId]}function renderEntity(entity){var component=entity.component;if(!component.render)throw new Error("Component needs a render function");var result=component.render(entity.context,setState(entity));if(!result)throw new Error("Render function must return an element.");return result}function setState(entity){return function(nextState){updateEntityStateAsync(entity,nextState)}}function invalidate(){if(!options.batching){if(!isRendering)render()}else{if(!frameId)frameId=raf(render)}}function render(){clearFrame();if(isRendering){frameId=raf(render);return}else{isRendering=true}if(!currentNativeElement){currentElement=app.element;currentNativeElement=toNative(rootId,"0",currentElement);if(container.children.length>0){console.info("deku: The container element is not empty. These elements will be removed. Read more: http://cl.ly/b0Sr")}if(container===document.body){console.warn("deku: Using document.body is allowed but it can cause some issues. Read more: http://cl.ly/b0SC")}removeAllChildren(container);container.appendChild(currentNativeElement)}else if(currentElement!==app.element){currentNativeElement=patch(rootId,currentElement,app.element,currentNativeElement);currentElement=app.element;updateChildren(rootId)}else{updateChildren(rootId)}flushMountQueue();isRendering=false}function flushMountQueue(){var entityId;while(entityId=mountQueue.pop()){var entity=entities[entityId];trigger("afterRender",entity,[entity.context,entity.nativeElement]);triggerUpdate("afterMount",entity,[entity.context,entity.nativeElement,setState(entity)])}}function clearFrame(){if(!frameId)return;raf.cancel(frameId);frameId=0}function updateEntity(entityId){var entity=entities[entityId];setSources(entity);if(!shouldUpdate(entity))return updateChildren(entityId);var currentTree=entity.virtualElement;var nextProps=entity.pendingProps;var nextState=entity.pendingState;var previousState=entity.context.state;var previousProps=entity.context.props;trigger("beforeUpdate",entity,[entity.context,nextProps,nextState]);trigger("beforeRender",entity,[entity.context]);commit(entity);var nextTree=renderEntity(entity);if(nextTree===currentTree)return updateChildren(entityId);entity.nativeElement=patch(entityId,currentTree,nextTree,entity.nativeElement);entity.virtualElement=nextTree;updateChildren(entityId);trigger("afterRender",entity,[entity.context,entity.nativeElement]);triggerUpdate("afterUpdate",entity,[entity.context,previousProps,previousState])}function updateChildren(entityId){forEach(children[entityId],function(childId){updateEntity(childId)})}function unmountChildren(entityId){forEach(children[entityId],function(childId){unmountEntity(childId)})}function removeNativeElement(){clearFrame();removeElement(rootId,"0",currentNativeElement);currentNativeElement=null}function toNative(entityId,path,vnode){switch(vnode.type){case"text":return toNativeText(vnode);case"element":return toNativeElement(entityId,path,vnode);case"component":return toNativeComponent(entityId,path,vnode)}}function toNativeText(vnode){return document.createTextNode(vnode.data)}function toNativeElement(entityId,path,vnode){var attributes=vnode.attributes;var children=vnode.children;var tagName=vnode.tagName;var el;if(!options.pooling||!canPool(tagName)){if(svg.isElement(tagName)){el=document.createElementNS(svg.namespace,tagName)}else{el=document.createElement(tagName)}}else{var pool=getPool(tagName);el=cleanup(pool.pop());if(el.parentNode)el.parentNode.removeChild(el)}forEach(attributes,function(value,name){setAttribute(entityId,path,el,name,value)});el.__entity__=entityId;el.__path__=path;forEach(children,function(child,i){var childEl=toNative(entityId,path+"."+i,child);if(!childEl.parentNode)el.appendChild(childEl)});return el}function toNativeComponent(entityId,path,vnode){var child=new Entity(vnode.component,vnode.props,entityId);children[entityId][path]=child.id;return mountEntity(child)}function patch(entityId,prev,next,el){return diffNode("0",entityId,prev,next,el)}function diffNode(path,entityId,prev,next,el){if(prev.type!==next.type)return replaceElement(entityId,path,el,next);switch(next.type){case"text":return diffText(prev,next,el);case"element":return diffElement(path,entityId,prev,next,el);case"component":return diffComponent(path,entityId,prev,next,el)}}function diffText(previous,current,el){if(current.data!==previous.data)el.data=current.data;return el}function diffChildren(path,entityId,prev,next,el){var positions=[];var hasKeys=false;var childNodes=Array.prototype.slice.apply(el.childNodes);var leftKeys=reduce(prev.children,keyMapReducer,{});var rightKeys=reduce(next.children,keyMapReducer,{});var currentChildren=assign({},children[entityId]);function keyMapReducer(acc,child){if(child.key!=null){acc[child.key]=child;hasKeys=true}return acc}if(hasKeys){forEach(leftKeys,function(leftNode,key){if(rightKeys[key]==null){var leftPath=path+"."+leftNode.index;removeElement(entityId,leftPath,childNodes[leftNode.index])}});forEach(rightKeys,function(rightNode,key){var leftNode=leftKeys[key];if(leftNode==null)return;var leftPath=path+"."+leftNode.index;positions[rightNode.index]=diffNode(leftPath,entityId,leftNode,rightNode,childNodes[leftNode.index])});forEach(rightKeys,function(rightNode,key){var leftNode=leftKeys[key];if(leftNode==null||leftNode.index===rightNode.index)return;var rightPath=path+"."+rightNode.index;var leftPath=path+"."+leftNode.index;forEach(currentChildren,function(childId,childPath){if(leftPath===childPath){delete children[entityId][childPath];children[entityId][rightPath]=childId}})});forEach(rightKeys,function(rightNode,key){var rightPath=path+"."+rightNode.index;if(leftKeys[key]==null){positions[rightNode.index]=toNative(entityId,rightPath,rightNode)}})}else{var maxLength=Math.max(prev.children.length,next.children.length);for(var i=0;i<maxLength;i++){var leftNode=prev.children[i];var rightNode=next.children[i];if(rightNode==null){removeElement(entityId,path+"."+leftNode.index,childNodes[leftNode.index])}if(leftNode==null){positions[rightNode.index]=toNative(entityId,path+"."+rightNode.index,rightNode)}if(leftNode&&rightNode){positions[leftNode.index]=diffNode(path+"."+leftNode.index,entityId,leftNode,rightNode,childNodes[leftNode.index])}}}forEach(positions,function(childEl,newPosition){var target=el.childNodes[newPosition];if(childEl!==target){if(target){el.insertBefore(childEl,target)}else{el.appendChild(childEl)}}})}function diffAttributes(prev,next,el,entityId,path){var nextAttrs=next.attributes;var prevAttrs=prev.attributes;forEach(nextAttrs,function(value,name){if(events[name]||!(name in prevAttrs)||prevAttrs[name]!==value){setAttribute(entityId,path,el,name,value)}});forEach(prevAttrs,function(value,name){if(!(name in nextAttrs)){removeAttribute(entityId,path,el,name)}})}function diffComponent(path,entityId,prev,next,el){if(next.component!==prev.component){return replaceElement(entityId,path,el,next)}else{var targetId=children[entityId][path];if(targetId){updateEntityProps(targetId,next.props)}return el}}function diffElement(path,entityId,prev,next,el){if(next.tagName!==prev.tagName)return replaceElement(entityId,path,el,next);diffAttributes(prev,next,el,entityId,path);diffChildren(path,entityId,prev,next,el);return el}function removeElement(entityId,path,el){var childrenByPath=children[entityId];var childId=childrenByPath[path];var entityHandlers=handlers[entityId]||{};var removals=[];if(childId){var child=entities[childId];el=child.nativeElement;unmountEntity(childId);removals.push(path)}else{if(!isElement(el))return el.parentNode.removeChild(el);forEach(childrenByPath,function(childId,childPath){if(childPath===path||isWithinPath(path,childPath)){unmountEntity(childId);removals.push(childPath)}});forEach(entityHandlers,function(fn,handlerPath){if(handlerPath===path||isWithinPath(path,handlerPath)){removeEvent(entityId,handlerPath)}})}forEach(removals,function(path){delete children[entityId][path]});el.parentNode.removeChild(el);if(options.pooling){walk(el,function(node){if(!isElement(node)||!canPool(node.tagName))return;getPool(node.tagName.toLowerCase()).push(node)})}}function replaceElement(entityId,path,el,vnode){var parent=el.parentNode;var index=Array.prototype.indexOf.call(parent.childNodes,el);removeElement(entityId,path,el);var newEl=toNative(entityId,path,vnode);var target=parent.childNodes[index];if(target){parent.insertBefore(newEl,target)}else{parent.appendChild(newEl)}if(entityId!=="root"&&path==="0"){updateNativeElement(entityId,newEl)}return newEl}function updateNativeElement(entityId,newEl){var target=entities[entityId];if(target.ownerId==="root")return;if(children[target.ownerId]["0"]===entityId){entities[target.ownerId].nativeElement=newEl;updateNativeElement(target.ownerId,newEl)}}function setAttribute(entityId,path,el,name,value){if(events[name]){addEvent(entityId,path,events[name],value);return}switch(name){case"checked":case"disabled":case"selected":el[name]=true;break;case"innerHTML":case"value":el[name]=value;break;case svg.isAttribute(name):el.setAttributeNS(svg.namespace,name,value);break;default:el.setAttribute(name,value);break}}function removeAttribute(entityId,path,el,name){if(events[name]){removeEvent(entityId,path,events[name]);return}switch(name){case"checked":case"disabled":case"selected":el[name]=false;break;case"innerHTML":case"value":el[name]="";break;default:el.removeAttribute(name);break}}function isWithinPath(target,path){return path.indexOf(target+".")===0}function isElement(el){return!!el.tagName}function getPool(tagName){var pool=pools[tagName];if(!pool){var poolOpts=svg.isElement(tagName)?{namespace:svg.namespace,tagName:tagName}:{tagName:tagName};pool=pools[tagName]=new Pool(poolOpts)}return pool}function cleanup(el){removeAllChildren(el);removeAllAttributes(el);return el}function removeAllAttributes(el){for(var i=el.attributes.length-1;i>=0;i--){var name=el.attributes[i].name;el.removeAttribute(name)}}function removeAllChildren(el){while(el.firstChild)el.removeChild(el.firstChild)}function trigger(name,entity,args){if(typeof entity.component[name]!=="function")return;return entity.component[name].apply(null,args)}function triggerUpdate(name,entity,args){var update=setState(entity);args.push(update);var result=trigger(name,entity,args);if(result){updateEntityStateAsync(entity,result)}}function updateEntityStateAsync(entity,value){if(isPromise(value)){value.then(function(newState){updateEntityState(entity,newState)})}else{updateEntityState(entity,value)}}function updateEntityProps(entityId,nextProps){var entity=entities[entityId];entity.pendingProps=nextProps;entity.dirty=true;invalidate()}function updateEntityState(entity,nextState){entity.pendingState=assign(entity.pendingState,nextState);entity.dirty=true;invalidate()}function commit(entity){entity.context={state:entity.pendingState,props:entity.pendingProps,id:entity.id};entity.pendingState=assign({},entity.context.state);entity.pendingProps=assign({},entity.context.props);validateProps(entity.context.props,entity.propTypes);entity.dirty=false}function shouldUpdate(entity){if(!entity.dirty)return false;if(!entity.component.shouldUpdate)return true;var nextProps=entity.pendingProps;var nextState=entity.pendingState;var bool=entity.component.shouldUpdate(entity.context,nextProps,nextState);return bool}function register(entity){var component=entity.component;var entities=component.entities=component.entities||{};entities[entity.id]=entity;components[entity.id]=component;var sources=component.sources;if(sources)return;var map=component.sourceToPropertyName={};component.sources=sources=[];var propTypes=component.propTypes;for(var name in propTypes){var data=propTypes[name];if(!data)continue;if(!data.source)continue;sources.push(data.source);map[data.source]=name}sources.forEach(function(source){connections[source]=connections[source]||[];connections[source].push(update);function update(data){var prop=map[source];for(var entityId in entities){var entity=entities[entityId];var changes={};changes[prop]=data;updateEntityProps(entityId,assign(entity.pendingProps,changes))}}})}function setSources(entity){var component=entity.component;var map=component.sourceToPropertyName;var sources=component.sources;sources.forEach(function(source){var name=map[source];if(entity.pendingProps[name]!=null)return;entity.pendingProps[name]=app.sources[source]})}function addNativeEventListeners(){forEach(events,function(eventType){document.body.addEventListener(eventType,handleEvent,true)})}function removeNativeEventListeners(){forEach(events,function(eventType){document.body.removeEventListener(eventType,handleEvent,true)})}function handleEvent(event){var target=event.target;var entityId=target.__entity__;var eventType=event.type;while(target&&target.__entity__===entityId){var fn=keypath.get(handlers,[entityId,target.__path__,eventType]);if(fn){event.delegateTarget=target;fn(event);break}target=target.parentNode}}function addEvent(entityId,path,eventType,fn){keypath.set(handlers,[entityId,path,eventType],throttle(function(e){var entity=entities[entityId];if(entity){var update=setState(entity);var result=fn.call(null,e,entity.context,update);if(result){updateEntityStateAsync(entity,result)}}else{fn.call(null,e)}}))}function removeEvent(entityId,path,eventType){var args=[entityId];if(path)args.push(path);if(eventType)args.push(eventType);keypath.del(handlers,args)}function removeAllEvents(entityId){keypath.del(handlers,[entityId])}function validateProps(props,rules,optPrefix){var prefix=optPrefix||"";if(!options.validateProps)return;forEach(rules,function(options,name){if(!options){throw new Error("deku: propTypes should have an options object for each type")}var propName=prefix?prefix+"."+name:name;var value=keypath.get(props,name);var valueType=type(value);var typeFormat=type(options.type);var optional=options.optional===true;if(optional&&value==null){return}if(!optional&&value==null){throw new TypeError("Missing property: "+propName)}if(typeFormat==="object"){validateProps(value,options.type,propName);return}if(typeFormat==="string"&&valueType!==options.type){throw new TypeError("Invalid property type: "+propName)}if(typeFormat==="function"&&!options.type(value)){throw new TypeError("Invalid property type: "+propName)}if(typeFormat==="array"&&options.type.indexOf(valueType)<0){throw new TypeError("Invalid property type: "+propName)}if(options.expects&&options.expects.indexOf(value)<0){throw new TypeError("Invalid property value: "+propName)}});forEach(props,function(value,key){if(key==="children")return;if(!rules[key])throw new Error("Unexpected property: "+key)})}function inspect(){return{entities:entities,pools:pools,handlers:handlers,connections:connections,currentElement:currentElement,options:options,app:app,container:container,children:children}}return{remove:teardown,inspect:inspect}}function Entity(component,props,ownerId){this.id=uid();this.ownerId=ownerId;this.component=component;this.propTypes=component.propTypes||{};this.context={};this.context.id=this.id;this.context.props=defaults(props||{},component.defaultProps||{});this.context.state=this.component.initialState?this.component.initialState(this.context.props):{};this.pendingProps=assign({},this.context.props);this.pendingState=assign({},this.context.state);this.dirty=false;this.virtualElement=null;this.nativeElement=null;this.displayName=component.name||"Component"}function canPool(tagName){return avoidPooling.indexOf(tagName)<0}function getNodeAtPath(el,path){var parts=path.split(".");parts.shift();while(parts.length){el=el.childNodes[parts.pop()]}return el}},{"./svg":4,"./utils":5,"component-raf":9,"component-type":10,"dom-pool":11,"dom-walk":12,"fast.js/forEach":16,"fast.js/object/assign":19,"fast.js/reduce":22,"get-uid":23,"is-dom":24,"is-promise":25,"object-path":26,"per-frame":27}],3:[function(require,module,exports){var utils=require("./utils");var defaults=utils.defaults;module.exports=function(app){if(!app.element){throw new Error("No element mounted")}function stringify(component,optProps){var propTypes=component.propTypes||{};var props=defaults(optProps||{},component.defaultProps||{});var state=component.initialState?component.initialState(props):{};for(var name in propTypes){var options=propTypes[name];if(options.source){props[name]=app.sources[options.source]}}if(component.beforeMount)component.beforeMount({props:props,state:state});if(component.beforeRender)component.beforeRender({props:props,state:state});var node=component.render({props:props,state:state});return stringifyNode(node,"0")}function stringifyNode(node,path){switch(node.type){case"text":return node.data;case"element":var children=node.children;var attributes=node.attributes;var tagName=node.tagName;var innerHTML=attributes.innerHTML;var str="<"+tagName+attrs(attributes)+">";if(innerHTML){str+=innerHTML}else{for(var i=0,n=children.length;i<n;i++){str+=stringifyNode(children[i],path+"."+i)}}str+="</"+tagName+">";return str;case"component":return stringify(node.component,node.props)}throw new Error("Invalid type")}return stringifyNode(app.element,"0")};function attrs(attributes){var str="";for(var key in attributes){if(key==="innerHTML")continue;str+=attr(key,attributes[key])}return str}function attr(key,val){return" "+key+'="'+val+'"'}},{"./utils":5}],4:[function(require,module,exports){var indexOf=require("fast.js/array/indexOf");exports.namespace="http://www.w3.org/2000/svg";exports.elements=["circle","defs","ellipse","g","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"];exports.attributes=["cx","cy","d","dx","dy","fill","fillOpacity","fontFamily","fontSize","fx","fy","gradientTransform","gradientUnits","markerEnd","markerMid","markerStart","offset","opacity","patternContentUnits","patternUnits","points","preserveAspectRatio","r","rx","ry","spreadMethod","stopColor","stopOpacity","stroke","strokeDasharray","strokeLinecap","strokeOpacity","strokeWidth","textAnchor","transform","version","viewBox","x1","x2","x","y1","y2","y"];exports.isElement=function(name){return indexOf(exports.elements,name)!==-1};exports.isAttribute=function(attr){return indexOf(exports.attributes,attr)!==-1}},{"fast.js/array/indexOf":14}],5:[function(require,module,exports){exports.defaults=function(options,defaults){Object.keys(defaults).forEach(function(key){if(typeof options[key]==="undefined"){options[key]=defaults[key]}});return options}},{}],6:[function(require,module,exports){var type=require("component-type");var slice=require("sliced");var flatten=require("array-flatten");module.exports=virtual;function virtual(type,props,children){if(!type){throw new Error("deku: Element needs a type. Read more: http://cl.ly/b0KZ")}if(arguments.length===2&&(typeof props==="string"||Array.isArray(props))){children=props;props={}}if(arguments.length>2&&Array.isArray(arguments[2])===false){children=slice(arguments,2)}children=children||[];props=props||{};if(!Array.isArray(children)){children=[children]}children=flatten(children,1).reduce(normalize,[]);var key="key"in props?String(props.key):null;delete props["key"];var node;if(typeof type==="string"){node=new ElementNode(type,props,key,children)}else{node=new ComponentNode(type,props,key,children)}node.index=0;return node}function normalize(acc,node){if(node==null){return acc}if(typeof node==="string"||typeof node==="number"){var newNode=new TextNode(String(node));newNode.index=acc.length;acc.push(newNode)}else{node.index=acc.length;acc.push(node)}return acc}function ComponentNode(component,props,key,children){this.key=key;this.props=props;this.type="component";this.component=component;this.props.children=children||[]}function ElementNode(tagName,attributes,key,children){this.type="element";this.attributes=parseAttributes(attributes);this.tagName=tagName;this.children=children||[];this.key=key}function TextNode(text){this.type="text";this.data=String(text)}function parseAttributes(attributes){if(attributes.style){attributes.style=parseStyle(attributes.style)}if(attributes.class){attributes.class=parseClass(attributes.class)}var filteredAttributes={};for(var key in attributes){var value=attributes[key];if(value==null||value===false)continue;filteredAttributes[key]=value}return filteredAttributes}function parseStyle(styles){if(type(styles)==="string"){return styles}var str="";for(var name in styles){var value=styles[name];str=str+name+":"+value+";"}return str}function parseClass(value){if(type(value)==="object"){var matched=[];for(var key in value){if(value[key])matched.push(key)}value=matched}if(type(value)==="array"){if(value.length===0){return}value=value.join(" ")}return value}},{"array-flatten":7,"component-type":10,sliced:28}],7:[function(require,module,exports){function flattenDepth(array,result,depth){for(var i=0;i<array.length;i++){var value=array[i];if(depth>0&&Array.isArray(value)){flattenDepth(value,result,depth-1)}else{result.push(value)}}return result}function flattenForever(array,result){for(var i=0;i<array.length;i++){var value=array[i];if(Array.isArray(value)){flattenForever(value,result)}else{result.push(value)}}return result}module.exports=function(array,depth){if(depth==null){return flattenForever(array,[])}return flattenDepth(array,[],depth)}},{}],8:[function(require,module,exports){module.exports=Emitter;function Emitter(obj){if(obj)return mixin(obj)}function mixin(obj){for(var key in Emitter.prototype){obj[key]=Emitter.prototype[key]}return obj}Emitter.prototype.on=Emitter.prototype.addEventListener=function(event,fn){this._callbacks=this._callbacks||{};(this._callbacks["$"+event]=this._callbacks["$"+event]||[]).push(fn);return this};Emitter.prototype.once=function(event,fn){function on(){this.off(event,on);fn.apply(this,arguments)}on.fn=fn;this.on(event,on);return this};Emitter.prototype.off=Emitter.prototype.removeListener=Emitter.prototype.removeAllListeners=Emitter.prototype.removeEventListener=function(event,fn){this._callbacks=this._callbacks||{};if(0==arguments.length){this._callbacks={};return this}var callbacks=this._callbacks["$"+event];if(!callbacks)return this;if(1==arguments.length){delete this._callbacks["$"+event];return this}var cb;for(var i=0;i<callbacks.length;i++){cb=callbacks[i];if(cb===fn||cb.fn===fn){callbacks.splice(i,1);break}}return this};Emitter.prototype.emit=function(event){this._callbacks=this._callbacks||{};var args=[].slice.call(arguments,1),callbacks=this._callbacks["$"+event];if(callbacks){callbacks=callbacks.slice(0);for(var i=0,len=callbacks.length;i<len;++i){callbacks[i].apply(this,args)}}return this};Emitter.prototype.listeners=function(event){this._callbacks=this._callbacks||{};return this._callbacks["$"+event]||[]};Emitter.prototype.hasListeners=function(event){return!!this.listeners(event).length}},{}],9:[function(require,module,exports){exports=module.exports=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||fallback;var prev=(new Date).getTime();function fallback(fn){var curr=(new Date).getTime();var ms=Math.max(0,16-(curr-prev));var req=setTimeout(fn,ms);prev=curr;return req}var cancel=window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.clearTimeout;exports.cancel=function(id){cancel.call(window,id)}},{}],10:[function(require,module,exports){var toString=Object.prototype.toString;module.exports=function(val){switch(toString.call(val)){case"[object Date]":return"date";case"[object RegExp]":return"regexp";case"[object Arguments]":return"arguments";case"[object Array]":return"array";case"[object Error]":return"error"}if(val===null)return"null";if(val===undefined)return"undefined";if(val!==val)return"nan";if(val&&val.nodeType===1)return"element";val=val.valueOf?val.valueOf():Object.prototype.valueOf.apply(val);return typeof val}},{}],11:[function(require,module,exports){function Pool(params){if(typeof params!=="object"){throw new Error('Please pass parameters. Example -> new Pool({ tagName: "div" })')}if(typeof params.tagName!=="string"){throw new Error('Please specify a tagName. Example -> new Pool({ tagName: "div" })')}this.storage=[];this.tagName=params.tagName.toLowerCase();this.namespace=params.namespace}Pool.prototype.push=function(el){if(el.tagName.toLowerCase()!==this.tagName){return}this.storage.push(el)};Pool.prototype.pop=function(argument){if(this.storage.length===0){return this.create()}else{return this.storage.pop()}};Pool.prototype.create=function(){if(this.namespace){return document.createElementNS(this.namespace,this.tagName)}else{return document.createElement(this.tagName)}};Pool.prototype.allocate=function(size){if(this.storage.length>=size){return}var difference=size-this.storage.length;for(var poolAllocIter=0;poolAllocIter<difference;poolAllocIter++){this.storage.push(this.create())}};if(typeof module!=="undefined"&&typeof module.exports!=="undefined"){module.exports=Pool}},{}],12:[function(require,module,exports){var slice=Array.prototype.slice;module.exports=iterativelyWalk;function iterativelyWalk(nodes,cb){if(!("length"in nodes)){nodes=[nodes]}nodes=slice.call(nodes);while(nodes.length){var node=nodes.shift(),ret=cb(node);if(ret){return ret}if(node.childNodes&&node.childNodes.length){nodes=slice.call(node.childNodes).concat(nodes)}}}},{}],13:[function(require,module,exports){"use strict";var bindInternal3=require("../function/bindInternal3");module.exports=function fastForEach(subject,fn,thisContext){var length=subject.length,iterator=thisContext!==undefined?bindInternal3(fn,thisContext):fn,i;for(i=0;i<length;i++){iterator(subject[i],i,subject)}}},{"../function/bindInternal3":17}],14:[function(require,module,exports){"use strict";module.exports=function fastIndexOf(subject,target,fromIndex){var length=subject.length,i=0;if(typeof fromIndex==="number"){i=fromIndex;if(i<0){i+=length;if(i<0){i=0}}}for(;i<length;i++){if(subject[i]===target){return i}}return-1}},{}],15:[function(require,module,exports){"use strict";var bindInternal4=require("../function/bindInternal4");module.exports=function fastReduce(subject,fn,initialValue,thisContext){var length=subject.length,iterator=thisContext!==undefined?bindInternal4(fn,thisContext):fn,i,result;if(initialValue===undefined){i=1;result=subject[0]}else{i=0;result=initialValue}for(;i<length;i++){result=iterator(result,subject[i],i,subject)}return result}},{"../function/bindInternal4":18}],16:[function(require,module,exports){"use strict";var forEachArray=require("./array/forEach"),forEachObject=require("./object/forEach");module.exports=function fastForEach(subject,fn,thisContext){if(subject instanceof Array){return forEachArray(subject,fn,thisContext)}else{return forEachObject(subject,fn,thisContext)}}},{"./array/forEach":13,"./object/forEach":20}],17:[function(require,module,exports){"use strict";module.exports=function bindInternal3(func,thisContext){return function(a,b,c){return func.call(thisContext,a,b,c)}}},{}],18:[function(require,module,exports){"use strict";module.exports=function bindInternal4(func,thisContext){return function(a,b,c,d){return func.call(thisContext,a,b,c,d)}}},{}],19:[function(require,module,exports){"use strict";module.exports=function fastAssign(target){var totalArgs=arguments.length,source,i,totalKeys,keys,key,j;for(i=1;i<totalArgs;i++){source=arguments[i];keys=Object.keys(source);totalKeys=keys.length;for(j=0;j<totalKeys;j++){key=keys[j];target[key]=source[key]}}return target}},{}],20:[function(require,module,exports){"use strict";var bindInternal3=require("../function/bindInternal3");module.exports=function fastForEachObject(subject,fn,thisContext){var keys=Object.keys(subject),length=keys.length,iterator=thisContext!==undefined?bindInternal3(fn,thisContext):fn,key,i;for(i=0;i<length;i++){
key=keys[i];iterator(subject[key],key,subject)}}},{"../function/bindInternal3":17}],21:[function(require,module,exports){"use strict";var bindInternal4=require("../function/bindInternal4");module.exports=function fastReduceObject(subject,fn,initialValue,thisContext){var keys=Object.keys(subject),length=keys.length,iterator=thisContext!==undefined?bindInternal4(fn,thisContext):fn,i,key,result;if(initialValue===undefined){i=1;result=subject[keys[0]]}else{i=0;result=initialValue}for(;i<length;i++){key=keys[i];result=iterator(result,subject[key],key,subject)}return result}},{"../function/bindInternal4":18}],22:[function(require,module,exports){"use strict";var reduceArray=require("./array/reduce"),reduceObject=require("./object/reduce");module.exports=function fastReduce(subject,fn,initialValue,thisContext){if(subject instanceof Array){return reduceArray(subject,fn,initialValue,thisContext)}else{return reduceObject(subject,fn,initialValue,thisContext)}}},{"./array/reduce":15,"./object/reduce":21}],23:[function(require,module,exports){var counter=Date.now()%1e9;module.exports=function getUid(){return(Math.random()*1e9>>>0)+counter++}},{}],24:[function(require,module,exports){module.exports=function isNode(val){if(!val||typeof val!=="object")return false;if(window&&"object"==typeof window.Node)return val instanceof window.Node;return"number"==typeof val.nodeType&&"string"==typeof val.nodeName}},{}],25:[function(require,module,exports){module.exports=isPromise;function isPromise(obj){return obj&&(typeof obj==="object"||typeof obj==="function")&&typeof obj.then==="function"}},{}],26:[function(require,module,exports){(function(root,factory){"use strict";if(typeof module==="object"&&typeof module.exports==="object"){module.exports=factory()}else if(typeof define==="function"&&define.amd){define([],factory)}else{root.objectPath=factory()}})(this,function(){"use strict";var toStr=Object.prototype.toString,_hasOwnProperty=Object.prototype.hasOwnProperty;function isEmpty(value){if(!value){return true}if(isArray(value)&&value.length===0){return true}else{for(var i in value){if(_hasOwnProperty.call(value,i)){return false}}return true}}function toString(type){return toStr.call(type)}function isNumber(value){return typeof value==="number"||toString(value)==="[object Number]"}function isString(obj){return typeof obj==="string"||toString(obj)==="[object String]"}function isObject(obj){return typeof obj==="object"&&toString(obj)==="[object Object]"}function isArray(obj){return typeof obj==="object"&&typeof obj.length==="number"&&toString(obj)==="[object Array]"}function isBoolean(obj){return typeof obj==="boolean"||toString(obj)==="[object Boolean]"}function getKey(key){var intKey=parseInt(key);if(intKey.toString()===key){return intKey}return key}function set(obj,path,value,doNotReplace){if(isNumber(path)){path=[path]}if(isEmpty(path)){return obj}if(isString(path)){return set(obj,path.split(".").map(getKey),value,doNotReplace)}var currentPath=path[0];if(path.length===1){var oldVal=obj[currentPath];if(oldVal===void 0||!doNotReplace){obj[currentPath]=value}return oldVal}if(obj[currentPath]===void 0){if(isNumber(path[1])){obj[currentPath]=[]}else{obj[currentPath]={}}}return set(obj[currentPath],path.slice(1),value,doNotReplace)}function del(obj,path){if(isNumber(path)){path=[path]}if(isEmpty(obj)){return void 0}if(isEmpty(path)){return obj}if(isString(path)){return del(obj,path.split("."))}var currentPath=getKey(path[0]);var oldVal=obj[currentPath];if(path.length===1){if(oldVal!==void 0){if(isArray(obj)){obj.splice(currentPath,1)}else{delete obj[currentPath]}}}else{if(obj[currentPath]!==void 0){return del(obj[currentPath],path.slice(1))}}return obj}var objectPath={};objectPath.has=function(obj,path){if(isEmpty(obj)){return false}if(isNumber(path)){path=[path]}else if(isString(path)){path=path.split(".")}if(isEmpty(path)||path.length===0){return false}for(var i=0;i<path.length;i++){var j=path[i];if((isObject(obj)||isArray(obj))&&_hasOwnProperty.call(obj,j)){obj=obj[j]}else{return false}}return true};objectPath.ensureExists=function(obj,path,value){return set(obj,path,value,true)};objectPath.set=function(obj,path,value,doNotReplace){return set(obj,path,value,doNotReplace)};objectPath.insert=function(obj,path,value,at){var arr=objectPath.get(obj,path);at=~~at;if(!isArray(arr)){arr=[];objectPath.set(obj,path,arr)}arr.splice(at,0,value)};objectPath.empty=function(obj,path){if(isEmpty(path)){return obj}if(isEmpty(obj)){return void 0}var value,i;if(!(value=objectPath.get(obj,path))){return obj}if(isString(value)){return objectPath.set(obj,path,"")}else if(isBoolean(value)){return objectPath.set(obj,path,false)}else if(isNumber(value)){return objectPath.set(obj,path,0)}else if(isArray(value)){value.length=0}else if(isObject(value)){for(i in value){if(_hasOwnProperty.call(value,i)){delete value[i]}}}else{return objectPath.set(obj,path,null)}};objectPath.push=function(obj,path){var arr=objectPath.get(obj,path);if(!isArray(arr)){arr=[];objectPath.set(obj,path,arr)}arr.push.apply(arr,Array.prototype.slice.call(arguments,2))};objectPath.coalesce=function(obj,paths,defaultValue){var value;for(var i=0,len=paths.length;i<len;i++){if((value=objectPath.get(obj,paths[i]))!==void 0){return value}}return defaultValue};objectPath.get=function(obj,path,defaultValue){if(isNumber(path)){path=[path]}if(isEmpty(path)){return obj}if(isEmpty(obj)){return defaultValue}if(isString(path)){return objectPath.get(obj,path.split("."),defaultValue)}var currentPath=getKey(path[0]);if(path.length===1){if(obj[currentPath]===void 0){return defaultValue}return obj[currentPath]}return objectPath.get(obj[currentPath],path.slice(1),defaultValue)};objectPath.del=function(obj,path){return del(obj,path)};return objectPath})},{}],27:[function(require,module,exports){var raf=require("raf");module.exports=throttle;function throttle(fn){var rtn;var ignoring=false;return function queue(){if(ignoring)return rtn;ignoring=true;raf(function(){ignoring=false});rtn=fn.apply(this,arguments);return rtn}}},{raf:9}],28:[function(require,module,exports){module.exports=exports=require("./lib/sliced")},{"./lib/sliced":29}],29:[function(require,module,exports){module.exports=function(args,slice,sliceEnd){var ret=[];var len=args.length;if(0===len)return ret;var start=slice<0?Math.max(0,slice+len):slice||0;if(sliceEnd!==undefined){len=sliceEnd<0?sliceEnd+len:sliceEnd}while(len-->start){ret[len-start]=args[len]}return ret}},{}],deku:[function(require,module,exports){exports.tree=exports.scene=exports.deku=require("./application");if(typeof document!=="undefined"){exports.render=require("./render")}exports.renderString=require("./stringify");exports.element=exports.dom=require("./virtual")},{"./application":1,"./render":2,"./stringify":3,"./virtual":6}]},{},[]);var deku=require("deku");var dom=deku.element;var render=deku.render;var tree=deku.tree;var App={render:function(component,setState){var state=component.state;function submit(e){e.preventDefault();console.log("HELLO",state);setState({submitted:!state.submitted})}var classes={active:state.submitted};return dom("form.box",{"class":classes,onSubmit:submit},[dom("button",{type:"submit"},"Submit")])}};var app=tree(dom(App));render(app,document.body);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "deku": "0.4.1"
  }
}

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