@pyreon/compiler 0.13.1 → 0.15.0

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

@@ -700,3 +700,357 @@ describe('diagnoseError', () => {
     expect(diagnoseError('TypeError: Cannot freeze')).toBeNull()
   })
 })
+
+// ─── Additional branch coverage for react-intercept ─────────────────────────
+
+describe('detectReactPatterns — edge cases for branch coverage', () => {
+  test('useState with no arguments', () => {
+    const result = detectReactPatterns(`
+      import { useState } from 'react'
+      function App() {
+        const [value, setValue] = useState()
+        return <div>{value}</div>
+      }
+    `)
+    expect(result.length).toBeGreaterThan(0)
+    const useStateDiag = result.find((d) => d.code === 'use-state')
+    expect(useStateDiag).toBeDefined()
+    // No argument → init defaults to 'undefined'
+    expect(useStateDiag!.suggested).toContain('signal(undefined)')
+  })
+
+  test('useState not destructured (bare call)', () => {
+    const result = detectReactPatterns(`
+      import { useState } from 'react'
+      function App() {
+        const state = useState(0)
+        return <div>{state[0]}</div>
+      }
+    `)
+    expect(result.length).toBeGreaterThan(0)
+    const useStateDiag = result.find((d) => d.code === 'use-state')
+    expect(useStateDiag).toBeDefined()
+    // Non-destructured useState → generic suggestion
+    expect(useStateDiag!.suggested).toContain('signal(initialValue)')
+  })
+
+  test('useEffect with empty deps but no callback', () => {
+    const result = detectReactPatterns(`
+      import { useEffect } from 'react'
+      function App() {
+        useEffect(undefined, [])
+        return <div />
+      }
+    `)
+    // Should not crash, may or may not detect
+    expect(result).toBeDefined()
+  })
+
+  test('non-react import not flagged', () => {
+    const result = detectReactPatterns(`
+      import { signal } from '@pyreon/reactivity'
+      function App() {
+        const x = signal(0)
+        return <div>{x()}</div>
+      }
+    `)
+    expect(result).toHaveLength(0)
+  })
+
+  test('useEffect with arrow expression body (no block)', () => {
+    const result = detectReactPatterns(`
+      import { useEffect } from 'react'
+      function App() {
+        useEffect(() => console.log('hi'), [])
+        return <div />
+      }
+    `)
+    const effectDiag = result.find((d) => d.code === 'use-effect-mount')
+    expect(effectDiag).toBeDefined()
+  })
+
+  test('useEffect with non-function callback', () => {
+    const result = detectReactPatterns(`
+      import { useEffect } from 'react'
+      function App() {
+        useEffect(handler, [])
+        return <div />
+      }
+    `)
+    const effectDiag = result.find((d) => d.code === 'use-effect-mount')
+    expect(effectDiag).toBeDefined()
+  })
+
+  test('useEffect with deps array (non-empty)', () => {
+    const result = detectReactPatterns(`
+      import { useEffect } from 'react'
+      function App() {
+        useEffect(() => { console.log(x) }, [x])
+        return <div />
+      }
+    `)
+    const effectDiag = result.find((d) => d.code === 'use-effect-deps')
+    expect(effectDiag).toBeDefined()
+  })
+
+  test('useEffect with no deps array', () => {
+    const result = detectReactPatterns(`
+      import { useEffect } from 'react'
+      function App() {
+        useEffect(() => { console.log('every render') })
+        return <div />
+      }
+    `)
+    const effectDiag = result.find((d) => d.code === 'use-effect-no-deps')
+    expect(effectDiag).toBeDefined()
+  })
+
+  test('useMemo with no compute function arg', () => {
+    const result = detectReactPatterns(`
+      import { useMemo } from 'react'
+      function App() {
+        const x = useMemo()
+        return <div>{x}</div>
+      }
+    `)
+    const memoDiag = result.find((d) => d.code === 'use-memo')
+    expect(memoDiag).toBeDefined()
+  })
+
+  test('useCallback with no callback function arg', () => {
+    const result = detectReactPatterns(`
+      import { useCallback } from 'react'
+      function App() {
+        const fn = useCallback()
+        return <div onClick={fn}>click</div>
+      }
+    `)
+    const cbDiag = result.find((d) => d.code === 'use-callback')
+    expect(cbDiag).toBeDefined()
+  })
+
+  test('useRef with no argument (null ref)', () => {
+    const result = detectReactPatterns(`
+      import { useRef } from 'react'
+      function App() {
+        const ref = useRef()
+        return <div ref={ref}>text</div>
+      }
+    `)
+    const refDiag = result.find((d) => d.code === 'use-ref-dom' || d.code === 'use-ref-box')
+    expect(refDiag).toBeDefined()
+  })
+
+  test('memo() with no argument', () => {
+    const result = detectReactPatterns(`
+      import { memo } from 'react'
+      const App = memo()
+    `)
+    const memoDiag = result.find((d) => d.code === 'memo-wrapper')
+    expect(memoDiag).toBeDefined()
+  })
+
+  test('array.map in JSX detected', () => {
+    const result = detectReactPatterns(`
+      function App() {
+        return <ul>{items.map(item => <li>{item}</li>)}</ul>
+      }
+    `)
+    const mapDiag = result.find((d) => d.code === 'array-map-jsx')
+    expect(mapDiag).toBeDefined()
+  })
+
+  test('array.map in JSX with no callback argument', () => {
+    const result = detectReactPatterns(`
+      function App() {
+        return <ul>{items.map()}</ul>
+      }
+    `)
+    const mapDiag = result.find((d) => d.code === 'array-map-jsx')
+    expect(mapDiag).toBeDefined()
+  })
+
+  test('react-router-dom import detected', () => {
+    const result = detectReactPatterns(`
+      import { useNavigate, useParams } from 'react-router-dom'
+    `)
+    expect(result.some((d) => d.code === 'react-router-import')).toBe(true)
+  })
+
+  test('react-dom/client import detected', () => {
+    const result = detectReactPatterns(`
+      import { createRoot } from 'react-dom/client'
+    `)
+    expect(result.some((d) => d.code === 'react-dom-import')).toBe(true)
+  })
+})
+
+describe('migrateReactCode — edge cases for branch coverage', () => {
+  test('migrates useState without arguments', () => {
+    const result = migrateReactCode(`
+      import { useState } from 'react'
+      function App() {
+        const [count, setCount] = useState()
+        return <div>{count}</div>
+      }
+    `)
+    expect(result.code).toContain('signal(undefined)')
+  })
+
+  test('migrates code with no existing imports (inserts at top)', () => {
+    const result = migrateReactCode(`const [x, setX] = useState(0)`)
+    expect(result.code).toBeDefined()
+  })
+
+  test('dangerouslySetInnerHTML without expression', () => {
+    const result = migrateReactCode(`
+      import React from 'react'
+      function App() {
+        return <div dangerouslySetInnerHTML />
+      }
+    `)
+    // Should not crash, attr without value
+    expect(result.code).toBeDefined()
+  })
+
+  test('dangerouslySetInnerHTML with non-object expression', () => {
+    const result = migrateReactCode(`
+      import React from 'react'
+      function App() {
+        return <div dangerouslySetInnerHTML={getHtml()} />
+      }
+    `)
+    // Non-object expression → not migrated
+    expect(result.code).toBeDefined()
+  })
+
+  test('className attribute migrated to class', () => {
+    const result = migrateReactCode(`
+      import React from 'react'
+      function App() {
+        return <div className="foo">text</div>
+      }
+    `)
+    expect(result.code).toContain('class=')
+    expect(result.changes.length).toBeGreaterThan(0)
+  })
+
+  test('source file with import from non-react module not rewritten', () => {
+    const result = migrateReactCode(`
+      import { signal } from '@pyreon/reactivity'
+      const x = signal(0)
+    `)
+    expect(result.changes).toHaveLength(0)
+  })
+
+  test('migrates useRef with non-null initial value (mutable box)', () => {
+    const result = migrateReactCode(`
+      import { useRef } from 'react'
+      function App() {
+        const ref = useRef(42)
+        return <div>{ref.current}</div>
+      }
+    `)
+    expect(result.code).toContain('signal(42)')
+  })
+
+  test('migrates useMemo', () => {
+    const result = migrateReactCode(`
+      import { useMemo } from 'react'
+      function App() {
+        const doubled = useMemo(() => count * 2, [count])
+        return <div>{doubled}</div>
+      }
+    `)
+    expect(result.code).toContain('computed(')
+  })
+
+  test('migrates useCallback', () => {
+    const result = migrateReactCode(`
+      import { useCallback } from 'react'
+      function App() {
+        const handleClick = useCallback(() => console.log('click'), [])
+        return <button onClick={handleClick}>click</button>
+      }
+    `)
+    // useCallback → plain function (not needed in Pyreon)
+    expect(result.changes.length).toBeGreaterThan(0)
+  })
+
+  test('migrates React.memo wrapper', () => {
+    const result = migrateReactCode(`
+      import React from 'react'
+      const App = React.memo(function App() {
+        return <div>hello</div>
+      })
+    `)
+    expect(result.changes.length).toBeGreaterThan(0)
+  })
+
+  test('migrates standalone memo() wrapper', () => {
+    const result = migrateReactCode(`
+      import { memo } from 'react'
+      const App = memo(function App() {
+        return <div>hello</div>
+      })
+    `)
+    expect(result.changes.length).toBeGreaterThan(0)
+  })
+
+  test('migrates code with no existing imports (inserts at beginning)', () => {
+    // No import statement in the source — lastImportEnd === 0 → line 926 false branch
+    const result = migrateReactCode(`
+      const [count, setCount] = useState(0)
+      const x = useMemo(() => count * 2)
+    `)
+    // Should insert pyreon imports at the top
+    expect(result.code).toContain('import {')
+    expect(result.code).toContain('@pyreon/')
+  })
+
+  test('migrates dangerouslySetInnerHTML with __html property', () => {
+    const result = migrateReactCode(`
+      import React from 'react'
+      function App() {
+        return <div dangerouslySetInnerHTML={{ __html: '<b>bold</b>' }} />
+      }
+    `)
+    expect(result.code).toContain('innerHTML')
+  })
+
+  test('migrates className on JSX elements', () => {
+    const result = migrateReactCode(`
+      import React from 'react'
+      function App() {
+        return <div className="foo"><span className="bar">text</span></div>
+      }
+    `)
+    expect(result.code).toContain('class=')
+    expect(result.changes.length).toBeGreaterThanOrEqual(2)
+  })
+
+  test('migrates htmlFor on label elements', () => {
+    const result = migrateReactCode(`
+      import React from 'react'
+      function App() {
+        return <label htmlFor="name">Name</label>
+      }
+    `)
+    expect(result.code).toContain('for=')
+  })
+
+  test('migrates useEffect with cleanup function', () => {
+    const result = migrateReactCode(`
+      import { useEffect } from 'react'
+      function App() {
+        useEffect(() => {
+          const handler = () => {}
+          window.addEventListener('resize', handler)
+          return () => window.removeEventListener('resize', handler)
+        }, [])
+        return <div />
+      }
+    `)
+    expect(result.code).toContain('onMount')
+  })
+})

