@pyreon/compiler 0.14.0 → 0.15.0

package/src/tests/runtime/pr-352-shapes.test.ts

@@ -0,0 +1,121 @@
+// @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 regression tests for the 4 bug shapes shipped in PR #352.
+ *
+ * Each test was bisect-verifiable when the corresponding compiler fix was
+ * reverted. They are the proof-of-approach for the harness — small,
+ * focused, observable-behavior assertions against compiled JSX in real
+ * Chromium. Phase B2 expands this set to ~50 representative shapes.
+ */
+
+describe('compiler-runtime — PR #352 bug shapes (real Chromium)', () => {
+  // ── Bug 1: event-name casing ────────────────────────────────────────
+  // Before #352 the compiler emitted `__ev_keyDown` (camelCase) instead
+  // of `__ev_keydown`. The browser dispatches lowercase event names
+  // exclusively, so multi-word handlers never fired. With the fix in
+  // place the keydown event correctly invokes the handler.
+  it('multi-word event names are lowercased so browser dispatch hits them', async () => {
+    let pressedKey = ''
+    const handleKey = (e: KeyboardEvent) => {
+      pressedKey = e.key
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><input id="ev" onKeyDown={handleKey} /></div>`,
+      { handleKey },
+    )
+    const input = container.querySelector<HTMLInputElement>('#ev')!
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    expect(pressedKey).toBe('Enter')
+    unmount()
+  })
+
+  // ── Bug 2: signal-method auto-call ──────────────────────────────────
+  // Before #352 the compiler auto-called bare signal references in JSX
+  // event handlers, rewriting `input.set(x)` to `input().set(x)`. Click
+  // handlers calling `signal.set(...)` silently failed (TypeError on
+  // string `.set`). With the fix in place the click correctly invokes
+  // the setter.
+  it('signal.method() in event handlers is NOT double-called', async () => {
+    const count = signal(0)
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" onClick={() => count.set(count() + 1)}>+</button></div>`,
+      { count },
+    )
+    const btn = container.querySelector<HTMLButtonElement>('#b')!
+    btn.click()
+    btn.click()
+    btn.click()
+    expect(count()).toBe(3)
+    unmount()
+  })
+
+  // ── Bug 3: JSX text/expression whitespace ───────────────────────────
+  // Before #352 same-line whitespace adjacent to expressions was
+  // stripped: `<p>doubled: {x}</p>` rendered "doubled:0" not
+  // "doubled: 0". With the fix in place (React/Babel
+  // cleanJSXElementLiteralChild algorithm) the trailing space survives.
+  it('same-line whitespace before an expression is preserved', async () => {
+    const x = signal(7)
+    const { container, unmount } = compileAndMount(
+      `<div><p id="p">doubled: {x()}</p></div>`,
+      { x },
+    )
+    const p = container.querySelector('#p')!
+    expect(p.textContent).toBe('doubled: 7')
+    x.set(42)
+    await flush()
+    expect(p.textContent).toBe('doubled: 42')
+    unmount()
+  })
+
+  // ── Bug 4a: DOM-property assignment (value) ─────────────────────────
+  // Before #352 the compiler emitted `setAttribute("value", v)` for
+  // input value. The HTML attribute and the live `.value` property
+  // diverge after the user types — clearing the signal then only reset
+  // the attribute, leaving stale text. With the fix in place the
+  // compiler emits `el.value = v` so the live property reflects.
+  it('input value uses the .value property (not setAttribute)', async () => {
+    const text = signal('hello')
+    const { container, unmount } = compileAndMount(
+      `<div><input id="t" value={() => text()} /></div>`,
+      { text },
+    )
+    const input = container.querySelector<HTMLInputElement>('#t')!
+    expect(input.value).toBe('hello')
+    text.set('world')
+    await flush()
+    expect(input.value).toBe('world')
+    text.set('')
+    await flush()
+    expect(input.value).toBe('')
+    unmount()
+  })
+
+  // ── Bug 4b: DOM-property assignment (checked) ───────────────────────
+  // Before #352 the compiler used `setAttribute("checked", ...)` for
+  // checkbox state. Presence of the attribute means "checked" in HTML
+  // regardless of value, so toggling a signal didn't uncheck the box.
+  // With the fix in place the compiler emits `el.checked = v`.
+  it('checkbox checked uses the .checked property (not setAttribute)', async () => {
+    const done = signal(true)
+    const { container, unmount } = compileAndMount(
+      `<div><input id="c" type="checkbox" checked={() => done()} /></div>`,
+      { done },
+    )
+    const cb = container.querySelector<HTMLInputElement>('#c')!
+    expect(cb.checked).toBe(true)
+    done.set(false)
+    await flush()
+    expect(cb.checked).toBe(false)
+    done.set(true)
+    await flush()
+    expect(cb.checked).toBe(true)
+    unmount()
+  })
+})

