@praxisjs/runtime 0.5.5 → 0.7.0

package/dist/dom/remove.d.ts

@@ -0,0 +1,2 @@
+export declare function removeNodes(nodes: Node[]): void;
+//# sourceMappingURL=remove.d.ts.map

package/dist/dom/remove.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove.d.ts","sourceRoot":"","sources":["../../src/dom/remove.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAiB/C"}

package/dist/dom/remove.js

@@ -0,0 +1,23 @@
+// Replaces Range.deleteContents(): creating a Range per removal is several times slower than
+// walking the siblings, and unreachable Ranges stay registered with the document until collected.
+// Walking first → last (rather than only the tracked nodes) also removes anything a nested reactive
+// child inserted between them after mount, which is what the Range used to cover.
+export function removeNodes(nodes) {
+    const first = nodes[0];
+    const last = nodes[nodes.length - 1];
+    const parent = first.parentNode;
+    if (parent === null || last.parentNode !== parent) {
+        for (const node of nodes)
+            node.parentNode?.removeChild(node);
+        return;
+    }
+    let node = first;
+    while (node) {
+        const next = node.nextSibling;
+        parent.removeChild(node);
+        if (node === last)
+            return;
+        node = next;
+    }
+}
+//# sourceMappingURL=remove.js.map

package/dist/dom/remove.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove.js","sourceRoot":"","sources":["../../src/dom/remove.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,kGAAkG;AAClG,oGAAoG;AACpG,kFAAkF;AAClF,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACvB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC;IAEhC,IAAI,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE,CAAC;QAClD,KAAK,MAAM,IAAI,IAAI,KAAK;YAAE,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC7D,OAAO;IACT,CAAC;IAED,IAAI,IAAI,GAAgB,KAAK,CAAC;IAC9B,OAAO,IAAI,EAAE,CAAC;QACZ,MAAM,IAAI,GAAgB,IAAI,CAAC,WAAW,CAAC;QAC3C,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACzB,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QAC1B,IAAI,GAAG,IAAI,CAAC;IACd,CAAC;AACH,CAAC"}

package/dist/element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,KAAK,EAAE,KAAK,GACX,WAAW,GAAG,UAAU,CAa1B"}
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,KAAK,EAAE,KAAK,GACX,WAAW,GAAG,UAAU,CAiB1B"}

package/dist/element.js

@@ -1,8 +1,13 @@
 import { mountChildren } from "./children";
 import { createElement } from "./dom/create";
 import { applyProp } from "./dom/props";
