closures 0.7.1 → 0.7.3

package/dist/closures.js

@@ -1,759 +1,571 @@
-let EMPTY_OBJECT = {},
-  REF_SINGLE = 1, // ref with a single dom node
-  REF_ARRAY = 4, // ref with an array od nodes
-  REF_PARENT = 8, // ref with a child ref
-  SVG_NS = "http://www.w3.org/2000/svg",
-  DOM_PROPS_DIRECTIVES = {
-    selected: propDirective("selected"),
-    checked: propDirective("checked"),
-    value: propDirective("value"),
-    innerHTML: propDirective("innerHTML"),
-  },
+let NIL = void 0,
+  noop = _ => {},
+  propDirective = prop => ({
+    mount(el, value) {
+      el[prop] = value;
+    },
+    patch(el, newValue, oldValue) {
+      if (newValue !== oldValue) el[prop] = newValue;
+    },
+    unmount(el) {
+      el[prop] = NIL;
+    }
+  }),
   DEFAULT_ENV = {
-    isSvg: false,
-    directives: DOM_PROPS_DIRECTIVES,
+    isSVG: false,
+    redraw: noop,
+    directives: {
+      selected: propDirective('selected'),
+      checked: propDirective('checked'),
+      value: propDirective('value'),
+      innerHTML: propDirective('innerHTML')
+    }
   },
   ON_REMOVES = [],
-  MOUNTING = [],
-  XLINK_NS = "http://www.w3.org/1999/xlink",
-  NS_ATTRS = { show: XLINK_NS, actuate: XLINK_NS, href: XLINK_NS },
+  CLOSURE_TO_FN = new WeakMap(),
+  ON_CREATE_KEY = 'oncreate',
   NUM = 1,
+  PARENT_DOM_KEY = '$_REF',
+  EMPTY_OBJECT = {},
+  SVG_NS = 'http://www.w3.org/2000/svg',
+  XLINK_NS = 'http://www.w3.org/1999/xlink',
+  NS_ATTRS = { show: XLINK_NS, actuate: XLINK_NS, href: XLINK_NS },
+  REF_SINGLE = 1, // ref with single dom node
   VTYPE_ELEMENT = 1,
+  REF_ARRAY = 4, // ref with array of nodes
+  REF_PARENT = 8, // ref with a child ref
   VTYPE_FUNCTION = 2,
-  VTYPE_COMPONENT = 4,
-  CLOSURE_TO_CMP = new WeakMap(),
-  CMP_TO_CLOSURE = new WeakMap(),
-  CHILDS = new WeakMap(),
-  ID = _ => (NUM++).toString(),
-  noop = _ => {},
+  RETAIN_KEY = '=',
+  generateClosureId = _ => NUM++,
   isFn = x => typeof x === 'function',
   isStr = x => typeof x === 'string',
   isObj = x => x !== null && typeof x === 'object',
   isArr = x => Array.isArray(x),
-  isEmpty = c => c === null || c === false || c === undefined || (isArr(c) && c.length === 0),
+  toJson = v => JSON.stringify(v),
+  isEmpty = c => c === null || c === false || c === NIL || (isArr(c) && c.length === 0) || (c && c._t === RETAIN_KEY),
   isNonEmptyArray = c => isArr(c) && c.length > 0,
-  isLeaf = c => isStr(c) || typeof c === "number",
+  isLeaf = c => isStr(c) || typeof c === 'number',
   isElement = c => c && c.vtype === VTYPE_ELEMENT,
-  isRenderFunction = c => c && c.vtype === VTYPE_FUNCTION,
-  isComponent = c => c && c.vtype === VTYPE_COMPONENT,
-  isValidComponentType = c => c && isFn(c.mount);
-
-export const m = h;
+  isRenderFunction = c => c && c.vtype === VTYPE_FUNCTION;
+
+let getDomNode = (ref) => {
+  let type = ref.type;
+  if (type === REF_SINGLE) return ref.node;
+  if (type === REF_PARENT) return getDomNode(ref.childRef);
+  if (type === REF_ARRAY) return getDomNode(ref.children[0]);
+  throw Error('Unknown ref type ' + toJson(ref));
+};
+
+let getNextSibling = ref => {
+  let type = ref.type;
+  if (type === REF_SINGLE) return ref.node.nextSibling;
+  if (type === REF_PARENT) return getNextSibling(ref.childRef);
+  if (type === REF_ARRAY) return getNextSibling(ref.children[ref.children.length - 1]);
+  throw Error('Unknown ref type ' + toJson(ref));
+};
+
+let insertDom = (parent, ref, nextSibling) => {
+  let type = ref.type;
+  if (type === REF_SINGLE) parent.insertBefore(ref.node, nextSibling);
+  else if (type === REF_PARENT) insertDom(parent, ref.childRef, nextSibling);
+  else if (type === REF_ARRAY)
+    for (let i = 0; i < ref.children.length; i++)
+      insertDom(parent, ref.children[i], nextSibling);
+  else throw Error('Unknown ref type ' + toJson(ref));
+};
+
+let removeDom = (parent, ref) => {
+  let type = ref.type;
+  if (type === REF_SINGLE) parent.removeChild(ref.node);
+  else if (type === REF_PARENT) removeDom(parent, ref.childRef);
+  else if (type === REF_ARRAY)
+    for (let i = 0; i < ref.children.length; i++)
+      removeDom(parent, ref.children[i]);
+  else throw Error('Unknown ref type ' + toJson(ref));
+};
+
+let replaceDom = (parent, newRef, oldRef) => {
+  insertDom(parent, newRef, getDomNode(oldRef));
+  removeDom(parent, oldRef);
+};
+
+let setDomAttribute = (el, attr, value, isSVG) => {
+  if (attr === 'className') attr = 'class';
+  if (value === true) el.setAttribute(attr, '');
+  else if (value === false) el.removeAttribute(attr);
+  else (isSVG && NS_ATTRS[attr])
+    ? el.setAttributeNS(NS_ATTRS[attr], attr, value)
+    : el.setAttribute(attr, value);
+};
+
+let mountAttributes = (el, props, env) => {
+  for (let key in props) {
+    if (key === 'key' || key === 'children' || key === ON_CREATE_KEY || key in env.directives) continue;
+    else if (key.startsWith('on'))
+      el[key.toLowerCase()] = ev => { props[key](ev); !env.manualRedraw && env.redraw(); };
+    else setDomAttribute(el, key, props[key], env.isSVG);
+  }
+};
 
