@barefootjs/jsx 0.5.0 → 0.5.2

package/src/__tests__/adapter-output.test.ts

@@ -653,4 +653,53 @@ describe('Adapter output', () => {
       expect(template.content).not.toMatch(/\b0\s+as\s+number\b/)
     })
   })
+
+  // The no-arg props default (`= {}`) makes a JSX-returning arrow hoisted from
+  // an object-literal value renderable at SSR (#1663). `hasRequiredProps`
+  // treats a prop with a destructuring default as non-required, but the
+  // declared props type may still mark that field required — so a bare `= {}`
+  // would fail `tsc` ("Property 'x' is missing in type '{}'..."). The default
+  // must be asserted to the param's annotated type (`{} as T`).
+  describe('no-arg props default is type-safe for typed required props (#1663 follow-up)', () => {
+    const cases = [
+      ['TestAdapter', () => new TestAdapter()],
+      ['HonoAdapter', () => new HonoAdapter()],
+    ] as const
+
+    for (const [label, make] of cases) {
+      test(`typed required prop with a default emits \`= {} as T\` (${label})`, () => {
+        // `label` is required in the type but carries a destructuring default,
+        // the exact shape that made a bare `= {}` fail tsc.
+        const source = `
+          export function Badge({ label = 'x' }: { label: string }) {
+            return <span>{label}</span>
+          }
+        `
+        const result = compileJSX(source, 'Badge.tsx', { adapter: make() })
+        expect(result.errors).toHaveLength(0)
+
+        const template = result.files.find(f => f.type === 'markedTemplate')!
+        const sig = template.content.split('\n').find(l => l.includes('function Badge'))!
+        // Asserted to the generated props type, never a bare `= {}`.
+        expect(sig).toContain('= {} as BadgePropsWithHydration')
+        expect(sig).not.toMatch(/=\s*\{\}\s*\)/)
+      })
+    }
+
+    test('untyped props still default to a bare `= {} as <hydration type>` (TestAdapter)', () => {
+      const source = `
+        export function Plain() {
+          return <span>hi</span>
+        }
+      `
+      const result = compileJSX(source, 'Plain.tsx', { adapter: new TestAdapter() })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!
+      const sig = template.content.split('\n').find(l => l.includes('function Plain'))!
+      // No declared props type → default asserted to the hydration-only type.
+      expect(sig).toContain('= {} as {')
+      expect(sig).toContain('__instanceId')
+    })
+  })
 })

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

@@ -730,6 +730,49 @@ describe('child components inside .map() (#344)', () => {
     expect(content).not.toContain('children[__idx + ')
   })
 
