@pyreon/compiler 0.13.1 → 0.15.0

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