-
-
Save fuzzyalej/1649d3c65c495cb1c096 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// utils | |
var slice = Array.prototype.slice; | |
var concat = Array.prototype.concat; | |
var flatten = function(l) { return concat.apply([], l); }; | |
// really stupid DSL | |
function nodeOrTextNode(n) { | |
if (typeof(n) === "object") | |
return n; | |
else | |
return {nodeType: "text", content: n}; | |
} | |
function d(type) { | |
switch(typeof(type)) { | |
case "function": return _dComp.apply(null, arguments); | |
case "string": return _dTag.apply(null, arguments); | |
} | |
} | |
function _dComp(comp) { | |
return comp.apply(null, slice.call(arguments, 1)); | |
} | |
function _dTag(tag, attr) { | |
var children = slice.call(arguments, 2); | |
return { | |
nodeType: "tag", | |
tag: tag, | |
attrs: attr || {}, | |
children: flatten(children).map(nodeOrTextNode) | |
}; | |
} | |
// rendering | |
function renderComponent(component) { | |
return render(component()); | |
} | |
function renderTextNode(node) { | |
return document.createTextNode(node.content); | |
} | |
function renderAttrs(node) { | |
var attrList = []; | |
for (var k in node.attrs) | |
attrList.push(k + "=\"" + node.attrs[k] + "\""); | |
return attrList.join(" "); | |
} | |
function setEvents(node, events) { | |
for (var k in events) node.addEventListener(k, events[k], false); | |
} | |
function setAttribute(node, name, value) { | |
if (name === "events") | |
setEvents(node, value); | |
else | |
node.setAttribute(name, value); | |
} | |
function renderTag(node) { | |
var t = document.createElement(node.tag); | |
for (var k in node.attrs) setAttribute(t, k, node.attrs[k]); | |
node.children.forEach(function(c) { t.appendChild(render(c)); }); | |
return t; | |
} | |
function render(node) { | |
switch(true) { | |
case (typeof(node) === "function"): return renderComponent(node); | |
case (node.nodeType === "tag"): return renderTag(node); | |
case (node.nodeType === "text"): return renderTextNode(node); | |
} | |
} | |
function root(component, domNode) { | |
var currentNode; | |
return function update() { | |
var args = arguments; | |
window.requestAnimationFrame(function() { | |
if (currentNode) domNode.removeChild(currentNode); | |
domNode.appendChild(currentNode = render(component.apply(null, args))); | |
}); | |
return update; | |
}; | |
} | |
module.exports = { | |
d: d, | |
root: root, | |
render: render | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment