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

package/package.json

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

package/src/core-api.ts

@@ -1,7 +1,7 @@
 // What a feature module may import from the core, and nothing else. In the browser build the core is one shared
 // ESM file and every feature is a separate file that imports these names from it (bundle.ts maps this module to the
 // core URL), so a feature registers on the page's single binder registry and signal graph.
-export { BINDERS, bindHost, bindElement, walkChildren } from './directives/index'
+export { BINDERS, bindHost, bindElement, bindRef, walkChildren } from './directives/index'
 export type { Binder } from './directives/index'
 export { parsed, read, member, mismatch, insideRaw, RAW_SEL } from './directives/common'
 export { hooks, islandHooks, collectionHooks } from './instance'

package/src/directives/for.ts

@@ -4,6 +4,11 @@ type RowScope = Record<string, unknown> & { __own: Signal<number> }
 
 const SYNTAX = /^\s*([A-Za-z_$][\w$]*)\s*(?:,\s*([A-Za-z_$][\w$]*))?\s+in\s+([A-Za-z_$][\w$.]*(?::[A-Za-z_$][\w$]*(?:\s*,\s*[A-Za-z_$][\w$]*)*)?)\s+by\s+([A-Za-z_$][\w$.]*)\s*$/
 const done = new WeakSet<Element>()
