@3sln/dodo 0.0.1

package/dodo.js

@@ -0,0 +1,698 @@
+const ELEMENT_NODE = Symbol('ELEMENT_NODE');
+const ALIAS_NODE = Symbol('ALIAS_NODE');
+const SPECIAL_NODE = Symbol('SPECIAL_NODE');
+const OPAQUE_NODE = Symbol('OPAQUE_NODE');
+const NODE_STATE = Symbol('NODE_STATE');
+
+const EMPTY_OBJECT = Object.freeze({});
+const EMPTY_ARRAY = Object.freeze([]);
+
+function defaultShouldUpdate(argsA, argsB) {
+  if (argsA.length !== argsB.length) {
+    return true;
+  }
+  for (let i = 0; i < argsA.length; i++) {
+    if (argsA[i] !== argsB[i]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function flattenSeqIntoArray(array, items) {
+  for (const item of settings.seqIter(items)) {
+    if (item === null || item === undefined) {
+      continue;
+    }
+    if (!settings.isSeq(item)) {
+      array.push(item);
+      continue;
+    }
+    flattenSeqIntoArray(array, item);
+  }
+}
+
+function defaultFlattenSeq(items) {
+  const array = [];
+  flattenSeqIntoArray(array, items);
+  return array;
+}
+
+function isIterable(x) {
+  return Array.isArray(x) || (x != null && typeof x[Symbol.iterator] === 'function' && typeof x !== 'string');
+}
+
+export const settings = {
+  shouldUpdate: defaultShouldUpdate,
+  isMap: (x) => x?.constructor === Object,
+  mapIter: (m) => Object.entries(m),
+  mapGet: (m, k) => m[k],
+  isSeq: isIterable,
+  flattenSeq: defaultFlattenSeq,
+  seqIter: (s) => s,
+  convertTagName: (t) => t,
+  convertPropName: (p) => p,
+  convertStyleName: (s) => s,
+  convertDataName: (d) => d,
+  convertClassName: (c) => c,
+};
+
+function flattenVNodeChildrenIntoArray(array, children) {
+  for (const item of children) {
+    if (item === null || item === undefined) {
+      continue;
+    }
+    if (!settings.isSeq(item)) {
+      array.push(item);
+      continue;
+    }
+    flattenVNodeChildrenIntoArray(array, settings.seqIter(item));
+  }
+}
+
+function flattenVNodeChildren(children) {
+  const array = [];
+  flattenVNodeChildrenIntoArray(array, children);
+  return array;
+}
+
+class VNode {
+  constructor(type, tag, args) {
+    this.type = type;
+    this.tag = tag;
+    this.args = args;
+  }
+
+  key(k) {
+    this.key = k;
+    return this;
+  }
+
+  on(hooks) {
+    this.hooks = hooks;
+    return this;
+  }
+}
+
+export function alias(f) {
+  return (...args) => new VNode(ALIAS_NODE, f, args);
+}
+
+export function special(o) {
+  return (...args) => new VNode(SPECIAL_NODE, o, args);
+}
+
+export function h(tag, props, ...children) {
+  if (!settings.isMap(props)) {
+    children.unshift(props);
+    props = EMPTY_OBJECT;
+  }
+  return new VNode(ELEMENT_NODE, settings.convertTagName(tag), [props ?? EMPTY_OBJECT, ...children]);
+}
+
+export function o(tag, props) {
+  return new VNode(OPAQUE_NODE, settings.convertTagName(tag), [props ?? EMPTY_OBJECT]);
+}
+
+function reconcileElementStyling(target, oldStyling, newStyling) {
+  const style = target.style;
+  for (const [name, value] of settings.mapIter(newStyling)) {
+    style.setProperty(settings.convertStyleName(name), value);
+  }
+  for (const [name] of settings.mapIter(oldStyling)) {
+    if (settings.mapGet(newStyling, name) !== undefined) {
+      continue;
+    }
+    style.removeProperty(settings.convertStyleName(name));
+  }
+}
+
+function reconcileElementAttributes(target, oldAttrs, newAttrs) {
+  for (const [name, value] of settings.mapIter(newAttrs)) {
+    target.setAttribute(settings.convertPropName(name), value);
+  }
+  for (const [name] of settings.mapIter(oldAttrs)) {
+    if (settings.mapGet(newAttrs, name) !== undefined) {
+      continue;
+    }
+    target.removeAttribute(settings.convertPropName(name));
+  }
+}
+
+function reconcileElementDataset(target, oldDataset, newDataset) {
+  for (const [name, value] of settings.mapIter(newDataset)) {
+    target.dataset[settings.convertDataName(name)] = value;
+  }
+  for (const [name] of settings.mapIter(oldDataset)) {
+    if (settings.mapGet(newDataset, name) !== undefined) {
+      continue;
+    }
+    delete target.dataset[settings.convertDataName(name)];
+  }
+}
+
+function reconcileElementClasses(target, oldClasses, newClasses) {
+  const classesToRemove = new Set(settings.flattenSeq(oldClasses));
+  for (const c of settings.flattenSeq(newClasses)) {
+    const className = settings.convertClassName(c);
+    classesToRemove.delete(className);
+    target.classList.add(className);
+  }
+
+  for (const c of classesToRemove) {
+    target.classList.remove(settings.convertClassName(c));
+  }
+}
+
+function reconcileElementProps(target, props) {
+  const nodeState = target[NODE_STATE];
+  const originalProps = nodeState?.originalProps;
+
+  if (!nodeState.vdom) {
+    for (const [name, newValue] of settings.mapIter(props)) {
+      const propName = settings.convertPropName(name);
+      switch (propName) {
+        case 'styling': {
+          if (!settings.isMap(newValue)) {
+            throw new Error('invalid value for styling prop');
+          }
+          reconcileElementStyling(target, EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
+          break;
+        }
+        case 'classes': {
+          if (!settings.isSeq(newValue)) {
+            throw new Error('invalid value for classes prop');
+          }
+          reconcileElementClasses(target, EMPTY_ARRAY, newValue ?? EMPTY_ARRAY);
+          break;
+        }
+        case 'attrs': {
+          if (!settings.isMap(newValue)) {
+            throw new Error('invalid value for attrs prop');
+          }
+          reconcileElementAttributes(target, EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
+          break;
+        }
+        case 'dataset': {
+          if (!settings.isMap(newValue)) {
+            throw new Error('invalid value for dataset prop');
+          }
+          reconcileElementDataset(target, EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
+          break;
+        }
+        default: {
+          if (newValue === undefined) {
+            if (propName in originalProps) {
+              target[propName] = originalProps[propName];
+            }
+            break;
+          }
+          if (!(propName in originalProps)) {
+            originalProps[propName] = target[propName];
+          }
+          target[propName] = newValue;
+          break;
+        }
+      }
+    }
+  } else {
+    const currentProps = nodeState?.vdom.args[0] ?? EMPTY_OBJECT;
+    for (const [name, newValue] of settings.mapIter(props)) {
+      const propName = settings.convertPropName(name);
+      const oldValue = settings.mapGet(currentProps, name);
+
+      if (Object.is(newValue, oldValue)) {
+        continue;
+      }
+
+      switch (propName) {
+        case 'styling': {
+          if (!settings.isMap(newValue)) {
+            throw new Error('invalid value for styling prop');
+          }
+          reconcileElementStyling(target, oldValue ?? EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
+          break;
+        }
+        case 'classes': {
+          if (!settings.isSeq(newValue)) {
+            throw new Error('invalid value for classes prop');
+          }
+          reconcileElementClasses(target, oldValue ?? EMPTY_ARRAY, newValue ?? EMPTY_ARRAY);
+          break;
+        }
+        case 'attrs': {
+          if (!settings.isMap(newValue)) {
+            throw new Error('invalid value for attrs prop');
+          }
+          reconcileElementAttributes(target, oldValue ?? EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
+          break;
+        }
+        case 'dataset': {
+          if (!settings.isMap(newValue)) {
+            throw new Error('invalid value for dataset prop');
+          }
+          reconcileElementDataset(target, oldValue ?? EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
+          break;
+        }
+        default: {
+          if (newValue === undefined) {
+            if (propName in originalProps) {
+              target[propName] = originalProps[propName];
+            }
+            break;
+          }
+          if (!(propName in originalProps)) {
+            originalProps[propName] = target[propName];
+          }
+          target[propName] = newValue;
+          break;
+        }
+      }
+    }
+  }
+
+  for (const [name] of settings.mapIter(originalProps)) {
+    if (settings.mapGet(props, name) !== undefined) {
+      continue;
+    }
+    const propName = settings.convertPropName(name);
+    target[propName] = originalProps[propName];
+    delete originalProps[propName];
+  }
+}
+
+function reconcileListeners(target, hooks) {
+  const state = target[NODE_STATE];
+  if (!state.vdom) {
+    for (const [name, listener] of settings.mapIter(hooks)) {
+      if (name[0] === '$') {
+        continue;
+      }
+      switch (typeof listener) {
+        case 'function':
+          target.addEventListener(name, listener);
+          break;
+        case 'object':
+          target.addEventListener(name, listener.listener, { capture: listener.capture, passive: listener.passive });
+          break;
+      }
+    }
+  } else {
+    const oldHooks = state.vdom.hooks ?? EMPTY_OBJECT;
+    for (const [name, listener] of settings.mapIter(hooks)) {
+      if (name[0] === '$') {
+        continue;
+      }
+      const oldListener = settings.mapGet(oldHooks, name);
+      if (listener === oldListener) {
+        continue;
+      }
+
+      switch (typeof oldListener) {
+        case 'function':
+          target.removeEventListener(name, oldListener);
+          break;
+        case 'object':
+          target.removeEventListener(name, oldListener.listener, !!oldListener.capture);
+          break;
+      }
+      switch (typeof listener) {
+        case 'function':
+          target.addEventListener(name, listener);
+          break;
+        case 'object':
+          target.addEventListener(name, listener.listener, { capture: listener.capture, passive: listener.passive });
+          break;
+      }
+    }
+    for (const [name] of settings.mapIter(oldHooks)) {
+      if (name[0] === '$' || settings.mapGet(hooks, name) !== undefined) {
+        continue;
+      }
+      const oldListener = settings.mapGet(oldHooks, name);
+      switch (typeof oldListener) {
+        case 'function':
+          target.removeEventListener(name, oldListener);
+          break;
+        case 'object':
+          target.removeEventListener(name, oldListener.listener, !!oldListener.capture);
+          break;
+      }
+    }
+  }
+}
+
+function newElementNamespace(parentNode, newNodeTag) {
+  if (parentNode.namespaceURI === 'http://www.w3.org/1999/xhtml') {
+    switch (newNodeTag) {
+      case 'svg': return 'http://www.w3.org/2000/svg';
+      case 'math': return 'http://www.w3.org/1998/Math/MathML';
+    }
+  }
+  return parentNode.namespaceURI ?? parentNode.host?.namespaceURI ?? 'http://www.w3.org/1999/xhtml';
+}
+
+function reconcileNode(target) {
+  const state = target[NODE_STATE];
+  const newVdom = state.newVdom;
+  const oldVdom = state.vdom;
+  const args = newVdom.args;
+
+  switch (newVdom.type) {
+    case ELEMENT_NODE: {
+      reconcileElementProps(target, args[0]);
+      reconcileElementChildren(target, args.slice(1));
+      break;
+    }
+    case OPAQUE_NODE: {
+      reconcileElementProps(target, args[0]);
+      break;
+    }
+    case ALIAS_NODE: {
+      const innerVdom = newVdom.tag.apply(undefined, newVdom.args);
+      if (innerVdom === undefined || innerVdom === null) {
+        break;
+      }
+      if (settings.isSeq(innerVdom)) {
+        reconcileElementChildren(target, innerVdom);
+      } else {
+        reconcileElementChildren(target, [innerVdom]);
+      }
+      break;
+    }
+    case SPECIAL_NODE: {
+      try {
+        newVdom.tag.update?.(target, newVdom.args, oldVdom?.args);
+      } catch (err) {
+        console.error(err);
+      }
+      break;
+    }
+  }
+
+  if (newVdom.hooks || oldVdom?.hooks) {
+    reconcileListeners(target, newVdom.hooks ?? EMPTY_OBJECT);
+  }
+  try {
+    newVdom.hooks?.$update?.(target, newVdom, oldVdom);
+  } catch (err) {
+    console.error(err);
+  }
+  state.vdom = newVdom;
+  delete state.newVdom;
+}
+
+function createElementNode(parentNode, tag, vdom) {
+  const el = parentNode.ownerDocument.createElementNS(newElementNamespace(parentNode, tag), tag);
+  el[NODE_STATE] = { originalProps: {}, newVdom: vdom };
+  return el;
+}
+
+function createNode(parentNode, vdom) {
+  if (typeof vdom !== 'object' || vdom === null) {
+    return parentNode.ownerDocument.createTextNode(vdom.toString());
+  }
+
+  let domNode;
+  switch (vdom.type) {
+    case ELEMENT_NODE:
+    case OPAQUE_NODE:
+      domNode = createElementNode(parentNode, vdom.tag, vdom);
+      break;
+    case ALIAS_NODE:
+      domNode = createElementNode(parentNode, 'udom-alias', vdom);
+      domNode.style.display = 'contents';
+      break;
+    case SPECIAL_NODE:
+      domNode = createElementNode(parentNode, 'udom-special', vdom);
+      domNode.style.display = 'contents';
+      break;
+    default:
+      throw new Error('Invalid VDOM node');
+  }
+  return domNode;
+}
+
+const documentToFocusWithinSet = new WeakMap();
+
+function getPathFromElement(element) {
+  const path = [];
+  let current = element;
+  while (current) {
+    path.push(current);
+    if (current.shadowRoot) {
+      current = current.shadowRoot.host;
+    } else {
+      current = current.parentNode;
+    }
+  }
+  return path;
+}
+
+function addPathToFocusWithinSet(set, path) {
+  for (const node of path) {
+    set.add(node);
+  }
+}
+
+function removePathFromFocusWithinSet(set, newPath) {
+  const newPathSet = new Set(newPath);
+  for (const node of [...set]) {
+    if (!newPathSet.has(node)) {
+      set.delete(node);
+    }
+  }
+}
+
+function installFocusTrackingForDocument(doc) {
+  const focusWithinSet = new Set();
+  doc.addEventListener('focusin', (event) => {
+    addPathToFocusWithinSet(focusWithinSet, event.composedPath());
+  });
+  doc.addEventListener('focusout', (event) => {
+    const newPath = event.relatedTarget ? event.composedPath() : [];
+    removePathFromFocusWithinSet(focusWithinSet, newPath);
+  });
+  addPathToFocusWithinSet(focusWithinSet, getPathFromElement(doc.activeElement));
+  documentToFocusWithinSet.set(doc, focusWithinSet);
+  return focusWithinSet;
+}
+
+function cleanupTarget(target) {
+  for (const child of target.children) {
+    cleanupTarget(child);
+  }
+  const state = target[NODE_STATE];
+  if (state) {
+    switch (state.vdom.type) {
+      case ELEMENT_NODE:
+      case OPAQUE_NODE:
+        reconcileElementProps(target, {});
+        break;
+      case SPECIAL_NODE:
+        try {
+          state.vdom.tag.detach?.(target);
+        } catch (err) {
+          console.error(err);
+        }
+        break;
+    }
+    try {
+      state.vdom.hooks?.$detach?.(target);
+    } catch (err) {
+      console.error(err);
+    }
+    delete target[NODE_STATE];
+  }
+}
+
+function reconcileElementChildren(target, childrenIterable) {
+  const newChildren = flattenVNodeChildren(childrenIterable);
+  const oldNodesToRemove = new Set(target.childNodes);
+  const oldVNodeNodesPool = new Map();
+  const oldTextNodesPool = [];
+
+  for (const oldChild of target.childNodes) {
+    if (oldChild.nodeType === 3 /* TEXT_NODE */) {
+      oldTextNodesPool.push(oldChild);
+      continue;
+    }
+    const vdom = oldChild[NODE_STATE]?.vdom;
+    if (vdom === undefined) {
+      continue;
+    }
+
+    let oldNodesPoolForTag = oldVNodeNodesPool.get(vdom.tag);
+    if (!oldNodesPoolForTag) {
+      oldNodesPoolForTag = { nodesForKey: new Map(), nodesWithoutKey: [] };
+      oldVNodeNodesPool.set(vdom.tag, oldNodesPoolForTag);
+    }
+
+    if (vdom.key !== undefined) {
+      let oldNodesPoolForKey = oldNodesPoolForTag.nodesForKey.get(vdom.key);
+      if (oldNodesPoolForKey === undefined) {
+        oldNodesPoolForKey = [];
+        oldNodesPoolForTag.nodesForKey.set(vdom.key, oldNodesPoolForKey);
+      }
+      oldNodesPoolForKey.push(oldChild);
+    } else {
+      oldNodesPoolForTag.nodesWithoutKey.push(oldChild);
+    }
+  }
+
+  const newDomChildren = [];
+  for (const newVdom of newChildren) {
+    let newDomNode;
+    if (newVdom instanceof VNode) {
+      const oldNodesPoolForTag = oldVNodeNodesPool.get(newVdom.tag);
+      if (!oldNodesPoolForTag) {
+        newDomNode = createNode(target, newVdom);
+      } else {
+        const key = newVdom.key;
+        if (key !== undefined) {
+          const pool = oldNodesPoolForTag.nodesForKey.get(key);
+          if (pool && pool.length > 0) {
+            newDomNode = pool.shift();
+            const state = newDomNode[NODE_STATE];
+            if (settings.shouldUpdate(state.vdom.args, newVdom.args)) {
+              state.newVdom = newVdom;
+            }
+          } else {
+            newDomNode = createNode(target, newVdom);
+          }
+        } else {
+          const unkeyedOldNode = oldNodesPoolForTag.nodesWithoutKey.shift();
+          if (unkeyedOldNode) {
+            newDomNode = unkeyedOldNode;
+            const state = newDomNode[NODE_STATE];
+            if (settings.shouldUpdate(state.vdom.args, newVdom.args)) {
+              state.newVdom = newVdom;
+            }
+          } else {
+            newDomNode = createNode(target, newVdom);
+          }
+        }
+      }
+    } else {
+      if (oldTextNodesPool.length > 0) {
+        newDomNode = oldTextNodesPool.shift();
+        newDomNode.nodeValue = newVdom?.toString();
+      } else {
+        newDomNode = target.ownerDocument.createTextNode(newVdom?.toString());
+      }
+    }
+    oldNodesToRemove.delete(newDomNode);
+    newDomChildren.push(newDomNode);
+  }
+
+  for (const nodeToRemove of oldNodesToRemove) {
+    cleanupTarget(nodeToRemove);
+    target.removeChild(nodeToRemove);
+  }
+
+  const moveBefore = window.Element.prototype.moveBefore;
+  const insertBefore = window.Element.prototype.insertBefore;
+  if (target.isConnected && typeof moveBefore === 'function') {
+    for (let i = 0; i < newDomChildren.length; i++) {
+      const newChild = newDomChildren[i];
+      const existingChildAtPosition = target.childNodes[i];
+      if (newChild !== existingChildAtPosition) {
+        (newChild.isConnected ? moveBefore : insertBefore).call(target, newChild, existingChildAtPosition);
+      }
+      const state = newChild[NODE_STATE];
+      if (state?.newVdom) {
+        if (!state.vdom) {
+          try {
+            state.newVdom.hooks?.$attach?.(newChild);
+            if (state.newVdom.type === SPECIAL_NODE) {
+              state.newVdom.tag.attach?.(newChild);
+            }
+          } catch (err) {
+            console.error(err);
+          }
+        }
+        reconcileNode(newChild);
+      }
+    }
+  } else {
+    const doc = target.ownerDocument;
+    let focusWithin = documentToFocusWithinSet.get(doc);
+    if (!focusWithin) {
+      focusWithin = installFocusTrackingForDocument(doc);
+    }
+    for (let i = 0; i < newDomChildren.length; i++) {
+      const newChild = newDomChildren[i];
+      const existingChildAtPosition = target.childNodes[i];
+      if (newChild !== existingChildAtPosition) {
+        if (!focusWithin.has(newChild)) {
+          insertBefore.call(target, newChild, existingChildAtPosition);
+        }
+      }
+      const state = newChild[NODE_STATE];
+      if (state?.newVdom) {
+        if (!state.vdom) {
+          try {
+            state.newVdom.hooks?.$attach?.(newChild);
+            if (state.newVdom.type === SPECIAL_NODE) {
+              state.newVdom.tag.attach?.(newChild);
+            }
+          } catch (err) {
+            console.error(err);
+          }
+        }
+        reconcileNode(newChild);
+      }
+    }
+  }
+}
+
+export function reconcile(target, vdom) {
+  if (vdom === null || vdom === undefined) {
+    cleanupTarget(target);
+    return;
+  }
+
+  if (settings.isSeq(vdom)) {
+    reconcileElementChildren(target, settings.seqIter(vdom));
+    return;
+  }
+
+  if (vdom instanceof VNode) {
+    let state = target[NODE_STATE];
+    if (state) {
+      if (state.vdom.type === vdom.type) {
+        if (settings.shouldUpdate(state.vdom.args, vdom.args)) {
+          state.newVdom = vdom;
+          reconcileNode(target);
+        }
+        return;
+      }
+      cleanupTarget(target);
+    }
+
+    switch (vdom.type) {
+      case ELEMENT_NODE:
+      case OPAQUE_NODE:
+        if (0 !== target.nodeName.localeCompare(vdom.tag, undefined, { sensitivity: 'base' })) {
+          throw new Error('incompatible target for vdom');
+        }
+        break;
+    }
+
+    target[NODE_STATE] = state = { originalProps: {}, newVdom: vdom };
+    try {
+      vdom.hooks?.$attach?.(target);
+      if (vdom.type === SPECIAL_NODE) {
+        vdom.tag.attach?.(target);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+    reconcileNode(target);
+    return;
+  }
+
+  throw new Error('invalid vdom');
+}
+
+export * from './html.js';

package/index.js

@@ -0,0 +1,10 @@
+import vdom from './src/vdom.js';
+
+// Create a default API instance by calling the factory with no settings.
+const { h, alias, special, reconcile, settings } = vdom();
+
+export { vdom, h, alias, special, reconcile, settings };
+
+// Export all the HTML helpers.
+export * from './src/html.js';
+export { schedule, flush, clear } from './src/scheduler.js';