-export const onRemove = f => ON_REMOVES.push(f);
+let patchAttributes = (el, newProps, oldProps, env) => {
+  let key;
+  for (key in newProps) {
+    if (key === 'key' || key === 'children' || key === ON_CREATE_KEY || key in env.directives)
+      continue;
 
-export function h(__tag, ...children) {
-  let props = children[0];
-  if (props && isObj(props) && !isArr(props) && !(props.__tag || props.props))
-    children.shift();
-  else props = EMPTY_OBJECT;
+    let oldValue = oldProps[key],
+      newValue = newProps[key];
+    
+    if (oldValue !== newValue)
+      key.startsWith('on')
+        ? el[key.toLowerCase()] = ev => { newValue(ev); !env.manualRedraw && env.redraw(); }
+        : setDomAttribute(el, key, newValue, env.isSVG);
+  }
 
-  props =
-    children.length > 1
-      ? Object.assign({}, props, { children })
-      : children.length === 1
-      ? Object.assign({}, props, { children: children[0] })
-      : props;
+  for (key in oldProps) {
+    if (key === 'key' || key === 'children' || key in newProps || key in env.directives)
+      continue;
 
-  // parse tag
-  if (isStr(__tag)) {
-    let idx = __tag.indexOf('.');
-    if (~idx) {
-      let className = __tag.slice(idx + 1).replace(/\./g, ' ')
-      props.class = props.class ? className + ' ' + String(props.class) : className;
-      __tag = __tag.slice(0, idx);
-    }
-    __tag = __tag ?? 'div';
+    if (key.startsWith('on')) el[key.toLowerCase()] = NIL;
+    else el.removeAttribute(key);
   }
+};
+
+let mountDirectives = (el, props, env) => {
+  for (let key in props)
+    if (key in env.directives)
+      env.directives[key].mount(el, props[key]);
+};
+
+let patchDirectives = (el, newProps, oldProps, env) => {
+  let key;
+  for (key in newProps)
+    if (key in env.directives)
+      env.directives[key].patch(el, newProps[key], oldProps[key]);
+  
+  for (key in oldProps)
+    if (key in env.directives && !(key in newProps))
+      env.directives[key].unmount(el, oldProps[key]);
+};
 
-  return jsx(__tag, props, props.key);
-}
+let unmountDirectives = (el, props, env) => {
+  for (let key in props)
+    if (key in env.directives)
+      env.directives[key].unmount(el, props[key]);
+};
 
-export function jsx(__tag, props, key) {
-  if (key !== key) throw new Error("Invalid NaN key");
-  let vtype =
-    isStr(__tag)
-      ? VTYPE_ELEMENT
-      : isValidComponentType(__tag)
-      ? VTYPE_COMPONENT
-      : isFn(__tag)
-      ? VTYPE_FUNCTION
-      : undefined;
-  if (vtype === undefined) throw new Error("Invalid VNode type");
-  return {
-    vtype,
-    __tag,
-    key,
-    props,
-  };
-}
+let mount = (vnode, env, closureId, closure, onRemove = noop) => {
+  let baseRef = { closureId, closure, onRemove };
 
-export const Fragment = props => props.children;
+  if (isEmpty(vnode))
+    return { ...baseRef, type: REF_SINGLE, node: document.createComment('NULL') };
 
-export function render(vnode, parentDomNode, options = {}) {
-  let rootRef = parentDomNode.$$PETIT_DOM_REF;
-  let env = Object.assign({}, DEFAULT_ENV);
-  Object.assign(env.directives, options.directives);
-  if (rootRef == null) {
-    let ref = mount(vnode, env);
-    parentDomNode.$$PETIT_DOM_REF = { ref, vnode };
-    parentDomNode.textContent = "";
-    insertDom(parentDomNode, ref, null);
-  } else {
-    rootRef.ref = patchInPlace(
-      parentDomNode,
-      vnode,
-      rootRef.vnode,
-      rootRef.ref,
-      env
-    );
-    rootRef.vnode = vnode;
-  }
-}
+  if (isLeaf(vnode))
+    return { ...baseRef, type: REF_SINGLE, node: document.createTextNode(vnode) };
 
-// non exports
-class Renderer {
-  constructor(props, env) {
-    this.props = props;
-    this._STATE_ = {
-      env,
-      vnode: null,
-      parentDomNode: null,
-      ref: mount(null)
-    };
-    this.render = this.render.bind(this);
-  }
+  if (isElement(vnode)) {
+    let node,
+      { _t, props } = vnode;
 
-  setProps(props) {
-    this.oldProps = this.props;
-    this.props = props;
-  }
+    if (_t === 'svg' && !env.isSVG)
+      env = { ...env, isSVG: true };
 
-  render(vnode) {
-    let state = this._STATE_;
-    let oldVNode = state.vnode;
-    state.vnode = vnode;
-    if (state.parentDomNode === null) {
-      let parentNode = getParentNode(state.ref);
-      if (parentNode === null) {
-        state.ref = mount(vnode, state.env);
-        return;
-      } else {
-        state.parentDomNode = parentNode;
-      }
-    }
-    // here we are sure state.parentDOMNode is defined
-    state.ref = patchInPlace(
-      state.parentDomNode,
-      vnode,
-      oldVNode,
-      state.ref,
-      state.env
-    );
-  }
-}
-
-function mount(vnode, env = DEFAULT_ENV) {
-  if (isEmpty(vnode)) {
-    return {
-      type: REF_SINGLE,
-      node: document.createComment("NULL"),
-    };
-  } else if (isLeaf(vnode)) {
-    return {
-      type: REF_SINGLE,
-      node: document.createTextNode(vnode),
-    };
-  } else if (isElement(vnode)) {
-    let node;
-    let { __tag, props } = vnode;
-    if (__tag === "svg" && !env.isSvg) {
-      env = Object.assign({}, env, { isSVG: true });
-    }
-    // TODO : {is} for custom elements
-    if (!env.isSVG) {
-      node = document.createElement(__tag);
-    } else {
-      node = document.createElementNS(SVG_NS, __tag);
-    }
+    if (!env.isSVG) node = document.createElement(_t);
+    else node = document.createElementNS(SVG_NS, _t);
 
-    // element lifecycle hooks
-    if (isFn(props.oncreate)) props.oncreate(node);
+    isFn(props[ON_CREATE_KEY]) && props[ON_CREATE_KEY](node);
 
     mountAttributes(node, props, env);
-    let childrenRef =
-      props.children == null ? props.children : mount(props.children, env);
-    /**
-     * We need to insert content before setting interactive props
-     * that rely on children been present (e.g select)
-     */
-    if (childrenRef != null) insertDom(node, childrenRef);
+
+    let children = props.children === NIL
+      ? props.children
+      : mount(props.children, env);
+
+    if (children !== NIL) insertDom(node, children);
     mountDirectives(node, props, env);
+
     return {
+      ...baseRef,
       type: REF_SINGLE,
       node,
-      children: childrenRef,
-    };
-  } else if (isNonEmptyArray(vnode)) {
+      children
+    }
+  }
+
+  if (isNonEmptyArray(vnode)) {
+    let i = 0, children = [];
+    for (; i < vnode.length; i++)
+      children.push(mount(vnode[i], env));
+
     return {
+      ...baseRef,
       type: REF_ARRAY,
-      children: vnode.map((child) => mount(child, env)),
+      children
     };
-  } else if (isRenderFunction(vnode)) {
-    let childVNode = vnode.__tag(vnode.props);
+  }
 
-    if (isFn(childVNode)) {
-      let cmp,
-        view = childVNode,
-        id = ID(),
-        cmps = CLOSURE_TO_CMP.get(vnode.__tag) ?? {};
-      
-      vnode.id = id;
-      cmp = toClosureCmp(vnode, view)
-      
-      cmps[id] = cmp;
-      CLOSURE_TO_CMP.set(vnode.__tag, cmps);
-      CMP_TO_CLOSURE.set(cmp, vnode.__tag);
-      return mount(cmp);
-    }
+  if (isRenderFunction(vnode)) {
+    let childVnode = vnode._t(vnode.props); // if this is a closure component, this will be "oninit"
 
-    let childRef = mount(childVNode, env);
-    return {
-      type: REF_PARENT,
-      childRef,
-      childState: childVNode,
-    };
-  } else if (isComponent(vnode)) {
-    let renderer = new Renderer(vnode.props, env);
-
-    let parentCmp;
-    if (parentCmp = MOUNTING[MOUNTING.length - 1]) {
-      let child_closure = CMP_TO_CLOSURE.get(vnode),
-        childs = CHILDS.get(parentCmp) || [],
-        idx = childs.length;
-        
-      // attach method to remove self from parent
-      vnode.__tag.removeFromParent = _ => childs.splice(idx, 1);
-
-      childs.push({
-        id: vnode.id,
-        vtype: VTYPE_FUNCTION,
-        __tag: child_closure
-      });
-
-      CHILDS.set(parentCmp, childs);
+    if (isFn(childVnode)) {
+      // closure component
+      let id = generateClosureId(),
+        fnMap = CLOSURE_TO_FN.get(vnode._t) || new Map(),
+        onRemove = ON_REMOVES.pop() || noop;
+
+      fnMap.set(id, childVnode); // save renderFn
+      CLOSURE_TO_FN.set(vnode._t, fnMap); // closure -> Map(id -> renderFn)
+
+      let closure = vnode._t;
+      vnode._t = childVnode;
+      return mount(vnode, env, id, closure, onRemove);
     }
 
-    vnode.__tag.mount(renderer);
     return {
+      ...baseRef,
       type: REF_PARENT,
-      childRef: renderer._STATE_.ref,
-      childState: renderer,
+      childRef: mount(childVnode, env),
+      childState: childVnode
     };
-  } else if (vnode instanceof Node) {
-    return {
-      type: REF_SINGLE,
-      node: vnode,
-    };
-  }
-  if (vnode === undefined) {
-    throw new Error("mount: vnode is undefined!");
   }
 
-  throw new Error("mount: Invalid Vnode!");
-}
-
-function patch(
-  parentDomNode,
-  newVNode,
-  oldVNode,
-  ref,
-  env = DEFAULT_ENV
-) {
-  if (isObj(oldVNode) && isObj(newVNode))
-    newVNode.id = oldVNode.id;
-
-  if (oldVNode === newVNode) {
-    return ref;
-  } else if (isEmpty(newVNode) && isEmpty(oldVNode)) {
-    return ref;
-  } else if (isLeaf(newVNode) && isLeaf(oldVNode)) {
-    ref.node.nodeValue = newVNode;
-    return ref;
-  } else if (
-    isElement(newVNode) &&
-    isElement(oldVNode) &&
-    newVNode.__tag === oldVNode.__tag
-  ) {
-    if (newVNode.__tag === "svg" && !env.isSvg) {
-      env = Object.assign({}, env, { isSVG: true });
-    }
-    patchAttributes(ref.node, newVNode.props, oldVNode.props, env);
-    let oldChildren = oldVNode.props.children;
-    let newChildren = newVNode.props.children;
-    if (oldChildren == null) {
-      if (newChildren != null) {
-        ref.children = mount(newChildren, env);
-        insertDom(ref.node, ref.children);
-      }
-    } else {
-      if (newChildren == null) {
-        ref.node.textContent = "";
-        unmount(oldChildren, ref.children, env);
-        ref.children = null;
-      } else {
-        ref.children = patchInPlace(
-          ref.node,
-          newChildren,
-          oldChildren,
-          ref.children,
-          env
-        );
-      }
-    }
-    patchDirectives(ref.node, newVNode.props, oldVNode.props, env);
-    return ref;
-  } else if (isNonEmptyArray(newVNode) && isNonEmptyArray(oldVNode)) {
-    patchChildren(parentDomNode, newVNode, oldVNode, ref, env);
-    return ref;
-  } else if (
-    isRenderFunction(newVNode) &&
-    isRenderFunction(oldVNode) &&
-    newVNode.__tag === oldVNode.__tag
-  ) {
-    let renderFn = newVNode.__tag;
-    let shouldUpdate =
-      renderFn.shouldUpdate != null
-        ? renderFn.shouldUpdate(oldVNode.props, newVNode.props)
-        : defaultShouldUpdate(oldVNode.props, newVNode.props);
-    if (shouldUpdate) {
-      let cmp,
-        id = oldVNode.id,
-        cmps = CLOSURE_TO_CMP.get(renderFn);
-
-      if (cmps && id && (cmp = cmps[id])) {
-        return patch(
-          parentDomNode,
-          { ...cmp, props: newVNode.props },
-          cmp,
-          ref
-        );
-      }
+  if (vnode instanceof Node)
+    return { ...baseRef, type: REF_SINGLE, node: vnode };
+  
+  if (vnode === NIL)
+    throw Error('mount: vnode is undefined');
 
-      let childVNode = renderFn(newVNode.props);
-      let childRef = patch(
-        parentDomNode,
-        childVNode,
-        ref.childState,
-        ref.childRef,
-        env
-      );
-      // We need to return a new ref in order for parent patches to
-      // properly replace changing DOM nodes
-      if (childRef !== ref.childRef) {
-        return {
-          type: REF_PARENT,
-          childRef,
-          childState: childVNode,
-        };
-      } else {
-        ref.childState = childVNode;
-        return ref;
-      }
-    } else {
-      return ref;
-    }
-  } else if (
-    isComponent(newVNode) &&
-    isComponent(oldVNode) &&
-    newVNode.__tag === oldVNode.__tag
-  ) {
-    let renderer = ref.childState;
-    let state = renderer._STATE_;
-    state.env = env;
-    state.parentNode = parentDomNode;
-    renderer.setProps(newVNode.props);
-    newVNode.__tag.patch(renderer);
-    if (ref.childRef !== state.ref) {
-      return {
-        type: REF_PARENT,
-        childRef: state.ref,
-        childState: renderer,
-      };
-    } else {
-      return ref;
-    }
-  } else if (newVNode instanceof Node && oldVNode instanceof Node) {
-    ref.node = newVNode;
-    return ref;
-  } else {
-    return mount(newVNode, env);
-  }
-}
+  throw Error('mount: Invalid vnode');
+};
 
-/**
- * Execute any compoenent specific unmount code
- */
-function unmount(vnode, ref, env) {
-  // if (vnode instanceof Node ||  isEmpty(vnode) || isLeaf(vnode)) return;
+let unmount = (vnode, ref, env) => {
   if (isElement(vnode)) {
     unmountDirectives(ref.node, vnode.props, env);
-    if (vnode.props.children != null)
+    if (vnode.props.children !== NIL)
       unmount(vnode.props.children, ref.children, env);
   } else if (isNonEmptyArray(vnode)) {
-    vnode.forEach((childVNode, index) =>
-      unmount(childVNode, ref.children[index], env)
-    );
+    for (let i = 0; i < vnode.length; i++)
+      unmount(vnode[i], ref.children[i], env);
   } else if (isRenderFunction(vnode)) {
-    let cmp, cmps = CLOSURE_TO_CMP.get(vnode.__tag);
-    if (cmps && vnode.id && (cmp = cmps[vnode.id])) {
-      delete cmps[vnode.id];
-      CMP_TO_CLOSURE.delete(cmp);
-      return unmount(cmp, ref, env);
+    let closure = ref.closure,
+      closureId = ref.closureId,
+      onRemove = ref.onRemove,
+      fns = CLOSURE_TO_FN.get(closure);
+
+    if (fns && closureId && fns.get(closureId)) {
+      fns.delete(closureId);
+      !fns.size && CLOSURE_TO_FN.delete(closure);
+      onRemove();
     }
 
     unmount(ref.childState, ref.childRef, env);
-  } else if (isComponent(vnode)) {
-    vnode.__tag.unmount(ref.childState);
   }
-}
+};
+
+let patchInPlace = (parentDomNode, newVnode, oldVnode, ref, env) => {
+  let newRef = patch(parentDomNode, newVnode, oldVnode, ref, env);
 
-function patchInPlace(parentDomNode, newVNode, oldVNode, ref, env) {
-  let newRef = patch(parentDomNode, newVNode, oldVNode, ref, env);
   if (newRef !== ref) {
     replaceDom(parentDomNode, newRef, ref);
-    unmount(oldVNode, ref, env);
+    unmount(oldVnode, ref, env);
   }
+  
   return newRef;
-}
-
-function patchChildren(parentDomNode, newChildren, oldchildren, ref, env) {
-  // We need to retreive the next sibling before the old children
-  // get eventually removed from the current DOM document
-  let nextNode = getNextSibling(ref);
-  let children = Array(newChildren.length);
-  let refChildren = ref.children;
-  let newStart = 0,
+};
+
+let patchChildren = (parentDomNode, newChildren, oldChildren, ref, env) => {
+  // we need to retrieve the next sibling before the old children get removed from the DOM
+  let i, idx, oldVnode, newVnode, oldRef, newRef, refMap, beforeNode,
+    nextNode = getNextSibling(ref),
+    children = Array(newChildren.length),
+    refChildren = ref.children,
+    newStart = 0,
     oldStart = 0,
     newEnd = newChildren.length - 1,
-    oldEnd = oldchildren.length - 1;
-  let oldVNode, newVNode, oldRef, newRef, refMap;
-
+    oldEnd = oldChildren.length - 1;
+    
   while (newStart <= newEnd && oldStart <= oldEnd) {
-    if (refChildren[oldStart] === null) {
+    if (refChildren[oldStart] === NIL) {
       oldStart++;
       continue;
     }
-    if (refChildren[oldEnd] === null) {
+    
+    if (refChildren[oldEnd] === NIL) {
       oldEnd--;
       continue;
     }
-
-    oldVNode = oldchildren[oldStart];
-    newVNode = newChildren[newStart];
-    if (newVNode.key === oldVNode.key) {
+    
+    oldVnode = oldChildren[oldStart];
+    newVnode = newChildren[newStart];
+    
+    if (oldVnode && newVnode && newVnode.key === oldVnode.key) {
       oldRef = refChildren[oldStart];
       newRef = children[newStart] = patchInPlace(
         parentDomNode,
-        newVNode,
-        oldVNode,
+        newVnode,
+        oldVnode,
         oldRef,
         env
       );
+      
       newStart++;
       oldStart++;
       continue;
     }
-
-    oldVNode = oldchildren[oldEnd];
-    newVNode = newChildren[newEnd];
-    if (newVNode.key === oldVNode.key) {
+    
+    oldVnode = oldChildren[oldEnd];
+    newVnode = newChildren[newEnd];
+    
+    if (oldVnode && newVnode && newVnode.key === oldVnode.key) {
       oldRef = refChildren[oldEnd];
       newRef = children[newEnd] = patchInPlace(
         parentDomNode,
-        newVNode,
-        oldVNode,
+        newVnode,
+        oldVnode,
         oldRef,
         env
       );
+      
       newEnd--;
       oldEnd--;
       continue;
     }
-
-    if (refMap == null) {
-      refMap = {};
-      for (let i = oldStart; i <= oldEnd; i++) {
-        oldVNode = oldchildren[i];
-        if (oldVNode.key != null) {
-          refMap[oldVNode.key] = i;
-        }
+    
+    if (refMap === NIL)
+      for (i = oldStart, refMap = {}; i <= oldEnd; i++) {
+        oldVnode = oldChildren[i];
+        if (oldVnode && oldVnode.key !== NIL)
+          refMap[oldVnode.key] = i;
       }
-    }
+    
+    newVnode = newChildren[newStart];
+    idx = newVnode && newVnode.key !== NIL ? refMap[newVnode.key] : NIL;
 
-    newVNode = newChildren[newStart];
-    let idx = newVNode.key != null ? refMap[newVNode.key] : null;
-    if (idx != null) {
-      oldVNode = oldchildren[idx];
+    if (idx !== NIL) {
+      oldVnode = oldChildren[idx];
       oldRef = refChildren[idx];
       newRef = children[newStart] = patch(
         parentDomNode,
-        newVNode,
-        oldVNode,
+        newVnode,
+        oldVnode,
         oldRef,
         env
       );
+      
       insertDom(parentDomNode, newRef, getDomNode(refChildren[oldStart]));
+      
       if (newRef !== oldRef) {
         removeDom(parentDomNode, oldRef);
-        unmount(oldVNode, oldRef, env);
+        unmount(oldVnode, oldRef, env);
       }
-      refChildren[idx] = null;
+      
+      refChildren[idx] = NIL;
     } else {
-      newRef = children[newStart] = mount(newVNode, env);
+      newRef = children[newStart] = mount(newVnode, env);
       insertDom(parentDomNode, newRef, getDomNode(refChildren[oldStart]));
     }
+    
     newStart++;
   }
-
-  let beforeNode =
-    newEnd < newChildren.length - 1
-      ? getDomNode(children[newEnd + 1])
-      : nextNode;
+  
+  beforeNode = newEnd < newChildren.length - 1
+    ? getDomNode(children[newEnd + 1])
+    : nextNode;
+    
   while (newStart <= newEnd) {
-    let newRef = mount(newChildren[newStart], env);
+    newRef = mount(newChildren[newStart], env);
     children[newStart] = newRef;
     insertDom(parentDomNode, newRef, beforeNode);
     newStart++;
   }
+  
   while (oldStart <= oldEnd) {
     oldRef = refChildren[oldStart];
-    if (oldRef != null) {
+    
+    if (oldRef !== NIL) {
       removeDom(parentDomNode, oldRef);
-      unmount(oldchildren[oldStart], oldRef, env);
+      unmount(oldChildren[oldStart], oldRef, env);
     }
+    
     oldStart++;
   }
+  
   ref.children = children;
-}
+};
 
-function defaultShouldUpdate(p1, p2) {
-  if (p1 === p2) return false;
-  for (let key in p2) {
-    if (p1[key] !== p2[key]) return true;
-  }
-  return false;
-}
+let patch = (parentDomNode, newVnode, oldVnode, ref, env = { ...DEFAULT_ENV }) => {
+  if (newVnode && newVnode._t === RETAIN_KEY) return ref;
 
-function propDirective(prop) {
-  return {
-    mount(element, value) {``
-      element[prop] = value;
-    },
-    patch(element, newValue, oldValue) {
-      if (newValue !== oldValue) {
-        element[prop] = newValue;
-      }
-    },
-    unmount(element, _) {
-      element[prop] = null;
-    },
-  };
-}
+  let closure, closureId;
 
-function getDomNode(ref) {
-  if (ref.type === REF_SINGLE) {
-    return ref.node;
-  } else if (ref.type === REF_ARRAY) {
-    return getDomNode(ref.children[0]);
-  } else if (ref.type === REF_PARENT) {
-    return getDomNode(ref.childRef);
+  if (isObj(ref)) {
+    closure = ref.closure;
+    closureId = ref.closureId;
   }
-  throw new Error("Unkown ref type " + JSON.stringify(ref));
-}
 
-function getParentNode(ref) {
-  if (ref.type === REF_SINGLE) {
-    return ref.node.parentNode;
-  } else if (ref.type === REF_ARRAY) {
-    return getParentNode(ref.children[0]);
-  } else if (ref.type === REF_PARENT) {
-    return getParentNode(ref.childRef);
-  }
-  throw new Error("Unkown ref type " + ref);
-}
+  if (isRenderFunction(newVnode) && isRenderFunction(oldVnode) && (newVnode._t === oldVnode._t || (closure && closureId))) {
+    // x is either a renderFn or a closure
+    let x = newVnode._t,
+      fn,
+      fns = CLOSURE_TO_FN.get(closure);
 
-function getNextSibling(ref) {
-  if (ref.type === REF_SINGLE) {
-    return ref.node.nextSibling;
-  } else if (ref.type === REF_ARRAY) {
-    return getNextSibling(ref.children[ref.children.length - 1]);
-  } else if (ref.type === REF_PARENT) {
-    return getNextSibling(ref.childRef);
-  }
-  throw new Error("Unkown ref type " + JSON.stringify(ref));
-}
+    if (fns && closureId && (fn = fns.get(closureId)))
+      x = fn;
 
-function insertDom(parent, ref, nextSibling) {
-  if (ref.type === REF_SINGLE) {
-    parent.insertBefore(ref.node, nextSibling);
-  } else if (ref.type === REF_ARRAY) {
-    ref.children.forEach((ch) => {
-      insertDom(parent, ch, nextSibling);
-    });
-  } else if (ref.type === REF_PARENT) {
-    insertDom(parent, ref.childRef, nextSibling);
-  } else {
-    throw new Error("Unkown ref type " + JSON.stringify(ref));
-  }
-}
+    let childVnode = x(newVnode.props),
+      childRef = patch(
+        parentDomNode,
+        childVnode,
+        ref.childState,
+        ref.childRef,
+        env
+      );
 
-function removeDom(parent, ref) {
-  if (ref.type === REF_SINGLE) {
-    parent.removeChild(ref.node);
-  } else if (ref.type === REF_ARRAY) {
-    ref.children.forEach((ch) => {
-      removeDom(parent, ch);
-    });
-  } else if (ref.type === REF_PARENT) {
-    removeDom(parent, ref.childRef);
-  } else {
-    throw new Error("Unkown ref type " + ref);
+    // we need to return a new ref in order for parent patches to properly replace changing DOM nodes
+    if (childRef !== ref.childRef)
+      return {
+        type: REF_PARENT,
+        childRef,
+        childState: childVnode
+      };
+    else {
+      ref.childState = childVnode;
+      return ref;
+    }
   }
-}
 
-function replaceDom(parent, newRef, oldRef) {
-  insertDom(parent, newRef, getDomNode(oldRef));
-  removeDom(parent, oldRef);
-}
+  if (oldVnode === newVnode || (isEmpty(newVnode) && isEmpty(oldVnode)))
+    return ref;
 
-function mountDirectives(domElement, props, env) {
-  for (let key in props) {
-    if (key in env.directives) {
-      env.directives[key].mount(domElement, props[key]);
-    }
+  if (isLeaf(newVnode) && isLeaf(oldVnode)) {
+    // leafs just need to have node value updated
+    ref.node.nodeValue = newVnode;
+    return ref;
   }
-}
 
-function patchDirectives(domElement, newProps, oldProps, env) {
-  for (let key in newProps) {
-    if (key in env.directives) {
-      env.directives[key].patch(domElement, newProps[key], oldProps[key]);
-    }
-  }
-  for (let key in oldProps) {
-    if (key in env.directives && !(key in newProps)) {
-      env.directives[key].unmount(domElement, oldProps[key]);
-    }
-  }
-}
+  if (isElement(newVnode) && isElement(oldVnode) && newVnode._t === oldVnode._t) {
+    // make sure env has isSVG flag set to true
+    if (newVnode._t === 'svg' && !env.isSVG)
+      env = { ...env, isSVG: true };
 
-function unmountDirectives(domElement, props, env) {
-  for (let key in props) {
-    if (key in env.directives) {
-      env.directives[key].unmount(domElement, props[key]);
-    }
-  }
-}
+    // update the node DOM attributes with the new props
+    patchAttributes(ref.node, newVnode.props, oldVnode.props, env);
 
-function mountAttributes(domElement, props, env) {
-  for (var key in props) {
-    if (key === "key" || key === "children" || key in env.directives) continue;
-    if (key.startsWith("on")) {
-      let cmp = MOUNTING[MOUNTING.length - 1];
-      domElement[key.toLowerCase()] = cmp ? cmp.__tag.event(props[key]) : props[key];
-    } else {
-      setDOMAttribute(domElement, key, props[key], env.isSVG);
-    }
-  }
-}
+    let oldChildren = oldVnode.props.children,
+      newChildren = newVnode.props.children;
 
-function patchAttributes(domElement, newProps, oldProps, env) {
-  for (var key in newProps) {
-    if (key === "key" || key === "children" || key in env.directives) continue;
-    var oldValue = oldProps[key];
-    var newValue = newProps[key];
-    if (oldValue !== newValue) {
-      if (key.startsWith("on")) {
-        let cmp = MOUNTING[MOUNTING.length - 1];
-        domElement[key.toLowerCase()] = cmp ? cmp.__tag.event(newValue) : newValue;
+    if (oldChildren === NIL) {
+      if (newChildren !== NIL) {
+        ref.children = mount(newChildren, env);
+        insertDom(ref.node, ref.children);
+      }
+    } else {
+      if (newChildren === NIL) {
+        ref.node.textContent = '';
+        unmount(oldChildren, ref.children, env);
+        ref.children = NIL;
       } else {
-        setDOMAttribute(domElement, key, newValue, env.isSVG);
+        ref.children = patchInPlace(
+          ref.node,
+          newChildren,
+          oldChildren,
+          ref.children,
+          env
+        );
       }
     }
+
+    patchDirectives(ref.node, newVnode.props, oldVnode.props, env);
+    return ref;
   }
-  for (key in oldProps) {
-    if (
-      key === "key" ||
-      key === "children" ||
-      key in env.directives ||
-      key in newProps
-    )
-      continue;
-    if (key.startsWith("on")) {
-      domElement[key.toLowerCase()] = null;
-    } else {
-      domElement.removeAttribute(key);
-    }
+  
+  if (isNonEmptyArray(newVnode) && isNonEmptyArray(oldVnode)) {
+    patchChildren(parentDomNode, newVnode, oldVnode, ref, env);
+    return ref;
   }
-}
 
-function setDOMAttribute(el, attr, value, isSVG) {
-  if (value === true) {
-    el.setAttribute(attr, "");
-  } else if (value === false) {
-    el.removeAttribute(attr);
-  } else {
-    var namespace = isSVG ? NS_ATTRS[attr] : undefined;
-    if (namespace !== undefined) {
-      el.setAttributeNS(namespace, attr, value);
-    } else {
-      el.setAttribute(attr, value);
-    }
+  if (newVnode instanceof Node && oldVnode instanceof Node) {
+    ref.node = newVnode;
+    return ref;
   }
-}
 
-function toClosureCmp(vnode, view) {
-  let onRemove = ON_REMOVES.pop() ?? noop,
-    cmp = {
-      key: vnode.key,
-      id: vnode.id,
-      vtype: VTYPE_COMPONENT,
-      props: vnode.props || {},
-      __tag: {
-        view,
-        removeFromParent: noop,
-        event: noop,
-        mount: render,
-        patch: render,
-        unmount: _ => {
-          onRemove();
-          let childs;
-          if (childs = CHILDS.get(cmp)) {
-            for (let i = 0; i < childs.length; i++) {
-              unmount(childs[i], EMPTY_OBJECT);
-            }
-
-            CHILDS.delete(cmp);
-          }
-          
-          cmp.__tag.removeFromParent();
-        }
-      }
-    };
-  
-  function render(ctx) {
-    cmp.__tag.event = fn => ev => {
-      fn(ev);
-      MOUNTING.push(cmp);
-      ctx.render(view({ ...ctx.props }));
-      MOUNTING.pop();
-    };
+  return mount(newVnode, env);
+};
+
+export function h(_t, ...children) {
+  let idx, props = children[0];
+  if (props && isObj(props) && !isArr(props) && !(props._t || props.props))
+    children.shift();
+  else props = EMPTY_OBJECT;
 
-    MOUNTING.push(cmp);
-    ctx.render(view({ ...ctx.props }));
-    MOUNTING.pop();
+  props =
+    children.length > 1
+      ? { ...props, children }
+      : children.length === 1
+      ? { ...props, children: children[0] }
+      : props;
+
+  // inline class parsing
+  if (isStr(_t) && ~(idx = _t.indexOf('.'))) {
+    let className = _t.slice(idx + 1).replace(/\./g, ' ')
+    props.class = props.class ? className + ' ' + String(props.class) : className;
+    _t = _t.slice(0, idx);
   }
 
-  return cmp;
+  if (props.key !== props.key) throw new Error("Invalid NaN key");
+
+  let vtype =
+    isStr(_t)
+      ? VTYPE_ELEMENT
+      : _t && isFn(_t.mount)
+      ? VTYPE_COMPONENT
+      : isFn(_t)
+      ? VTYPE_FUNCTION
+      : NIL;
+
+  if (vtype === NIL) throw new Error("Invalid VNode type");
+
+  // returns a vnode
+  return {
+    vtype, // (number) VTYPE_ELEMENT | VTYPE_COMPONENT | VTYPE_FUNCTION
+    _t, // (string | object | function)
+    key: props.key, // string
+    props // object
+  };
 }
+
+h.retain = _ => h(RETAIN_KEY);
+
+export const m = h;
+
+export const Fragment = props => props.children;
+
+export const onRemove = fn => ON_REMOVES.push(fn);
+
+export function app(vnode, parentDomNode, opts = {}) {
+  let ref,
+    env = { ...DEFAULT_ENV, manualRedraw: opts.manualRedraw },
+    rootRef = parentDomNode[PARENT_DOM_KEY];
+
+  env.directives = { ...env.directives, ...(opts.directives || {}) };
+
+  if (rootRef !== NIL)
+    throw Error('App already mounted on this node');
+
+  ref = mount(vnode, env);
+  rootRef = parentDomNode[PARENT_DOM_KEY] = { ref, vnode };
+  parentDomNode.textContent = '';
+  insertDom(parentDomNode, ref, NIL);
+
+  return env.redraw = (newVnode = vnode) => {
+    rootRef.ref = patchInPlace(
+      parentDomNode,
+      newVnode,
+      rootRef.vnode,
+      rootRef.ref,
+      env
+    );
+
+    rootRef.vnode = newVnode;
+  };
+}