package/src/tests/runtime/reactive-props.test.ts

@@ -0,0 +1,81 @@
+// @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 — reactive props inlining.
+ *
+ * The compiler auto-detects `const` variables derived from `props.*` /
+ * `splitProps` results and inlines them at JSX use sites for
+ * fine-grained reactivity. `const x = props.y ?? 'default'; return
+ * <div>{x}</div>` compiles to `_bind(() => { t.data = (props.y ?? 'default') })`.
+ *
+ * This file pins the contract: the inlined expression really IS reactive
+ * at the call site — changing the underlying signal updates the DOM
+ * without re-rendering the component.
+ */
+
+describe('compiler-runtime — reactive props inlining', () => {
+  it('text content from a signal updates reactively', async () => {
+    const value = signal('initial')
+    const { container, unmount } = compileAndMount(
+      `<div><p id="p">{value()}</p></div>`,
+      { value },
+    )
+    expect(container.querySelector('#p')!.textContent).toBe('initial')
+    value.set('updated')
+    await flush()
+    expect(container.querySelector('#p')!.textContent).toBe('updated')
+    unmount()
+  })
+
+  it('class attribute updates reactively', async () => {
+    const cls = signal('a')
+    const { container, unmount } = compileAndMount(
+      `<div><span id="s" class={cls()}>x</span></div>`,
+      { cls },
+    )
+    expect(container.querySelector('#s')!.className).toBe('a')
+    cls.set('b c')
+    await flush()
+    expect(container.querySelector('#s')!.className).toBe('b c')
+    unmount()
+  })
+
+  it('expression with multiple signals tracks all dependencies', async () => {
+    const a = signal('hello')
+    const b = signal('world')
+    const { container, unmount } = compileAndMount(
+      `<div><p id="p">{a() + ' ' + b()}</p></div>`,
+      { a, b },
+    )
+    expect(container.querySelector('#p')!.textContent).toBe('hello world')
+    a.set('hi')
+    await flush()
+    expect(container.querySelector('#p')!.textContent).toBe('hi world')
+    b.set('there')
+    await flush()
+    expect(container.querySelector('#p')!.textContent).toBe('hi there')
+    unmount()
+  })
+
+  it('nested signal access in template literal updates reactively', async () => {
+    const name = signal('Alice')
+    const count = signal(3)
+    const { container, unmount } = compileAndMount(
+      `<div><p id="p">{` + '`${name()} has ${count()} items`' + `}</p></div>`,
+      { name, count },
+    )
+    expect(container.querySelector('#p')!.textContent).toBe('Alice has 3 items')
+    count.set(7)
+    await flush()
+    expect(container.querySelector('#p')!.textContent).toBe('Alice has 7 items')
+    name.set('Bob')
+    await flush()
+    expect(container.querySelector('#p')!.textContent).toBe('Bob has 7 items')
+    unmount()
+  })
+})

package/src/tests/runtime/signals.test.ts

