@barefootjs/jsx 0.18.4 → 0.18.7

package/src/__tests__/expression-parser.test.ts

@@ -70,6 +70,43 @@ describe('expression-parser', () => {
       expect(result.kind).toBe('member')
       if (result.kind === 'member') {
         expect(result.property).toBe('name')
+        expect(result.optional).toBe(false)
+      }
+    })
+
+    // #2168 optional-chaining-prop: `optional` must reflect the source `?.`
+    // token exactly — set on the one written hop, `false` everywhere else
+    // (a plain `.`/`[]` access, including a literal-index computed access).
+    test('parses optional chaining (?.) into `member.optional`', () => {
+      const dotResult = parseExpression('user?.name')
+      expect(dotResult.kind).toBe('member')
+      if (dotResult.kind === 'member') {
+        expect(dotResult.property).toBe('name')
+        expect(dotResult.computed).toBe(false)
+        expect(dotResult.optional).toBe(true)
+      }
+
+      const stringKeyResult = parseExpression("obj?.['key']")
+      expect(stringKeyResult.kind).toBe('member')
+      if (stringKeyResult.kind === 'member') {
+        expect(stringKeyResult.property).toBe('key')
+        expect(stringKeyResult.computed).toBe(true)
+        expect(stringKeyResult.optional).toBe(true)
+      }
+
+      const numericIndexResult = parseExpression('arr?.[0]')
+      expect(numericIndexResult.kind).toBe('member')
+      if (numericIndexResult.kind === 'member') {
+        expect(numericIndexResult.property).toBe('0')
+        expect(numericIndexResult.computed).toBe(true)
+        expect(numericIndexResult.optional).toBe(true)
+      }
+
+      // Non-optional literal-index access stays `optional: false`.
+      const plainIndexResult = parseExpression('arr[0]')
+      expect(plainIndexResult.kind).toBe('member')
+      if (plainIndexResult.kind === 'member') {
+        expect(plainIndexResult.optional).toBe(false)
       }
     })
 
@@ -1230,6 +1267,7 @@ describe('expression-parser', () => {
         object: { kind: 'identifier', name: 'x' },
         property: 'done',
         computed: false,
+        optional: false,
       })
     })
 

package/src/__tests__/inner-loop-svg-namespace.test.ts

