@barefootjs/hono 0.29.0 → 0.30.2

package/src/__tests__/aliased-destructured-prop.test.ts

@@ -0,0 +1,128 @@
+/**
+ * Aliased (renaming) destructured props (#2460).
+ *
+ * The Hono adapter used to build its SSR props destructure keyed by
+ * `ParamInfo.name` (the LOCAL binding) instead of `sourceName ?? name`
+ * (the CALLER-facing key — see `ParamInfo.sourceName`'s docstring in
+ * `packages/jsx/src/types.ts`). For a renaming destructure
+ * (`{ n: count }`) the emitted SSR function read a `count` property the
+ * caller never passed (the caller passes `n`), so the local binding was
+ * always `undefined`.
+ *
+ * These tests render through Hono end-to-end (`renderHonoComponent`) and
+ * assert the actual rendered VALUE, not just the emitted destructure
+ * text — a byte-identical destructure with the wrong runtime binding
+ * would still pass a text-only assertion.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '@barefootjs/jsx'
+import { renderHonoComponent } from '../test-render'
+import { HonoAdapter } from '../adapter/hono-adapter'
+
+describe('aliased destructured props (#2460)', () => {
+  test('{ text, n: count } — aliased, no default: the caller-supplied `n` reaches the `count` binding', async () => {
+    const html = await renderHonoComponent({
+      adapter: new HonoAdapter(),
+      source: `
+        export function Badge({ text, n: count }: { text: string; n: number }) {
+          return <span>{text}:{count}</span>
+        }
+      `,
+      props: { text: 'hello', n: 7 },
+    })
+
+    expect(html).toContain('hello')
+    expect(html).toContain(':<!--bf:s1-->7<!--/-->')
+  })
+
+  test('{ text, n: count = 7 } — aliased with a destructuring default, caller omits `n`', async () => {
+    const html = await renderHonoComponent({
+      adapter: new HonoAdapter(),
+      source: `
+        export function Badge({ text, n: count = 7 }: { text: string; n?: number }) {
+          return <span>{text}:{count}</span>
+        }
+      `,
+      props: { text: 'hello' },
+    })
+
+    expect(html).toContain(':<!--bf:s1-->7<!--/-->')
+  })
+
+  test('{ text, n: count = 7 } — aliased with a default, caller-supplied `n` overrides it', async () => {
+    const html = await renderHonoComponent({
+      adapter: new HonoAdapter(),
+      source: `
+        export function Badge({ text, n: count = 7 }: { text: string; n?: number }) {
+          return <span>{text}:{count}</span>
+        }
+      `,
+      props: { text: 'hello', n: 42 },
+    })
+
+    expect(html).toContain(':<!--bf:s1-->42<!--/-->')
+  })
+
+  test('{ text, n } — un-aliased: emitted destructure text is byte-identical to the pre-fix shorthand', () => {
+    const source = `
+      export function Badge({ text, n }: { text: string; n: number }) {
+        return <span>{text}:{n}</span>
+      }
+    `
+    const result = compileJSX(source, 'Badge.tsx', { adapter: new HonoAdapter() })
+    const errors = result.errors.filter((e) => e.severity === 'error')
+    expect(errors).toEqual([])
+    const tmpl = result.files.find((f) => f.type === 'markedTemplate')
+    expect(tmpl).toBeDefined()
+    // Plain shorthand destructure — no `sourceKey: localName` rename text
+    // for an un-aliased prop.
+    expect(tmpl!.content).toContain('export function Badge({ text, n, __instanceId,')
+  })
+
+  test('a renamed `class` prop emits the rename `class: className`, not a bare `className`', () => {
+    // `class` is a reserved word and can never be an un-aliased binding
+    // identifier (`{ class }` is a syntax error), so the only way a
+    // `class`-named caller prop reaches `propsParams` through a
+    // destructured component is via an explicit alias.
+    const source = `
+      export function Chip({ class: className }: { class: string }) {
+        return <span class={className}>x</span>
+      }
+    `
+    const result = compileJSX(source, 'Chip.tsx', { adapter: new HonoAdapter() })
+    const errors = result.errors.filter((e) => e.severity === 'error')
+    expect(errors).toEqual([])
+    const tmpl = result.files.find((f) => f.type === 'markedTemplate')
+    expect(tmpl).toBeDefined()
+    expect(tmpl!.content).toContain('class: className')
+  })
+
+  test('aliased prop reaches client-side hydration serialization with the correct value', async () => {
+    // The client init function reads `_p.<localName>` (props-extraction
+    // phase), so the SSR-serialized `bf-p` blob must carry the correct
+    // value under the LOCAL key (`count`) — the rename only affects the
+    // caller-facing key, not the local binding the hydration bridge uses.
+    const html = await renderHonoComponent({
+      adapter: new HonoAdapter(),
+      source: `
+        'use client'
+        import { createEffect } from '@barefootjs/client'
+        export function Badge({ text, n: count }: { text: string; n: number }) {
+          createEffect(() => {
+            console.log(count)
+          })
+          return <span>{text}:{count}</span>
+        }
+      `,
+      props: { text: 'hello', n: 7 },
+    })
+
+    // The rendered value is correct...
+    expect(html).toContain(':<!--bf:s1-->7<!--/-->')
+    // ...and the serialized hydration payload carries it under the LOCAL
+    // binding name, which is what the generated client JS's
+    // `const count = _p.count` extraction reads.
+    expect(html).toMatch(/bf-p="[^"]*count[^"]*7/)
+  })
+})

package/src/adapter/hono-adapter.ts

@@ -35,6 +35,7 @@ import {
   emitAttrValue,
   buildLoopChainExpr,
 } from '@barefootjs/jsx'
+import ts from 'typescript'
 
 /**
  * Hono adapter's IRNode render context: which surrounding render
@@ -44,7 +45,6 @@ import {
  */
 type HonoRenderCtx = {
   isRootOfClientComponent?: boolean
-  isInsideLoop?: boolean
   isLoopItemRoot?: boolean
 }
 import { BF_SCOPE, BF_HOST, BF_AT, BF_ROOT, BF_PROPS, BF_REGION, escapeHtml } from '@barefootjs/shared'
