@pyreon/compiler 0.13.0 → 0.14.0

package/src/tests/jsx.test.ts

@@ -1720,3 +1720,937 @@ describe('JSX transform — SSR mode', () => {
     expect(out).toContain('_tpl(')
   })
 })
+
+// ─── Signal auto-call in JSX ────────────────────────────────────────────────
+
+describe('JSX transform — signal auto-call', () => {
+  test('bare signal in text child is auto-called', () => {
+    const result = t('function C() { const name = signal("Vít"); return <div>{name}</div> }')
+    expect(result).toContain('name()')
+    expect(result).toContain('_bind')
+  })
+
+  test('signal in attribute expression is auto-called', () => {
+    const result = t('function C() { const show = signal(false); return <div class={show ? "active" : ""}></div> }')
+    expect(result).toContain('show()')
+    expect(result).toContain('_bind')
+  })
+
+  test('signal already called is NOT double-called', () => {
+    const result = t('function C() { const count = signal(0); return <div>{count()}</div> }')
+    expect(result).not.toContain('count()()')
+    expect(result).toContain('count')
+  })
+
+  test('signal in ternary is auto-called', () => {
+    const result = t('function C() { const show = signal(false); return <div>{show ? "yes" : "no"}</div> }')
+    expect(result).toContain('show()')
+    expect(result).toContain('? "yes" : "no"')
+  })
+
+  test('signal in template literal is auto-called', () => {
+    const result = t('function C() { const name = signal("world"); return <div>{`hello ${name}`}</div> }')
+    expect(result).toContain('name()')
+  })
+
+  test('signal in component prop is auto-called with _rp', () => {
+    const result = t('function C() { const val = signal(42); return <MyComp value={val} /> }')
+    expect(result).toContain('_rp(() => val())')
+  })
+
+  test('multiple signals in one expression are all auto-called', () => {
+    const result = t('function C() { const a = signal(1); const b = signal(2); return <div>{a + b}</div> }')
+    expect(result).toContain('a()')
+    expect(result).toContain('b()')
+  })
+
+  test('signal in conditional attribute is auto-called', () => {
+    const result = t('function C() { const active = signal(false); return <div title={active ? "on" : "off"}></div> }')
+    expect(result).toContain('active()')
+  })
+
+  test('non-signal const is NOT auto-called', () => {
+    const result = t('function C() { const x = 42; return <div>{x}</div> }')
+    expect(result).not.toContain('x()')
+  })
+
+  test('computed() IS auto-called (same callable pattern as signal)', () => {
+    const result = t('function C() { const doubled = computed(() => 2); return <div>{doubled}</div> }')
+    expect(result).toContain('doubled()')
+    expect(result).toContain('_bind')
+  })
+
+  test('computed already called is NOT double-called', () => {
+    const result = t('function C() { const doubled = computed(() => 2); return <div>{doubled()}</div> }')
+    expect(result).not.toContain('doubled()()')
+  })
+
+  test('signal + computed in same expression both auto-called', () => {
+    const result = t('function C() { const count = signal(0); const doubled = computed(() => count() * 2); return <div>{count} + {doubled}</div> }')
+    expect(result).toContain('.data = count()')
+    expect(result).toContain('.data = doubled()')
+  })
+
+  test('signal in arrow function child is NOT auto-called (already reactive)', () => {
+    const result = t('function C() { const count = signal(0); return <div>{() => count()}</div> }')
+    // The arrow function is already reactive — no auto-call on the inner count
+    expect(result).not.toContain('count()()')
+  })
+
+  test('signal used in non-JSX context is NOT modified', () => {
+    const result = t('function C() { const x = signal(0); console.log(x); return <div>{x}</div> }')
+    // console.log(x) should keep bare x, only JSX usage gets auto-called
+    expect(result).toContain('console.log(x)')
+    // But JSX usage gets auto-called
+    expect(result).toContain('.data = x()')
+  })
+
+  test('signal as event handler value IS auto-called (unwraps to the handler fn)', () => {
+    const result = t('function C() { const handler = signal(() => {}); return <div onClick={handler}></div> }')
+    // onClick={handler} where handler is a signal → handler() unwraps to the function
+    // This is correct — the event listener gets the unwrapped function value
+    expect(result).toContain('handler()')
+  })
+
+  test('module-scope signal IS tracked and auto-called', () => {
+    const result = t('const globalSig = signal(0); function C() { return <div>{globalSig}</div> }')
+    // Module-scope signal declarations are tracked by the single-pass walk
+    expect(result).toContain('globalSig()')
+  })
+
+  test('knownSignals option enables cross-module auto-call', () => {
+    const code = 'import { count } from "./store"; function App() { return <div>{count}</div> }'
+    const result = transformJSX(code, 'test.tsx', { knownSignals: ['count'] }).code
+    expect(result).toContain('count()')
+    expect(result).toContain('_bind')
+  })
+
+  test('knownSignals with alias — local name is used', () => {
+    const code = 'import { count as c } from "./store"; function App() { return <div>{c}</div> }'
+    const result = transformJSX(code, 'test.tsx', { knownSignals: ['c'] }).code
+    expect(result).toContain('c()')
+  })
+
+  test('knownSignals does not double-call already-called signals', () => {
+    const code = 'import { count } from "./store"; function App() { return <div>{count()}</div> }'
+    const result = transformJSX(code, 'test.tsx', { knownSignals: ['count'] }).code
+    expect(result).not.toContain('count()()')
+  })
+
+  test('knownSignals respects scope shadowing', () => {
+    const code = 'import { count } from "./store"; function App() { const count = "shadow"; return <div>{count}</div> }'
+    const result = transformJSX(code, 'test.tsx', { knownSignals: ['count'] }).code
+    expect(result).not.toContain('.data = count()')
+  })
+
+  test('props.x is still inlined alongside signal auto-call', () => {
+    const result = t('function C(props) { const show = signal(false); const label = props.label; return <div class={show ? label : "default"}></div> }')
+    expect(result).toContain('show()')
+    expect(result).toContain('props.label')
+  })
+
+  test('shadowed signal variable by const is NOT auto-called', () => {
+    const result = t(`
+      function App() {
+        const show = signal(false)
+        function Inner() {
+          const show = 'not a signal'
+          return <div>{show}</div>
+        }
+        return <div>{show}</div>
+      }
+    `)
+    // Inner's show is a plain string, NOT a signal — should NOT be auto-called
+    // But App's show IS a signal — should be auto-called
+    expect(result).toContain('show()')  // App's usage
+    expect(result).toContain('textContent = show')  // Inner's usage (static)
+  })
+
+  test('function parameter shadowing signal is NOT auto-called', () => {
+    const result = t(`
+      function App() {
+        const count = signal(0)
+        function Display(count) {
+          return <div>{count}</div>
+        }
+        return <div>{count}</div>
+      }
+    `)
+    // Display's count is a parameter, not the signal
+    expect(result).toContain('textContent = count')  // Display: static
+    expect(result).toContain('.data = count()')       // App: auto-called
+  })
+
+  test('destructured parameter shadowing signal is NOT auto-called', () => {
+    const result = t(`
+      function App() {
+        const name = signal('Vít')
+        function Greet({ name }) {
+          return <div>{name}</div>
+        }
+        return <div>{name}</div>
+      }
+    `)
+    // Greet's name is destructured from props — shadows the signal
+    expect(result).toContain('textContent = name')  // Greet: static
+    expect(result).toContain('.data = name()')       // App: auto-called
+  })
+
+  test('signal in outer scope is auto-called when NOT shadowed', () => {
+    const result = t(`
+      function App() {
+        const name = signal('Vít')
+        function Inner() {
+          return <div>{name}</div>
+        }
+        return <div>{name}</div>
+      }
+    `)
+    // name is NOT shadowed in Inner — auto-called in both
+    const autoCallCount = (result.match(/name\(\)/g) || []).length
+    expect(autoCallCount).toBeGreaterThanOrEqual(2)
+  })
+
+  test('array destructured parameter shadowing signal is NOT auto-called', () => {
+    const result = t(`
+      function App() {
+        const item = signal('x')
+        function Inner([item]) {
+          return <div>{item}</div>
+        }
+        return <div>{item}</div>
+      }
+    `)
+    // Inner's item is array-destructured — shadows the signal
+    expect(result).toContain('textContent = item')  // Inner: static
+    expect(result).toContain('.data = item()')       // App: auto-called
+  })
+
+  test('signal re-declared as signal in inner scope is still auto-called', () => {
+    const result = t(`
+      function App() {
+        const count = signal(0)
+        function Inner() {
+          const count = signal(10)
+          return <div>{count}</div>
+        }
+        return <div>{count}</div>
+      }
+    `)
+    // Both are signal() calls — both should be auto-called
+    const autoCallCount = (result.match(/count\(\)/g) || []).length
+    expect(autoCallCount).toBeGreaterThanOrEqual(2)
+  })
+
+  test('signal shadowing does not leak across sibling functions', () => {
+    const result = t(`
+      function App() {
+        const show = signal(false)
+        function A() {
+          const show = 'text'
+          return <div>{show}</div>
+        }
+        function B() {
+          return <div>{show}</div>
+        }
+        return <div>{show}</div>
+      }
+    `)
+    // A shadows show — static
+    expect(result).toContain('textContent = show')
+    // B does NOT shadow — auto-called
+    // App does NOT shadow — auto-called
+    const autoCallCount = (result.match(/show\(\)/g) || []).length
+    expect(autoCallCount).toBeGreaterThanOrEqual(2)
+  })
+
+  test('signal in deeply nested expression is auto-called', () => {
+    const result = t('function C() { const x = signal(1); return <div>{x + x + x}</div> }')
+    // All three references should be auto-called
+    const autoCallCount = (result.match(/x\(\)/g) || []).length
+    expect(autoCallCount).toBe(3)
+  })
+
+  test('signal in object property value (not key) is auto-called', () => {
+    const result = t('function C() { const x = signal(1); return <MyComp data={{ value: x }} /> }')
+    expect(result).toContain('x()')
+    expect(result).toContain('_rp(')
+  })
+
+  test('signal + prop-derived in same expression both resolved', () => {
+    const result = t('function C(props) { const x = signal(0); const label = props.label; return <div>{x ? label : "none"}</div> }')
+    expect(result).toContain('x()')
+    expect(result).toContain('props.label')
+    expect(result).toContain('_bind')
+  })
+
+  test('signal with no init (const x = signal()) tracked', () => {
+    const result = t('function C() { const x = signal(); return <div>{x}</div> }')
+    expect(result).toContain('x()')
+  })
+
+  test('signal in member expression property position is NOT auto-called', () => {
+    const result = t('function C() { const x = signal(0); return <div>{obj.x}</div> }')
+    // x as a property name is not a signal reference
+    expect(result).not.toContain('obj.x()')
+  })
+
+  test('signal as member expression object IS auto-called', () => {
+    const result = t('function C() { const x = signal({ a: 1 }); return <div>{x.a}</div> }')
+    // x is the object, should be auto-called
+    expect(result).toContain('x().a')
+  })
+
+  test('const declared without init is not tracked as signal', () => {
+    const result = t('function C() { const x = signal(0); function Inner() { let x; return <div>{x}</div> } return <div>{x}</div> }')
+    // Inner's x is let, not tracked. App's x is signal
+    expect(result).toContain('.data = x()')
+  })
+
+  test('signal shadowed by let declaration in inner scope', () => {
+    const result = t(`
+      function C() {
+        const show = signal(false)
+        function Inner() {
+          let show = true
+          return <div>{show}</div>
+        }
+        return <div>{show}</div>
+      }
+    `)
+    // Inner's let show shadows the signal — but let is not tracked by the declarator check
+    // (let is not const so it's not in signalVars, but it's also not tracked as shadow)
+    // Actually findShadowingNames only checks top-level VariableDeclaration declarations
+    // let is VariableDeclaration kind=let — it should shadow
+    expect(result).toContain('.data = show()')  // outer: auto-called
+  })
+
+  test('knownSignals with empty array does not crash', () => {
+    const code = 'function App() { return <div>hello</div> }'
+    const result = transformJSX(code, 'test.tsx', { knownSignals: [] }).code
+    expect(result).toContain('hello')
+  })
+
+  test('knownSignals combined with local signal declarations', () => {
+    const code = 'import { count } from "./store"; function App() { const local = signal(0); return <div>{count}{local}</div> }'
+    const result = transformJSX(code, 'test.tsx', { knownSignals: ['count'] }).code
+    // Both the imported signal (via knownSignals) and the local signal should be auto-called
+    expect(result).toContain('count()')
+    expect(result).toContain('local()')
+  })
+
+  test('knownSignals with default import name', () => {
+    // When a default import resolves to a signal, the local name should be auto-called
+    const code = 'import count from "./store"; function App() { return <div>{count}</div> }'
+    const result = transformJSX(code, 'test.tsx', { knownSignals: ['count'] }).code
+    expect(result).toContain('count()')
+    expect(result).toContain('_bind')
+  })
+})
+
+// ─── Additional branch coverage for >= 90% ─────────────────────────────────
+
+describe('JSX transform — template reactive style _bindDirect path', () => {
+  test('reactive style accessor uses _bindDirect with cssText updater', () => {
+    const result = t('<div style={getStyle()}><span /></div>')
+    expect(result).toContain('_bindDirect(getStyle,')
+    expect(result).toContain('style.cssText')
+  })
+
+  test('reactive style accessor with object check in updater', () => {
+    const result = t('<div style={styleSignal()}><span /></div>')
+    expect(result).toContain('_bindDirect(styleSignal,')
+    // The updater should handle both string and object
+    expect(result).toContain('typeof v === "string"')
+    expect(result).toContain('Object.assign')
+  })
+})
+
+describe('JSX transform — template combined _bind for complex expressions', () => {
+  test('complex attribute expression uses combined _bind', () => {
+    const result = t('<div class={`${a()} ${b()}`}><span /></div>')
+    expect(result).toContain('_bind(() => {')
+    expect(result).toContain('className')
+  })
+
+  test('dynamic spread in template uses _applyProps in reactive _bind', () => {
+    const result = t('<div {...getProps()}><span /></div>')
+    expect(result).toContain('_tpl(')
+    expect(result).toContain('_applyProps')
+    expect(result).toContain('_bind')
+  })
+})
+
+describe('JSX transform — children expression as bareIdentifier "children"', () => {
+  test('bare children identifier uses _mountSlot', () => {
+    const result = t('function C(props) { const children = props.children; return <div>{children}</div> }')
+    expect(result).toContain('_mountSlot')
+  })
+})
+
+describe('JSX transform — template static expression string attr via JSX expression', () => {
+  test('numeric expression attribute baked into HTML', () => {
+    const result = t('<div tabindex={3}><span /></div>')
+    expect(result).toContain('tabindex=\\"3\\"')
+  })
+
+  test('boolean false expression attribute omitted from HTML', () => {
+    const result = t('<div hidden={false}><span /></div>')
+    expect(result).not.toContain('hidden')
+  })
+
+  test('null expression attribute omitted from HTML', () => {
+    const result = t('<div hidden={null}><span /></div>')
+    expect(result).not.toContain('hidden')
+  })
+})
+
+describe('JSX transform — isPureStaticCall edge cases', () => {
+  test('pure call with spread argument IS wrapped (not pure)', () => {
+    const result = t('<div>{Math.max(...nums)}</div>')
+    expect(result).toContain('.data =')
+  })
+
+  test('Array.isArray with static arg is not wrapped', () => {
+    const result = t('<div>{Array.isArray(null)}</div>')
+    expect(result).not.toContain('() =>')
+  })
+
+  test('encodeURIComponent with static string is not wrapped', () => {
+    const result = t('<div>{encodeURIComponent("hello world")}</div>')
+    expect(result).not.toContain('() =>')
+  })
+
+  test('Date.now is not wrapped (no args)', () => {
+    const result = t('<div>{Date.now()}</div>')
+    expect(result).not.toContain('() =>')
+  })
+
+  test('standalone parseInt with static arg is not wrapped', () => {
+    const result = t('<div>{parseInt("42")}</div>')
+    expect(result).not.toContain('() =>')
+  })
+})
+
+describe('JSX transform — isStatic edge cases', () => {
+  test('template literal with no substitutions is static', () => {
+    const result = t('<div>{`plain text`}</div>')
+    expect(result).not.toContain('_bind')
+  })
+
+  test('template literal with substitution is dynamic', () => {
+    const result = t('<div>{`${x()}`}</div>')
+    expect(result).toContain('_bind')
+  })
+})
+
+describe('JSX transform — signal auto-call in template _bind expressions', () => {
+  test('signal in _bind reactive attribute expression', () => {
+    const result = t('function C() { const cls = signal("a"); return <div class={`${cls} extra`}><span /></div> }')
+    expect(result).toContain('cls()')
+    expect(result).toContain('_bind')
+  })
+
+  test('signal in template text child expression', () => {
+    const result = t('function C() { const name = signal("X"); return <div>{`Hello ${name}`}</div> }')
+    expect(result).toContain('name()')
+  })
+
+  test('signal auto-call with addition', () => {
+    const result = t('function C() { const a = signal(1); const b = signal(2); return <div>{a + b}</div> }')
+    expect(result).toContain('a()')
+    expect(result).toContain('b()')
+  })
+})
+
+describe('JSX transform — walkNode edge cases for scope cleanup', () => {
+  test('JSXExpressionContainer at top level within function', () => {
+    // This exercises the walkNode JSXExpressionContainer path with scope shadows
+    const result = t(`
+      function App() {
+        const x = signal(0)
+        function Inner() {
+          const x = 'plain'
+          return <MyComp>{x}</MyComp>
+        }
+        return <div>{x}</div>
+      }
+    `)
+    expect(result).toContain('.data = x()')
+  })
+
+  test('template emit within scoped function with signal shadowing', () => {
+    const result = t(`
+      function App() {
+        const count = signal(0)
+        function Nested() {
+          const count = 'static'
+          return <div><span>{count}</span></div>
+        }
+        return <div><span>{count}</span></div>
+      }
+    `)
+    // Nested: count is shadowed, static
+    expect(result).toContain('textContent = count')
+    // App: count is signal, auto-called
+    expect(result).toContain('.data = count()')
+  })
+})
+
+describe('JSX transform — parse error handling', () => {
+  test('returns original code on parse error', () => {
+    const result = transformJSX('this is not {valid js <>', 'bad.tsx')
+    expect(result.code).toBe('this is not {valid js <>')
+    expect(result.warnings).toHaveLength(0)
+  })
+})
+
+describe('JSX transform — reactive combined _bind for multiple reactive attrs', () => {
+  test('multiple reactive attributes on same element with complex expressions', () => {
+    const result = t('<div class={`${a()} b`} title={`${c()} d`}><span /></div>')
+    expect(result).toContain('_bind(() => {')
+    expect(result).toContain('className')
+    expect(result).toContain('setAttribute("title"')
+  })
+})
+
+describe('JSX transform — signalVars.size > shadowedSignals.size check', () => {
+  test('when all signals are shadowed, no auto-call happens', () => {
+    const result = t(`
+      function App() {
+        const x = signal(0)
+        function Inner() {
+          const x = 'plain'
+          return <div class={x + " extra"}></div>
+        }
+        return <div>{x}</div>
+      }
+    `)
+    // Inner's x is NOT auto-called
+    expect(result).toContain('className = x + " extra"')
+    // App's x IS auto-called
+    expect(result).toContain('.data = x()')
+  })
+})
+
+describe('JSX transform — _isDynamic with signal member expression and call position', () => {
+  test('signal.set() is NOT flagged as dynamic (signal in callee position)', () => {
+    // When signal is the callee of a call expression, it's already being called
+    const result = t('function C() { const x = signal(0); return <button onClick={() => x.set(1)}>click</button> }')
+    // onClick is an event handler — not wrapped regardless
+    expect(result).not.toContain('_rp')
+  })
+
+  test('signal in property name position of member expression is NOT dynamic', () => {
+    const result = t('function C() { const x = signal(0); return <div title={obj.x}></div> }')
+    // obj.x — x is property name, not signal reference
+    expect(result).not.toContain('_bind')
+  })
+})
+
+// ─── Branch coverage: referencesPropDerived with computed MemberExpression ──
+
+describe('JSX transform — referencesPropDerived computed access', () => {
+  test('prop-derived var used as computed property key is treated as reference', () => {
+    const result = t('function C(props) { const key = props.key; return <div title={obj[key]}></div> }')
+    // key is used as computed property — it IS a reference (p.computed === true)
+    expect(result).toContain('props.key')
+    expect(result).toContain('_bind')
+  })
+
+  test('prop-derived var in non-computed property position is NOT a reference', () => {
+    const result = t('function C(props) { const data = props.data; return <div title={result.data}></div> }')
+    // result.data — 'data' is a non-computed property name, NOT a prop-derived reference
+    expect(result).not.toContain('_bind')
+  })
+})
+
+// ─── Branch coverage: template attrSetter for style (line 940) ──────────────
+
+describe('JSX transform — template style attribute combined _bind', () => {
+  test('complex reactive style uses cssText in combined _bind', () => {
+    const result = t('<div style={getStyle() + "extra"}>text</div>')
+    expect(result).toContain('style.cssText')
+    expect(result).toContain('_bind(() => {')
+  })
+})
+
+// ─── Branch coverage: processOneAttr key attr (line 1008) ───────────────────
+
+describe('JSX transform — template with key attribute on child element', () => {
+  test('key attribute on child element is stripped in template', () => {
+    // key on inner child doesn't bail template (only root key bails)
+    // But templateElementCount bails on key attr on any element
+    const result = t('<div><span key="a">text</span></div>')
+    expect(result).not.toContain('_tpl(')
+  })
+})
+
+// ─── Branch coverage: selfClosing template bail (line 313) ──────────────────
+
+describe('JSX transform — self-closing element template bail', () => {
+  test('self-closing elements skip template emission', () => {
+    const result = t('<div class={cls()} />')
+    // Self-closing root element — tryTemplateEmit returns false
+    expect(result).toContain('() => cls()')
+    expect(result).not.toContain('_tpl(')
+  })
+})
+
+// ─── Branch coverage: isStatic types (line 1388-1389) ───────────────────────
+
+describe('JSX transform — isStatic for various literal types', () => {
+  test('NullLiteral is static', () => {
+    const result = t('<div>{<span data-x={null} />}</div>')
+    expect(result).toContain('const _$h0')
+  })
+
+  test('template literal with expressions is not static', () => {
+    const result = t('<div>{<span data-x={`${x}`} />}</div>')
+    expect(result).not.toContain('const _$h0')
+  })
+})
+
+// ─── Branch coverage: accessesProps with arrow function inside (line 679) ────
+
+describe('JSX transform — accessesProps stops at nested functions', () => {
+  test('props read inside arrow function does not make outer expression reactive', () => {
+    const result = t('function C(props) { return <div title={items.map(x => props.fmt(x))}></div> }')
+    // The arrow function contains a props read, but accessesProps stops at arrow boundaries
+    expect(result).toContain('.map')
+  })
+})
+
+// ─── Branch coverage: shouldWrap pure static call (line 688) ────────────────
+
+describe('JSX transform — shouldWrap skips pure static calls', () => {
+  test('Array.from with static arg in attribute position', () => {
+    const result = t('<div data-arr={Array.from("abc")}></div>')
+    expect(result).not.toContain('_bind')
+  })
+})
+
+// ─── Branch coverage: isChildrenExpression fallthrough (line 1321) ──────────
+
+describe('JSX transform — isChildrenExpression edge cases', () => {
+  test('expression ending with .children uses _mountSlot', () => {
+    const result = t('function C(props) { return <div>{config.children}</div> }')
+    expect(result).toContain('_mountSlot')
+  })
+
+  test('identifier named exactly children uses _mountSlot', () => {
+    const result = t('function C() { return <div>{children}</div> }')
+    expect(result).toContain('_mountSlot')
+  })
+
+  test('expression NOT ending with .children does NOT use _mountSlot', () => {
+    const result = t('function C(props) { return <div>{config.items}</div> }')
+    expect(result).not.toContain('_mountSlot')
+  })
+})
+
+// ─── Branch coverage: _isDynamic ArrowFunctionExpression stop (line 656) ────
+
+describe('JSX transform — _isDynamic stops at nested arrow functions', () => {
+  test('call inside arrow function does not make outer expression dynamic', () => {
+    const result = t('<MyComp render={() => fn()} />')
+    // Arrow function prevents _isDynamic from recursing into fn()
+    expect(result).not.toContain('_rp(')
+  })
+})
+
+// ─── Branch coverage: tryDirectSignalRef edge cases (line 922) ──────────────
+
+describe('JSX transform — tryDirectSignalRef with arguments', () => {
+  test('call with arguments does NOT use _bindDirect', () => {
+    const result = t('<div class={getClass("primary")}><span /></div>')
+    // Has arguments — not a direct signal ref
+    expect(result).not.toContain('_bindDirect')
+    expect(result).toContain('_bind(() => {')
+  })
+})
+
+// ─── Branch coverage: unwrapAccessor for function expression (line 928) ─────
+
+describe('JSX transform — unwrapAccessor with function expression', () => {
+  test('function expression in attribute is called in bind', () => {
+    const result = t('<div class={function() { return "cls" }}><span /></div>')
+    expect(result).toContain('_bind')
+  })
+})
+
+// ─── Branch coverage: collectPropDerivedFromDecl callbackDepth (line 498) ───
+
+describe('JSX transform — prop-derived vars inside callbacks excluded', () => {
+  test('const inside .map callback is NOT tracked as prop-derived', () => {
+    const result = t('function C(props) { return <div>{items.map(item => { const x = props.y; return <span>{x}</span> })}</div> }')
+    // x is declared inside a callback (callbackDepth > 0) — not tracked
+    expect(result).toContain('() =>')
+  })
+})
+
+// ─── Branch coverage: static JSX in component prop hoisting (line 359) ──────
+
+describe('JSX transform — component prop static JSX hoisting', () => {
+  test('single JSX element in component prop is NOT hoisted but walked', () => {
+    const result = t('<MyComp icon={<span>icon</span>} />')
+    // Single JSX element prop → walked (line 354-356), not hoisted
+    expect(result).not.toContain('const _$h0')
+    expect(result).toContain('<span>icon</span>')
+  })
+
+  test('non-JSX static expression in component prop gets hoisted', () => {
+    // This exercises the maybeHoist path (line 358-360)
+    const result = t('<MyComp render={12} />')
+    // Static numeric — no wrapping needed
+    expect(result).not.toContain('_rp(')
+  })
+})
+
+// ─── Branch coverage: templateElementCount bail at non-lowercase (line 825) ──
+
+describe('JSX transform — template element count bail on uppercase', () => {
+  test('component element inside template bails', () => {
+    const result = t('<div><Component /><span /></div>')
+    expect(result).not.toContain('_tpl(')
+  })
+})
+
+// ─── Branch coverage: maybeRegisterComponentProps with no params (line 518) ──
+
+describe('JSX transform — component with no params not tracked', () => {
+  test('parameterless function not tracked as component props', () => {
+    const result = t('function C() { return <div>hello</div> }')
+    expect(result).toContain('_tpl(')
+    expect(result).not.toContain('_bind')
+  })
+})
+
+// ─── Branch coverage: tpl null cleanup return (line 1156/1171/1179) ────────
+
+describe('JSX transform — template processChildren null bail', () => {
+  test('template bails when child element has no tag name', () => {
+    // Member expression tag → empty tag name → processElement returns null
+    const result = t('<div><ns.Comp><span /></ns.Comp></div>')
+    expect(result).not.toContain('_tpl(')
+  })
+})
+
+// ─── Branch coverage: more edge cases for various ?? and ?. operators ───────
+
+describe('JSX transform — additional branch coverage paths', () => {
+  test('arrow function with expression body (no block statement)', () => {
+    const result = t('<div class={() => cls()}><span /></div>')
+    expect(result).toContain('_bindDirect(cls,')
+  })
+
+  test('function expression with block body in attribute', () => {
+    const result = t('<div class={function() { return cls() }}><span /></div>')
+    expect(result).toContain('_bind')
+  })
+
+  test('prop-derived var used inside a nested function arg but NOT as callback', () => {
+    const result = t('function C(props) { const x = props.y; return <div>{x + other(x)}</div> }')
+    expect(result).toContain('props.y')
+    expect(result).toContain('_bind')
+  })
+
+  test('mixed static and dynamic props on template element', () => {
+    const result = t('<div class="static" title={x()} data-id={42}><span /></div>')
+    expect(result).toContain('class=\\"static\\"')
+    expect(result).toContain('_bindDirect(x,')
+    expect(result).toContain('data-id=\\"42\\"')
+  })
+
+  test('template with nested elements each having dynamic attributes', () => {
+    const result = t('<div><span class={a()}><em title={b()}>text</em></span></div>')
+    expect(result).toContain('_tpl(')
+    expect(result).toContain('_bindDirect(a,')
+    expect(result).toContain('_bindDirect(b,')
+  })
+
+  test('signal auto-call works inside template _bind for text', () => {
+    const result = t('function C() { const x = signal(1); return <div>{x + 1}</div> }')
+    expect(result).toContain('x() + 1')
+    expect(result).toContain('_bind')
+  })
+
+  test('signal auto-call inside template attribute _bind', () => {
+    const result = t('function C() { const cls = signal("a"); return <div class={cls + " b"}><span /></div> }')
+    expect(result).toContain('cls() + " b"')
+    expect(result).toContain('_bind')
+  })
+
+  test('template with event + ref + dynamic attr + text child', () => {
+    const result = t('<div ref={myRef} onClick={handler} class={cls()} title="static">{text()}</div>')
+    expect(result).toContain('_tpl(')
+    expect(result).toContain('myRef')
+    expect(result).toContain('__ev_click = handler')
+    expect(result).toContain('_bindDirect(cls,')
+    expect(result).toContain('_bindText(text,')
+  })
+
+  test('template with non-delegated event using addEventListener', () => {
+    const result = t('<div onScroll={handler}><span /></div>')
+    expect(result).toContain('addEventListener("scroll", handler)')
+    expect(result).not.toContain('__ev_')
+  })
+
+  test('forEachChild with non-array non-object values', () => {
+    // Edge case: JSX text node has primitive value property
+    const result = t('<div>plain text between elements<span /></div>')
+    expect(result).toContain('_tpl(')
+  })
+
+  test('self-closing void element in mixed children template', () => {
+    const result = t('<div><input />{value()}</div>')
+    expect(result).toContain('_tpl(')
+    expect(result).toContain('childNodes[')
+    expect(result).toContain('_bindText(value,')
+  })
+
+  test('multiple signals from same component all tracked', () => {
+    const result = t(`
+      function C() {
+        const a = signal(1)
+        const b = signal(2)
+        const c = signal(3)
+        return <div>
+          <span>{a}</span>
+          <em>{b}</em>
+          <strong>{c}</strong>
+        </div>
+      }
+    `)
+    expect(result).toContain('a()')
+    expect(result).toContain('b()')
+    expect(result).toContain('c()')
+  })
+
+  test('signal auto-call with binary and unary expressions', () => {
+    const result = t('function C() { const x = signal(5); return <div>{-x}</div> }')
+    expect(result).toContain('x()')
+    expect(result).toContain('_bind')
+  })
+
+  test('signal in computed property access is auto-called', () => {
+    const result = t('function C() { const idx = signal(0); return <div>{arr[idx]}</div> }')
+    expect(result).toContain('idx()')
+  })
+
+  test('signal variable reference not confused with same-name property', () => {
+    const result = t('function C() { const x = signal(0); return <div data-val={obj.method(x)}></div> }')
+    expect(result).toContain('x()')
+    expect(result).toContain('_bind')
+  })
+
+  test('template with static spread on root and dynamic inner attr', () => {
+    const result = t('<div {...staticProps}><span class={cls()}>text</span></div>')
+    expect(result).toContain('_tpl(')
+    expect(result).toContain('_applyProps')
+    expect(result).toContain('_bindDirect(cls,')
+  })
+
+  test('empty JSX expression in template attribute position', () => {
+    const result = t('<div class={/* comment */}><span /></div>')
+    expect(result).toContain('_tpl(')
+  })
+
+  test('ternary in template attribute without signal', () => {
+    const result = t('<div class={x ? "a" : "b"}><span /></div>')
+    // No calls — not dynamic
+    expect(result).toContain('className = x ? "a" : "b"')
+  })
+
+  test('variable declaration kind is let — not tracked for prop-derived', () => {
+    const result = t('function C(props) { let x = props.y; return <div>{x}</div> }')
+    // let is not tracked — x is static
+    expect(result).toContain('textContent = x')
+  })
+
+  test('FunctionDeclaration with JSX detected as component', () => {
+    const result = t('function MyComp(props) { return <div class={props.cls}></div> }')
+    expect(result).toContain('_bind')
+    expect(result).toContain('props.cls')
+  })
+
+  test('ArrowFunctionExpression with JSX and single param detected as component', () => {
+    const result = t('const MyComp = (props) => <div class={props.cls}></div>')
+    expect(result).toContain('_bind')
+    expect(result).toContain('props.cls')
+  })
+
+  test('signal NOT tracked inside callback arg (callbackDepth > 0)', () => {
+    // collectPropDerivedFromDecl skips when callbackDepth > 0
+    const result = t('function C(props) { return <div>{items.map(item => { const x = signal(0); return <span>{x}</span> })}</div> }')
+    // x is inside a callback — signal tracking doesn't apply at callback depth
+    expect(result).toContain('() =>')
+  })
+
+  test('template with empty expression in attribute (attrIsDynamic false branch)', () => {
+    // Empty expression in attribute: data-x={/* */} — attrIsDynamic returns false
+    const result = t('<div data-x={/* comment */}><span /></div>')
+    expect(result).toContain('_tpl(')
+  })
+
+  test('template with only static attributes — elementHasDynamic false', () => {
+    const result = t('<div class="a" title="b"><span class="c">text</span></div>')
+    expect(result).toContain('_tpl(')
+    // No _bind needed for fully static tree
+    expect(result).toContain('() => null')
+  })
+
+  test('signal auto-call with signal as callee of call expression', () => {
+    // signal()(args) — signal IS the callee of a call, already being called
+    const result = t('function C() { const fn = signal(() => 1); return <div>{fn()}</div> }')
+    // fn() is already a call — no double call
+    expect(result).not.toContain('fn()()')
+  })
+
+  test('signal auto-call not triggered on arrow function children', () => {
+    // Arrow functions in JSX are not recursed into by referencesSignalVar
+    const result = t('function C() { const x = signal(0); return <div>{() => { const x = "shadow"; return x }}</div> }')
+    // The arrow function is not touched
+    expect(result).toBeDefined()
+  })
+
+  test('template with deeply nested mixed expressions', () => {
+    const result = t('<div><span><em>{a()}</em></span><strong>{b()}</strong></div>')
+    expect(result).toContain('_tpl(')
+    expect(result).toContain('_bindText(a,')
+    expect(result).toContain('_bindText(b,')
+  })
+
+  test('signal in JSX attribute expression container — auto-called in bind', () => {
+    const result = t('function C() { const x = signal(0); return <div data-val={x}><span /></div> }')
+    // x is a signal identifier in an attribute — should be auto-called
+    expect(result).toContain('x()')
+    expect(result).toContain('_bind')
+  })
+
+  test('namespace attribute in template element', () => {
+    // xml:lang or xlink:href — JSXNamespacedName, not JSXIdentifier
+    const result = t('<svg><use xlink:href="#icon"><rect /></use></svg>')
+    expect(result).toBeDefined()
+  })
+
+  test('signal as only child of component uses auto-call', () => {
+    const result = t('function C() { const x = signal(0); return <MyComp>{x}</MyComp> }')
+    expect(result).toContain('() => x()')
+  })
+
+  test('multiple signals with complex nesting', () => {
+    const result = t(`
+      function C() {
+        const a = signal(1)
+        const b = signal('text')
+        return <div class={a ? 'active' : 'inactive'}>
+          <span>{b}</span>
+          <em>{a > 0 ? b : 'none'}</em>
+        </div>
+      }
+    `)
+    expect(result).toContain('a()')
+    expect(result).toContain('b()')
+  })
+})