@barefootjs/jsx 0.33.2 → 0.33.3

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__/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"/)
+  })
+})

package/src/__tests__/issue-2756-loop-row-honors-client-only.test.ts

@@ -0,0 +1,173 @@
+/**
+ * #2756 — a client-built row/branch must carry the SAME attributes a
+ * hydration-reused (SSR-origin) row carries.
+ *
+ * `lowerFormControlValueSsr` already lowers a controlled `<textarea>` /
+ * `<select>` `value` in the SHARED IR: the attr becomes `clientOnly` and
+ * the value is re-expressed as element content / per-option `selected`,
+ * so every SSR adapter omits the attribute. `irToHtmlTemplate` — the
+ * builder for keyed-loop rows and conditional branches — ignored that
+ * flag and baked `value="…"` back in, so a rebuilt row and a reused row
+ * disagreed the moment a row-count change made both coexist in one list.
+ *
+ * Each assertion here is paired with the effect that OWNS the value, so
+ * "the attribute is gone" can never be satisfied by dropping the binding.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function clientJs(source: string): string {
+  const result = compileJSX(source, 'Repro.tsx', { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  return result.files.find(f => f.type === 'clientJs')!.content
+}
+
+/** The `__tpl.innerHTML = \`…\`` / `insert(... html: \`…\`)` builder strings. */
+function builderTemplates(content: string): string[] {
+  return [...content.matchAll(/innerHTML = `([^`]*)`/g)].map(m => m[1])
+    .concat([...content.matchAll(/html: `([^`]*)`/g)].map(m => m[1]))
+}
+
+describe('#2756 — client-built rows honour clientOnly', () => {
+  test('a keyed-loop row builder omits the controlled textarea `value` attribute and keeps the child text', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function LoopTextarea() {
+        const [val, setVal] = createSignal(0)
+        const [items] = createSignal([1, 2, 3])
+        return (
+          <ul>
+            {items().filter(i => i > 0).map(i => (
+              <li key={i}>
+                <textarea value={val()} onInput={() => setVal(1)} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('<textarea'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      expect(tpl).not.toContain('value=')
+      // The SSR projection of the same value — element content — must stay.
+      expect(tpl).toMatch(/<textarea[^>]*>\$\{/)
+    }
+    // The effect that owns the value is still emitted, so the attribute is
+    // absent because the effect applies it, not because nothing does.
+    expect(content).toContain(`'value' in`)
+  })
+
+  test('a conditional-branch builder omits it too, and still binds the value effect', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function CondTextarea() {
+        const [on, setOn] = createSignal(true)
+        const [v, setV] = createSignal('x')
+        return <div>{on() ? <textarea value={v()} onInput={() => setV('y')} /> : <p>off</p>}</div>
+      }
+    `)
+    const branchTemplates = builderTemplates(content).filter(t => t.includes('<textarea'))
+    expect(branchTemplates.length).toBeGreaterThan(0)
+    for (const tpl of branchTemplates) expect(tpl).not.toContain('value=')
+    expect(content).toContain('createDisposableEffect')
+  })
+
+  test('a loop row keeps per-option `selected` — the select value projection is not collateral', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function LoopSelect() {
+        const [val, setVal] = createSignal('a')
+        const [rows] = createSignal([1, 2])
+        return (
+          <ul>
+            {rows().filter(r => r > 0).map(r => (
+              <li key={r}>
+                <select value={val()}>
+                  <option value="a">A</option>
+                  <option value="b">B</option>
+                </select>
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('<select'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      // The `<select …>` opening tag only — `<option value="a">` is the
+      // literal option value and must survive.
+      const selectTag = tpl.slice(tpl.indexOf('<select'), tpl.indexOf('<option'))
+      expect(selectTag).not.toMatch(/value=/)
+      expect(tpl).toContain("'selected'")
+    }
+  })
+
+  test('the composite-row placeholder builder omits it too', () => {
+    // `irToPlaceholderTemplate` is the twin builder used when a row also
+    // hosts a child component (components become `data-bf-ph` placeholders).
+    // Same contract, separate function — it had the same gap.
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      function Badge({ label }: { label: string }) { return <em>{label}</em> }
+      export function CompositeRows() {
+        const [val, setVal] = createSignal('a')
+        const [rows] = createSignal([{ id: 1, label: 'x' }])
+        return (
+          <ul>
+            {rows().map(row => (
+              <li key={row.id}>
+                <Badge label={row.label} />
+                <textarea value={val()} onInput={() => setVal('b')} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('data-bf-ph'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      expect(tpl).toContain('<textarea')
+      expect(tpl).not.toMatch(/\bvalue=/)
+    }
+  })
+
+  test('an ordinary reactive attribute on the same row IS still emitted by the builder', () => {
+    // Reverse direction, on one row so both halves are read off the same
+    // builder string: `clientOnly` is the ONLY thing now deferred. The
+    // row's own `title` / `data-n` must keep their inline emission.
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function MixedRow() {
+        const [val, setVal] = createSignal('a')
+        const [rows] = createSignal([1, 2])
+        return (
+          <ul>
+            {rows().filter(r => r > 0).map(r => (
+              <li key={r} title={String(r)} data-n={r}>
+                <textarea value={val()} onInput={() => setVal('b')} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('<textarea'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      expect(tpl).toMatch(/title=/)
+      expect(tpl).toMatch(/data-n=/)
+      expect(tpl).not.toMatch(/\bvalue=/)
+    }
+  })
+})

package/src/__tests__/merge-template-imports.test.ts

@@ -56,7 +56,7 @@ describe('mergeTemplateImports', () => {
     expect(out).toBe("import { Foo, Baz } from 'x'\nimport type { Bar } from 'x'")
   })
 
-  test('passes through and dedupes side-effect / default imports by line', () => {
+  test('passes through and dedupes side-effect imports, and a lone default import, by line', () => {
     const out = mergeTemplateImports([
       "import './a.css'",
       "import Foo from 'foo'",
@@ -65,4 +65,44 @@ describe('mergeTemplateImports', () => {
     ])
     expect(out).toBe("import './a.css'\nimport Foo from 'foo'\nimport { x } from 'm'")
   })
+
+  // #2767 follow-up: two sibling components in a multi-component file both
+  // compile from the SAME module-scope `import cfg from 'lib'` declaration,
+  // but each component's own compiled output only lists the specifiers IT
+  // uses — so one component's output can carry `import cfg from 'lib'` and
+  // another's `import cfg, { helper } from 'lib'`. Exact-line dedup keeps
+  // BOTH (they're different strings), redeclaring `cfg` — a hard
+  // `SyntaxError`. Folding by source must collapse them into one line.
+  test('folds a default import shared across sibling components instead of redeclaring the binding', () => {
+    const out = mergeTemplateImports([
+      "import cfg from 'lib'",
+      "import cfg, { helper } from 'lib'",
+    ])
+    expect(out).toBe("import cfg, { helper } from 'lib'")
+    expect((out.match(/\bcfg\b/g) ?? []).length).toBe(1)
+  })
+
+  test('folds a default import with named specifiers arriving in the opposite order', () => {
+    const out = mergeTemplateImports([
+      "import cfg, { helperA } from 'lib'",
+      "import cfg, { helperB } from 'lib'",
+    ])
+    expect(out).toBe("import cfg, { helperA, helperB } from 'lib'")
+  })
+
+  test('keeps a default import separate from a differently-sourced named import', () => {
+    const out = mergeTemplateImports([
+      "import cfg from 'lib'",
+      "import { helper } from 'other-lib'",
+    ])
+    expect(out).toBe("import cfg from 'lib'\nimport { helper } from 'other-lib'")
+  })
+
+  test('dedupes an identical namespace import shared across sibling components', () => {
+    const out = mergeTemplateImports([
+      "import * as NS from 'lib'",
+      "import * as NS from 'lib'",
+    ])
+    expect(out).toBe("import * as NS from 'lib'")
+  })
 })