@jasonshimmy/vite-plugin-cer-app 0.23.1 → 0.24.0

package/src/runtime/composables/use-session.ts

@@ -1,186 +0,0 @@
-import { useCookie } from './use-cookie.js'
-import { useRuntimeConfig } from './use-runtime-config.js'
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-/** Options for `useSession()`. Controls the cookie name and expiry. */
-export interface SessionOptions {
-  /**
-   * Cookie name for the session. Defaults to `'session'`.
-   */
-  name?: string
-  /**
-   * Max-age in seconds. Defaults to 7 days (604 800 s).
-   */
-  maxAge?: number
-}
-
-/**
- * HMAC-signed cookie session returned by `useSession()`.
- * All methods are async because signing and verification use the Web Crypto API.
- */
-export interface SessionComposable<T extends Record<string, unknown> = Record<string, unknown>> {
-  /**
-   * Reads and verifies the session cookie. Returns the session data or `null`
-   * if the cookie is absent, expired, or its signature is invalid.
-   */
-  get(): Promise<T | null>
-  /**
-   * Signs `data` and writes it as a session cookie. Existing session data is
-   * replaced entirely.
-   */
-  set(data: T): Promise<void>
-  /**
-   * Clears the session cookie by setting `maxAge = 0`.
-   */
-  clear(): Promise<void>
-}
-
-// ─── HMAC-SHA-256 helpers (Web Crypto — available in Node ≥ 18 and Workers) ──
-
-const ENC = new TextEncoder()
-
-async function _importKey(secret: string): Promise<CryptoKey> {
-  return crypto.subtle.importKey(
-    'raw',
-    ENC.encode(secret),
-    { name: 'HMAC', hash: 'SHA-256' },
-    false,
-    ['sign', 'verify'],
-  )
-}
-
-function _b64u(buf: ArrayBuffer): string {
-  return btoa(String.fromCharCode(...new Uint8Array(buf)))
-    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
-}
-
-function _b64uDecode(s: string): Uint8Array {
-  const b64 = s.replace(/-/g, '+').replace(/_/g, '/')
-  const raw = atob(b64.padEnd(b64.length + (4 - b64.length % 4) % 4, '='))
-  return Uint8Array.from(raw, (c) => c.charCodeAt(0))
-}
-
-/**
- * Signs a JSON-serialisable payload. Returns `<payload_b64u>.<sig_b64u>`.
- */
-async function _sign(key: CryptoKey, data: unknown): Promise<string> {
-  const payload = _b64u(ENC.encode(JSON.stringify(data)).buffer as ArrayBuffer)
-  const sig = await crypto.subtle.sign('HMAC', key, ENC.encode(payload))
-  return `${payload}.${_b64u(sig)}`
-}
-
-/**
- * Verifies a signed cookie value. Returns the payload or `null` on failure.
- */
-async function _verify<T>(key: CryptoKey, token: string): Promise<T | null> {
-  const dot = token.lastIndexOf('.')
-  if (dot < 0) return null
-  const payload = token.slice(0, dot)
-  const sig = _b64uDecode(token.slice(dot + 1))
-  const ok = await crypto.subtle.verify('HMAC', key, sig.buffer as ArrayBuffer, ENC.encode(payload))
-  if (!ok) return null
-  try {
-    return JSON.parse(new TextDecoder().decode(_b64uDecode(payload))) as T
-  } catch {
-    return null
-  }
-}
-
-// ─── Composable ───────────────────────────────────────────────────────────────
-
-/**
- * Signed-cookie session composable.
- *
- * Session data is JSON-serialised, HMAC-SHA-256 signed, and stored in a single
- * HTTP cookie. The signing key is read from `runtimeConfig.private.sessionSecret`
- * (declared as an empty-string default; resolved from `SESSION_SECRET` env var
- * at server startup).
- *
- * Works isomorphically: on the server it uses `useCookie()` which reads/writes
- * HTTP headers via `AsyncLocalStorage`; on the client it reads the cookie from
- * `document.cookie` (client-side session reading only — no signing key in client).
- *
- * @example
- * ```ts
- * // server/middleware/auth.ts
- * export default defineServerMiddleware(async (req, res, next) => {
- *   const session = useSession<{ userId: string }>()
- *   const data = await session.get()
- *   if (!data?.userId) { res.statusCode = 401; res.end(); return }
- *   ;(req as any).user = data
- *   next()
- * })
- *
- * // app/pages/login.ts — loader
- * export const loader = async ({ req }) => {
- *   const session = useSession<{ userId: string }>()
- *   await session.set({ userId: user.id })
- *   return { ok: true }
- * }
- * ```
- */
-export function useSession<T extends Record<string, unknown> = Record<string, unknown>>(
-  options: SessionOptions = {},
-): SessionComposable<T> {
-  const name = options.name ?? 'session'
-  const maxAge = options.maxAge ?? 60 * 60 * 24 * 7 // 7 days
-
-  /**
-   * Returns the list of signing secrets in priority order.
-   * The first secret is the active key (used for signing new sessions).
-   * Subsequent secrets are accepted for verification only (rotation window).
-   */
-  function _getSecrets(): string[] {
-    try {
-      const cfg = useRuntimeConfig()
-      const raw = (cfg as { private?: { sessionSecret?: string | string[] } }).private?.sessionSecret ?? ''
-      const secrets = Array.isArray(raw) ? raw.filter(Boolean) : (raw ? [raw] : [])
-      if (secrets.length === 0) {
-        console.warn(
-          '[cer-app] useSession: runtimeConfig.private.sessionSecret is empty. ' +
-          'Declare it with an empty-string default and set SESSION_SECRET in your environment.',
-        )
-      }
-      return secrets
-    } catch {
-      return []
-    }
-  }
-
-  return {
-    async get(): Promise<T | null> {
-      const cookie = useCookie(name)
-      const raw = cookie.value
-      if (!raw) return null
-      const secrets = _getSecrets()
-      if (secrets.length === 0) return null
-      // Try each secret in order — first match wins (supports rotation).
-      for (const secret of secrets) {
-        try {
-          const key = await _importKey(secret)
-          const result = await _verify<T>(key, raw)
-          if (result !== null) return result
-        } catch {
-          // Try next key
-        }
-      }
-      return null
-    },
-
-    async set(data: T): Promise<void> {
-      const secrets = _getSecrets()
-      if (secrets.length === 0) throw new Error('[cer-app] useSession: sessionSecret is not configured.')
-      // Always sign with the first (active) key.
-      const key = await _importKey(secrets[0])
-      const token = await _sign(key, data)
-      const cookie = useCookie(name, { maxAge, httpOnly: true, sameSite: 'Lax', path: '/' })
-      cookie.set(token)
-    },
-
-    async clear(): Promise<void> {
-      const cookie = useCookie(name, { httpOnly: true, sameSite: 'Lax', path: '/' })
-      cookie.remove()
-    },
-  }
-}

