@barefootjs/jsx 0.5.2 → 0.6.0

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