@brust/runtime-dom 2.0.0-alpha.22 → 2.0.0-alpha.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brust/runtime-dom",
-  "version": "2.0.0-alpha.22",
+  "version": "2.0.0-alpha.24",
   "type": "module",
   "exports": {
     ".": {

package/src/directives/for.ts

@@ -33,6 +33,9 @@ BINDERS.push({
     if (!adopt.includes(el)) el.remove()
     let firstRun = true
 
+    // F415: a removed row's effects and cleanups go with it (they were bound under `inst.capture`).
+    const drops = new Map<Element, () => void>()
+    const drop = (n: Element) => { drops.get(n)?.(); drops.delete(n); n.remove() }
     let rows = new Map<unknown, Element[]>()  // key -> elements (array to tolerate duplicates)
     let order: Element[] = []
 
@@ -71,12 +74,12 @@ BINDERS.push({
           const rowScope: RowScope = { ...scope, [itemName]: item, ...(indexName ? { [indexName]: i } : {}), __own: own, __tick: computed(() => (outer ? outer() : 0) + own()) }
           ;(node as unknown as { __scope: RowScope }).__scope = rowScope
           // a row that is itself a nested host is bound by its own instance
-          if (!node.hasAttribute('x-data')) { bindElement(inst, node, rowScope); walkChildren(inst, node, rowScope) }
+          if (!node.hasAttribute('x-data')) { const n = node; drops.set(n, inst.capture(() => { bindElement(inst, n, rowScope); walkChildren(inst, n, rowScope) })) }
         }
         ;(next.get(key) ?? next.set(key, []).get(key)!).push(node)
         nextOrder.push(node)
       })
-      for (const [, pool] of rows) for (const stale of pool) stale.remove()
+      for (const [, pool] of rows) for (const stale of pool) drop(stale)
       for (const left of adopt.splice(0)) left.remove()
       firstRun = false
       // place in order after the anchor
@@ -85,6 +88,6 @@ BINDERS.push({
       rows = next; order = nextOrder
       for (const n of created) hooks.mountTree(n)   // nested hosts in new rows mount now, not on the observer's next tick
     })
-    inst.onCleanup(() => { for (const n of order) n.remove() })
+    inst.onCleanup(() => { for (const n of order) drop(n) })
   },
 })

package/src/directives/if.ts

@@ -1,4 +1,11 @@
 import { BINDERS, bindElement, walkChildren, parsed, read, hooks } from '../core-api'
