@barefootjs/jsx 0.35.0 → 0.35.2

package/src/__tests__/map-body-brand-checker.test.ts

@@ -0,0 +1,176 @@
+/**
+ * #2867 / #2830: `shouldAutoDeferReactiveBrand` (jsx-to-ir.ts) used to call
+ * `getJS()` on the whole candidate expression to regex-test it for a native
+ * signal/memo call. For a `.map()` loop or a ternary/`&&` with JSX arms, that
+ * expression IS JSX-bearing — and whenever the TypeChecker was active and
+ * resolved a `Reactive<T>` brand anywhere in the expression, `getJS()`'s
+ * trust-boundary assertion (armed by `map-body-no-silent-divergence.test.ts`)
+ * threw, uncaught, on `signal-array-builder` / `flatmap-expression-body-signal-array`.
+ *
+ * That harness's own `assess()` compiles via a bare relative path (`T.tsx`)
+ * with no injected `ts.Program`, so whether the checker actually activates —
+ * and thus whether this reproduces — silently depended on the process's cwd
+ * and whether `@barefootjs/client`'s `dist` happened to be built, which is
+ * exactly why the failure looked like an environment-dependent flake (#2867)
+ * rather than the deterministic compiler bug it is. These tests pin it with
+ * an explicitly injected `ts.Program` (mirroring `auto-defer-brand.test.ts`)
+ * so the repro — and the fix — hold regardless of cwd or build state.
+ */
+
+import { describe, test, expect, beforeAll, afterAll } from 'bun:test'
+import ts from 'typescript'
+import path from 'path'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+let prevAssertEnv: string | undefined
+beforeAll(() => {
+  prevAssertEnv = process.env.BF_ASSERT_NO_JSX_IN_GETJS
+  process.env.BF_ASSERT_NO_JSX_IN_GETJS = '1'
+})
+afterAll(() => {
+  if (prevAssertEnv === undefined) delete process.env.BF_ASSERT_NO_JSX_IN_GETJS
+  else process.env.BF_ASSERT_NO_JSX_IN_GETJS = prevAssertEnv
+})
+
+interface Compiled {
+  errors: string[]
+  hasError: boolean
+  clientJs: string
+}
+
+/**
+ * Compile `source` with a real TypeChecker that resolves `@barefootjs/client`
+ * (found deterministically via `packages/jsx/node_modules`, since the virtual
+ * file lives under this file's own directory — no dependency on `process.cwd()`).
+ */
+function compileWithChecker(source: string): Compiled {
+  const componentPath = path.join(path.resolve(__dirname), '_map-body-brand-component.tsx')
+  const virtualFiles = new Map<string, string>([[componentPath, source]])
+
+  const compilerOptions: ts.CompilerOptions = {
+    target: ts.ScriptTarget.Latest,
+    module: ts.ModuleKind.ESNext,
+    moduleResolution: ts.ModuleResolutionKind.Bundler,
+    jsx: ts.JsxEmit.ReactJSX,
+    strict: true,
+    skipLibCheck: true,
+    noEmit: true,
+  }
+
+  const defaultHost = ts.createCompilerHost(compilerOptions)
+  const host: ts.CompilerHost = {
+    ...defaultHost,
+    getSourceFile(fileName, languageVersion) {
+      const resolved = path.resolve(fileName)
+      const content = virtualFiles.get(resolved)
+      if (content !== undefined) {
+        return ts.createSourceFile(fileName, content, languageVersion, true, ts.ScriptKind.TSX)
+      }
+      return defaultHost.getSourceFile(fileName, languageVersion)
+    },
+    fileExists(fileName) {
+      return virtualFiles.has(path.resolve(fileName)) || defaultHost.fileExists(fileName)
+    },
+    readFile(fileName) {
+      return virtualFiles.get(path.resolve(fileName)) ?? defaultHost.readFile(fileName)
+    },
+  }
+
+  const program = ts.createProgram([componentPath], compilerOptions, host)
+  const adapter = new TestAdapter()
+  const r = compileJSX(source, componentPath, { adapter, program })
+  const clientJs = r.files.find((f) => f.type === 'clientJs')?.content ?? ''
+  return {
+    errors: r.errors.map((e) => `[${e.code}] ${e.message}`),
+    hasError: r.errors.some((e) => e.severity === 'error'),
+    clientJs,
+  }
+}
+
+function assertSound(clientJs: string): void {
+  const sf = ts.createSourceFile('bundle.js', clientJs, ts.ScriptTarget.ES2022, false, ts.ScriptKind.JS)
+  const parseErrors = (sf as unknown as { parseDiagnostics: unknown[] }).parseDiagnostics.length
+  expect(parseErrors).toBe(0)
+  expect(clientJs).not.toMatch(/__BF_JSX_\d+__/)
+  expect(clientJs).not.toMatch(/\bpush\(</)
+}
+
+describe('shouldAutoDeferReactiveBrand does not stringify JSX-bearing expressions (#2867/#2830)', () => {
+  test('signal-sourced .map() array builder compiles clean under an active checker', () => {
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [rows] = createSignal([{ id: '1', cells: ['a'] }])
+  return <table><tbody>{rows().map((r) => {
+    const out = []
+    for (const c of r.cells) out.push(<td>{c}</td>)
+    return <tr key={r.id}>{out}</tr>
+  })}</tbody></table>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+
+  test('signal-sourced .flatMap() with an expression-body inner .map() compiles clean under an active checker', () => {
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: '1', tags: ['a'] }])
+  return <ul>{items().flatMap((it) => it.tags.map((t) => <li key={t}>{t}</li>))}</ul>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+
+  test('memo-sourced .map() array builder also compiles clean (not just signals)', () => {
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal, createMemo } from '@barefootjs/client'
+function T() {
+  const [rows] = createSignal([{ id: '1', cells: ['a'] }])
+  const upper = createMemo(() => rows())
+  return <table><tbody>{upper().map((r) => {
+    const out = []
+    for (const c of r.cells) out.push(<td>{c}</td>)
+    return <tr key={r.id}>{out}</tr>
+  })}</tbody></table>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+
+  test('signal-conditioned ternary with JSX on both arms, no props destructuring (BF043) to mask the assertion', () => {
+    // No destructured props here (which would emit a BF043 warning and, pre-
+    // fix, incidentally have silently disarmed the trust-boundary assertion
+    // for this shape). This pins the conditional-arm path directly.
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [show] = createSignal(true)
+  return <div>{show() ? <b>yes</b> : <em>no</em>}</div>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+
+  test('a component also importing @barefootjs/client but with no .map() and no reactive JSX branch is unaffected', () => {
+    const { hasError, clientJs } = compileWithChecker(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [count, setCount] = createSignal(0)
+  return <button onClick={() => setCount((c) => c + 1)}>{count()}</button>
+}
+export { T }`)
+    expect(hasError).toBe(false)
+    assertSound(clientJs)
+  })
+})

package/src/__tests__/nested-loop-index-param.test.ts

@@ -108,6 +108,14 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
     // *after* the alias, inside the inner renderItem's own clone template.
     const templateIdx = content.indexOf('escapeText(i)', aliasIdx)
     expect(templateIdx).toBeGreaterThan(aliasIdx)
+    // #2861: a bare `{i}` — no signal, no function call anywhere in the
+    // expression — used to be classified fully static by Phase 2 and never
+    // get a `createEffect` at all, so it stayed frozen at whatever value it
+    // had when the row was first created. `classifyReactivity`'s new
+    // `loop-index` source fixes this: the index is wired through the same
+    // accessor `mapArray` already hands every row (#2859/#2860), and the
+    // slot now gets a real update effect.
+    expect(content).toContain(`createEffect(() => { __bfw_s0('s0', String(i())) })`)
   })
 
   test('index referenced in a reactive attribute expression is bound', () => {
@@ -134,6 +142,17 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
 
     expect(content).toContain('const i = __innerIdx')
     expect(content).toContain(`i % 2 === 0 ? 'even' : 'odd'`)
+    // #2861: `class={i % 2 === 0 ? …}` has no signal read and no function
+    // call — before `classifyReactivity`'s `loop-index` source existed this
+    // was classified fully static and never got a `createEffect`, so the
+    // class stayed frozen at whichever value the row was created with.
+    // The expression is read into `__x` first (#2869's dedup-guard shape,
+    // `emitDedupedAttrUpdate`) before the actual attribute write reads it
+    // back as `__v` — assert both halves rather than the old direct
+    // `const __v = <expr>` shape #2869 replaced.
+    expect(content).toMatch(
+      /createEffect\(\(\) => \{[\s\S]*?const __x = `\$\{i\(\) % 2 === 0 \? 'even' : 'odd'\}`[\s\S]*?const __v = __x;/
+    )
   })
 
   test('index referenced only in an event handler inside the inner loop is bound', () => {
@@ -223,10 +242,13 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
     expect(content).not.toContain('const id = __innerIdx')
   })
 
-  test('static inner array (no signal dependency) also binds the index alias', () => {
-    // Sibling of the reactive-path test above, exercising `emitStatic` in
-    // `stringify/inner-loop.ts` (the `forEach` renderItem path used when the
-    // inner array does not reference the outer loop param reactively).
+  test('inner array with no outer-item dependency still binds the index alias (#2865: no more static forEach)', () => {
+    // Sibling of the reactive-path test above. Before #2865, an inner loop
+    // whose array didn't reference the outer loop param was routed to
+    // `emitStatic` in `stringify/inner-loop.ts` — a hydration-only
+    // `forEach` that never wired reactivity for anything inside the row.
+    // That fork is gone: every inner loop now gets the full `mapArray`
+    // emission regardless of what its array depends on.
     const content = clientJsFor(`
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -251,7 +273,7 @@ describe('nested .map() index param referenced in key/text/attr (#2218)', () =>
       }
     `)
 
-    expect(content).toMatch(/SHARED\.forEach\(\(cell, __innerIdx[^)]+\) => \{[\s\S]*?const\s+i\s*=\s*__innerIdx/)
+    expect(content).toMatch(/mapArray\(\(\) => SHARED \|\| \[\], .*?, \(cell, __innerIdx[^)]+, __existing\) => \{[\s\S]*?const\s+i\s*=\s*__innerIdx/)
   })
 
   test('conditional-branch-arm inner loop (loop -> conditional -> inner loop) binds the index alias', () => {

package/src/__tests__/nested-loop-non-outer-reactivity.test.ts

@@ -0,0 +1,177 @@
+/**
+ * BarefootJS Compiler — nested `.map()` reactivity when the inner array
+ * (or the row's own bindings) does NOT derive from the outer loop's item.
+ *
+ * #2865: before this fix, `build-inner-loop.ts` decided "reactive vs
+ * static" for a nested loop by checking only whether `inner.array`
+ * textually referenced the OUTER loop's item — `refsParent`. Anything
+ * else the inner loop depended on fell through to a hydration-only
+ * `forEach` (`emitStatic` in `stringify/inner-loop.ts`) that never wired
+ * a single `createEffect`, regardless of whether the array itself, or a
+ * text/attr/conditional inside the row, was genuinely reactive. That
+ * fork has been removed — every nested loop now gets the full reactive
+ * `mapArray` emission unconditionally.
+ *
+ * This file pins the previously-frozen shapes directly (as opposed to
+ * `nested-loop-plain.test.ts` / `nested-loop-index-param.test.ts`, whose
+ * relevant cases were originally written to pin the OLD static shape and
+ * have been flipped in place).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function clientJsFor(source: string): string {
+  const result = compileJSX(source, 'Repro.tsx', { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')
+  expect(clientJs).toBeDefined()
+  return clientJs!.content
+}
+
+describe('nested .map() reactivity independent of the outer item (#2865)', () => {
+  test('inner array read from a component signal (not the outer item) wires a nested mapArray', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Repro() {
+        const [rows] = createSignal([{ id: 1 }])
+        const [tags] = createSignal(['x', 'y'])
+        return (
+          <div>
+            {rows().map(row => (
+              <div key={row.id}>
+                <ul>
+                  {tags().map(t => <li key={t}>{t}</li>)}
+                </ul>
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The old bug emitted `tags().forEach(...)` with no mapArray/createEffect
+    // at all — appending a tag never reached the DOM.
+    expect(content).toMatch(/mapArray\(\(\) => tags\(\) \|\| \[\], /)
+    expect(content).not.toMatch(/tags\(\)\.forEach\(/)
+  })
+
+  test('inner array read from a memo (not the outer item) wires a nested mapArray', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function Repro() {
+        const [rows] = createSignal([{ id: 1 }])
+        const [count] = createSignal(2)
+        const tags = createMemo(() => Array.from({ length: count() }, (_, i) => \`t\${i}\`))
+        return (
+          <div>
+            {rows().map(row => (
+              <div key={row.id}>
+                <ul>
+                  {tags().map(t => <li key={t}>{t}</li>)}
+                </ul>
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/mapArray\(\(\) => tags\(\) \|\| \[\], /)
+    expect(content).not.toMatch(/tags\(\)\.forEach\(/)
+  })
+
+  test('a row-content signal read (text) inside a LITERAL inner array still wires createEffect', () => {
+    // Even when the ARRAY itself is a plain constant (never needs to
+    // reconcile), a text/attr/conditional inside the row that reads a
+    // component signal must still update. The old static emitter never
+    // read `reactiveTexts`/`reactiveAttrs`/`conditionals` at all, so this
+    // froze independent of whether the array was reactive.
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      const TAGS = ['x', 'y']
+      export function Repro() {
+        const [rows] = createSignal([{ id: 1 }])
+        const [count, setCount] = createSignal(0)
+        return (
+          <div onClick={() => setCount(c => c + 1)}>
+            {rows().map(row => (
+              <div key={row.id}>
+                <ul>
+                  {TAGS.map(t => <li key={t}>{t}: {count()}</li>)}
+                </ul>
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/mapArray\(\(\) => TAGS \|\| \[\], /)
+    expect(content).toContain('createEffect(')
+    expect(content).not.toMatch(/TAGS\.forEach\(/)
+  })
+
+  test('destructured outer param used by the inner array no longer throws ReferenceError at row construction', () => {
+    // Before #2865: static mode skipped the destructure-unwrap statement,
+    // so the emitted `forEach` referenced a bare `tags` identifier that
+    // was never declared in scope.
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Row { id: number; tags: string[] }
+      export function Repro() {
+        const [rows] = createSignal<Row[]>([{ id: 1, tags: ['a', 'b'] }])
+        return (
+          <div>
+            {rows().map(({ id, tags }) => (
+              <div key={id}>
+                <ul>
+                  {tags.map(t => <li key={t}>{t}</li>)}
+                </ul>
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // `tags` must resolve through the outer row accessor
+    // (`__bfItem().tags`) — not a bare free identifier that was never
+    // declared in scope (the old static-mode bug: the destructured
+    // pattern names `tags` for the SSR template, but the reactive
+    // renderItem's own param is the whole-item accessor, and every
+    // reference to a destructured name is rewritten to go through it).
+    expect(content).toMatch(/mapArray\(\(\) => __bfItem\(\)\.tags \|\| \[\], /)
+  })
+
+  test('outer-index-derived inner array wires a nested mapArray', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Repro() {
+        const [matrix] = createSignal([['a', 'b'], ['c']])
+        return (
+          <div>
+            {matrix().map((row, i) => (
+              <div key={i}>
+                <ul>
+                  {matrix()[i].map(cell => <li key={cell}>{cell}</li>)}
+                </ul>
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toContain('mapArray(')
+    expect(content).not.toMatch(/\.forEach\(\(cell,/)
+  })
+})

package/src/__tests__/nested-loop-plain.test.ts

@@ -138,18 +138,21 @@ describe('plain nested loops without conditional wrapper', () => {
   })
 
   test('regression: 3-level nested loop wires mapArray at the deepest level (not forEach)', () => {
-    // Before the fix, `emitInnerLoopSetup` decided "is this loop reactive?"
-    // by checking the IR's `inner.refsOuterParam` — a flag set at collect
-    // time against the *outermost* loop's param only. At depth 2+, the array
-    // expression typically references the *immediate* parent (e.g.
-    // `g.items` inside `t.groups.map(g => ...)` body), so the check failed
-    // and the loop fell through to the static `forEach` branch. Result:
-    // additions / removals at the deepest level silently never reached
-    // the DOM.
+    // Originally (the O-8 narrowing fix), `emitInnerLoopSetup` decided "is
+    // this loop reactive?" by checking the IR's `inner.refsOuterParam` — a
+    // flag set at collect time against the *outermost* loop's param only.
+    // At depth 2+, the array expression typically references the
+    // *immediate* parent (e.g. `g.items` inside `t.groups.map(g => ...)`
+    // body), so the check failed and the loop fell through to the static
+    // `forEach` branch. Result: additions / removals at the deepest level
+    // silently never reached the DOM.
     //
-    // Fix: re-check dynamically at each level against the parent param
-    // passed in, and narrow the parent param when recursing into child
-    // levels.
+    // O-8's own fix: re-check dynamically at each level against the parent
+    // param passed in, and narrow the parent param when recursing into
+    // child levels. #2865 later removed the reactive/static fork (and
+    // `refsOuterParam` with it) entirely — every level is unconditionally
+    // reactive now — so this assertion holds trivially, but the test stays
+    // as a regression pin on "every depth gets its own `mapArray`."
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -293,10 +296,13 @@ describe('plain nested loops without conditional wrapper', () => {
     // locals — `initChild`'s prop getter would throw `ReferenceError` when
     // the child component first mounted.
     //
-    // Fix: thread `inner.mapPreamble` through `InnerLoopStaticEmit` and emit
-    // it (raw — `forEach`'s param is the literal item, not a signal accessor)
-    // at the top of the forEach body so the component setup can resolve the
-    // locals.
+    // Fix: thread `inner.mapPreamble` through the static-array-child-init
+    // emission (`build-static-array-child-init.ts` — the OUTER array here
+    // is a literal, so this is unrelated to #2865's nested-loop reactive/
+    // static fork, which only ever applied under a REACTIVE outer loop)
+    // and emit it (raw — `forEach`'s param is the literal item, not a
+    // signal accessor) at the top of the forEach body so the component
+    // setup can resolve the locals.
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -442,13 +448,17 @@ describe('plain nested loops without conditional wrapper', () => {
     expect(section.indexOf('const rowTag')).toBeLessThan(section.indexOf('initChild'))
   })
 
-  test('regression #1064: control-flow static inner forEach (signal outer + literal-array inner) emits inner preamble', () => {
-    // The `control-flow/inner-loop.ts::emitStatic` path fires when a
-    // reactive composite renderItem hosts a static inner loop — the
-    // outer array is a signal, but the inner array is referenced via
-    // a non-reactive lookup so its rendering stays setup-only.
-    // Use a `__innerIdx<uid>` suffix in the regex to specifically
-    // target this path (vs. the unsuffixed `static-array-child-init`).
+  test('regression #1064: reactive inner mapArray (signal outer + non-outer-derived inner array) emits inner preamble', () => {
+    // The reactive composite renderItem hosts an inner loop whose array is
+    // a non-outer-derived lookup (a module-level constant here — could just
+    // as easily be a signal, a memo, or a prop). Before #2865, an inner
+    // array not referencing the outer loop param routed to
+    // `control-flow/inner-loop.ts::emitStatic` — a hydration-only `forEach`
+    // that silently never re-ran the row's own preamble/reactivity on a
+    // later update. That fork is gone: every inner loop now gets the full
+    // `mapArray` emission. Use a `__innerIdx<uid>` suffix in the regex to
+    // specifically target the nested `mapArray` (vs. the unsuffixed
+    // `static-array-child-init` for a fully-static OUTER array).
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -480,8 +490,12 @@ describe('plain nested loops without conditional wrapper', () => {
     expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
     const js = result.files.find(f => f.type === 'clientJs')!.content
 
-    // The static forEach uses a `__innerIdx<uid>` suffix in this path —
-    // assert preamble appears in that body and precedes any prop read.
-    expect(js).toMatch(/SHARED\.forEach\(\(cell, __innerIdx\d+_\d+\) => \{[\s\S]*?const\s+tag\s*=/)
+    // The inner mapArray's renderItem uses a `__innerIdx<uid>` suffix —
+    // assert the preamble appears in that body, re-derived from the
+    // ACCESSOR form of both the outer and inner loop params (`row()`,
+    // `cell()`), and precedes the child-component prop read.
+    expect(js).toMatch(
+      /mapArray\(\(\) => SHARED \|\| \[\], .*?, \(cell, __innerIdx\d+_\d+, __existing\) => \{[\s\S]*?const\s+tag\s*=\s*`\$\{row\(\)\.key\}-\$\{cell\(\)\.n\}`[\s\S]*?upsertChild/
+    )
   })
 })

package/src/__tests__/nested-loop-reactive-attrs.test.ts

@@ -140,8 +140,10 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
     const content = result.files.find((f) => f.type === 'clientJs')!.content
 
     // `data-off` uses the truthy-check shape (no `__v != null` for this
-    // attribute) so a concrete `false` removes the attribute.
-    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?if \(c\(\)\.isOff\)\s*\S+\.setAttribute\('data-off',\s*''\)/)
+    // attribute) so a concrete `false` removes the attribute. The dedup
+    // guard (#2869) computes into `__x` first, so the truthy check reads
+    // `__x`, not `c().isOff` inline.
+    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?const __x = c\(\)\.isOff[\s\S]*?if \(__x\)\s*\S+\.setAttribute\('data-off',\s*''\)/)
     // aria-* keeps the explicit "true" value per WAI-ARIA.
     expect(content).toContain("setAttribute('aria-pressed', 'true')")
   })
@@ -233,8 +235,11 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
     // and the inner-loop reactive `createEffect` (must be `task().id`
     // to subscribe to the per-item accessor). The bug we're locking
     // down is purely in the createEffect emission, so scope to that.
+    // The object literal now sits in the dedup guard's `const __x = {...}`
+    // temp (#2869) — `styleToCss` reads it back as `styleToCss(__x)`, not
+    // the object literal inline.
     const effectMatch = content.match(
-      /createEffect\(\(\) => \{[\s\S]*?styleToCss\(\{[\s\S]*?\}\)[\s\S]*?__ta_s\d+\.setAttribute\('style'/,
+      /createEffect\(\(\) => \{[\s\S]*?const __x = \{[\s\S]*?\}[\s\S]*?styleToCss\(__x\)[\s\S]*?__ta_s\d+\.setAttribute\('style'/,
     )
     expect(effectMatch).not.toBeNull()
     const effectBody = effectMatch![0]
@@ -282,8 +287,11 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
     const result = compileJSX(source, 'G.tsx', { adapter })
     expect(result.errors).toHaveLength(0)
     const content = result.files.find((f) => f.type === 'clientJs')!.content
+    // The object literal now sits in the dedup guard's `const __x = {...}`
+    // temp (#2869) — `styleToCss` reads it back as `styleToCss(__x)`, not
+    // the object literal inline.
     const effectMatch = content.match(
-      /createEffect\(\(\) => \{[\s\S]*?styleToCss\(\{[\s\S]*?\}\)[\s\S]*?__ta_s\d+\.setAttribute\('style'/,
+      /createEffect\(\(\) => \{[\s\S]*?const __x = \{[\s\S]*?\}[\s\S]*?styleToCss\(__x\)[\s\S]*?__ta_s\d+\.setAttribute\('style'/,
     )
     expect(effectMatch).not.toBeNull()
     const effectBody = effectMatch![0]