@barefootjs/jsx 0.26.4 → 0.28.0

package/src/__tests__/child-components-in-map.test.ts

@@ -211,7 +211,7 @@ describe('child components inside .map() (#344)', () => {
     expect(clientJs!.content).toContain('toggleRow(index)')
   })
 
-  test('dynamic signal array: component generates reconcileElements with createComponent', () => {
+  test('dynamic signal array: component generates mapArray with createComponent', () => {
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -321,7 +321,7 @@ describe('child components inside .map() (#344)', () => {
     const uniqueVars = new Set(allVars)
     expect(allVars.length).toBe(uniqueVars.size)
 
-    // Component slot ref ($c) and reconcileElements should both be present
+    // Component slot ref ($c) and mapArray should both be present
     expect(content).toContain('$c(__scope')
     expect(content).toContain('mapArray')
   })
@@ -355,7 +355,7 @@ describe('child components inside .map() (#344)', () => {
     expect(clientJs).toBeDefined()
     const content = clientJs!.content
 
-    // Should use reconcileElements with createComponent
+    // Should use mapArray with createComponent
     expect(content).toContain('mapArray')
     expect(content).toContain("createComponent('TableRow'")
 
@@ -650,7 +650,7 @@ describe('child components inside .map() (#344)', () => {
     expect(clientJs).toBeDefined()
     const content = clientJs!.content
 
-    // Dynamic array should use reconcileElements and event delegation
+    // Dynamic array should use mapArray and event delegation
     expect(content).toContain('mapArray')
     expect(content).toContain(".addEventListener('click', (__bfEvt) => {")
     expect(content).toContain('handleClick(item.id)')

package/src/__tests__/client-js-generation.test.ts

@@ -151,7 +151,7 @@ describe('Client JS generation', () => {
   })
 
   describe('map with index parameter', () => {
-    test('includes index parameter in reconcileElements renderItem callback', () => {
+    test('includes index parameter in mapArray renderItem callback', () => {
       const source = `
         'use client'
         import { createMemo } from '@barefootjs/client'
@@ -1760,7 +1760,10 @@ describe('Client JS generation', () => {
       // update. See `preamble-region-patch.test.ts` for the full region
       // contract (row-template marker, region-patch effect, SSR parity).
       expect(clientJs?.content).toContain('${escapeText(label)}')
-      expect(clientJs?.content).toContain('patchSlotRange')
+      // Slot unification A3: preamble regions now write through a claimed
+      // 'markup' slot instead of `patchSlotRange`.
+      expect(clientJs?.content).toContain("kind: 'markup'")
+      expect(clientJs?.content).toContain('lazySlots(__el')
     })
 
     test('handles block body with multiple variable declarations', () => {
@@ -2423,11 +2426,12 @@ describe('Client JS generation', () => {
       expect(clientJs).toBeDefined()
       const content = clientJs!.content
 
-      // Text node updates route through `__bfText`, which renders nullish
-      // values as '' (not the string "undefined") and also splices live
-      // Nodes by identity (#1663). The nullish guard moved from the inline
-      // `String(__val ?? '')` assignment into that helper.
-      expect(content).toContain('__bfText(')
+      // Text node updates route through a claimed 'markup' slot writer (slot
+      // unification A3), whose `writeMarkup` renders nullish values as ''
+      // (not the string "undefined") and also splices live Nodes by
+      // identity (#1663) — the same contract `__bfText` used to provide.
+      // The nullish guard lives in the runtime writer, not inline here.
+      expect(content).toContain("kind: 'markup'")
       expect(content).not.toMatch(/\.nodeValue = String\(__val\)(?! )/)
     })
 
@@ -2464,8 +2468,10 @@ describe('Client JS generation', () => {
       expect(clientJs).toBeDefined()
       const content = clientJs!.content
 
-      // text() inside a component inside a conditional uses $t() in branch-scoped effect
-      expect(content).toContain('$t(__branchScope')
+      // text() inside a component inside a conditional writes through a
+      // claimed 'markup' slot built fresh in the branch's own bindEvents
+      // (slot unification A3) — re-claimed on every branch activation.
+      expect(content).toContain("lazySlots(__branchScope, [{ id: '^s2', kind: 'markup', path: [] }])")
     })
 
     test('propagates insideConditional through fragment children', () => {
@@ -2495,8 +2501,10 @@ describe('Client JS generation', () => {
       expect(clientJs).toBeDefined()
       const content = clientJs!.content
 
-      // text() inside a fragment inside a conditional uses $t() in branch-scoped effect
-      expect(content).toContain('$t(__branchScope')
+      // text() inside a fragment inside a conditional writes through a
+      // claimed 'markup' slot built fresh in the branch's own bindEvents
+      // (slot unification A3) — re-claimed on every branch activation.
+      expect(content).toContain("lazySlots(__branchScope, [{ id: 's2', kind: 'markup', path: [] }])")
     })
   })
 
@@ -2630,7 +2638,10 @@ describe('Client JS generation', () => {
       const js = result.files.find(f => f.type === 'clientJs')!.content
       // The branch arm's mapArray call must live inside a
       // createDisposableEffect that is pushed into __disposers.
-      expect(js).toMatch(/__disposers\.push\(createDisposableEffect\(\(\)\s*=>\s*\{[\s\S]*?mapArray\(/)
+      // `mapArray(` or `mapArrayLazy(` — a lazy-row-eligible branch loop
+      // (spec/slot-unification.md §9.4) uses the latter and has exactly the
+      // same disposal obligation.
+      expect(js).toMatch(/__disposers\.push\(createDisposableEffect\(\(\)\s*=>\s*\{[\s\S]*?mapArray(Lazy)?\(/)
     })
 
     test('nested conditional inside a conditional branch is wrapped in createDisposableEffect', () => {

package/src/__tests__/composite-branch-loop.test.ts

@@ -2,7 +2,7 @@
  * BarefootJS Compiler - Composite loops inside conditional branches (#724)
  *
  * Verifies that loops with child components inside ternary conditionals
- * generate reconcileElements with createComponent in the branch's bindEvents.
+ * generate mapArray with createComponent in the branch's bindEvents.
  */
 
 import { describe, test, expect } from 'bun:test'
@@ -52,8 +52,11 @@ describe('composite loops inside conditional branches (#724)', () => {
     expect(clientJs).toBeDefined()
     const js = clientJs!.content
 
-    // Should use reconcileElements inside the branch's bindEvents
-    expect(js).toContain('mapArray(')
+    // Should use mapArray inside the branch's bindEvents
+    // `mapArray(` or `mapArrayLazy(` — a lazy-row-eligible branch loop
+    // (spec/slot-unification.md §9.4) uses the latter; either satisfies
+    // "keyed reconciliation, not a composite/component shape".
+    expect(js).toMatch(/\bmapArray(Lazy)?\(/)
 
     // After O-1's mode-collapse PR, child component init goes through the
     // runtime `upsertChild` helper instead of an emit-side
@@ -96,7 +99,10 @@ describe('composite loops inside conditional branches (#724)', () => {
     const js = clientJs!.content
 
     // Should use mapArray for per-item reactivity
-    expect(js).toContain('mapArray(')
+    // `mapArray(` or `mapArrayLazy(` — a lazy-row-eligible branch loop
+    // (spec/slot-unification.md §9.4) uses the latter; either satisfies
+    // "keyed reconciliation, not a composite/component shape".
+    expect(js).toMatch(/\bmapArray(Lazy)?\(/)
 
     // Should NOT use createComponent inside the init body (no child
     // components in this fixture). The CLI also emits a callable shim
@@ -147,7 +153,10 @@ describe('composite loops inside conditional branches (#724)', () => {
     const js = clientJs!.content
 
     // Should use mapArray for the loop
-    expect(js).toContain('mapArray(')
+    // `mapArray(` or `mapArrayLazy(` — a lazy-row-eligible branch loop
+    // (spec/slot-unification.md §9.4) uses the latter; either satisfies
+    // "keyed reconciliation, not a composite/component shape".
+    expect(js).toMatch(/\bmapArray(Lazy)?\(/)
 
     // Should have event delegation (addEventListener + closest pattern)
     expect(js).toContain(".addEventListener('click', (__bfEvt) => {")

package/src/__tests__/conditional-mapArray-key.test.ts

@@ -29,11 +29,17 @@ function clientJs(source: string, file = 'CondKey.tsx'): string {
   return cjs!.content
 }
 
+/**
+ * Reconciler call sites, whichever family they use. A lazy-row-eligible loop
+ * (spec/slot-unification.md §9.4) emits `mapArrayLazy(`; everything else keeps
+ * `mapArray(`. The key expression this suite asserts on is the same third
+ * argument in both shapes, so match the family, not one member of it.
+ */
 function mapArrayCalls(content: string): string[] {
   return content
     .split('\n')
     .map((ln) => ln.trim())
-    .filter((ln) => ln.startsWith('mapArray('))
+    .filter((ln) => ln.startsWith('mapArray(') || ln.startsWith('mapArrayLazy('))
 }
 
 describe('mapArray key extraction across conditional branches (#1098)', () => {

package/src/__tests__/create-selector.test.ts

@@ -7,9 +7,14 @@
  * `isSelected(row.id)` as reactive with no analyzer changes — the callee's
  * type carries the brand, not the call's return type. These tests pin:
  *   - the classic js-framework-benchmark row compiles with `isSelected(row.id)`
- *     wired to a single per-row `createEffect` (not the legacy
- *     `selected() === row.id` shape, which would still work but subscribes
- *     every row to the raw signal)
+ *     wired through the lazy row graph — ZERO emitted per-row effects, the
+ *     loop-level effect living in `mapArrayLazy` (spec §9). Until §9.3a
+ *     was lifted this shape was gate-INELIGIBLE (an opaque local whose call
+ *     is the reactive read could not be primed) and compiled to one per-row
+ *     `createEffect`; the runtime re-subscribe seam replaced that, so the
+ *     loop is emitted like any other. Either way it is never
+ *     the legacy `selected() === row.id` shape, which subscribes every row
+ *     to the raw signal.
  *   - the loop-param accessor wrap applies only to the call ARGUMENT
  *     (`row.id` -> `row().id`), leaving the `isSelected` callee untouched
  *   - the hoisted skeleton fast path (#2223) still fires for a selector-driven
@@ -36,7 +41,7 @@ function compile(source: string, filename: string): { clientJs: string; template
 }
 
 describe('createSelector (perf, #2143 gap 5)', () => {
-  test('isSelected(row.id) in a loop body compiles to one per-row createEffect', () => {
+  test('isSelected(row.id) in a loop body compiles through the lazy row graph', () => {
     const source = `
       'use client'
       import { createSignal, createSelector } from '@barefootjs/client'
@@ -66,12 +71,21 @@ describe('createSelector (perf, #2143 gap 5)', () => {
     // The callee itself is never rewritten to an accessor call.
     expect(clientJs).not.toContain('isSelected()(')
 
-    // Exactly one createEffect wraps the selector-driven class attribute —
-    // not the O(rows) `selected() === row.id` shape.
+    // The selector-driven class attribute costs NO emitted effect at all:
+    // the loop is lazy-eligible, so its one loop-level effect lives inside
+    // `mapArrayLazy` rather than in the emitted row body. It is also never
+    // the O(rows) `selected() === row.id` shape.
     const effectCount = (clientJs.match(/createEffect\(/g) ?? []).length
-    expect(effectCount).toBe(1)
+    expect(effectCount).toBe(0)
+    expect(clientJs).toContain('mapArrayLazy(')
     expect(clientJs).not.toContain('selected() ===')
 
+    // `isSelected` is an opaque local (its CALL is the reactive read). Nothing
+    // in the emission marks that: the runtime's re-subscribe seam applies to
+    // every loop-level outer effect, so the compiler has no judgement to
+    // encode here (§9.3a).
+    expect(clientJs).not.toContain('outerNeedsResubscribe')
+
     // The hoisted skeleton fast path (#2223) still fires: a single-line
     // renderItem clones from a once-per-loop template.
     expect(clientJs).toMatch(/const __tpl_\w+ = document\.createElement\('template'\)/)

package/src/__tests__/cross-file-client-signal.test.ts

@@ -104,7 +104,11 @@ export function Viewer() {
     const files = Object.fromEntries(r.files.map(f => [f.path, f.content]))
     const ssr = Object.values(files).find(c => c.includes('export function Viewer'))
     expect(ssr).toBeDefined()
-    expect(ssr).toContain('client:s')
+    // Slot unification Step B: `{val()}` is the SPAN's only, non-adjacent
+    // child, so its marker pair is elided entirely (see the identical note
+    // in module-level-signal.audit.test.ts) — the client's claim plan
+    // creates the missing Text node from `elidedPath` alone.
+    expect(ssr).not.toContain('bfText(')
     expect(ssr).not.toContain("const val = () =>")
   })
 

package/src/__tests__/early-return-scope-var-ref.test.ts

@@ -65,12 +65,10 @@ describe('JSX expression referencing a local declared inside an early-return if-
 
     const content = clientJsContent(result)
 
-    // Pre-fix: emitted `updateClientMarker(__scope, 's4', aLocal)` at
-    // outer init scope — `aLocal` undefined. Post-fix: the JSX is
-    // inlined directly into the template, so the createEffect /
-    // updateClientMarker block is not needed at all for this static
-    // shape.
-    expect(content).not.toContain('updateClientMarker')
+    // Pre-fix, `aLocal` leaked into a reactive-update block at outer init
+    // scope where it doesn't exist (see file docstring). Post-fix: the JSX
+    // is inlined directly into the template, so no reactive-update block is
+    // needed at all for this static shape.
     expect(content).not.toMatch(/\baLocal\b/)
 
     const hydrate = hydrateLine(result)
@@ -97,9 +95,10 @@ describe('JSX expression referencing a local declared inside an early-return if-
     const content = clientJsContent(result)
     // The bare `label` identifier must not appear in the emitted init
     // function — it's resolved to its initializer value at IR-build
-    // time.
-    expect(content).not.toMatch(/updateClientMarker\([^)]*\blabel\b[^)]*\)/)
-    expect(content).toContain("updateClientMarker(__scope, 's4', 'hello')")
+    // time. `@client` writes through a claimed 'text' slot writer
+    // (`claim-slots.ts`).
+    expect(content).not.toMatch(/__bfw_\w+\([^)]*\blabel\b[^)]*\)/)
+    expect(content).toContain("__bfw_s4('s4', 'hello')")
   })
 
   test('ternary scope var (`readOnly ? null : <jsx/>`) routes to client-only conditional', () => {
@@ -124,8 +123,8 @@ describe('JSX expression referencing a local declared inside an early-return if-
     expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
 
     const content = clientJsContent(result)
-    // Pre-fix: `updateClientMarker(__scope, 's*', compactResize)`
-    // referenced an undeclared name. Post-fix: the ternary becomes an
+    // Pre-fix, `compactResize` leaked into the emitted reactive-update
+    // block as an undeclared name. Post-fix: the ternary becomes an
     // IRConditional with `clientOnly: true`, routed through `insert()`
     // — and `props.readOnly` is rewritten to `_p.readOnly`.
     expect(content).not.toMatch(/\bcompactResize\b/)

package/src/__tests__/inline-jsx-callback.test.ts

@@ -440,10 +440,12 @@ describe('inline JSX as object-literal arrow value (#1663)', () => {
     expect(js).toMatch(/hydrate\(\s*['"]BFInlineJsxCallback1(?:__|['"])/)
   })
 
-  test('dynamic JSX-returning call routes the slot through __bfText', () => {
+  test('dynamic JSX-returning call routes the slot through a claimed markup slot', () => {
     // The child expression `{themeLogo(props.id)}` evaluates to a live
     // component element on the client; the slot update must splice it in by
-    // identity via __bfText rather than stringify it into "[object …]".
+    // identity via a claimed 'markup' slot writer (slot unification A3)
+    // rather than stringify it into "[object …]" — the same contract
+    // `__bfText` used to provide.
     const source = `
       'use client'
       import { BrandLogo } from './brand-logo'
@@ -458,7 +460,7 @@ describe('inline JSX as object-literal arrow value (#1663)', () => {
       }
     `
     const js = clientJs(source)
-    expect(js).toContain('__bfText(')
-    expect(js).toMatch(/__bfText[^']*from '@barefootjs\/client\/runtime'/)
+    expect(js).toContain("kind: 'markup'")
+    expect(js).toMatch(/lazySlots[^']*from '@barefootjs\/client\/runtime'/)
   })
 })

package/src/__tests__/ir-jsx-props.test.ts

@@ -359,11 +359,12 @@ describe('JSX props (#559)', () => {
 
       const clientJs = result.files.find(f => f.type === 'clientJs')
       expect(clientJs).toBeDefined()
-      // The text update routes through `__bfText`, which preserves the
-      // server-rendered DOM for `__isSlot` values (and splices live Nodes
-      // by identity) instead of the old inline `nodeValue = String(...)`
-      // assignment. The `__isSlot` guard now lives inside that helper (#1663).
-      expect(clientJs!.content).toContain('__bfText')
+      // The text update routes through a claimed 'markup' slot writer (slot
+      // unification A3), whose `writeMarkup` preserves the server-rendered
+      // DOM for `__isSlot` values (and splices live Nodes by identity)
+      // instead of the old inline `nodeValue = String(...)` assignment —
+      // the same contract `__bfText` used to provide (#1663).
+      expect(clientJs!.content).toContain("kind: 'markup'")
     })
   })
 })