@pyreon/compiler 0.14.0 → 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(')
@@ -1849,6 +1946,92 @@ describe('JSX transform — signal auto-call', () => {
     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() {
@@ -2066,6 +2249,55 @@ describe('JSX transform — template reactive style _bindDirect path', () => {
   })
 })
 
+// ── 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>')

package/src/tests/native-equivalence.test.ts

@@ -122,6 +122,25 @@ describeNative('Native vs JS equivalence — template emission', () => {
   test('void element', () => compare('<div><br /><span>text</span></div>'))
   test('ref in template (object)', () => compare('<div ref={myRef}><span /></div>'))
   test('ref in template (arrow)', () => compare('<div ref={(el) => { myEl = el }}><span /></div>'))
+
+  // Regression: a child element with a block-arrow ref AND adjacent
+  // reactive props used to emit `const __e0 = __root.children[N]`
+  // followed by `((el) => { ... })(__e0)` with NO `;` between, so JS's
+  // ASI merged them into one expression `const __e0 = X((el) => ...)(__e0)`
+  // (calling X as fn, self-referencing __e0). Both backends now append
+  // `;` to every bind line. This test asserts both emit the SAME `;`-
+  // terminated output and the chained-call shape never appears.
+  test('block-arrow ref on child element with adjacent reactive prop', () => {
+    const input = '<div><span ref={(el) => { x = el }} data-state={cls()} /></div>'
+    compare(input)
+    // Tighter assertion: neither backend may emit the silent-merge shape.
+    const js = transformJSX_JS(input, 'test.tsx')
+    expect(js.code).not.toMatch(/children\[0\]\(\(/)
+    expect(js.code).toMatch(/const __e0 = __root\.children\[0\];/)
+    const rs = nativeTransform!(input, 'test.tsx', false, null)
+    expect(rs.code).not.toMatch(/children\[0\]\(\(/)
+    expect(rs.code).toMatch(/const __e0 = __root\.children\[0\];/)
+  })
   test('non-delegated event', () => compare('<div onMouseEnter={handler}><span /></div>'))
   test('style object in template', () => compare('<div style={{ overflow: "hidden" }}>text</div>'))
   test('style string in template', () => compare('<div style="color: red">text</div>'))
@@ -652,3 +671,61 @@ describeNative('Native vs JS equivalence — knownSignals cross-module', () => {
     ['theme'],
   ))
 })
+
+// PR #352 added a `DOM_PROPS` set so `<input value={x()} />` inside a
+// template-emitting context compiles to `el.value = x()` (property
+// assignment) instead of `el.setAttribute("value", x())` (content
+// attribute). The two diverge for IDL properties whose live state
+// differs from the content attribute (`value`, `checked`, etc.). The
+// Rust native backend reimplements this list separately. A typo in
+// either side's list would silently produce wrong output for one
+// DOM_PROP without breaking any other test. This block enumerates
+// every DOM_PROP under template context (the only context where
+// DOM_PROPS actually fires — root-level standalone JSX uses the
+// `h()` path, not `_tpl() + _bind()`) and asserts JS↔Rust agreement,
+// so a drift between the two lists fails one specific test.
+//
+// Reference: packages/core/compiler/src/jsx.ts:1389 — DOM_PROPS Set.
+describeNative('Native vs JS equivalence — DOM properties', () => {
+  const DOM_PROPS = [
+    'value',
+    'checked',
+    'selected',
+    'disabled',
+    'multiple',
+    'readOnly',
+    'indeterminate',
+  ] as const
+
+  for (const prop of DOM_PROPS) {
+    test(`DOM_PROP in template: <div><input ${prop}={x()} /></div> (reactive)`, () => {
+      compare(`<div><input ${prop}={x()} /></div>`)
+    })
+
+    test(`DOM_PROP in template: <div><input ${prop}={() => x()} /></div> (accessor)`, () => {
+      compare(`<div><input ${prop}={() => x()} /></div>`)
+    })
+
+    test(`DOM_PROP in template: <div><input ${prop}={true} /></div> (literal)`, () => {
+      compare(`<div><input ${prop}={true} /></div>`)
+    })
+  }
+
+  test('regression: all DOM_PROPS together in one template', () => {
+    // Sentinel — if a future PR adds a new DOM property to either
+    // backend without adding it to the other, the loop above won't
+    // notice unless that prop is in the test list. This single test
+    // compiles JSX with ALL known DOM_PROPS together and verifies
+    // both backends agree on the combined output.
+    const allProps = DOM_PROPS.map((p) => `${p}={x()}`).join(' ')
+    compare(`<div><input ${allProps} /></div>`)
+  })
+
+  test('non-DOM-prop control: title in template uses setAttribute, not assignment', () => {
+    // Negative control — `title` is NOT a DOM_PROP, so it should
+    // compile through setAttribute. If this test starts failing,
+    // someone added `title` to DOM_PROPS — verify intent before
+    // updating.
+    compare('<div><input title={x()} /></div>')
+  })
+})

package/src/tests/pyreon-intercept.test.ts

@@ -328,4 +328,159 @@ describe('detectPyreonPatterns', () => {
       expect(lines).toEqual([...lines].sort((a, b) => a - b))
     })
   })
+
+  describe('signal-write-as-call', () => {
+    it('flags `sig(value)` when sig was declared as a signal', () => {
+      const code = `
+        import { signal } from '@pyreon/reactivity'
+        const count = signal(0)
+        function inc() { count(count() + 1) }
+      `
+      const diags = detectPyreonPatterns(code)
+      const hits = diags.filter((d) => d.code === 'signal-write-as-call')
+      expect(hits).toHaveLength(1)
+      expect(hits[0]!.message).toContain('signal()')
+      expect(hits[0]!.suggested).toContain('count.set(')
+    })
+
+    it('does NOT flag `sig()` (zero args — that is the read API)', () => {
+      const code = `
+        const count = signal(0)
+        function read() { return count() }
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'signal-write-as-call')).toEqual([])
+    })
+
+    it('does NOT flag `sig.set(value)` (the proper write API)', () => {
+      const code = `
+        const count = signal(0)
+        function set(v) { count.set(v) }
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'signal-write-as-call')).toEqual([])
+    })
+
+    it('does NOT flag calls on identifiers that are not signal-bound', () => {
+      const code = `
+        const handler = (v) => console.log(v)
+        handler(42)
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'signal-write-as-call')).toEqual([])
+    })
+
+    it('flags `computed(value)` shape too — same misread of the API', () => {
+      const code = `
+        const doubled = computed(() => count() * 2)
+        function bug() { doubled(99) }
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'signal-write-as-call')).toHaveLength(1)
+    })
+  })
+
+  describe('static-return-null-conditional', () => {
+    it('flags `if (cond) return null` at the top of a component body', () => {
+      const code = `
+        function TabPanel({ id }) {
+          if (!isActive(id)) return null
+          return <div class="panel">content</div>
+        }
+      `
+      const diags = detectPyreonPatterns(code)
+      const hits = diags.filter((d) => d.code === 'static-return-null-conditional')
+      expect(hits).toHaveLength(1)
+      expect(hits[0]!.message).toContain('run ONCE')
+      expect(hits[0]!.suggested).toContain('=> {')
+    })
+
+    it('flags the block-form `if (cond) { return null }` too', () => {
+      const code = `
+        function Modal() {
+          if (!isOpen()) {
+            return null
+          }
+          return <div class="modal">…</div>
+        }
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(
+        diags.filter((d) => d.code === 'static-return-null-conditional'),
+      ).toHaveLength(1)
+    })
+
+    it('does NOT flag non-component functions returning null', () => {
+      const code = `
+        function findUser(id) {
+          if (!id) return null
+          return { id }
+        }
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'static-return-null-conditional')).toEqual([])
+    })
+
+    it('does NOT flag the recommended reactive-accessor pattern', () => {
+      const code = `
+        function TabPanel() {
+          return (() => {
+            if (!isActive()) return null
+            return <div>content</div>
+          })
+        }
+      `
+      const diags = detectPyreonPatterns(code)
+      // The inner arrow contains the if-return-null but is itself a
+      // returned reactive accessor — not the "static-return-null" shape
+      // because the OUTER component's body has no top-level if-return-null.
+      expect(diags.filter((d) => d.code === 'static-return-null-conditional')).toEqual([])
+    })
+
+    it('only flags ONCE per component body even when chained', () => {
+      const code = `
+        function MultiGuard() {
+          if (!a()) return null
+          if (!b()) return null
+          return <div>ok</div>
+        }
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(
+        diags.filter((d) => d.code === 'static-return-null-conditional'),
+      ).toHaveLength(1)
+    })
+  })
+
+  describe('as-unknown-as-vnodechild', () => {
+    it('flags `expr as unknown as VNodeChild`', () => {
+      const code = `
+        function Wrapper() {
+          return (<div>hi</div> as unknown as VNodeChild)
+        }
+      `
+      const diags = detectPyreonPatterns(code)
+      const hits = diags.filter((d) => d.code === 'as-unknown-as-vnodechild')
+      expect(hits).toHaveLength(1)
+      expect(hits[0]!.message).toContain('JSX.Element')
+    })
+
+    it('does NOT flag a single `as VNodeChild` (no double-cast)', () => {
+      const code = `
+        function Wrapper() {
+          return (something as VNodeChild)
+        }
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'as-unknown-as-vnodechild')).toEqual([])
+    })
+
+    it('does NOT flag `as unknown as OtherType`', () => {
+      const code = `
+        const x = (foo as unknown as Whatever)
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'as-unknown-as-vnodechild')).toEqual([])
+    })
+  })
 })