Skip to content

Instantly share code, notes, and snippets.

@benalbahari
Created November 25, 2017 15:14
Show Gist options
  • Save benalbahari/5cb6ecb982d190e7303934555b5b1aa9 to your computer and use it in GitHub Desktop.
Save benalbahari/5cb6ecb982d190e7303934555b5b1aa9 to your computer and use it in GitHub Desktop.
hyperapp-transpiled.js
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function app(props, container) {
var lock;
var root = (container = container || document.body).children[0];
var node = vnode(root, [].map);
var lifecycle = [];
var appState = props.state || {};
var appActions = {};
repaint(init(appState, appActions, props.actions, []));
return appActions;
function vnode(element, map) {
return (element &&
h(element.tagName.toLowerCase(), {}, map.call(element.childNodes, function (element) {
return element.nodeType === 3
? element.nodeValue
: vnode(element, map);
})));
}
function set(to, from) {
for (var i in from) {
to[i] = from[i];
}
return to;
}
function merge(to, from) {
return set(set({}, to), from);
}
function setDeep(path, value, from) {
var to = {};
return 0 === path.length
? value
: ((to[path[0]] =
1 < path.length
? setDeep(path.slice(1), value, from[path[0]])
: value),
merge(from, to));
}
function get(path, from) {
for (var i = 0; i < path.length; i++) {
from = from[path[i]];
}
return from;
}
function isFunction(any) {
return "function" === typeof any;
}
function init(state, actions, from, path) {
for (var key in from) {
isFunction(from[key])
? (function (key, action) {
actions[key] = function (data) {
state = get(path, appState);
if (isFunction((data = action(data))) &&
isFunction((data = data(state)))) {
data = data(actions);
}
if (data && data !== state && !data.then) {
repaint((appState = setDeep(path, merge(state, data), appState)));
}
return data;
};
})(key, from[key])
: init(state[key] || (state[key] = {}), (actions[key] = {}), from[key], path.concat(key));
}
}
function getKey(node) {
if (node && node.props) {
return node.props.key;
}
}
function setElementProp(element, name, value, oldValue) {
if (name === "key") {
}
else if (name === "style") {
for (var i in merge(oldValue, (value = value || {}))) {
element.style[i] = null == value[i] ? "" : value[i];
}
}
else {
try {
element[name] = null == value ? "" : value;
}
catch (_) { }
if (!isFunction(value)) {
if (null == value || false === value) {
element.removeAttribute(name);
}
else {
element.setAttribute(name, value);
}
}
}
}
function createElement(node, isSVG) {
if (typeof node === "string") {
return document.createTextNode(node);
}
else {
var element_1 = (isSVG = isSVG || node.type === "svg")
? document.createElementNS("http://www.w3.org/2000/svg", node.type)
: document.createElement(node.type);
if (node.props.oncreate) {
lifecycle.push(function () {
return node.props.oncreate(element_1);
});
}
for (var i = 0; i < node.children.length; i++) {
element_1.appendChild(createElement(node.children[i], isSVG));
}
for (var j in node.props) {
setElementProp(element_1, j, node.props[j]);
}
return element_1;
}
}
function updateElement(element, oldProps, props) {
for (var i in merge(oldProps, props)) {
var value = props[i];
var oldValue = i === "value" || i === "checked" ? element[i] : oldProps[i];
if (value !== oldValue) {
setElementProp(element, i, value, oldValue);
}
}
if (props.onupdate) {
lifecycle.push(function () {
return props.onupdate(element, oldProps);
});
}
}
function removeElement(parent, element, props) {
function done() {
parent.removeChild(element);
}
if (props && props.onremove) {
props.onremove(element, done);
}
else {
done();
}
}
function isVNode(vnode) {
return vnode.type != null;
}
function patch(parent, element, oldNode, node, isSVG, nextSibling) {
if (oldNode === node) {
}
else if (null == oldNode) {
element = parent.insertBefore(createElement(node, isSVG), element);
}
else if (isVNode(node) && isVNode(oldNode) && node.type === oldNode.type) {
updateElement(element, oldNode.props, node.props);
isSVG = isSVG || node.type === "svg";
var len = node.children.length;
var oldLen = oldNode.children.length;
var oldKeyed = {};
var oldElements = [];
var keyed = {};
for (var i = 0; i < oldLen; i++) {
var oldElement = (oldElements[i] = element.childNodes[i]);
var oldChild = oldNode.children[i];
var oldKey = getKey(oldChild);
if (null != oldKey) {
oldKeyed[oldKey] = [oldElement, oldChild];
}
}
var i = 0;
var j = 0;
while (j < len) {
var oldElement = oldElements[i];
var oldChild = oldNode.children[i];
var newChild = node.children[j];
var oldKey = getKey(oldChild);
if (keyed[oldKey]) {
i++;
continue;
}
var newKey = getKey(newChild);
var keyedNode = oldKeyed[newKey] || [];
if (null == newKey) {
if (null == oldKey) {
patch(element, oldElement, oldChild, newChild, isSVG);
j++;
}
i++;
}
else {
if (oldKey === newKey) {
patch(element, keyedNode[0], keyedNode[1], newChild, isSVG);
i++;
}
else if (keyedNode[0]) {
element.insertBefore(keyedNode[0], oldElement);
patch(element, keyedNode[0], keyedNode[1], newChild, isSVG);
}
else {
patch(element, oldElement, null, newChild, isSVG);
}
j++;
keyed[newKey] = newChild;
}
}
while (i < oldLen) {
var oldChild = oldNode.children[i];
var oldKey = getKey(oldChild);
if (null == oldKey) {
removeElement(element, oldElements[i], oldChild.props);
}
i++;
}
for (var k in oldKeyed) {
var keyedNode = oldKeyed[k];
var reusableNode = keyedNode[1];
if (!keyed[reusableNode.props.key]) {
removeElement(element, keyedNode[0], reusableNode.props);
}
}
}
else if (element && node !== element.nodeValue) {
if (typeof node === "string" && typeof oldNode === "string") {
element.nodeValue = node;
}
else {
element = parent.insertBefore(createElement(node, isSVG), (nextSibling = element));
removeElement(parent, nextSibling, oldNode.props);
}
}
return element;
}
function render(next) {
lock = !lock;
if (isFunction((next = props.view(appState, appActions)))) {
next = next(appActions);
}
if (!lock) {
root = patch(container, root, node, (node = next));
}
while (next = lifecycle.pop())
next();
}
function repaint(unknown) {
if (props.view && !lock) {
setTimeout(render, (lock = !lock));
}
}
}
exports.app = app;
function h(type, props, children) {
var node;
var stack = [];
children = [];
for (var i = arguments.length; i-- > 2;) {
stack.push(arguments[i]);
}
while (stack.length) {
if (Array.isArray((node = stack.pop()))) {
for (i = node.length; i--;) {
stack.push(node[i]);
}
}
else if (null == node || node === true || node === false) {
}
else {
children.push(typeof node === "number" ? (node = node + "") : node);
}
}
return typeof type === "string"
? {
type: type,
props: props || {},
children: children
}
: type(props || {}, children);
}
exports.h = h;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment