@pyreon/zero 0.24.5 → 0.24.6

package/src/testing.ts

@@ -1,146 +0,0 @@
-import type { Middleware, MiddlewareContext } from '@pyreon/server'
-import type { ApiHandler, ApiRouteEntry } from './api-routes'
-import { createApiMiddleware } from './api-routes'
-
-// ─── Test helpers for Zero applications ─────────────────────────────────────
-
-/**
- * Create a mock MiddlewareContext for testing middleware.
- *
- * @example
- * import { createTestContext } from "@pyreon/zero/testing"
- *
- * const ctx = createTestContext("/api/posts", { method: "POST", body: { title: "Hello" } })
- * const result = await myMiddleware(ctx)
- */
-export function createTestContext(
-  path: string,
-  options: {
-    method?: string
-    headers?: Record<string, string>
-    body?: unknown
-  } = {},
-): MiddlewareContext {
-  const { method = 'GET', headers = {}, body } = options
-  const url = new URL(`http://localhost${path}`)
-
-  const requestHeaders: Record<string, string> = { ...headers }
-  let requestBody: string | undefined
-
-  if (body !== undefined) {
-    requestHeaders['Content-Type'] = 'application/json'
-    requestBody = JSON.stringify(body)
-  }
-
-  const req = new Request(url.toString(), {
-    method,
-    headers: requestHeaders,
-    ...(requestBody != null ? { body: requestBody } : {}),
-  })
-
-  return {
-    req,
-    url,
-    path,
-    headers: new Headers(),
-    locals: {},
-  }
-}
-
-/**
- * Test a middleware by running it with a mock context and returning
- * the result along with the response headers it set.
- *
- * @example
- * import { testMiddleware } from "@pyreon/zero/testing"
- *
- * const { response, headers } = await testMiddleware(
- *   corsMiddleware({ origin: "*" }),
- *   "/api/posts"
- * )
- * expect(headers.get("Access-Control-Allow-Origin")).toBe("*")
- */
-export async function testMiddleware(
-  middleware: Middleware,
-  path: string,
-  options: {
-    method?: string
-    headers?: Record<string, string>
-    body?: unknown
-  } = {},
-): Promise<{ response: Response | undefined; headers: Headers }> {
-  const ctx = createTestContext(path, options)
-  const response = (await middleware(ctx)) as Response | undefined
-  return { response, headers: ctx.headers }
-}
-
-/**
- * Create a test server for API routes. Returns a function that
- * accepts Request objects and dispatches to the correct handler.
- *
- * @example
- * import { createTestApiServer } from "@pyreon/zero/testing"
- *
- * const server = createTestApiServer([
- *   { pattern: "/api/posts", module: postsApi },
- *   { pattern: "/api/posts/:id", module: postByIdApi },
- * ])
- *
- * const response = await server.request("/api/posts")
- * expect(response.status).toBe(200)
- *
- * const data = await server.request("/api/posts", { method: "POST", body: { title: "Hi" } })
- * expect(data.status).toBe(201)
- */
-export function createTestApiServer(routes: ApiRouteEntry[]) {
-  const middleware = createApiMiddleware(routes)
-
-  return {
-    async request(
-      path: string,
-      options: {
-        method?: string
-        headers?: Record<string, string>
-        body?: unknown
-      } = {},
-    ): Promise<Response> {
-      const ctx = createTestContext(path, options)
-      const result = await middleware(ctx)
-      if (!result) {
-        return new Response('Not Found', { status: 404 })
-      }
-      return result
-    },
-  }
-}
-
-/**
- * Create a mock API handler for testing.
- * Records all calls and returns a configurable response.
- *
- * @example
- * import { createMockHandler } from "@pyreon/zero/testing"
- *
- * const handler = createMockHandler({ status: 200, body: { ok: true } })
- * // ... use handler in your API route module
- * expect(handler.calls).toHaveLength(1)
- * expect(handler.calls[0].params).toEqual({ id: "123" })
- */
-export function createMockHandler(
-  responseConfig: { status?: number; body?: unknown; headers?: Record<string, string> } = {},
-): ApiHandler & {
-  calls: Array<{ path: string; params: Record<string, string> }>
-} {
-  const { status = 200, body = null, headers = {} } = responseConfig
-  const calls: Array<{ path: string; params: Record<string, string> }> = []
-
-  const handler: ApiHandler = (ctx) => {
-    calls.push({ path: ctx.path, params: ctx.params })
-    return new Response(JSON.stringify(body), {
-      status,
-      headers: { 'Content-Type': 'application/json', ...headers },
-    })
-  }
-
-  return Object.assign(handler, { calls })
-}

