@barefootjs/jsx 0.33.2 → 0.33.3

package/src/__tests__/multi-component-shared-default-import.test.ts

@@ -0,0 +1,55 @@
+/**
+ * #2767 follow-up: two sibling components in the SAME multi-component file
+ * compile independently from the same module-scope default import — each
+ * component's compiled client JS only lists the specifiers IT actually
+ * uses, so one component can emit `import cfg from './config'` while
+ * another emits `import cfg, { helper } from './config'` for the exact
+ * same source declaration. `compileMultipleComponents`'s client-JS merge
+ * used to dedupe import lines by EXACT STRING, which kept both — a hard
+ * `SyntaxError: Identifier 'cfg' has already been declared` in the merged
+ * `.client.js`, with zero compile diagnostics. This is an end-to-end test
+ * through the real `compileJSX` multi-component path (not the unit-level
+ * `mergeTemplateImports`/`collectExternalImports` tests, which are correct
+ * per-component but can't see this cross-component merge on their own).
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('multi-component file sharing a default import (#2767 follow-up)', () => {
+  test('merges into one import line instead of redeclaring the default binding', () => {
+    const source = `
+'use client'
+import cfg, { helper } from './config'
+import { createSignal } from '@barefootjs/client'
+
+export function CompA() {
+  const [n, setN] = createSignal(cfg.start)
+  return <button onClick={() => setN(n() + 1)}>{n()}</button>
+}
+
+export function CompB() {
+  const [m, setM] = createSignal(cfg.start + helper())
+  return <button onClick={() => setM(m() + 1)}>{m()}</button>
+}
+`
+    const result = compileJSX(source, 'shared-default.tsx', { adapter })
+    const errors = result.errors.filter(e => e.severity === 'error')
+    expect(errors).toEqual([])
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+
+    const importLines = clientJs!.content
+      .split('\n')
+      .filter(l => l.includes("from './config'"))
+    // Exactly one declaration for './config' — not one per component.
+    expect(importLines).toEqual(["import cfg, { helper } from './config'"])
+
+    // The binding is declared exactly once, not once per component.
+    const declarationCount = (clientJs!.content.match(/\bimport\s+cfg\b/g) ?? []).length
+    expect(declarationCount).toBe(1)
+  })
+})

package/src/__tests__/root-key-relay.test.ts

@@ -0,0 +1,170 @@
+/**
+ * Render-root row-key relay (`IRElement.keyAttr` with no `value`) — #2753's
+ * "mechanism 2".
+ *
+ * A component's rendered root is whatever element carries `bf-s`
+ * (`needsScope`). When that component is used as a caller's keyed loop row,
+ * the caller's key has to land on THAT element: `mapArray` reconciles rows
+ * by reading the key attribute off the row's primary element, and the CSR
+ * half of the contract (`renderChild` / `materializeComponent` in
+ * `@barefootjs/client`) splices `data-key` onto the rendered markup's first
+ * element regardless of what wrapper nodes sit above it. `resolveRootKeyAttr`
+ * is the SSR half, and it must agree.
+ *
+ * The regression these tests exist for: resolving the relay by walking DOWN
+ * from the IR root and stopping at the first node that is not an
+ * element/fragment/if-statement. `<Ctx.Provider>` is neither, but
+ * `transformProviderElement` passes `ctx.isRoot` through to its children — so
+ * a provider-rooted component (select, popover, accordion, carousel,
+ * combobox, command, dropdown-menu, radio-group) has a `needsScope` element
+ * the walk never reaches, and every adapter silently stopped relaying its
+ * caller's key.
+ */
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import type { IRElement, IRNode } from '../types'
+
+function compile(source: string, name = 'Test'): IRNode {
+  const ir = jsxToIR(analyzeComponent(source, `${name}.tsx`))
+  expect(ir).not.toBeNull()
+  return ir!
+}
+
+/** Every `element` node in the tree, in document order. */
+function allElements(node: IRNode): IRElement[] {
+  const out: IRElement[] = []
+  const visit = (n: IRNode | null | undefined): void => {
+    if (!n) return
+    if (n.type === 'element') out.push(n)
+    switch (n.type) {
+      case 'element':
+      case 'fragment':
+      case 'component':
+      case 'provider':
+      case 'loop':
+        for (const c of n.children) visit(c)
+        return
+      case 'async':
+        visit(n.fallback)
+        for (const c of n.children) visit(c)
+        return
+      case 'conditional':
+        visit(n.whenTrue)
+        visit(n.whenFalse)
+        return
+      case 'if-statement':
+        visit(n.consequent)
+        visit(n.alternate)
+        return
+    }
+  }
+  visit(node)
+  return out
+}
+
+const PROVIDER_ROOT = `
+'use client'
+import { createContext, createSignal } from '@barefootjs/client'
+
+const SelectContext = createContext({ open: false })
+
+export function Select(props: { children?: unknown }) {
+  const [open, setOpen] = createSignal(false)
+  return (
+    <SelectContext.Provider value={{ open: open(), setOpen }}>
+      <div data-slot="select">{props.children}</div>
+    </SelectContext.Provider>
+  )
+}
+`
+
+describe('render-root row-key relay (#2753)', () => {
+  test('a provider-rooted component relays the key on the element under the provider', () => {
+    const ir = compile(PROVIDER_ROOT, 'Select')
+
+    expect(ir.type).toBe('provider')
+    const div = allElements(ir).find(e => e.tag === 'div')
+    expect(div).toBeDefined()
+    // The element under the provider IS the rendered root: `ctx.isRoot`
+    // survives `transformProviderElement`.
+    expect(div!.needsScope).toBe(true)
+    // Relay marker: a name and no value — the value arrives at runtime from
+    // whoever renders this component as a keyed row.
+    expect(div!.keyAttr).toEqual({ name: 'data-key' })
+  })
+
+  test.each([
+    ['plain element root', `
+      export function C() { return <div class="root"><span>x</span></div> }
+    `],
+    ['early-return (if-statement) root — every branch top element', `
+      export function C(props: { on?: boolean }) {
+        if (props.on) return <section>on</section>
+        return <article>off</article>
+      }
+    `],
+    ['provider root', PROVIDER_ROOT],
+    ['provider wrapping an early-return root', `
+      'use client'
+      import { createContext } from '@barefootjs/client'
+      const Ctx = createContext(0)
+      export function C(props: { on?: boolean }) {
+        if (props.on) return <Ctx.Provider value={1}><section>on</section></Ctx.Provider>
+        return <Ctx.Provider value={0}><article>off</article></Ctx.Provider>
+      }
+    `],
+    ['nested providers around the root element', `
+      'use client'
+      import { createContext } from '@barefootjs/client'
+      const A = createContext(0)
+      const B = createContext(0)
+      export function C() {
+        return <A.Provider value={1}><B.Provider value={2}><div>x</div></B.Provider></A.Provider>
+      }
+    `],
+  ])('invariant: %s — every needsScope element carries a relay keyAttr', (_label, source) => {
+    const roots = allElements(compile(source)).filter(e => e.needsScope)
+    expect(roots.length).toBeGreaterThan(0)
+    for (const el of roots) {
+      expect({ tag: el.tag, keyAttr: el.keyAttr }).toEqual({
+        tag: el.tag,
+        keyAttr: { name: 'data-key' },
+      })
+    }
+  })
+
+  test('an inline .map() row root keeps its own resolved key expression', () => {
+    const ir = compile(`
+      export function List(props: { items: { id: number; name: string }[] }) {
+        return <ul>{props.items.map(i => <li key={i.id}>{i.name}</li>)}</ul>
+      }
+    `, 'List')
+
+    const li = allElements(ir).find(e => e.tag === 'li')
+    expect(li).toBeDefined()
+    // Mechanism 1 (a concretely-known local expression) wins over the relay
+    // marker; the relay pass must not overwrite it with a bare name.
+    expect(li!.needsScope).toBe(false)
+    expect(li!.keyAttr).toEqual({ name: 'data-key', value: 'i.id' })
+
+    const ul = allElements(ir).find(e => e.tag === 'ul')!
+    expect(ul.needsScope).toBe(true)
+    expect(ul.keyAttr).toEqual({ name: 'data-key' })
+  })
+
+  test('a scope-comment fragment root marks exactly one carrier, not every child', () => {
+    const ir = compile(`
+      export function C() {
+        return <><h1>title</h1><p>body</p></>
+      }
+    `)
+
+    expect(ir.type).toBe('fragment')
+    const els = allElements(ir)
+    // #2732: hydration markers moved to the wrapping comment, so no child is
+    // a `needsScope` element and the relay pass adds nothing of its own.
+    expect(els.every(e => !e.needsScope)).toBe(true)
+    expect(els.filter(e => e.keyAttr !== undefined).map(e => e.tag)).toEqual(['h1'])
+  })
+})

