@barefootjs/hono 0.1.0

package/src/__tests__/string-literal-css-var-prop.test.ts

@@ -0,0 +1,84 @@
+/**
+ * Hono adapter: string-literal props containing JS-shaped values (#135, #1255).
+ *
+ * A JSX string attribute like `fill="var(--area-fill)"` is an SVG
+ * presentation attribute whose value happens to look like a JS function
+ * call. An older adapter implementation used a regex (`isJsExpression`)
+ * to disambiguate string literals from arrow / call expressions, and
+ * tripped on values shaped like `var(...)`, `url(...)`, or `calc(...)`,
+ * emitting them as `fill={var(--area-fill)}` — `var` was then parsed as
+ * a JS identifier and the build failed with "Unexpected var".
+ *
+ * The IR's `isLiteral` flag is the authoritative source of truth here.
+ * #1255 deleted the regex fallback: every prop emitted by Phase 1
+ * already carries `dynamic | isLiteral | boolean-shorthand`, so the
+ * decision is made from IR alone, not by re-classifying the value
+ * string at emit time.
+ *
+ * Surfaced by the area chart palette demo (#135 Concrete Additions).
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '@barefootjs/jsx'
+import { HonoAdapter } from '../adapter'
+
+const adapter = new HonoAdapter()
+
+describe('string-literal component prop containing CSS function-shape (#135)', () => {
+  test('fill="var(--x)" survives as a string literal in the marked template', () => {
+    const source = `
+      function Area(props: { fill: string }) {
+        return <path d="M0 0" fill={props.fill} />
+      }
+
+      export function Demo() {
+        return <Area fill="var(--area-fill)" />
+      }
+    `
+    const result = compileJSX(source, 'Demo.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const template = result.files.find((f) => f.type === 'markedTemplate')
+    expect(template).toBeDefined()
+    const content = template!.content
+
+    // Must emit the string literal verbatim — NOT as a JS expression
+    expect(content).toContain('fill="var(--area-fill)"')
+    expect(content).not.toContain('fill={var(--area-fill)}')
+  })
+
+  test('stroke="url(#grad)" survives as a string literal', () => {
+    const source = `
+      function S(props: { stroke: string }) {
+        return <line x1="0" y1="0" x2="10" y2="10" stroke={props.stroke} />
+      }
+
+      export function Demo() {
+        return <S stroke="url(#grad)" />
+      }
+    `
+    const result = compileJSX(source, 'Demo.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const content = result.files.find((f) => f.type === 'markedTemplate')!.content
+
+    expect(content).toContain('stroke="url(#grad)"')
+    expect(content).not.toContain('stroke={url(#grad)}')
+  })
+
+  test('arrow-function expression prop is still emitted as a JS expression', () => {
+    // Regression guard — the JS-expression branch must remain reachable
+    // for non-literal values (the case `isJsExpression` was added for).
+    const source = `
+      function B(props: { onClick: (e: Event) => void }) {
+        return <button onClick={props.onClick} />
+      }
+
+      export function Demo() {
+        return <B onClick={() => 1} />
+      }
+    `
+    const result = compileJSX(source, 'Demo.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const content = result.files.find((f) => f.type === 'markedTemplate')!.content
+
+    expect(content).toContain('onClick={() => 1}')
+  })
+})

package/src/__tests__/stub-deps-scripts.test.ts

@@ -0,0 +1,183 @@
+import { describe, test, expect } from 'bun:test'
+import { collectStubDepScripts } from '../scripts'
+
+// Issue #1243: the per-page script collector emits a <script src> for
+// every rendered component, but until #1243 a component reached ONLY
+// through an imperative `createComponent('Foo', ...)` stub call (no
+// JSX render) never had its `.client.js` shipped. `collectStubDepScripts`
+// closes the gap: given the manifest and the set of names whose SSR
+// function did execute, it returns the script URLs for every transitively
+// reachable stubDep.
+
+describe('collectStubDepScripts (#1243)', () => {
+  test('emits a script for a single-hop stubDep', () => {
+    const out = collectStubDepScripts(
+      {
+        IssueCardNode: {
+          clientJs: 'components/IssueCardNode.client.js',
+          stubDeps: ['DraftTitleEditor'],
+        },
+        DraftTitleEditor: { clientJs: 'components/DraftTitleEditor.client.js' },
+      },
+      '/static/components/',
+      new Set(['IssueCardNode']),
+      new Set(['IssueCardNode']),
+    )
+    expect([...out.values()]).toEqual([{ src: '/static/components/DraftTitleEditor.client.js' }])
+  })
+
+  test('walks transitively (A → B → C)', () => {
+    const out = collectStubDepScripts(
+      {
+        A: { clientJs: 'components/A.client.js', stubDeps: ['B'] },
+        B: { clientJs: 'components/B.client.js', stubDeps: ['C'] },
+        C: { clientJs: 'components/C.client.js' },
+      },
+      '/static/components/',
+      new Set(['A']),
+      new Set(['A']),
+    )
+    expect(new Set([...out.keys()])).toEqual(new Set(['B', 'C']))
+  })
+
+  // Issue #1243 — Copilot review:
+  // `<script type="module">` tags execute in document order with
+  // microtask checkpoints between them. A's `hydrate()` schedules a
+  // walk that fires before later scripts evaluate, so any stub call
+  // from A.init must resolve against a registry the LATER scripts
+  // populated. Emitting B before C in document order would let B's
+  // `createComponent('C', ...)` fail. The walker must produce
+  // post-order (deepest first → A→B→C ships C, then B).
+  test('emits a transitive chain in post-order (C before B for A → B → C)', () => {
+    const out = collectStubDepScripts(
+      {
+        A: { clientJs: 'components/A.client.js', stubDeps: ['B'] },
+        B: { clientJs: 'components/B.client.js', stubDeps: ['C'] },
+        C: { clientJs: 'components/C.client.js' },
+      },
+      '/static/components/',
+      new Set(['A']),
+      new Set(['A']),
+    )
+    // Map preserves insertion order; iteration = emission order in DOM.
+    expect([...out.keys()]).toEqual(['C', 'B'])
+  })
+
+  // Post-order isn't just leaves-first; for a DAG where a sibling
+  // depends on another sibling (A → B, A → C, C → B), `B` must
+  // precede `C` in the output even though both are direct children
+  // of A. BFS+reverse can't express this — DFS post-order does.
+  test('emits DAG edges in topological order (B before C for A → B, A → C, C → B)', () => {
+    const out = collectStubDepScripts(
+      {
+        A: { clientJs: 'components/A.client.js', stubDeps: ['B', 'C'] },
+        B: { clientJs: 'components/B.client.js' },
+        C: { clientJs: 'components/C.client.js', stubDeps: ['B'] },
+      },
+      '/static/components/',
+      new Set(['A']),
+      new Set(['A']),
+    )
+    // A's first dep is B → visited (no further deps) → emit B.
+    // A's second dep is C → recurse into C's deps → B already visited
+    // → emit C. So order is B then C.
+    expect([...out.keys()]).toEqual(['B', 'C'])
+  })
+
+  test('short-circuits on a cycle (A → B → A)', () => {
+    const out = collectStubDepScripts(
+      {
+        A: { clientJs: 'components/A.client.js', stubDeps: ['B'] },
+        B: { clientJs: 'components/B.client.js', stubDeps: ['A'] },
+      },
+      '/static/components/',
+      new Set(['A']),
+      new Set(['A']),
+    )
+    // A is in `excluded` so it's not re-emitted; B is reached once.
+    expect([...out.keys()]).toEqual(['B'])
+  })
+
+  test('skips deps already in excluded set', () => {
+    const out = collectStubDepScripts(
+      {
+        Parent: { clientJs: 'components/Parent.client.js', stubDeps: ['AlreadyEmitted'] },
+        AlreadyEmitted: { clientJs: 'components/AlreadyEmitted.client.js' },
+      },
+      '/static/components/',
+      new Set(['Parent']),
+      // Caller already emitted AlreadyEmitted's script some other way.
+      new Set(['Parent', 'AlreadyEmitted']),
+    )
+    expect(out.size).toBe(0)
+  })
+
+  test('mutates excluded so caller can pass it to a later pass', () => {
+    const excluded = new Set(['Root'])
+    collectStubDepScripts(
+      {
+        Root: { clientJs: 'components/Root.client.js', stubDeps: ['Leaf'] },
+        Leaf: { clientJs: 'components/Leaf.client.js' },
+      },
+      '/static/components/',
+      new Set(['Root']),
+      excluded,
+    )
+    expect(excluded.has('Leaf')).toBe(true)
+  })
+
+  test('honors a base path with no trailing slash', () => {
+    const out = collectStubDepScripts(
+      {
+        Parent: { clientJs: 'components/Parent.client.js', stubDeps: ['Child'] },
+        Child: { clientJs: 'components/Child.client.js' },
+      },
+      '/assets/bf',
+      new Set(['Parent']),
+      new Set(['Parent']),
+    )
+    expect(out.get('Child')?.src).toBe('/assets/bf/Child.client.js')
+  })
+
+  test('returns an empty map when no stubDeps are present', () => {
+    const out = collectStubDepScripts(
+      {
+        Solo: { clientJs: 'components/Solo.client.js' },
+      },
+      '/static/components/',
+      new Set(['Solo']),
+      new Set(['Solo']),
+    )
+    expect(out.size).toBe(0)
+  })
+
+  test('skips a dep whose manifest entry has no clientJs', () => {
+    // A misconfigured manifest could list a stubDep that resolves to
+    // an SSR-only entry. The walker still records it as visited (so
+    // it doesn't loop) but emits no script for it.
+    const out = collectStubDepScripts(
+      {
+        Parent: { clientJs: 'components/Parent.client.js', stubDeps: ['Phantom'] },
+        Phantom: { clientJs: undefined },
+      },
+      '/static/components/',
+      new Set(['Parent']),
+      new Set(['Parent']),
+    )
+    expect(out.size).toBe(0)
+  })
+
+  test('ignores __barefoot__ as a root (it has no stubDeps and would noise the walk)', () => {
+    const out = collectStubDepScripts(
+      {
+        __barefoot__: { clientJs: 'components/barefoot.js' },
+        Parent: { clientJs: 'components/Parent.client.js', stubDeps: ['Child'] },
+        Child: { clientJs: 'components/Child.client.js' },
+      },
+      '/static/components/',
+      new Set(['__barefoot__', 'Parent']),
+      new Set(['__barefoot__', 'Parent']),
+    )
+    expect([...out.keys()]).toEqual(['Child'])
+  })
+})