@barefootjs/jsx 0.33.2 → 0.33.4

package/src/__tests__/child-component-ref-not-mirrored.test.ts

@@ -0,0 +1,90 @@
+/**
+ * Regression tests for #2749: a `ref` on a CHILD-COMPONENT call site must not
+ * be mirrored onto the child's root element as a DOM attribute.
+ *
+ * Measured before the fix: `collectReactiveChildProps` (collect-elements.ts)
+ * hand-rolled an `on[A-Z]` event check and had no `ref` case, so a reactive
+ * `ref` prop fell through to the generic dynamic-prop mirror and emitted
+ *
+ *   if (__v != null) __scope.setAttribute('ref', String(__v))
+ *
+ * i.e. the callback's SOURCE TEXT as an attribute value. SSR never emits a
+ * `ref` attribute, so only the hydrate leg grew it and the SSR-vs-hydrated
+ * snapshot diverged. The same prop was — and still is — passed correctly to
+ * `initChild` as `get ref() { … }`; the runtime child then routes it through
+ * `applyRestAttrs`, whose `classifyDOMProp` read already returns `kind: 'ref'`
+ * and invokes the callback instead of setting an attribute.
+ *
+ * The fix makes the compile-time mirror read the same classifier. These tests
+ * pin BOTH directions: `ref` (and `on*`) must not reach the mirror, and an
+ * ordinary reactive attribute prop must still reach it.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function getClientJs(source: string, filename: string): 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')
+  expect(clientJs).toBeDefined()
+  return clientJs!.content
+}
+
+const REF_ON_CHILD = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  import { Row } from './Row'
+
+  export function Case() {
+    const [val, setVal] = createSignal(0)
+    const handleMount = (el: Element) => {
+      el.setAttribute('data-mounted', String(val()))
+    }
+    return <Row ref={handleMount} data-x="1"><span>{val()}</span></Row>
+  }
+`
+
+describe('ref on a child-component call site (#2749)', () => {
+  test('is never mirrored into a setAttribute(\'ref\', …) update', () => {
+    const js = getClientJs(REF_ON_CHILD, 'Case.tsx')
+    expect(js).not.toContain(`setAttribute('ref'`)
+    expect(js).not.toContain(`removeAttribute('ref'`)
+  })
+
+  test('still reaches the child through initChild as a getter', () => {
+    const js = getClientJs(REF_ON_CHILD, 'Case.tsx')
+    expect(js).toContain('initChild(')
+    expect(js).toContain('get ref()')
+  })
+
+  test('does not appear as an attribute in the CSR template either', () => {
+    const js = getClientJs(REF_ON_CHILD, 'Case.tsx')
+    const template = js.slice(js.indexOf('template:'))
+    expect(template).not.toContain('ref=')
+  })
+
+  test('an ordinary reactive attribute prop on the same call site is still mirrored', () => {
+    // Reverse direction: the fix must not silence the generic mirror. `title`
+    // classifies as `attr`, so it keeps its setAttribute update.
+    const js = getClientJs(
+      `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+        import { Row } from './Row'
+
+        export function Case() {
+          const [val, setVal] = createSignal(0)
+          const onMount = (el: Element) => { el.setAttribute('data-mounted', '1') }
+          return <Row ref={onMount} title={String(val())}>x</Row>
+        }
+      `,
+      'Case.tsx',
+    )
+    expect(js).toContain(`setAttribute('title'`)
+    expect(js).not.toContain(`setAttribute('ref'`)
+  })
+})

package/src/__tests__/fragment-body-loop-key.test.ts

@@ -0,0 +1,95 @@
+/**
+ * Fragment-bodied `.map()` row key extraction (#2763).
+ *
+ * A `.map()` callback whose body is a fragment (`<><li key={..}/><li/></>`)
+ * used to make `extractLoopKey` (`jsx-to-ir.ts`) return `null` — it handled
+ * `element`, `component`, and `conditional`, but not `fragment`. That made
+ * every SSR adapter silently drop the row-key attribute AND left
+ * `mapArray`'s `keyFn` unset (positional reconciliation), while
+ * `html-template.ts`'s client row builder kept baking `data-key` from the
+ * raw `key` JSX attribute — a silent SSR/CSR divergence with no diagnostic.
+ *
+ * The fix adds a `fragment` case to both `extractLoopKey` and its write-side
+ * twin `applyLoopKeyAttr`, reading/stamping the key on the fragment's FIRST
+ * ELEMENT child (skipping whitespace-only text), matching the "first
+ * element, not first node" rule `IRElement.keyAttr`'s docstring already
+ * documents for the render-root relay case. `html-template.ts`'s client
+ * template builders were also changed to read `IRElement.keyAttr` instead
+ * of the raw attribute (see `resolvedKeyAttrName` in that file) — this test
+ * covers only the SSR/IR-resolution half.
+ */
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import type { IRElement, IRLoop, IRNode } from '../types'
+
+function compile(source: string, name = 'Test'): IRNode {
+  const ir = jsxToIR(analyzeComponent(source, `${name}.tsx`))
+  expect(ir).not.toBeNull()
+  return ir!
+}
+
+/** The single `loop` node anywhere in the tree (depth-first), or null. */
+function findLoop(node: IRNode): IRLoop | null {
+  if (node.type === 'loop') return node
+  const children: IRNode[] =
+    'children' in node && Array.isArray((node as { children?: unknown }).children)
+      ? (node as { children: IRNode[] }).children
+      : []
+  for (const c of children) {
+    const found = findLoop(c)
+    if (found) return found
+  }
+  return null
+}
+
+const SOURCE = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Item = { id: number; label: string }
+export function KeyFrag(props: { items: Item[] }) {
+  const [items] = createSignal<Item[]>(props.items)
+  return (
+    <ul>
+      {items().map(item => (
+        <>
+          <li key={item.id}>{item.label}</li>
+          <li>x</li>
+        </>
+      ))}
+    </ul>
+  )
+}
+`
+
+describe('fragment-bodied .map() row key extraction (#2763)', () => {
+  test('IRElement.keyAttr lands on the fragment\'s first element, not the second', () => {
+    const ir = compile(SOURCE, 'KeyFrag')
+    const loop = findLoop(ir)
+    expect(loop).not.toBeNull()
+    const fragment = loop!.children[0]
+    expect(fragment.type).toBe('fragment')
+    if (fragment.type !== 'fragment') return
+    const [firstLi, secondLi] = fragment.children.filter(
+      (c): c is IRElement => c.type === 'element',
+    )
+    expect(firstLi.keyAttr).toEqual({ name: 'data-key', value: 'item.id' })
+    expect(secondLi.keyAttr).toBeUndefined()
+  })
+
+  test('mapArray receives a real keyFn instead of reconciling positionally', () => {
+    const result = compileJSX(SOURCE, 'KeyFrag.tsx', { adapter: new TestAdapter() })
+    expect(result.errors.filter((e) => (e as { severity?: string }).severity === 'error')).toHaveLength(0)
+    const cjs = result.files.find((f) => f.type === 'clientJs')
+    expect(cjs).toBeDefined()
+    const calls = cjs!.content
+      .split('\n')
+      .map((ln) => ln.trim())
+      .filter((ln) => ln.startsWith('mapArray(') || ln.startsWith('mapArrayLazy('))
+    expect(calls).toHaveLength(1)
+    expect(calls[0]).toContain('String(item.id)')
+    expect(calls[0]).not.toMatch(/_s\d+, null,/)
+  })
+})

package/src/__tests__/ir-to-client-js/imports.test.ts

@@ -71,6 +71,29 @@ function makeSideEffectImport(source: string): ImportInfo {
   }
 }
 
+/** `import <localName> from 'source'`, optionally alongside named specifiers. */
+function makeDefaultImport(source: string, localName: string, namedSpecifiers: string[] = []): ImportInfo {
+  return {
+    source,
+    specifiers: [
+      { name: localName, alias: null, isDefault: true, isNamespace: false },
+      ...namedSpecifiers.map(name => ({ name, alias: null, isDefault: false, isNamespace: false })),
+    ],
+    isTypeOnly: false,
+    loc: dummyLoc,
+  }
+}
+
+/** `import * as localName from 'source'`. */
+function makeNamespaceImport(source: string, localName: string): ImportInfo {
+  return {
+    source,
+    specifiers: [{ name: localName, alias: null, isDefault: false, isNamespace: true }],
+    isTypeOnly: false,
+    loc: dummyLoc,
+  }
+}
+
 describe('collectExternalImports', () => {
   test('preserves third-party library imports used in generated code', () => {
     const ir = makeIR([makeImport('zod', ['z'])])
@@ -79,6 +102,90 @@ describe('collectExternalImports', () => {
     expect(result).toEqual(["import { z } from 'zod'"])
   })
 
+  // #2767 follow-up: a default-imported binding (e.g. a JSON module's
+  // `import lock from '...json' with { type: 'json' }`) was previously
+  // always re-emitted as a NAMED import (`import { lock } from '...'`),
+  // which is a real, silently-wrong ESM import — the module has no such
+  // named export — that only failed once a bundler actually resolved it.
+  test('preserves a default import with correct default-import syntax, not named braces', () => {
+    const ir = makeIR([makeDefaultImport('../data.json', 'lock')])
+    const code = 'lock.adapters'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import lock from '../data.json'"])
+  })
+
+  test('preserves a namespace import with correct namespace-import syntax', () => {
+    const ir = makeIR([makeNamespaceImport('./ns-module', 'NS')])
+    const code = 'NS.helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import * as NS from './ns-module'"])
+  })
+
+  test('combines a used default specifier with used named specifiers on one declaration', () => {
+    const ir = makeIR([makeDefaultImport('./mixed', 'Default', ['helper', 'other'])])
+    const code = 'Default(); helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import Default, { helper } from './mixed'"])
+  })
+
+  test('drops an unused default specifier but keeps a used named sibling', () => {
+    const ir = makeIR([makeDefaultImport('./mixed', 'Default', ['helper'])])
+    const code = 'helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { helper } from './mixed'"])
+  })
+
+  // `import Foo, * as NS from 'x'` is legal JS, but never emitted as one
+  // line — a namespace specifier always gets its own declaration (see
+  // `renderUsedImportLines`'s docstring). Pin the two-line output so a
+  // future refactor can't silently collapse or drop one of them.
+  test('a used default specifier and a used namespace specifier from the same source emit two separate lines', () => {
+    const ir = makeIR([
+      {
+        source: './both',
+        specifiers: [
+          { name: 'Foo', alias: null, isDefault: true, isNamespace: false },
+          { name: 'NS', alias: null, isDefault: false, isNamespace: true },
+        ],
+        isTypeOnly: false,
+        loc: dummyLoc,
+      },
+    ])
+    const code = 'Foo(); NS.helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import Foo from './both'", "import * as NS from './both'"])
+  })
+
+  test('a default-imported COMPONENT is skipped, same as a named-imported one', () => {
+    const ir = makeIR([makeDefaultImport('./button', 'Button')], ['Button'])
+    const code = '<Button/>'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
+  test('rewrites a default import to the .client.js sibling when its source is a client-signal import', () => {
+    const ir = makeIR([makeDefaultImport('./state', 'store')])
+    ir.metadata.clientSignalImportSources = new Set(['./state'])
+    const code = 'store.count'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import store from './state.client.js'"])
+  })
+
+  test('rewrites a namespace import to the .client.js sibling when its source is a client-signal import', () => {
+    const ir = makeIR([makeNamespaceImport('./state', 'NS')])
+    ir.metadata.clientSignalImportSources = new Set(['./state'])
+    const code = 'NS.count'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import * as NS from './state.client.js'"])
+  })
+
+  test('drops an unused namespace specifier entirely', () => {
+    const ir = makeIR([makeNamespaceImport('./ns-module', 'NS')])
+    const code = 'somethingElse()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
   test('skips @barefootjs/client imports', () => {
     const ir = makeIR([makeImport('@barefootjs/client', ['createSignal'])])
     const code = 'createSignal(0)'

package/src/__tests__/ir-to-client-js/merge-compiled-client-js-imports.test.ts

@@ -0,0 +1,138 @@
+/**
+ * `mergeCompiledClientJsImports` merges sibling components' compiled
+ * client-JS blobs (`compileMultipleComponents`'s two call sites) via a
+ * real `ts.createSourceFile` AST walk — never a text/regex line scan — so
+ * a string or template-literal VALUE that merely contains a line starting
+ * with `import ` can never be torn out of its literal and hoisted into the
+ * imports block. Mirrors `combine-client-js.test.ts`'s `#1702` regression
+ * test for `parseAndMerge`, the established precedent this function
+ * follows (see its own docstring).
+ */
+import { describe, test, expect } from 'bun:test'
+import { mergeCompiledClientJsImports } from '../../ir-to-client-js/imports'
+
+describe('mergeCompiledClientJsImports', () => {
+  test('does not treat an import-shaped line inside a string/template literal as a real import (#1702-class)', () => {
+    // A docs component embeds a code sample whose CONTENTS contain a
+    // line that starts with `import `. A line-based scan would tear that
+    // fake import out of the literal and hoist it into the imports
+    // block, leaving `hydrate` undefined and corrupting the literal.
+    const sample = [
+      '`Example usage:',
+      '',
+      "import { createSignal } from '@barefootjs/client'",
+      '',
+      'export function Counter() {}`',
+    ].join('\n')
+
+    const componentA = [
+      "import { hydrate, createSignal } from '@barefootjs/client/runtime'",
+      `const SAMPLE = ${sample}`,
+      "hydrate('DocsExample', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA])
+
+    // The real runtime import survives as its own top-level declaration,
+    // exactly once — not duplicated by the fake import line inside the
+    // string literal.
+    const realImportOccurrences = (merged.match(/^import \{ hydrate, createSignal \} from '@barefootjs\/client\/runtime'$/gm) ?? []).length
+    expect(realImportOccurrences).toBe(1)
+    // The sample string is untouched — the fake import line inside it is
+    // still there, still nested inside the backtick literal, not hoisted
+    // out as a separate top-level statement.
+    expect(merged).toContain('const SAMPLE = `Example usage:')
+    expect(merged).toContain("import { createSignal } from '@barefootjs/client'\n\nexport function Counter() {}`")
+  })
+
+  // #2767 follow-up: the same duplicate-binding SyntaxError F1 pinned for
+  // the old regex-based merge, now exercised through the AST-based path.
+  test('folds a default import shared across sibling components instead of redeclaring the binding', () => {
+    const componentA = [
+      "import cfg from './config'",
+      "hydrate('CompA', (el) => {})",
+    ].join('\n')
+    const componentB = [
+      "import cfg, { helper } from './config'",
+      "hydrate('CompB', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA, componentB])
+
+    expect(merged).toContain("import cfg, { helper } from './config'")
+    // Exactly one declaration — not one per sibling component.
+    expect((merged.match(/\bcfg\b/g) ?? []).length).toBe(1)
+  })
+
+  test('keeps an unresolved @bf-child: placeholder import (does not drop it, unlike parent-child inlining)', () => {
+    const componentA = [
+      "import { hydrate, initChild } from '@barefootjs/client/runtime'",
+      "import '/* @bf-child:Child */'",
+      "hydrate('Parent', (el) => { initChild('Child', el, {}) })",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA])
+
+    expect(merged).toContain("import '/* @bf-child:Child */'")
+  })
+
+  test('dedupes an identical @bf-child: placeholder shared by two sibling components', () => {
+    const componentA = [
+      "import '/* @bf-child:Shared */'",
+      "hydrate('A', (el) => {})",
+    ].join('\n')
+    const componentB = [
+      "import '/* @bf-child:Shared */'",
+      "hydrate('B', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA, componentB])
+
+    expect((merged.match(/@bf-child:Shared/g) ?? []).length).toBe(1)
+  })
+
+  // pullfrog[bot] review of #2769: a combined `import Default, * as NS
+  // from '…'` line has a default clause AND a namespace binding — a
+  // naive "has a default clause" check would route it into the fold
+  // branch and silently drop the namespace half, since only named
+  // bindings are read there. No current producer emits this combined
+  // shape (`renderUsedImportLines` always splits a used default+namespace
+  // pair into two lines), but the classification must stay correct
+  // independent of that invariant.
+  test('keeps a combined default+namespace import verbatim, not silently dropping the namespace half', () => {
+    const componentA = [
+      "import Default, * as NS from './combined'",
+      "hydrate('A', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA])
+
+    expect(merged).toContain("import Default, * as NS from './combined'")
+  })
+
+  test('preserves a namespace import on its own line, deduped by exact source+name across components', () => {
+    const componentA = [
+      "import * as util from './util'",
+      "hydrate('A', (el) => {})",
+    ].join('\n')
+    const componentB = [
+      "import * as util from './util'",
+      "hydrate('B', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA, componentB])
+
+    expect((merged.match(/import \* as util from '\.\/util'/g) ?? []).length).toBe(1)
+  })
+
+  test('preserves both components\' code sections after import extraction', () => {
+    const componentA = "import { hydrate } from '@barefootjs/client/runtime'\nhydrate('A', (el) => {})"
+    const componentB = "import { hydrate } from '@barefootjs/client/runtime'\nhydrate('B', (el) => {})"
+
+    const merged = mergeCompiledClientJsImports([componentA, componentB])
+
+    expect(merged).toContain("hydrate('A', (el) => {})")
+    expect(merged).toContain("hydrate('B', (el) => {})")
+    expect((merged.match(/^import \{ hydrate \}/gm) ?? []).length).toBe(1)
+  })
+})

package/src/__tests__/issue-2754-rest-spread-needs-slot.test.ts

@@ -0,0 +1,85 @@
+/**
+ * #2754 — a `{...props}` / `{...rest}` forward is the one attribute source
+ * no template can carry (its keys are unknown at compile time), so the
+ * runtime's `applyRestAttrs` is the only thing that can apply it. That
+ * call is addressed by slot id and lives in `init`, and BOTH gates used to
+ * miss the stateless case:
+ *
+ *   - Phase 1 gave the host element no slot id, because a spread trips
+ *     none of the reactivity heuristics; and
+ *   - `needsClientJs` did not count `restAttrElements`, so even with a
+ *     slot the component fell to the template-only mount with `init` empty.
+ *
+ * SSR and hydration hid both: the SSR markup already carries the caller's
+ * attributes. Only a pure `createComponent` mount showed the drop.
+ */
+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) {
+  const result = compileJSX(source, 'Repro.tsx', { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  return {
+    clientJs: result.files.find(f => f.type === 'clientJs')!.content,
+    template: result.files.find(f => f.type === 'markedTemplate')!.content,
+  }
+}
+
+describe('#2754 — a caller-props forward earns a slot and an init', () => {
+  test('a stateless `{ children, ...props }` forwarder emits applyRestAttrs against a slot', () => {
+    const { clientJs, template } = compile(`
+      "use client";
+      export function Plain({ children, ...props }: { children?: unknown; [k: string]: unknown }) {
+        return <span className="plain" {...props}>{children}</span>
+      }
+    `)
+    expect(clientJs).toContain('applyRestAttrs')
+    // The slot the call addresses must exist in the SSR markup too, or
+    // hydration's `$(__scope, 's0')` finds nothing.
+    expect(clientJs).toMatch(/const \[_s\d\] = \$\(__scope, 's\d'\)/)
+    expect(template).toMatch(/bf="s\d"/)
+    // `children` and the statically-set `class` stay excluded so the
+    // forward neither double-renders children nor re-emits `class`.
+    expect(clientJs).toMatch(/applyRestAttrs\(_s\d, _p, \["children","class"\]\)/)
+  })
+
+  test('a whole undestructured props object spread gets the same treatment', () => {
+    const { clientJs } = compile(`
+      "use client";
+      export function Whole(props: { [k: string]: unknown }) {
+        return <span className="plain" {...props} />
+      }
+    `)
+    expect(clientJs).toContain('applyRestAttrs')
+  })
+
+  test('an alias hop onto the rest binding resolves the same way (#2723 shape)', () => {
+    const { clientJs } = compile(`
+      "use client";
+      export function Aliased({ children, ...props }: { children?: unknown; [k: string]: unknown }) {
+        const props__alias = props
+        return <span className="plain" {...props__alias}>{children}</span>
+      }
+    `)
+    expect(clientJs).toContain('applyRestAttrs')
+  })
+
+  test('a spread of an ordinary object still inlines into the template and earns no slot', () => {
+    // Reverse direction: only the caller-props forward is unknowable at
+    // compile time. An ordinary object spread is fully emitted by both
+    // templates and must not start allocating slot ids.
+    const { clientJs, template } = compile(`
+      "use client";
+      const extra = { title: 'x' }
+      export function Ordinary() {
+        return <span className="plain" {...extra} />
+      }
+    `)
+    expect(clientJs).toContain('spreadAttrs')
+    expect(clientJs).not.toContain('applyRestAttrs')
+    expect(template).not.toMatch(/bf="s\d"/)
+  })
+})