@barefootjs/jsx 0.17.1 → 0.18.0

package/src/__tests__/loop-destructure.test.ts

@@ -0,0 +1,313 @@
+/**
+ * Tests for #2087 Phase A: `isLowerableLoopDestructure` (née
+ * `isLowerableObjectRestDestructure`) — the gate template adapters use to
+ * decide whether a `.map()` callback's destructure param can be lowered
+ * natively, versus falling back to the BF104 diagnostic.
+ *
+ * Compiles a small component to IR (`analyzeComponent` + `jsxToIR`, the same
+ * helper pattern as `ir-sort-comparator.test.ts`), locates the `IRLoop`
+ * node, and asserts the gate's verdict plus (where relevant) the structured
+ * `segments` path each binding carries.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { isLowerableLoopDestructure, isLowerableObjectRestDestructure } from '../loop-destructure'
+import { ErrorCodes } from '../errors'
+import type { IRLoop, IRNode } from '../types'
+
+function findFirstLoop(node: IRNode): IRLoop {
+  if (node.type === 'loop') return node
+  if (node.type === 'element' || node.type === 'fragment') {
+    for (const child of node.children) {
+      if (child.type === 'loop') return child
+      if (child.type === 'element' || child.type === 'fragment') {
+        try {
+          return findFirstLoop(child)
+        } catch {
+          // keep scanning siblings
+        }
+      }
+    }
+  }
+  throw new Error('no loop node found in IR')
+}
+
+function compileLoop(
+  source: string,
+  targetComponentName?: string,
+  filename = 'Test.tsx',
+): { loop: IRLoop; errors: ReturnType<typeof analyzeComponent>['errors'] } {
+  const ctx = analyzeComponent(source, filename, targetComponentName)
+  const ir = jsxToIR(ctx)
+  expect(ir).not.toBeNull()
+  return { loop: findFirstLoop(ir!), errors: ctx.errors }
+}
+
+describe('isLowerableLoopDestructure (#2087)', () => {
+  test('simple .field bindings + object-rest read via member access → true (existing behavior)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      export function RestObject() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().map(({ id, title, ...rest }) => (
+              <li key={id}>{title}:{rest.flag}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('array-index tuple destructure ([k, v]) → true (NEW)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Row = readonly [string, string]
+      export function IndexPairs() {
+        const [rows, setRows] = createSignal<Row[]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(([k, v]) => (
+              <li key={k}>{k}:{v}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('nested { id, cells: [head] } → true (NEW)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Row = { id: string; cells: readonly string[] }
+      export function NestedHead() {
+        const [rows, setRows] = createSignal<Row[]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(({ id, cells: [head] }) => (
+              <li key={id}>{head}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('array-rest [first, ...tail] with tail.length read → true (NEW)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function RestTuple() {
+        const [rows, setRows] = createSignal<string[][]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(([first, ...tail]) => (
+              <li key={first}>{first} (+{tail.length})</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('object-rest {...rest} spread onto the loop-item root <li> → true (NEW)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      export function RestSpread() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().map(({ id, title, ...rest }) => (
+              <li key={id} {...rest}>{title}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('object-rest spread on a COMPONENT (<Child {...rest} />) → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      function Child(props: { title: string; flag: string }) {
+        return <span>{props.title}</span>
+      }
+      export function RestOntoComponent() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().map(({ id, ...rest }) => (
+              <li key={id}><Child {...rest} /></li>
+            ))}
+          </ul>
+        )
+      }
+    `, 'RestOntoComponent')
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('object-rest bare value use in a text expression ({String(rest)}) → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      export function RestBareText() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().map(({ id, ...rest }) => (
+              <li key={id}>{String(rest)}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('object-rest bare value use in an event handler (onClick={() => fn(rest)}) → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      export function RestBareHandler() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        const fn = (t: unknown) => {}
+        return (
+          <ul>
+            {tasks().map(({ id, ...rest }) => (
+              <li key={id} onClick={() => fn(rest)}>{id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('.filter(...).map(({a}) => ...) chain → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; done: boolean }
+      export function FilterChain() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().filter(t => !t.done).map(({ id }) => (
+              <li key={id}>{id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('binding named __bf_item → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ReservedName() {
+        const [rows, setRows] = createSignal<{ __bf_item: string }[]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(({ __bf_item }) => (
+              <li key={__bf_item}>{__bf_item}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('computed property key still raises BF025 and produces no paramBindings (unchanged)', () => {
+    const { loop, errors } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      const KEY = 'a' as const
+      export function Computed() {
+        const [items, setItems] = createSignal<Record<string, number>[]>([])
+        return (
+          <ul onClick={() => setItems(i => i)}>
+            {items().map(({ [KEY]: v }) => <li key={v}>{v}</li>)}
+          </ul>
+        )
+      }
+    `)
+    const bf025 = errors.filter(e => e.code === ErrorCodes.UNSUPPORTED_DESTRUCTURE_REST)
+    expect(bf025.length).toBe(1)
+    expect(bf025[0].severity).toBe('error')
+    expect(loop.paramBindings).toBeUndefined()
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('deprecated alias isLowerableObjectRestDestructure is the same function', () => {
+    expect(isLowerableObjectRestDestructure).toBe(isLowerableLoopDestructure)
+  })
+
+  test('segments: nested { id, cells: [head, ...rest] } pins field/index/non-ident classification', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Row = { id: string; cells: readonly string[]; 'data-priority': string }
+      export function NestedSegments() {
+        const [rows, setRows] = createSignal<Row[]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(({ id, cells: [head, ...rest], 'data-priority': prio }) => (
+              <li key={id}>{head}:{String(rest.length)}:{prio}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const bindings = loop.paramBindings
+    expect(bindings).toBeDefined()
+
+    const idBinding = bindings!.find(b => b.name === 'id')
+    expect(idBinding?.segments).toEqual([{ kind: 'field', key: 'id', isIdent: true }])
+
+    const headBinding = bindings!.find(b => b.name === 'head')
+    expect(headBinding?.segments).toEqual([
+      { kind: 'field', key: 'cells', isIdent: true },
+      { kind: 'index', index: 0 },
+    ])
+
+    const restBinding = bindings!.find(b => b.name === 'rest')
+    expect(restBinding?.rest?.kind).toBe('array')
+    expect(restBinding?.segments).toEqual([{ kind: 'field', key: 'cells', isIdent: true }])
+
+    const prioBinding = bindings!.find(b => b.name === 'prio')
+    expect(prioBinding?.segments).toEqual([{ kind: 'field', key: 'data-priority', isIdent: false }])
+  })
+})

package/src/__tests__/loop-hoisted-template.test.ts

@@ -0,0 +1,235 @@
+/**
+ * Hoisted shared-template fast path for `mapArray` loop bodies (perf).
+ *
+ * Background: the legacy emission builds a fresh `document.createElement
+ * ('template')` + interpolated `innerHTML` per row inside `renderItem`,
+ * re-parsing the same HTML shape on every iteration and re-computing
+ * `escapeText`/`escapeAttr` for values a loop-child `createEffect` is about
+ * to overwrite anyway on its eager first run (double work). When the loop
+ * body is a statically-analyzable single-root element tree whose dynamic
+ * parts are text/attribute slots already covered by a loop-child effect,
+ * `buildLoopSkeletonTemplate` (html-template.ts) builds a STATIC-ONLY
+ * skeleton once, and the stringifier (`control-flow/stringify/loop.ts`)
+ * declares it before the `mapArray` call and clones from it per row instead.
+ *
+ * These tests pin:
+ *   - the fast path fires for the classic js-framework-benchmark row shape
+ *     (reactive class attr + two reactive text slots + static cells)
+ *   - the hoisted template contains no `${...}` interpolations and no
+ *     escapeText/escapeAttr calls
+ *   - the fast path refuses (falls back to the legacy per-row emission) for
+ *     an inline ternary/conditional body
+ *   - the fast path refuses for a loop body carrying a `{...spread}` attr
+ *   - an SVG loop body either takes the fast path with the correct
+ *     `<svg>`-wrapped clone, or falls back — never silently mis-namespaces
+ *   - the SSR-mirror `template:` lambda is unaffected either way (still
+ *     carries the fully interpolated per-row template with escaping)
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function compile(source: string, filename: string): { clientJs: string; template: 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')
+  const template = result.files.find(f => f.type === 'markedTemplate')
+  expect(clientJs).toBeDefined()
+  expect(template).toBeDefined()
+  return { clientJs: clientJs!.content, template: template!.content }
+}
+
+describe('hoisted loop-body skeleton template (perf)', () => {
+  test('fast path applies to the classic benchmark row shape', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface RowData { id: number; label: string }
+
+      export function Bench() {
+        const [rows, setRows] = createSignal<RowData[]>([])
+        const [selected, setSelected] = createSignal<number>(0)
+        return (
+          <table>
+            <tbody>
+              {rows().map(row => (
+                <tr key={row.id} className={selected() === row.id ? 'danger' : ''}>
+                  <td className="col-md-1">{row.id}</td>
+                  <td className="col-md-4">
+                    <a className="lbl" onClick={() => setSelected(row.id)}>{row.label}</a>
+                  </td>
+                  <td className="col-md-6"></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )
+      }
+    `
+    const { clientJs, template } = compile(source, 'Bench.tsx')
+
+    // Hoisted declaration present, before the mapArray call.
+    const declIdx = clientJs.indexOf('.innerHTML = `<tr')
+    const mapArrayIdx = clientJs.indexOf('mapArray(')
+    expect(declIdx).toBeGreaterThan(-1)
+    expect(mapArrayIdx).toBeGreaterThan(-1)
+    expect(declIdx).toBeLessThan(mapArrayIdx)
+
+    // renderItem clones from the hoisted template instead of re-parsing
+    // innerHTML per row.
+    expect(clientJs).toMatch(/const __el = __existing \?\? __tpl_\w+\.content\.firstElementChild\.cloneNode\(true\)/)
+
+    // The hoisted template itself carries no interpolations and no dynamic
+    // `class` attribute (that's covered by the reactive-attr createEffect).
+    const declMatch = clientJs.match(/\.innerHTML = `(<tr[^\n]*<\/tr>)`/)
+    expect(declMatch).not.toBeNull()
+    const skeleton = declMatch![1]
+    expect(skeleton).not.toContain('${')
+    // The `<tr>` root's own reactive `class` attr is omitted entirely
+    // (covered by the reactive-attr createEffect) — only its static
+    // descendants (`<td class="col-md-1">`, `<a class="lbl">`) keep theirs.
+    expect(skeleton).toMatch(/^<tr data-key="" bf="\w+">/)
+    expect(skeleton).not.toContain('danger')
+    expect(skeleton).toContain('data-key=""')
+    expect(skeleton).toContain('<!--bf:')
+    // Text slots are empty between their markers.
+    expect(skeleton).toMatch(/<!--bf:s\d+--><!--\/-->/)
+
+    // Static content (the empty col-md-6 cell, the "x"-less <a> shell) is
+    // still present verbatim.
+    expect(skeleton).toContain('col-md-6')
+
+    // No escaping helpers in the `init`/renderItem body now that the per-row
+    // interpolation is gone (only the reactive createEffects remain, which
+    // use textContent/setAttribute — inherently safe). The CSR-mount
+    // `template:` lambda passed to `hydrate(...)` is a SEPARATE SSR-mirror
+    // string (unchanged by this optimization — see below), so scope the
+    // assertion to the code before that lambda.
+    const initBody = clientJs.slice(0, clientJs.indexOf('hydrate('))
+    expect(initBody).not.toContain('escapeAttr(')
+    expect(initBody).not.toContain('escapeText(')
+
+    // SSR/adapter markedTemplate output is untouched by this optimization —
+    // still the reactive `className={...}` expression verbatim (the
+    // TestAdapter emits JSX, not a string template, so there's no
+    // escapeAttr/escapeText call here — that's a CSR-string-template-only
+    // concern, checked below).
+    expect(template).toContain("className={`${selected() === row.id ? 'danger' : ''}`}")
+
+    // The `template:` lambda embedded in the CSR bundle (used for
+    // from-scratch, no-existing-DOM mounts) is a separate SSR-mirror string
+    // and stays fully interpolated + escaped, unaffected by the hoisted
+    // renderItem clone path above.
+    const csrMirror = clientJs.slice(clientJs.indexOf('hydrate('))
+    expect(csrMirror).toContain('escapeAttr(')
+    expect(csrMirror).toContain('escapeText(')
+  })
+
+  test('falls back to per-row emission for an inline conditional/ternary body', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function List() {
+        const [items, setItems] = createSignal<string[]>([])
+        return (
+          <ul onClick={() => setItems(prev => [...prev, 'x'])}>
+            {items().map(item => (
+              <li key={item}>
+                {item.length > 3 ? <b>{item}</b> : <i>{item}</i>}
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const { clientJs } = compile(source, 'List.tsx')
+    expect(clientJs).toContain('mapArray(')
+    // No hoisted-template declaration — the fast path refused.
+    expect(clientJs).not.toMatch(/__tpl_\w+ = document\.createElement\('template'\)/)
+  })
+
+  test('falls back to per-row emission for a spread attribute in the loop body', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Item { id: string; extra: Record<string, string> }
+
+      export function List() {
+        const [items, setItems] = createSignal<Item[]>([])
+        return (
+          <ul onClick={() => setItems([])}>
+            {items().map(item => (
+              <li key={item.id} {...item.extra}>{item.id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const { clientJs } = compile(source, 'SpreadList.tsx')
+    expect(clientJs).toContain('mapArray(')
+    expect(clientJs).not.toMatch(/__tpl_\w+ = document\.createElement\('template'\)/)
+  })
+
+  test('SVG loop body either hoists with the correct <svg> wrap, or falls back — never mis-namespaced', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Point { id: string; x: number; y: number }
+
+      export function Dots() {
+        const [points, setPoints] = createSignal<Point[]>([])
+        return (
+          <svg onClick={() => setPoints([])}>
+            {points().map(p => (
+              <circle key={p.id} cx={p.x} cy={p.y} r="4" />
+            ))}
+          </svg>
+        )
+      }
+    `
+    const { clientJs } = compile(source, 'Dots.tsx')
+    expect(clientJs).toContain('mapArray(')
+    // A `<circle>` root with only dynamic attrs (all covered by reactive-attr
+    // createEffects) and a literal `r="4"` is exactly the shape the fast path
+    // proves safe — this DOES hoist, and it must wrap in a synthetic `<svg>`
+    // (mirroring `templateRootIsSvg`, #135/#1088) so the cloned node keeps the
+    // SVG namespace instead of becoming an inert `HTMLUnknownElement`.
+    const hoisted = /__tpl_\w+\.innerHTML = `<svg>(.*?)<\/svg>`/.exec(clientJs)
+    expect(hoisted).not.toBeNull()
+    expect(hoisted![1]).not.toContain('${')
+    expect(hoisted![1]).toContain('<circle')
+    expect(clientJs).toMatch(/\.content\.firstElementChild\.firstElementChild\.cloneNode\(true\)/)
+  })
+
+  test('fast path refuses (conservative fallback) whenever it cannot prove the wrap safe', () => {
+    // Defensive net: whatever shape a future fixture exercises, the compiler
+    // must never emit an un-wrapped hoisted template for an SVG root (that
+    // would silently mis-namespace the clone) — either it hoists WITH the
+    // `<svg>` wrap, or it doesn't hoist at all.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Seg { id: string; d: string }
+      export function Paths() {
+        const [segs, setSegs] = createSignal<Seg[]>([])
+        return (
+          <svg onClick={() => setSegs([])}>
+            {segs().map(s => (
+              <path key={s.id} d={s.d} />
+            ))}
+          </svg>
+        )
+      }
+    `
+    const { clientJs } = compile(source, 'Paths.tsx')
+    const unwrappedHoist = /__tpl_\w+\.innerHTML = `<path/.test(clientJs)
+    expect(unwrappedHoist).toBe(false)
+  })
+})

package/src/__tests__/props-destructuring.test.ts

@@ -278,3 +278,113 @@ describe('Props Destructuring Warning (BF043)', () => {
     expect(propsWarnings).toHaveLength(0)
   })
 })
+
+describe('Destructured props keep their declared types (BF043 fixture #2150)', () => {
+  const typeOf = (ctx: ReturnType<typeof analyzeComponent>, name: string) =>
+    ctx.propsParams.find((p) => p.name === name)?.type
+
+  test('resolves scalar member types from a type-alias annotation', () => {
+    const source = `
+      type Props = {
+        value: number
+        label: string
+      }
+
+      export function Component({ value, label }: Props) {
+        return <div>{label}: {value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'primitive', primitive: 'number', raw: 'number' })
+    expect(typeOf(ctx, 'label')).toEqual({ kind: 'primitive', primitive: 'string', raw: 'string' })
+  })
+
+  test('resolves member types from an inline type literal', () => {
+    const source = `
+      export function Component({ value }: { value: number }) {
+        return <div>{value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'primitive', primitive: 'number', raw: 'number' })
+  })
+
+  test('resolves member types from an interface annotation', () => {
+    const source = `
+      interface Props {
+        value: number
+      }
+
+      export function Component({ value }: Props) {
+        return <div>{value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'primitive', primitive: 'number', raw: 'number' })
+  })
+
+  test('keys the lookup on the source property name for aliased bindings', () => {
+    const source = `
+      type Props = { value: number }
+
+      export function Component({ value: v }: Props) {
+        return <div>{v}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    // The local binding is 'v', but its type comes from the 'value' member.
+    expect(typeOf(ctx, 'v')).toEqual({ kind: 'primitive', primitive: 'number', raw: 'number' })
+  })
+
+  test('falls back to unknown when the param has no type annotation', () => {
+    const source = `
+      export function Component({ value }) {
+        return <div>{value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'unknown', raw: 'unknown' })
+  })
+
+  // Deliberate scope: only required primitives are resolved. Optional and
+  // non-primitive members stay `unknown` so typed adapters keep their existing
+  // interface{}-based lowering (attribute omission, bf_flat/spread/bf_json).
+  test('leaves OPTIONAL members as unknown (preserves nillable omission)', () => {
+    const source = `
+      type Props = { value?: number }
+
+      export function Component({ value }: Props) {
+        return <div>{value}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'value')).toEqual({ kind: 'unknown', raw: 'unknown' })
+  })
+
+  test('leaves NON-primitive members (arrays/objects) as unknown', () => {
+    const source = `
+      type Props = { rows: number[][]; meta: { id: string } }
+
+      export function Component({ rows, meta }: Props) {
+        return <div>{rows.length}{meta.id}</div>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Component.tsx')
+
+    expect(typeOf(ctx, 'rows')).toEqual({ kind: 'unknown', raw: 'unknown' })
+    expect(typeOf(ctx, 'meta')).toEqual({ kind: 'unknown', raw: 'unknown' })
+  })
+})