@pyreon/compiler 0.14.0 → 0.16.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()
+  })
+})

package/src/tests/ssg-audit.test.ts

@@ -0,0 +1,402 @@
+/**
+ * Fixture-based tests for `auditSsg` (M3.4 of the SSG roadmap).
+ *
+ * Each finding type gets a parallel pair:
+ *  - "broken" fixture → finding fires
+ *  - "fixed" fixture → no finding fires
+ *
+ * Bisect-verified by removing the detector body and asserting the
+ * broken-shape test fails.
+ */
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { dirname, join } from 'node:path'
+import { auditSsg, formatSsgAudit, type SsgFindingCode } from '../ssg-audit'
+
+interface Fixture {
+  root: string
+  write: (relPath: string, body: string) => void
+  cleanup: () => void
+}
+
+function makeFixture(): Fixture {
+  const root = mkdtempSync(join(tmpdir(), 'pyreon-ssg-audit-fixture-'))
+  mkdirSync(join(root, 'packages'), { recursive: true })
+  return {
+    root,
+    write: (relPath, body) => {
+      const full = join(root, relPath)
+      mkdirSync(dirname(full), { recursive: true })
+      writeFileSync(full, body)
+    },
+    cleanup: () => rmSync(root, { recursive: true, force: true }),
+  }
+}
+
+function findingCodes(result: ReturnType<typeof auditSsg>): SsgFindingCode[] {
+  return result.findings.map((f) => f.code)
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Discovery
+// ═══════════════════════════════════════════════════════════════════════════════
+
+describe('auditSsg — discovery', () => {
+  it('returns empty results for a directory with no routes/ subdir', () => {
+    const empty = mkdtempSync(join(tmpdir(), 'pyreon-ssg-audit-empty-'))
+    try {
+      const result = auditSsg(empty)
+      expect(result.findings).toEqual([])
+      expect(result.summary.routesScanned).toBe(0)
+    } finally {
+      rmSync(empty, { recursive: true, force: true })
+    }
+  })
+
+  it('counts route files + dynamic routes + revalidate exports in summary', () => {
+    const fixture = makeFixture()
+    try {
+      // Plain page — no [param], no revalidate.
+      fixture.write('examples/myapp/src/routes/_layout.tsx', 'export const layout = () => null')
+      fixture.write('examples/myapp/src/routes/index.tsx', 'export default () => null')
+      fixture.write('examples/myapp/src/routes/about.tsx', 'export default () => null')
+      // Dynamic route with getStaticPaths + revalidate
+      fixture.write(
+        'examples/myapp/src/routes/posts/[id].tsx',
+        `export const getStaticPaths = () => [{ params: { id: '1' } }]
+export const revalidate = 60
+export default () => null`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(result.summary.routesScanned).toBe(4)
+      expect(result.summary.dynamicRoutes).toBe(1)
+      expect(result.summary.revalidateExports).toBe(1)
+    } finally {
+      fixture.cleanup()
+    }
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 1) 404-outside-layout-dir
+// ═══════════════════════════════════════════════════════════════════════════════
+
+describe('auditSsg — 404-outside-layout-dir', () => {
+  it('FIRES when _404.tsx has no co-located _layout.tsx', () => {
+    const fixture = makeFixture()
+    try {
+      // Broken shape: _404.tsx alone in the routes dir, no _layout.tsx.
+      fixture.write('examples/myapp/src/routes/_404.tsx', 'export default () => null')
+      fixture.write('examples/myapp/src/routes/index.tsx', 'export default () => null')
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).toContain('404-outside-layout-dir')
+      const finding = result.findings.find((f) => f.code === '404-outside-layout-dir')!
+      expect(finding.location.relPath).toContain('_404.tsx')
+      expect(finding.message).toContain('_layout.tsx')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('FIRES for _not-found.tsx (alternate filename)', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write('examples/myapp/src/routes/_not-found.tsx', 'export default () => null')
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).toContain('404-outside-layout-dir')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('does NOT fire when _404.tsx is co-located with _layout.tsx', () => {
+    const fixture = makeFixture()
+    try {
+      // Fixed shape: same directory contains both.
+      fixture.write('examples/myapp/src/routes/_layout.tsx', 'export const layout = () => null')
+      fixture.write('examples/myapp/src/routes/_404.tsx', 'export default () => null')
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('404-outside-layout-dir')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 2) dynamic-route-missing-get-static-paths
+// ═══════════════════════════════════════════════════════════════════════════════
+
+describe('auditSsg — dynamic-route-missing-get-static-paths', () => {
+  it('FIRES for [id].tsx without getStaticPaths', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/posts/[id].tsx',
+        'export default () => null',
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).toContain('dynamic-route-missing-get-static-paths')
+      const finding = result.findings.find(
+        (f) => f.code === 'dynamic-route-missing-get-static-paths',
+      )!
+      expect(finding.location.relPath).toContain('[id].tsx')
+      expect(finding.message).toContain('getStaticPaths')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('FIRES for catch-all [...slug].tsx without getStaticPaths', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/blog/[...slug].tsx',
+        'export default () => null',
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).toContain('dynamic-route-missing-get-static-paths')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('does NOT fire for [id].tsx WITH `export const getStaticPaths`', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/posts/[id].tsx',
+        `export const getStaticPaths = () => [{ params: { id: '1' } }]
+export default () => null`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('dynamic-route-missing-get-static-paths')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('does NOT fire for [id].tsx WITH `export async function getStaticPaths`', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/posts/[id].tsx',
+        `export async function getStaticPaths() { return [{ params: { id: '1' } }] }
+export default () => null`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('dynamic-route-missing-get-static-paths')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('does NOT fire for static routes (no [param] in filename)', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write('examples/myapp/src/routes/about.tsx', 'export default () => null')
+      fixture.write('examples/myapp/src/routes/index.tsx', 'export default () => null')
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('dynamic-route-missing-get-static-paths')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('does NOT fire for _layout / _error / _loading / _404 even with brackets in name', () => {
+    // Defensive: special files with bracketed names (unlikely but
+    // possible — `_layout.[locale].tsx`) shouldn't be flagged.
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/_layout.tsx',
+        'export const layout = () => null',
+      )
+      fixture.write('examples/myapp/src/routes/_404.tsx', 'export default () => null')
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('dynamic-route-missing-get-static-paths')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  // M3.B follow-up — false-positive class surfaced by cpa-pw-blog's
+  // `api/echo/[...path].ts` (real-world API route with bracket
+  // filename). API routes are runtime-only by definition.
+  it('does NOT fire for API routes under routes/api/ (path-based skip)', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/api/echo/[...path].ts',
+        `export function GET({ params }) {
+  return new Response(\`segments: \${params.path}\`)
+}`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('dynamic-route-missing-get-static-paths')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('does NOT fire for files without `export default` outside api/ (export-shape skip)', () => {
+    // Method-handler-only file outside api/ — covers users who put API
+    // routes somewhere non-conventional. Page routes structurally
+    // require a default export, so absence is a reliable signal.
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/webhook/[id].ts',
+        `export function POST({ request }) {
+  return new Response('ok')
+}`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('dynamic-route-missing-get-static-paths')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('STILL fires on page routes (with default export) missing getStaticPaths', () => {
+    // Sanity — the export-shape skip doesn't accidentally silence the
+    // rule on legitimate page routes.
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/posts/[id].tsx',
+        `export const someHelper = 1
+export default function Post() { return null }`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).toContain('dynamic-route-missing-get-static-paths')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 3) non-literal-revalidate-export
+// ═══════════════════════════════════════════════════════════════════════════════
+
+describe('auditSsg — non-literal-revalidate-export', () => {
+  it('FIRES for `export const revalidate = TTL` (identifier reference)', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/posts/index.tsx',
+        `const TTL = 60
+export const revalidate = TTL
+export default () => null`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).toContain('non-literal-revalidate-export')
+      const finding = result.findings.find((f) => f.code === 'non-literal-revalidate-export')!
+      expect(finding.message).toContain('NUMERIC LITERAL')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('FIRES for `export const revalidate = 30 * 60` (arithmetic)', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/posts/index.tsx',
+        `export const revalidate = 30 * 60
+export default () => null`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).toContain('non-literal-revalidate-export')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('does NOT fire for `export const revalidate = 60` (numeric literal)', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/posts/index.tsx',
+        `export const revalidate = 60
+export default () => null`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('non-literal-revalidate-export')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('does NOT fire for `export const revalidate = false` (false keyword)', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write(
+        'examples/myapp/src/routes/posts/index.tsx',
+        `export const revalidate = false
+export default () => null`,
+      )
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('non-literal-revalidate-export')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('does NOT fire when there is no revalidate export at all', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write('examples/myapp/src/routes/about.tsx', 'export default () => null')
+      const result = auditSsg(fixture.root)
+      expect(findingCodes(result)).not.toContain('non-literal-revalidate-export')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Formatter
+// ═══════════════════════════════════════════════════════════════════════════════
+
+describe('formatSsgAudit', () => {
+  it('renders a clean header when there are no findings', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write('examples/myapp/src/routes/index.tsx', 'export default () => null')
+      const result = auditSsg(fixture.root)
+      const output = formatSsgAudit(result)
+      expect(output).toContain('SSG audit')
+      expect(output).toContain('No SSG / ISR issues found')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('renders each finding with relPath:line:col + actionable message', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write('examples/myapp/src/routes/_404.tsx', 'export default () => null')
+      const result = auditSsg(fixture.root)
+      const output = formatSsgAudit(result)
+      expect(output).toContain('[404-outside-layout-dir]')
+      expect(output).toContain('_404.tsx')
+      expect(output).toContain('_layout.tsx')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+
+  it('mentions the --json flag for machine-readable output', () => {
+    const fixture = makeFixture()
+    try {
+      fixture.write('examples/myapp/src/routes/posts/[id].tsx', 'export default () => null')
+      const result = auditSsg(fixture.root)
+      const output = formatSsgAudit(result)
+      expect(output).toContain('--json')
+    } finally {
+      fixture.cleanup()
+    }
+  })
+})