@pyreon/compiler 0.13.1 → 0.15.0

package/src/tests/jsx.test.ts

@@ -580,6 +580,39 @@ describe('JSX transform — template emission', () => {
     expect(result).toContain('__ev_click = handler')
   })
 
+  // Regression: multi-word event-name casing was broken — `onKeyDown`
+  // produced `addEventListener("keyDown", ...)` (camelCase) instead of
+  // `addEventListener("keydown", ...)` (DOM convention). The handler
+  // never fired because `keyDown` is not a real DOM event name.
+  // Same bug class affected `onMouseEnter`, `onMouseLeave`, etc.
+  test('lowercases multi-word event names (onKeyDown → keydown — delegated)', () => {
+    const result = t('<div><input onKeyDown={handler} /></div>')
+    // keydown IS in DELEGATED_EVENTS — must use the expando, not addEventListener.
+    // Prior behavior: addEventListener("keyDown", ...) — wrong casing AND
+    // wrong path (delegated check missed because case mismatched).
+    expect(result).toContain('__ev_keydown = handler')
+    expect(result).not.toContain('__ev_keyDown')
+    expect(result).not.toContain('"keyDown"')
+  })
+
+  test('lowercases multi-word event names (onMouseEnter → mouseenter — non-delegated)', () => {
+    const result = t('<div><span onMouseEnter={handler}>hi</span></div>')
+    // mouseenter is NOT delegated — must reach addEventListener with lowercase name
+    expect(result).toContain('addEventListener("mouseenter", handler)')
+    expect(result).not.toContain('"mouseEnter"')
+  })
+
+  test('lowercases multi-word event names for input change (onChange → change — delegated)', () => {
+    const result = t('<div><input onChange={handler} /></div>')
+    expect(result).toContain('__ev_change = handler')
+  })
+
+  test('lowercases multi-word event names with multiple capitals (onPointerLeave → pointerleave)', () => {
+    const result = t('<div><span onPointerLeave={handler}>hi</span></div>')
+    expect(result).toContain('addEventListener("pointerleave", handler)')
+    expect(result).not.toContain('"pointerLeave"')
+  })
+
   test('uses element children indexing for nested access', () => {
     const result = t('<div><span>{a()}</span><em>{b()}</em></div>')
     // Can't have two expression children in same parent, but each is in its own element
@@ -779,6 +812,55 @@ describe('JSX transform — template emission', () => {
     expect(result).toContain('((el) => { myEl = el })(__root)')
   })
 
+  test('block-arrow ref on a child element with adjacent reactive props compiles cleanly', () => {
+    // Regression: a child element (NOT __root) with `hasDynamic=true`
+    // used to emit `const __e0 = __root.children[N]` followed by an
+    // unterminated ref-call `((el) => { x = el })(__e0)`. Without a
+    // trailing `;` on the const line, ASI did NOT insert one (because
+    // `__root.children[N]((el) => ...)` is a valid function call), and
+    // the two lines parsed as ONE expression:
+    //   `const __e0 = __root.children[N]((el) => ...)(__e0)`
+    // — calling `children[N]` as a function with the arrow as arg, and
+    // self-referencing `__e0` before assignment. Surfaced when the
+    // app-showcase /dnd demo used `ref={(el) => { letVar = el }}` next
+    // to `data-X={signal()}` reactive props on the same element. Fix:
+    // append `;` to every bind line (`bindLines.map(l => `  ${l};`)`).
+    //
+    // This test asserts the OUTPUT is well-formed: the const line ends
+    // in `;` and the ref call IIFE follows on its own line.
+    const result = t(
+      '<div><span ref={(el) => { x = el }} data-state={cls()} /></div>',
+    )
+    // Const declaration must terminate before the ref IIFE.
+    expect(result).toMatch(/const __e0 = __root\.children\[0\];\s*\n/)
+    // The ref IIFE is its own statement, calling __e0 (not chained).
+    expect(result).toContain('((el) => { x = el })(__e0)')
+    // And the chained-call shape MUST NOT appear (the bug pattern).
+    expect(result).not.toMatch(/__root\.children\[0\]\(\(/)
+  })
+
+  test('compiled output parses cleanly for block-arrow ref + reactive prop', () => {
+    // Functional regression: prove the compiled module is well-formed JS.
+    // Pre-fix the AST-level shape was malformed and execution threw
+    // "TypeError: __root.children[N] is not a function" at mount time
+    // because the const declaration chained into the ref IIFE.
+    //
+    // Strip imports, stub framework calls, and parse the body via the
+    // Function constructor. If the const line lacks its terminator, the
+    // ref-call IIFE would silently turn the RHS into a function call —
+    // valid JS, wrong runtime behavior. So we BOTH parse-check AND
+    // string-shape-check: parse to catch syntax errors, regex to catch
+    // the silent-merge case (which parses fine but means the wrong thing).
+    const result = t(
+      '<div><span ref={(el) => { x = el }} data-state={cls()} /></div>',
+    )
+    const codeOnly = result.replace(/^\s*import\b[^;]+;?\s*/gm, '')
+    const wrapped = `let x;\nconst _tpl = () => {}; const _bind = () => {}; const _bindDirect = () => {}; const cls = () => "v";\nreturn ${codeOnly};`
+    expect(() => new Function(wrapped)).not.toThrow()
+    // And the buggy chained-call shape MUST NOT appear.
+    expect(result).not.toMatch(/children\[0\]\(\(/)
+  })
+
   test('handles non-void self-closing element as closing tag', () => {
     const result = t('<div><span></span></div>')
     expect(result).toContain('_tpl(')
@@ -1116,13 +1198,28 @@ describe('JSX transform — template emission edge cases', () => {
   test('non-delegated event (onMouseEnter) uses addEventListener not delegation', () => {
     const result = t('<div onMouseEnter={handler}><span /></div>')
     expect(result).toContain('_tpl(')
-    // mouseenter is NOT in DELEGATED_EVENTS → must use addEventListener
-    // onMouseEnter → eventName = "m" + "ouseEnter" = "mouseEnter"
-    expect(result).toContain('addEventListener(')
-    expect(result).toContain('mouseEnter')
+    // mouseenter is NOT in DELEGATED_EVENTS → must use addEventListener.
+    // The event name is the JSX attribute with the "on" prefix dropped
+    // and the rest fully lowercased (`onMouseEnter` → `mouseenter`)
+    // — DOM events are all-lowercase. Prior to the fix this emitted
+    // `mouseEnter` (camelCase) which the browser never dispatches.
+    expect(result).toContain('addEventListener("mouseenter"')
+    expect(result).not.toContain('mouseEnter')
     expect(result).not.toContain('__ev_')
   })
 
+  // Regression: `onDoubleClick` is the one React→DOM event-name where
+  // the simple-lowercase rule is wrong. The DOM event is `dblclick`,
+  // NOT `doubleclick`. Pre-fix the compiler emitted `doubleclick`,
+  // attaching a listener the browser never fires. Proven broken in
+  // real Chromium via `e2e/app.spec.ts:dbl-click button increments by 10`.
+  test('onDoubleClick maps to dblclick (not doubleclick)', () => {
+    const result = t('<div onDoubleClick={handler}><span /></div>')
+    expect(result).toContain('_tpl(')
+    expect(result).toContain('__ev_dblclick = handler')
+    expect(result).not.toContain('doubleclick')
+  })
+
   test('template with both dynamic attribute AND dynamic child text', () => {
     const result = t('<div title={getTitle()}>{count()}</div>')
     expect(result).toContain('_tpl(')
@@ -1720,3 +1817,1072 @@ 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')
+  })
+
+  // Regression: signal-method calls were getting double-wrapped — the
+  // auto-call inserted `()` after the bare signal reference inside
+  // `signal.set(value)`, producing `signal().set(value)`. That calls
+  // the signal (returns its current value, e.g. a string) then tries
+  // `.set` on the string (undefined → TypeError). Every `signal.set`,
+  // `signal.peek`, `signal.update` call inside event handlers / hot
+  // paths was silently broken.
+  test('signal.set() in event handler does NOT auto-call the bare signal reference', () => {
+    const result = t(
+      'function C() { const value = signal(""); return <input onInput={(e) => value.set(e.target.value)} /> }',
+    )
+    // Must keep `value.set(...)` — NOT `value().set(...)`.
+    expect(result).toContain('value.set(e.target.value)')
+    expect(result).not.toContain('value().set')
+  })
+
+  test('signal.peek() does NOT auto-call', () => {
+    const result = t(
+      'function C() { const count = signal(0); return <button onClick={() => console.log(count.peek())}>x</button> }',
+    )
+    expect(result).toContain('count.peek()')
+    expect(result).not.toContain('count().peek')
+  })
+
+  test('signal.update() does NOT auto-call', () => {
+    const result = t(
+      'function C() { const count = signal(0); return <button onClick={() => count.update(n => n + 1)}>+</button> }',
+    )
+    expect(result).toContain('count.update(')
+    expect(result).not.toContain('count().update')
+  })
+
+  // Bare member-access on a signal (no call) STILL auto-calls — preserves
+  // the existing convention where a signal containing an object can be
+  // dereferenced via `signalContainingObj.someProp` (compiles to
+  // `signalContainingObj().someProp`). Only the CALLED form
+  // (`signal.method(...)`) skips the auto-call. See findSignalIdents
+  // in jsx.ts for the rationale.
+  test('signal.someProp (bare member access) DOES auto-call', () => {
+    const result = t(
+      'function C() { const data = signal({ count: 0 }); return <div>{data.count}</div> }',
+    )
+    expect(result).toContain('data().count')
+  })
+
+  // The bare signal reference STILL auto-calls in JSX text — make sure
+  // the fix doesn't over-correct.
+  test('bare signal in JSX text still auto-calls (fix does not over-correct)', () => {
+    const result = t('function C() { const count = signal(0); return <div>{count}</div> }')
+    expect(result).toContain('count()')
+  })
+
+  // ── JSX text/expression whitespace (regression) ─────────────────────
+  // The compiler used `.replace(/\n\s*/g, '').trim()` on JSX text which
+  // stripped ALL leading/trailing whitespace — even spaces adjacent to
+  // expressions on the same line. So `<p>doubled: {x}</p>` produced
+  // `<p>doubled:</p>` + appended text node, rendering "doubled:0"
+  // instead of "doubled: 0". Same class for `<p>{x} remaining</p>` →
+  // text "remaining" loses its leading space, rendering as "Xremaining".
+  // Fix: only strip whitespace adjacent to newlines (multi-line JSX
+  // formatting), preserve same-line whitespace adjacent to expressions.
+  test('preserves trailing space in JSX text before expression on same line', () => {
+    const result = t('<p>doubled: {x()}</p>')
+    // The static text portion of the template must keep "doubled: "
+    // (with trailing space) so the appended expression value renders
+    // as "doubled: 0", not "doubled:0".
+    expect(result).toContain('doubled: ')
+  })
+
+  test('preserves leading space in JSX text after expression on same line', () => {
+    const result = t('<p>{x()} remaining</p>')
+    // Static portion must include " remaining" (with leading space).
+    expect(result).toContain(' remaining')
+  })
+
+  test('strips multi-line JSX text whitespace adjacent to newlines', () => {
+    // Multi-line JSX with indentation should still collapse — only
+    // SAME-LINE whitespace adjacent to expressions is preserved.
+    const result = t(`<div>
+  <span>hello</span>
+</div>`)
+    // The newlines + indentation should not produce stray text nodes.
+    expect(result).toContain('hello')
+    expect(result).not.toContain('"\\n  "')
+  })
+
+  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')
+  })
+})
+
+// ── DOM-property assignment for value/checked/etc. (regression) ─────────
+// The compiler used `setAttribute("value", v)` for ALL non-class/style
+// attributes. For inputs that's wrong: `value` is a live DOM property,
+// `setAttribute` only sets the initial attribute. After the user types,
+// the property and attribute drift. Then `input.set('')` runs the
+// _bindDirect updater — which only resets the attribute, leaving the
+// stale typed text in the visible field. Same for `checked` on
+// checkboxes (presence of the attribute means checked, regardless of
+// value). Fix: emit property assignment for known DOM properties.
+describe('JSX transform — DOM properties use property assignment', () => {
+  test('reactive value on input emits property assignment, not setAttribute', () => {
+    const result = t('<div><input value={() => input()} /></div>')
+    // Should be `el.value = v`, not `setAttribute("value", ...)`
+    expect(result).toContain('.value = v')
+    expect(result).not.toContain('setAttribute("value"')
+  })
+
+  test('reactive checked on input emits property assignment', () => {
+    const result = t('<div><input checked={done()} /></div>')
+    expect(result).toContain('.checked = v')
+    expect(result).not.toContain('setAttribute("checked"')
+  })
+
+  test('static-call value on input emits property assignment', () => {
+    // Non-signal-direct dynamic expression goes through reactiveBindExprs
+    const result = t('<div><input value={x.y} /></div>')
+    expect(result).toContain('.value = x.y')
+    expect(result).not.toContain('setAttribute("value"')
+  })
+
+  test('selected on option emits property assignment', () => {
+    const result = t('<div><option selected={isSelected()}>x</option></div>')
+    expect(result).toContain('.selected = v')
+    expect(result).not.toContain('setAttribute("selected"')
+  })
+
+  test('disabled on button emits property assignment', () => {
+    const result = t('<div><button disabled={isDisabled()}>x</button></div>')
+    expect(result).toContain('.disabled = v')
+    expect(result).not.toContain('setAttribute("disabled"')
+  })
+
+  test('non-DOM-prop attribute still uses setAttribute', () => {
+    // placeholder is a real attribute, not a property-divergent IDL prop
+    const result = t('<div><input placeholder={msg()} /></div>')
+    expect(result).toContain('setAttribute("placeholder"')
+  })
+})
+
+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()')
+  })
+})