@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+/// <reference lib="dom" />
+import { computed, signal } from '@pyreon/reactivity'
+import { describe, expect, it } from 'vitest'
+import { flush } from '@pyreon/test-utils/browser'
+import { compileAndMount } from './harness'
+
+/**
+ * Compiler-runtime tests — signal patterns in JSX.
+ *
+ * The #352 signal-method auto-call bug surfaced because the compiler
+ * couldn't tell `signal.set(x)` (call on the signal as object) from
+ * `signal()` (call the signal to read). The fix added scope-aware
+ * detection. This file pins down the matrix: bare reference, function
+ * call, member call, accessor wrapper, computed — in different positions.
+ */
+
+describe('compiler-runtime — signals', () => {
+  it('signal in text position is reactive', async () => {
+    const name = signal('alice')
+    const { container, unmount } = compileAndMount(
+      `<div><span id="s">{name()}</span></div>`,
+      { name },
+    )
+    expect(container.querySelector('#s')!.textContent).toBe('alice')
+    name.set('bob')
+    await flush()
+    expect(container.querySelector('#s')!.textContent).toBe('bob')
+    unmount()
+  })
+
+  it('signal.method() in event handler does not auto-call signal', () => {
+    const x = signal(0)
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" onClick={() => x.set(99)}>set</button></div>`,
+      { x },
+    )
+    container.querySelector<HTMLButtonElement>('#b')!.click()
+    expect(x()).toBe(99)
+    unmount()
+  })
+
+  it('signal.update() in event handler does not auto-call signal', () => {
+    const x = signal(10)
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" onClick={() => x.update((v) => v * 2)}>x2</button></div>`,
+      { x },
+    )
+    const btn = container.querySelector<HTMLButtonElement>('#b')!
+    btn.click()
+    btn.click()
+    expect(x()).toBe(40)
+    unmount()
+  })
+
+  it('signal.peek() in event handler does not auto-call signal', () => {
+    const x = signal(7)
+    const out = { value: 0 }
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" onClick={() => { out.value = x.peek() }}>read</button></div>`,
+      { x, out },
+    )
+    container.querySelector<HTMLButtonElement>('#b')!.click()
+    expect(out.value).toBe(7)
+    unmount()
+  })
+
+  it('computed value reflected in DOM updates when source changes', async () => {
+    const a = signal(2)
+    const b = signal(3)
+    const sum = computed(() => a() + b())
+    const { container, unmount } = compileAndMount(
+      `<div><span id="s">{sum()}</span></div>`,
+      { sum },
+    )
+    expect(container.querySelector('#s')!.textContent).toBe('5')
+    a.set(10)
+    await flush()
+    expect(container.querySelector('#s')!.textContent).toBe('13')
+    unmount()
+  })
+
+  it('explicit accessor wrapper preserves reactivity', async () => {
+    const x = signal('hi')
+    const { container, unmount } = compileAndMount(
+      `<div><span id="s">{() => x()}</span></div>`,
+      { x },
+    )
+    expect(container.querySelector('#s')!.textContent).toBe('hi')
+    x.set('hey')
+    await flush()
+    expect(container.querySelector('#s')!.textContent).toBe('hey')
+    unmount()
+  })
+
+  it('signal in attribute position is reactive', async () => {
+    const cls = signal('a')
+    const { container, unmount } = compileAndMount(
+      `<div><span id="s" class={cls()}>x</span></div>`,
+      { cls },
+    )
+    expect(container.querySelector('#s')!.className).toBe('a')
+    cls.set('b')
+    await flush()
+    expect(container.querySelector('#s')!.className).toBe('b')
+    unmount()
+  })
+
+  it('multiple signals on the same element track independently', async () => {
+    const txt = signal('hello')
+    const cls = signal('a')
+    const { container, unmount } = compileAndMount(
+      `<div><span id="s" class={cls()}>{txt()}</span></div>`,
+      { txt, cls },
+    )
+    const span = container.querySelector('#s')!
+    expect(span.textContent).toBe('hello')
+    expect(span.className).toBe('a')
+    txt.set('world')
+    await flush()
+    expect(span.textContent).toBe('world')
+    expect(span.className).toBe('a')
+    cls.set('b')
+    await flush()
+    expect(span.textContent).toBe('world')
+    expect(span.className).toBe('b')
+    unmount()
+  })
+})