+/** The comments this binder inserted: the server's own `<!--x-for-->` marker is not among them. */
+const anchors = new WeakSet<Node>()
+/** F396: the zero-row template is the element the server prints right after its `<!--x-for-->` marker. A row is not
+ * told apart by `hidden`: a row whose own root is `hidden={cond}` is server-rendered hidden and is still a row. */
+const isTemplate = (s: Element) => { const p = s.previousSibling; return p instanceof Comment && p.data === 'x-for' && !anchors.has(p) }
 
 BINDERS.push({
   match: (a) => a === 'x-for',
@@ -17,13 +22,14 @@ BINDERS.push({
     // All server-rendered siblings carrying the same x-for are rows of this list; the first is the template.
     const parent = el.parentElement!
     const siblings = Array.from(parent.children).filter((c) => c.getAttribute('x-for') === raw)
+    const templates = new Set(siblings.filter(isTemplate))
     siblings.forEach((s) => done.add(s))
     const template = el.cloneNode(true) as Element
     template.removeAttribute('x-for'); template.removeAttribute('hidden')
-    const anchor = document.createComment('x-for')
+    const anchor = document.createComment('x-for'); anchors.add(anchor)
     parent.insertBefore(anchor, el)
-    // Server-rendered rows (not the hidden zero-row template) are adopted in order on the first run.
-    const adopt = siblings.filter((s) => !s.hasAttribute('hidden'))
+    // Server-rendered rows (not the zero-row template) are adopted in order on the first run.
+    const adopt = siblings.filter((s) => !templates.has(s))
     if (!adopt.includes(el)) el.remove()
     let firstRun = true
 

package/src/directives/index.ts

@@ -16,11 +16,21 @@ export function walkChildren(inst: Instance, el: Element, scope: Scope): void {
   for (const child of Array.from(el.children)) {
     if ('__scope' in child) continue                          // x-for row: already bound with its own scope
     if (child.hasAttribute('x-for')) { bindElement(inst, child, scope); continue } // x-for owns the element (even when it is also a host)
-    if (child.hasAttribute(HOST_ATTR)) continue               // nested host: its own instance binds it
+    if (child.hasAttribute(HOST_ATTR)) {                       // nested host: its own instance binds it,
+      const pref = child.getAttribute('x-pref')                // but the ref its caller passed is the caller's (F267/F288)
+      if (pref) bindRef(inst, child, pref)
+      continue
+    }
     bindElement(inst, child, scope)
     if (!child.hasAttribute('x-if')) walkChildren(inst, child, scope)   // x-if owns its subtree
   }
 }
+/** `x-ref` / `x-pref`: the instance's ref cell `name` holds `el` while it is bound. */
+export function bindRef(inst: Instance, el: Element, name: string): void {
+  const r = inst.ref(name.trim())
+  r.current = el as HTMLElement
+  inst.onCleanup(() => { if (r.current === el) r.current = null })
+}
 export function bindElement(inst: Instance, el: Element, scope: Scope): void {
   // Structural directives own the element: x-for/x-if re-create it from a template, so the
   // remaining attributes are bound on the clones (with the right scope), never on this original.

package/src/directives/ref.ts

@@ -1,9 +1,5 @@
-import { BINDERS } from '../core-api'
+import { BINDERS, bindRef } from '../core-api'
 BINDERS.push({
   match: (a) => a === 'x-ref',
-  bind: ({ inst, el, raw }) => {
-    const r = inst.ref(raw.trim())
-    r.current = el as HTMLElement
-    inst.onCleanup(() => { if (r.current === el) r.current = null })
-  },
+  bind: ({ inst, el, raw }) => bindRef(inst, el, raw),
 })

package/src/instance.ts

@@ -27,7 +27,7 @@ export class Instance {
    * first paint, linked to its parent's current value): its first bind is not a first paint, so no tripwire. */
   reseeded = false
   /** Effects the component declared while its factory ran: they start once the instance is bound (x-ref, x-on), like React's commit (F97). */
-  private pending: Array<[() => void | (() => void), Dispose?]> | null = []
+  private pending: Array<[() => void | (() => void), Dispose?, number?]> | null = []
 
   constructor(public host: HTMLElement, public name: string, public parent: Instance | null, initialProps: Record<string, unknown>) {
     this.props = signal(initialProps)
@@ -35,13 +35,15 @@ export class Instance {
     if (typeof __BRUST_DEV__ !== 'undefined' && __BRUST_DEV__) devTrack(this, true)
   }
 
-  effect(fn: () => void | (() => void)): Dispose {
-    const d = coreEffect(fn); this.disposers.push(d); return d
+  effect(fn: () => void | (() => void), tier = 0): Dispose {
+    const d = coreEffect(fn, tier); this.disposers.push(d); return d
   }
-  /** `ctx.effect`: deferred until `start()` while the factory runs, immediate afterwards. */
-  private componentEffect(fn: () => void | (() => void)): Dispose {
-    if (!this.pending) return this.effect(fn)
-    const q: [() => void | (() => void), Dispose?] = [fn]
+  /** `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). */
+  private componentEffect(fn: () => void | (() => void), layout = false): Dispose {
+    const tier = layout ? 1 : 2
+    if (!this.pending) return this.effect(fn, tier)
+    const q: [() => void | (() => void), Dispose?, number?] = [fn, undefined, tier]
     this.pending.push(q)
     return () => { q[0] = () => {}; q[1]?.() }
   }
@@ -57,7 +59,7 @@ export class Instance {
     this.pending = null
     for (const q of queue ?? []) {
       if (this.disposed) break
-      try { q[1] = this.effect(q[0]) }
+      try { q[1] = this.effect(q[0], q[2]) }
       catch (e) { console.error(`[brust] effect threw: ${this.name}`, e); this.dispose(); instances.delete(this.host); return false }
     }
     return true
@@ -70,7 +72,7 @@ export class Instance {
     return r as { current: E | null }
   }
   ctx(): BehaviorCtx {
-    return { el: this.host, props: this.props, effect: (fn) => this.componentEffect(fn), onCleanup: (fn) => this.onCleanup(fn), ref: (n, init) => this.ref(n, init), late: this.late, items: () => collectionHooks.items(this.host) }
+    return { el: this.host, props: this.props, effect: (fn, layout) => this.componentEffect(fn, layout), onCleanup: (fn) => this.onCleanup(fn), ref: (n, init) => this.ref(n, init), late: this.late, items: () => collectionHooks.items(this.host) }
   }
   init(factory: BehaviorFactory): void {
     const m = factory(this.ctx())

package/src/registry.ts

@@ -3,7 +3,7 @@ import type { Dispose, Signal } from './signal'
 export interface BehaviorCtx {
   el: HTMLElement
   props: Signal<Record<string, unknown>>
-  effect: (fn: () => void | (() => void)) => Dispose
+  effect: (fn: () => void | (() => void), layout?: boolean) => Dispose
   onCleanup: (fn: () => void) => void
   ref: <E extends Element = HTMLElement>(name: string, init?: unknown) => { current: E | null }
   /** True when this instance mounted after the page booted (an x-if clone, an x-for row, a navigation): nothing of it was server-rendered. */

package/src/signal.ts

@@ -1,7 +1,7 @@
 // A small push-pull reactive core. Signals push "dirty" to subscribers; computeds pull lazily.
 type Subscriber = { mark(): void; deps: Set<Node> }
 type Node = { subs: Set<Subscriber> }
-type Runnable = { disposed: boolean; run(): void }
+type Runnable = { disposed: boolean; run(): void; tier?: number; id?: number }
 interface ReactiveCtx { currentSub: Subscriber | null; batchDepth: number; pending: Set<Runnable> }
 
 const CTX = Symbol.for('brust.reactive.ctx')          // M3-F C7
@@ -23,8 +23,13 @@ function flush() {
   if (ctx.batchDepth > 0) return
   const pending = ctx.pending
   while (pending.size) {
-    const batch = Array.from(pending); pending.clear()
-    for (const e of batch) if (!e.disposed) e.run()
+    // F288 (ruling 94404307 amended): a re-run follows React's commit order: every binding of the change (tier 0, in
+    // notify order), then compiled layout effects (1), then compiled passive effects (2), each in declaration order.
+    const all = Array.from(pending)
+    const t = Math.min(...all.map((e) => e.tier || 0))
+    // a stable sort: bindings (t = 0) keep their notify order
+    const run = all.filter((e) => (e.tier || 0) === t).sort((a, b) => t && a.id! - b.id!)
+    for (const e of run) pending.delete(e), e.disposed || e.run()
   }
 }
 
@@ -67,9 +72,11 @@ export function computed<T>(fn: () => T): Computed<T> {
 // Cleanups run untracked: a read inside one must not subscribe whichever effect is running around it.
 function runCleanup(c: () => void) { const prev = ctx.currentSub; ctx.currentSub = null; try { c() } finally { ctx.currentSub = prev } }
 
+let ids = 0
 class EffectImpl implements Subscriber {
   deps = new Set<Node>(); disposed = false; cleanup: void | (() => void) = undefined
-  constructor(private fn: () => void | (() => void)) {}
+  readonly id = ++ids
+  constructor(private fn: () => void | (() => void), readonly tier = 0) {}
   mark() { ctx.pending.add(this) }
   run() {
     if (this.disposed) return
@@ -86,8 +93,9 @@ class EffectImpl implements Subscriber {
   }
 }
 
-export function effect(fn: () => void | (() => void)): Dispose {
-  const e = new EffectImpl(fn)
+/** `tier`: 0 a binding, 1 a compiled layout effect, 2 a compiled passive effect (the order of re-runs). */
+export function effect(fn: () => void | (() => void), tier = 0): Dispose {
+  const e = new EffectImpl(fn, tier)
   try { e.run() } catch (x) { e.dispose(); throw x }   // F98: a first run that throws must not stay subscribed
   return () => e.dispose()
 }