@@ -99,6 +99,28 @@ function applyHonoLoopChain(loop: IRLoop): string {
   })
 }
 
+/**
+ * Authoritative IdentifierName classification for a destructure-pattern
+ * property key, built on TS's own `isIdentifierStart` / `isIdentifierPart`
+ * primitives (Unicode-aware, stays aligned with what TS itself accepts as
+ * a bare property key). Mirrors the `isIdent` precedent in
+ * `jsx-to-ir.ts` (#1244) — a source key like `data-key` or `aria-label`
+ * can't be emitted as a bare `key: local` destructure and must be quoted
+ * (`"data-key": local`).
+ */
+function isIdentifierName(key: string): boolean {
+  if (key.length === 0) return false
+  for (let i = 0; i < key.length; ) {
+    const cp = key.codePointAt(i)!
+    const ok = i === 0
+      ? ts.isIdentifierStart(cp, ts.ScriptTarget.Latest)
+      : ts.isIdentifierPart(cp, ts.ScriptTarget.Latest)
+    if (!ok) return false
+    i += cp > 0xFFFF ? 2 : 1
+  }
+  return true
+}
+
 export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderCtx> {
   name = 'hono'
   extension = '.tsx'
@@ -506,8 +528,22 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
       const parts: string[] = []
       const propsParams = ir.metadata.propsParams
         .map((p: ParamInfo) => {
-          const paramName = p.name === 'class' ? 'className' : p.name
-          return p.defaultValue ? `${paramName} = ${p.defaultValue}` : paramName
+          // The caller-facing key is `sourceName ?? name` (ParamInfo's own
+          // rule) — `name` is only ever the LOCAL binding. Emit the plain
+          // shorthand when they match (byte-identical to before this was
+          // rename-aware); emit a `key: local` rename otherwise. This also
+          // covers the `class` → `className` rename correctly: a source
+          // prop literally named `class` can only reach `propsParams` via
+          // an aliased destructure (`{ class: className }` — `class` is a
+          // reserved word, so it can never be an un-aliased binding), which
+          // already sets `sourceName: 'class'` and is handled by the rename
+          // branch below (`class: className`), not a bare `className`.
+          const callerKey = p.sourceName ?? p.name
+          const localName = p.name
+          const binding = callerKey === localName
+            ? localName
+            : `${isIdentifierName(callerKey) ? callerKey : JSON.stringify(callerKey)}: ${localName}`
+          return p.defaultValue ? `${binding} = ${p.defaultValue}` : binding
         })
         .join(', ')
       if (propsParams) {
@@ -874,7 +910,10 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
     const indexParam = loop.index ? `, ${loop.index}${indexAnnotation}` : ''
     // Push loop key info for data-key attribute generation on loop items
     this.loopKeyStack.push({ key: loop.key, param: loop.param })
-    // Render children with isInsideLoop flag so components generate their own scope IDs
+    // Render children with isLoopItemRoot so a DIRECT component member gets
+    // its own randomized scope id (matching `IRComponent.loopItemRoot`,
+    // #2444) rather than deriving from parent scope + slot like an
+    // ordinarily-slotted child.
     const children = this.renderChildrenInLoop(loop.children)
     this.loopKeyStack.pop()
 
@@ -969,7 +1008,7 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
   }
 
   private renderChildrenInLoop(children: IRNode[]): string {
-    return children.map((child) => this.renderNode(child, { isInsideLoop: true, isLoopItemRoot: true })).join('')
+    return children.map((child) => this.renderNode(child, { isLoopItemRoot: true })).join('')
   }
 
   /**
@@ -1040,7 +1079,7 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
     )
   }
 
-  renderComponent(comp: IRComponent, ctx?: { isRootOfClientComponent?: boolean; isInsideLoop?: boolean; isLoopItemRoot?: boolean }): string {
+  renderComponent(comp: IRComponent, ctx?: { isRootOfClientComponent?: boolean; isLoopItemRoot?: boolean }): string {
     const props = this.renderComponentProps(comp)
     const children = this.renderChildren(comp.children)
 
@@ -1066,10 +1105,11 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
       // Also pass bf-s for asChild/Slot patterns where the component
       // forwards props to a DOM element via {...props}.
       scopeAttr += ` ${BF_SCOPE}={__scopeId}`
-    } else if (ctx?.isInsideLoop) {
-      // Components inside loops should generate their own unique scope IDs
-      // Pass __bfScope so they use it as fallback but generate unique IDs
-      // This ensures each loop iteration has a distinct component instance
+    } else if (comp.loopItemRoot) {
+      // A component that is the DIRECT root of a loop row owns its own
+      // per-row identity — generate a unique scope id rather than deriving
+      // from parent scope + slot (#2444). Pass __bfScope so it uses it as
+      // fallback but still generates a unique id per iteration.
       if (comp.slotId) {
         scopeAttr = ` __bfScope={\`\${__scopeId}_${comp.slotId}\`}${bfChildAttr}${bfMountAttr}`
       } else {