package/src/tests/runtime/whitespace.test.ts

@@ -0,0 +1,106 @@
+// @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 — JSX text/expression whitespace handling.
+ *
+ * The #352 whitespace bug stripped same-line spaces adjacent to
+ * expressions: `<p>doubled: {x}</p>` rendered "doubled:0" instead of
+ * "doubled: 0". The fix implements React/Babel's
+ * `cleanJSXElementLiteralChild` algorithm. This file pins down the
+ * matrix: same-line text±expression, multi-line text, fragments,
+ * leading/trailing/internal whitespace.
+ */
+
+describe('compiler-runtime — JSX whitespace', () => {
+  it('preserves trailing space before expression on same line', async () => {
+    const x = signal(7)
+    const { container, unmount } = compileAndMount(
+      `<div><p id="p">doubled: {x()}</p></div>`,
+      { x },
+    )
+    expect(container.querySelector('#p')!.textContent).toBe('doubled: 7')
+    unmount()
+  })
+
+  // Regression: when an expression sits BETWEEN static text segments
+  // on the same line, the compiler used to append the dynamic text
+  // node to the parent's children AFTER all static text via
+  // `appendChild`. Whitespace was preserved correctly (#352), but
+  // positioning was wrong:
+  //   `<p>{x()} remaining</p>` → template `<p> remaining</p>` +
+  //   appended text → renders as " remaining3" instead of "3 remaining".
+  // Fix: extend `analyzeChildren.useMixed` to fire whenever ≥2 of
+  // {element, text, expression} are present (not just element+nonElement).
+  // Then placeholder-based positional mounting puts the dynamic text in
+  // the right slot via `replaceChild`.
+  it('preserves leading space after expression on same line', async () => {
+    const x = signal(3)
+    const { container, unmount } = compileAndMount(
+      `<div><p id="p">{x()} remaining</p></div>`,
+      { x },
+    )
+    expect(container.querySelector('#p')!.textContent).toBe('3 remaining')
+    unmount()
+  })
+
+  it('preserves spaces on BOTH sides of expression', async () => {
+    const x = signal('cat')
+    const { container, unmount } = compileAndMount(
+      `<div><p id="p">a {x()} b</p></div>`,
+      { x },
+    )
+    expect(container.querySelector('#p')!.textContent).toBe('a cat b')
+    unmount()
+  })
+
+  it('multi-line JSX with indentation collapses correctly', async () => {
+    const x = signal('inner')
+    // Multi-line JSX expression. Whitespace inside the JSX literal between
+    // <p> and {x()} is treated by React/Babel cleanJSX as "indentation"
+    // and collapses; same for between {x()} and </p>.
+    const { container, unmount } = compileAndMount(
+      `<div>
+        <p id="p">
+          {x()}
+        </p>
+      </div>`,
+      { x },
+    )
+    expect(container.querySelector('#p')!.textContent?.trim()).toBe('inner')
+    unmount()
+  })
+
+  it('reactive text updates without losing surrounding whitespace', async () => {
+    const x = signal(0)
+    const { container, unmount } = compileAndMount(
+      `<div><p id="p">count: {x()} items</p></div>`,
+      { x },
+    )
+    expect(container.querySelector('#p')!.textContent).toBe('count: 0 items')
+    x.set(42)
+    await flush()
+    expect(container.querySelector('#p')!.textContent).toBe('count: 42 items')
+    unmount()
+  })
+
+  it('reactive text at end of paragraph updates correctly', async () => {
+    // The expression-at-END shape works because the dynamic text node is
+    // appended to the parent — which happens to match the source order
+    // when there's no text after.
+    const x = signal(0)
+    const { container, unmount } = compileAndMount(
+      `<div><p id="p">count: {x()}</p></div>`,
+      { x },
+    )
+    expect(container.querySelector('#p')!.textContent).toBe('count: 0')
+    x.set(42)
+    await flush()
+    expect(container.querySelector('#p')!.textContent).toBe('count: 42')
+    unmount()
+  })
+})