@pyreon/compiler 0.22.0 → 0.24.0

package/src/tests/component-child-no-wrap.test.ts

@@ -0,0 +1,204 @@
+/**
+ * Compiler hardening — JSX child of COMPONENT parent is NOT wrapped in an
+ * accessor when the expression is a stable reference (Identifier or simple
+ * MemberExpression chain).
+ *
+ * Reported root cause behind the kinetic Stagger + bokisch.com Intro repro
+ * (PR #731 shipped the library-side workaround; this is the upstream fix).
+ *
+ * Pre-fix the compiler rewrote `<Comp>{children}</Comp>` (where `children`
+ * is a local `const` derived from a getter — `const children = childHolder.children`
+ * after `splitProps`) as `Comp({ ..., children: () => h.children })`. Receiving
+ * components saw `props.children` as a FUNCTION instead of the expected
+ * `VNode | VNode[]`. DOM-consuming code routes through `mountChild` which
+ * handles function children correctly (via `mountReactive`), so the wrap is
+ * invisible there. Libraries that iterate children at the VNode level
+ * (kinetic's StaggerRenderer/TransitionItem) or `cloneVNode` them directly
+ * were silently broken — the function spread produced `{type: undefined}`
+ * and the DOM rendered literal `<undefined>` tags.
+ *
+ * Fix shape: for JSX children of COMPONENT parents (uppercase tag), skip
+ * the accessor wrap when the expression is a stable reference. The
+ * compiler's prop-inlining pass still runs (so `children` is replaced with
+ * `h.children` at the JSX use site) but the resulting expression is
+ * emitted bare. Dynamic shapes (CallExpression, BinaryExpression, etc.)
+ * keep the wrap so `<Comp>{count()}</Comp>` and similar patterns stay
+ * reactive end-to-end.
+ *
+ * Note: `transformJSX_JS` returns Pyreon-transformed SOURCE — JSX stays as
+ * JSX (the final JSX→jsx() lowering is esbuild's job). So the inlined
+ * expression shows up between `{...}` in the emitted text.
+ *
+ * Bisect: revert the `isComponentTag(...) && isStableReference(expr)`
+ * carve-out in `handleJsxExpression` (jsx.ts) → the CONTRACT specs fail
+ * (emit reverts to `{() => h.children}`); the wrap-still-fires CONTROL
+ * specs stay green (proving the carve-out doesn't touch the call/binary
+ * paths).
+ */
+import { describe, expect, test } from 'vitest'
+import { transformJSX_JS } from '../jsx'
+
+const t = (src: string): string => transformJSX_JS(src, 'test.tsx').code
+
+describe('JSX transform — component child of stable reference', () => {
+  test('CONTRACT — bare Identifier (splitProps-derived const) is emitted without accessor wrap', () => {
+    // The bokisch.com Intro shape, distilled. `splitProps` registers
+    // `childHolder` as a prop-derived binding; `const children = childHolder.children`
+    // makes `children` prop-derived; the JSX child `{children}` would,
+    // pre-fix, emit `{() => childHolder.children}`. Now emits the inlined
+    // value bare.
+    const src = `
+      const Comp = (props) => {
+        const [childHolder, restHtml] = splitProps(props, ['children'])
+        const children = childHolder.children
+        return <Inner>{children}</Inner>
+      }
+    `
+    const out = t(src)
+    expect(out, 'children must NOT be wrapped in an accessor').not.toContain('() =>')
+    expect(out, 'inlined value must appear bare in JSX child position').toMatch(
+      /<Inner>\s*\{\(?childHolder\.children\)?\}\s*<\/Inner>/,
+    )
+  })
+
+  test('CONTRACT — simple MemberExpression chain is emitted without accessor wrap', () => {
+    const src = `
+      const Comp = (props) => {
+        const [obj] = splitProps(props, ['deep'])
+        return <Inner>{obj.deep.x}</Inner>
+      }
+    `
+    const out = t(src)
+    expect(out, 'member chain must NOT be wrapped in an accessor').not.toContain(
+      '() => obj.deep.x',
+    )
+    expect(out, 'member chain must appear bare').toMatch(
+      /<Inner>\s*\{obj\.deep\.x\}\s*<\/Inner>/,
+    )
+  })
+
+  test('CONTROL — CallExpression child KEEPS the wrap (preserves reactivity)', () => {
+    // `<Comp>{count()}</Comp>` — the user explicitly reads a signal in the
+    // child position. The wrap converts to `() => count()` so the
+    // receiving component can subscribe via mountChild → mountReactive.
+    const src = `
+      const count = signal(0)
+      const Comp = () => <Inner>{count()}</Inner>
+    `
+    const out = t(src)
+    expect(out, 'call-expression child must keep the wrap').toContain('() => count()')
+  })
+
+  test('CONTROL — BinaryExpression child KEEPS the wrap', () => {
+    const src = `
+      const Comp = (props) => {
+        const [own] = splitProps(props, ['a', 'b'])
+        return <Inner>{own.a + own.b}</Inner>
+      }
+    `
+    const out = t(src)
+    expect(out, 'binary-expression child must keep the wrap').toMatch(/\(\)\s*=>/)
+    expect(out).toContain('own.a')
+    expect(out).toContain('own.b')
+  })
+
+  test('CONTROL — DOM-element parent with bare Identifier KEEPS the binding (reactive)', () => {
+    // The carve-out only fires for COMPONENT parents (uppercase tag).
+    // DOM-element children must still go through the reactive binding
+    // path so mountChild/mountReactive can re-evaluate inside an effect.
+    const src = `
+      const Comp = (props) => {
+        const [own] = splitProps(props, ['children'])
+        const children = own.children
+        return <div>{children}</div>
+      }
+    `
+    const out = t(src)
+    // The template path emits this as a reactive binding (_bindText /
+    // _bindDirect / etc.), not a bare text-node. Either way, the
+    // expression must still route through a reactive primitive.
+    expect(out, 'DOM-element child must route through a reactive path').not.toContain(
+      '<div>{own.children}</div>',
+    )
+  })
+
+  test('CONTRACT — TS-cast wrapper (`as VNode[]`) is transparent', () => {
+    // The EXACT shape `createKineticComponent.tsx` ships:
+    //   `<StaggerRenderer>{children as VNode[]}</StaggerRenderer>`
+    // The TS `as` cast wraps `children` as a `TSAsExpression`. Without
+    // unwrapping, the carve-out misses the bokisch reproducer entirely.
+    // The cast is preserved in the emit — esbuild's later TS-strip pass
+    // removes it. Reproducer: pre-fix this test fails with
+    // `expected to NOT contain '() =>'` because the wrap still fires.
+    const src = `
+      const Kinetic = (props) => {
+        const [childHolder] = splitProps(props, ['children'])
+        const children = childHolder.children
+        return <Inner>{children as VNode[]}</Inner>
+      }
+    `
+    const out = t(src)
+    expect(out, 'TS-cast wrapper must not block the carve-out').not.toContain('() =>')
+    // Slice unwraps the TS cast — output is just the inlined value.
+    expect(out).toMatch(/<Inner>\s*\{\(?childHolder\.children\)?\}\s*<\/Inner>/)
+  })
+
+  test('CONTRACT — non-null `!` postfix is transparent', () => {
+    const src = `
+      const Comp = (props) => {
+        const [own] = splitProps(props, ['children'])
+        return <Inner>{own.children!}</Inner>
+      }
+    `
+    const out = t(src)
+    expect(out).not.toContain('() =>')
+    expect(out).toMatch(/<Inner>\s*\{own\.children\}\s*<\/Inner>/)
+  })
+
+  test('CONTRACT — kinetic Stagger reproducer compiles to bare children prop', () => {
+    // Exact shape from `packages/ui-system/kinetic/src/kinetic/createKineticComponent.tsx`.
+    // Pre-fix emit (JSX child position): `{() => childHolder.children}`.
+    // Post-fix emit: `{childHolder.children}` (no wrap).
+    const src = `
+      const Kinetic = (props) => {
+        const [childHolder, restHtml] = splitProps(props, ['children'])
+        const children = childHolder.children
+        return <StaggerRenderer htmlProps={restHtml}>{children}</StaggerRenderer>
+      }
+    `
+    const out = t(src)
+    expect(out).not.toContain('() => childHolder.children')
+    expect(out).not.toContain('() => children')
+    expect(out).toMatch(
+      /<StaggerRenderer[^>]*>\s*\{\(?childHolder\.children\)?\}\s*<\/StaggerRenderer>/,
+    )
+  })
+
+  test('CONTROL — bare SIGNAL identifier KEEPS the wrap (auto-call + wrap is reactive)', () => {
+    // `<Comp>{count}</Comp>` where count is a tracked signal — the user's
+    // deliberate "make this reactive at the call site" pattern. The
+    // compiler auto-calls (`count` → `count()`) AND wraps (`() => count()`)
+    // so the receiving component re-evaluates in its mountReactive scope.
+    // The stable-reference carve-out explicitly excludes signal references.
+    const src = `
+      function C() {
+        const count = signal(0)
+        return <MyComp>{count}</MyComp>
+      }
+    `
+    const out = t(src)
+    expect(out, 'signal child must be wrapped + auto-called').toContain('() => count()')
+  })
+
+  test('CONTROL — already-arrow-wrapped child is unchanged (idempotent)', () => {
+    // Users who explicitly want reactivity write `<Comp>{() => x()}</Comp>`.
+    // The compiler's shouldWrap returns false for ArrowFunctionExpression,
+    // so the carve-out never fires. The user's accessor passes through.
+    const src = `
+      const x = signal('a')
+      const Comp = () => <Inner>{() => x()}</Inner>
+    `
+    const out = t(src)
+    expect(out, 'user-written accessor must pass through').toContain('() => x()')
+  })
+})