package/src/runtime/composables/use-state.ts

@@ -1,92 +0,0 @@
-import { ref } from '@jasonshimmy/custom-elements-runtime'
-import type { ReactiveState } from '@jasonshimmy/custom-elements-runtime'
-
-type StateMap = Map<string, ReactiveState<unknown>>
-
-/**
- * useState — globally-keyed reactive state shared across layouts, pages, and components.
- *
- * Returns the same reactive ref for a given key across all components. Mutating the
- * ref in one component (page, layout, or component) automatically triggers re-renders
- * in every other component that reads the same key.
- *
- * Works isomorphically:
- * - **SSR/SSG**: state is scoped per-request via AsyncLocalStorage so concurrent renders
- *   never share state. Set initial values inside a page `loader` (which runs before
- *   rendering) so the layout can read them synchronously during the render pass.
- *   After rendering, all state values are serialized into `window.__CER_STATE_INIT__`
- *   and hydrated on the client so there is no flash to default values after hydration.
- * - **Client**: state is a global singleton Map — refs are shared across the whole
- *   component tree and changes propagate reactively. On first use, the Map is
- *   pre-populated from `window.__CER_STATE_INIT__` (the SSR snapshot) if present.
- *
- * @param key  Unique string key for this piece of state.
- * @param init Initial value or factory function. Only evaluated when the key does not
- *             yet exist in the store (i.e. on first call for a given key per request/session).
- *
- * @example
- * ```ts
- * // app/pages/about.ts — set title in loader so layout sees it on SSR
- * export const loader = async () => {
- *   useState<string>('pageTitle').value = 'About Us'
- *   return {}
- * }
- *
- * component('page-about', () => {
- *   const title = useState<string>('pageTitle')
- *   return html`<h1>${title.value}</h1>`
- * })
- * ```
- *
- * @example
- * ```ts
- * // app/layouts/default.ts — reads the same ref; re-renders when value changes
- * component('layout-default', () => {
- *   const title = useState('pageTitle', 'My App')  // fallback default
- *   return html`
- *     <h1>${title.value}</h1>
- *     <slot></slot>
- *   `
- * })
- * ```
- */
-export function useState<T>(key: string, init?: T | (() => T)): ReactiveState<T> {
-  const g = globalThis as Record<string, unknown>
-
-  // ── SSR path ──────────────────────────────────────────────────────────────
-  // __CER_STATE_STORE__ is an AsyncLocalStorage<StateMap> set by entry-server-template.
-  // Only set on the server — not present in the client bundle.
-  const stateStore = g['__CER_STATE_STORE__'] as { getStore(): StateMap | undefined } | undefined
-  if (stateStore) {
-    const map = stateStore.getStore()
-    if (map) {
-      if (!map.has(key)) {
-        const initValue = typeof init === 'function' ? (init as () => T)() : (init as T | undefined)
-        map.set(key, ref(initValue) as ReactiveState<unknown>)
-      }
-      return map.get(key) as ReactiveState<T>
-    }
-  }
-
-  // ── Client path ───────────────────────────────────────────────────────────
-  // __CER_STATE__ is a singleton Map on globalThis, created lazily on first use.
-  // On creation, pre-populate from window.__CER_STATE_INIT__ (the SSR-serialized
-  // snapshot injected by the server handler) so the client boots with the same
-  // state the server rendered — no flash to default values on hydration.
-  if (!g['__CER_STATE__']) {
-    const clientMap = new Map<string, ReactiveState<unknown>>()
-    const ssrInit = g['__CER_STATE_INIT__'] as Record<string, unknown> | undefined
-    if (ssrInit) {
-      for (const [k, v] of Object.entries(ssrInit)) {
-        clientMap.set(k, ref(v) as ReactiveState<unknown>)
-      }
-    }
-    g['__CER_STATE__'] = clientMap
-  }
-  const clientMap = g['__CER_STATE__'] as StateMap
-  if (!clientMap.has(key)) {
-    const initValue = typeof init === 'function' ? (init as () => T)() : (init as T | undefined)
-    clientMap.set(key, ref(initValue) as ReactiveState<unknown>)
-  }
-  return clientMap.get(key) as ReactiveState<T>
-}

