@barefootjs/jsx 0.17.0 → 0.18.0

package/src/__tests__/loop-hoisted-template.test.ts

@@ -0,0 +1,235 @@
+/**
+ * Hoisted shared-template fast path for `mapArray` loop bodies (perf).
+ *
+ * Background: the legacy emission builds a fresh `document.createElement
+ * ('template')` + interpolated `innerHTML` per row inside `renderItem`,
+ * re-parsing the same HTML shape on every iteration and re-computing
+ * `escapeText`/`escapeAttr` for values a loop-child `createEffect` is about
+ * to overwrite anyway on its eager first run (double work). When the loop
+ * body is a statically-analyzable single-root element tree whose dynamic
+ * parts are text/attribute slots already covered by a loop-child effect,
+ * `buildLoopSkeletonTemplate` (html-template.ts) builds a STATIC-ONLY
+ * skeleton once, and the stringifier (`control-flow/stringify/loop.ts`)
+ * declares it before the `mapArray` call and clones from it per row instead.
+ *
+ * These tests pin:
+ *   - the fast path fires for the classic js-framework-benchmark row shape
+ *     (reactive class attr + two reactive text slots + static cells)
+ *   - the hoisted template contains no `${...}` interpolations and no
+ *     escapeText/escapeAttr calls
+ *   - the fast path refuses (falls back to the legacy per-row emission) for
+ *     an inline ternary/conditional body
+ *   - the fast path refuses for a loop body carrying a `{...spread}` attr
+ *   - an SVG loop body either takes the fast path with the correct
+ *     `<svg>`-wrapped clone, or falls back — never silently mis-namespaces
+ *   - the SSR-mirror `template:` lambda is unaffected either way (still
+ *     carries the fully interpolated per-row template with escaping)
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function compile(source: string, filename: string): { clientJs: string; template: string } {
+  const result = compileJSX(source, filename, { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')
+  const template = result.files.find(f => f.type === 'markedTemplate')
+  expect(clientJs).toBeDefined()
+  expect(template).toBeDefined()
+  return { clientJs: clientJs!.content, template: template!.content }
+}
+
+describe('hoisted loop-body skeleton template (perf)', () => {
+  test('fast path applies to the classic benchmark row shape', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface RowData { id: number; label: string }
+
+      export function Bench() {
+        const [rows, setRows] = createSignal<RowData[]>([])
+        const [selected, setSelected] = createSignal<number>(0)
+        return (
+          <table>
+            <tbody>
+              {rows().map(row => (
+                <tr key={row.id} className={selected() === row.id ? 'danger' : ''}>
+                  <td className="col-md-1">{row.id}</td>
+                  <td className="col-md-4">
+                    <a className="lbl" onClick={() => setSelected(row.id)}>{row.label}</a>
+                  </td>
+                  <td className="col-md-6"></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )
+      }
+    `
+    const { clientJs, template } = compile(source, 'Bench.tsx')
+
+    // Hoisted declaration present, before the mapArray call.
+    const declIdx = clientJs.indexOf('.innerHTML = `<tr')
+    const mapArrayIdx = clientJs.indexOf('mapArray(')
+    expect(declIdx).toBeGreaterThan(-1)
+    expect(mapArrayIdx).toBeGreaterThan(-1)
+    expect(declIdx).toBeLessThan(mapArrayIdx)
+
+    // renderItem clones from the hoisted template instead of re-parsing
+    // innerHTML per row.
+    expect(clientJs).toMatch(/const __el = __existing \?\? __tpl_\w+\.content\.firstElementChild\.cloneNode\(true\)/)
+
+    // The hoisted template itself carries no interpolations and no dynamic
+    // `class` attribute (that's covered by the reactive-attr createEffect).
+    const declMatch = clientJs.match(/\.innerHTML = `(<tr[^\n]*<\/tr>)`/)
+    expect(declMatch).not.toBeNull()
+    const skeleton = declMatch![1]
+    expect(skeleton).not.toContain('${')
+    // The `<tr>` root's own reactive `class` attr is omitted entirely
+    // (covered by the reactive-attr createEffect) — only its static
+    // descendants (`<td class="col-md-1">`, `<a class="lbl">`) keep theirs.
+    expect(skeleton).toMatch(/^<tr data-key="" bf="\w+">/)
+    expect(skeleton).not.toContain('danger')
+    expect(skeleton).toContain('data-key=""')
+    expect(skeleton).toContain('<!--bf:')
+    // Text slots are empty between their markers.
+    expect(skeleton).toMatch(/<!--bf:s\d+--><!--\/-->/)
+
+    // Static content (the empty col-md-6 cell, the "x"-less <a> shell) is
+    // still present verbatim.
+    expect(skeleton).toContain('col-md-6')
+
+    // No escaping helpers in the `init`/renderItem body now that the per-row
+    // interpolation is gone (only the reactive createEffects remain, which
+    // use textContent/setAttribute — inherently safe). The CSR-mount
+    // `template:` lambda passed to `hydrate(...)` is a SEPARATE SSR-mirror
+    // string (unchanged by this optimization — see below), so scope the
+    // assertion to the code before that lambda.
+    const initBody = clientJs.slice(0, clientJs.indexOf('hydrate('))
+    expect(initBody).not.toContain('escapeAttr(')
+    expect(initBody).not.toContain('escapeText(')
+
+    // SSR/adapter markedTemplate output is untouched by this optimization —
+    // still the reactive `className={...}` expression verbatim (the
+    // TestAdapter emits JSX, not a string template, so there's no
+    // escapeAttr/escapeText call here — that's a CSR-string-template-only
+    // concern, checked below).
+    expect(template).toContain("className={`${selected() === row.id ? 'danger' : ''}`}")
+
+    // The `template:` lambda embedded in the CSR bundle (used for
+    // from-scratch, no-existing-DOM mounts) is a separate SSR-mirror string
+    // and stays fully interpolated + escaped, unaffected by the hoisted
+    // renderItem clone path above.
+    const csrMirror = clientJs.slice(clientJs.indexOf('hydrate('))
+    expect(csrMirror).toContain('escapeAttr(')
+    expect(csrMirror).toContain('escapeText(')
+  })
+
+  test('falls back to per-row emission for an inline conditional/ternary body', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function List() {
+        const [items, setItems] = createSignal<string[]>([])
+        return (
+          <ul onClick={() => setItems(prev => [...prev, 'x'])}>
+            {items().map(item => (
+              <li key={item}>
+                {item.length > 3 ? <b>{item}</b> : <i>{item}</i>}
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const { clientJs } = compile(source, 'List.tsx')
+    expect(clientJs).toContain('mapArray(')
+    // No hoisted-template declaration — the fast path refused.
+    expect(clientJs).not.toMatch(/__tpl_\w+ = document\.createElement\('template'\)/)
+  })
+
+  test('falls back to per-row emission for a spread attribute in the loop body', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Item { id: string; extra: Record<string, string> }
+
+      export function List() {
+        const [items, setItems] = createSignal<Item[]>([])
+        return (
+          <ul onClick={() => setItems([])}>
+            {items().map(item => (
+              <li key={item.id} {...item.extra}>{item.id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const { clientJs } = compile(source, 'SpreadList.tsx')
+    expect(clientJs).toContain('mapArray(')
+    expect(clientJs).not.toMatch(/__tpl_\w+ = document\.createElement\('template'\)/)
+  })
+
+  test('SVG loop body either hoists with the correct <svg> wrap, or falls back — never mis-namespaced', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Point { id: string; x: number; y: number }
+
+      export function Dots() {
+        const [points, setPoints] = createSignal<Point[]>([])
+        return (
+          <svg onClick={() => setPoints([])}>
+            {points().map(p => (
+              <circle key={p.id} cx={p.x} cy={p.y} r="4" />
+            ))}
+          </svg>
+        )
+      }
+    `
+    const { clientJs } = compile(source, 'Dots.tsx')
+    expect(clientJs).toContain('mapArray(')
+    // A `<circle>` root with only dynamic attrs (all covered by reactive-attr
+    // createEffects) and a literal `r="4"` is exactly the shape the fast path
+    // proves safe — this DOES hoist, and it must wrap in a synthetic `<svg>`
+    // (mirroring `templateRootIsSvg`, #135/#1088) so the cloned node keeps the
+    // SVG namespace instead of becoming an inert `HTMLUnknownElement`.
+    const hoisted = /__tpl_\w+\.innerHTML = `<svg>(.*?)<\/svg>`/.exec(clientJs)
+    expect(hoisted).not.toBeNull()
+    expect(hoisted![1]).not.toContain('${')
+    expect(hoisted![1]).toContain('<circle')
+    expect(clientJs).toMatch(/\.content\.firstElementChild\.firstElementChild\.cloneNode\(true\)/)
+  })
+
+  test('fast path refuses (conservative fallback) whenever it cannot prove the wrap safe', () => {
+    // Defensive net: whatever shape a future fixture exercises, the compiler
+    // must never emit an un-wrapped hoisted template for an SVG root (that
+    // would silently mis-namespace the clone) — either it hoists WITH the
+    // `<svg>` wrap, or it doesn't hoist at all.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Seg { id: string; d: string }
+      export function Paths() {
+        const [segs, setSegs] = createSignal<Seg[]>([])
+        return (
+          <svg onClick={() => setSegs([])}>
+            {segs().map(s => (
+              <path key={s.id} d={s.d} />
+            ))}
+          </svg>
+        )
+      }
+    `
+    const { clientJs } = compile(source, 'Paths.tsx')
+    const unwrappedHoist = /__tpl_\w+\.innerHTML = `<path/.test(clientJs)
+    expect(unwrappedHoist).toBe(false)
+  })
+})

package/src/__tests__/materialize-getter-calls.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, test } from 'bun:test'
+import { materializeGetterCalls, parseExpression, stringifyParsedExpr } from '../expression-parser'
+
+/**
+ * `materializeGetterCalls` rewrites a zero-arg getter call (`tag()`) into the
+ * bare identifier (`tag`) wherever the callee name is in the caller-supplied
+ * set — the SSR seed/constructor-context reduction described on the function
+ * (a getter call reads the already-seeded value, so `tag()` IS `tag` there).
+ * These tests pin: the rewrite itself, the two guards that must NOT rewrite
+ * (a call with args; a name outside the set), and that it recurses into a
+ * realistic `.filter` predicate without touching the unrelated `.includes`
+ * receiver path. (#2076 follow-up — Package A)
+ */
+
+describe('materializeGetterCalls', () => {
+  test('rewrites a zero-arg call whose callee is in `names` to a bare identifier', () => {
+    const rewritten = materializeGetterCalls(parseExpression('tag()'), new Set(['tag']))
+    expect(rewritten).toEqual({ kind: 'identifier', name: 'tag' })
+  })
+
+  test('leaves a call WITH args untouched, even when the callee is in `names`', () => {
+    const rewritten = materializeGetterCalls(parseExpression('tag(1)'), new Set(['tag']))
+    expect(stringifyParsedExpr(rewritten)).toBe('tag(1)')
+  })
+
+  test('leaves a call untouched when the callee name is not in `names`', () => {
+    const rewritten = materializeGetterCalls(parseExpression('tag()'), new Set(['other']))
+    expect(stringifyParsedExpr(rewritten)).toBe('tag()')
+  })
+
+  test('recurses into a filter predicate: both `tag()` occurrences rewrite, `p.tags.includes(...)` receiver is untouched', () => {
+    const body = parseExpression('!tag() || p.tags.includes(tag())')
+    const rewritten = materializeGetterCalls(body, new Set(['tag']))
+    expect(rewritten).toEqual({
+      kind: 'logical',
+      op: '||',
+      left: { kind: 'unary', op: '!', argument: { kind: 'identifier', name: 'tag' } },
+      right: {
+        kind: 'array-method',
+        method: 'includes',
+        object: {
+          kind: 'member',
+          object: { kind: 'identifier', name: 'p' },
+          property: 'tags',
+          computed: false,
+        },
+        args: [{ kind: 'identifier', name: 'tag' }],
+      },
+    })
+  })
+
+  test('does not mutate the input tree', () => {
+    const original = parseExpression('tag()')
+    const snapshot = JSON.stringify(original)
+    materializeGetterCalls(original, new Set(['tag']))
+    expect(JSON.stringify(original)).toBe(snapshot)
+  })
+})