package/src/tests/dynamic-collapse-detector.test.ts

@@ -0,0 +1,164 @@
+/**
+ * PR 2 of the dynamic-prop partial-collapse build (`.claude/plans/open-work-2026-q3.md`
+ * → #1 dynamic-prop bucket = 15.3% of all real-corpus sites; the
+ * next-bigger bite after the just-shipped `on*`-handler partial-collapse
+ * via `detectPartialCollapsibleShape` + `_rsCollapseH` + emit).
+ *
+ * Mirrors `detectPartialCollapsibleShape`'s "extend the bail catalogue
+ * with ONE relaxation" pattern (see that detector's docstring + tests).
+ * The single relaxation: a `JSXExpressionContainer` whose expression is
+ * a `ConditionalExpression` with BOTH branches being `StringLiteral` is
+ * acceptable as a "ternary-of-two-literals" dynamic prop. Captured as a
+ * `DynamicCollapsibleProp` with cond source span + the two literal
+ * values, so PR 3's resolver can pre-render BOTH values via the
+ * existing SSR pipeline and PR 3's emit can dispatch via the cond.
+ *
+ * Contract under test:
+ *
+ *   - literal-prop + ONE ternary-of-two-literals + optional `on*` handlers
+ *     + static-text children → { props, dynamicProp, handlers, childrenText }
+ *   - ZERO ternaries (literal-only) → null (defers to full / on*-only paths)
+ *   - 2+ ternaries → null (multi-axis combinatorics is separable scope)
+ *   - ternary with ANY non-literal branch (template literal, identifier,
+ *     non-string literal, computed expr) → null
+ *   - spread / boolean attr / element child / expression child → null
+ *   - cond span (`condStart`/`condEnd`) slices the EXACT source of the
+ *     ternary's test expression (load-bearing for PR 3's emit, which
+ *     re-emits `code.slice(condStart, condEnd)` into `_rsCollapseDyn`)
+ *
+ * Bisect-verify (documented in the PR body): replace the body of
+ * `detectDynamicCollapsibleShape` with `return null` → the POSITIVE
+ * specs fail with `expected null to be …`; the NEGATIVE specs still
+ * pass. Restore → all pass. That asymmetry proves the positive
+ * assertions are load-bearing on the ternary-relaxation logic.
+ */
+import { describe, expect, it } from 'vitest'
+import { parseSync } from 'oxc-parser'
+import { detectDynamicCollapsibleShape } from '../jsx'
+
+function firstJsxElement(code: string): any {
+  const { program } = parseSync('input.tsx', code, { sourceType: 'module', lang: 'tsx' })
+  let found: any = null
+  const visit = (node: any): void => {
+    if (found || !node || typeof node !== 'object') return
+    if (node.type === 'JSXElement') {
+      found = node
+      return
+    }
+    for (const k in node) {
+      const v = node[k]
+      if (Array.isArray(v)) for (const c of v) visit(c)
+      else if (v && typeof v === 'object' && typeof v.type === 'string') visit(v)
+    }
+  }
+  visit(program)
+  return found
+}
+
+const detect = (code: string) => detectDynamicCollapsibleShape(firstJsxElement(code), 'Button')
+
+describe('detectDynamicCollapsibleShape — PR 2 (ternary-of-two-literals dynamic-prop subset)', () => {
+  // ── POSITIVE: the dynamic-collapsible subset ────────────────────────────
+  it('claims a literal-prop site with ONE ternary-of-two-literals', () => {
+    const code = 'const x = <Button state={cond ? "primary" : "secondary"} size="medium">Save</Button>'
+    const r = detect(code)
+    expect(r).not.toBeNull()
+    expect(r!.props).toEqual({ size: 'medium' })
+    expect(r!.childrenText).toBe('Save')
+    expect(r!.handlers).toEqual([])
+    expect(r!.dynamicProp.name).toBe('state')
+    expect(r!.dynamicProp.valueTruthy).toBe('primary')
+    expect(r!.dynamicProp.valueFalsy).toBe('secondary')
+    expect(code.slice(r!.dynamicProp.condStart, r!.dynamicProp.condEnd)).toBe('cond')
+  })
+
+  it('captures the EXACT cond span for a complex condition', () => {
+    // The condStart/condEnd MUST slice the original source of the test
+    // expression so PR 3's emit can re-thread it into the dispatcher
+    // verbatim (paren-wrapped to keep it a single expr like the
+    // on*-handler emit does for arrow bodies).
+    const code = 'const x = <Btn state={user.role === "admin" ? "primary" : "danger"}>Go</Btn>'
+    const r = detect(code)
+    expect(r).not.toBeNull()
+    expect(code.slice(r!.dynamicProp.condStart, r!.dynamicProp.condEnd)).toBe(
+      'user.role === "admin"',
+    )
+  })
+
+  it('composes with on*-handler relaxation — one ternary + one handler', () => {
+    // Real-corpus shape: a Button with state={cond ? ... : ...} almost
+    // always also has an onClick. PR 3's emit will route to a combined
+    // helper when handlers are non-empty; this PR (detector) just
+    // carries both for the dispatcher's sake.
+    const code =
+      'const x = <Button state={cond ? "primary" : "secondary"} onClick={go}>Save</Button>'
+    const r = detect(code)
+    expect(r).not.toBeNull()
+    expect(r!.dynamicProp.name).toBe('state')
+    expect(r!.handlers.map((h) => h.name)).toEqual(['onClick'])
+  })
+
+  it('handles ternary on a non-state dim prop (size, variant, …)', () => {
+    const code = 'const x = <Button size={isLarge ? "large" : "medium"}>S</Button>'
+    const r = detect(code)
+    expect(r).not.toBeNull()
+    expect(r!.dynamicProp.name).toBe('size')
+    expect(r!.dynamicProp.valueTruthy).toBe('large')
+    expect(r!.dynamicProp.valueFalsy).toBe('medium')
+  })
+
+  it('trims static-text children (parity with the rest of the family)', () => {
+    const code =
+      'const x = <Button state={c ? "a" : "b"}>\n  Save\n</Button>'
+    const r = detect(code)
+    expect(r).not.toBeNull()
+    expect(r!.childrenText).toBe('Save')
+  })
+
+  // ── NEGATIVE: every uncertain shape bails (null) ────────────────────────
+  it('returns null for ZERO ternaries (defers to full / on*-only paths)', () => {
+    // Load-bearing separation: a fully-literal site is the FULL-collapse
+    // shape; on*-handler-only is the partial-collapse shape. The
+    // dynamic-prop detector must NOT claim either, so the three
+    // detectors never both/all-three fire on one site.
+    expect(detect('const x = <Button state="primary">Save</Button>')).toBeNull()
+    expect(detect('const x = <Button state="primary" onClick={h}>Save</Button>')).toBeNull()
+  })
+
+  it('returns null for 2+ ternaries (multi-axis combinatorics is separable scope)', () => {
+    const code =
+      'const x = <Button state={a ? "x" : "y"} size={b ? "small" : "large"}>S</Button>'
+    expect(detect(code)).toBeNull()
+  })
+
+  it('returns null for a ternary with a NON-string-literal branch', () => {
+    // TemplateLiteral, Identifier, numeric/boolean literal — none of
+    // these are statically resolvable to a known dimension value.
+    expect(detect('const x = <Button state={c ? `pri` : "sec"}>S</Button>')).toBeNull()
+    expect(detect('const x = <Button state={c ? maybePrimary : "sec"}>S</Button>')).toBeNull()
+    expect(detect('const x = <Button state={c ? "pri" : 1}>S</Button>')).toBeNull()
+  })
+
+  it('returns null for a non-ternary dynamic prop alongside literals', () => {
+    // Signal-call / function-call / arbitrary expression — not statically
+    // enumerable, no resolution possible.
+    expect(detect('const x = <Button state={getMy()} size="medium">S</Button>')).toBeNull()
+    expect(detect('const x = <Button state={sig()} size="medium">S</Button>')).toBeNull()
+  })
+
+  it('returns null for a spread attribute', () => {
+    expect(detect('const x = <Button {...rest} state={c ? "a" : "b"}>X</Button>')).toBeNull()
+  })
+
+  it('returns null for a boolean attribute', () => {
+    expect(detect('const x = <Button disabled state={c ? "a" : "b"}>X</Button>')).toBeNull()
+  })
+
+  it('returns null for an element child', () => {
+    expect(detect('const x = <Button state={c ? "a" : "b"}><span /></Button>')).toBeNull()
+  })
+
+  it('returns null for an expression child', () => {
+    expect(detect('const x = <Button state={c ? "a" : "b"}>{label}</Button>')).toBeNull()
+  })
+})