+  test('static array inside a component container with a preceding static sibling uses siblingOffset (#1688)', () => {
+    // The loop is a direct child of the <Portaled> component (not an
+    // element), with a static <span> sibling before it. Before #1688
+    // computeLoopSiblingOffsets only counted siblings under element
+    // parents, so the offset was silently zero and the first item's
+    // nested child component (Counter) was resolved against the wrong
+    // children[idx] — dropping it during hydration.
+    const source = `
+      'use client'
+
+      function Portaled(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 Repro() {
+        return (
+          <Portaled>
+            <span>static sibling</span>
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Portaled>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Repro.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    const content = clientJs!.content
+
+    // The nested Counter lookup must skip the preceding static <span>.
+    expect(content).toContain('children[__idx + 1]')
+    expect(content).not.toContain('children[__idx]')
+  })
+
   test('nested .map() with multiple inner components emits unique __compEl bindings (#1664)', () => {
     const source = `
       'use client'

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

@@ -2300,8 +2300,11 @@ describe('Client JS generation', () => {
       expect(clientJs).toBeDefined()
       const content = clientJs!.content
 
-      // Text node assignment must guard against nullish values
-      expect(content).toContain("String(__val ?? '')")
+      // Text node updates route through `__bfText`, which renders nullish
+      // values as '' (not the string "undefined") and also splices live
+      // Nodes by identity (#1663). The nullish guard moved from the inline
+      // `String(__val ?? '')` assignment into that helper.
+      expect(content).toContain('__bfText(')
       expect(content).not.toMatch(/\.nodeValue = String\(__val\)(?! )/)
     })
 

package/src/__tests__/inline-jsx-callback.test.ts

@@ -367,3 +367,98 @@ export function Demo() {
     expect(sharedJs).toMatch(/hydrate\(\s*['"]BFInlineJsxCallback1(?:__|['"])/)
   })
 })
+
+/**
+ * Inline JSX as an object-literal arrow value (#1663).
+ *
+ * A `Record<K, () => JSX>` lookup map (`{ piconic: () => <BrandLogo/> }`)
+ * left the JSX untransformed: a module-level map had its const dropped from
+ * the emitted module (`ReferenceError: THEME_LOGOS is not defined` at SSR),
+ * and a function-local map leaked raw `<...>` into the client bundle
+ * (`SyntaxError: Unexpected token '<'`). Both arrow values must be hoisted
+ * into synthesized components, exactly like an arrow in attribute position.
+ */
+describe('inline JSX as object-literal arrow value (#1663)', () => {
+  function markedTemplate(source: string, fileName = 'Header.tsx'): string {
+    const result = compileJSX(source, fileName, { adapter })
+    expect(result.errors).toEqual([])
+    const file = result.files.find(f => f.type === 'markedTemplate')
+    expect(file).toBeDefined()
+    return file!.content
+  }
+
+  test('module-level lookup map: const is preserved and JSX is lowered (repro A)', () => {
+    const source = `
+      'use client'
+      import { BrandLogo } from './brand-logo'
+
+      const THEME_LOGOS: Record<string, () => unknown> = {
+        piconic: () => <BrandLogo name="piconic" />,
+        other: () => <BrandLogo name="other" />,
+      }
+      function themeLogo(id: string) { return THEME_LOGOS[id]() }
+
+      export function Header(props: { id: string }) {
+        return <div class="hdr">{themeLogo(props.id)}</div>
+      }
+    `
+    const js = clientJs(source)
+    const tmpl = markedTemplate(source)
+
+    // The arrow bodies must not survive as live JSX in either output.
+    expect(js).not.toMatch(/=>\s*<BrandLogo\b/)
+    expect(tmpl).not.toMatch(/=>\s*<BrandLogo\b/)
+
+    // The arrow values are replaced by synthesized component references, so
+    // the THEME_LOGOS const survives (it is no longer dropped → no SSR
+    // ReferenceError).
+    expect(js).toContain('THEME_LOGOS')
+    expect(js).toMatch(/piconic:\s*BFInlineJsxCallback1\b/)
+    expect(js).toMatch(/hydrate\(\s*['"]BFInlineJsxCallback1(?:__|['"])/)
+    expect(tmpl).toContain('THEME_LOGOS')
+  })
+
+  test('function-local lookup map: JSX is lowered, not leaked to client (repro B)', () => {
+    const source = `
+      'use client'
+      import { BrandLogo } from './brand-logo'
+
+      export function Header(props: { id: string }) {
+        function themeLogo(id: string) {
+          const logos: Record<string, () => unknown> = {
+            piconic: () => <BrandLogo name="piconic" />,
+          }
+          return logos[id]()
+        }
+        return <div class="hdr">{themeLogo(props.id)}</div>
+      }
+    `
+    const js = clientJs(source)
+    // No raw JSX in the client bundle (the #1663 SyntaxError).
+    expect(js).not.toMatch(/=>\s*<BrandLogo\b/)
+    expect(js).not.toMatch(/return\s*<BrandLogo\b/)
+    expect(js).toMatch(/hydrate\(\s*['"]BFInlineJsxCallback1(?:__|['"])/)
+  })
+
+  test('dynamic JSX-returning call routes the slot through __bfText', () => {
+    // The child expression `{themeLogo(props.id)}` evaluates to a live
+    // component element on the client; the slot update must splice it in by
+    // identity via __bfText rather than stringify it into "[object …]".
+    const source = `
+      'use client'
+      import { BrandLogo } from './brand-logo'
+
+      const THEME_LOGOS: Record<string, () => unknown> = {
+        piconic: () => <BrandLogo name="piconic" />,
+      }
+      function themeLogo(id: string) { return THEME_LOGOS[id]() }
+
+      export function Header(props: { id: string }) {
+        return <div class="hdr">{themeLogo(props.id)}</div>
+      }
+    `
+    const js = clientJs(source)
+    expect(js).toContain('__bfText(')
+    expect(js).toMatch(/__bfText[^']*from '@barefootjs\/client\/runtime'/)
+  })
+})

package/src/__tests__/ir-jsx-props.test.ts

@@ -359,8 +359,11 @@ describe('JSX props (#559)', () => {
 
       const clientJs = result.files.find(f => f.type === 'clientJs')
       expect(clientJs).toBeDefined()
-      // The generated effect should check __isSlot before updating nodeValue
-      expect(clientJs!.content).toContain('__isSlot')
+      // The text update routes through `__bfText`, which preserves the
+      // server-rendered DOM for `__isSlot` values (and splices live Nodes
+      // by identity) instead of the old inline `nodeValue = String(...)`
+      // assignment. The `__isSlot` guard now lives inside that helper (#1663).
+      expect(clientJs!.content).toContain('__bfText')
     })
   })
 })

package/src/__tests__/loop-item-conditional-codegen.test.ts

@@ -0,0 +1,81 @@
+/**
+ * Codegen-routing tests for whole-item loop conditionals (#1665).
+ *
+ * Two concerns:
+ *  1. Detection boundary — which `.map()` body shapes route to the anchored
+ *     `mapArrayAnchored` path (an item may render 0-or-1 element) vs. stay on
+ *     the legacy element-tracking `mapArray` path (always exactly one element).
+ *  2. Keyless robustness — a whole-item conditional without a key is a BF023
+ *     error, but the emitted client JS must still be syntactically valid (an
+ *     empty key once produced `createComment(`bf-loop-i:${}`)`, a SyntaxError
+ *     that breaks the whole bundle).
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { ErrorCodes } from '../errors'
+
+const adapter = new TestAdapter()
+
+function clientJsFor(body: string, withKey = true): { js: string; errorCodes: string[] } {
+  const key = withKey ? ' key={t.id}' : ''
+  const source = `
+    'use client'
+    import { createSignal } from '@barefootjs/client'
+    export function C() {
+      const [items] = createSignal([{ id: 'a', on: true }])
+      const [sel] = createSignal('a')
+      return <ul>{items().map(t => ${body.replace('KEY', key)})}</ul>
+    }
+  `
+  const result = compileJSX(source, 'C.tsx', { adapter })
+  return {
+    js: result.files.find((f) => f.type === 'clientJs')?.content ?? '',
+    errorCodes: result.errors.map((e) => e.code),
+  }
+}
+
+const usesAnchored = (js: string) => js.includes('mapArrayAnchored(')
+const usesLegacy = (js: string) => js.includes('mapArray(') && !js.includes('mapArrayAnchored(')
+
+describe('#1665 — anchored-vs-legacy routing for .map() bodies', () => {
+  test('logical && JSX body routes to mapArrayAnchored', () => {
+    expect(usesAnchored(clientJsFor('sel() === t.id && <li KEY>{t.id}</li>').js)).toBe(true)
+  })
+
+  test('ternary with a null branch routes to mapArrayAnchored', () => {
+    expect(usesAnchored(clientJsFor('sel() === t.id ? <li KEY>{t.id}</li> : null').js)).toBe(true)
+  })
+
+  test('logical || JSX body routes to mapArrayAnchored', () => {
+    expect(usesAnchored(clientJsFor('t.on || <li KEY>{t.id}</li>').js)).toBe(true)
+  })
+
+  test('ternary with a scalar branch routes to mapArrayAnchored', () => {
+    // The element-less side renders text, never a tracked element, so the item
+    // is still 0-or-1 element across states — anchored, not legacy.
+    expect(usesAnchored(clientJsFor("sel() === t.id ? <li KEY>{t.id}</li> : 'none'").js)).toBe(true)
+  })
+
+  test('ternary with two element branches stays on the legacy mapArray path', () => {
+    // Always exactly one element, so element tracking is sufficient — must NOT
+    // pay the anchored-emission cost.
+    const { js } = clientJsFor('sel() === t.id ? <li KEY>A</li> : <span KEY>B</span>')
+    expect(usesLegacy(js)).toBe(true)
+    expect(usesAnchored(js)).toBe(false)
+  })
+})
+
+describe('#1665 — keyless whole-item conditional emits valid JS (BF023)', () => {
+  test('logical && without a key raises BF023 but still emits parseable JS', () => {
+    const { js, errorCodes } = clientJsFor('sel() === t.id && <li>{t.id}</li>', /* withKey */ false)
+    expect(errorCodes).toContain(ErrorCodes.MISSING_KEY_IN_LIST)
+    // No empty template-literal interpolation, and the anchor falls back to the
+    // iteration index so the comment value is well-formed.
+    expect(js).not.toContain('${}')
+    expect(js).toContain('bf-loop-i:${__idx}')
+    // The whole client module must parse.
+    const body = js.replace(/^import[^\n]*\n/gm, '').replace(/^export /gm, '')
+    expect(() => new Function(body)).not.toThrow()
+  })
+})

package/src/__tests__/map-logical-jsx-helper.test.ts

@@ -0,0 +1,159 @@
+/**
+ * BarefootJS Compiler — `.map()` callback whose body is a logical
+ * expression (`&&` / `||` / `??`) that renders JSX.
+ *
+ * Regression for #1665: calling a module-level JSX helper from inside a
+ * reactive `.map()` child (`THEMES.map(t => sel === t.id && themeLogo(t.id))`)
+ * threw `ReferenceError: themeLogo is not defined` at hydration.
+ *
+ * Root cause: `transformMapCall` only recognised JSX-element, ternary,
+ * parenthesized, flatMap-array, and block callback bodies. A logical-`&&`
+ * body fell through, leaving `children` empty, so the whole `.map(...)`
+ * was emitted verbatim as a reactive-text expression — the inline JSX was
+ * never compiled and the JSX helper was never inlined nor declared,
+ * producing a ReferenceError.
+ *
+ * The fix routes a JSX-rendering logical callback body through the shared
+ * JSX expression transformer, which lowers it into an IRConditional and
+ * inlines any JSX helper (the same path the ternary form already used).
+ * The routing is scoped to logical operators so the bare-call body
+ * (`map(t => renderItem(t))`, owned by #546) and scalar logical bodies
+ * (`t.active && t.label`) keep their existing reactive-text behaviour.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('.map() with logical / JSX-helper-call body (#1665)', () => {
+  test('module-level JSX helper in a `&&` map body is inlined, not left as a bare call', () => {
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      function themeLogo(id: string) {
+        if (id === 'hono') return <span>hono</span>
+        return <span>piconic</span>
+      }
+      export function Header(props: { sel: string }) {
+        return <div>{THEMES.map(t => props.sel === t.id && themeLogo(t.id))}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+
+    // The helper must NOT survive as a runtime call in the client bundle —
+    // it is inlined. A surviving `themeLogo(` call with no declaration is
+    // the exact ReferenceError the issue reported.
+    expect(clientJs).not.toMatch(/themeLogo\s*\(/)
+
+    // The map is compiled into a loop, and the helper's JSX is inlined.
+    expect(clientJs).toContain('<!--bf-loop')
+    expect(clientJs).toContain('hono')
+    expect(clientJs).toContain('piconic')
+  })
+
+  test('parenthesized `&&` with a single-return JSX helper is inlined', () => {
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      function themeLogo(id: string) { return <span>{id}</span> }
+      export function Header(props: { sel: string }) {
+        return <div>{THEMES.map(t => (props.sel === t.id && themeLogo(t.id)))}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+
+    expect(clientJs).not.toMatch(/themeLogo\s*\(/)
+    expect(clientJs).toContain('<!--bf-loop')
+    expect(clientJs).toContain('<span')
+  })
+
+  test('`??` JSX-helper fallback in a map body is inlined', () => {
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      function themeLogo(id: string) { return <span>{id}</span> }
+      export function Header(props: { current?: string }) {
+        return <div>{THEMES.map(t => props.current ?? themeLogo(t.id))}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+
+    // `transformJsxExpression` now routes a `||`/`??` whose right operand
+    // renders JSX via a tracked helper through the nullish transformer, so
+    // the helper is inlined rather than left as a verbatim call.
+    expect(clientJs).not.toMatch(/themeLogo\s*\(/)
+    expect(clientJs).toContain('<span')
+  })
+
+  test('bare JSX-helper call body keeps its #546 reactive-text behaviour', () => {
+    // Boundary guard: the narrowed fix must NOT re-route a bare call body
+    // into the conditional path — that remains #546 territory. A local
+    // arrow helper is declared in init scope, so the call survives.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function List() {
+        const [items, _set] = createSignal([{ id: '1' }])
+        const renderItem = (item: any) => <li>{item.id}</li>
+        return <ul>{items().map(item => renderItem(item))}</ul>
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+    // The bare call is preserved (not inlined into a conditional loop).
+    expect(clientJs).toMatch(/renderItem\s*\(/)
+  })
+
+  test('inline JSX in a `&&` map body compiles instead of emitting raw JSX verbatim', () => {
+    // `key` is required on the `&&` JSX operand (#1665 / BF023): a whole-item
+    // conditional renders 0-or-1 element per iteration and needs a stable key
+    // for correct reconciliation, exactly like a ternary branch.
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      export function Header(props: { sel: string }) {
+        return <div>{THEMES.map(t => props.sel === t.id && <span key={t.id}>{t.id}</span>)}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+    // Compiled into a loop with a conditional branch — not the raw,
+    // un-compiled `<span>{t.id}</span>` JSX literal the buggy path left
+    // inside the client-bundle template string.
+    expect(clientJs).toContain('<!--bf-loop')
+    expect(clientJs).not.toContain('<span>{t.id}</span>')
+  })
+
+  test('scalar `&&` map body keeps its plain reactive-text behaviour', () => {
+    // Guard: a non-JSX logical body must NOT be re-routed into the
+    // conditional-control-flow path. It stays a verbatim map expression.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Labels() {
+        const [items, _set] = createSignal([{ active: true, name: 'A' }])
+        return <div>{items().map(t => t.active && t.name)}</div>
+      }
+    `
+    const result = compileJSX(source, 'Labels.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+    // Still rendered as the raw map expression (no loop control flow).
+    expect(clientJs).not.toContain('<!--bf-loop')
+    expect(clientJs).toContain('.map(')
+  })
+})

package/src/__tests__/missing-key-in-list.test.ts

@@ -224,6 +224,55 @@ describe('BF023 — ternary .map() callback', () => {
   })
 })
 
+// ---------------------------------------------------------------------------
+// BF023 — logical (&&, ||, ??) .map() callback (#1665)
+//
+// A whole-item conditional (`cond && <li>`) renders 0-or-1 element per
+// iteration. The same key reconciliation applies — without a key, toggling
+// items collapses or misorders them — so the JSX element inside a logical
+// expression must carry a key, just like a ternary branch.
+// ---------------------------------------------------------------------------
+
+describe('BF023 — logical && / || .map() callback (#1665)', () => {
+  test('&& body without key raises BF023', () => {
+    const source = `
+      interface Item { active: boolean; id: string }
+      export function List({ items }: { items: Item[] }) {
+        return <ul>{items.map(item => item.active && <li>{item.id}</li>)}</ul>
+      }
+    `
+    const errs = errorsFor(ErrorCodes.MISSING_KEY_IN_LIST, source)
+    expect(errs).toHaveLength(1)
+    expect(errs[0].severity).toBe('error')
+  })
+
+  test('&& body with key — no error', () => {
+    const source = `
+      interface Item { active: boolean; id: string }
+      export function List({ items }: { items: Item[] }) {
+        return <ul>{items.map(item => item.active && <li key={item.id}>{item.id}</li>)}</ul>
+      }
+    `
+    const result = compile(source)
+    const errs = result.errors.filter(
+      (e) => e.code === ErrorCodes.MISSING_KEY_IN_LIST || e.code === ErrorCodes.MISSING_KEY_IN_NESTED_LIST,
+    )
+    expect(errs).toHaveLength(0)
+  })
+
+  test('|| body without key raises BF023', () => {
+    const source = `
+      interface Item { hidden: boolean; id: string }
+      export function List({ items }: { items: Item[] }) {
+        return <ul>{items.map(item => item.hidden || <li>{item.id}</li>)}</ul>
+      }
+    `
+    const errs = errorsFor(ErrorCodes.MISSING_KEY_IN_LIST, source)
+    expect(errs).toHaveLength(1)
+    expect(errs[0].severity).toBe('error')
+  })
+})
+
 // ---------------------------------------------------------------------------
 // BF024 — nested map
 // ---------------------------------------------------------------------------

package/src/__tests__/reactive-attrs-in-map.test.ts

@@ -236,6 +236,47 @@ describe('reactive attributes inside .map() callbacks', () => {
     expect(forEachMatches.length).toBe(1)
   })
 
+  test('per-item attr reading an outer signal via helper+index gets a createEffect (#1673)', () => {
+    // A per-item attribute whose value reads the source array signal through
+    // a helper indexed by position (`widthAt(i)` → `items()[i].w`) used to
+    // emit NO reactive effect — the value was baked into the item template
+    // once and froze at its SSR value. The identical binding on a top-level
+    // element works, because the top-level path wraps opaque function calls
+    // via the Solid-style AST-flag fallback (#940). This test pins that the
+    // loop-child path now applies the same fallback.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ReproLoopAttr() {
+        const [items, setItems] = createSignal([{ id: 'a', w: 20 }, { id: 'b', w: 50 }])
+        const widthAt = (i) => items()[i].w
+        return (
+          <ul>
+            {items().map((it, i) => (
+              <li key={it.id} data-b style={\`width:\${widthAt(i)}%\`}>{it.id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const result = compileJSX(source, 'ReproLoopAttr.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    // The per-item style binding must be wired through a createEffect that
+    // re-reads the helper and writes the style attribute, so it tracks the
+    // `items()` signal and updates after hydration. Pin the helper call
+    // *inside* the createEffect alongside the style write — `widthAt(` also
+    // appears in the static template clone, so asserting it independently
+    // could pass even if the effect was missing (the exact regression here).
+    // The index resolves to the loop's renderItem index param, in scope
+    // inside the factory.
+    expect(clientJs).toMatch(
+      /createEffect\(\(\)\s*=>\s*\{[\s\S]*?widthAt\([\s\S]*?setAttribute\('style'/,
+    )
+  })
+
   test('keyed loop: `key` prop is not emitted as a reactive DOM attribute', () => {
     // Regression guard for the "key duplicate emission" bug:
     // `<li key={item.id}>` used to be both rendered as `data-key=` in the

package/src/adapters/test-adapter.ts

@@ -138,11 +138,26 @@ export class TestAdapter extends JsxAdapter {
     }
     const fullPropsDestructure = `{ ${parts.join(', ')} }`
 
+    // Default the props param to `{}` when the component has no required
+    // props, so a bare no-arg call (`Foo()`) doesn't crash on destructuring
+    // `undefined`. This is what makes a JSX-returning arrow hoisted from an
+    // object-literal value (e.g. `THEME_LOGOS[id]()`) renderable at SSR
+    // (#1663). `hasRequiredProps` ignores props that carry a destructuring
+    // default, but the declared props type may still mark that field
+    // required — so a bare `= {}` would fail `tsc` ("Property 'x' is missing
+    // in type '{}'..."). Assert the default to the param's own annotated type
+    // (`{} as T`); the destructuring defaults supply the values at runtime.
+    const hasRequiredProps = ir.metadata.propsParams.some(
+      (p: ParamInfo) => !p.optional && p.defaultValue === undefined && !p.isRest,
+    )
+    const propsTypeExpr = typeAnnotation.replace(/^:\s*/, '')
+    const noArgDefault = hasRequiredProps ? '' : ` = {} as ${propsTypeExpr}`
+
     const lines: string[] = []
     // Module-export keyword belongs to the adapter: it knows the target language
     // and whether the source declared the component as exported.
     const exportPrefix = ir.metadata.isExported === false ? '' : 'export '
-    lines.push(`${exportPrefix}function ${name}(${fullPropsDestructure}${typeAnnotation}) {`)
+    lines.push(`${exportPrefix}function ${name}(${fullPropsDestructure}${typeAnnotation}${noArgDefault}) {`)
 
     // Generate scope ID
     if (hasClientInteractivity) {