package/src/__tests__/signal-getter-not-called.test.ts

@@ -266,4 +266,153 @@ describe('Signal Getter Not Called (BF044)', () => {
       expect(bf044[0].severity).toBe('error')
     })
   })
+
+  /**
+   * Nested descent (#2755 / #2751 upstream fix).
+   *
+   * The gate used to open with `if (!ts.isIdentifier(expr)) return`, so it saw
+   * only an expression's TOP-LEVEL node. Every shape below reaches a rendered
+   * position through some wrapper, and every one of them used to compile
+   * silently and then miscompile downstream — the accessor stringified into a
+   * DOM property (#2755) or referenced from a module-scope template thunk that
+   * cannot see it (#2751).
+   *
+   * The negative cases are the load-bearing half: descending EVERYWHERE would
+   * break the Context-Provider idiom, where handing a descendant an uncalled
+   * accessor is the whole point. The rule is "rendered position", not "nested".
+   */
+  describe('nested descent into rendered positions', () => {
+    // `Child` is declared AFTER `Counter` deliberately: `analyzeComponent`
+    // analyzes the FIRST function in the module, so hoisting the child above
+    // would silently analyze `Child` instead and make every case below report
+    // zero diagnostics — the negative cases would then pass for the wrong
+    // reason. The positive block is the control that proves the walk is
+    // actually live in this exact module shape.
+    const wrap = (body: string) => `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function Counter() {
+        const [count, setCount] = createSignal(0)
+        const [items, setItems] = createSignal([1, 2])
+        const obj: Record<string, unknown> = {}
+        return ${body}
+      }
+
+      function Child(props: { value?: unknown }) { return <span /> }
+    `
+    const bf044Of = (body: string) =>
+      compileToIR(wrap(body)).errors.filter(e => e.code === ErrorCodes.SIGNAL_GETTER_NOT_CALLED)
+
+    describe('fires — the getter reaches a rendered position', () => {
+      test.each([
+        ['ternary condition', '<div className={count ? "on" : "off"} />'],
+        ['template literal span', '<div className={`x-${count}`} />'],
+        ['call argument', '<div className={String(count)} />'],
+        ['array literal member', '<div className={[count].join("")} />'],
+        ['style object property value', '<div style={{ color: count }} />'],
+        ['JSX text child', '<div>{count ? "a" : "b"}</div>'],
+      ])('%s', (_label, body) => {
+        const bf044 = bf044Of(body)
+        expect(bf044).toHaveLength(1)
+        expect(bf044[0].message).toContain("'count'")
+      })
+    })
+
+    describe('stays silent — the getter is handed onward, not rendered', () => {
+      test.each([
+        // The `<SelectContext.Provider value={{ open, ... }}>` shape: every
+        // member is an accessor BY CONTRACT. Calling it here would freeze the
+        // value at provider-render time and break every consumer.
+        ['component prop, object literal member', '<Child value={{ x: count }} />'],
+        ['component prop, ternary', '<Child value={count ? 1 : 2} />'],
+        ['component prop, call argument', '<Child value={String(count)} />'],
+      ])('%s', (_label, body) => {
+        expect(bf044Of(body)).toHaveLength(0)
+      })
+
+      test('a loop-row param shadowing a same-named signal', () => {
+        // `count` here is the row item, not the signal — resolved through the
+        // ambient `BindingScope`, which sees bindings introduced OUTSIDE the
+        // checked expression.
+        expect(bf044Of('<ul>{items().map(count => <li className={count ? "a" : "b"} />)}</ul>')).toHaveLength(0)
+      })
+
+      test('correctly called getter in every nested shape', () => {
+        expect(bf044Of('<div className={count() ? "on" : "off"} />')).toHaveLength(0)
+        expect(bf044Of('<div style={{ color: count() }} />')).toHaveLength(0)
+      })
+    })
+
+    describe('binding and parameter defaults', () => {
+      // A default VALUE is an ordinary expression in the enclosing scope, but
+      // the walk used to visit only binding NAMES. Measured before the fix:
+      // both shapes compiled silently and emitted a module-scope `template`
+      // thunk referencing a component-scope binding — `ReferenceError` on CSR
+      // mount, i.e. #2751's mechanism surviving inside the very check meant to
+      // close it.
+      test('destructuring default in a rendered position', () => {
+        expect(bf044Of('<div className={(() => { const { x = count } = ({} as { x?: unknown }); return String(x) })()} />')).toHaveLength(1)
+      })
+
+      test('parameter default in a rendered position', () => {
+        expect(bf044Of('<div className={((f = count) => String(f))()} />')).toHaveLength(1)
+      })
+
+      test('a later default reading an EARLIER parameter stays silent', () => {
+        // JS binds parameters left to right: `(count, x = count) => …` reads
+        // the already-bound parameter, not the signal it shadows (verified
+        // against V8). Visiting every default before binding any parameter
+        // would flag this — a false positive on working code.
+        expect(bf044Of('<div className={((count2: unknown, x = count2) => String(x))(1)} />')).toHaveLength(0)
+        expect(bf044Of('<div className={((count: unknown, x = count) => String(x))(1)} />')).toHaveLength(0)
+      })
+
+      test('a later default reading an EARLIER pattern element stays silent', () => {
+        // The same left-to-right rule applies WITHIN a pattern.
+        //
+        // The declaration sits inside a NESTED block on purpose. At a function
+        // body's top level, `collectBlockDeclarations` pre-scans the whole
+        // `VariableStatement` and binds every name in the pattern up front,
+        // regardless of order — so a top-level version of this case passes
+        // even with the sequential threading removed, and pins nothing.
+        // `collectBlockDeclarations` does not descend into an `if` block, so
+        // here the only thing that can bind `c` before `x`'s default is read
+        // is `visitBindingDefaults` itself.
+        expect(bf044Of('<div className={(() => { if (obj) { const { count, x = count } = obj; return String(x) } return "" })()} />')).toHaveLength(0)
+      })
+
+      test('a literal default stays silent', () => {
+        // The overwhelmingly common shape (`{ size = 'md' }`): the default is
+        // not a reactive name, so widening the walk must not touch it.
+        expect(bf044Of(`<div className={(({ size = 'md' }: { size?: string }) => size)({})} />`)).toHaveLength(0)
+      })
+    })
+
+    test('does not misfire on a TYPE position', () => {
+      // A type is not a value. `({} as { count?: unknown })` in a rendered
+      // position used to read the type literal's property name as a bare
+      // reference to the same-named signal and refuse valid code.
+      expect(bf044Of('<div className={String(({} as { count?: unknown }).count)} />')).toHaveLength(0)
+    })
+
+    test('does not misfire on a nested element ATTRIBUTE NAME', () => {
+      // The walk stops at a nested JSX boundary. Without that guard, descending
+      // into a `.map()` body that returns JSX read the nested element's own
+      // attribute NAME (`checked=`) as a bare reference to the same-named
+      // signal — `transformNode` re-walks that element independently anyway.
+      const source = `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+
+        export function Boxes() {
+          const [checked, setChecked] = createSignal(false)
+          const [items, setItems] = createSignal([1, 2])
+          return <ul>{items().map(n => <li><input checked={checked()} /></li>)}</ul>
+        }
+      `
+      const bf044 = compileToIR(source).errors.filter(e => e.code === ErrorCodes.SIGNAL_GETTER_NOT_CALLED)
+      expect(bf044).toHaveLength(0)
+    })
+  })
 })