package/src/tests/dynamic-collapse-emit.test.ts

@@ -0,0 +1,192 @@
+/**
+ * PR 3 of the dynamic-prop partial-collapse build — the compiler EMIT
+ * half: `tryRocketstyleCollapse` falls through to `tryDynamicCollapse`
+ * when BOTH the full and the `on*`-handler-partial paths bail. Emits
+ * `__rsCollapseDyn(html, [stride-2 classes], () => cond ? 0 : 1, () =>
+ * __pyrMode() === "dark")` consumed by PR 1's runtime helper `_rsCollapseDyn`
+ * (#765).
+ *
+ * Mirrors the existing `partial-collapse-emit.test.ts` harness exactly
+ * (stubbed resolved-`sites` map — the resolver/plugin scan is PR 4's
+ * gate; this proves the emit contract in isolation).
+ *
+ * Bisect-verify (PR body): revert the fallback chain
+ * (`return tryPartialCollapse(...) || tryDynamicCollapse(...)` →
+ * `return tryPartialCollapse(...)`) → the dynamic-emit specs fail
+ * (`__rsCollapseDyn(` absent) while the FULL + PARTIAL specs still
+ * pass (proving the dynamic fallthrough is the only delta).
+ * Restore → all pass.
+ */
+import { describe, expect, it } from 'vitest'
+import { rocketstyleCollapseKey, transformJSX } from '../jsx'
+
+// Per-value resolved sites — the dynamic emit looks up BOTH literals
+// via separate keys. `templateHtml` MUST be byte-identical across
+// values for the dispatcher to share one `_tpl` (cross-value template
+// parity bail).
+const TPL = '<button>Save</button>'
+
+const PRIMARY = {
+  templateHtml: TPL,
+  lightClass: 'pyr-pri-L',
+  darkClass: 'pyr-pri-D',
+  rules: ['.pyr-pri-L{color:red}', '.pyr-pri-D{color:darkred}'],
+  ruleKey: 'bundle-pri',
+}
+const SECONDARY = {
+  templateHtml: TPL,
+  lightClass: 'pyr-sec-L',
+  darkClass: 'pyr-sec-D',
+  rules: ['.pyr-sec-L{color:blue}', '.pyr-sec-D{color:darkblue}'],
+  ruleKey: 'bundle-sec',
+}
+
+function collapseOpt(
+  candidates: string[],
+  sites: Record<string, { templateHtml: string; lightClass: string; darkClass: string; rules: string[]; ruleKey: string }>,
+) {
+  return {
+    collapseRocketstyle: {
+      candidates: new Set(candidates),
+      sites: new Map(Object.entries(sites)),
+      mode: { name: 'useMode', source: '@pyreon/ui-core' },
+    },
+  }
+}
+
+describe('compiler — dynamic-prop collapse emission (PR 3, ternary-of-two-literals)', () => {
+  it('emits __rsCollapseDyn with stride-2 value-major classes + cond dispatcher', () => {
+    const truthyKey = rocketstyleCollapseKey('Button', { state: 'primary', size: 'medium' }, 'Save')
+    const falsyKey = rocketstyleCollapseKey('Button', { state: 'secondary', size: 'medium' }, 'Save')
+    const src =
+      'const x = <Button state={isPrimary ? "primary" : "secondary"} size="medium">Save</Button>'
+    const { code } = transformJSX(
+      src,
+      'A.tsx',
+      collapseOpt(['Button'], { [truthyKey]: PRIMARY, [falsyKey]: SECONDARY }),
+    )
+
+    // Stride-2 value-major class layout: `[v0_light, v0_dark, v1_light, v1_dark]`.
+    // v0 = consequent (cond → 0), v1 = alternate (cond → 1) — matches
+    // `_rsCollapseDyn` doc + bisect-verified in PR 1 (#765).
+    expect(code).toContain(
+      '__rsCollapseDyn("<button>Save</button>", ' +
+        '["pyr-pri-L","pyr-pri-D","pyr-sec-L","pyr-sec-D"], ' +
+        '() => (isPrimary) ? 0 : 1, ' +
+        '() => __pyrMode() === "dark")',
+    )
+  })
+
+  it('imports the _rsCollapseDyn helper (and NOT the full / H helpers when not used)', () => {
+    const truthyKey = rocketstyleCollapseKey('Button', { state: 'primary' }, 'Go')
+    const falsyKey = rocketstyleCollapseKey('Button', { state: 'secondary' }, 'Go')
+    const src = 'const x = <Button state={c ? "primary" : "secondary"}>Go</Button>'
+    const { code } = transformJSX(
+      src,
+      'B.tsx',
+      collapseOpt(['Button'], { [truthyKey]: PRIMARY, [falsyKey]: SECONDARY }),
+    )
+    // Conditional import — dynamic-only modules pull `_rsCollapseDyn`
+    // ONLY (tree-shake-friendly per-feature granularity).
+    expect(code).toContain('import { _rsCollapseDyn as __rsCollapseDyn } from "@pyreon/runtime-dom";')
+    expect(code).not.toContain('_rsCollapse as __rsCollapse')
+    expect(code).not.toContain('_rsCollapseH as __rsCollapseH')
+  })
+
+  it('unions BOTH values\' rule bundles via injectRules (de-duped by ruleKey)', () => {
+    const truthyKey = rocketstyleCollapseKey('Button', { state: 'primary' }, 'X')
+    const falsyKey = rocketstyleCollapseKey('Button', { state: 'secondary' }, 'X')
+    const src = 'const x = <Button state={c ? "primary" : "secondary"}>X</Button>'
+    const { code } = transformJSX(
+      src,
+      'C.tsx',
+      collapseOpt(['Button'], { [truthyKey]: PRIMARY, [falsyKey]: SECONDARY }),
+    )
+    // Each value's rule bundle injected separately (different ruleKeys
+    // ⇒ no dedupe). Same idempotent injectRules contract as the full
+    // path — styler dedupes by key at runtime.
+    expect(code).toContain('"bundle-pri"')
+    expect(code).toContain('"bundle-sec"')
+    expect(code).toContain('__rsSheet.injectRules(')
+  })
+
+  it('preserves complex cond source verbatim (paren-wrapped for safe re-emission)', () => {
+    const truthyKey = rocketstyleCollapseKey('Btn', { state: 'primary' }, 'Hi')
+    const falsyKey = rocketstyleCollapseKey('Btn', { state: 'danger' }, 'Hi')
+    const src = 'const x = <Btn state={user.role === "admin" ? "primary" : "danger"}>Hi</Btn>'
+    const { code } = transformJSX(
+      src,
+      'D.tsx',
+      collapseOpt(['Btn'], {
+        [truthyKey]: { ...PRIMARY },
+        [falsyKey]: { ...SECONDARY, lightClass: 'pyr-dng-L', darkClass: 'pyr-dng-D' },
+      }),
+    )
+    // The paren-wrap (`(user.role === "admin")`) keeps the cond a single
+    // expression — same shape as the on*-handler emit re-emits arrow bodies.
+    expect(code).toContain('() => (user.role === "admin") ? 0 : 1')
+  })
+
+  // ── Conservative-bail discipline ───────────────────────────────────────
+  it('BAILS when EITHER expanded site is missing from the resolved map', () => {
+    const truthyKey = rocketstyleCollapseKey('Button', { state: 'primary' }, 'S')
+    // Only the truthy half resolved — falsy is absent (resolver returned
+    // null for that variant). Half-resolved ⇒ keep the normal mount.
+    const src = 'const x = <Button state={c ? "primary" : "secondary"}>S</Button>'
+    const { code } = transformJSX(
+      src,
+      'E.tsx',
+      collapseOpt(['Button'], { [truthyKey]: PRIMARY }),
+    )
+    expect(code).not.toContain('__rsCollapseDyn(')
+    // Normal mount preserved — `<Button …>` JSX still appears (or its
+    // standard `h()` form post-transform).
+  })
+
+  it('BAILS when the structural template diverges across values', () => {
+    const truthyKey = rocketstyleCollapseKey('Button', { state: 'primary' }, 'D')
+    const falsyKey = rocketstyleCollapseKey('Button', { state: 'secondary' }, 'D')
+    const src = 'const x = <Button state={c ? "primary" : "secondary"}>D</Button>'
+    const { code } = transformJSX(
+      src,
+      'F.tsx',
+      collapseOpt(['Button'], {
+        [truthyKey]: { ...PRIMARY, templateHtml: '<button>D</button>' },
+        [falsyKey]: { ...SECONDARY, templateHtml: '<button data-extra>D</button>' }, // divergent
+      }),
+    )
+    expect(code).not.toContain('__rsCollapseDyn(')
+  })
+
+  it('BAILS when the dynamic site ALSO has on*-handlers (PR 3 scope: no-handler only)', () => {
+    const truthyKey = rocketstyleCollapseKey('Button', { state: 'primary' }, 'H')
+    const falsyKey = rocketstyleCollapseKey('Button', { state: 'secondary' }, 'H')
+    const src =
+      'const x = <Button state={c ? "primary" : "secondary"} onClick={go}>H</Button>'
+    const { code } = transformJSX(
+      src,
+      'G.tsx',
+      collapseOpt(['Button'], { [truthyKey]: PRIMARY, [falsyKey]: SECONDARY }),
+    )
+    expect(code).not.toContain('__rsCollapseDyn(')
+    expect(code).not.toContain('__rsCollapseH(')
+  })
+
+  // ── Regression: FULL + on*-PARTIAL paths byte-unchanged ────────────────
+  it('FULL-collapse path byte-unchanged: no-handler literal site emits plain __rsCollapse', () => {
+    const key = rocketstyleCollapseKey('Button', { state: 'primary' }, 'Save')
+    const src = 'const x = <Button state="primary">Save</Button>'
+    const { code } = transformJSX(src, 'H.tsx', collapseOpt(['Button'], { [key]: PRIMARY }))
+    expect(code).toContain('__rsCollapse(')
+    expect(code).not.toContain('__rsCollapseH(')
+    expect(code).not.toContain('__rsCollapseDyn(')
+  })
+
+  it('PARTIAL on*-handler path byte-unchanged: literal site + handler emits __rsCollapseH', () => {
+    const key = rocketstyleCollapseKey('Button', { state: 'primary' }, 'Save')
+    const src = 'const x = <Button state="primary" onClick={go}>Save</Button>'
+    const { code } = transformJSX(src, 'I.tsx', collapseOpt(['Button'], { [key]: PRIMARY }))
+    expect(code).toContain('__rsCollapseH(')
+    expect(code).not.toContain('__rsCollapseDyn(')
+  })
+})