package/src/__tests__/props-destructuring.test.ts

@@ -278,3 +278,113 @@ describe('Props Destructuring Warning (BF043)', () => {
     expect(propsWarnings).toHaveLength(0)
   })
 })
+
+describe('Destructured props keep their declared types (BF043 fixture #2150)', () => {
+  const typeOf = (ctx: ReturnType<typeof analyzeComponent>, name: string) =>
+    ctx.propsParams.find((p) => p.name === name)?.type
+
+  test('resolves scalar member types from a type-alias annotation', () => {
+    const source = `
+      type Props = {
+        value: number
+        label: string
+      }
+
+      export function Component({ value, label }: Props) {
+        return <div>{label}: {value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'primitive', primitive: 'number', raw: 'number' })
+    expect(typeOf(ctx, 'label')).toEqual({ kind: 'primitive', primitive: 'string', raw: 'string' })
+  })
+
+  test('resolves member types from an inline type literal', () => {
+    const source = `
+      export function Component({ value }: { value: number }) {
+        return <div>{value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'primitive', primitive: 'number', raw: 'number' })
+  })
+
+  test('resolves member types from an interface annotation', () => {
+    const source = `
+      interface Props {
+        value: number
+      }
+
+      export function Component({ value }: Props) {
+        return <div>{value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'primitive', primitive: 'number', raw: 'number' })
+  })
+
+  test('keys the lookup on the source property name for aliased bindings', () => {
+    const source = `
+      type Props = { value: number }
+
+      export function Component({ value: v }: Props) {
+        return <div>{v}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    // The local binding is 'v', but its type comes from the 'value' member.
+    expect(typeOf(ctx, 'v')).toEqual({ kind: 'primitive', primitive: 'number', raw: 'number' })
+  })
+
+  test('falls back to unknown when the param has no type annotation', () => {
+    const source = `
+      export function Component({ value }) {
+        return <div>{value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'unknown', raw: 'unknown' })
+  })
+
+  // Deliberate scope: only required primitives are resolved. Optional and
+  // non-primitive members stay `unknown` so typed adapters keep their existing
+  // interface{}-based lowering (attribute omission, bf_flat/spread/bf_json).
+  test('leaves OPTIONAL members as unknown (preserves nillable omission)', () => {
+    const source = `
+      type Props = { value?: number }
+
+      export function Component({ value }: Props) {
+        return <div>{value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'unknown', raw: 'unknown' })
+  })
+
+  test('leaves NON-primitive members (arrays/objects) as unknown', () => {
+    const source = `
+      type Props = { rows: number[][]; meta: { id: string } }
+
+      export function Component({ rows, meta }: Props) {
+        return <div>{rows.length}{meta.id}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'rows')).toEqual({ kind: 'unknown', raw: 'unknown' })
+    expect(typeOf(ctx, 'meta')).toEqual({ kind: 'unknown', raw: 'unknown' })
+  })
+})

package/src/__tests__/serialize-parsed-expr.test.ts

@@ -121,8 +121,10 @@ describe('serializeParsedExpr', () => {
   test('purity gate: a folded method call in the body → null', () => {
     // `.toUpperCase()` folds to `array-method`, outside the evaluator surface.
     expect(serializeParsedExpr(parseExpression('item.name.toUpperCase()'))).toBeNull()
-    // A higher-order call (`.filter`) likewise.
-    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => t)'))).toBeNull()
+    // A higher-order call OTHER than `.map`/`.filter` (#2094 widens only
+    // those two) still folds — `.some` returns a boolean-from-search, not a
+    // per-element transform, so it has no evaluator lowering.
+    expect(serializeParsedExpr(parseExpression('item.tags.some(t => t)'))).toBeNull()
     // An unsupported shape.
     expect(serializeParsedExpr(parseExpression('a instanceof B'))).toBeNull()
   })
@@ -149,6 +151,85 @@ describe('serializeParsedExpr', () => {
     expect(serializeParsedExpr(parseExpression('Boolean(item.s)'))).not.toBeNull()
   })
 
+  test('`.includes(x)` array-method serializes (the one array-method the evaluator executes)', () => {
+    expect(evalJSON("item.tags.includes('go')")).toEqual({
+      kind: 'array-method',
+      method: 'includes',
+      object: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'tags' },
+      args: [{ kind: 'literal', value: 'go' }],
+    })
+  })
+
+  test('every other array-method still folds outside the evaluator surface', () => {
+    // `.join` is now serializable (#2094) — see the `.join` describe block
+    // below. `.slice` / `.flat` are not.
+    expect(serializeParsedExpr(parseExpression('item.tags.slice(0, 1)'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.flat()'))).toBeNull()
+  })
+
+  // ----- #2094: nested `.map` / `.filter` / `.join` inside a callback body --
+  test('`.join(sep?)` array-method serializes', () => {
+    expect(evalJSON('item.tags.join(",")')).toEqual({
+      kind: 'array-method',
+      method: 'join',
+      object: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'tags' },
+      args: [{ kind: 'literal', value: ',' }],
+    })
+    // No-arg form keeps an empty `args` (the evaluator defaults the separator).
+    expect(evalJSON('item.tags.join()')).toEqual({
+      kind: 'array-method',
+      method: 'join',
+      object: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'tags' },
+      args: [],
+    })
+  })
+
+  test('nested `.map(cb)` serializes as an ordinary call/member/arrow — NOT a bespoke wrapper', () => {
+    // Deliberately the SAME shape a top-level `.filter(t => t)` parses to —
+    // this is what lets the `eval-vectors.json` corpus (which carries the
+    // genuine `ParsedExpr`, unfiltered by `toEvalNode`) exercise the exact
+    // encoding the compiled-template embedded body uses.
+    expect(evalJSON("item.tags.map(t => '#' + t)")).toEqual({
+      kind: 'call',
+      callee: {
+        kind: 'member',
+        object: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'tags' },
+        property: 'map',
+        computed: false,
+      },
+      args: [
+        {
+          kind: 'arrow',
+          params: ['t'],
+          body: {
+            kind: 'binary',
+            op: '+',
+            left: { kind: 'literal', value: '#' },
+            right: { kind: 'identifier', name: 't' },
+          },
+        },
+      ],
+    })
+  })
+
+  test('nested `.filter(cb)` composed with `.length` and a comparison (the doc/#2038 shape) serializes', () => {
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => t.active).length > 0'))).not.toBeNull()
+  })
+
+  test('a 2-param nested arrow `(item, index)` serializes', () => {
+    expect(serializeParsedExpr(parseExpression('item.tags.map((t, i) => t.n + i)'))).not.toBeNull()
+  })
+
+  test('nested `.some`/`.find`/`.every`/`.sort`/`.reduce`/`.flat`/`.flatMap` still fold to null', () => {
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.some(p => p === t))'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.find(p => p === t))'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.every(p => p === t))'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.sort((a, b) => a - b).length > 0)'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.reduce((a, b) => a + b, 0) > 0)'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.flat().length > 0)'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.flatMap(p => p).length > 0)'))).toBeNull()
+  })
+
   test('a computed member value carries `computed: true` (plain access omits it)', () => {
     // `row['price']` folds to a computed `member`; the flag is preserved so a
     // computed member stays distinguishable. (`row.price` carries no `computed`.)
@@ -201,4 +282,9 @@ describe('freeVarsInBody', () => {
     const body = parseExpression('Math.max(a, factor) + Number(label) + String(x) + Boolean(flag)')
     expect(freeVarsInBody(body, new Set(['a']))).toEqual(['factor', 'flag', 'label', 'x'])
   })
+
+  test('`.includes(x)` array-method: both the receiver and the needle are free vars', () => {
+    const body = parseExpression('!tag || p.tags.includes(tag)')
+    expect(freeVarsInBody(body, new Set())).toEqual(['p', 'tag'])
+  })
 })

package/src/__tests__/ssr-defaults.test.ts

@@ -82,6 +82,26 @@ describe('extractSsrDefaults', () => {
     expect(defaults?.initial).toEqual({ propName: 'initial', value: null })
   })
 
+  test('seeds every declared bare-props prop, including direct template reads (#2126)', () => {
+    // Template-stash adapters flatten `props.label` to the bare scalar
+    // `$label` even when no signal/memo references it (`<%= $label %>` in
+    // the body), so a prop the caller forgets to pass must still exist in
+    // the stash. Every prop declared on the props type gets an entry —
+    // not just the ones a signal / memo initializer reads.
+    const metadata = metadataFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function Greeting(props: { label?: string }) {
+        const [n, setN] = createSignal(0)
+        return <div><p>{props.label}</p><button onClick={() => setN(n() + 1)}>{n()}</button></div>
+      }
+    `)
+
+    const defaults = extractSsrDefaults(metadata)
+    expect(defaults?.label).toEqual({ propName: 'label', value: null })
+    expect(defaults?.n).toEqual({ value: 0 })
+  })
+
   test('memo derived from a signal evaluates through the chain', () => {
     const metadata = metadataFor(`
       'use client'