@pyreon/compiler 0.14.0 → 0.16.0

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

@@ -328,4 +328,300 @@ 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([])
+    })
+  })
+
+  describe('island-never-with-registry-entry', () => {
+    it('flags a hydrateIslands key matching a hydrate: "never" island declaration', () => {
+      const code = `
+        import { island } from '@pyreon/server'
+        import { hydrateIslands } from '@pyreon/server/client'
+        export const StaticBadge = island(() => import('./StaticBadge'), {
+          name: 'StaticBadge',
+          hydrate: 'never',
+        })
+        hydrateIslands({
+          StaticBadge: () => import('./StaticBadge'),
+        })
+      `
+      const diags = detectPyreonPatterns(code)
+      const hits = diags.filter((d) => d.code === 'island-never-with-registry-entry')
+      expect(hits).toHaveLength(1)
+      expect(hits[0]!.message).toContain('StaticBadge')
+      expect(hits[0]!.message).toContain("'never'")
+    })
+
+    it('does NOT flag a hydrateIslands key for a non-never island', () => {
+      const code = `
+        import { island } from '@pyreon/server'
+        import { hydrateIslands } from '@pyreon/server/client'
+        export const Counter = island(() => import('./Counter'), {
+          name: 'Counter',
+          hydrate: 'load',
+        })
+        hydrateIslands({
+          Counter: () => import('./Counter'),
+        })
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'island-never-with-registry-entry')).toEqual([])
+    })
+
+    it('does NOT flag a never-island when no hydrateIslands call appears', () => {
+      const code = `
+        import { island } from '@pyreon/server'
+        export const StaticBadge = island(() => import('./StaticBadge'), {
+          name: 'StaticBadge',
+          hydrate: 'never',
+        })
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'island-never-with-registry-entry')).toEqual([])
+    })
+
+    it('does NOT flag when hydrateIslands omits never-strategy islands (canonical)', () => {
+      const code = `
+        import { island } from '@pyreon/server'
+        import { hydrateIslands } from '@pyreon/server/client'
+        export const Counter = island(() => import('./Counter'), {
+          name: 'Counter',
+          hydrate: 'load',
+        })
+        export const StaticBadge = island(() => import('./StaticBadge'), {
+          name: 'StaticBadge',
+          hydrate: 'never',
+        })
+        hydrateIslands({
+          Counter: () => import('./Counter'),
+          // StaticBadge intentionally omitted
+        })
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'island-never-with-registry-entry')).toEqual([])
+    })
+
+    it('flags multiple never-islands registered in the same hydrateIslands call', () => {
+      const code = `
+        import { island } from '@pyreon/server'
+        import { hydrateIslands } from '@pyreon/server/client'
+        export const A = island(() => import('./A'), { name: 'A', hydrate: 'never' })
+        export const B = island(() => import('./B'), { name: 'B', hydrate: 'never' })
+        hydrateIslands({
+          A: () => import('./A'),
+          B: () => import('./B'),
+        })
+      `
+      const diags = detectPyreonPatterns(code)
+      const hits = diags.filter((d) => d.code === 'island-never-with-registry-entry')
+      expect(hits).toHaveLength(2)
+      expect(hits.map((h) => h.message).join('|')).toContain('"A"')
+      expect(hits.map((h) => h.message).join('|')).toContain('"B"')
+    })
+
+    it('handles string-literal property keys in hydrateIslands', () => {
+      const code = `
+        import { island } from '@pyreon/server'
+        import { hydrateIslands } from '@pyreon/server/client'
+        export const X = island(() => import('./X'), { name: 'X', hydrate: 'never' })
+        hydrateIslands({
+          'X': () => import('./X'),
+        })
+      `
+      const diags = detectPyreonPatterns(code)
+      expect(
+        diags.filter((d) => d.code === 'island-never-with-registry-entry'),
+      ).toHaveLength(1)
+    })
+
+    it('does NOT flag non-string `hydrate` values (variable indirection)', () => {
+      const code = `
+        import { island } from '@pyreon/server'
+        import { hydrateIslands } from '@pyreon/server/client'
+        const STRATEGY = 'never'
+        export const X = island(() => import('./X'), { name: 'X', hydrate: STRATEGY })
+        hydrateIslands({
+          X: () => import('./X'),
+        })
+      `
+      // The detector intentionally only recognizes string-literal hydrate
+      // values — variable indirection takes us past the static-detection
+      // surface into pyreon doctor --check-islands territory.
+      const diags = detectPyreonPatterns(code)
+      expect(diags.filter((d) => d.code === 'island-never-with-registry-entry')).toEqual([])
+    })
+
+    it('reports `fixable: false` (no auto-fix; manual edit required)', () => {
+      const code = `
+        import { island } from '@pyreon/server'
+        import { hydrateIslands } from '@pyreon/server/client'
+        export const X = island(() => import('./X'), { name: 'X', hydrate: 'never' })
+        hydrateIslands({
+          X: () => import('./X'),
+        })
+      `
+      const diags = detectPyreonPatterns(code)
+      const hit = diags.find((d) => d.code === 'island-never-with-registry-entry')
+      expect(hit).toBeDefined()
+      expect(hit!.fixable).toBe(false)
+    })
+
+    it('hasPyreonPatterns regex pre-filter recognizes the never-strategy form', () => {
+      expect(
+        hasPyreonPatterns(`island(() => import('./X'), { name: 'X', hydrate: 'never' })`),
+      ).toBe(true)
+    })
+  })
 })

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()
+  })
+})