@barefootjs/jsx 0.29.0 → 0.30.2

package/src/__tests__/lazy-conditional.test.ts

@@ -0,0 +1,190 @@
+/**
+ * `analyzeLazyConditional` — the §9.5 "row contains a reactive conditional"
+ * widening (`plan/lazy-conditional.ts`).
+ *
+ * Unit half over hand-built `LoopChildConditional` values so each refusal is
+ * pinned to the exact shape that produces it, plus emission assertions that an
+ * accepted conditional is driven from the apply bodies with its arms hoisted
+ * once per loop. The DOM behaviour (does the swap actually land, both ways)
+ * lives in `packages/client/__tests__/runtime/lazy-row-conditional.test.ts` —
+ * emitted shape and emitted behaviour are different claims.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../index.ts'
+import { TestAdapter } from '../adapters/test-adapter'
+import { analyzeLazyConditional } from '../ir-to-client-js/control-flow/plan/lazy-conditional.ts'
+import type { LoopChildBranchSummary, LoopChildConditional } from '../ir-to-client-js/types.ts'
+
+const bare = (over: Partial<LoopChildBranchSummary> = {}): LoopChildBranchSummary => ({
+  childComponents: [],
+  ...over,
+})
+
+function cond(over: Partial<LoopChildConditional> = {}): LoopChildConditional {
+  return {
+    slotId: 's0',
+    condition: 'row.done',
+    whenTrueHtml: '<span class="yes">done</span>',
+    whenFalseHtml: '<em class="no">open</em>',
+    whenTrue: bare(),
+    whenFalse: bare(),
+    conditionFreeIdentifiers: new Set(['row']),
+    ...over,
+  }
+}
+
+/**
+ * The caller prepares each arm through `addCondAttrToTemplate` before handing it
+ * over — that is where `bf-c` comes from, and where the element-vs-fragment
+ * decision is made. These helpers stand in for it.
+ */
+const asElement = (html: string, slotId = 's0') => html.replace(/^(<\w+)/, `$1 bf-c="${slotId}"`)
+const asFragment = (html: string, slotId = 's0') =>
+  `<!--bf-cond-start:${slotId}-->${html}<!--bf-cond-end:${slotId}-->`
+
+const armsOf = (c: LoopChildConditional) => ({
+  whenTrueHtml: asElement(c.whenTrueHtml, c.slotId),
+  whenFalseHtml: asElement(c.whenFalseHtml, c.slotId),
+})
+
+describe('analyzeLazyConditional — accepted', () => {
+  test('two wiring-free static element arms', () => {
+    const c = cond()
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(true)
+    if (r.lazySafe) {
+      expect(r.facts.whenTrueHtml).toContain('bf-c="s0"')
+      expect(r.facts.condition).toBe('row.done')
+    }
+  })
+})
+
+describe('analyzeLazyConditional — refusals', () => {
+  const wiring: Array<[string, Partial<LoopChildBranchSummary>, RegExp]> = [
+    ['a child component', { childComponents: [{ name: 'X', slotId: null, props: [], children: [] }] }, /child components/],
+    ['an inner loop', { innerLoops: [{} as never] }, /an inner loop/],
+    ['a nested conditional', { conditionals: [{} as never] }, /a nested conditional/],
+    ['events', { events: [{} as never] }, /events/],
+    ['a reactive attr', { reactiveAttrs: [{} as never] }, /reactive attrs/],
+    ['reactive text', { reactiveTexts: [{} as never] }, /reactive text/],
+  ]
+
+  for (const [name, over, reason] of wiring) {
+    test(`the true arm owns ${name}`, () => {
+      const c = cond({ whenTrue: bare(over) })
+      const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+      expect(r.lazySafe).toBe(false)
+      if (!r.lazySafe) expect(r.reason).toMatch(reason)
+    })
+  }
+
+  test('the FALSE arm is checked too, not just the true one', () => {
+    const c = cond({ whenFalse: bare({ events: [{} as never] }) })
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/its false arm owns events/)
+  })
+
+  test('a fragment conditional has no single node to replace', () => {
+    const c = cond()
+    const r = analyzeLazyConditional(c, '__idx', {
+      whenTrueHtml: asFragment('text only'),
+      whenFalseHtml: asElement(c.whenFalseHtml),
+    })
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/fragment conditional/)
+  })
+
+  test('an arm that interpolates a value cannot be hoisted once per loop', () => {
+    const c = cond({ whenTrueHtml: '<span>${row().label}</span>' })
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/interpolates a value/)
+  })
+
+  test('a condition with no analyzable identifier set refuses rather than assumes', () => {
+    const c = cond({ conditionFreeIdentifiers: undefined })
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/no analyzable identifier set/)
+  })
+
+  test('a condition reading the loop index refuses — the apply bodies have none', () => {
+    const c = cond({ conditionFreeIdentifiers: new Set(['row', '__idx']) })
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/reads the loop index parameter '__idx'/)
+  })
+})
+
+// --- emission ---------------------------------------------------------------
+
+function clientJs(source: string, file: string): string {
+  const result = compileJSX(source, file, { adapter: new TestAdapter() })
+  const js = result.files.find(f => f.path.endsWith('.client.js'))
+  if (!js) throw new Error(`no client JS emitted for ${file}`)
+  return js.content
+}
+
+const ROWS = (arm: string) => `
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string; done: boolean }
+export function CondRows(props: { rows: Row[] }) {
+  const [rows, setRows] = createSignal<Row[]>(props.rows)
+  return (
+    <ul>
+      {rows().map(row => (
+        <li key={row.id}>${arm}</li>
+      ))}
+    </ul>
+  )
+}
+`
+
+describe('lazy row emission — wiring-free row conditional', () => {
+  const js = clientJs(
+    ROWS('{row.done ? <span class="yes">done</span> : <em class="no">open</em>}'),
+    'CondRows.tsx',
+  )
+
+  test('the loop is lazy and calls no per-row insert()', () => {
+    expect(js).toContain('mapArrayLazy(')
+    expect(js).not.toMatch(/\bmapArray\(/)
+    expect(js).not.toContain('insert(')
+  })
+
+  test('both arms are parsed once per LOOP, outside every plan body', () => {
+    const beforeCall = js.slice(0, js.indexOf('mapArrayLazy('))
+    expect(beforeCall).toMatch(/const __cbt_l0_s\d+ = document\.createElement\('template'\)/)
+    expect(beforeCall).toMatch(/const __cbf_l0_s\d+ = document\.createElement\('template'\)/)
+  })
+
+  test('createRow only records the dedup boolean — the clone already has the right arm', () => {
+    const createRow = js.slice(js.indexOf('createRow:'), js.indexOf('applyItem:'))
+    expect(createRow).toMatch(/__l\[\d\] = !!\(row\(\)\.done\)/)
+    expect(createRow).not.toContain('replaceWith')
+  })
+
+  test('applyItem swaps by replaceWith and reassigns the ref', () => {
+    const applyItem = js.slice(js.indexOf('applyItem:'), js.indexOf("}, 'l0')"))
+    expect(applyItem).toContain('__c.replaceWith(__n)')
+    // Without this the next flip writes into the node the previous one detached.
+    expect(applyItem).toMatch(/__r\[\d\] = __n/)
+  })
+})
+
+describe('lazy row emission — conditionals that keep the eager path', () => {
+  const cases: Array<[string, string]> = [
+    ['an arm with an event', '{row.done ? <button onClick={() => {}}>x</button> : <em>open</em>}'],
+    ['an arm reading the item', '{row.done ? <span>{row.label}</span> : <em>open</em>}'],
+    ['a bare-value ternary (fragment form)', '{row.done ? "yes" : "no"}'],
+  ]
+  for (const [name, arm] of cases) {
+    test(name, () => {
+      const js = clientJs(ROWS(arm), 'EagerCond.tsx')
+      expect(js).not.toContain('mapArrayLazy(')
+    })
+  }
+})

package/src/__tests__/lazy-preamble.test.ts

@@ -0,0 +1,297 @@
+/**
+ * `analyzeLazyPreamble` — the §9.5 "row has a map-callback preamble"
+ * widening (`plan/lazy-preamble.ts`).
+ *
+ * Two layers, same split as `lazy-row-eligibility.test.ts`:
+ *
+ *  1. Unit tests over hand-built `MapCallbackPreamble` values, so each
+ *     refusal reason is pinned to the exact source shape that produces it —
+ *     a refusal that silently changes wording or scope fails here.
+ *  2. End-to-end emission: a component whose loop has a value-only preamble
+ *     must now emit `mapArrayLazy`, with the preamble in `createRow` and
+ *     nowhere else. That placement is the whole soundness argument (the apply
+ *     bodies must never reference a preamble local), so it is asserted
+ *     directly rather than inferred from "it compiled".
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../index.ts'
+import { TestAdapter } from '../adapters/test-adapter'
+import { analyzeLazyPreamble } from '../ir-to-client-js/control-flow/plan/lazy-preamble.ts'
+import { tsxSourceText, type MapCallbackPreamble } from '../types.ts'
+
+function preamble(text: string, declaredNames: string[], builderNames: string[] = []): MapCallbackPreamble {
+  return {
+    segments: [{ kind: 'js', text }],
+    ssrText: tsxSourceText(text),
+    declaredNames,
+    builderNames,
+  }
+}
+
+const SIGNALS: ReadonlySet<string> = new Set(['selected', 'filter'])
+
+describe('analyzeLazyPreamble — accepted', () => {
+  test('no preamble at all', () => {
+    expect(analyzeLazyPreamble(undefined, '__idx', SIGNALS).lazySafe).toBe(true)
+  })
+
+  test('const declarations reading only the item', () => {
+    const r = analyzeLazyPreamble(preamble("const full = `${row.a} ${row.b}`;", ['full']), '__idx', SIGNALS)
+    expect(r.lazySafe).toBe(true)
+    if (r.lazySafe) expect([...r.facts.declaredNames]).toEqual(['full'])
+  })
+
+  test('a zero-arg signal read is allowed — the krausest shape', () => {
+    const r = analyzeLazyPreamble(
+      preamble("const cls = selected() === row.id ? 'danger' : '';", ['cls']),
+      '__idx',
+      SIGNALS,
+    )
+    expect(r.lazySafe).toBe(true)
+  })
+
+  test('a destructuring const contributes every bound name, not the property keys', () => {
+    const r = analyzeLazyPreamble(preamble('const { a, b: [c] } = row;', ['a', 'c']), '__idx', SIGNALS)
+    expect(r.lazySafe).toBe(true)
+    if (r.lazySafe) expect([...r.facts.declaredNames].sort()).toEqual(['a', 'c'])
+  })
+})
+
+describe('analyzeLazyPreamble — refusals', () => {
+  const cases: Array<[string, MapCallbackPreamble, RegExp]> = [
+    [
+      'a signal declared per row',
+      preamble('const [x, setX] = createSignal(0);', ['x', 'setX']),
+      /call to createSignal/,
+    ],
+    [
+      'a memo declared per row',
+      preamble('const total = createMemo(() => row.a + row.b);', ['total']),
+      /call to createMemo/,
+    ],
+    [
+      'a non-signal call — could hide a reactive accessor',
+      preamble('const on = isSelected(row.id);', ['on']),
+      /call to isSelected/,
+    ],
+    [
+      'a method call on the item',
+      preamble("const tags = row.tags.join(', ');", ['tags']),
+      /call to row\.tags\.join/,
+    ],
+    [
+      'a nondeterministic call would differ between createRow and applyItem',
+      preamble('const n = Math.random();', ['n']),
+      /call to Math\.random/,
+    ],
+    [
+      'a signal getter called with arguments is not a plain read',
+      preamble('const v = selected(row.id);', ['v']),
+      /call to selected/,
+    ],
+    ['a mutable binding', preamble("let cls = '';", ['cls']), /mutable binding/],
+    [
+      'a statement that is not a declaration',
+      preamble("const a = row.a; console.log(a);", ['a']),
+      /non-declaration statement/,
+    ],
+    [
+      'an arrow expression — fresh identity per run',
+      preamble('const fn = (x) => x + row.a;', ['fn']),
+      /function or class expression/,
+    ],
+    ['a new expression', preamble('const d = new Foo(row.a);', ['d']), /new expression/],
+    [
+      'a JSX-leaf accumulator',
+      preamble('const cells = [];', ['cells'], ['cells']),
+      /accumulates JSX leaves/,
+    ],
+    [
+      'a preamble local shadowing a signal getter',
+      preamble('const selected = row.sel;', ['selected']),
+      /shadows the signal\/memo getter 'selected'/,
+    ],
+    [
+      'a preamble reading the loop index',
+      preamble('const n = __idx + 1;', ['n']),
+      /reads the loop index parameter '__idx'/,
+    ],
+  ]
+
+  for (const [name, p, reason] of cases) {
+    test(name, () => {
+      const r = analyzeLazyPreamble(p, '__idx', SIGNALS)
+      expect(r.lazySafe).toBe(false)
+      if (!r.lazySafe) expect(r.reason).toMatch(reason)
+    })
+  }
+
+  test('a JSX segment is refused even with no builder name', () => {
+    const p: MapCallbackPreamble = {
+      segments: [{ kind: 'jsx', ir: { type: 'text', value: 'x' } as never }],
+      ssrText: tsxSourceText(''),
+      declaredNames: [],
+      builderNames: [],
+    }
+    const r = analyzeLazyPreamble(p, '__idx', SIGNALS)
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/JSX leaf/)
+  })
+})
+
+// --- emission ---------------------------------------------------------------
+
+function clientJs(source: string, file: string): string {
+  const result = compileJSX(source, file, { adapter: new TestAdapter() })
+  const js = result.files.find(f => f.path.endsWith('.client.js'))
+  if (!js) throw new Error(`no client JS emitted for ${file}`)
+  return js.content
+}
+
+/**
+ * The preamble computes an attribute value from the item and an outer signal.
+ * An attribute reading a preamble local is not classified as reactive, so it
+ * lands in the row TEMPLATE — which is exactly why `createRow` needs the
+ * preamble and the apply bodies do not.
+ */
+const VALUE_PREAMBLE = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string; done: boolean }
+export function PreambleRows() {
+  const [rows, setRows] = createSignal<Row[]>([])
+  const [selected, setSelected] = createSignal(0)
+  return (
+    <tbody>
+      {rows().map(row => {
+        const cls = selected() === row.id ? 'danger' : (row.done ? 'done' : '')
+        return (
+          <tr key={row.id} className={cls}>
+            <td>{row.label}</td>
+          </tr>
+        )
+      })}
+    </tbody>
+  )
+}
+`
+
+describe('lazy row emission — value-only preamble', () => {
+  const js = clientJs(VALUE_PREAMBLE, 'PreambleRows.tsx')
+
+  test('the loop is lazy — a preamble no longer refuses on sight', () => {
+    expect(js).toContain('mapArrayLazy(')
+    expect(js).not.toMatch(/\bmapArray\(/)
+  })
+
+  test('rows still carry no per-row reactive resources', () => {
+    const planBody = js.slice(js.indexOf('mapArrayLazy('), js.indexOf("}, 'l0')"))
+    expect(planBody).not.toContain('createEffect')
+    expect(planBody).not.toContain('createRoot')
+    expect(planBody).not.toContain('createSignal')
+  })
+
+  test('createRow runs the preamble, before the clone the template needs it for', () => {
+    const createRow = js.slice(js.indexOf('createRow:'), js.indexOf('applyItem:'))
+    expect(createRow).toContain('const cls = selected() === row().id')
+    expect(createRow.indexOf('const cls =')).toBeLessThan(createRow.indexOf('const __el ='))
+  })
+
+  test('applyOuter re-runs the preamble AND primes what it reads', () => {
+    // `className={cls}` is a binding as of the #2447 follow-up, and `cls`
+    // reads `selected()` — an OUTER signal the local names nowhere. The
+    // classifier substitutes the preamble's free identifiers, so `selected`
+    // reaches the prime list; without that the loop-level effect would
+    // subscribe to nothing and the class would never update.
+    // Bounded at the plan's closing `}, 'l0')` — past that sits the
+    // `hydrate` template, which legitimately contains the preamble.
+    const plan = js.slice(js.indexOf('mapArrayLazy('), js.indexOf("}, 'l0')"))
+    const applyOuter = plan.slice(plan.indexOf('applyOuter:'))
+    expect(applyOuter).toContain('const cls = selected() === row().id')
+    // The prime statement sits ABOVE the per-entry loop, so the effect
+    // subscribes even while the entry list is empty.
+    expect(applyOuter.indexOf('selected()')).toBeLessThan(applyOuter.indexOf('for (const __e of __es)'))
+  })
+
+  test('applyItem re-runs it too — this binding reads the item as well', () => {
+    // `selected() === row().id ? … : (row().done ? …)` reads BOTH, so the
+    // binding lands in both bodies and both need the local. Asserted
+    // explicitly rather than left implicit: "which bodies" is the whole
+    // per-binding accounting.
+    const plan = js.slice(js.indexOf('mapArrayLazy('), js.indexOf("}, 'l0')"))
+    const applyItem = plan.slice(plan.indexOf('applyItem:'), plan.indexOf('applyOuter:'))
+    expect(applyItem).toContain('const cls = selected() === row().id')
+  })
+
+  test('a preamble NO binding reads is emitted in createRow only', () => {
+    // The counterpart: on-demand means a body with no reader pays nothing.
+    const js2 = clientJs(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string }
+export function UnreadPreamble() {
+  const [rows, setRows] = createSignal<Row[]>([])
+  return (
+    <tbody>
+      {rows().map(row => {
+        const unused = row.label
+        return <tr key={row.id}><td>{row.label}</td></tr>
+      })}
+    </tbody>
+  )
+}
+`, 'UnreadPreamble.tsx')
+    const plan = js2.slice(js2.indexOf('mapArrayLazy('), js2.indexOf("}, 'l0')"))
+    expect(plan.slice(plan.indexOf('createRow:'), plan.indexOf('applyItem:'))).toContain('const unused =')
+    expect(plan.slice(plan.indexOf('applyItem:'))).not.toContain('const unused =')
+  })
+})
+
+/**
+ * Each of these keeps the eager emission. Grouped rather than split so the
+ * list reads as "what still refuses", the counterpart to the widening above.
+ */
+describe('lazy row emission — preambles that keep the eager path', () => {
+  const rows = (body: string) => `
+'use client'
+import { createSignal, createMemo } from '@barefootjs/client'
+type Row = { id: number; label: string }
+export function EagerRows() {
+  const [rows, setRows] = createSignal<Row[]>([])
+  return (
+    <tbody>
+      {rows().map(row => {
+${body}
+      })}
+    </tbody>
+  )
+}
+`
+
+  const cases: Array<[string, string]> = [
+    [
+      'a per-row signal',
+      `        const [open, setOpen] = createSignal(false)
+        return <tr key={row.id}><td>{row.label}</td></tr>`,
+    ],
+    [
+      'a mutable local',
+      `        let cls = ''
+        return <tr key={row.id} className={cls}><td>{row.label}</td></tr>`,
+    ],
+    [
+      'a preamble local read in child position (a preamble-patched region)',
+      `        const full = row.label + '!'
+        return <tr key={row.id}><td>{full}</td></tr>`,
+    ],
+  ]
+
+  for (const [name, body] of cases) {
+    test(name, () => {
+      const js = clientJs(rows(body), 'EagerRows.tsx')
+      expect(js).not.toContain('mapArrayLazy(')
+      expect(js).toMatch(/\bmapArray\(/)
+    })
+  }
+})

package/src/__tests__/lazy-row-eligibility.test.ts

@@ -48,12 +48,12 @@ function makeShape(overrides: Partial<LazyRowShapeFacts> = {}): LazyRowShapeFact
     anchored: false,
     bodyIsMultiRoot: false,
     hasExplicitKey: true,
-    conditionalCount: 0,
+    conditionalRefusal: null,
     childRefCount: 0,
     nestedComponentCount: 0,
     innerLoopCount: 0,
     hasChildComponent: false,
-    hasMapPreamble: false,
+    mapPreambleRefusal: null,
     preambleRegionCount: 0,
     hasParamUnwrap: false,
     ...overrides,
@@ -78,6 +78,7 @@ const itemBinding = (kind: 'attr' | 'text' = 'text') => ({
   reactiveOuterNames: [] as string[],
   opaqueOuterNames: [] as string[],
   referencesIndex: false,
+  readsPreamble: false,
 })
 
 // --- eligibility ------------------------------------------------------------
@@ -120,12 +121,16 @@ describe('lazyRowEligibility — shape refusals', () => {
     ['anchored whole-item conditional', { anchored: true }, /anchored/],
     ['multi-root row', { bodyIsMultiRoot: true }, /multi-root/],
     ['index-keyed loop', { hasExplicitKey: false }, /index-keyed/],
-    ['reactive conditional in the row', { conditionalCount: 1 }, /reactive conditional/],
+    [
+      'a conditional the apply bodies cannot drive',
+      { conditionalRefusal: 'conditional on slot s9: its true arm owns events' },
+      /its true arm owns events/,
+    ],
     ['imperative child ref', { childRefCount: 1 }, /child refs/],
     ['child-component body', { hasChildComponent: true }, /child component/],
     ['nested child components', { nestedComponentCount: 1 }, /nested child components/],
     ['inner loop', { innerLoopCount: 1 }, /inner loop/],
-    ['map-callback preamble', { hasMapPreamble: true }, /preamble/],
+    ['unsafe map-callback preamble', { mapPreambleRefusal: 'map-callback preamble declares a mutable binding (let/var)' }, /mutable binding/],
     ['preamble-patched regions', { preambleRegionCount: 1 }, /preamble-patched regions/],
     ['destructured param without bindings', { hasParamUnwrap: true }, /destructured loop param/],
   ]
@@ -422,7 +427,7 @@ describe('lazy row emission — eligible loop', () => {
 
   test('applyItem claims refs lazily and dedups against entry.last', () => {
     const applyItem = js.slice(js.indexOf('applyItem:'), js.indexOf('applyOuter:'))
-    expect(applyItem).toContain('__e.refs ?? (__e.refs = __lzc_l0(__e))')
+    expect(applyItem).toContain('__e.refs ?? (__e.refs = [])')
     expect(applyItem).toContain('!Object.is(__l[1], __x)')
   })
 
@@ -439,9 +444,20 @@ describe('lazy row emission — eligible loop', () => {
     expect(applyOuter).toContain("__seed ? (__t.getAttribute('class') !== (__x != null ? String(__x) : null))")
   })
 
-  test('the lazy claim helper scans inside ONE row and is shared by both apply paths', () => {
-    expect(js).toContain('const __lzc_l0 = (__e) => {')
-    expect(js).toContain('const __el = __e.primaryEl')
+  /**
+   * An adopted row claims PER SLOT, on first use, scanning inside that one
+   * row. There is no whole-row claim closure: the previous shape made an
+   * `applyOuter` driving one attribute run a `qsa` for every OTHER
+   * reactive-attr slot in the row, on every row, at hydration.
+   *
+   * The `in` test rather than `??` is load-bearing — a slot whose scan found
+   * nothing must record that and not re-scan on the next tick.
+   */
+  test('an adopted row claims each element ref on first use, not the whole row', () => {
+    expect(js).not.toContain('__lzc_l0')
+    const applyOuter = js.slice(js.indexOf('applyOuter:'))
+    // refIndex 0 (the row's only reactive-attr slot), slot id `s2`.
+    expect(applyOuter).toContain(`0 in __r ? __r[0] : (__r[0] = qsa(__e.primaryEl, '[bf="s2"]'))`)
   })
 
   /**
@@ -459,19 +475,20 @@ describe('lazy row emission — eligible loop', () => {
   })
 
   /**
-   * The adopted-row claim resolves ELEMENT refs only; the content door's slot
-   * is left empty for the first content write to fill. `applyOuter` here
-   * drives one CLASS and no text, so it claims all 1,000 rows of a 1,000-row
-   * list at seed WITHOUT ever building a door — the allocation this pins away
-   * (measured on the SSR bench: post-hydration heap 1630.6KB -> 1573.2KB).
+   * An adopted row builds NOTHING up front — not the element refs and not the
+   * content door. `applyOuter` here drives one CLASS and no text, so across a
+   * 1,000-row list it claims one element per row and never builds a door
+   * (the allocation the deferred door first pinned away: post-hydration heap
+   * 1630.6KB -> 1573.2KB), and never scans for a slot it does not write.
    *
-   * `createRow` is deliberately excluded: it writes every text on the tick it
-   * builds the row, so its door is used immediately and stays eager.
+   * `createRow` is deliberately excluded: it writes every binding on the tick
+   * it builds the row, so its refs come from known clone paths and its door is
+   * used immediately.
    */
-  test('the adopted-row claim leaves the content door slot empty', () => {
-    const claim = js.slice(js.indexOf('const __lzc_l0 ='), js.indexOf('mapArrayLazy('))
-    expect(claim).toContain('return [qsa(__el, \'[bf="s2"]\'), null]')
-    expect(claim).not.toContain('lazySlots(')
+  test('an adopted row allocates nothing up front', () => {
+    const applyOuter = js.slice(js.indexOf('applyOuter:'))
+    expect(applyOuter).toContain('__e.refs ?? (__e.refs = [])')
+    expect(applyOuter).not.toContain('lazySlots(')
   })
 
   test('an attr-only applyOuter never materializes the door; applyItem does', () => {
@@ -568,16 +585,68 @@ describe('lazy row emission — outer-involving TEXT binding (§9.5 lifted)', ()
   })
 
   /**
-   * This row has no reactive ATTRIBUTE, so with the door deferred the element
-   * refs are gone and the adopted claim is a bare `[null]` — at which point
-   * binding the row root is dead code. Pinned because the binding is emitted
-   * unconditionally the moment anyone forgets that `refParts` decides whether
-   * anything reads it.
+   * This row has no reactive ATTRIBUTE, so an adopted row's only claim is the
+   * content door — and that is materialized by the first content write, not up
+   * front. Pinned because the whole-row claim closure this replaced emitted a
+   * dead `const __el = __e.primaryEl` for exactly this shape.
    */
-  test('a text-only adopted claim binds no row root', () => {
-    const claim = js.slice(js.indexOf('const __lzc_l0 ='), js.indexOf('mapArrayLazy('))
-    expect(claim).toContain('return [null]')
-    expect(claim).not.toContain('__el')
+  test('a text-only adopted row claims only the door, on first write', () => {
+    expect(js).not.toContain('__lzc_l0')
+    const applyItem = js.slice(js.indexOf('applyItem:'), js.indexOf('applyOuter:'))
+    expect(applyItem).toContain('__r[0] ?? (__r[0] = lazyClaimSlots(__e.primaryEl, __lzs_l0))')
+  })
+})
+
+/**
+ * Per-slot claiming, counted (§9 W2).
+ *
+ * A row with THREE reactive-attr slots where `applyOuter` drives exactly one:
+ * the whole-row claim closure this replaced resolved all three on every row at
+ * hydration, so a 1,000-row list ran 3,000 `qsa` scans to write 1,000
+ * attributes. With each binding claiming its own slot, `applyOuter` contains
+ * ONE scan and the count is 1,000.
+ *
+ * Counted rather than timed on purpose: the existing SSR bench's row has a
+ * single reactive-attr slot, so it cannot show this — its `applyOuter` already
+ * claimed exactly what it wrote. The scan count is the thing that changed, and
+ * it is deterministic.
+ */
+const MULTI_SLOT = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string }
+export function MultiSlotRows(props: { rows: Row[] }) {
+  const [rows, setRows] = createSignal<Row[]>(props.rows)
+  const [selected, setSelected] = createSignal(0)
+  return (
+    <tbody>
+      {rows().map(row => (
+        <tr key={row.id} className={selected() === row.id ? 'danger' : ''}>
+          <td title={row.label}>{row.id}</td>
+          <td data-x={row.id}>{row.label}</td>
+        </tr>
+      ))}
+    </tbody>
+  )
+}
+`
+
+describe('lazy row claiming — one scan per slot actually written', () => {
+  const js = clientJs(MULTI_SLOT, 'MultiSlotRows.tsx')
+  const section = (from: string, to?: string) =>
+    js.slice(js.indexOf(from), to ? js.indexOf(to) : js.indexOf("}, 'l0')"))
+  const scans = (text: string) => text.split('qsa(').length - 1
+
+  test('the row really has three reactive-attr slots', () => {
+    expect(scans(section('applyItem:', 'applyOuter:'))).toBe(3)
+  })
+
+  test('applyOuter scans only the slot it writes', () => {
+    expect(scans(section('applyOuter:'))).toBe(1)
+  })
+
+  test('createRow resolves refs from clone paths, never by scanning', () => {
+    expect(scans(section('createRow:', 'applyItem:'))).toBe(0)
   })
 })