package/src/runtime/content/client.ts

@@ -1,168 +0,0 @@
-import type { ContentItem, ContentMeta } from '../../types/content.js'
-
-// ─── Types ─────────────────────────────────────────────────────────────────────
-
-/** Reads `router.base` from `virtual:cer-app-config` at module initialisation. */
-let _base: string = ''
-
-try {
-  // Dynamic import is not viable for a module-level side effect, so we read from
-  // globalThis where the virtual module writes it during app bootstrap.
-  const g = globalThis as Record<string, unknown>
-  const appConfig = g['__CER_APP_CONFIG__'] as { router?: { base?: string } } | undefined
-  _base = appConfig?.router?.base ?? ''
-  // Normalise: strip trailing slash, keep empty string for no base
-  if (_base === '/') _base = ''
-} catch {
-  _base = ''
-}
-
-// ─── Path helpers ─────────────────────────────────────────────────────────────
-
-function contentPathToJsonFile(path: string): string {
-  if (path === '/') return 'index.json'
-  return path.slice(1) + '.json'
-}
-
-/** Returns the full URL for the search index (includes router.base prefix). */
-export function contentSearchIndexUrl(): string {
-  return `${_base}/_content/search-index.json`
-}
-
-// ─── Lazy manifest cache ──────────────────────────────────────────────────────
-
-let _manifestPromise: Promise<ContentMeta[]> | null = null
-
-function fetchManifest(): Promise<ContentMeta[]> {
-  if (_manifestPromise) return _manifestPromise
-  _manifestPromise = fetch(`${_base}/_content/manifest.json`).then((r) => {
-    if (!r.ok) throw new Error(`Failed to fetch content manifest: ${r.status}`)
-    return r.json() as Promise<ContentMeta[]>
-  })
-  return _manifestPromise
-}
-
-// ─── Server-side production caches ───────────────────────────────────────────
-// In production SSR the Vite build process is not running, so __CER_CONTENT_STORE__
-// is absent.  We cache the manifest and per-document reads here to avoid repeated
-// disk I/O on every request — critical at 10k+ pages where manifest.json is ~2MB.
-
-let _ssrManifest: ContentMeta[] | null = null
-const _ssrItemCache = new Map<string, ContentItem | null>()
-
-// ─── ContentClient ────────────────────────────────────────────────────────────
-
-/**
- * Low-level content data access layer. Used by `queryContent()`.
- *
- * Resolution strategy:
- * - **Server (dev + SSG build-time)**: reads from `globalThis.__CER_CONTENT_STORE__`
- *   populated by the `cerContent()` Vite plugin's `buildStart` hook.
- * - **Server (production SSR runtime)**: `__CER_CONTENT_STORE__` is absent (no
- *   Vite build process at runtime), so falls back to `node:fs` reads from
- *   `dist/_content/`.
- * - **Client (SPA / browser navigation)**: lazy-fetches `/_content/manifest.json`
- *   once (cached) for listing; fetches `/_content/[path].json` per `.first()`.
- */
-export const ContentClient = {
-  async getManifest(): Promise<ContentMeta[]> {
-    const g = globalThis as Record<string, unknown>
-
-    // Server: in-memory store (dev + SSG build-time rendering)
-    const store = g['__CER_CONTENT_STORE__'] as ContentItem[] | undefined
-    if (store) {
-      return store.map((item) => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { _file, body, toc, excerpt, ...meta } = item
-        return meta as ContentMeta
-      })
-    }
-
-    // Server: production SSR runtime — resolve content files from the app root.
-    // The preview CLI sets process.env.__CER_APP_ROOT__ to the project root before
-    // loading the server bundle. Content files are written to dist/server/_content/
-    // and dist/client/_content/ by cerContent's closeBundle hook.
-    // _ssrManifest is a module-level cache — populated once and reused for the
-    // lifetime of the process so manifest.json is only read and parsed once at scale.
-    if (typeof window === 'undefined' && typeof process !== 'undefined') {
-      if (_ssrManifest) return _ssrManifest
-      try {
-        const { readFileSync, existsSync } = await import('node:fs')
-        const { join } = await import('node:path')
-        const appRoot = process.env.__CER_APP_ROOT__ ?? process.cwd()
-        const candidates = [
-          join(appRoot, 'dist', 'server', '_content', 'manifest.json'),
-          join(appRoot, 'dist', 'client', '_content', 'manifest.json'),
-          join(appRoot, 'dist', '_content', 'manifest.json'),
-        ]
-        for (const p of candidates) {
-          if (!existsSync(p)) continue
-          try {
-            const raw = readFileSync(p, 'utf-8')
-            _ssrManifest = JSON.parse(raw) as ContentMeta[]
-            return _ssrManifest
-          } catch { /* try next */ }
-        }
-        _ssrManifest = []
-        return _ssrManifest
-      } catch {
-        return []
-      }
-    }
-
-    // Client: fetch manifest (cached)
-    return fetchManifest()
-  },
-
-  async getItem(path: string): Promise<ContentItem | null> {
-    const g = globalThis as Record<string, unknown>
-
-    // Server: in-memory store
-    const store = g['__CER_CONTENT_STORE__'] as ContentItem[] | undefined
-    if (store) {
-      return store.find((item) => item._path === path) ?? null
-    }
-
-    // Server: production SSR runtime — see getManifest() for path resolution strategy.
-    // _ssrItemCache is a module-level Map so each document is read and parsed at
-    // most once per process lifetime, regardless of how many concurrent requests
-    // ask for the same path.
-    if (typeof window === 'undefined' && typeof process !== 'undefined') {
-      if (_ssrItemCache.has(path)) return _ssrItemCache.get(path) ?? null
-      try {
-        const { readFileSync, existsSync } = await import('node:fs')
-        const { join } = await import('node:path')
-        const appRoot = process.env.__CER_APP_ROOT__ ?? process.cwd()
-        const jsonFile = contentPathToJsonFile(path)
-        const candidates = [
-          join(appRoot, 'dist', 'server', '_content', jsonFile),
-          join(appRoot, 'dist', 'client', '_content', jsonFile),
-          join(appRoot, 'dist', '_content', jsonFile),
-        ]
-        for (const p of candidates) {
-          if (!existsSync(p)) continue
-          try {
-            const raw = readFileSync(p, 'utf-8')
-            const item = JSON.parse(raw) as ContentItem
-            _ssrItemCache.set(path, item)
-            return item
-          } catch { /* try next */ }
-        }
-        _ssrItemCache.set(path, null)
-        return null
-      } catch {
-        return null
-      }
-    }
-
-    // Client: fetch individual document
-    const jsonFile = contentPathToJsonFile(path)
-    try {
-      const res = await fetch(`${_base}/_content/${jsonFile}`)
-      if (!res.ok) return null
-      return (await res.json()) as ContentItem
-    } catch {
-      return null
-    }
-  },
-}