package/src/tests/runtime/control-flow.test.ts

@@ -0,0 +1,159 @@
+// @vitest-environment happy-dom
+/// <reference lib="dom" />
+import { For, h, Show } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { describe, expect, it } from 'vitest'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+
+/**
+ * Compiler-runtime tests — control-flow primitives.
+ *
+ * These tests verify `<For>` and `<Show>` integrate correctly with the
+ * Pyreon mount path. They use direct `h()` calls instead of JSX because
+ * the harness's `compileAndMount` runs only the template-optimization
+ * pass of `@pyreon/compiler` — the bundler-level JSX → `h()` transform
+ * (normally done by Vite's esbuild) does NOT run in the harness, so JSX
+ * containing components like `<For>` would be left raw and unparseable.
+ *
+ * `<Match>`, `<Suspense>`, `<ErrorBoundary>` are deferred to Phase C1
+ * because they need real Chromium for the async / boundary shapes.
+ */
+
+describe('compiler-runtime — control flow (h() form)', () => {
+  it('<For> renders each item and reacts to signal updates', async () => {
+    const items = signal([
+      { id: 1, name: 'a' },
+      { id: 2, name: 'b' },
+    ])
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(For, {
+          each: items,
+          by: (i: { id: number; name: string }) => i.id,
+          children: (i: { name: string }) => h('span', null, i.name),
+        }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.querySelectorAll('span').length).toBe(2)
+    expect(root.textContent).toBe('ab')
+    items.set([
+      { id: 1, name: 'a' },
+      { id: 2, name: 'b' },
+      { id: 3, name: 'c' },
+    ])
+    await flush()
+    expect(root.querySelectorAll('span').length).toBe(3)
+    expect(root.textContent).toBe('abc')
+    unmount()
+  })
+
+  it('<For> handles removal correctly', async () => {
+    const items = signal([
+      { id: 1, name: 'a' },
+      { id: 2, name: 'b' },
+      { id: 3, name: 'c' },
+    ])
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(For, {
+          each: items,
+          by: (i: { id: number; name: string }) => i.id,
+          children: (i: { name: string }) => h('span', null, i.name),
+        }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.querySelectorAll('span').length).toBe(3)
+    items.set([{ id: 2, name: 'b' }])
+    await flush()
+    expect(root.querySelectorAll('span').length).toBe(1)
+    expect(root.textContent).toBe('b')
+    unmount()
+  })
+
+  it('<Show> conditionally renders based on signal', async () => {
+    const visible = signal(true)
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(Show, { when: () => visible(), children: h('span', { id: 'x' }, 'visible') }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.querySelector('#x')).not.toBeNull()
+    visible.set(false)
+    await flush()
+    expect(root.querySelector('#x')).toBeNull()
+    visible.set(true)
+    await flush()
+    expect(root.querySelector('#x')).not.toBeNull()
+    unmount()
+  })
+
+  it('<Show> with fallback renders fallback when condition is false', async () => {
+    const flag = signal(false)
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(Show, {
+          when: () => flag(),
+          fallback: h('span', { id: 'fb' }, 'fallback'),
+          children: h('span', { id: 'x' }, 'visible'),
+        }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.querySelector('#fb')).not.toBeNull()
+    expect(root.querySelector('#x')).toBeNull()
+    flag.set(true)
+    await flush()
+    expect(root.querySelector('#fb')).toBeNull()
+    expect(root.querySelector('#x')).not.toBeNull()
+    unmount()
+  })
+
+  it('<Show> with value prop (not accessor) accepts boolean', () => {
+    // Per #352's `<Show>` defensive normalization fix — `when` accepts
+    // both `() => boolean` accessor AND raw boolean (for static cases +
+    // signal auto-call edge case).
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(Show, { when: true, children: h('span', { id: 'x' }, 'on') }),
+      ),
+    )
+    expect(container.querySelector('#x')).not.toBeNull()
+    unmount()
+  })
+
+  it('nested control flow: <Show> inside <For>', async () => {
+    const items = signal([
+      { id: 1, name: 'a', visible: true },
+      { id: 2, name: 'b', visible: false },
+      { id: 3, name: 'c', visible: true },
+    ])
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(For, {
+          each: items,
+          by: (i: { id: number }) => i.id,
+          children: (i: { name: string; visible: boolean }) =>
+            h(Show, { when: () => i.visible, children: h('span', null, i.name) }),
+        }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.textContent).toBe('ac')
+    unmount()
+  })
+})