@@ -0,0 +1,245 @@
+/**
+ * SVG-rooted loop item templates cloned via `template.innerHTML` (#2219).
+ *
+ * `template.innerHTML` parses in the HTML namespace, so an inner reactive
+ * loop whose item root is an SVG element (`<line>`, `<circle>`, ...) cloned
+ * as an `HTMLUnknownElement` — present in the DOM but never drawn by the
+ * SVG renderer, with no error. The top-level loop path has wrapped these
+ * templates in a synthetic `<svg>` since #135/#1088 (`templateRootIsSvg` /
+ * `emitTemplateCloneInline` in `stringify/template-parse.ts`) and the
+ * branch-arm path since its plan-ification, but the inner-loop reactive
+ * clone (`stringify/inner-loop.ts`) and the static-loop CSR materialize
+ * clones (#1247, `stringify/loop.ts`) parsed bare and stayed in the wrong
+ * namespace.
+ *
+ * The fix mirrors the established wrap: parse `<svg>${template}</svg>` and
+ * descend one extra level (`.firstElementChild.firstElementChild`).
+ * HTML-rooted templates keep byte-identical output.
+ */
+
+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('inner reactive loop with an SVG element root (#2219)', () => {
+  test('SVG-rooted inner item clones inside a synthetic <svg> wrap', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Sheet { id: number; ticks: number[] }
+      export function Repro() {
+        const [sheets] = createSignal<Sheet[]>([])
+        return (
+          <div>
+            {sheets().map((s) => (
+              <svg key={s.id} viewBox="0 0 100 100">
+                {s.ticks.map((y) => (
+                  <line key={y} x1="0" x2="100" y1={y} y2={y} stroke="black" />
+                ))}
+              </svg>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The inner renderItem clone parses inside `<svg>...</svg>` and descends
+    // one extra level to reach the real `<line>` root.
+    expect(content).toMatch(/__t\.innerHTML = `<svg><line /)
+    expect(content).toContain('return __t.content.firstElementChild.firstElementChild.cloneNode(true)')
+  })
+
+  test('HTML-rooted inner item keeps the bare clone byte-identical', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Group { id: number; items: string[] }
+      export function Repro() {
+        const [groups] = createSignal<Group[]>([])
+        return (
+          <ul>
+            {groups().map((g) => (
+              <li key={g.id}>
+                {g.items.map((t) => (
+                  <span key={t}>{t}</span>
+                ))}
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/__t\.innerHTML = `<span /)
+    expect(content).toContain('return __t.content.firstElementChild.cloneNode(true)')
+    // No synthetic wrap anywhere in the inner clone.
+    expect(content).not.toContain('`<svg><span')
+  })
+
+  test('conditional inner body whose branches are all SVG wraps too (#1088 shape)', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Sheet { id: number; ticks: number[] }
+      export function Repro() {
+        const [sheets] = createSignal<Sheet[]>([])
+        return (
+          <div>
+            {sheets().map((s) => (
+              <svg key={s.id}>
+                {s.ticks.map((y) => (
+                  y > 50
+                    ? <line key={y} y1={y} y2={y} />
+                    : <circle key={y} cy={y} r="1" />
+                ))}
+              </svg>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // Both branches are SVG roots, so the interpolated conditional template
+    // still gets the wrap (templateRootIsSvg recurses into the branches).
+    expect(content).toMatch(/__t\.innerHTML = `<svg>\$\{/)
+    expect(content).toContain('return __t.content.firstElementChild.firstElementChild.cloneNode(true)')
+  })
+})
+
+describe('reactive multi-root fragment with an <svg>-container first root (#2233 review)', () => {
+  test('emitMultiRootTemplateCloneLines skips the wrap for <svg>-first fragments', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Chart { id: number; r: number }
+      export function Repro() {
+        const [charts] = createSignal<Chart[]>([])
+        return (
+          <div>
+            {charts().map((c) => (
+              <>
+                <svg key={c.id} viewBox="0 0 10 10"><circle r={c.r} /></svg>
+                <span>{c.id}</span>
+              </>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The multi-root clone parses the fragment bare — no synthetic wrap —
+    // so the HTML <span> sibling stays in the HTML namespace.
+    expect(content).not.toContain('`<svg><svg')
+    expect(content).toContain('__tpl.content.firstElementChild.cloneNode(true)')
+  })
+})
+
+describe('static-loop CSR materialize with an SVG element root (#2219, #1247 path)', () => {
+  test('SVG-rooted materialize clone wraps and descends the extra level', () => {
+    const content = clientJsFor(`
+      'use client'
+      type Props = { ticks: Record<string, number> }
+      export function Repro(props: Props) {
+        const entries = Object.entries(props.ticks ?? {}).filter(([, y]) => y > 0)
+        return (
+          <svg viewBox="0 0 100 100">
+            {entries.map(([id, y]) => (
+              <line key={id} x1="0" x2="100" y1={y} y2={y} />
+            ))}
+          </svg>
+        )
+      }
+    `)
+
+    // Materialize branch present (unsafe prop-derived array, #1247) ...
+    expect(content).toMatch(/if \(!__iterEl\)/)
+    // ... and its template parse is namespace-aware.
+    expect(content).toMatch(/__tpl\.innerHTML = `<svg><line /)
+    expect(content).toContain('const __cloned = __tpl.content.firstElementChild.firstElementChild')
+  })
+
+  test('multi-root (fragment) SVG materialize iterates the wrap one level down', () => {
+    const content = clientJsFor(`
+      'use client'
+      type Props = { ticks: Record<string, number> }
+      export function Repro(props: Props) {
+        const entries = Object.entries(props.ticks ?? {}).filter(([, y]) => y > 0)
+        return (
+          <svg viewBox="0 0 100 100">
+            {entries.map(([id, y]) => (
+              <>
+                <line key={id} x1="0" x2="100" y1={y} y2={y} />
+                <text x="0" y={y}>{id}</text>
+              </>
+            ))}
+          </svg>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/__mtpl\.innerHTML = `<svg><line /)
+    // Sibling iteration starts inside the synthetic wrap.
+    expect(content).toContain('let __sib = __mtpl.content.firstElementChild.firstElementChild')
+  })
+
+  test('<svg>-container-first fragment is NOT over-wrapped (#2233 review)', () => {
+    // An <svg> CONTAINER parses into the correct namespace bare — the HTML
+    // parser enters foreign content on its own. Wrapping the whole fragment
+    // would drag the HTML <span> sibling into the SVG namespace instead.
+    const content = clientJsFor(`
+      'use client'
+      type Props = { charts: Record<string, number> }
+      export function Repro(props: Props) {
+        const entries = Object.entries(props.charts ?? {}).filter(([, v]) => v > 0)
+        return (
+          <div>
+            {entries.map(([id, v]) => (
+              <>
+                <svg key={id} viewBox="0 0 10 10"><circle r={v} /></svg>
+                <span>{id}</span>
+              </>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/__mtpl\.innerHTML = `<svg /)
+    expect(content).not.toContain('`<svg><svg')
+    // Sibling iteration starts at the template content directly (no wrap).
+    expect(content).toContain('let __sib = __mtpl.content.firstElementChild')
+    expect(content).not.toContain('let __sib = __mtpl.content.firstElementChild.firstElementChild')
+  })
+
+  test('HTML-rooted materialize clone keeps the bare parse byte-identical', () => {
+    const content = clientJsFor(`
+      'use client'
+      type Props = { reactions: Record<string, string[]> }
+      export function Repro(props: Props) {
+        const entries = Object.entries(props.reactions ?? {}).filter(([, users]) => users.length > 0)
+        return (
+          <div>
+            {entries.map(([emoji, users]) => (
+              <button key={emoji} type="button">{emoji}: {String(users.length)}</button>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/if \(!__iterEl\)/)
+    expect(content).toMatch(/__tpl\.innerHTML = `<button /)
+    expect(content).toContain('const __cloned = __tpl.content.firstElementChild')
+    expect(content).not.toContain('`<svg>')
+  })
+})

package/src/__tests__/ir-walker.test.ts

@@ -53,6 +53,7 @@ function loop(children: IRNode[]): IRNode {
     markerId: 'l0',
     loc,
     isStaticArray: false,
+    depth: 0,
   }
 }
 

package/src/__tests__/loop-bound-names.test.ts

@@ -0,0 +1,102 @@
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { collectLoopBoundNames } from '../adapters/loop-bound-names'
+import type { ComponentIR } from '../types'
+
+// #2212 (Fable review): `collectLoopBoundNames` finds every name a loop
+// callback binds as its item/index parameter, so each adapter's
+// `collectStringValueNames` can exclude it from string-concat detection —
+// a loop param shadowing an outer string-typed binding of the same name
+// must never be misdetected as string-typed.
+describe('collectLoopBoundNames (#2212)', () => {
+  // `collectLoopBoundNames` only reads `.root`; the rest of `ComponentIR`
+  // is irrelevant to this walk, so a minimal stand-in is fine here.
+  function ir(source: string): ComponentIR {
+    const ctx = analyzeComponent(source, 'Test.tsx')
+    const root = jsxToIR(ctx)
+    if (!root) throw new Error('expected IR')
+    return { version: '0.1', metadata: {} as ComponentIR['metadata'], root, errors: [] }
+  }
+
+  test('a component with no loops has no bound names', () => {
+    const component = ir(`
+      function Test() { return <div>hi</div> }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component).size).toBe(0)
+  })
+
+  test('a simple loop param is bound', () => {
+    const component = ir(`
+      function Test({ items }: { items: string[] }) {
+        return <ul>{items.map(name => <li key={name}>{name}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['name']))
+  })
+
+  test('both item and index params are bound', () => {
+    const component = ir(`
+      function Test({ items }: { items: string[] }) {
+        return <ul>{items.map((name, idx) => <li key={idx}>{name}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['name', 'idx']))
+  })
+
+  test('nested loops contribute all their params', () => {
+    const component = ir(`
+      function Test({ groups }: { groups: { label: string; items: string[] }[] }) {
+        return <div>{groups.map(group => <ul key={group.label}>{group.items.map(item => <li key={item}>{item}</li>)}</ul>)}</div>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['group', 'item']))
+  })
+
+  test('a loop body wrapping a child component still contributes its param', () => {
+    const component = ir(`
+      import { Row } from './row'
+      function Test({ items }: { items: string[] }) {
+        return <ul>{items.map(item => <Row key={item} label={item} />)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['item']))
+  })
+
+  // Fable re-review (#2212): `param` holds the raw pattern text for a
+  // destructured callback (`"{ name }"`), not the bound name itself — the
+  // real bound names live in `paramBindings`. Adapters that lower a
+  // destructure to a `{% set name = __bf_item.name %}`-style local (#2087)
+  // leave `name` reachable as a bare identifier in the loop body, so it
+  // needs the same exclusion as a plain loop param. `node.param`'s raw
+  // pattern text still ends up in the set too (added unconditionally,
+  // before this arm existed) — harmless noise, since it can never collide
+  // with a real identifier name.
+  test('a destructured loop param contributes its extracted binding names', () => {
+    const component = ir(`
+      function Test({ rows }: { rows: { name: string }[] }) {
+        return <ul>{rows.map(({ name }) => <li key={name}>{name}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['{ name }', 'name']))
+  })
+
+  // Fable re-review (#2212): a `.filter(pred).map(cb)` chain's filter
+  // predicate is emitted through the same binary/string-name machinery
+  // using its OWN param, which may differ from the map callback's `param`.
+  test('a filter().map() chain contributes both the filter predicate param and the map param', () => {
+    const component = ir(`
+      function Test({ values }: { values: number[] }) {
+        return <ul>{values.filter(n => n > 3).map(v => <li key={v}>{v}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['n', 'v']))
+  })
+})

package/src/__tests__/loop-plan-classification.test.ts

@@ -92,6 +92,7 @@ describe('buildLoopPlan decision tree (#1253)', () => {
             kind: 'nested',
             array: 'item.subs',
             param: 'sub',
+            index: null,
             key: null,
             markerId: 'inner-m1',
             template: '<span></span>',
@@ -161,6 +162,7 @@ describe('buildLoopPlan decision tree (#1253)', () => {
             kind: 'nested',
             array: 'item.subs',
             param: 'sub',
+            index: null,
             key: null,
             markerId: 'inner-m1',
             template: '<span></span>',