streetui 1.0.0 → 1.2.0

package/dist/testing.cjs

@@ -21,10 +21,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var testing_exports = {};
 __export(testing_exports, {
   VERSION: () => VERSION,
+  analyzeGraph: () => analyzeGraph,
   findAllByRole: () => findAllByRole,
   findByRole: () => findByRole,
   findByText: () => findByText,
   flushUpdates: () => flushUpdates,
+  formatInspection: () => formatInspection,
+  inspectCompilation: () => inspectCompilation,
   render: () => render,
   renderOnce: () => renderOnce,
   renderServerThenHydrate: () => renderServerThenHydrate,
@@ -726,6 +729,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;
@@ -855,6 +859,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;
@@ -956,10 +1063,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;
   }
@@ -973,7 +1082,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;
   }
@@ -989,7 +1100,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;
   }
@@ -1037,7 +1150,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;
   }
@@ -1064,11 +1179,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);
@@ -1119,12 +1234,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);
@@ -1136,18 +1254,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(
@@ -1220,14 +1365,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": {
@@ -1236,14 +1385,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":
@@ -1279,10 +1432,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);
@@ -1737,15 +1891,124 @@ function renderServerThenHydrate(build, options = {}) {
   };
 }
 
+// ../compiler/dist/diagnostics.js
+var TEXT_PROP_KEYS = /* @__PURE__ */ new Set(["text", "label", "value"]);
+function analyzeGraph(graph) {
+  const nodes = /* @__PURE__ */ new Map();
+  const summary = {
+    totalNodes: 0,
+    staticNodes: 0,
+    staticSubtrees: 0,
+    dynamicTextNodes: 0,
+    dynamicAttrNodes: 0,
+    eventNodes: 0,
+    lists: 0,
+    conditionals: 0
+  };
+  const visit = (node) => {
+    let allChildrenStatic = true;
+    for (const child of node.children) {
+      const childSubtreeStatic = visit(child);
+      if (!childSubtreeStatic) allChildrenStatic = false;
+    }
+    let hasDynamicText = false;
+    let hasDynamicAttr = false;
+    for (const ref of node.stateRefs) {
+      if (TEXT_PROP_KEYS.has(ref.propKey)) hasDynamicText = true;
+      else hasDynamicAttr = true;
+    }
+    const hasEvents = node.events.length > 0;
+    const isList = node.type === "reactive-list";
+    const isConditional = node.type === "conditional";
+    const isStatic = node.stateRefs.length === 0 && !hasEvents && !isList && !isConditional;
+    const isStaticSubtree = isStatic && allChildrenStatic;
+    nodes.set(node.id, {
+      isStatic,
+      isStaticSubtree,
+      hasDynamicText,
+      hasDynamicAttr,
+      hasEvents,
+      isList,
+      isConditional
+    });
+    summary.totalNodes += 1;
+    if (isStatic) summary.staticNodes += 1;
+    if (isStaticSubtree) summary.staticSubtrees += 1;
+    if (hasDynamicText) summary.dynamicTextNodes += 1;
+    if (hasDynamicAttr) summary.dynamicAttrNodes += 1;
+    if (hasEvents) summary.eventNodes += 1;
+    if (isList) summary.lists += 1;
+    if (isConditional) summary.conditionals += 1;
+    return isStaticSubtree;
+  };
+  visit(graph.root);
+  return { nodes, summary };
+}
+function inspectCompilation(graph) {
+  const analysis = analyzeGraph(graph);
+  const nodes = [];
+  const walk = (node, depth) => {
+    const a = analysis.nodes.get(node.id);
+    if (a !== void 0) {
+      const classification = a.isStaticSubtree ? "static-subtree-root" : a.isStatic ? "static" : "dynamic";
+      nodes.push({
+        id: node.id,
+        type: node.type,
+        depth,
+        classification,
+        dynamicText: a.hasDynamicText,
+        dynamicAttrs: a.hasDynamicAttr,
+        events: node.events.map((e) => e.type),
+        boundProps: node.stateRefs.map((r) => r.propKey),
+        isList: a.isList,
+        isConditional: a.isConditional,
+        hydration: a.isStaticSubtree ? "adopt-static" : "verify-dynamic"
+      });
+    }
+    for (const child of node.children) walk(child, depth + 1);
+  };
+  walk(graph.root, 0);
+  const staticRatio = analysis.summary.totalNodes === 0 ? 0 : analysis.summary.staticNodes / analysis.summary.totalNodes;
+  return {
+    name: graph.name,
+    version: graph.version,
+    summary: { ...analysis.summary, staticRatio: +staticRatio.toFixed(4) },
+    nodes
+  };
+}
+function formatInspection(inspection) {
+  const s = inspection.summary;
+  const lines = [];
+  lines.push(`StreetUI compiler inspection \u2014 ${inspection.name} v${inspection.version}`);
+  lines.push(
+    `  nodes=${s.totalNodes} static=${s.staticNodes} staticSubtrees=${s.staticSubtrees} dynamicText=${s.dynamicTextNodes} dynamicAttrs=${s.dynamicAttrNodes} events=${s.eventNodes} lists=${s.lists} conditionals=${s.conditionals} staticRatio=${(s.staticRatio * 100).toFixed(1)}%`
+  );
+  for (const n of inspection.nodes) {
+    const flags = [];
+    if (n.dynamicText) flags.push("text");
+    if (n.dynamicAttrs) flags.push("attr:" + n.boundProps.join(","));
+    if (n.events.length > 0) flags.push("on:" + n.events.join(","));
+    if (n.isList) flags.push("list");
+    if (n.isConditional) flags.push("cond");
+    lines.push(
+      `  ${"  ".repeat(n.depth)}${n.type}#${n.id} [${n.classification}]` + (flags.length > 0 ? ` {${flags.join(" ")}}` : "")
+    );
+  }
+  return lines.join("\n");
+}
+
 // src/version.ts
-var VERSION = "1.0.0";
+var VERSION = "1.2.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   VERSION,
+  analyzeGraph,
   findAllByRole,
   findByRole,
   findByText,
   flushUpdates,
+  formatInspection,
+  inspectCompilation,
   render,
   renderOnce,
   renderServerThenHydrate,