requirebin sketch

index.js

var snabbdom = require('snabbdom')

var patch = snabbdom.init([ // Init patch function with choosen modules
  require('snabbdom/modules/class'), // makes it easy to toggle classes
  require('snabbdom/modules/props'), // for setting properties on DOM elements
  require('snabbdom/modules/style'), // handles styling on elements with support for animations
  require('snabbdom/modules/eventlisteners'), // attaches event listeners
])
  
var h = require('snabbdom/h') // helper function for creating VNodes
  
function render (value) {
  return h('div', { class: { foo: true }}, [
    h('p', { style: { color: 'lime' }}, value)
  ])
}

function renderToString (patch, source) {
	var target = document.createElement('div')
  console.log(target.parentElement)
  patch(target, source)
  return target.outerHTML
}

var output = renderToString(patch, render('bar'))

document.write(output)
console.log(output)

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}({"snabbdom/modules/props":[function(require,module,exports){function updateProps(oldVnode,vnode){var key,cur,old,elm=vnode.elm,oldProps=oldVnode.data.props||{},props=vnode.data.props||{};for(key in props){cur=props[key];old=oldProps[key];if(old!==cur){elm[key]=cur}}}module.exports={create:updateProps,update:updateProps}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"snabbdom/modules/class":[function(require,module,exports){function updateClass(oldVnode,vnode){var cur,name,elm=vnode.elm,oldClass=oldVnode.data.class||{},klass=vnode.data.class||{};for(name in klass){cur=klass[name];if(cur!==oldClass[name]){elm.classList[cur?"add":"remove"](name)}}}module.exports={create:updateClass,update:updateClass}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"snabbdom/modules/style":[function(require,module,exports){var raf=requestAnimationFrame||setTimeout;var nextFrame=function(fn){raf(function(){raf(fn)})};function setNextFrame(obj,prop,val){nextFrame(function(){obj[prop]=val})}function updateStyle(oldVnode,vnode){var cur,name,elm=vnode.elm,oldStyle=oldVnode.data.style||{},style=vnode.data.style||{},oldHasDel="delayed"in oldStyle;for(name in style){cur=style[name];if(name==="delayed"){for(name in style.delayed){cur=style.delayed[name];if(!oldHasDel||cur!==oldStyle.delayed[name]){setNextFrame(elm.style,name,cur)}}}else if(name!=="remove"&&cur!==oldStyle[name]){elm.style[name]=cur}}}function applyDestroyStyle(vnode){var style,name,elm=vnode.elm,s=vnode.data.style;if(!s||!(style=s.destroy))return;for(name in style){elm.style[name]=style[name]}}function applyRemoveStyle(vnode,rm){var s=vnode.data.style;if(!s||!s.remove){rm();return}var name,elm=vnode.elm,idx,i=0,maxDur=0,compStyle,style=s.remove,amount=0,applied=[];for(name in style){applied.push(name);elm.style[name]=style[name]}compStyle=getComputedStyle(elm);var props=compStyle["transition-property"].split(", ");for(;i<props.length;++i){if(applied.indexOf(props[i])!==-1)amount++}elm.addEventListener("transitionend",function(ev){if(ev.target===elm)--amount;if(amount===0)rm()})}module.exports={create:updateStyle,update:updateStyle,destroy:applyDestroyStyle,remove:applyRemoveStyle}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports={array:Array.isArray,primitive:function(s){return typeof s==="string"||typeof s==="number"}}},{}],2:[function(require,module,exports){module.exports=function(sel,data,children,text,elm){var key=data===undefined?undefined:data.key;return{sel:sel,data:data,children:children,text:text,elm:elm,key:key}}},{}],"snabbdom/h":[function(require,module,exports){var VNode=require("./vnode");var is=require("./is");module.exports=function h(sel,b,c){var data={},children,text,i;if(arguments.length===3){data=b;if(is.array(c)){children=c}else if(is.primitive(c)){text=c}}else if(arguments.length===2){if(is.array(b)){children=b}else if(is.primitive(b)){text=b}else{data=b}}if(is.array(children)){for(i=0;i<children.length;++i){if(is.primitive(children[i]))children[i]=VNode(undefined,undefined,undefined,children[i])}}return VNode(sel,data,children,text,undefined)}},{"./is":1,"./vnode":2}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports={array:Array.isArray,primitive:function(s){return typeof s==="string"||typeof s==="number"}}},{}],"snabbdom/modules/eventlisteners":[function(require,module,exports){var is=require("../is");function arrInvoker(arr){return function(){arr.length===2?arr[0](arr[1]):arr[0].apply(undefined,arr.slice(1))}}function fnInvoker(o){return function(ev){o.fn(ev)}}function updateEventListeners(oldVnode,vnode){var name,cur,old,elm=vnode.elm,oldOn=oldVnode.data.on||{},on=vnode.data.on;if(!on)return;for(name in on){cur=on[name];old=oldOn[name];if(old===undefined){if(is.array(cur)){elm.addEventListener(name,arrInvoker(cur))}else{cur={fn:cur};on[name]=cur;elm.addEventListener(name,fnInvoker(cur))}}else if(is.array(old)){old.length=cur.length;for(var i=0;i<old.length;++i)old[i]=cur[i];on[name]=old}else{old.fn=cur;on[name]=old}}}module.exports={create:updateEventListeners,update:updateEventListeners}},{"../is":1}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports={array:Array.isArray,primitive:function(s){return typeof s==="string"||typeof s==="number"}}},{}],2:[function(require,module,exports){module.exports=function(sel,data,children,text,elm){var key=data===undefined?undefined:data.key;return{sel:sel,data:data,children:children,text:text,elm:elm,key:key}}},{}],snabbdom:[function(require,module,exports){"use strict";var VNode=require("./vnode");var is=require("./is");function isUndef(s){return s===undefined}function isDef(s){return s!==undefined}function emptyNodeAt(elm){return VNode(elm.tagName,{},[],undefined,elm)}var emptyNode=VNode("",{},[],undefined,undefined);function sameVnode(vnode1,vnode2){return vnode1.key===vnode2.key&&vnode1.sel===vnode2.sel}function createKeyToOldIdx(children,beginIdx,endIdx){var i,map={},key;for(i=beginIdx;i<=endIdx;++i){key=children[i].key;if(isDef(key))map[key]=i}return map}function createRmCb(childElm,listeners){return function(){if(--listeners===0)childElm.parentElement.removeChild(childElm)}}var hooks=["create","update","remove","destroy","pre","post"];function init(modules){var i,j,cbs={};for(i=0;i<hooks.length;++i){cbs[hooks[i]]=[];for(j=0;j<modules.length;++j){if(modules[j][hooks[i]]!==undefined)cbs[hooks[i]].push(modules[j][hooks[i]])}}function createElm(vnode,insertedVnodeQueue){var i,data=vnode.data;if(isDef(data)){if(isDef(i=data.hook)&&isDef(i=i.init))i(vnode);if(isDef(i=data.vnode))vnode=i}var elm,children=vnode.children,sel=vnode.sel;if(isDef(sel)){var hashIdx=sel.indexOf("#");var dotIdx=sel.indexOf(".",hashIdx);var hash=hashIdx>0?hashIdx:sel.length;var dot=dotIdx>0?dotIdx:sel.length;var tag=hashIdx!==-1||dotIdx!==-1?sel.slice(0,Math.min(hash,dot)):sel;elm=vnode.elm=isDef(data)&&isDef(i=data.ns)?document.createElementNS(i,tag):document.createElement(tag);if(hash<dot)elm.id=sel.slice(hash+1,dot);if(dotIdx>0)elm.className=sel.slice(dot+1).replace(/\./g," ");if(is.array(children)){for(i=0;i<children.length;++i){elm.appendChild(createElm(children[i],insertedVnodeQueue))}}else if(is.primitive(vnode.text)){elm.appendChild(document.createTextNode(vnode.text))}for(i=0;i<cbs.create.length;++i)cbs.create[i](emptyNode,vnode);i=vnode.data.hook;if(isDef(i)){if(i.create)i.create(emptyNode,vnode);if(i.insert)insertedVnodeQueue.push(vnode)}}else{elm=vnode.elm=document.createTextNode(vnode.text)}return vnode.elm}function addVnodes(parentElm,before,vnodes,startIdx,endIdx,insertedVnodeQueue){for(;startIdx<=endIdx;++startIdx){parentElm.insertBefore(createElm(vnodes[startIdx],insertedVnodeQueue),before)}}function invokeDestroyHook(vnode){var i=vnode.data,j;if(isDef(i)){if(isDef(i=i.hook)&&isDef(i=i.destroy))i(vnode);for(i=0;i<cbs.destroy.length;++i)cbs.destroy[i](vnode);if(isDef(i=vnode.children)){for(j=0;j<vnode.children.length;++j){invokeDestroyHook(vnode.children[j])}}}}function removeVnodes(parentElm,vnodes,startIdx,endIdx){for(;startIdx<=endIdx;++startIdx){var i,listeners,rm,ch=vnodes[startIdx];if(isDef(ch)){if(isDef(ch.sel)){invokeDestroyHook(ch);listeners=cbs.remove.length+1;rm=createRmCb(ch.elm,listeners);for(i=0;i<cbs.remove.length;++i)cbs.remove[i](ch,rm);if(isDef(i=ch.data)&&isDef(i=i.hook)&&isDef(i=i.remove)){i(ch,rm)}else{rm()}}else{parentElm.removeChild(ch.elm)}}}}function updateChildren(parentElm,oldCh,newCh,insertedVnodeQueue){var oldStartIdx=0,newStartIdx=0;var oldEndIdx=oldCh.length-1;var oldStartVnode=oldCh[0];var oldEndVnode=oldCh[oldEndIdx];var newEndIdx=newCh.length-1;var newStartVnode=newCh[0];var newEndVnode=newCh[newEndIdx];var oldKeyToIdx,idxInOld,elmToMove,before;while(oldStartIdx<=oldEndIdx&&newStartIdx<=newEndIdx){if(isUndef(oldStartVnode)){oldStartVnode=oldCh[++oldStartIdx]}else if(isUndef(oldEndVnode)){oldEndVnode=oldCh[--oldEndIdx]}else if(sameVnode(oldStartVnode,newStartVnode)){patchVnode(oldStartVnode,newStartVnode,insertedVnodeQueue);oldStartVnode=oldCh[++oldStartIdx];newStartVnode=newCh[++newStartIdx]}else if(sameVnode(oldEndVnode,newEndVnode)){patchVnode(oldEndVnode,newEndVnode,insertedVnodeQueue);oldEndVnode=oldCh[--oldEndIdx];newEndVnode=newCh[--newEndIdx]}else if(sameVnode(oldStartVnode,newEndVnode)){patchVnode(oldStartVnode,newEndVnode,insertedVnodeQueue);parentElm.insertBefore(oldStartVnode.elm,oldEndVnode.elm.nextSibling);oldStartVnode=oldCh[++oldStartIdx];newEndVnode=newCh[--newEndIdx]}else if(sameVnode(oldEndVnode,newStartVnode)){patchVnode(oldEndVnode,newStartVnode,insertedVnodeQueue);parentElm.insertBefore(oldEndVnode.elm,oldStartVnode.elm);oldEndVnode=oldCh[--oldEndIdx];newStartVnode=newCh[++newStartIdx]}else{if(isUndef(oldKeyToIdx))oldKeyToIdx=createKeyToOldIdx(oldCh,oldStartIdx,oldEndIdx);idxInOld=oldKeyToIdx[newStartVnode.key];if(isUndef(idxInOld)){parentElm.insertBefore(createElm(newStartVnode,insertedVnodeQueue),oldStartVnode.elm);newStartVnode=newCh[++newStartIdx]}else{elmToMove=oldCh[idxInOld];patchVnode(elmToMove,newStartVnode,insertedVnodeQueue);oldCh[idxInOld]=undefined;parentElm.insertBefore(elmToMove.elm,oldStartVnode.elm);newStartVnode=newCh[++newStartIdx]}}}if(oldStartIdx>oldEndIdx){before=isUndef(newCh[newEndIdx+1])?null:newCh[newEndIdx+1].elm;addVnodes(parentElm,before,newCh,newStartIdx,newEndIdx,insertedVnodeQueue)}else if(newStartIdx>newEndIdx){removeVnodes(parentElm,oldCh,oldStartIdx,oldEndIdx)}}function patchVnode(oldVnode,vnode,insertedVnodeQueue){var i,hook;if(isDef(i=vnode.data)&&isDef(hook=i.hook)&&isDef(i=hook.prepatch)){i(oldVnode,vnode)}if(isDef(i=oldVnode.data)&&isDef(i=i.vnode))oldVnode=i;if(isDef(i=vnode.data)&&isDef(i=i.vnode))vnode=i;var elm=vnode.elm=oldVnode.elm,oldCh=oldVnode.children,ch=vnode.children;if(oldVnode===vnode)return;if(isDef(vnode.data)){for(i=0;i<cbs.update.length;++i)cbs.update[i](oldVnode,vnode);i=vnode.data.hook;if(isDef(i)&&isDef(i=i.update))i(oldVnode,vnode)}if(isUndef(vnode.text)){if(isDef(oldCh)&&isDef(ch)){if(oldCh!==ch)updateChildren(elm,oldCh,ch,insertedVnodeQueue)}else if(isDef(ch)){addVnodes(elm,null,ch,0,ch.length-1,insertedVnodeQueue)}else if(isDef(oldCh)){removeVnodes(elm,oldCh,0,oldCh.length-1)}}else if(oldVnode.text!==vnode.text){elm.textContent=vnode.text}if(isDef(hook)&&isDef(i=hook.postpatch)){i(oldVnode,vnode)}}return function(oldVnode,vnode){var i;var insertedVnodeQueue=[];for(i=0;i<cbs.pre.length;++i)cbs.pre[i]();if(oldVnode instanceof Element){if(oldVnode.parentElement!==null){createElm(vnode,insertedVnodeQueue);oldVnode.parentElement.replaceChild(vnode.elm,oldVnode)}else{oldVnode=emptyNodeAt(oldVnode);patchVnode(oldVnode,vnode,insertedVnodeQueue)}}else{patchVnode(oldVnode,vnode,insertedVnodeQueue)}for(i=0;i<insertedVnodeQueue.length;++i){insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i])}for(i=0;i<cbs.post.length;++i)cbs.post[i]();return vnode}}module.exports={init:init}},{"./is":1,"./vnode":2}]},{},[]);var snabbdom=require("snabbdom");var patch=snabbdom.init([require("snabbdom/modules/class"),require("snabbdom/modules/props"),require("snabbdom/modules/style"),require("snabbdom/modules/eventlisteners")]);var h=require("snabbdom/h");function render(value){return h("div",{"class":{foo:true}},[h("p",{style:{color:"lime"}},value)])}function renderToString(patch,source){var target=document.createElement("div");console.log(target.parentElement);patch(target,source);return target.outerHTML}var output=renderToString(patch,render("bar"));document.write(output);console.log(output);

package.json

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

page-body.html

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

page-head.html

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

requirebin.md

made with requirebin