package/src/__tests__/state-only-file-default-import.test.ts

@@ -0,0 +1,47 @@
+/**
+ * #2767 follow-up: the state-only-file client-JS path (a `.tsx` with no
+ * JSX return but an exported `/* @client *\/` module signal) used to filter
+ * OUT every default- or namespace-imported specifier when deciding which
+ * external imports to preserve (`s => !s.isDefault && !s.isNamespace`,
+ * `compiler.ts`'s single-component early return) — not just render them
+ * wrong, but drop them entirely. A signal initializer that references a
+ * default- or namespace-imported helper compiled with zero diagnostics
+ * into client JS that throws `ReferenceError` in the browser, since the
+ * import never made it into the bundle at all.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('state-only file: default/namespace imports feeding a @client signal', () => {
+  test('preserves a default-imported helper referenced by the signal initializer', () => {
+    const source = `'use client'
+import defaults from './defaults.json' with { type: 'json' }
+import { createSignal } from '@barefootjs/client'
+/* @client */
+export const [count, setCount] = createSignal(defaults.start)
+`
+    const result = compileJSX(source, 'store.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    expect(clientJs!.content).toContain("import defaults from './defaults.json'")
+    expect(clientJs!.content).not.toContain('import { defaults }')
+  })
+
+  test('preserves a namespace-imported helper referenced by the signal initializer', () => {
+    const source = `'use client'
+import * as util from './util'
+import { createSignal } from '@barefootjs/client'
+/* @client */
+export const [count, setCount] = createSignal(util.base())
+`
+    const result = compileJSX(source, 'store2.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    expect(clientJs!.content).toContain("import * as util from './util'")
+  })
+})

package/src/analyzer.ts

@@ -4237,6 +4237,42 @@ export function listComponentFunctions(
     ts.ScriptKind.TSX
   )
 
+  return listComponentFunctionsFromSourceFile(sourceFile)
+}
+
+/**
+ * One parse, two structural facts about a component file — the component
+ * names it exports (today's `listComponentFunctions` result) and the
+ * PascalCase JSX tags it instantiates (`collectJsxComponentTags`'s
+ * out-edges). Used by `@barefootjs/vite`'s `discoverComponents` to build the
+ * component-instantiation graph that decides which SERVER files also need a
+ * client bundle because they transitively own a `'use client'` descendant
+ * (issue #2767) — a property no single-file compile can answer, since it
+ * depends on the whole discovered corpus.
+ */
+export interface ComponentFileScan {
+  /** Component names this file exports (same result as `listComponentFunctions`). */
+  exports: string[]
+  /** PascalCase JSX tag identifiers this file references. */
+  referencedComponents: string[]
+}
+
+export function scanComponentFile(source: string, filePath: string): ComponentFileScan {
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    source,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX
+  )
+
+  return {
+    exports: listComponentFunctionsFromSourceFile(sourceFile),
+    referencedComponents: [...collectJsxComponentTags(sourceFile)],
+  }
+}
+
+function listComponentFunctionsFromSourceFile(sourceFile: ts.SourceFile): string[] {
   const componentNames: string[] = []
 
   // 'use client' directive detection (controls whether multi-return JSX