tutuca 0.9.3 → 0.9.4

package/dist/tutuca.js

@@ -2389,7 +2389,7 @@ class App {
         this.render();
       }
     });
-    injectCss("tutuca-app", this.comps.compileStyles());
+    injectCss("tutuca-app", this.comps.compileStyles(), opts?.head ?? document.head);
     if (opts?.noCache) {
       this.renderer.setNullCache();
       this.comps.setNullComputedCache();
@@ -2434,15 +2434,15 @@ class App {
     this._evictCacheId = null;
   }
 }
-function injectCss(nodeId, style) {
+function injectCss(nodeId, style, styleTarget = document.head) {
   const styleNode = document.createElement("style");
-  const currentNodeWithId = document.head.querySelector(`#${nodeId}`);
+  const currentNodeWithId = styleTarget.querySelector(`#${nodeId}`);
   if (currentNodeWithId) {
-    document.head.removeChild(currentNodeWithId);
+    styleTarget.removeChild(currentNodeWithId);
   }
   styleNode.id = nodeId;
   styleNode.innerHTML = style;
-  document.head.appendChild(styleNode);
+  styleTarget.appendChild(styleNode);
 }
 function getClosestDropTarget(target, rootNode, count) {
   let node = target;
@@ -6897,12 +6897,6 @@ function basicGetSeqInfo(seq) {
 function isHtmlAttribute(propName) {
   return propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
 }
-function getDomProp(node, propName) {
-  return node[propName];
-}
-function setDomProp(node, propName, value) {
-  node[propName] = value;
-}
 function applyProperties(node, props, previous) {
   for (const propName in props) {
     const propValue = props[propName];
@@ -6910,37 +6904,42 @@ function applyProperties(node, props, previous) {
       removeProperty(node, propName, previous);
     } else if (isHtmlAttribute(propName)) {
       node.setAttribute(propName, propValue);
+    } else if (propName === "dangerouslySetInnerHTML") {
+      node.innerHTML = propValue.__html ?? "";
+    } else if (typeof propValue === "object" && propValue !== null) {
+      patchObject(node, previous, propName, propValue);
+    } else if (propName === "className") {
+      node.setAttribute("class", propValue);
     } else {
-      if (typeof propValue === "object" && propValue !== null) {
-        patchObject(node, previous, propName, propValue);
-      } else {
-        setDomProp(node, propName, propValue);
-      }
+      node[propName] = propValue;
     }
   }
 }
 function removeProperty(node, propName, previous) {
   const previousValue = previous[propName];
-  if (isHtmlAttribute(propName)) {
+  if (propName === "dangerouslySetInnerHTML") {
+    node.innerHTML = "";
+  } else if (isHtmlAttribute(propName)) {
     node.removeAttribute(propName);
   } else if (typeof previousValue === "string") {
-    setDomProp(node, propName, "");
+    if (propName !== "className")
+      node[propName] = "";
     const attrName = propName === "className" ? "class" : propName === "htmlFor" ? "for" : propName;
     node.removeAttribute(attrName);
   } else {
-    setDomProp(node, propName, null);
+    node[propName] = null;
   }
 }
 function patchObject(node, previous, propName, propValue) {
   const previousValue = previous?.[propName];
   if (previousValue && typeof previousValue === "object" && Object.getPrototypeOf(previousValue) !== Object.getPrototypeOf(propValue)) {
-    setDomProp(node, propName, propValue);
+    node[propName] = propValue;
     return;
   }
-  let current = getDomProp(node, propName);
+  let current = node[propName];
   if (typeof current !== "object" || current === null) {
-    setDomProp(node, propName, {});
-    current = getDomProp(node, propName);
+    node[propName] = {};
+    current = node[propName];
   }
   const target = current;
   for (const k in propValue) {
@@ -6948,23 +6947,6 @@ function patchObject(node, previous, propName, propValue) {
   }
 }
 
-class Warning {
-  constructor(type, message) {
-    this.type = type;
-    this.message = message;
-  }
-}
-
-class DuplicatedKeysWarning extends Warning {
-  constructor(duplicatedKeys, parentTag, parentIndex) {
-    const keys = [...duplicatedKeys].join(", ");
-    super("DuplicatedKeys", `Duplicate keys found: [${keys}] in ${parentTag || "fragment"} at index ${parentIndex}. Nodes with duplicated keys are matched positionally.`);
-    this.duplicatedKeys = duplicatedKeys;
-    this.parentTag = parentTag;
-    this.parentIndex = parentIndex;
-  }
-}
-
 class VBase {
   isEqualTo(other) {
     return this === other;
@@ -6973,12 +6955,8 @@ class VBase {
     return null;
   }
 }
-function getKey(node) {
-  return node instanceof VNode2 ? node.key : undefined;
-}
-function effectiveKey(node, duplicatedKeys) {
-  const key = getKey(node);
-  return key && duplicatedKeys?.has(key) ? undefined : key;
+function getKey(child) {
+  return child instanceof VNode2 ? child.key : undefined;
 }
 function isIterable(obj) {
   return obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
@@ -7075,13 +7053,12 @@ class VNode2 extends VBase {
     this.childs = childs ?? [];
     this.key = key != null ? String(key) : undefined;
     this.namespace = typeof namespace === "string" ? namespace : null;
-    this.attrCount = Object.keys(this.attrs).length;
   }
   get nodeType() {
     return 1;
   }
   isEqualTo(other) {
-    if (!(other instanceof VNode2) || this.tag !== other.tag || this.key !== other.key || this.namespace !== other.namespace || this.attrCount !== other.attrCount || this.childs.length !== other.childs.length) {
+    if (!(other instanceof VNode2) || this.tag !== other.tag || this.key !== other.key || this.namespace !== other.namespace || this.childs.length !== other.childs.length) {
       return false;
     }
     for (const key in this.attrs) {
@@ -7089,6 +7066,11 @@ class VNode2 extends VBase {
         return false;
       }
     }
+    for (const key in other.attrs) {
+      if (!Object.hasOwn(this.attrs, key)) {
+        return false;
+      }
+    }
     for (let i = 0;i < this.childs.length; i++) {
       if (!this.childs[i].isEqualTo(other.childs[i])) {
         return false;
@@ -7143,155 +7125,6 @@ function diffProps(a, b) {
   }
   return diff;
 }
-function reorder(oldChildren, newChildren) {
-  const rawNew = keyIndex(newChildren);
-  if (rawNew.free.length === newChildren.length) {
-    return {
-      children: newChildren,
-      moves: null,
-      duplicatedKeys: rawNew.duplicatedKeys
-    };
-  }
-  const rawOld = keyIndex(oldChildren);
-  const duplicatedKeys = rawNew.duplicatedKeys || rawOld.duplicatedKeys ? new Set([...rawNew.duplicatedKeys || [], ...rawOld.duplicatedKeys || []]) : null;
-  if (rawOld.free.length === oldChildren.length) {
-    return {
-      children: newChildren,
-      moves: null,
-      duplicatedKeys
-    };
-  }
-  let newKeys;
-  let newFree;
-  let oldKeys;
-  if (duplicatedKeys) {
-    const updatedNew = keyIndex(newChildren, duplicatedKeys);
-    newKeys = updatedNew.keys;
-    newFree = updatedNew.free;
-    oldKeys = keyIndex(oldChildren, duplicatedKeys).keys;
-  } else {
-    newKeys = rawNew.keys;
-    newFree = rawNew.free;
-    oldKeys = rawOld.keys;
-  }
-  const reordered = [];
-  let freeIndex = 0;
-  const freeCount = newFree.length;
-  let deletedItems = 0;
-  for (let i = 0;i < oldChildren.length; i++) {
-    const oldItem = oldChildren[i];
-    const oldKey = effectiveKey(oldItem, duplicatedKeys);
-    if (oldKey) {
-      if (Object.hasOwn(newKeys, oldKey)) {
-        const itemIndex = newKeys[oldKey];
-        reordered.push(newChildren[itemIndex]);
-      } else {
-        deletedItems++;
-        reordered.push(null);
-      }
-    } else {
-      if (freeIndex < freeCount) {
-        const itemIndex = newFree[freeIndex++];
-        reordered.push(newChildren[itemIndex]);
-      } else {
-        deletedItems++;
-        reordered.push(null);
-      }
-    }
-  }
-  const lastFreeIndex = freeIndex >= newFree.length ? newChildren.length : newFree[freeIndex];
-  for (let j = 0;j < newChildren.length; j++) {
-    const newItem = newChildren[j];
-    const newKey = effectiveKey(newItem, duplicatedKeys);
-    if (newKey) {
-      if (!Object.hasOwn(oldKeys, newKey)) {
-        reordered.push(newItem);
-      }
-    } else if (j >= lastFreeIndex) {
-      reordered.push(newItem);
-    }
-  }
-  const moves = computeMoves(reordered, newChildren, newKeys, duplicatedKeys, deletedItems);
-  return { children: reordered, moves, duplicatedKeys };
-}
-function computeMoves(reordered, newChildren, newKeys, duplicatedKeys, deletedItems) {
-  const simulate = reordered.slice();
-  let simulateIndex = 0;
-  const removes = [];
-  const inserts = [];
-  const wantedKeys = new Array(newChildren.length);
-  for (let i = 0;i < newChildren.length; i++) {
-    wantedKeys[i] = effectiveKey(newChildren[i], duplicatedKeys);
-  }
-  for (let k = 0;k < newChildren.length; ) {
-    const wantedKey = wantedKeys[k];
-    let simulateItem = simulate[simulateIndex];
-    let simulateKey = effectiveKey(simulateItem, duplicatedKeys);
-    while (simulateItem === null && simulate.length) {
-      simulate.splice(simulateIndex, 1);
-      removes.push({ from: simulateIndex, key: null });
-      simulateItem = simulate[simulateIndex];
-      simulateKey = effectiveKey(simulateItem, duplicatedKeys);
-    }
-    if (simulateItem && simulateKey === wantedKey) {
-      simulateIndex++;
-      k++;
-      continue;
-    }
-    if (wantedKey) {
-      if (simulateKey && newKeys[simulateKey] !== k + 1) {
-        simulate.splice(simulateIndex, 1);
-        removes.push({ from: simulateIndex, key: simulateKey });
-        simulateItem = simulate[simulateIndex];
-        simulateKey = effectiveKey(simulateItem, duplicatedKeys);
-        if (simulateItem && simulateKey === wantedKey) {
-          simulateIndex++;
-          k++;
-          continue;
-        }
-      }
-      inserts.push({ key: wantedKey, to: k });
-      k++;
-      continue;
-    }
-    if (simulateKey) {
-      simulate.splice(simulateIndex, 1);
-      removes.push({ from: simulateIndex, key: simulateKey });
-      continue;
-    }
-    k++;
-  }
-  while (simulateIndex < simulate.length) {
-    const simulateItem = simulate[simulateIndex];
-    simulate.splice(simulateIndex, 1);
-    removes.push({
-      from: simulateIndex,
-      key: effectiveKey(simulateItem, duplicatedKeys)
-    });
-  }
-  if (removes.length === deletedItems && !inserts.length) {
-    return null;
-  }
-  return { removes, inserts };
-}
-function keyIndex(children, excludeKeys) {
-  const keys = {};
-  const free = [];
-  let duplicatedKeys = null;
-  for (let i = 0;i < children.length; i++) {
-    const key = getKey(children[i]);
-    if (key && !excludeKeys?.has(key)) {
-      if (key in keys) {
-        duplicatedKeys ??= new Set;
-        duplicatedKeys.add(key);
-      }
-      keys[key] = i;
-    } else {
-      free.push(i);
-    }
-  }
-  return { keys, free, duplicatedKeys };
-}
 function replaceNode(domNode, vnode, options) {
   const parentNode = domNode.parentNode;
   const newNode = vnode.toDom(options);
@@ -7312,7 +7145,9 @@ function morphNode(domNode, source, target, opts) {
     if (propsDiff) {
       applyProperties(domNode, propsDiff, source.attrs);
     }
-    morphChildren(domNode, source.childs, target.childs, source.tag, opts);
+    if (!target.attrs.dangerouslySetInnerHTML) {
+      morphChildren(domNode, source.childs, target.childs, source.tag, opts);
+    }
     return domNode;
   }
   if (source instanceof VFragment && target instanceof VFragment) {
@@ -7321,7 +7156,7 @@ function morphNode(domNode, source, target, opts) {
   }
   return replaceNode(domNode, target, opts);
 }
-function morphChildren(parentDom, oldChilds, newChilds, parentTag, opts) {
+function morphChildren(parentDom, oldChilds, newChilds, _parentTag, opts) {
   if (oldChilds.length === 0) {
     for (const child of newChilds) {
       const node = child.toDom(opts);
@@ -7336,58 +7171,50 @@ function morphChildren(parentDom, oldChilds, newChilds, parentTag, opts) {
     }
     return;
   }
-  const orderedSet = reorder(oldChilds, newChilds);
-  const reorderedChilds = orderedSet.children;
-  if (orderedSet.duplicatedKeys && opts.onWarning) {
-    opts.onWarning(new DuplicatedKeysWarning(orderedSet.duplicatedKeys, parentTag, 0));
-  }
-  const domChildren = Array.from(parentDom.childNodes);
-  const oldLen = oldChilds.length;
-  const reorderedLen = reorderedChilds.length;
-  const len = Math.max(oldLen, reorderedLen);
-  const toRemove = [];
-  for (let i = 0;i < len; i++) {
-    const leftNode = oldChilds[i];
-    const rightNode = reorderedChilds[i];
-    if (!leftNode && rightNode) {
-      const newNode = rightNode.toDom(opts);
-      if (newNode)
-        parentDom.appendChild(newNode);
-    } else if (leftNode && rightNode) {
-      const domChild = domChildren[i];
-      if (domChild) {
-        morphNode(domChild, leftNode, rightNode, opts);
-      }
-    } else if (leftNode && !rightNode) {
-      if (!orderedSet.moves && domChildren[i]) {
-        toRemove.push(domChildren[i]);
-      }
-    }
-  }
-  for (const node of toRemove) {
-    if (node.parentNode === parentDom) {
-      parentDom.removeChild(node);
-    }
-  }
-  if (orderedSet.moves) {
-    applyMoves(parentDom, orderedSet.moves);
-  }
-}
-function applyMoves(domNode, moves) {
-  const childNodes = domNode.childNodes;
-  const keyMap = {};
-  for (const remove2 of moves.removes) {
-    const node = childNodes[remove2.from];
-    if (remove2.key)
-      keyMap[remove2.key] = node;
-    domNode.removeChild(node);
-  }
-  let length = childNodes.length;
-  for (let j = 0;j < moves.inserts.length; j++) {
-    const insert = moves.inserts[j];
-    const node = keyMap[insert.key];
-    if (node) {
-      domNode.insertBefore(node, insert.to >= length++ ? null : childNodes[insert.to]);
+  const domNodes = Array.from(parentDom.childNodes);
+  const oldKeyMap = {};
+  for (let i = 0;i < oldChilds.length; i++) {
+    const key = getKey(oldChilds[i]);
+    if (key != null)
+      oldKeyMap[key] = i;
+  }
+  const used = new Uint8Array(oldChilds.length);
+  let unkeyedCursor = 0;
+  for (let j = 0;j < newChilds.length; j++) {
+    const newChild = newChilds[j];
+    const newKey = getKey(newChild);
+    let oldIdx = -1;
+    if (newKey != null) {
+      if (newKey in oldKeyMap && !used[oldKeyMap[newKey]]) {
+        oldIdx = oldKeyMap[newKey];
+      }
+    } else {
+      while (unkeyedCursor < oldChilds.length) {
+        if (!used[unkeyedCursor] && getKey(oldChilds[unkeyedCursor]) == null) {
+          oldIdx = unkeyedCursor++;
+          break;
+        }
+        unkeyedCursor++;
+      }
+    }
+    if (oldIdx >= 0) {
+      used[oldIdx] = 1;
+      const dom = domNodes[oldIdx];
+      const newDom = morphNode(dom, oldChilds[oldIdx], newChild, opts);
+      const ref = parentDom.childNodes[j] ?? null;
+      if (newDom !== ref)
+        parentDom.insertBefore(newDom, ref);
+    } else {
+      const dom = newChild.toDom(opts);
+      if (dom) {
+        const ref = parentDom.childNodes[j] ?? null;
+        parentDom.insertBefore(dom, ref);
+      }
+    }
+  }
+  for (let i = oldChilds.length - 1;i >= 0; i--) {
+    if (!used[i] && domNodes[i].parentNode === parentDom) {
+      parentDom.removeChild(domNodes[i]);
     }
   }
 }