package/src/runtime/entry-client-template.ts

@@ -1,39 +0,0 @@
-/**
- * Template string for `entry-client.ts`.
- *
- * This is the browser-side entry point for SSR/SSG modes.
- * It hydrates the server-rendered HTML and activates client-side routing.
- */
-export const ENTRY_CLIENT_TEMPLATE = `// Client-side entry — hydrates SSR output
-
-// Mark the already-rendered entry URL so plugin-generated route middleware can
-// skip replaying guards once during hydration. This is cleared by the app
-// bootstrap after the initial hydrated route commits.
-if (typeof window !== 'undefined') {
-  (globalThis).__CER_HYDRATION_ENTRY__ = {
-    path: window.location.pathname,
-    query: Object.fromEntries(new URLSearchParams(window.location.search)),
-  }
-}
-
-// Capture SSR loader data before any scripts clear it.
-// usePageData() reads from this global; it is cleared after the first read
-// so subsequent client-side navigations don't reuse stale data.
-if (typeof window !== 'undefined' && window.__CER_DATA__) {
-  (globalThis).__CER_DATA__ = window.__CER_DATA__
-}
-
-// Capture useFetch() data pre-fetched on the server.
-// Keys are consumed on first read; subsequent navigations fetch fresh.
-if (typeof window !== 'undefined' && window.__CER_FETCH_DATA__) {
-  (globalThis).__CER_FETCH_DATA__ = window.__CER_FETCH_DATA__
-}
-
-// Capture the authenticated user injected by the SSR handler.
-// useAuth() reads this on the client instead of re-reading the cookie.
-if (typeof window !== 'undefined' && window.__CER_AUTH_USER__) {
-  (globalThis).__CER_AUTH_USER__ = window.__CER_AUTH_USER__
-}
-
-import './app.js'
-`