@continuum-js/dom 0.3.1 → 0.4.0

package/dist/index.d.ts

@@ -8,6 +8,13 @@ export declare function scope<T>(fn: () => T): {
 };
 /** Register a cleanup in the current owner (no-op outside any owner). */
 export declare function onCleanup(fn: () => void): void;
+/**
+ * Register a callback to run once the current scope's nodes are inserted into
+ * the DOM — after `mount`, or right after a dynamic region (`dyn`/`each`)
+ * inserts a freshly built subtree. Use it for focus, measurement, and
+ * third-party libraries that need a live element. No-op outside any owner.
+ */
+export declare function onMount(fn: () => void): void;
 /** Anything placeable in JSX: nodes, behaviors (live-bound), primitives, arrays. */
 export type Child = Node | Behavior<unknown> | string | number | boolean | null | undefined | Child[];
 type Props = Record<string, unknown> | null;

package/dist/index.js

@@ -6,6 +6,8 @@ let currentOwner = null;
 function createOwner(parent) {
     const owner = {
         cleanups: [],
+        mounts: null,
+        mounted: false,
         children: [],
         parent,
         contexts: null,
@@ -28,6 +30,7 @@ function disposeOwner(owner) {
         owner.cleanups[i]();
     }
     owner.cleanups.length = 0;
+    owner.mounts = null; // never mounted → its onMount callbacks never run
     // detach from parent
     if (owner.parent) {
         const siblings = owner.parent.children;
@@ -63,6 +66,32 @@ export function onCleanup(fn) {
     if (currentOwner)
         currentOwner.cleanups.push(fn);
 }
+// Run the subtree's pending onMount callbacks: child scopes first, then this
+// owner's own, newest registration first. With the idiomatic `onMount` at the
+// top of a component body, that yields children-before-parents.
+function flushMounts(owner) {
+    if (owner.disposed)
+        return;
+    for (const child of owner.children)
+        flushMounts(child);
+    owner.mounted = true;
+    const mounts = owner.mounts;
+    if (mounts) {
+        owner.mounts = null;
+        for (let i = mounts.length - 1; i >= 0; i--)
+            mounts[i]();
+    }
+}
+/**
+ * Register a callback to run once the current scope's nodes are inserted into
+ * the DOM — after `mount`, or right after a dynamic region (`dyn`/`each`)
+ * inserts a freshly built subtree. Use it for focus, measurement, and
+ * third-party libraries that need a live element. No-op outside any owner.
+ */
+export function onMount(fn) {
+    if (currentOwner)
+        (currentOwner.mounts ?? (currentOwner.mounts = [])).push(fn);
+}
 /** Attach an frp subscription to the current owner's lifecycle. */
 function bind(un) {
     onCleanup(un);
@@ -251,21 +280,26 @@ export function h(tag, props, ...children) {
 // Dynamic regions (§7)
 // ---------------------------------------------------------------------------
 // Build `child` into a fragment under a fresh scope of `owner`. Returns the
-// fragment's top-level nodes and the scope's dispose handle.
+// fragment's top-level nodes, the scope's dispose handle, and a `flush` that
+// runs the scope's pending onMount callbacks (call it after insertion).
 function buildScoped(owner, build) {
-    const s = runUnder(owner, () => scope(() => {
+    const scopeOwner = createOwner(owner);
+    const nodes = runUnder(scopeOwner, () => {
         const built = build();
         // Fast path: a single element/text node (the common row/component case)
         // needs no fragment or NodeList copy.
-        if (built instanceof Node &&
-            built.nodeType !== 11 /* DocumentFragment */) {
+        if (built instanceof Node && built.nodeType !== 11 /* DocumentFragment */) {
             return [built];
         }
         const frag = document.createDocumentFragment();
         appendChild(frag, built);
         return Array.from(frag.childNodes);
-    }));
-    return { nodes: s.value, dispose: s.dispose };
+    });
+    return {
+        nodes,
+        dispose: () => disposeOwner(scopeOwner),
+        flush: () => flushMounts(scopeOwner),
+    };
 }
 /** Conditional / switching subtree: rebuilds on each change of `b`. */
 export function dyn(b, render) {
@@ -305,6 +339,10 @@ export function dyn(b, render) {
         const parent = end.parentNode;
         for (const n of current.nodes)
             parent.insertBefore(n, end);
+        // During the initial build the whole tree flushes at mount; afterwards
+        // each freshly inserted subtree flushes here.
+        if (!owner || owner.mounted)
+            current.flush();
     };
     bind(b.listen(update));
     onCleanup(() => current?.dispose());
@@ -356,6 +394,7 @@ export function each(items, key, render) {
         const seen = new Set();
         const next = [];
         const seq = [];
+        const freshFlushes = [];
         for (const item of list) {
             const k = key(item);
             if (seen.has(k))
@@ -370,6 +409,7 @@ export function each(items, key, render) {
                 const built = buildScoped(owner, () => render(item));
                 next.push({ key: k, nodes: built.nodes, dispose: built.dispose });
                 seq.push(-1);
+                freshFlushes.push(built.flush);
             }
         }
         // dispose rows whose key disappeared
@@ -396,6 +436,9 @@ export function each(items, key, render) {
         if (active instanceof HTMLElement && active.isConnected)
             active.focus();
         rows = next;
+        if (!owner || owner.mounted)
+            for (const f of freshFlushes)
+                f();
     };
     bind(items.listen(update));
     onCleanup(() => {
@@ -477,6 +520,8 @@ export function mount(container, view) {
                 if (n.parentNode)
                     n.parentNode.removeChild(n);
         });
+        if (currentOwner)
+            flushMounts(currentOwner);
         return () => dispose();
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@continuum-js/dom",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Continuum DOM renderer — fine-grained bindings, dynamic regions, ownership, context",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@continuum-js/frp": "0.3.1"
+    "@continuum-js/frp": "0.4.0"
   }
 }