streetui 1.0.0 → 1.2.0

package/dist/index.cjs

@@ -138,6 +138,7 @@ __export(src_exports, {
   reactiveListItemSignature: () => reactiveListItemSignature,
   readState: () => readState,
   reconcileChildren: () => reconcileChildren,
+  reconcileChildrenByPlan: () => reconcileChildrenByPlan,
   renderToString: () => renderToString,
   reportDiagnostic: () => reportDiagnostic,
   required: () => required,
@@ -168,7 +169,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/version.ts
-var VERSION = "1.0.0";
+var VERSION = "1.2.0";
 
 // ../state/src/signal.ts
 var _activeConsumer = null;
@@ -970,6 +971,7 @@ var ApplicationGraph = class {
       this.handlers.delete(`__signal__${ref.signalId}`);
     }
     this.handlers.delete(`__listbuild__${node.id}`);
+    this.handlers.delete(`__listplan__${node.id}`);
   }
   // ── Handler registry ──────────────────────────────────────────────────────
   registerHandler(key, fn) {
@@ -1265,16 +1267,38 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
       const itemKey = reactiveListItemKey(item, index);
       const itemNode = graph.createNode("list-item", {
         key: itemKey,
-        props: { key: itemKey, _sig: reactiveListItemSignature(item) }
+        // `_item` records the source item *reference* so the reconciler can
+        // short-circuit unchanged rows by identity (no signature hashing); `_sig`
+        // is the content signature used to detect an in-place data change when the
+        // reference differs. Both are internal metadata (leading `_`) and never
+        // reach the DOM.
+        props: {
+          key: itemKey,
+          _sig: reactiveListItemSignature(item),
+          // The item reference is stored as opaque internal metadata (never
+          // rendered); cast through `unknown` since `T` is not a `PropValue`.
+          _item: item
+        }
       });
       renderItem(item, index, new ContainerBuilderImpl(itemNode, graph));
       return itemNode;
     };
-    const buildAll = (raw) => {
+    const buildPlan = (raw) => {
       const arr = Array.isArray(raw) ? raw : [];
-      return arr.map((item, i) => buildItem(item, i));
+      const plan = new Array(arr.length);
+      for (let i = 0; i < arr.length; i++) {
+        const item = arr[i];
+        const index = i;
+        plan[i] = {
+          key: reactiveListItemKey(item, index),
+          item,
+          sig: () => reactiveListItemSignature(item),
+          build: () => buildItem(item, index)
+        };
+      }
+      return plan;
     };
-    graph.registerHandler(`__listbuild__${node.id}`, buildAll);
+    graph.registerHandler(`__listplan__${node.id}`, buildPlan);
     const current = isSignal(items) ? items.peek() : items;
     const initial = Array.isArray(current) ? current : [];
     initial.forEach((item, i) => {
@@ -2419,6 +2443,7 @@ function patchProp(dom, element, name, oldValue, newValue) {
 
 // ../renderer/src/events.ts
 function wireEvents(dom, graph, node, element, instance) {
+  if (node.events.length === 0) return;
   for (const eventDesc of node.events) {
     const handler = graph.getHandler(eventDesc.handlerKey);
     if (handler === void 0) continue;
@@ -2548,6 +2573,109 @@ function reconcileChildren(ctx, parentDom, oldInstances, newNodes, mountFn) {
   reorderDom(ctx, parentDom, newInstances);
   return { instances: newInstances, removed };
 }
+function reconcileChildrenByPlan(ctx, parentDom, oldInstances, plan, mountFn) {
+  const oldByKey = /* @__PURE__ */ new Map();
+  for (const inst of oldInstances) {
+    oldByKey.set(inst.graphNode.key ?? inst.graphNode.id, inst);
+  }
+  const newInstances = [];
+  const usedKeys = /* @__PURE__ */ new Set();
+  const built = [];
+  for (const entry of plan) {
+    const existing = oldByKey.get(entry.key);
+    if (existing !== void 0) {
+      usedKeys.add(entry.key);
+      const oldItem = existing.graphNode.getProp("_item");
+      if (!Object.is(oldItem, entry.item)) {
+        const newSig = entry.sig();
+        const oldSig = existing.graphNode.getProp("_sig");
+        if (!Object.is(oldSig, newSig)) {
+          const freshNode = entry.build();
+          built.push(freshNode);
+          patchExistingInstance(ctx, existing, freshNode);
+          reconcileItemChildren(ctx, existing, freshNode, mountFn);
+          existing.graphNode.setProp("_sig", newSig);
+        }
+        existing.graphNode.setProp("_item", entry.item);
+      }
+      newInstances.push(existing);
+    } else {
+      const freshNode = entry.build();
+      built.push(freshNode);
+      const inst = mountFn(freshNode, parentDom);
+      newInstances.push(inst);
+    }
+  }
+  const removed = [];
+  for (const inst of oldInstances) {
+    const key = inst.graphNode.key ?? inst.graphNode.id;
+    if (!usedKeys.has(key)) removed.push(inst);
+  }
+  for (const inst of removed) {
+    const parent = ctx.dom.parentNode(inst.domNode);
+    if (parent !== null) ctx.dom.removeChild(parent, inst.domNode);
+    inst.dispose();
+  }
+  reorderDomMinimal(ctx, parentDom, oldInstances, newInstances);
+  return { instances: newInstances, removed, built };
+}
+function reorderDomMinimal(ctx, parentDom, oldInstances, newInstances) {
+  const n = newInstances.length;
+  if (n === 0) return;
+  const oldIndexOf = /* @__PURE__ */ new Map();
+  for (let i = 0; i < oldInstances.length; i++) oldIndexOf.set(oldInstances[i], i);
+  const source = new Array(n);
+  let moved = false;
+  let lastSeen = -1;
+  for (let i = 0; i < n; i++) {
+    const oi = oldIndexOf.get(newInstances[i]);
+    if (oi === void 0) {
+      source[i] = -1;
+      moved = true;
+    } else {
+      source[i] = oi;
+      if (oi < lastSeen) moved = true;
+      else lastSeen = oi;
+    }
+  }
+  if (!moved) return;
+  const keep = longestIncreasingSubsequence(source);
+  let refNode = null;
+  for (let i = n - 1; i >= 0; i--) {
+    const domNode = newInstances[i].domNode;
+    if (source[i] === -1 || !keep.has(i)) {
+      if (ctx.dom.nextSibling(domNode) !== refNode) {
+        ctx.dom.insertBefore(parentDom, domNode, refNode);
+      }
+    }
+    refNode = domNode;
+  }
+}
+function longestIncreasingSubsequence(source) {
+  const keep = /* @__PURE__ */ new Set();
+  const n = source.length;
+  const tails = [];
+  const prev = new Array(n).fill(-1);
+  for (let i = 0; i < n; i++) {
+    const v = source[i];
+    if (v < 0) continue;
+    let lo = 0;
+    let hi = tails.length;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (source[tails[mid]] < v) lo = mid + 1;
+      else hi = mid;
+    }
+    if (lo > 0) prev[i] = tails[lo - 1];
+    tails[lo] = i;
+  }
+  let idx = tails.length > 0 ? tails[tails.length - 1] : -1;
+  while (idx >= 0) {
+    keep.add(idx);
+    idx = prev[idx];
+  }
+  return keep;
+}
 function reconcileItemChildren(ctx, itemInstance, newItemNode, mountFn) {
   const el = itemInstance.domNode;
   if (!ctx.dom.isElement(el)) return;
@@ -2649,10 +2777,12 @@ function mountNode(ctx, graphNode, parentDom) {
     const textNode = dom.createTextNode(text);
     dom.appendChild(el2, textNode);
     applyNodeProps(ctx, graphNode, el2);
-    wireEvents(dom, graph, graphNode, el2, new NodeInstance(graphNode, el2));
     const instance2 = new NodeInstance(graphNode, el2);
     ctx.instances.set(graphNode.id, instance2);
-    wireSignalBindings(ctx, graphNode, instance2, textUpdate(dom, el2, textNode));
+    wireEvents(dom, graph, graphNode, el2, instance2);
+    if (graphNode.stateRefs.length !== 0) {
+      wireSignalBindings(ctx, graphNode, instance2, textUpdate(dom, el2, textNode));
+    }
     dom.appendChild(parentDom, el2);
     return instance2;
   }
@@ -2666,7 +2796,9 @@ function mountNode(ctx, graphNode, parentDom) {
     const instance2 = new NodeInstance(graphNode, el2);
     ctx.instances.set(graphNode.id, instance2);
     wireEvents(dom, graph, graphNode, el2, instance2);
-    wireSignalBindings(ctx, graphNode, instance2, headingUpdate(dom, el2));
+    if (graphNode.stateRefs.length !== 0) {
+      wireSignalBindings(ctx, graphNode, instance2, headingUpdate(dom, el2));
+    }
     dom.appendChild(parentDom, el2);
     return instance2;
   }
@@ -2682,7 +2814,9 @@ function mountNode(ctx, graphNode, parentDom) {
     const instance2 = new NodeInstance(graphNode, el2);
     ctx.instances.set(graphNode.id, instance2);
     wireEvents(dom, graph, graphNode, el2, instance2);
-    wireSignalBindings(ctx, graphNode, instance2, inputUpdate(dom, el2));
+    if (graphNode.stateRefs.length !== 0) {
+      wireSignalBindings(ctx, graphNode, instance2, inputUpdate(dom, el2));
+    }
     dom.appendChild(parentDom, el2);
     return instance2;
   }
@@ -2730,7 +2864,9 @@ function mountNode(ctx, graphNode, parentDom) {
     const instance2 = new NodeInstance(graphNode, el2);
     ctx.instances.set(graphNode.id, instance2);
     wireEvents(dom, graph, graphNode, el2, instance2);
-    wireSignalBindings(ctx, graphNode, instance2, buttonUpdate(dom, el2));
+    if (graphNode.stateRefs.length !== 0) {
+      wireSignalBindings(ctx, graphNode, instance2, buttonUpdate(dom, el2));
+    }
     dom.appendChild(parentDom, el2);
     return instance2;
   }
@@ -2757,11 +2893,11 @@ function mountNode(ctx, graphNode, parentDom) {
       dom.setAttribute(el, "data-streetui-key", String(itemKey));
     }
   }
-  if (graphNode.type === "form") {
-    wireEvents(dom, graph, graphNode, el, new NodeInstance(graphNode, el));
-  }
   const instance = new NodeInstance(graphNode, el);
   ctx.instances.set(graphNode.id, instance);
+  if (graphNode.type === "form") {
+    wireEvents(dom, graph, graphNode, el, instance);
+  }
   for (const child of graphNode.children) {
     const childInstance = mountNode(ctx, child, el);
     instance.addChild(childInstance);
@@ -2812,12 +2948,15 @@ function buttonUpdate(dom, el) {
   };
 }
 function applyNodeProps(ctx, graphNode, el) {
-  for (const [key, value] of Object.entries(graphNode.props)) {
+  const props = graphNode.props;
+  for (const key in props) {
+    if (!Object.hasOwn(props, key)) continue;
     if (SKIP_PROP_KEYS.has(key)) continue;
-    applyProp(ctx.dom, el, key, value);
+    applyProp(ctx.dom, el, key, props[key]);
   }
 }
 function wireSignalBindings(ctx, graphNode, instance, onUpdate) {
+  if (graphNode.stateRefs.length === 0) return;
   for (const stateRef of graphNode.stateRefs) {
     const signalKey = `__signal__${stateRef.signalId}`;
     const maybeSig = ctx.graph.getHandler(signalKey);
@@ -2829,18 +2968,45 @@ function wireSignalBindings(ctx, graphNode, instance, onUpdate) {
   }
 }
 function wireReactiveList(ctx, graphNode, instance, el) {
+  const plan = ctx.graph.getHandler(`__listplan__${graphNode.id}`);
   const build = ctx.graph.getHandler(`__listbuild__${graphNode.id}`);
-  if (build === void 0) return;
+  if (plan === void 0 && build === void 0) return;
   for (const stateRef of graphNode.stateRefs) {
     if (stateRef.propKey !== "items") continue;
     const sig = ctx.graph.getHandler(`__signal__${stateRef.signalId}`);
     if (sig === void 0 || typeof sig.subscribe !== "function") continue;
     const unsub = sig.subscribe((value) => {
-      reconcileReactiveList(ctx, graphNode, instance, el, build(value));
+      if (plan !== void 0) {
+        reconcileReactiveListByPlan(ctx, graphNode, instance, el, plan(value));
+      } else {
+        reconcileReactiveList(ctx, graphNode, instance, el, build(value));
+      }
     });
     instance.trackCleanup(unsub);
   }
 }
+function reconcileReactiveListByPlan(ctx, listNode, listInstance, listEl, plan) {
+  const oldInstances = [...listInstance.children];
+  const result = reconcileChildrenByPlan(
+    ctx,
+    listEl,
+    oldInstances,
+    plan,
+    (node, parent) => mountNode(ctx, node, parent)
+  );
+  listInstance.children.length = 0;
+  for (const inst of result.instances) listInstance.children.push(inst);
+  for (const removed of result.removed) {
+    forgetInstance(ctx, removed);
+    ctx.graph.detachNode(removed.graphNode);
+  }
+  const adopted = new Set(result.instances.map((i) => i.graphNode));
+  for (const node of result.built ?? []) {
+    if (!adopted.has(node)) ctx.graph.detachNode(node);
+  }
+  for (const child of [...listNode.children]) listNode.removeChild(child);
+  for (const inst of result.instances) listNode.appendChild(inst.graphNode);
+}
 function reconcileReactiveList(ctx, listNode, listInstance, listEl, newNodes) {
   const oldInstances = [...listInstance.children];
   const result = reconcileChildren(
@@ -2920,14 +3086,18 @@ function hydrateNode(ctx, graphNode, domNode, path) {
       const instance = new NodeInstance(graphNode, domNode);
       ctx.instances.set(graphNode.id, instance);
       wireEvents(dom, graph, graphNode, domNode, instance);
-      wireSignalBindings(ctx, graphNode, instance, textUpdate(dom, domNode, textNode));
+      if (graphNode.stateRefs.length !== 0) {
+        wireSignalBindings(ctx, graphNode, instance, textUpdate(dom, domNode, textNode));
+      }
       return instance;
     }
     case "heading": {
       const instance = new NodeInstance(graphNode, domNode);
       ctx.instances.set(graphNode.id, instance);
       wireEvents(dom, graph, graphNode, domNode, instance);
-      wireSignalBindings(ctx, graphNode, instance, headingUpdate(dom, domNode));
+      if (graphNode.stateRefs.length !== 0) {
+        wireSignalBindings(ctx, graphNode, instance, headingUpdate(dom, domNode));
+      }
       return instance;
     }
     case "input": {
@@ -2936,14 +3106,18 @@ function hydrateNode(ctx, graphNode, domNode, path) {
       const value = graphNode.getProp("value");
       if (value !== void 0) dom.setProperty(domNode, "value", String(value));
       wireEvents(dom, graph, graphNode, domNode, instance);
-      wireSignalBindings(ctx, graphNode, instance, inputUpdate(dom, domNode));
+      if (graphNode.stateRefs.length !== 0) {
+        wireSignalBindings(ctx, graphNode, instance, inputUpdate(dom, domNode));
+      }
       return instance;
     }
     case "button": {
       const instance = new NodeInstance(graphNode, domNode);
       ctx.instances.set(graphNode.id, instance);
       wireEvents(dom, graph, graphNode, domNode, instance);
-      wireSignalBindings(ctx, graphNode, instance, buttonUpdate(dom, domNode));
+      if (graphNode.stateRefs.length !== 0) {
+        wireSignalBindings(ctx, graphNode, instance, buttonUpdate(dom, domNode));
+      }
       return instance;
     }
     case "image":
@@ -2979,10 +3153,11 @@ function hydrateChildren(ctx, parentGraphNode, parentInstance, parentDom, parent
   const expected = parentGraphNode.children;
   const actual = elementChildren(ctx, parentDom);
   let cursor = 0;
+  const diag = ctx.hydrationDiagnostics !== void 0;
   for (let i = 0; i < expected.length; i++) {
     const childNode = expected[i];
     const want = expectedTag(ctx, childNode);
-    const childPath = `${parentPath} / ${childNode.type}[${i}]`;
+    const childPath = diag ? `${parentPath} / ${childNode.type}[${i}]` : parentPath;
     const actualEl = actual[cursor];
     if (actualEl !== void 0 && ctx.dom.isElement(actualEl) && ctx.dom.tagName(actualEl) === want) {
       const inst = hydrateNode(ctx, childNode, actualEl, childPath);
@@ -3834,6 +4009,10 @@ function inspectApplication(compiled) {
   const errors = diags.filter((d) => d.severity === "error").length;
   const perfAcc = { totalNodes: 0, maxDepth: 0, eventHandlers: 0, stateBindings: 0, largestChildCount: 0 };
   collectPerf(graph, signals.size, perfAcc);
+  let reactiveLists = 0;
+  for (const key of compiled.graph.handlers.keys()) {
+    if (key.startsWith("__listplan__")) reactiveLists += 1;
+  }
   return {
     identity: {
       name: compiled.name,
@@ -3855,7 +4034,8 @@ function inspectApplication(compiled) {
       eventHandlers: perfAcc.eventHandlers,
       stateBindings: perfAcc.stateBindings,
       distinctSignals: signals.size,
-      largestChildCount: perfAcc.largestChildCount
+      largestChildCount: perfAcc.largestChildCount,
+      reactiveLists
     }
   };
 }
@@ -4254,6 +4434,7 @@ function defineConfig(config) {
   reactiveListItemSignature,
   readState,
   reconcileChildren,
+  reconcileChildrenByPlan,
   renderToString,
   reportDiagnostic,
   required,