+import { isRecording, recordProps } from "./hydration-context";
 export function mountElement(tag, props, scope) {
     const el = createElement(tag);
+    // During a hydration build pass, retain (props, scope) so reconcile() can
+    // replay them onto whichever real element it ends up keeping instead.
+    if (isRecording())
+        recordProps(el, props, scope);
     for (const key in props) {
         if (key === "children")
             continue;

package/dist/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAIxC,MAAM,UAAU,YAAY,CAC1B,GAAW,EACX,KAA8B,EAC9B,KAAY;IAEZ,MAAM,EAAE,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAE9B,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;QACxB,IAAI,GAAG,KAAK,UAAU;YAAE,SAAS;QACjC,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;QACjC,aAAa,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC"}
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAI/D,MAAM,UAAU,YAAY,CAC1B,GAAW,EACX,KAA8B,EAC9B,KAAY;IAEZ,MAAM,EAAE,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAE9B,0EAA0E;IAC1E,sEAAsE;IACtE,IAAI,WAAW,EAAE;QAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAEjD,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;QACxB,IAAI,GAAG,KAAK,UAAU;YAAE,SAAS;QACjC,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;QACjC,aAAa,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC"}

package/dist/hydration-context.d.ts

@@ -0,0 +1,21 @@
+import type { Scope } from "./scope";
+/**
+ * Marks the synchronous "build" pass of a hydration attempt: `factory()` runs
+ * completely normally (same create-mode code as a plain client render), but
+ * every element additionally records its (props, scope) for reconcile()'s
+ * replay step, and every mountReactive() region records which of its output
+ * nodes may need to be swapped in-place if reconcile() decides to keep a real
+ * element instead of the fresh one. No-op / zero cost outside a build pass.
+ */
+export declare function runInRecording<T>(fn: () => T): T;
+export declare function isRecording(): boolean;
+interface PropRecord {
+    props: Record<string, unknown>;
+    scope: Scope;
+}
+export declare function recordProps(el: Element, props: Record<string, unknown>, scope: Scope): void;
+export declare function getRecordedProps(el: Element): PropRecord | undefined;
+export declare function registerReactiveNode(node: Node, owner: Node[]): void;
+export declare function getReactiveOwner(node: Node): Node[] | undefined;
+export {};
+//# sourceMappingURL=hydration-context.d.ts.map

package/dist/hydration-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydration-context.d.ts","sourceRoot":"","sources":["../src/hydration-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIrC;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,CAQhD;AAED,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC;CACd;AAID,wBAAgB,WAAW,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAE3F;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAEpE;AAOD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAEpE;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,SAAS,CAE/D"}

package/dist/hydration-context.js

@@ -0,0 +1,40 @@
+let _recording = false;
+/**
+ * Marks the synchronous "build" pass of a hydration attempt: `factory()` runs
+ * completely normally (same create-mode code as a plain client render), but
+ * every element additionally records its (props, scope) for reconcile()'s
+ * replay step, and every mountReactive() region records which of its output
+ * nodes may need to be swapped in-place if reconcile() decides to keep a real
+ * element instead of the fresh one. No-op / zero cost outside a build pass.
+ */
+export function runInRecording(fn) {
+    const prev = _recording;
+    _recording = true;
+    try {
+        return fn();
+    }
+    finally {
+        _recording = prev;
+    }
+}
+export function isRecording() {
+    return _recording;
+}
+const _propRecords = new WeakMap();
+export function recordProps(el, props, scope) {
+    _propRecords.set(el, { props, scope });
+}
+export function getRecordedProps(el) {
+    return _propRecords.get(el);
+}
+// mountReactive() keeps a `currentNodes` array (by reference) for diffing its
+// *next* update. If reconcile() replaces one of those fresh nodes with a real
+// one, it needs to overwrite that array in place so the closure sees the swap.
+const _reactiveOwners = new WeakMap();
+export function registerReactiveNode(node, owner) {
+    _reactiveOwners.set(node, owner);
+}
+export function getReactiveOwner(node) {
+    return _reactiveOwners.get(node);
+}
+//# sourceMappingURL=hydration-context.js.map

package/dist/hydration-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydration-context.js","sourceRoot":"","sources":["../src/hydration-context.ts"],"names":[],"mappings":"AAEA,IAAI,UAAU,GAAG,KAAK,CAAC;AAEvB;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAI,EAAW;IAC3C,MAAM,IAAI,GAAG,UAAU,CAAC;IACxB,UAAU,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC;QACH,OAAO,EAAE,EAAE,CAAC;IACd,CAAC;YAAS,CAAC;QACT,UAAU,GAAG,IAAI,CAAC;IACpB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,OAAO,UAAU,CAAC;AACpB,CAAC;AAOD,MAAM,YAAY,GAAG,IAAI,OAAO,EAAuB,CAAC;AAExD,MAAM,UAAU,WAAW,CAAC,EAAW,EAAE,KAA8B,EAAE,KAAY;IACnF,YAAY,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AACzC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAAW;IAC1C,OAAO,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AAC9B,CAAC;AAED,8EAA8E;AAC9E,8EAA8E;AAC9E,+EAA+E;AAC/E,MAAM,eAAe,GAAG,IAAI,OAAO,EAAgB,CAAC;AAEpD,MAAM,UAAU,oBAAoB,CAAC,IAAU,EAAE,KAAa;IAC5D,eAAe,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAU;IACzC,OAAO,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AACnC,CAAC"}

package/dist/hydration.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Walks `freshChildren` (the complete, correctly-nested output of a normal
+ * create-mode mount into a detached scratch node) against `realParent`'s
+ * existing children (the server-rendered DOM already attached to the page),
+ * in document order — safe now that both trees are fully built, unlike trying
+ * to adopt while `freshChildren` was still being constructed.
+ *
+ * Matching elements keep the real node (props/listeners replayed onto it,
+ * via `applyProp` — the same function normal mounting uses) and recurse.
+ * Text/comment nodes are always taken from the fresh side — they carry no
+ * listeners or state, so recreating them is free and avoids having to
+ * re-point mountComponent/mountReactive's anchor comments. Anything that
+ * doesn't line up (different tag, or one side ran out) is a local mismatch:
+ * the stale real node is dropped and the fresh one takes its place — no
+ * lookahead, no reordering, and no whole-page fallback.
+ */
+export declare function reconcile(realParent: Node, freshChildren: Node[]): void;
+//# sourceMappingURL=hydration.d.ts.map

package/dist/hydration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydration.d.ts","sourceRoot":"","sources":["../src/hydration.ts"],"names":[],"mappings":"AAuBA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,IAAI,CA8BvE"}

package/dist/hydration.js

@@ -0,0 +1,67 @@
+import { applyProp } from "./dom/props";
+import { getReactiveOwner, getRecordedProps } from "./hydration-context";
+function replayProps(real, fresh) {
+    const record = getRecordedProps(fresh);
+    if (!record)
+        return;
+    for (const key in record.props) {
+        if (key === "children")
+            continue;
+        applyProp(real, key, record.props[key], record.scope);
+    }
+}
+// mountReactive()'s `currentNodes` array holds fresh node references for its
+// *next* diff. If we're keeping `real` instead of `fresh` here, that array
+// needs to see the swap too — it's registered by reference, so this mutation
+// is visible to whichever effect closure owns it.
+function notifyReplacement(fresh, real) {
+    const owner = getReactiveOwner(fresh);
+    if (!owner)
+        return;
+    const idx = owner.indexOf(fresh);
+    if (idx !== -1)
+        owner[idx] = real;
+}
+/**
+ * Walks `freshChildren` (the complete, correctly-nested output of a normal
+ * create-mode mount into a detached scratch node) against `realParent`'s
+ * existing children (the server-rendered DOM already attached to the page),
+ * in document order — safe now that both trees are fully built, unlike trying
+ * to adopt while `freshChildren` was still being constructed.
+ *
+ * Matching elements keep the real node (props/listeners replayed onto it,
+ * via `applyProp` — the same function normal mounting uses) and recurse.
+ * Text/comment nodes are always taken from the fresh side — they carry no
+ * listeners or state, so recreating them is free and avoids having to
+ * re-point mountComponent/mountReactive's anchor comments. Anything that
+ * doesn't line up (different tag, or one side ran out) is a local mismatch:
+ * the stale real node is dropped and the fresh one takes its place — no
+ * lookahead, no reordering, and no whole-page fallback.
+ */
+export function reconcile(realParent, freshChildren) {
+    let realCursor = realParent.firstChild;
+    for (const fresh of freshChildren) {
+        if (fresh.nodeType === Node.ELEMENT_NODE &&
+            realCursor?.nodeType === Node.ELEMENT_NODE &&
+            realCursor.localName === fresh.localName) {
+            const real = realCursor;
+            realCursor = real.nextSibling;
+            replayProps(real, fresh);
+            reconcile(real, Array.from(fresh.childNodes));
+            notifyReplacement(fresh, real);
+            continue;
+        }
+        if (realCursor) {
+            const stale = realCursor;
+            realCursor = realCursor.nextSibling;
+            stale.remove();
+        }
+        realParent.insertBefore(fresh, realCursor);
+    }
+    while (realCursor) {
+        const stale = realCursor;
+        realCursor = realCursor.nextSibling;
+        stale.remove();
+    }
+}
+//# sourceMappingURL=hydration.js.map

package/dist/hydration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydration.js","sourceRoot":"","sources":["../src/hydration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,SAAS,WAAW,CAAC,IAAa,EAAE,KAAc;IAChD,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,GAAG,KAAK,UAAU;YAAE,SAAS;QACjC,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;AACH,CAAC;AAED,6EAA6E;AAC7E,2EAA2E;AAC3E,6EAA6E;AAC7E,kDAAkD;AAClD,SAAS,iBAAiB,CAAC,KAAW,EAAE,IAAU;IAChD,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,CAAC,KAAK;QAAE,OAAO;IACnB,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjC,IAAI,GAAG,KAAK,CAAC,CAAC;QAAE,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;AACpC,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,SAAS,CAAC,UAAgB,EAAE,aAAqB;IAC/D,IAAI,UAAU,GAAqB,UAAU,CAAC,UAAU,CAAC;IAEzD,KAAK,MAAM,KAAK,IAAI,aAAa,EAAE,CAAC;QAClC,IACE,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;YACpC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY;YACzC,UAAsB,CAAC,SAAS,KAAM,KAAiB,CAAC,SAAS,EAClE,CAAC;YACD,MAAM,IAAI,GAAG,UAAqB,CAAC;YACnC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;YAC9B,WAAW,CAAC,IAAI,EAAE,KAAgB,CAAC,CAAC;YACpC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAE,KAAiB,CAAC,UAAU,CAAC,CAAC,CAAC;YAC3D,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAC/B,SAAS;QACX,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,KAAK,GAAG,UAAU,CAAC;YACzB,UAAU,GAAG,UAAU,CAAC,WAAW,CAAC;YACpC,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,CAAC;QACD,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAC7C,CAAC;IAED,OAAO,UAAU,EAAE,CAAC;QAClB,MAAM,KAAK,GAAG,UAAU,CAAC;QACzB,UAAU,GAAG,UAAU,CAAC,WAAW,CAAC;QACpC,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;AACH,CAAC"}

package/dist/index.d.ts

@@ -4,6 +4,12 @@
  * The factory function is called once inside the root scope,
  * so `jsx()` can access the current scope via `getCurrentScope()`.
  *
+ * If `container` carries the marker `@praxisjs/ssg` stamps onto prerendered
+ * HTML, the tree is built normally into a detached scratch node and then
+ * reconciled against the existing DOM (real elements are kept and have their
+ * props/listeners replayed onto them; text/comments and any mismatched nodes
+ * are recreated) instead of clearing the container and mounting fresh.
+ *
  * @example
  * render(() => <App />, document.getElementById('app'));
  */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CACpB,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,EACnC,SAAS,EAAE,WAAW,GACrB,MAAM,IAAI,CAcZ;AAED,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAqDA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CACpB,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,EACnC,SAAS,EAAE,WAAW,GACrB,MAAM,IAAI,CAKZ;AAED,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -1,16 +1,11 @@
 import { mountChildren } from "./children";
 import { runInScope } from "./context";
+import { reconcile } from "./hydration";
+import { runInRecording } from "./hydration-context";
 import { Scope } from "./scope";
-/**
- * Renders a component tree into a container element.
- *
- * The factory function is called once inside the root scope,
- * so `jsx()` can access the current scope via `getCurrentScope()`.
- *
- * @example
- * render(() => <App />, document.getElementById('app'));
- */
-export function render(factory, container) {
+/** Written by `@praxisjs/ssg` onto the mount container in its prerendered HTML. */
+const SSG_MARKER = "data-praxis-ssg";
+function mountCreate(factory, container) {
     const rootScope = new Scope();
     container.innerHTML = "";
     runInScope(rootScope, () => {
@@ -22,6 +17,46 @@ export function render(factory, container) {
         container.innerHTML = "";
     };
 }
+function hydrate(factory, container) {
+    const rootScope = new Scope();
+    const scratch = document.createDocumentFragment();
+    // Build normally — same code as mountCreate, just into a detached scratch
+    // node instead of the real container, so it can be walked in document
+    // order afterwards (its own construction order is bottom-up, not useful
+    // for matching against the server-rendered DOM directly).
+    runInRecording(() => {
+        runInScope(rootScope, () => {
+            const result = factory();
+            mountChildren(scratch, result, rootScope);
+        });
+    });
+    reconcile(container, Array.from(scratch.childNodes));
+    return () => {
+        rootScope.dispose();
+        container.innerHTML = "";
+    };
+}
+/**
+ * Renders a component tree into a container element.
+ *
+ * The factory function is called once inside the root scope,
+ * so `jsx()` can access the current scope via `getCurrentScope()`.
+ *
+ * If `container` carries the marker `@praxisjs/ssg` stamps onto prerendered
+ * HTML, the tree is built normally into a detached scratch node and then
+ * reconciled against the existing DOM (real elements are kept and have their
+ * props/listeners replayed onto them; text/comments and any mismatched nodes
+ * are recreated) instead of clearing the container and mounting fresh.
+ *
+ * @example
+ * render(() => <App />, document.getElementById('app'));
+ */
+export function render(factory, container) {
+    if (container.hasAttribute(SSG_MARKER)) {
+        return hydrate(factory, container);
+    }
+    return mountCreate(factory, container);
+}
 export { Scope } from "./scope";
 export { runInScope, getCurrentScope } from "./context";
 export { mountElement } from "./element";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC;;;;;;;;GAQG;AACH,MAAM,UAAU,MAAM,CACpB,OAAmC,EACnC,SAAsB;IAEtB,MAAM,SAAS,GAAG,IAAI,KAAK,EAAE,CAAC;IAE9B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;IAEzB,UAAU,CAAC,SAAS,EAAE,GAAG,EAAE;QACzB,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC;QACzB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,EAAE;QACV,SAAS,CAAC,OAAO,EAAE,CAAC;QACpB,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;IAC3B,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,mFAAmF;AACnF,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAErC,SAAS,WAAW,CAClB,OAAmC,EACnC,SAAsB;IAEtB,MAAM,SAAS,GAAG,IAAI,KAAK,EAAE,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;IAEzB,UAAU,CAAC,SAAS,EAAE,GAAG,EAAE;QACzB,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC;QACzB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,EAAE;QACV,SAAS,CAAC,OAAO,EAAE,CAAC;QACpB,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;IAC3B,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,OAAO,CACd,OAAmC,EACnC,SAAsB;IAEtB,MAAM,SAAS,GAAG,IAAI,KAAK,EAAE,CAAC;IAC9B,MAAM,OAAO,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;IAElD,0EAA0E;IAC1E,sEAAsE;IACtE,wEAAwE;IACxE,0DAA0D;IAC1D,cAAc,CAAC,GAAG,EAAE;QAClB,UAAU,CAAC,SAAS,EAAE,GAAG,EAAE;YACzB,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC;YACzB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IAErD,OAAO,GAAG,EAAE;QACV,SAAS,CAAC,OAAO,EAAE,CAAC;QACpB,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;IAC3B,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,MAAM,CACpB,OAAmC,EACnC,SAAsB;IAEtB,IAAI,SAAS,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;QACvC,OAAO,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,WAAW,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AACzC,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC"}

package/dist/portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../src/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAKpD,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,qBAAa,MAAO,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACzD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAG,IAAI,CAAU;IAC9C,MAAM,CAAC,QAAQ,CAAC,aAAa,QAAQ;IAErC,MAAM;CAsBP;AAED,wBAAgB,mBAAmB,CAAC,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAOhF"}
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../src/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAOpD,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,qBAAa,MAAO,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACzD,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAG,IAAI,CAAU;IAC9C,MAAM,CAAC,QAAQ,CAAC,aAAa,QAAQ;IAErC,MAAM;CA6BP;AAED,wBAAgB,mBAAmB,CAAC,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAOhF"}

package/dist/portal.js

@@ -1,26 +1,35 @@
 import { StatelessComponent } from "@praxisjs/core";
+import { isServerRenderPass } from "@praxisjs/core/internal";
 import { mountChildren } from "./children";
 import { getCurrentScope } from "./context";
+import { removeNodes } from "./dom/remove";
 export class Portal extends StatelessComponent {
     static __isComponent = true;
     static __isStateless = true;
     render() {
+        // Portals escape to an arbitrary external target (default document.body),
+        // which would need a hydration cursor shared across every portal mounted at
+        // that same target — out of scope for v1. Skip during the server render pass
+        // (target content isn't part of the static HTML); the client mounts normally,
+        // create-mode, right after hydration completes — no duplication.
+        if (isServerRenderPass())
+            return null;
         const scope = getCurrentScope();
         const target = resolvePortalTarget(this.props.to);
         if (!target)
             return null;
         const start = document.createComment("");
         const end = document.createComment("");
-        target.appendChild(start);
-        mountChildren(target, this.props.children, scope);
-        target.appendChild(end);
+        // Built off-document and attached once, so the target never sees a half-built subtree.
+        const fragment = document.createDocumentFragment();
+        fragment.appendChild(start);
+        mountChildren(fragment, this.props.children, scope);
+        fragment.appendChild(end);
+        target.appendChild(fragment);
         scope.add(() => {
             if (!start.parentNode || start.parentNode !== end.parentNode)
                 return;
-            const range = document.createRange();
-            range.setStartBefore(start);
-            range.setEndAfter(end);
-            range.deleteContents();
+            removeNodes([start, end]);
         });
         return document.createComment("portal");
     }

package/dist/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","sourceRoot":"","sources":["../src/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAM5C,MAAM,OAAO,MAAO,SAAQ,kBAA+B;IACzD,MAAM,CAAU,aAAa,GAAG,IAAa,CAAC;IAC9C,MAAM,CAAU,aAAa,GAAG,IAAI,CAAC;IAErC,MAAM;QACJ,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;QAChC,MAAM,MAAM,GAAG,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QAEzB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACzC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QAEvC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC1B,aAAa,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAClD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAExB,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE;YACb,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,KAAK,GAAG,CAAC,UAAU;gBAAE,OAAO;YACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;YACrC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YAC5B,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;YACvB,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;QAEH,OAAO,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;;AAGH,MAAM,UAAU,mBAAmB,CAAC,EAA4B;IAC9D,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;QACf,IAAI,OAAO,QAAQ,KAAK,WAAW;YAAE,OAAO,IAAI,CAAC;QACjD,OAAO,QAAQ,CAAC,IAAI,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,EAAE,KAAK,QAAQ;QAAE,OAAO,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;IAC9D,OAAO,EAAE,CAAC;AACZ,CAAC"}
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../src/portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,MAAM,OAAO,MAAO,SAAQ,kBAA+B;IACzD,MAAM,CAAU,aAAa,GAAG,IAAa,CAAC;IAC9C,MAAM,CAAU,aAAa,GAAG,IAAI,CAAC;IAErC,MAAM;QACJ,0EAA0E;QAC1E,4EAA4E;QAC5E,6EAA6E;QAC7E,8EAA8E;QAC9E,iEAAiE;QACjE,IAAI,kBAAkB,EAAE;YAAE,OAAO,IAAI,CAAC;QAEtC,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;QAChC,MAAM,MAAM,GAAG,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QAEzB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACzC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QAEvC,uFAAuF;QACvF,MAAM,QAAQ,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;QACnD,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC5B,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACpD,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAE7B,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE;YACb,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,KAAK,GAAG,CAAC,UAAU;gBAAE,OAAO;YACrE,WAAW,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,OAAO,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;;AAGH,MAAM,UAAU,mBAAmB,CAAC,EAA4B;IAC9D,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;QACf,IAAI,OAAO,QAAQ,KAAK,WAAW;YAAE,OAAO,IAAI,CAAC;QACjD,OAAO,QAAQ,CAAC,IAAI,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,EAAE,KAAK,QAAQ;QAAE,OAAO,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;IAC9D,OAAO,EAAE,CAAC;AACZ,CAAC"}

package/dist/reactive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reactive.d.ts","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAmBhC,wBAAgB,aAAa,CAC3B,MAAM,EAAE,IAAI,EACZ,EAAE,EAAE,MAAM,OAAO,EACjB,WAAW,EAAE,KAAK,GACjB,IAAI,CAoCN"}
+{"version":3,"file":"reactive.d.ts","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAmBhC,wBAAgB,aAAa,CAC3B,MAAM,EAAE,IAAI,EACZ,EAAE,EAAE,MAAM,OAAO,EACjB,WAAW,EAAE,KAAK,GACjB,IAAI,CAwCN"}

package/dist/reactive.js

@@ -1,4 +1,6 @@
 import { runInScope } from "./context";
+import { removeNodes } from "./dom/remove";
+import { isRecording, registerReactiveNode } from "./hydration-context";
 import { Scope } from "./scope";
 function collectNodes(value, out) {
     if (value === null || value === undefined || value === false)
@@ -36,17 +38,21 @@ export function mountReactive(parent, fn, parentScope) {
         const result = runInScope(childScope, fn);
         const newNodes = [];
         collectNodes(result, newNodes);
+        // During a hydration build pass, remember that each of these fresh nodes
+        // belongs to *this* array — reconcile() mutates `newNodes` in place (by
+        // reference, same array `currentNodes` ends up pointing at) if it decides
+        // to keep a real element instead of one of them, so future diffs here
+        // stay correct.
+        if (isRecording()) {
+            for (const n of newNodes)
+                registerReactiveNode(n, newNodes);
+        }
         const anchor = end.parentNode ?? parent;
-        if (currentNodes.length > 0) {
-            if (currentNodes.length === 1) {
-                anchor.removeChild(currentNodes[0]);
-            }
-            else {
-                const range = document.createRange();
-                range.setStartBefore(currentNodes[0]);
-                range.setEndAfter(currentNodes[currentNodes.length - 1]);
-                range.deleteContents();
-            }
+        if (currentNodes.length === 1) {
+            anchor.removeChild(currentNodes[0]);
+        }
+        else if (currentNodes.length > 1) {
+            removeNodes(currentNodes);
         }
         if (newNodes.length > 0) {
             anchor.insertBefore(nodesToFragment(newNodes), end);

package/dist/reactive.js.map

@@ -1 +1 @@
-{"version":3,"file":"reactive.js","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"reactive.js","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/runtime",
-  "version": "0.5.5",
+  "version": "0.7.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,9 +14,9 @@
     "typescript": "^6.0.3"
   },
   "dependencies": {
-    "@praxisjs/core": "2.0.0",
-    "@praxisjs/shared": "0.3.1",
-    "@praxisjs/decorators": "1.6.0"
+    "@praxisjs/core": "2.2.0",
+    "@praxisjs/decorators": "1.7.0",
+    "@praxisjs/shared": "0.3.1"
   },
   "scripts": {
     "build": "tsc",

package/src/__tests__/children.test.ts

@@ -216,3 +216,61 @@ describe("mountReactive", () => {
     document.body.removeChild(parent);
   });
 });
+
+describe("fine-grained rows", () => {
+  function setup() {
+    const ids = signal([1, 2]);
+    const titles = signal<Record<number, string>>({ 1: "a", 2: "b" });
+    let listRuns = 0;
+    const ul = container();
+    const scope = new Scope();
+    mountChildren(ul, () => {
+      listRuns++;
+      return ids().map((id) => {
+        const li = document.createElement("li");
+        mountChildren(li, () => titles()[id], scope);
+        return li;
+      });
+    }, scope);
+    return { ids, titles, ul, scope, runs: () => listRuns };
+  }
+
+  it("changing row content updates text in place without re-running the list function", () => {
+    const { titles, ul, scope, runs } = setup();
+    const rows = [...ul.querySelectorAll("li")];
+    titles.set({ 1: "A", 2: "b" });
+    expect(runs()).toBe(1);
+    expect([...ul.querySelectorAll("li")]).toEqual(rows);
+    expect(rows.map((r) => r.textContent)).toEqual(["A", "b"]);
+    scope.dispose();
+  });
+
+  it("changing the structure rebuilds the list", () => {
+    const { ids, titles, ul, scope, runs } = setup();
+    titles.set({ 1: "a", 2: "b", 3: "c" });
+    ids.set([1, 2, 3]);
+    expect(runs()).toBe(2);
+    expect(ul.querySelectorAll("li")).toHaveLength(3);
+    scope.dispose();
+  });
+});
+
+describe("mountReactive multi-node replacement", () => {
+  it("removes nodes that were inserted between the tracked ones after mount", () => {
+    const toggle = signal(0);
+    const parent = container();
+    const scope = new Scope();
+    let a!: Node;
+    mountChildren(parent, () => {
+      void toggle();
+      a = document.createElement("a");
+      return [a, document.createElement("b")];
+    }, scope);
+    const stray = document.createElement("stray");
+    parent.insertBefore(stray, a.nextSibling);
+    toggle.set(1);
+    expect(parent.contains(stray)).toBe(false);
+    expect([...parent.children].map((c) => c.localName)).toEqual(["a", "b"]);
+    scope.dispose();
+  });
+});

package/src/__tests__/component.test.ts

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 
 import { StatefulComponent } from "@praxisjs/core";
 import { getComponentProps } from "@praxisjs/core/internal";
@@ -295,3 +295,69 @@ describe("mountComponent", () => {
     scope.dispose();
   });
 });
+
+describe("mountComponent onMount scheduling", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  function stubMicrotasks(): Array<() => void> {
+    const jobs: Array<() => void> = [];
+    vi.stubGlobal("queueMicrotask", (fn: () => void) => { jobs.push(fn); });
+    return jobs;
+  }
+
+  function lifecycleComp(onMount: () => void) {
+    return class extends StatefulComponent {
+      static __isComponent = true as const;
+      static __isStateless = false;
+      onMount() { onMount(); }
+      render() { return null; }
+    };
+  }
+
+  it("drains every component mounted in the same pass with a single microtask, in mount order", () => {
+    const jobs = stubMicrotasks();
+    const order: string[] = [];
+    const scope = new Scope();
+    mountComponent(lifecycleComp(() => order.push("a")), {}, scope);
+    mountComponent(lifecycleComp(() => order.push("b")), {}, scope);
+    expect(jobs).toHaveLength(1);
+    jobs.shift()?.();
+    expect(order).toEqual(["a", "b"]);
+  });
+
+  it("schedules a new microtask for components mounted after a drain", () => {
+    const jobs = stubMicrotasks();
+    const onMount = vi.fn();
+    const scope = new Scope();
+    mountComponent(lifecycleComp(onMount), {}, scope);
+    jobs.shift()?.();
+    mountComponent(lifecycleComp(onMount), {}, scope);
+    expect(jobs).toHaveLength(1);
+    jobs.shift()?.();
+    expect(onMount).toHaveBeenCalledTimes(2);
+  });
+
+  it("a throwing onMount does not stop the others and is rethrown on its own microtask", () => {
+    const jobs = stubMicrotasks();
+    const second = vi.fn();
+    const scope = new Scope();
+    mountComponent(lifecycleComp(() => { throw new Error("mount boom"); }), {}, scope);
+    mountComponent(lifecycleComp(second), {}, scope);
+    jobs.shift()?.();
+    expect(second).toHaveBeenCalledOnce();
+    expect(jobs).toHaveLength(1);
+    expect(() => { jobs.shift()?.(); }).toThrow("mount boom");
+  });
+
+  it("skips onMount for a component disposed before the drain", () => {
+    const jobs = stubMicrotasks();
+    const onMount = vi.fn();
+    const scope = new Scope();
+    mountComponent(lifecycleComp(onMount), {}, scope);
+    scope.dispose();
+    jobs.shift()?.();
+    expect(onMount).not.toHaveBeenCalled();
+  });
+});