@thyn/core 0.0.228 → 0.0.232

package/src/element.ts

@@ -13,14 +13,22 @@ export function collectEffect(effectFn) {
   collectingHead = effectFn;
 }
 
+// export function createReactiveTextNode(v) {
+//   let n;
+//   staticEffect(() => {
+//     if (n) {
+//       n.nodeValue = v();
+//     } else {
+//       n = document.createTextNode(v());
+//     }
+//   });
+//   return n;
+// }
+
 export function createReactiveTextNode(v) {
-  let n;
+  const n = document.createTextNode(v());
   staticEffect(() => {
-    if (n) {
-      n.nodeValue = v();
-    } else {
-      n = document.createTextNode(v());
-    }
+    n.nodeValue = v();
   });
   return n;
 }
@@ -78,7 +86,7 @@ export function setReactiveAttribute(el, key, val) {
         else el.setAttribute(key, v);
         return;
       }
-      if (v !== undefined) el.setAttribute(key, val());
+      if (v !== undefined) el.setAttribute(key, v);
       ran = true;
     }),
   );
@@ -262,358 +270,342 @@ export function list(props, terminal = false) {
   const teardownNode = terminal ? shallowTeardown : teardown;
   let parent;
   let outlet = document.createDocumentFragment();
-  let prevItems;
+
+  // State
+  let prevItems = [];
+  let rowNodes = []; // The "Shadow Array" - avoids reading DOM
+
   const startBookend = document.createComment("") as any;
   const endBookend = document.createComment("") as any;
+
   startBookend.$frag = outlet;
   startBookend.$end = endBookend;
+
   const render = props.render;
 
   staticEffect(() => {
     parent = startBookend.parentNode;
+
+    // 1. Initialization / First Render
     if (!parent) {
-      prevItems = props.items();
-      outlet.append(startBookend, ...prevItems.map(render), endBookend);
+      const items = props.items();
+      // Render all items
+      const newNodes = items.map(render);
+
+      outlet.append(startBookend, ...newNodes, endBookend);
+
+      // Save state
+      prevItems = items;
+      rowNodes = newNodes;
       return;
     }
-    let nextItems = props.items();
-    let newLength = nextItems.length;
+
+    const nextItems = props.items();
+    const newLength = nextItems.length;
     let oldLength = prevItems.length;
-    if (!oldLength && newLength) {
-      endBookend.before(...nextItems.map(render))
-      prevItems = nextItems;
-      nextItems = null;
-      return;
-    }
-    const childNodes = [];
-    let ptr = startBookend.nextSibling;
-    while (ptr !== endBookend) {
-      childNodes.push(ptr);
-      ptr = ptr.nextSibling;
-    }
-    const offset = 0;
-    if (!newLength) {
-      const removalQueue = [];
-      const end = prevItems.length + offset;
-      for (let i = offset; i < end; i++) {
-        const ch = childNodes[i];
-        teardownNode(ch);
-        removalQueue.push(ch);
-      }
-      for (const ch of removalQueue) {
-        remove(ch);
+
+    // 2. Fast Path: Clear All
+    if (newLength === 0) {
+      if (oldLength !== 0) {
+        for (let i = 0; i < oldLength; i++) {
+          teardownNode(rowNodes[i]);
+          remove(rowNodes[i]);
+        }
+        rowNodes = [];
+        prevItems = [];
       }
-      prevItems = nextItems;
-      nextItems = null;
       return;
     }
 
-    let start = nextItems.findIndex((item, index) => prevItems[index] !== item);
-    if (start === oldLength) {
-      endBookend.before(...nextItems.slice(start).map(render));
+    // 3. Fast Path: Create All (from empty)
+    if (oldLength === 0) {
+      const newNodes = nextItems.map(render);
+      endBookend.before(...newNodes);
+      rowNodes = newNodes;
       prevItems = nextItems;
-      nextItems = null;
       return;
     }
 
-    if (start < 0) {
-      for (let i = nextItems.length; i < oldLength; i++) {
-        const e = childNodes[offset + --oldLength];
-        teardownNode(e);
-        remove(e);
-      }
-      prevItems = nextItems;
-      nextItems = null;
-      return;
+    // 4. Reconciliation
+    let start = 0;
+    let minLen = Math.min(oldLength, newLength);
+
+    // Prefix Scan (Cheaper JS Array read vs DOM read)
+    while (start < minLen && prevItems[start] === nextItems[start]) {
+      start++;
     }
 
-    if (start >= newLength) {
-      while (start < oldLength) {
-        const e = childNodes[offset + --oldLength];
-        teardownNode(e);
-        remove(e);
-      }
+    // Optimization: Append only
+    if (start === oldLength && newLength > oldLength) {
+      const newPart = nextItems.slice(start);
+      const newNodes = newPart.map(render);
+      endBookend.before(...newNodes);
+
+      rowNodes = rowNodes.concat(newNodes);
       prevItems = nextItems;
-      nextItems = null;
       return;
     }
 
-    // suffix
-    for (
-      oldLength--, newLength--;
-      newLength > start &&
-      oldLength >= start &&
-      nextItems[newLength] === prevItems[oldLength];
-      oldLength--, newLength--
-    );
-
-    const nextKeys = new Set(nextItems);
-    const removalQueue = [];
-    for (let i = start; i <= oldLength; i++) {
-      if (!nextKeys.has(prevItems[i])) {
-        const ch = childNodes[i + offset];
-        teardownNode(ch);
-        removalQueue.push(ch);
-        childNodes[i + offset] = null;
+    // Optimization: Truncate only
+    if (start === newLength && oldLength > newLength) {
+      for (let i = start; i < oldLength; i++) {
+        teardownNode(rowNodes[i]);
+        remove(rowNodes[i]);
       }
-    }
-    for (const e of removalQueue) {
-      remove(e);
-    }
-    if (oldLength - start === removalQueue.length) {
+      rowNodes.length = newLength; // JS Array Truncate
       prevItems = nextItems;
-      nextItems = null;
       return;
     }
-    let keyMap = new Map();
-    for (let i = start; i <= oldLength; i++) {
-      if (
-        childNodes[i + offset] &&
-        (!nextItems[i] ||
-          prevItems[i] !== nextItems[i])
-      ) {
-        keyMap.set(prevItems[i], {
-          el: childNodes[i + offset],
-          item: prevItems[i],
-        });
-      }
+
+    // Suffix Scan
+    let end = 0;
+    // We stop if the suffix hits the prefix
+    while (
+      newLength - 1 - end >= start &&
+      oldLength - 1 - end >= start &&
+      nextItems[newLength - 1 - end] === prevItems[oldLength - 1 - end]
+    ) {
+      end++;
+    }
+
+    // 5. Complex Diff (The Middle)
+    const oldStart = start;
+    const oldEnd = oldLength - end;
+    const newEnd = newLength - end;
+
+    // A. Build Map of existing items in the "changed" region
+    // key -> { node, index }
+    const keyMap = new Map();
+    for (let i = oldStart; i < oldEnd; i++) {
+      const item = prevItems[i];
+      // If duplicate items exist, first one wins or logic needs to be more robust.
+      // Assuming unique keys for simplicity or using last-write-wins:
+      // if (!keyMap.has(item)) {
+      keyMap.set(item, rowNodes[i]);
+      // } else {
+      // Handle duplicates by removing the extra immediately? 
+      // Or handle collision. For now, assume distinct items or standard behavior.
+      // }
+    }
+
+    // B. Setup for new node list construction
+    const nextRowNodes = new Array(newLength);
+
+    // Copy Prefix
+    for (let i = 0; i < start; i++) {
+      nextRowNodes[i] = rowNodes[i];
     }
-    if (newLength === oldLength && keyMap.size > (newLength - start + 1) / 2) {
-      const lastOrdered = start > 0 ? childNodes[start + offset - 1] : startBookend;
-      const set = [];
-      for (let i = start; i <= newLength; i++) {
-        set.push(keyMap.get(nextItems[i])?.el ?? childNodes[i + offset]);
-      }
-      lastOrdered.after(...set);
-      prevItems = nextItems;
-      keyMap = null;
-      nextItems = null;
-      return;
+    // Copy Suffix
+    for (let i = 0; i < end; i++) {
+      nextRowNodes[newLength - 1 - i] = rowNodes[oldLength - 1 - i];
     }
 
-    let cursor = startBookend.nextSibling;
-    for (let i = 0; i < start; i++) {
-      cursor = cursor.nextSibling;
-    }
-    while (start <= newLength) {
-      const newChd = nextItems[start];
-      const oldChd = prevItems[start];
-      if (newChd === oldChd) {
-        start++;
-        cursor = cursor.nextSibling;
-        continue;
-      }
-      if (oldChd === undefined) {
-        parent.insertBefore(render(newChd), endBookend);
-        start++;
-        continue;
-      }
-      const mappedOld = keyMap.get(newChd);
-      if (mappedOld) {
-        const oldDom = cursor;
-        const { el, item } = mappedOld;
-        if (oldDom !== el) {
-          const tmp = el.nextSibling;
-          parent.insertBefore(el, oldDom);
-          parent.insertBefore(oldDom, tmp);
-          cursor = el.nextSibling;
-        } else if (item !== newChd) {
-          const next = el.nextSibling;
-          replaceWith(newChd, el, render);
-          cursor = next;
-        } else {
-          cursor = el.nextSibling;
-        }
-        keyMap.delete(newChd);
-      } else if (oldChd !== newChd) {
-        parent.insertBefore(render(newChd), cursor);
+    // C. Find anchor for insertions
+    // We insert before the first node of the suffix, or the endBookend.
+    const anchor = (end > 0) ? rowNodes[oldLength - end] : endBookend;
+
+    // D. Iterate new middle
+    for (let i = oldStart; i < newEnd; i++) {
+      const newItem = nextItems[i];
+      let node;
+
+      if (keyMap.has(newItem)) {
+        // Reuse existing
+        node = keyMap.get(newItem);
+        keyMap.delete(newItem);
+
+        // DOM Move: 
+        // We always insertBefore the anchor. 
+        // Since we are iterating forward, "anchor" isn't static.
+        // Actually, simply inserting before the *current* anchor works if we 
+        // process carefully, but standard "place and move cursor" is safer.
+        parent.insertBefore(node, anchor);
+      } else {
+        // Create new
+        node = render(newItem);
+        parent.insertBefore(node, anchor);
       }
-      start++;
+      nextRowNodes[i] = node;
     }
-    for (const { el } of keyMap.values()) {
-      teardownNode(el);
-      remove(el);
+
+    // E. Cleanup
+    // Anything remaining in keyMap is gone
+    for (const node of keyMap.values()) {
+      teardownNode(node);
+      remove(node);
     }
-    keyMap = null;
+
+    // Handle "middle" items that weren't in keyMap (duplicates logic) 
+    // or implicit removals handled by the map logic.
+    // Specifically: We iterated [oldStart...oldEnd] to build the map.
+    // If an item was in that range but NOT in the new range, it's in the map.
+    // If it WAS in the new range, we removed it from the map.
+    // So map.values() is exactly what needs to die. 
+
+    // Update State
+    rowNodes = nextRowNodes;
     prevItems = nextItems;
-    nextItems = null;
   });
+
   return outlet;
 }
-
 export function isolatedTerminalList(props) {
   let parent;
   let outlet = document.createDocumentFragment();
-  let prevItems;
+
+  // State
+  let prevItems = [];
+  let rowNodes = []; // The "Shadow Array"
+
   const startBookend = document.createComment("") as any;
   const endBookend = document.createComment("") as any;
+
   startBookend.$frag = outlet;
   startBookend.$end = endBookend;
+
   const render = props.render;
 
   staticEffect(() => {
     parent = startBookend.parentNode;
+
+    // 1. Initialization
     if (!parent) {
-      prevItems = props.items();
-      outlet.append(startBookend, ...prevItems.map(render), endBookend);
-      return;
-    }
-    let nextItems = props.items();
-    let newLength = nextItems.length;
-    let oldLength = prevItems.length;
-    if (!oldLength && newLength) {
-      endBookend.before(...nextItems.map(render))
-      prevItems = nextItems;
-      nextItems = null;
+      const items = props.items();
+      const newNodes = items.map(render);
+
+      outlet.append(startBookend, ...newNodes, endBookend);
+
+      prevItems = items;
+      rowNodes = newNodes;
       return;
     }
-    const childNodeList = parent.childNodes as NodeListOf<ChildNode>;
-    if (!newLength) {
-      const end = childNodeList.length - 1;
-      for (let i = 1; i < end; i++) {
-        shallowTeardown(childNodeList[i]);
+
+    const nextItems = props.items();
+    const newLength = nextItems.length;
+    const oldLength = prevItems.length;
+
+    // 2. Fast Path: Clear All
+    if (newLength === 0) {
+      if (oldLength !== 0) {
+        // Optimization: If the parent only contains our list (between bookends),
+        // we might want to use textContent = "". However, to be safe with 
+        // bookends logic, we remove specifically known nodes.
+        for (let i = 0; i < oldLength; i++) {
+          const node = rowNodes[i];
+          shallowTeardown(node);
+          // node.remove();
+        }
+        parent.textContent = "";
+        parent.append(startBookend, endBookend);
+        rowNodes = [];
+        prevItems = [];
       }
-      parent.textContent = "";
-      parent.append(startBookend, endBookend);
-      prevItems = nextItems;
-      nextItems = null;
       return;
     }
 
-    let start = nextItems.findIndex((item, index) => prevItems[index] !== item);
-    if (start === oldLength) {
-      endBookend.before(...nextItems.slice(start).map(render));
+    // 3. Fast Path: Create All
+    if (oldLength === 0) {
+      const newNodes = nextItems.map(render);
+      endBookend.before(...newNodes);
+
+      rowNodes = newNodes;
       prevItems = nextItems;
-      nextItems = null;
       return;
     }
 
-    let childNodes = Array.from(childNodeList);
-    if (start < 0) {
-      for (let i = nextItems.length; i < oldLength; i++) {
-        const e = childNodes[1 + --oldLength];
-        shallowTeardown(e);
-        e.remove();
-      }
-      prevItems = nextItems;
-      nextItems = null;
-      childNodes = null;
-      return;
+    // 4. Reconciliation
+    let start = 0;
+    const minLen = Math.min(oldLength, newLength);
+
+    // Prefix Scan
+    while (start < minLen && prevItems[start] === nextItems[start]) {
+      start++;
     }
 
-    if (start >= newLength) {
-      while (start < oldLength) {
-        const e = childNodes[1 + --oldLength];
-        shallowTeardown(e);
-        e.remove();
-      }
+    // Optimization: Append Suffix
+    if (start === oldLength && newLength > oldLength) {
+      const newPart = nextItems.slice(start);
+      const newNodes = newPart.map(render);
+      endBookend.before(...newNodes);
+
+      rowNodes = rowNodes.concat(newNodes);
       prevItems = nextItems;
-      nextItems = null;
-      childNodes = null;
       return;
     }
 
-    // suffix
-    for (
-      oldLength--, newLength--;
-      newLength > start &&
-      oldLength >= start &&
-      nextItems[newLength] === prevItems[oldLength];
-      oldLength--, newLength--
-    );
-
-    const nextKeys = new Set(nextItems);
-    const removalQueue = [];
-    for (let i = start; i <= oldLength; i++) {
-      if (!nextKeys.has(prevItems[i])) {
-        const ch = childNodes[i + 1];
-        shallowTeardown(ch);
-        removalQueue.push(ch);
-        childNodes[i + 1] = null;
+    // Optimization: Truncate Suffix
+    if (start === newLength && oldLength > newLength) {
+      for (let i = start; i < oldLength; i++) {
+        const node = rowNodes[i];
+        shallowTeardown(node);
+        node.remove();
       }
-    }
-    if (removalQueue.length === prevItems.length) {
-      parent.textContent = "";
-      parent.append(startBookend, ...nextItems.map(render), endBookend);
+      rowNodes.length = newLength;
       prevItems = nextItems;
-      nextItems = null;
-      childNodes = null;
       return;
     }
-    for (const e of removalQueue) {
-      e.remove();
+
+    // Suffix Scan
+    let end = 0;
+    while (
+      newLength - 1 - end >= start &&
+      oldLength - 1 - end >= start &&
+      nextItems[newLength - 1 - end] === prevItems[oldLength - 1 - end]
+    ) {
+      end++;
     }
-    if (oldLength - start === removalQueue.length) {
-      prevItems = nextItems;
-      nextItems = null;
-      childNodes = null;
-      return;
+
+    // 5. Complex Diff (The Middle)
+    const oldStart = start;
+    const oldEnd = oldLength - end;
+    const newEnd = newLength - end;
+
+    // A. Build Map
+    const keyMap = new Map();
+    for (let i = oldStart; i < oldEnd; i++) {
+      const item = prevItems[i];
+      keyMap.set(item, rowNodes[i]);
     }
-    let keyMap = new Map();
-    for (let i = start; i <= oldLength; i++) {
-      if (
-        childNodes[i + 1] &&
-        (!nextItems[i] ||
-          prevItems[i] !== nextItems[i])
-      ) {
-        keyMap.set(prevItems[i], {
-          el: childNodes[i + 1],
-          item: prevItems[i],
-        });
-      }
+
+    const nextRowNodes = new Array(newLength);
+
+    // Copy Prefix
+    for (let i = 0; i < start; i++) {
+      nextRowNodes[i] = rowNodes[i];
     }
-    if (newLength === oldLength && keyMap.size > (newLength - start + 1) / 2) {
-      const lastOrdered = childNodes[start];
-      const set = [];
-      for (let i = start; i <= newLength; i++) {
-        set.push(keyMap.get(nextItems[i])?.el ?? childNodes[i + 1]);
-      }
-      lastOrdered.after(...set);
-      prevItems = nextItems;
-      keyMap = null;
-      nextItems = null;
-      childNodes = null;
-      return;
+    // Copy Suffix
+    for (let i = 0; i < end; i++) {
+      nextRowNodes[newLength - 1 - i] = rowNodes[oldLength - 1 - i];
     }
 
-    while (start <= newLength) {
-      const newChd = nextItems[start];
-      const oldChd = prevItems[start];
-      if (newChd === oldChd) {
-        start++;
-        continue;
-      }
-      if (oldChd === undefined) {
-        parent.insertBefore(render(newChd), endBookend);
-        start++;
-        continue;
-      }
-      const mappedOld = keyMap.get(newChd);
-      if (mappedOld) {
-        const oldDom = childNodeList[start + 1];
-        const { el, item } = mappedOld;
-        if (oldDom !== el) {
-          const tmp = el.nextSibling;
-          parent.insertBefore(el, oldDom);
-          parent.insertBefore(oldDom, tmp);
-        } else if (item !== newChd) {
-          replaceWith(newChd, el, render);
-        }
-        keyMap.delete(newChd);
-      } else if (oldChd !== newChd) {
-        parent.insertBefore(render(newChd), childNodeList[start + 1]);
+    // Determine Anchor (The first node of the suffix, or the end bookend)
+    const anchor = (end > 0) ? rowNodes[oldLength - end] : endBookend;
+
+    // B. Process Middle
+    for (let i = oldStart; i < newEnd; i++) {
+      const newItem = nextItems[i];
+
+      if (keyMap.has(newItem)) {
+        const node = keyMap.get(newItem);
+        keyMap.delete(newItem);
+        parent.insertBefore(node, anchor);
+        nextRowNodes[i] = node;
+      } else {
+        const node = render(newItem);
+        parent.insertBefore(node, anchor);
+        nextRowNodes[i] = node;
       }
-      start++;
     }
-    for (const { el } of keyMap.values()) {
-      shallowTeardown(el);
-      el.remove();
+
+    // C. Cleanup Unused
+    for (const node of keyMap.values()) {
+      shallowTeardown(node);
+      node.remove();
     }
-    keyMap = null;
+
+    rowNodes = nextRowNodes;
     prevItems = nextItems;
-    nextItems = null;
-    childNodes = null;
   });
-  return outlet;
-}
 
+  return outlet;
+}

package/src/signals.ts

@@ -102,7 +102,6 @@ export function $effect(fn: (() => (() => void) | void) & any) {
 }
 
 export function staticEffect(fn: (() => (() => void) | void) & any) {
-  fn.td = null;
   const prev = currentEffect;
   currentEffect = fn;
   fn();