@barefootjs/jsx 0.27.0 → 0.28.0

package/dist/ir-to-client-js/imports.d.ts

@@ -2,9 +2,9 @@
  * Import detection and DOM import management.
  */
 import type { ComponentIR } from '../types.ts';
-export declare const RUNTIME_IMPORT_CANDIDATES: readonly ['createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount', 'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'patchLeaf', 'createDisposableEffect', 'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild', 'createPortal', 'provideContext', 'createContext', 'useContext', 'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText', 'escapeTextOrNode', 'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText', 'claimSlots', 'lazySlots', 'beginTurn', 'endTurn', 'date', 'formatDate'];
+export declare const RUNTIME_IMPORT_CANDIDATES: readonly ['createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount', 'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'mapArrayLazy', 'patchLeaf', 'createDisposableEffect', 'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild', 'createPortal', 'provideContext', 'createContext', 'useContext', 'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText', 'escapeTextOrNode', 'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText', 'claimSlots', 'lazySlots', 'lazyClaimSlots', 'textOrNode', 'beginTurn', 'endTurn', 'date', 'formatDate'];
 /** @deprecated Use RUNTIME_IMPORT_CANDIDATES */
-export declare const DOM_IMPORT_CANDIDATES: readonly ["createSignal", "createMemo", "createEffect", "onCleanup", "onMount", "hydrate", "insert", "getLoopChildren", "getLoopNodes", "mapArray", "mapArrayAnchored", "patchLeaf", "createDisposableEffect", "createComponent", "renderChild", "registerComponent", "registerTemplate", "initChild", "upsertChild", "createPortal", "provideContext", "createContext", "useContext", "forwardProps", "applyRestAttrs", "splitProps", "spreadAttrs", "styleToCss", "escapeAttr", "escapeText", "escapeTextOrNode", "qsa", "qsaItem", "qsaChildScope", "qsaChildScopes", "upsertChildItem", "__slot", "__bfSlot", "__bfText", "claimSlots", "lazySlots", "beginTurn", "endTurn", "date", "formatDate"];
+export declare const DOM_IMPORT_CANDIDATES: readonly ["createSignal", "createMemo", "createEffect", "onCleanup", "onMount", "hydrate", "insert", "getLoopChildren", "getLoopNodes", "mapArray", "mapArrayAnchored", "mapArrayLazy", "patchLeaf", "createDisposableEffect", "createComponent", "renderChild", "registerComponent", "registerTemplate", "initChild", "upsertChild", "createPortal", "provideContext", "createContext", "useContext", "forwardProps", "applyRestAttrs", "splitProps", "spreadAttrs", "styleToCss", "escapeAttr", "escapeText", "escapeTextOrNode", "qsa", "qsaItem", "qsaChildScope", "qsaChildScopes", "upsertChildItem", "__slot", "__bfSlot", "__bfText", "claimSlots", "lazySlots", "lazyClaimSlots", "textOrNode", "beginTurn", "endTurn", "date", "formatDate"];
 export declare const RUNTIME_MODULE = "@barefootjs/client/runtime";
 export declare const IMPORT_PLACEHOLDER = "/* __BAREFOOTJS_DOM_IMPORTS__ */";
 export declare const MODULE_CONSTANTS_PLACEHOLDER = "/* __MODULE_LEVEL_CONSTANTS__ */";

package/dist/ir-to-client-js/imports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imports.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/imports.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,aAAa,CAAA;AAItD,eAAO,MAAM,yBAAyB,YACpC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EACpE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,EAAE,UAAU,EAAE,kBAAkB,EAAE,WAAW,EAAE,wBAAwB,EAC7H,iBAAiB,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,WAAW,EAAE,aAAa,EACrG,cAAc,EACd,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAC/C,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAC3H,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAIxG,YAAY,EAAE,WAAW,EAEzB,WAAW,EAAE,SAAS,EAItB,MAAM,EAIN,YAAY,CACJ,CAAA;AAEV,gDAAgD;AAChD,eAAO,MAAM,qBAAqB,wqBAA4B,CAAA;AAE9D,eAAO,MAAM,cAAc,+BAA+B,CAAA;AAE1D,eAAO,MAAM,kBAAkB,qCAAqC,CAAA;AACpE,eAAO,MAAM,4BAA4B,qCAAqC,CAAA;AAE9E;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAqB3D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,CAiB/D;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAmCvH"}
+{"version":3,"file":"imports.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/imports.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,aAAa,CAAA;AAItD,eAAO,MAAM,yBAAyB,YACpC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EACpE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,EAAE,UAAU,EAAE,kBAAkB,EAAE,cAAc,EAAE,WAAW,EAAE,wBAAwB,EAC7I,iBAAiB,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,WAAW,EAAE,aAAa,EACrG,cAAc,EACd,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAC/C,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAC3H,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAUxG,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAEzD,WAAW,EAAE,SAAS,EAItB,MAAM,EAIN,YAAY,CACJ,CAAA;AAEV,gDAAgD;AAChD,eAAO,MAAM,qBAAqB,wtBAA4B,CAAA;AAE9D,eAAO,MAAM,cAAc,+BAA+B,CAAA;AAE1D,eAAO,MAAM,kBAAkB,qCAAqC,CAAA;AACpE,eAAO,MAAM,4BAA4B,qCAAqC,CAAA;AAE9E;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAqB3D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,CAiB/D;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAmCvH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/jsx",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "JSX compiler for BarefootJS - transforms JSX to server HTML + client JS",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,7 +53,7 @@
     "directory": "packages/jsx"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.27.0"
+    "@barefootjs/shared": "0.28.0"
   },
   "peerDependencies": {
     "@barefootjs/client": ">=0.2.0",

package/src/__tests__/__snapshots__/doc-examples.test.ts.snap

@@ -4380,7 +4380,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L190 — (no label) 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4431,11 +4431,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
-  mapArray(() => items(), _s1, (item) => String(item), (item, __idx, __existing) => {
-    const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item())) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items(), _s1, (item) => String(item), {
+    createRow: (__e, __idx) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item()
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item()
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -4494,7 +4515,7 @@ export function Counter(_p, __bfKey) { return createComponent('Counter', _p, __b
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L168 — (no label) 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4545,11 +4566,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
-  mapArray(() => items(), _s1, (item) => String(item), (item, __idx, __existing) => {
-    const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item())) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items(), _s1, (item) => String(item), {
+    createRow: (__e, __idx) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item()
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item()
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -4559,7 +4601,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L180 — (no label) 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4610,11 +4652,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
-  mapArray(() => items().filter(item => item.active), _s1, (item) => String(item.id), (item, __idx, __existing) => {
-    const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item().name)) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items().filter(item => item.active), _s1, (item) => String(item.id), {
+    createRow: (__e, __idx) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item().name
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item().name
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -5032,7 +5095,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/advanced/compiler-internals.md doc-examples L126 — (no label) 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -5083,11 +5146,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
-  mapArray(() => todos().filter(t => !t.done).toSorted((a, b) => a.date - b.date), _s1, (t) => String(t.id), (t, __idx, __existing) => {
-    const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(t().name)) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => todos().filter(t => !t.done).toSorted((a, b) => a.date - b.date), _s1, (t) => String(t.id), {
+    createRow: (__e, __idx) => {
+      const t = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = t().name
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const t = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = t().name
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -5159,7 +5243,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/advanced/performance.md doc-examples L67 — ✅ Stable key — DOM nodes reused when list changes 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -5210,11 +5294,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
-  mapArray(() => items(), _s1, (item) => String(item.id), (item, __idx, __existing) => {
-    const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item().name)) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items(), _s1, (item) => String(item.id), {
+    createRow: (__e, __idx) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item().name
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item().name
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }
@@ -5224,7 +5329,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/advanced/performance.md doc-examples L70 — ❌ Index key — DOM nodes recreated on reorder 1`] = `
-"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArray } from '@barefootjs/client/runtime'
+"import { $, createComponent, createEffect, createSignal, escapeAttr, escapeText, escapeTextOrNode, hydrate, lazySlots, mapArrayLazy, textOrNode } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -5275,11 +5380,32 @@ export function initExample(__scope, _p = {}) {
 
   const __tpl_l0 = document.createElement('template')
   __tpl_l0.innerHTML = \`<li data-key=""><!--bf:s0--><!--/--></li>\`
-  mapArray(() => items(), _s1, (item, i) => String(i), (item, i, __existing) => {
-    const __el = __existing ?? __tpl_l0.content.firstElementChild.cloneNode(true)
-    const __bfw_s0 = lazySlots(__el, [{ id: 's0', kind: 'text', path: __existing ? [] : [0] }])
-    createEffect(() => { __bfw_s0('s0', String(item().name)) })
-    return __el
+  const __lzp_l0 = [[0]]
+  const __lzs_l0 = [{ id: 's0', kind: 'text', path: [] }]
+  const __lzsc_l0 = [{ id: 's0', kind: 'text', path: __lzp_l0[0] }]
+  const __lzc_l0 = (__e) => {
+    return [null]
+  }
+  mapArrayLazy(() => items(), _s1, (item, i) => String(i), {
+    createRow: (__e, i) => {
+      const item = () => __e.item
+      const __el = __tpl_l0.content.firstElementChild.cloneNode(true)
+      const __r = __e.refs = [lazySlots(__el, __lzsc_l0)]
+      const __l = __e.last = []
+      { const __x = item().name
+      __r[0]('s0', textOrNode(__x))
+      __l[0] = __x }
+      return __el
+    },
+    applyItem: (__e) => {
+      const item = () => __e.item
+      const __r = __e.refs ?? (__e.refs = __lzc_l0(__e))
+      const __l = __e.last ?? (__e.last = [])
+      const __d = __r[0] ?? (__r[0] = lazySlots(__e.primaryEl, __lzs_l0))
+      { const __x = item().name
+      if (!(0 in __l) || !Object.is(__l[0], __x)) __d('s0', textOrNode(__x))
+      __l[0] = __x }
+    },
   }, 'l0')
 
 }

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

@@ -2638,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

@@ -53,7 +53,10 @@ describe('composite loops inside conditional branches (#724)', () => {
     const js = clientJs!.content
 
     // Should use mapArray inside the branch's bindEvents
-    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)?\(/)
 
     // 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'\)/)