@brust/runtime-dom 2.0.0-alpha.15 → 2.0.0-alpha.17

package/package.json

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

package/src/core-api.ts

@@ -4,7 +4,8 @@
 export { BINDERS, bindHost, bindElement, walkChildren } from './directives/index'
 export type { Binder } from './directives/index'
 export { parsed, read, member, mismatch, insideRaw, RAW_SEL } from './directives/common'
-export { hooks, islandHooks } from './instance'
+export { hooks, islandHooks, collectionHooks } from './instance'
+export type { CollectionItem } from './instance'
 export { warnOnce } from './warn'
 export { signal, computed, effect, batch, untracked, isSignal, isComputed } from './signal'
 export type { Signal, Computed, Dispose } from './signal'

package/src/directives/bind.ts

@@ -15,20 +15,23 @@ BINDERS.push({
       const r = read(inst, p, scope, attr); if (!r.ok) return
       const v = r.value
       // setAttribute: `className` is a getter-only SVGAnimatedString on SVG elements (F96a).
-      if (name === 'class') { el.setAttribute('class', v == null ? '' : String(v)); return }
+      // F311: undefined/null removes `class` (React does; `className=""` keeps an empty one), and an empty `style` is no attribute (the first paint omits it)
+      if (name === 'class') { if (v == null) el.removeAttribute('class'); else el.setAttribute('class', `${v}`); return }
       if (name === 'value' && 'value' in el) { (el as HTMLInputElement).value = v == null ? '' : String(v); return }
-      if (BOOLEAN.has(name)) {
+      // React passes every attribute of a custom element (a tag with `-`) through as given: `true` is ``, `false` omits it.
+      const custom = el.localName.includes('-')
+      if (!custom && BOOLEAN.has(name)) {
         const on = Boolean(v)
         if (name in el) (el as unknown as Record<string, unknown>)[name] = on
         if (on) el.setAttribute(name, '') ; else el.removeAttribute(name)
         return
       }
       // aria-*, data-* and the booleanish strings print `true`/`false`; download/capture print `true` as ``; on any other attribute React omits a boolean.
-      if (name.startsWith('aria-') || name.startsWith('data-') || STRINGIFY.has(name)) { if (v == null) el.removeAttribute(name); else el.setAttribute(name, String(v)); return }
-      if (OVERLOADED.has(name) && typeof v === 'boolean') { if (v) el.setAttribute(name, ''); else el.removeAttribute(name); return }
-      if (v == null || typeof v === 'boolean') { el.removeAttribute(name); return }
+      if (!custom && (name.startsWith('aria-') || name.startsWith('data-') || STRINGIFY.has(name))) { if (v == null) el.removeAttribute(name); else el.setAttribute(name, String(v)); return }
+      if ((custom || OVERLOADED.has(name)) && typeof v === 'boolean') { if (v) el.setAttribute(name, ''); else el.removeAttribute(name); return }
+      if (v == null || typeof v === 'boolean' || (name === 'style' && !v)) { el.removeAttribute(name); return }
       // React writes no `src=""` / `href=""` (it would load the page again); an anchor keeps its empty href.
-      if (v === '' && (name === 'src' || name === 'href') && el.localName !== 'a') { el.removeAttribute(name); return }
+      if (v === '' && (name === 'src' || name === 'href') && el.localName !== 'a' && !custom) { el.removeAttribute(name); return }
       if (URL_ATTRS.has(name) && !safeUrl(String(v))) { warnOnce(`b:${inst.name}:${name}`, `${attr} in ${inst.name}: unsafe URL refused`); return }
       el.setAttribute(name, String(v))
     })

package/src/directives/common.ts

@@ -23,5 +23,6 @@ export function member(inst: Instance, p: ParsedValue, attr: string): unknown {
 }
 export function mismatch(inst: Instance, attr: string, _el: Element, server: unknown, client: unknown): void {
   if (inst.booted) return   // element created after mount (new x-for row / x-if clone): nothing was server-rendered
+  if (inst.reseeded) return   // F277: a host created later, started from its parent's current props, not the printed ones
   warnOnce(`x:${inst.name}:${attr}`, `first-paint mismatch ${attr} in ${inst.name}: ${JSON.stringify(server)} vs ${JSON.stringify(client)}`)
 }

package/src/features/collection.ts

@@ -0,0 +1,40 @@
+// The collection feature (R34.140-R34.141): the items a Radix `createCollection` tracks, as the DOM already has them.
+// A root is an element with `x-collection-root`; an item is an element with `data-radix-collection-item` whose NEAREST root
+// above it is that root (a collection nested inside another keeps its items to itself). Document order is the DOM's own,
+// so there is no registry to sort. An item's data (`id`, `focusable`, ...) is what its host's `x-collection-item` member
+// evaluates to when asked: read at call time, so it is never stale.
+import { BINDERS, collectionHooks, parsed, read, RAW_SEL } from '../core-api'
+import type { CollectionItem } from '../core-api'
+
+const ROOT = '[x-collection-root]'
+const ITEM = '[data-radix-collection-item]'
+const DATA = new WeakMap<Element, () => unknown>()
+
+collectionHooks.items = (from) => {
+  const root = from.closest(ROOT)
+  if (!root) return []
+  const out: CollectionItem[] = []
+  for (const el of Array.from(root.querySelectorAll(ITEM))) {
+    // the nearest root ABOVE the item (not the item itself, which may be a root of its own)
+    if (el.parentElement?.closest(ROOT) !== root) continue
+    // an island or raw markup (x-html / x-raw) between the root and the item is inert: its items are not this collection's
+    // (Radix keeps only the nodes registered through its own context, never what a foreign widget or CMS markup holds)
+    const raw = el.parentElement?.closest(RAW_SEL)
+    if (raw && root.contains(raw)) continue
+    const d = DATA.get(el)?.()
+    out.push({ ...(d && typeof d === 'object' ? (d as object) : {}), ref: { current: el }, element: el })
+  }
+  return out
+}
+
+// markers: a root, and a host that reads `ctx.items()` (so the module loads for it); neither binds anything
+BINDERS.push({ match: (a) => a === 'x-collection-root' || a === 'x-collection-use', bind: () => {} })
+BINDERS.push({
+  match: (a) => a === 'x-collection-item',
+  bind: ({ inst, el, attr, raw, scope }) => {
+    const p = parsed(inst, attr, raw)
+    if (!p) return
+    DATA.set(el, () => { const r = read(inst, p, scope, attr); return r.ok ? r.value : undefined })
+    inst.onCleanup(() => DATA.delete(el))
+  },
+})

package/src/features/index.ts

@@ -6,3 +6,4 @@ import './for'
 import './model'
 import './html'
 import './island'
+import './collection'

package/src/instance.ts

@@ -21,6 +21,11 @@ export class Instance {
   disposed = false
   /** false until the initial bind pass finishes; the first-paint tripwire only applies before then. */
   booted = false
+  /** Mounted after the page booted: nothing of it was in the server markup (`BehaviorCtx.late`). */
+  late = false
+  /** F277: started from props other than the ones its markup was printed with (a host an `x-if` or a row created after
+   * 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 = []
 
@@ -65,7 +70,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) }
+    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) }
   }
   init(factory: BehaviorFactory): void {
     const m = factory(this.ctx())
@@ -95,5 +100,10 @@ export function nearestInstance(el: Element): Instance | null {
 /** Late-bound by mount.ts so binders (x-if, x-for) can mount nested hosts synchronously without an import cycle. */
 export const hooks: { mountTree: (root: ParentNode) => void } = { mountTree: () => {} }
 
+/** One item of a collection (R34.141): the data its host handed over, the element, and `ref.current` (Radix's item shape). */
+export type CollectionItem = { ref: { current: Element }; element: Element } & Record<string, unknown>
+/** Late-bound by the `collection` feature (features/collection.ts): `ctx.items()` is a no-op list until it loads. */
+export const collectionHooks: { items: (from: Element) => CollectionItem[] } = { items: () => [] }
+
 /** Late-bound by the `island` feature (features/island.ts) so a page without React islands never loads the hydration glue. */
 export const islandHooks: { schedule: (root: ParentNode) => void; cancel: (root: Node) => void } = { schedule: () => {}, cancel: () => {} }

package/src/mount.ts

@@ -4,9 +4,13 @@ import { whenBehavior } from './registry'
 import { bindHost } from './directives/index'
 import { insideRaw } from './directives/common'
 import { warnOnce } from './warn'
-import { bindPropsFromParent } from './props-bind'
+import { bindPropsFromParent, initialProps } from './props-bind'
 
 let observer: MutationObserver | null = null
+/** True once the first `mount()` pass has run: a host that mounts after it is `late`. */
+let pageBooted = false
+/** > 0 while a binder (x-if, x-for) mounts the hosts of a clone it just created: nothing of them was server-rendered. */
+let cloning = 0
 
 function readProps(host: HTMLElement): Record<string, unknown> {
   const raw = host.getAttribute('x-props')
@@ -15,13 +19,26 @@ function readProps(host: HTMLElement): Record<string, unknown> {
   catch { warnOnce(`j:${host.outerHTML.slice(0, 80)}`, `bad x-props JSON in ${host.getAttribute('x-data')}`); return {} }
 }
 
+function sameJson(a: unknown, b: unknown): boolean {
+  try { return JSON.stringify(a) === JSON.stringify(b) } catch { return false }
+}
+
 function mountHost(host: HTMLElement): void {
   if (instances.has(host) || !host.isConnected) return
   const name = host.getAttribute('x-data')!
+  // decided now, not when a lazy chunk arrives: a server-rendered host stays hydrated however late its code loads
+  const late = pageBooted
+  const cloned = cloning > 0
   whenBehavior(name, (factory) => {
     if (instances.has(host) || !host.isConnected) return
     const parent = nearestInstance(host)
-    const inst = new Instance(host, name, parent, readProps(host))
+    const printed = readProps(host)
+    const props = initialProps(host, parent, printed)
+    const inst = new Instance(host, name, parent, props)
+    inst.reseeded = props !== printed && !sameJson(props, printed)
+    inst.late = late
+    // a clone made by a binder has no server markup to compare its first paint with (a navigation's content has)
+    inst.booted = cloned
     instances.set(host, inst)
     try { inst.init(factory) } catch (e) { console.error(`[brust] init threw: ${name}`, e); inst.dispose(); instances.delete(host); return }
     bindHost(inst, host, {})
@@ -44,7 +61,11 @@ function mountTree(root: ParentNode): void {
   for (const h of hosts) if (!insideRaw(h)) mountHost(h)
   islandHooks.schedule(root)
 }
-hooks.mountTree = (root) => untracked(() => mountTree(root))
+hooks.mountTree = (root) =>
+  untracked(() => {
+    cloning++
+    try { mountTree(root) } finally { cloning-- }
+  })
 
 function disposeTree(root: Node): void {
   if (!(root instanceof Element)) return
@@ -58,6 +79,7 @@ export function mount(root: ParentNode = document.body): void {
   // Observe first: binders (x-if, x-for) insert nested hosts during the initial pass.
   if (!observer) startObserver(root); else if (root !== observedRoot) observer.observe(root, { childList: true, subtree: true })
   mountTree(root)
+  pageBooted = true
 }
 let observedRoot: ParentNode | null = null
 function startObserver(root: ParentNode): void {

package/src/props-bind.ts

@@ -9,6 +9,16 @@ function scopeOf(el: Element): Record<string, unknown> {
   return {}
 }
 
+/** F277: the props a linked host starts with: its parent's current `x-props-bind` value when the parent is mounted (a
+ * host an `x-if` or a row creates after first paint gets what the parent passes NOW, as React mounts with the current
+ * props: a `useState(prop)` starts from it), else its printed `x-props`. */
+export function initialProps(host: HTMLElement, parent: Instance | null, printed: Record<string, unknown>): Record<string, unknown> {
+  const raw = host.getAttribute('x-props-bind'); if (!raw || !parent) return printed
+  const p = parseValue(raw); if (!p) return printed
+  const r = resolve(parent.members, p, scopeOf(host))
+  return r.ok && r.value && typeof r.value === 'object' ? (r.value as Record<string, unknown>) : printed
+}
+
 export function bindPropsFromParent(inst: Instance): void {
   const raw = inst.host.getAttribute('x-props-bind'); if (!raw) return
   const p = parseValue(raw)

package/src/registry.ts

@@ -6,6 +6,10 @@ export interface BehaviorCtx {
   effect: (fn: () => void | (() => void)) => 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. */
+  late: boolean
+  /** The collection items under the nearest collection root of this instance, in document order (R34.141). */
+  items: () => Array<{ ref: { current: Element }; element: Element } & Record<string, unknown>>
 }
 export type BehaviorInstance = Record<string, unknown>
 export type BehaviorFactory = (ctx: BehaviorCtx) => BehaviorInstance | void