+/** The callback refs of the branch being inserted: attached once its whole subtree is bound and mounted (React attaches
+ * refs in the commit, after the DOM is placed and before layout effects). An inner branch inserted with it hands its
+ * refs over, so the outermost attaches them all in DOM post-order (children first, as React's commit does). */
+type Attach = [el: Element, on: () => void]
+let attach: Attach[] | null = null
+/** `a` first when `b` contains it (8) or follows it (4) without being inside it (16). */
+const postOrder = ([a]: Attach, [b]: Attach) => { const p = a.compareDocumentPosition(b); return p & 8 || (p & 20) === 4 ? -1 : 1 }
 BINDERS.push({
   match: (a) => a === 'x-if',
   bind: ({ inst, el, attr, raw, scope }) => {
@@ -8,18 +15,46 @@ BINDERS.push({
     template.removeAttribute('x-if'); template.removeAttribute('hidden')
     el.replaceWith(anchor)                 // the server-rendered element becomes the first clone below
     let current: Element | null = null
+    // F415/F416: what the branch bound (its effects, its x-ref) is let go before the element leaves, as React detaches
+    // a removed host's refs in the same commit.
+    let drop = () => {}
+    const remove = () => { drop(); drop = () => {}; current?.remove(); current = null }   // the observer disposes nested hosts
     inst.effect(() => {
       const r = read(inst, p, scope, attr); if (!r.ok) return
       const want = Boolean(r.value)
       if (want && !current) {
-        current = template.cloneNode(true) as Element
-        anchor.after(current)
-        bindElement(inst, current, scope); walkChildren(inst, current, scope)
-        hooks.mountTree(current)
-      } else if (!want && current) {
-        current.remove(); current = null   // the observer disposes nested hosts
-      }
+        const node = (current = template.cloneNode(true) as Element)
+        anchor.after(node)
+        const outer = attach; const mine: Attach[] = (attach = [])
+        try {
+          // nested hosts mount inside the capture too: an `x-cref` on one registers its detach on this branch
+          drop = inst.capture(() => { bindElement(inst, node, scope); walkChildren(inst, node, scope); hooks.mountTree(node) })
+        } finally { attach = outer }
+        if (outer) outer.push(...mine)
+        else for (const [, on] of mine.sort(postOrder)) on()
+      } else if (!want && current) remove()
     })
-    inst.onCleanup(() => { current?.remove() })
+    inst.onCleanup(remove)
+  },
+})
+// F288 phase B (G5): `x-cref="cell"`, a callback ref inside a branch. The cell holds the callback (or a ref object); it
+// gets the node when the branch is inserted and `null` (or the callback's returned cleanup) when it is removed. On a
+// nested host the host's own instance meets it while it mounts, inside the branch's capture. (A host whose behavior
+// chunk is not loaded yet binds later through whenBehavior, outside the capture: it attaches at once and detaches only
+// with the owner, not the branch: reachable only if an inlined child's root can have its behavior in another chunk.)
+BINDERS.push({
+  match: (a) => a === 'x-cref',
+  bind: ({ inst, el, raw }) => {
+    // on a nested host (an inlined native child's root) the cell is the caller's, as `x-pref`'s is
+    const owner = el === inst.host ? inst.parent : inst
+    if (!owner) return
+    const r = owner.ref(raw.trim()).current as unknown
+    let off: (() => void) | void
+    owner.onCleanup(() => { off?.(); off = undefined })
+    const on = () => {
+      if (typeof r === 'function') { const c = r(el); off = typeof c === 'function' ? c : () => r(null) }
+      else if (r) { (r as { current: unknown }).current = el; off = () => { (r as { current: unknown }).current = null } }
+    }
+    attach ? attach.push([el, on]) : on()
   },
 })

package/src/instance.ts

@@ -18,6 +18,8 @@ export class Instance {
   children = new Set<Instance>()
   private disposers: Dispose[] = []
   private cleanups: Array<() => void> = []
+  /** F415: while an `x-if` branch or an `x-for` row binds, what it registers is owned by that part (`capture`). */
+  private sink: Array<() => void> | null = null
   disposed = false
   /** false until the initial bind pass finishes; the first-paint tripwire only applies before then. */
   booted = false
@@ -36,7 +38,7 @@ export class Instance {
   }
 
   effect(fn: () => void | (() => void), tier = 0): Dispose {
-    const d = coreEffect(fn, tier); this.disposers.push(d); return d
+    const d = coreEffect(fn, tier); (this.sink ?? this.disposers).push(d); return d
   }
   /** `ctx.effect`: deferred until `start()` while the factory runs, immediate afterwards. A compiled effect re-runs after
    * the bindings: layout (`layout` true) before passive (F288, ruling 94404307 amended). */
@@ -64,7 +66,15 @@ export class Instance {
     }
     return true
   }
-  onCleanup(fn: () => void): void { this.cleanups.push(fn) }
+  onCleanup(fn: () => void): void { (this.sink ?? this.cleanups).push(fn) }
+  /** F415/F416: runs `fn` with the effects and cleanups it registers owned by the returned disposer, which an `x-if`
+   * branch or an `x-for` row runs when it is removed: its effects stop and its cleanups run (an `x-ref` lets go of the
+   * node), in the order they were registered. */
+  capture(fn: () => void): () => void {
+    const prev = this.sink; const own: Array<() => void> = (this.sink = [])
+    try { fn() } finally { this.sink = prev }
+    return () => runCleanups(own)
+  }
   ref<E extends Element = HTMLElement>(name: string, init?: unknown): { current: E | null } {
     let r = this.refs.get(name)
     // `useRef(init)`: the cell starts at `init`; an `x-ref` element replaces it when it binds (React attaches the same way).
@@ -87,10 +97,14 @@ export class Instance {
     for (const c of Array.from(this.children)) c.dispose()
     this.parent?.children.delete(this)
     for (const d of this.disposers.splice(0)) d()
-    for (const c of this.cleanups.splice(0)) { try { c() } catch (e) { console.error('[brust] cleanup threw', e) } }
+    runCleanups(this.cleanups)
   }
 }
 
+function runCleanups(list: Array<() => void>): void {
+  for (const c of list.splice(0)) { try { c() } catch (e) { console.error('[brust] cleanup threw', e) } }
+}
+
 export const instances = new WeakMap<Element, Instance>()
 export function instanceOf(el: Element): Instance | undefined { return instances.get(el) }
 /** Instance of the nearest ancestor HOST. A host that has not mounted yet (chunk loading) yields null: wait, never skip to a farther ancestor. */