@barefootjs/jsx 0.35.0 → 0.35.1

package/src/__tests__/issue-2868-cond-arm-tag-collision.test.ts

@@ -0,0 +1,185 @@
+/**
+ * #2868: a reactive conditional branch's own re-render `template()` builder
+ * could corrupt a tag name that collides with an enclosing `.map()`'s
+ * item/index parameter — `<i>` became `<i()>` — because the loop-param
+ * accessor rewrite ran as a word-boundary regex over the branch's already-
+ * assembled HTML string, and `<`/`>` are non-word characters so `<i>` and
+ * `<i` + identifier `i` are indistinguishable to that regex.
+ *
+ * Fixed by rendering every branch's HTML against the full loop-param chain
+ * at IR time (`irToHtmlTemplate`'s `loopParams`) and deleting the post-hoc
+ * regex pass entirely — `wrapLoopParamAsAccessor` only ever runs over
+ * parsed JS expression positions now, never over assembled markup.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+function compile(source: string): string {
+  const r = compileJSX(source, 'T.tsx', { adapter: new TestAdapter() })
+  expect(r.errors).toEqual([])
+  return r.files.find((f) => f.type === 'clientJs')?.content ?? ''
+}
+
+/** No tag name (or attribute) was corrupted into an accessor call. */
+function expectNoCorruption(clientJs: string): void {
+  expect(clientJs).not.toMatch(/<\/?[A-Za-z][\w-]*\(\)/)
+  expect(clientJs).not.toMatch(/[\w-]+\(\)=["']/)
+}
+
+describe('reactive conditional branch does not corrupt a colliding tag name (#2868)', () => {
+  test('index param named like the branch tag (<i>) — eager row (forced via ref)', () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: 'a' }, { id: 'b' }])
+  const [flag] = createSignal(true)
+  return (
+    <ul>
+      {items().map((item, i) => (
+        <li key={item.id} ref={(el: HTMLElement | null) => {}}>
+          {flag() ? <b>even</b> : <i>odd</i>}
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+    expect(clientJs).toContain('<i bf-c="s0">odd</i>')
+  })
+
+  test('item param named like the branch tag (<b>)', () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: 'a' }])
+  const [flag] = createSignal(true)
+  return (
+    <ul>
+      {items().map((b) => (
+        <li key={b.id} ref={(el: HTMLElement | null) => {}}>
+          {flag() ? <b>even</b> : <em>odd</em>}
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+  })
+
+  test('nested conditional inside a branch arm', () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: 'a' }])
+  const [outer, setOuter] = createSignal(true)
+  const [inner] = createSignal(true)
+  return (
+    <ul>
+      {items().map((item, i) => (
+        <li key={item.id} ref={(el: HTMLElement | null) => {}}>
+          {outer() ? (inner() ? <b>x</b> : <i>y</i>) : <em>z</em>}
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+  })
+
+  test('row template (build-plain-row): index-named tag as the row root, no ref forcing eager', () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: 'a' }])
+  return (
+    <ul>
+      {items().map((item, i) => (
+        <li key={item.id} ref={(el: HTMLElement | null) => {}}>
+          <i>{i}</i>
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+  })
+
+  test('child component prop inside a reactive conditional branch reads the loop item live (#2868 follow-up)', () => {
+    // `irToHtmlTemplate`'s `case 'component':` branch never ran the prop
+    // expression through `wrapExpr` — a pre-existing gap that #2868's own
+    // fix exposed by deleting the post-hoc `wrapLoopParamAsAccessor` regex
+    // pass that had accidentally been fixing it too. Caught by a real
+    // `site/ui` component (`DashboardBuilderDemo`), not by any fixture in
+    // #2868's own PR.
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function Badge(props: { text: string }) {
+  return <span>{props.text}</span>
+}
+function T() {
+  const [items] = createSignal([{ id: 'a', active: true, label: 'A' }])
+  return (
+    <ul>
+      {items().map((item, i) => (
+        <li key={item.id} ref={(el: HTMLElement | null) => {}}>
+          {item.active ? <Badge text={item.label} /> : null}
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T, Badge }`)
+    expectNoCorruption(clientJs)
+    // The branch's re-render template (the `insert(...)` reactive-update
+    // path, NOT the outer static SSR template built once from the literal
+    // array) must read the row's live item accessor (`item()`), not the
+    // bare loop param (`item`) — a bare reference would stringify to the
+    // destructured item at row-creation time and never update after that.
+    const insertCall = clientJs.slice(clientJs.indexOf('insert(__el'), clientJs.indexOf("}, 'l0')"))
+    expect(insertCall).toContain("renderChild('Badge', {text: item().label}")
+    expect(insertCall).not.toContain("renderChild('Badge', {text: item.label}")
+  })
+
+  test("nested .map() conditional arm reads the OUTER loop's own index (ancestor chain)", () => {
+    const clientJs = compile(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [groups] = createSignal([{ id: 'g1', kids: [{ id: 'k1' }] }])
+  const [flag] = createSignal(true)
+  return (
+    <ul>
+      {groups().map((group, gi) => (
+        <li key={group.id}>
+          <ul>
+            {group.kids.map((kid) => (
+              <li key={kid.id}>
+                {flag() ? <b>{gi}</b> : <em>none</em>}
+              </li>
+            ))}
+          </ul>
+        </li>
+      ))}
+    </ul>
+  )
+}
+export { T }`)
+    expectNoCorruption(clientJs)
+    // The outer index must be called as an accessor inside the inner loop's
+    // branch arm, not passed by reference — passing the bare function would
+    // stringify to its source text instead of its current value.
+    expect(clientJs).toContain('gi()')
+    expect(clientJs).not.toMatch(/__bfSlot\(gi,/)
+  })
+})

package/src/__tests__/issue-2869-attr-dedup-guard.test.ts

@@ -0,0 +1,141 @@
+/**
+ * Codegen-shape pins for #2869: every eager reactive-attribute write must go
+ * through `emitDedupedAttrUpdate` (`emit-reactive.ts`), never `emitAttrUpdate`
+ * directly from an effect body. These are cheap shape assertions alongside
+ * the behavioral regression test in
+ * `packages/client/__tests__/runtime/issue-2869-attr-dedup-guard.test.ts`,
+ * which is the one that actually proves the fix (this file cannot observe
+ * write counts over time, only the emitted source shape).
+ */
+
+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, options: Parameters<typeof compileJSX>[2] = { adapter }): string {
+  const result = compileJSX(source, 'Repro.tsx', options)
+  const errors = result.errors.filter(e => e.severity === 'error')
+  expect(errors).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')?.content
+  if (!clientJs) throw new Error('No client JS emitted')
+  return clientJs
+}
+
+// Non-loop per-slot reactive attrs (`emitReactiveAttributeUpdates`) — two
+// attrs sharing one element, one of them wrapped in `untrack`.
+const NON_LOOP_SOURCE = `'use client'
+import { createSignal, untrack } from '@barefootjs/client'
+
+function docFor(n: number): string {
+  return 'doc-' + n
+}
+
+export function Repro() {
+  const [count, setCount] = createSignal(0)
+  const [step, setStep] = createSignal(1)
+  return (
+    <div>
+      <button class="count" onClick={() => setCount(c => c + 1)}>count</button>
+      <button class="step" onClick={() => setStep(s => s + 1)}>step</button>
+      <p class="target" title={String(count())} data-doc={untrack(() => docFor(step()))}>x</p>
+    </div>
+  )
+}
+`
+
+// Keyed \`.map()\` row whose bindings share one fused row effect
+// (\`emitConsolidatedRowEffect\`). The loop source is a module-level function
+// call (not a signal/prop/literal), so \`lazy-row-eligibility.ts\`'s §9.3(2)
+// hydration-consistency gate refuses lazy adoption and the loop takes the
+// eager \`stringifyPlainLoop\` -> \`emitConsolidatedRowEffect\` path — the
+// primary site #2869 reports. Asserted below (\`mapArray(\` present,
+// \`mapArrayLazy(\` absent) so a future eligibility widening fails this test
+// loudly instead of silently moving the repro onto the already-guarded path.
+const LOOP_SOURCE = `'use client'
+import { createSignal, untrack } from '@barefootjs/client'
+
+function seedItems() {
+  return [{ id: 1, label: 'a' }, { id: 2, label: 'b' }]
+}
+
+function docFor(id: number): string {
+  return 'doc-' + id
+}
+
+export function Repro() {
+  const [items, setItems] = createSignal(seedItems())
+  return (
+    <div>
+      <button onClick={() => setItems(items().map(it => ({ id: it.id, label: it.label + '!' })))}>bump</button>
+      <ul>
+        {items().map(item => (
+          <li key={item.id} title={item.label} data-doc={untrack(() => docFor(item.id))}>{item.label}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+`
+
+describe('#2869 — every eager reactive-attr write goes through emitDedupedAttrUpdate', () => {
+  test('non-loop reactive attrs: one shared __l store, sequential ordinals, guarded writes', () => {
+    const clientJs = clientJsFor(NON_LOOP_SOURCE)
+
+    expect(clientJs).toContain('const __l = []')
+    expect(clientJs).toContain('!(0 in __l) || !Object.is(__l[0], __x)')
+    expect(clientJs).toContain('!(1 in __l) || !Object.is(__l[1], __x)')
+    expect(clientJs).toContain('__l[0] = __x')
+    expect(clientJs).toContain('__l[1] = __x')
+
+    // Exactly one store for this element's effect — not one per attr.
+    const storeCount = clientJs.split('const __l = []').length - 1
+    expect(storeCount).toBe(1)
+  })
+
+  test('fused row effect (emitConsolidatedRowEffect): eager mapArray path, guarded per binding', () => {
+    const clientJs = clientJsFor(LOOP_SOURCE)
+
+    // Pin the eager path — the whole point of this fixture is exercising
+    // `emitConsolidatedRowEffect`, not the already-guarded lazy row graph.
+    expect(clientJs).toContain('mapArray(')
+    expect(clientJs).not.toContain('mapArrayLazy(')
+
+    expect(clientJs).toContain('const __l = []')
+    expect(clientJs).toContain('!(0 in __l) || !Object.is(__l[0], __x)')
+    expect(clientJs).toContain('!(1 in __l) || !Object.is(__l[1], __x)')
+
+    const storeCount = clientJs.split('const __l = []').length - 1
+    expect(storeCount).toBe(1)
+  })
+
+  test('profile mode keeps one createEffect per attr, still guarded', () => {
+    const clientJs = clientJsFor(LOOP_SOURCE, { adapter, profile: true })
+
+    // Granularity preserved: two attrs on the row's slot -> two createEffect
+    // calls (module docstring in reactive-effects.ts explains why profile
+    // mode cannot consolidate — the profiler needs one bfId per binding).
+    const effectCount = clientJs.split('createEffect(() => {').length - 1
+    expect(effectCount).toBeGreaterThanOrEqual(2)
+    expect(clientJs).toContain('const __l = []')
+    expect(clientJs).toContain('!(0 in __l) || !Object.is(__l[0], __x)')
+  })
+
+  test('emitAttrUpdate is never called directly from an effect-body emitter outside emit-reactive.ts', () => {
+    // Shrink-only ledger, same idea as binding-scope-ratchet.test.ts: every
+    // eager call site must go through emitDedupedAttrUpdate. lazy-row.ts's
+    // own dedup mechanism is unified onto the same helper (#2869), so this
+    // is a plain, unconditional invariant now — no allowlist needed.
+    const glob = new Bun.Glob('**/*.ts')
+    const root = new URL('../ir-to-client-js/', import.meta.url).pathname
+    const offenders: string[] = []
+    for (const file of glob.scanSync({ cwd: root })) {
+      if (file.endsWith('emit-reactive.ts')) continue
+      if (file.includes('__tests__')) continue
+      const text = require('node:fs').readFileSync(`${root}${file}`, 'utf8')
+      if (/\bemitAttrUpdate\(/.test(text)) offenders.push(file)
+    }
+    expect(offenders).toEqual([])
+  })
+})

package/src/__tests__/loop-index-reactivity.test.ts

@@ -0,0 +1,208 @@
+/**
+ * #2861: a `.map()` row's index-derived output stays live even when the
+ * expression reads NOTHING else reactive — no item, no signal, no memo, no
+ * function call. `String(i + 1)`-shaped expressions were already fixed by
+ * #2859/#2860 (they trip the AST-flag function-call fallback); this file
+ * covers the residual gap `classifyReactivity` had no case for at all: a
+ * bare `{i}` text, an `i % 2 === 0 ? … : …` class/conditional, and the
+ * same shapes one level deeper when the index in question belongs to an
+ * OUTER loop, not the row's own.
+ *
+ * Root cause (see `reactivity.ts`'s `ReactivitySource`/`classifyReactivity`
+ * doc comments): Phase 1 (`jsx-to-ir.ts`'s `referencesLoopParam`, via
+ * `BindingScope.valueBoundNames()`) already grants such an expression a
+ * patchable slot — item/index/destructure are graneted a slot together —
+ * but Phase 2's `classifyReactivity` had no `loop-index` case mirroring its
+ * existing `loop-param` one, so the slot was written once at row-creation
+ * time and never revisited.
+ */
+
+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('plain loop: pure index-only expressions (#2861)', () => {
+  test('bare {i} text wires reactively through the lazy row graph', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Repro() {
+        const [items] = createSignal([{ id: 'a' }, { id: 'b' }, { id: 'c' }])
+        return (
+          <ul>
+            {items().map((item, i) => (
+              <li key={item.id}>{i}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+
+    // No refs/child components/inner loops — this row is lazy-eligible, and
+    // the widened `classifyLazyBinding` (#2859/#2860 stacked work) already
+    // routes an index-only binding into applyItem/indexDriven once it's
+    // collected at all — which is exactly the part #2861 fixes.
+    expect(content).toContain('mapArrayLazy(')
+    expect(content).toContain('indexDriven: true')
+    expect(content).toMatch(/applyItem: \(__e\) => \{[\s\S]*?const i = __e\.index/)
+  })
+
+  test('class={i % 2 === 0 ? … : …} wires a createEffect on the eager path', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Repro() {
+        const [items] = createSignal([{ id: 'a' }, { id: 'b' }])
+        return (
+          <ul>
+            {items().map((item, i) => (
+              <li key={item.id} class={i % 2 === 0 ? 'even' : 'odd'} ref={(el: HTMLElement | null) => {}}>{item.id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+
+    // A ref forces the eager `mapArray` path (no lazy row graph for rows
+    // that own an imperative ref) — the class binding must still be wired
+    // through a per-item `createEffect` reading the index ACCESSOR (#2859).
+    // The expression is read into `__x` first (#2869's dedup-guard shape,
+    // `emitDedupedAttrUpdate`) before the write reads it back as `__v`.
+    expect(content).toContain('mapArray(')
+    expect(content).toMatch(
+      /createEffect\(\(\) => \{[\s\S]*?const __x = `\$\{i\(\) % 2 === 0 \? 'even' : 'odd'\}`[\s\S]*?const __v = __x;/
+    )
+  })
+
+  test('an index-only conditional ({i % 2 === 0 ? <b/> : <em/>}) reconciles reactively on the lazy path', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Repro() {
+        const [items] = createSignal([{ id: 'a' }, { id: 'b' }])
+        return (
+          <ul>
+            {items().map((item, i) => (
+              <li key={item.id}>{i % 2 === 0 ? <b>even</b> : <em>odd</em>}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+
+    // Before #2861 this pre-gate (`collectLoopChildConditionals`'s
+    // `refsAnyBindingViaFreeIds`) never even reached `classifyReactivity` —
+    // an index-only condition died at the AST-`reactive`-flag short-circuit
+    // and baked into `createRow` only, once, forever.
+    expect(content).toContain('mapArrayLazy(')
+    expect(content).toMatch(/applyItem: \(__e\) => \{[\s\S]*?const i = __e\.index/)
+    expect(content).toContain('!!(i % 2 === 0)')
+  })
+})
+
+describe('nested loop: referencing an OUTER loop\'s own index (#2861)', () => {
+  test('composite path: inner row text reads the outer index through its accessor', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: string; label: string }
+      interface Group { id: string; items: Item[] }
+      export function Repro() {
+        const [groups] = createSignal<Group[]>([])
+        return (
+          <div>
+            {groups().map((g, gi) => (
+              <div key={g.id}>
+                {g.items.map((it) => (
+                  <span key={it.id}>{gi}-{it.label}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The inner mapArray's own renderItem has no `gi` param at all — the
+    // outer accessor must be read directly by name, exactly as `item()`
+    // reads the outer ITEM in the sibling case #2865 already covers.
+    expect(content).toMatch(
+      /mapArray\(\(\) => g\(\)\.items \|\| \[\], .*?, \(it, __innerIdx\d+_\d+, __existing\) => \{[\s\S]*?createEffect\(\(\) => \{ __bfw_s0\('s0', String\(gi\(\)\)\) \}\)/
+    )
+  })
+
+  test('composite path: inner row class attr reads the outer index through its accessor', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: string }
+      interface Group { id: string; items: Item[] }
+      export function Repro() {
+        const [groups] = createSignal<Group[]>([])
+        return (
+          <div>
+            {groups().map((g, gi) => (
+              <div key={g.id}>
+                {g.items.map((it) => (
+                  <span key={it.id} class={gi % 2 === 0 ? 'even' : 'odd'}>{it.id}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The expression is read into `__x` first (#2869's dedup-guard shape,
+    // `emitDedupedAttrUpdate`) before the write reads it back as `__v`.
+    expect(content).toMatch(
+      /createEffect\(\(\) => \{[\s\S]*?const __x = `\$\{gi\(\) % 2 === 0 \? 'even' : 'odd'\}`[\s\S]*?const __v = __x;/
+    )
+  })
+
+  test('conditional-branch-arm path: a loop nested inside a branch reads the OUTER (pre-branch) loop\'s index', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Item { id: string; text: string }
+      interface Group { id: string; flag: boolean; items: Item[] }
+      export function Repro() {
+        const [outer] = createSignal<Group[]>([])
+        return (
+          <div>
+            {outer().map((o, oi) => (
+              <div key={o.id}>
+                {o.flag ? (
+                  <div>
+                    {o.items.map((item) => (
+                      <span key={item.id}>{oi}: {item.text}</span>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // Before #2861, `collectInnerLoops` (called from `summarizeLoopChildBranch`
+    // for a loop nested inside a conditional arm) only ever built a scope
+    // from the INNER loop's own param/index — a row referencing the loop
+    // ONE LEVEL UP (the one whose conditional this branch belongs to) was
+    // classified 'none' and baked once into the branch's initial template.
+    expect(content).toMatch(
+      /mapArray\(\(\) => o\(\)\.items \|\| \[\], .*?, \(item, __bidxbr_\d+, __existing\) => \{[\s\S]*?createEffect\(\(\) => \{ __bfw_s1\('s1', String\(oi\(\)\)\) \}\)/
+    )
+  })
+})