package/src/tests/runtime/dom-properties.test.ts

@@ -0,0 +1,138 @@
+// @vitest-environment happy-dom
+/// <reference lib="dom" />
+import { signal } from '@pyreon/reactivity'
+import { describe, expect, it } from 'vitest'
+import { flush } from '@pyreon/test-utils/browser'
+import { compileAndMount } from './harness'
+
+/**
+ * Compiler-runtime tests — DOM-property assignment.
+ *
+ * The #352 DOM-property bug used `setAttribute("value", v)` instead of
+ * `el.value = v` for IDL properties whose live value diverges from the
+ * content attribute. The fix added a `DOM_PROPS` set covering: value,
+ * checked, selected, disabled, multiple, readOnly, indeterminate. This
+ * file pins down each property + asserts the compiled output uses
+ * property assignment so the live state reflects updates correctly.
+ *
+ * Note: happy-dom's `.value` getter follows the attribute even in
+ * static cases, so for `value` specifically the assertion verifies
+ * the post-update read works (which would also work via setAttribute
+ * in happy-dom — the real differentiator is in real Chromium after a
+ * user types). For `checked` / `disabled` / etc., happy-dom DOES
+ * differentiate property vs attribute, so those assertions are robust.
+ */
+
+describe('compiler-runtime — DOM properties', () => {
+  it('value property reflects signal updates via .value', async () => {
+    const text = signal('initial')
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" value={() => text()} /></div>`,
+      { text },
+    )
+    const input = container.querySelector<HTMLInputElement>('#i')!
+    expect(input.value).toBe('initial')
+    text.set('updated')
+    await flush()
+    expect(input.value).toBe('updated')
+    text.set('')
+    await flush()
+    expect(input.value).toBe('')
+    unmount()
+  })
+
+  it('checked property reflects via .checked (not boolean attribute)', async () => {
+    const isOn = signal(true)
+    const { container, unmount } = compileAndMount(
+      `<div><input id="c" type="checkbox" checked={() => isOn()} /></div>`,
+      { isOn },
+    )
+    const cb = container.querySelector<HTMLInputElement>('#c')!
+    expect(cb.checked).toBe(true)
+    isOn.set(false)
+    await flush()
+    expect(cb.checked).toBe(false)
+    isOn.set(true)
+    await flush()
+    expect(cb.checked).toBe(true)
+    unmount()
+  })
+
+  it('disabled property reflects via .disabled', async () => {
+    const off = signal(false)
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" disabled={() => off()}>x</button></div>`,
+      { off },
+    )
+    const btn = container.querySelector<HTMLButtonElement>('#b')!
+    expect(btn.disabled).toBe(false)
+    off.set(true)
+    await flush()
+    expect(btn.disabled).toBe(true)
+    off.set(false)
+    await flush()
+    expect(btn.disabled).toBe(false)
+    unmount()
+  })
+
+  it('selected on <option> reflects via .selected', async () => {
+    // Need a sibling option so the browser's "at least one option must
+    // be selected" auto-selection doesn't pick our option after we
+    // unselect it.
+    const sel = signal(false)
+    const { container, unmount } = compileAndMount(
+      `<div><select><option>first</option><option id="o" selected={() => sel()}>a</option></select></div>`,
+      { sel },
+    )
+    const opt = container.querySelector<HTMLOptionElement>('#o')!
+    expect(opt.selected).toBe(false)
+    sel.set(true)
+    await flush()
+    expect(opt.selected).toBe(true)
+    unmount()
+  })
+
+  it('multiple on <select> reflects via .multiple', async () => {
+    const multi = signal(true)
+    const { container, unmount } = compileAndMount(
+      `<div><select id="s" multiple={() => multi()}><option>a</option></select></div>`,
+      { multi },
+    )
+    const sel = container.querySelector<HTMLSelectElement>('#s')!
+    expect(sel.multiple).toBe(true)
+    multi.set(false)
+    await flush()
+    expect(sel.multiple).toBe(false)
+    unmount()
+  })
+
+  it('readOnly on <input> reflects via .readOnly', async () => {
+    const ro = signal(false)
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" readOnly={() => ro()} /></div>`,
+      { ro },
+    )
+    const input = container.querySelector<HTMLInputElement>('#i')!
+    expect(input.readOnly).toBe(false)
+    ro.set(true)
+    await flush()
+    expect(input.readOnly).toBe(true)
+    unmount()
+  })
+
+  it('non-DOM-prop attributes still go through setAttribute', async () => {
+    // `placeholder` is a real HTML attribute, not a DOM IDL property
+    // that diverges. Should still flow through setAttribute (not break).
+    const placeholder = signal('type here')
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" placeholder={() => placeholder()} /></div>`,
+      { placeholder },
+    )
+    const input = container.querySelector<HTMLInputElement>('#i')!
+    expect(input.getAttribute('placeholder')).toBe('type here')
+    placeholder.set('changed')
+    await flush()
+    expect(input.getAttribute('placeholder')).toBe('changed')
+    unmount()
+  })
+})