@barefootjs/jsx 0.5.2 → 0.5.3

package/src/__tests__/child-components-in-map.test.ts

@@ -9,6 +9,14 @@ import { HonoAdapter } from '../../../../packages/adapter-hono/src/adapter/hono-
 
 const adapter = new TestAdapter()
 
+/**
+ * Collapse all whitespace so offset assertions match the generated index
+ * math regardless of the printer's spacing inside array literals
+ * (`['a','b']` vs `['a', 'b']`) — the test asserts the offset logic, not
+ * formatting.
+ */
+const noWs = (s: string) => s.replace(/\s+/g, '')
+
 describe('child components inside .map() (#344)', () => {
   test('static array: nested component inside element wrapper generates initChild', () => {
     const source = `
@@ -773,6 +781,331 @@ describe('child components inside .map() (#344)', () => {
     expect(content).not.toContain('children[__idx]')
   })
 
+  test('a transparent fragment wrapping a .map() inherits the parent container preceding siblings (#1699)', () => {
+    // A fragment renders no DOM element wrapper, so a loop inside `<>…</>` is a
+    // direct sibling of the fragment's siblings in the real parent element.
+    // The offset must skip the two <hr/>s that precede the fragment in <Box>,
+    // not reset to the fragment's own (empty) preceding run.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function FragGroup() {
+        return (
+          <Box>
+            <hr />
+            <hr />
+            <>
+              {['a', 'b'].map(id => (
+                <Wrapper key={id}><Counter id={id} /></Wrapper>
+              ))}
+            </>
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'FragGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // Items start past both <hr/>s.
+    expect(content).toContain('children[__idx + 2]')
+    expect(content).not.toContain('children[__idx]')
+  })
+
+  test('a static sibling inside the fragment still counts toward the offset (#1699 regression guard)', () => {
+    // The fragment's OWN preceding children must keep counting too — the
+    // parent-inheriting flatten must not drop the fragment-internal <span>.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function MixedFrag() {
+        return (
+          <Box>
+            <hr />
+            <>
+              <span>label</span>
+              {['a', 'b'].map(id => (
+                <Wrapper key={id}><Counter id={id} /></Wrapper>
+              ))}
+            </>
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'MixedFrag.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // 1 (parent <hr/>) + 1 (fragment-internal <span>) = 2.
+    expect(content).toContain('children[__idx + 2]')
+  })
+
+  test('two static + .map() groups inside a component: 2nd group offset skips the 1st group items (#1693)', () => {
+    // Follow-up to #1688. With two `<span/> + {arr.map(...)}` groups inside a
+    // self-portaling component, the second group's nested child components
+    // must be resolved past BOTH the static <span>s AND the first group's
+    // mapped items. The static-only offset (#1688) under-counted by the first
+    // array's length, leaving the second group inert after hydration.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) {
+        return <div>{props.children}</div>
+      }
+      function Wrapper(props: { children?: any }) {
+        return <div class="wrapper">{props.children}</div>
+      }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button data-testid={props.id} onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function TwoGroups() {
+        return (
+          <Box>
+            <span>group 1</span>
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+            <span>group 2</span>
+            {['c', 'd'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'TwoGroups.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    const content = clientJs!.content
+
+    // First group: one preceding static <span> → `+ 1`.
+    expect(content).toContain('children[__idx + 1]')
+    // Second group: two static <span>s plus the first group's mapped items →
+    // the runtime length of the first array is added to the static count.
+    expect(noWs(content)).toContain(noWs("children[__idx + 2 + (['a', 'b']).length]"))
+  })
+
+  test('two consecutive pure .map()s inside a component: 2nd loop offset is the 1st array length (#1693)', () => {
+    // No static siblings: the second loop's items still start after the first
+    // loop's items, so the offset is purely the first array's runtime length.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) {
+        return <div>{props.children}</div>
+      }
+      function Wrapper(props: { children?: any }) {
+        return <div class="wrapper">{props.children}</div>
+      }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button data-testid={props.id} onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function TwoLoops() {
+        return (
+          <Box>
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+            {['c', 'd'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'TwoLoops.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // First loop: no preceding siblings → bare access.
+    expect(content).toContain('children[__idx]')
+    // Second loop: offset is the first array's runtime length, no static term.
+    expect(noWs(content)).toContain(noWs("children[__idx + (['a', 'b']).length]"))
+  })
+
+  test('conditional (&&) sibling before a static-array loop adds a runtime ternary offset (#1693)', () => {
+    // A `{cond && <span/>}` sibling renders 1 element when true but ZERO
+    // elements (only comment anchors) when false. Counting it as a static
+    // `1` over-counts the false case, so the loop's nested children resolve
+    // against the wrong `children[idx]`. The offset must be a runtime
+    // `(cond ? 1 : 0)` term that collapses to 0 when the branch is absent.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function CondGroup(props: { show: boolean }) {
+        return (
+          <Box>
+            {props.show && <span>maybe</span>}
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'CondGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // Runtime ternary — `0` when the conditional renders no element. The
+    // condition reuses the same `_p.show` form `insert()` evaluates.
+    expect(content).toContain('children[__idx + (_p.show ? 1 : 0)]')
+    // Must NOT mis-count the conditional as a static sibling.
+    expect(content).not.toContain('children[__idx + 1]')
+  })
+
+  test('ternary sibling with an element in both branches keeps a static offset (#1693)', () => {
+    // `{cond ? <a/> : <b/>}` always renders exactly one element, so both
+    // branch counts are equal and the offset folds to a static `+ 1` — no
+    // runtime ternary needed.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function TernaryGroup(props: { show: boolean }) {
+        return (
+          <Box>
+            {props.show ? <span>a</span> : <em>b</em>}
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'TernaryGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toContain('children[__idx + 1]')
+    expect(content).not.toContain('? 1 : 0')
+  })
+
+  test('non-element (text) sibling before a loop produces no offset (#1693)', () => {
+    // A bare text node is NOT in `.children` (element-only), so it must
+    // contribute 0 to the offset — not be counted as a static sibling.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function TextGroup() {
+        return (
+          <Box>
+            hello
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'TextGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toContain('children[__idx]')
+    expect(content).not.toContain('children[__idx + ')
+  })
+
+  test('nullish/logical (?? / ||) fallback sibling keeps a static offset, not an inverted ternary (#1693)', () => {
+    // `{icon ?? <fallback/>}` transforms to a conditional whose true-branch is
+    // the bare `icon` expression (undecidable element count) and whose false-
+    // branch is the JSX fallback. The element count is statically unknown, so
+    // it must fall back to the legacy flat `1` — NOT emit `(cond ? 0 : 1)`,
+    // which would resolve to 0 and drop the items when `icon` is a real element.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function NullishGroup(props: { icon?: any }) {
+        return (
+          <Box>
+            {props.icon ?? <span>fallback</span>}
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'NullishGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toContain('children[__idx + 1]')
+    // The inverted-count regression — must not appear.
+    expect(content).not.toContain('? 0 : 1')
+  })
+
+  test('preceding per-item-conditional loop does not contribute a bogus .length offset (#1693)', () => {
+    // A `{arr.map(x => cond ? <el/> : null)}` loop renders 0-or-1 element per
+    // item, so its rendered count is NOT `arr.length`. Emitting `+ arr.length`
+    // would over-count; the undecidable loop falls back to the legacy `0`.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function MixedLoops() {
+        return (
+          <Box>
+            {['a', 'b', 'c'].map(x => (x === 'b' ? <span key={x}>{x}</span> : null))}
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'MixedLoops.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // No `.length` term from the undecidable per-item-conditional loop.
+    expect(noWs(content)).not.toContain(noWs("(['a', 'b', 'c']).length"))
+  })
+
   test('nested .map() with multiple inner components emits unique __compEl bindings (#1664)', () => {
     const source = `
       'use client'

package/src/__tests__/combine-client-js.test.ts

@@ -204,6 +204,53 @@ describe('combineParentChildClientJs', () => {
     expect(adminCombined).not.toContain('@bf-child:')
   })
 
+  test('does not treat import-shaped lines inside a string literal as real imports (#1702)', () => {
+    // A data module inlined into the parent exports a code snippet whose
+    // *contents* contain a `"use client"` directive and an `import …` line.
+    // The combiner must not relocate the parent's real runtime import into
+    // that string literal, which previously left `hydrate` undefined.
+    const sample = [
+      '`"use client"',
+      '',
+      "import { createSignal } from '@barefootjs/client'",
+      '',
+      'export function Counter() {}`',
+    ].join('\n')
+    const files = new Map([
+      ['Parent', [
+        "import { hydrate, createSignal } from '@barefootjs/client/runtime'",
+        "import '/* @bf-child:Child */'",
+        `const __bf_inline_0 = { SAMPLE: ${sample} };`,
+        "hydrate('Parent', (el) => {})",
+      ].join('\n')],
+      ['Child', [
+        "import { hydrate, createSignal } from '@barefootjs/client/runtime'",
+        "hydrate('Child', (el) => {})",
+      ].join('\n')],
+    ])
+
+    const result = combineParentChildClientJs(files)
+    const combined = result.get('Parent')!
+
+    // The real runtime import survives as the very first line, with `hydrate`.
+    const firstLine = combined.split('\n')[0]
+    expect(firstLine).toContain('hydrate')
+    expect(firstLine).toContain("from '@barefootjs/client/runtime'")
+    // The only real top-level import is the runtime one — the snippet's inner
+    // import line must remain *inside* the `__bf_inline_0` declaration, not
+    // hoisted above it.
+    const inlineIdx = combined.indexOf('const __bf_inline_0')
+    const snippetImportIdx = combined.indexOf("import { createSignal } from '@barefootjs/client'")
+    expect(snippetImportIdx).toBeGreaterThan(inlineIdx)
+
+    // The snippet string is preserved verbatim — its inner import line is
+    // NOT hoisted out, and `@barefootjs/client` stays intact.
+    expect(combined).toContain("import { createSignal } from '@barefootjs/client'")
+    expect(combined).toContain('export function Counter() {}')
+    expect(combined).toContain("hydrate('Parent',")
+    expect(combined).toContain("hydrate('Child',")
+  })
+
   test('deduplicates imports from shared sources', () => {
     const files = new Map([
       ['Parent', [

package/src/__tests__/dangerously-set-inner-html.test.ts

@@ -0,0 +1,82 @@
+/**
+ * Client-side `dangerouslySetInnerHTML` (the raw-HTML escape hatch).
+ *
+ * The SSR adapters render `dangerouslySetInnerHTML={{ __html: E }}`
+ * natively, but the client codegen used to treat it as a generic reactive
+ * attribute — emitting a bogus `dangerouslySetInnerHTML="[object Object]"`
+ * and never setting `innerHTML`, so a `"use client"` component silently
+ * lost the content on the client. These tests pin the corrected emit:
+ *   - the `{ __html }` object is NEVER serialised as an attribute;
+ *   - the element's raw HTML is emitted as its content (UNescaped — this
+ *     is the intentional escape hatch);
+ *   - a reactive value also drives an `innerHTML` assignment in init.
+ */
+
+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
+}
+
+describe('dangerouslySetInnerHTML (client)', () => {
+  test('reactive value: raw content + innerHTML init, no bogus attribute', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       export function Raw({ html }: { html: string }) {
+         return <div class="x" dangerouslySetInnerHTML={{ __html: html }} />
+       }`,
+      'Raw.tsx',
+    )
+    // Never emitted as an attribute.
+    expect(clientJs).not.toMatch(/dangerouslySetInnerHTML="/)
+    // Raw `.__html` emitted as element content — not via escapeText.
+    expect(clientJs).toMatch(/<div class="x"[^>]*>\$\{.*\.__html.*\}<\/div>/)
+    expect(clientJs).not.toMatch(/escapeText\([^)]*__html/)
+    // Reactive update assigns innerHTML (not setAttribute).
+    expect(clientJs).toMatch(/\.innerHTML = /)
+    expect(clientJs).not.toMatch(/setAttribute\('dangerouslySetInnerHTML'/)
+  })
+
+  test('spread + dangerouslySetInnerHTML: kept out of the spreadAttrs merge', () => {
+    // An element that also carries a spread switches to the
+    // `${spreadAttrs({...})}` merge form; `dangerouslySetInnerHTML` must
+    // not be folded into that object (it would serialise as a bogus
+    // `dangerouslySetInnerHTML="[object Object]"` attribute).
+    const clientJs = getClientJs(
+      `'use client'
+       export function A({ rest, html }: { rest: Record<string, unknown>; html: string }) {
+         return <div {...rest} class="x" dangerouslySetInnerHTML={{ __html: html }} />
+       }`,
+      'A.tsx',
+    )
+    expect(clientJs).toContain('spreadAttrs(')
+    // The merge object must NOT contain a dangerouslySetInnerHTML key…
+    expect(clientJs).not.toMatch(/spreadAttrs\([^)]*dangerouslySetInnerHTML/)
+    expect(clientJs).not.toMatch(/dangerouslySetInnerHTML="/)
+    // …and the raw HTML is still emitted as the element's content.
+    expect(clientJs).toMatch(/<\/div>/)
+    expect(clientJs).toMatch(/\.__html/)
+  })
+
+  test('static value: raw content emitted in the template (no init needed)', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       export function S() {
+         return <div dangerouslySetInnerHTML={{ __html: '<b>hi</b>' }} />
+       }`,
+      'S.tsx',
+    )
+    expect(clientJs).not.toMatch(/dangerouslySetInnerHTML="/)
+    // The literal HTML survives raw in the template content.
+    expect(clientJs).toMatch(/<div[^>]*>\$\{.*__html.*\}<\/div>/)
+    expect(clientJs).not.toMatch(/escapeText\([^)]*__html/)
+  })
+})

package/src/__tests__/static-loop-csr-materialize.test.ts

@@ -203,8 +203,9 @@ describe('#1247 — static-loop CSR self-heal', () => {
     // the inner `it` param).
     expect(clientJs).toMatch(/items\.map\(\(it, i\) =>/)
     // The inner per-item HTML references the inner destructured param
-    // directly (`${it}` in the template), not via a `__bfItem` accessor.
-    expect(clientJs).toMatch(/\$\{it\}/)
+    // directly (`${escapeText(it)}` in the template — text slots are
+    // HTML-escaped, #1694), not via a `__bfItem` accessor.
+    expect(clientJs).toMatch(/\$\{escapeText\(it\)\}/)
     expect(clientJs).not.toMatch(/__bfItem\(\)/)
   })
 
@@ -335,7 +336,8 @@ describe('#1247 — static-loop CSR self-heal', () => {
     // Preamble is NOT duplicated inside the materialize branch.
     expect(materializeBlock).not.toMatch(/const count = users\.length/)
     // The cloned template still references `count` — now resolved by the
-    // forEach-scope `const` introduced just above.
-    expect(materializeBlock).toMatch(/\$\{String\(count\)\}/)
+    // forEach-scope `const` introduced just above. Text slots are
+    // HTML-escaped (#1694), so it appears as `${escapeText(String(count))}`.
+    expect(materializeBlock).toMatch(/\$\{escapeText\(String\(count\)\)\}/)
   })
 })

package/src/__tests__/text-slot-escaping.test.ts

@@ -0,0 +1,56 @@
+/**
+ * Text-slot HTML-escaping emit shape (#1694 + follow-up).
+ *
+ * Pins which interpolations the client template wraps in `escapeText`:
+ *   - a plain text slot (`{stringValue}`) IS escaped — it becomes the
+ *     slot's text content under `innerHTML`;
+ *   - a branch-slot expression (Child-position value inside a conditional
+ *     `template()` arrow) is routed through `__bfSlot` and must NOT be
+ *     wrapped in `escapeText`. `__bfSlot` returns raw `<!--bf-slot:N-->`
+ *     markers for live nodes; escaping the whole call corrupts them and
+ *     drops slotted content (the regression that broke `e2e-site-ui`).
+ *     `__bfSlot` escapes its own plain-string path internally instead.
+ */
+
+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
+}
+
+describe('text-slot escaping', () => {
+  test('a plain text slot is wrapped in escapeText', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       export function Label({ text }: { text: string }) {
+         return <span>{text}</span>
+       }`,
+      'Label.tsx',
+    )
+    expect(clientJs).toMatch(/<!--bf:\w+-->\$\{escapeText\(_p\.text\)\}<!--\/-->/)
+  })
+
+  test('a branch-slot expression is NOT wrapped in escapeText', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       import { createSignal } from '@barefootjs/client'
+       export function Branch({ show }: { show: boolean }) {
+         const [t] = createSignal('hi')
+         return <div>{show ? <span>{t()}</span> : null}</div>
+       }`,
+      'Branch.tsx',
+    )
+    // The branch value goes through __bfSlot (raw markers preserved)…
+    expect(clientJs).toMatch(/\$\{__bfSlot\(/)
+    // …and must never be double-wrapped by the text escape.
+    expect(clientJs).not.toMatch(/escapeText\(\s*__bfSlot/)
+  })
+})

package/src/combine-client-js.ts

@@ -8,6 +8,8 @@
  * into the parent's file, eliminating the need for separate HTTP requests.
  */
 
+import ts from 'typescript'
+
 const CHILD_PLACEHOLDER_RE = /import '\/\* @bf-child:(\w+) \*\/'/g
 
 /**
@@ -101,33 +103,75 @@ function parseAndMerge(
   otherImports: string[],
   codeSections: string[]
 ): void {
-  const codeLines: string[] = []
-
-  for (const line of content.split('\n')) {
-    if (line.startsWith('import ')) {
-      if (line.includes('@bf-child:')) continue
-
-      const match = line.match(/^import \{ ([^}]+) \} from ['"]([^'"]+)['"]/)
-      if (match) {
-        const names = match[1].split(',').map(n => n.trim())
-        const source = match[2]
-        if (!importsBySource.has(source)) {
-          importsBySource.set(source, new Set())
-        }
-        for (const name of names) {
-          importsBySource.get(source)!.add(name)
-        }
-      } else {
-        if (!otherImports.includes(line)) {
-          otherImports.push(line)
-        }
+  // Parse the client JS so we only ever treat *real* top-level
+  // `ImportDeclaration` statements as imports. The predecessor matched
+  // raw lines beginning with `import `, which also caught `import …`
+  // lines that merely live *inside a string / template literal value*
+  // (e.g. a data module exporting a code snippet). Tearing such a line
+  // out of its string relocated the component's real runtime import into
+  // the literal and left `hydrate` undefined at call time. See
+  // piconic-ai/barefootjs#1702.
+  // Parent pointers aren't needed here — we only read `statements` and each
+  // import's `getStart`/`getEnd` — so skip building them to keep the per-chunk
+  // parse cheap when combining many files.
+  const sourceFile = ts.createSourceFile(
+    'combine.js',
+    content,
+    ts.ScriptTarget.Latest,
+    /*setParentNodes*/ false,
+    ts.ScriptKind.JS,
+  )
+
+  // Character spans of the top-level imports to strip from the emitted
+  // code, so everything that isn't an import (including literals whose
+  // contents look like imports) is preserved verbatim.
+  const importSpans: Array<[number, number]> = []
+
+  for (const stmt of sourceFile.statements) {
+    if (!ts.isImportDeclaration(stmt)) continue
+    const start = stmt.getStart(sourceFile)
+    const end = stmt.getEnd()
+    importSpans.push([start, end])
+
+    const stmtText = content.slice(start, end)
+    // `@bf-child:` placeholders are resolved by inlining elsewhere; drop
+    // them entirely (neither merged nor kept as code).
+    if (stmtText.includes('@bf-child:')) continue
+
+    const clause = stmt.importClause
+    const bindings = clause?.namedBindings
+    const specifier = ts.isStringLiteral(stmt.moduleSpecifier)
+      ? stmt.moduleSpecifier.text
+      : ''
+    if (clause && !clause.name && bindings && ts.isNamedImports(bindings)) {
+      // Pure named import (`import { a, b as c } from '…'`) — merge by source.
+      if (!importsBySource.has(specifier)) {
+        importsBySource.set(specifier, new Set())
+      }
+      const set = importsBySource.get(specifier)!
+      for (const el of bindings.elements) {
+        const name = el.propertyName
+          ? `${el.propertyName.text} as ${el.name.text}`
+          : el.name.text
+        set.add(name)
       }
     } else {
-      codeLines.push(line)
+      // default / namespace / side-effect import — keep verbatim.
+      if (!otherImports.includes(stmtText)) {
+        otherImports.push(stmtText)
+      }
     }
   }
 
-  const code = codeLines.join('\n').trim()
+  // Reconstruct the code with the import spans removed.
+  let code = ''
+  let cursor = 0
+  for (const [start, end] of importSpans) {
+    code += content.slice(cursor, start)
+    cursor = end
+  }
+  code += content.slice(cursor)
+  code = code.trim()
   if (code) {
     codeSections.push(code)
   }