package/src/tests/dynamic-collapse-scan.test.ts

@@ -0,0 +1,111 @@
+/**
+ * PR 3 of the dynamic-prop partial-collapse build — `scanCollapsibleSites`
+ * extension. The plugin-side scan (`@pyreon/vite-plugin`) calls this to
+ * learn WHICH (component, props, text) tuples need resolution. For
+ * dynamic-prop sites it must expand into TWO `CollapsibleSite` entries
+ * (one per literal value) so the resolver pre-renders both via the
+ * existing SSR pipeline AND the compiler emit (PR 3 `tryDynamicCollapse`)
+ * looks up both via identical key construction.
+ *
+ * Key invariant: the keys this scan emits must EQUAL the keys
+ * `tryDynamicCollapse` computes from the same JSX — same load-bearing
+ * separation as the existing full / on*-handler scan↔emit invariants
+ * (`scanCollapsibleSites` ↔ `detectCollapsibleShape`).
+ */
+import { describe, expect, it } from 'vitest'
+import { rocketstyleCollapseKey, scanCollapsibleSites } from '../jsx'
+
+const COLLAPSIBLE = new Set(['@pyreon/ui-components'])
+
+describe('scanCollapsibleSites — dynamic-prop expansion (PR 3)', () => {
+  it('expands a single ternary site into TWO CollapsibleSite entries (one per literal)', () => {
+    const src = `
+      import { Button } from '@pyreon/ui-components'
+      const x = <Button state={cond ? "primary" : "secondary"} size="medium">Save</Button>
+    `
+    const sites = scanCollapsibleSites(src, 'A.tsx', COLLAPSIBLE)
+    expect(sites).toHaveLength(2)
+    const byState = new Map(sites.map((s) => [s.props.state, s]))
+    expect(byState.get('primary')!.props).toEqual({ state: 'primary', size: 'medium' })
+    expect(byState.get('secondary')!.props).toEqual({ state: 'secondary', size: 'medium' })
+    expect(byState.get('primary')!.childrenText).toBe('Save')
+    expect(byState.get('secondary')!.childrenText).toBe('Save')
+    // Both entries share the same component / source / importedName —
+    // only `props.state` differs.
+    expect(byState.get('primary')!.componentName).toBe('Button')
+    expect(byState.get('secondary')!.componentName).toBe('Button')
+  })
+
+  it('emits keys IDENTICAL to what tryDynamicCollapse will look up', () => {
+    // The cross-detector invariant: the scan and the emit MUST agree
+    // on the key for each expanded value. Drift would cause the emit
+    // to miss its own pre-resolved sites and bail to normal mount.
+    const src = `
+      import { Button } from '@pyreon/ui-components'
+      const x = <Button state={c ? "primary" : "secondary"}>Go</Button>
+    `
+    const sites = scanCollapsibleSites(src, 'B.tsx', COLLAPSIBLE)
+    expect(sites).toHaveLength(2)
+    const truthyKey = rocketstyleCollapseKey('Button', { state: 'primary' }, 'Go')
+    const falsyKey = rocketstyleCollapseKey('Button', { state: 'secondary' }, 'Go')
+    const keys = sites.map((s) => s.key).sort()
+    expect(keys).toEqual([truthyKey, falsyKey].sort())
+  })
+
+  it('EXPANDS handler-combined dynamic sites too (handler-combined emit unlocks the 15.4% bucket)', () => {
+    // The follow-up emit (`__rsCollapseDynH` from `tryDynamicCollapse`)
+    // handles ternary-plus-handler sites via the combined runtime
+    // helper. The scan emits both literal-value expansions identically
+    // — handlers don't affect the resolver's input (componentName,
+    // props, childrenText). Handlers are re-attached by the runtime
+    // helper, not by the resolver.
+    //
+    // Previously the scan SKIPPED handler-combined sites (matching
+    // the PR 3 emit's no-handler scope); the follow-up lifts that
+    // restriction so the resolver pre-renders both values for
+    // handler-bearing sites too.
+    const src = `
+      import { Button } from '@pyreon/ui-components'
+      const x = <Button state={c ? "primary" : "secondary"} onClick={go}>H</Button>
+    `
+    const sites = scanCollapsibleSites(src, 'C.tsx', COLLAPSIBLE)
+    expect(sites).toHaveLength(2)
+    const byState = new Map(sites.map((s) => [s.props.state, s]))
+    expect(byState.get('primary')!.childrenText).toBe('H')
+    expect(byState.get('secondary')!.childrenText).toBe('H')
+  })
+
+  it('does not double-emit when the FULL detector already claims the site (literal-only)', () => {
+    // A fully-literal site is the FULL-collapse shape — claimed by
+    // detectCollapsibleShape; the dynamic-fallthrough branch in the
+    // scan only runs when the full detector returned null.
+    const src = `
+      import { Button } from '@pyreon/ui-components'
+      const x = <Button state="primary" size="medium">Save</Button>
+    `
+    const sites = scanCollapsibleSites(src, 'D.tsx', COLLAPSIBLE)
+    expect(sites).toHaveLength(1)
+    expect(sites[0]!.props).toEqual({ state: 'primary', size: 'medium' })
+  })
+
+  it('emits 4 entries for a module with 2 ternary sites (no dedupe across distinct sites)', () => {
+    const src = `
+      import { Button } from '@pyreon/ui-components'
+      const a = <Button state={c1 ? "primary" : "secondary"}>A</Button>
+      const b = <Button state={c2 ? "danger" : "success"}>B</Button>
+    `
+    const sites = scanCollapsibleSites(src, 'E.tsx', COLLAPSIBLE)
+    expect(sites).toHaveLength(4)
+    const states = sites.map((s) => `${s.props.state}/${s.childrenText}`).sort()
+    expect(states).toEqual(['danger/B', 'primary/A', 'secondary/A', 'success/B'])
+  })
+
+  it('skips multi-ternary site entirely (separable scope, not this PR)', () => {
+    const src = `
+      import { Button } from '@pyreon/ui-components'
+      const x = <Button state={a ? "x" : "y"} size={b ? "small" : "large"}>S</Button>
+    `
+    const sites = scanCollapsibleSites(src, 'F.tsx', COLLAPSIBLE)
+    expect(sites).toHaveLength(0)
+  })
+})