package/src/theme.tsx

@@ -1,257 +0,0 @@
-import type { VNodeChild } from '@pyreon/core'
-import { onMount } from '@pyreon/core'
-import { effect, signal } from '@pyreon/reactivity'
-
-// Dev-mode counter sink — see packages/internals/perf-harness for contract.
-const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
-const _countSink = globalThis as { __pyreon_count__?: (name: string, n?: number) => void }
-
-// ─── Theme system ───────────────────────────────────────────────────────────
-//
-// Provides dark/light/system theme support with:
-// - System preference detection via matchMedia
-// - Persistent preference via localStorage
-// - No flash of wrong theme (inline script in HTML)
-// - Reactive theme signal for components
-
-export type Theme = 'light' | 'dark' | 'system'
-
-const STORAGE_KEY = 'zero-theme'
-
-/** Reactive theme signal. */
-export const theme = signal<Theme>('system')
-
-/**
- * Reactive signal tracking the OS color-scheme preference. Updated by the
- * `matchMedia('(prefers-color-scheme: dark)').change` event registered in
- * `initTheme`. Components reading `resolvedTheme()` subscribe to BOTH
- * `theme` and this signal, so a user toggling dark mode at the OS level
- * re-renders everything reactively — not just the `<html data-theme>`
- * attribute.
- *
- * SSR default is `_ssrDefault` (mutable via `setSSRThemeDefault`) so the
- * server-rendered theme can differ from the client's OS preference.
- */
-const _osPrefersDark = signal<boolean>(false)
-
-/** SSR fallback when system preference can't be detected. Default: 'light'. */
-let _ssrDefault: 'light' | 'dark' = 'light'
-
-/**
- * Set the default theme for SSR (when `matchMedia` is unavailable).
- * Call once at server startup before rendering.
- */
-export function setSSRThemeDefault(value: 'light' | 'dark'): void {
-  _ssrDefault = value
-}
-
-/**
- * Reactive read of the resolved theme. Subscribes to `theme` (explicit
- * user choice) and — when `theme === 'system'` — to `_osPrefersDark`
- * (OS color-scheme preference). Components using `resolvedTheme()`
- * inside JSX / effects / computeds re-render when either changes.
- */
-export function resolvedTheme(): 'light' | 'dark' {
-  const t = theme()
-  if (t === 'system') {
-    if (typeof window === 'undefined') return _ssrDefault
-    return _osPrefersDark() ? 'dark' : 'light'
-  }
-  return t
-}
-
-/** Toggle between light and dark. */
-export function toggleTheme() {
-  const current = resolvedTheme()
-  setTheme(current === 'dark' ? 'light' : 'dark')
-}
-
-/** Set theme explicitly. */
-export function setTheme(t: Theme) {
-  theme.set(t)
-  if (typeof document !== 'undefined') {
-    document.documentElement.dataset.theme = resolvedTheme()
-    try {
-      localStorage.setItem(STORAGE_KEY, t)
-    } catch {
-      // localStorage may not be available (SSR, private browsing)
-    }
-  }
-}
-
-// Refcount + shared-teardown for `initTheme()`. The first mount runs the
-// real setup (localStorage read + matchMedia listener + effect); subsequent
-// mounts (other ThemeToggles, or an explicit `initTheme()` call in a
-// layout alongside `<ThemeToggle>`) only bump the refcount. Each unmount
-// decrements; when the count returns to 0 the shared teardown runs.
-//
-// Pre-fix every `initTheme()` call ran its own `onMount(setup)` — N
-// mounted ThemeToggles → N matchMedia listeners + N effects, all writing
-// the SAME values to the SAME `document.documentElement.dataset.theme`.
-// Class D event-listener pile-up, real production case for any app with
-// header + footer ThemeToggle widgets.
-let _initRefCount = 0
-let _disposeShared: (() => void) | null = null
-
-function _setupShared(): () => void {
-  // Read persisted preference
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null
-    if (stored === 'light' || stored === 'dark' || stored === 'system') {
-      theme.set(stored)
-    }
-  } catch {
-    // localStorage may not be available
-  }
-
-  // Apply to document
-  document.documentElement.dataset.theme = resolvedTheme()
-
-  // Watch for system preference changes. Seed the signal from the
-  // current media-query state, then update reactively on each OS
-  // preference flip. Components reading `resolvedTheme()` pick up the
-  // change automatically (they subscribe to `_osPrefersDark` when
-  // `theme === 'system'`).
-  const mq = window.matchMedia('(prefers-color-scheme: dark)')
-  _osPrefersDark.set(mq.matches)
-  function onChange(e: MediaQueryListEvent) {
-    _osPrefersDark.set(e.matches)
-  }
-  mq.addEventListener('change', onChange)
-
-  // Re-apply when theme signal changes — updates data-theme + favicons
-  const dispose = effect(() => {
-    const mode = resolvedTheme()
-    document.documentElement.dataset.theme = mode
-
-    // Swap favicon variants (if dual-variant favicons are present)
-    const faviconLinks = document.querySelectorAll<HTMLLinkElement>('[data-favicon-theme]')
-    for (const link of faviconLinks) {
-      link.media = link.dataset.faviconTheme === mode ? '' : 'not all'
-    }
-  })
-
-  return () => {
-    mq.removeEventListener('change', onChange)
-    dispose?.dispose()
-  }
-}
-
-/**
- * Reset the refcount + shared teardown. Useful for tests.
- * @internal
- */
-export function _resetInitThemeForTests(): void {
-  if (_disposeShared) _disposeShared()
-  _initRefCount = 0
-  _disposeShared = null
-}
-
-/**
- * Initialize the theme system. Safe to call multiple times — uses a
- * mount-based refcount so multiple `<ThemeToggle>` instances (or
- * `<ThemeToggle>` plus an explicit `initTheme()` in your layout) share
- * a SINGLE matchMedia listener + effect.
- *
- * Reads from localStorage, listens for system preference changes.
- */
-export function initTheme() {
-  onMount(() => {
-    if (_initRefCount === 0) {
-      _disposeShared = _setupShared()
-    }
-    _initRefCount++
-    // Leak-class D diagnostic — emit per refcount++. Net (acquire -
-    // release) = currently-mounted ThemeToggle count; should be
-    // bounded by the user's UI shape. Steady-state monotonic growth
-    // signals the refcount guard regressed (every mount registers a
-    // fresh listener again).
-    if (__DEV__) _countSink.__pyreon_count__?.('theme.initRefAcquire')
-
-    return () => {
-      _initRefCount--
-      // Pair with `theme.initRefAcquire`. Equal counts at process exit
-      // = healthy lifecycle. Diff = active subscribers / orphan inits.
-      if (__DEV__) _countSink.__pyreon_count__?.('theme.initRefRelease')
-      if (_initRefCount === 0 && _disposeShared) {
-        _disposeShared()
-        _disposeShared = null
-      }
-    }
-  })
-}
-
-/**
- * Theme toggle button component.
- *
- * @example
- * import { ThemeToggle } from "@pyreon/zero/theme"
- * <ThemeToggle />
- */
-export function ThemeToggle(props: { class?: string; style?: string }): VNodeChild {
-  initTheme()
-
-  return (
-    <button
-      class={props.class}
-      style={props.style}
-      onClick={toggleTheme}
-      aria-label="Toggle theme"
-      title="Toggle theme"
-      type="button"
-    >
-      {() =>
-        resolvedTheme() === 'dark' ? (
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <circle cx="12" cy="12" r="5" />
-            <line x1="12" y1="1" x2="12" y2="3" />
-            <line x1="12" y1="21" x2="12" y2="23" />
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-            <line x1="1" y1="12" x2="3" y2="12" />
-            <line x1="21" y1="12" x2="23" y2="12" />
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-          </svg>
-        ) : (
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-          </svg>
-        )
-      }
-    </button>
-  )
-}
-
-/**
- * Inline script to prevent flash of wrong theme.
- * Include this in your index.html <head> BEFORE any stylesheets.
- *
- * @example
- * // index.html
- * <head>
- *   <script>{themeScript}</script>
- *   ...
- * </head>
- */
-export const themeScript = `(function(){try{var t=localStorage.getItem("${STORAGE_KEY}");var r=t==="light"?"light":t==="dark"?"dark":window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.dataset.theme=r;document.querySelectorAll("[data-favicon-theme]").forEach(function(l){l.media=l.dataset.faviconTheme===r?"":"not all"})}catch(e){}})()`