@jasonshimmy/vite-plugin-cer-app 0.23.2 → 0.25.0

package/src/runtime/composables/use-content-search.ts

@@ -1,205 +0,0 @@
-import {
-  createComposable,
-  getCurrentComponentContext,
-  ref,
-  useOnConnected,
-  useOnDisconnected,
-  watch,
-} from '@jasonshimmy/custom-elements-runtime'
-import type { ReactiveState } from '@jasonshimmy/custom-elements-runtime'
-import type { ContentSearchResult } from '../../types/content.js'
-import { contentSearchIndexUrl } from '../content/client.js'
-
-// ─── Module-level singleton ───────────────────────────────────────────────────
-
-// The MiniSearch instance is built lazily on first search from the manifest.
-// The same promise is reused across all mounted instances so we only build once.
-let _indexPromise: Promise<unknown> | null = null
-
-/**
- * Lazily loads the MiniSearch index from `/_content/search-index.json`.
- * Returns the same Promise on repeated calls — the index is built at most once
- * per session regardless of how many search components are mounted.
- *
- * If the fetch fails the singleton is cleared so the next search attempt
- * retries automatically (no page reload required after a transient error).
- *
- * @internal Exported for unit testing only.
- */
-export function loadIndex(): Promise<unknown> {
-  if (_indexPromise) return _indexPromise
-  const attempt = (async () => {
-    const [{ default: MiniSearch }, raw] = await Promise.all([
-      import('minisearch'),
-      fetch(contentSearchIndexUrl()).then((r) => {
-        if (!r.ok) throw new Error(`Failed to fetch search index: ${r.status}`)
-        return r.text()
-      }),
-    ])
-    return MiniSearch.loadJSON(raw, {
-      fields: ['title', 'description'],
-      storeFields: ['_path', 'title', 'description'],
-      idField: '_path',
-    })
-  })()
-  _indexPromise = attempt
-  // Clear the singleton on failure so the next call retries the fetch.
-  // The === guard ensures a newer concurrent attempt is not accidentally cleared.
-  attempt.catch(() => {
-    if (_indexPromise === attempt) _indexPromise = null
-  })
-  return attempt
-}
-
-/** Resets the module-level singleton. Used in tests only. @internal */
-export function resetIndexSingleton(): void {
-  _indexPromise = null
-}
-
-// ─── Per-component debounce state ────────────────────────────────────────────
-
-// Stores the debounce timer handle and stale-seq counter directly on the
-// component context object (non-enumerable, same pattern the runtime uses for
-// _hookCallbacks). This makes the values stable across re-renders — the context
-// object is fixed for the lifetime of the element instance — without leaking
-// into the reactive proxy or triggering spurious updates.
-
-interface DebounceState {
-  seq: number
-  timer: ReturnType<typeof setTimeout> | null
-}
-
-const _STATE_KEY = '_cerSearchDebounce'
-
-function getDebounceState(ctx: Record<string, unknown>): DebounceState {
-  if (!Object.prototype.hasOwnProperty.call(ctx, _STATE_KEY)) {
-    Object.defineProperty(ctx, _STATE_KEY, {
-      value: { seq: 0, timer: null } as DebounceState,
-      writable: false,    // object ref is fixed; its properties are still mutable
-      enumerable: false,  // invisible to the reactive proxy set-trap
-      configurable: false,
-    })
-  }
-  return (ctx as Record<string, DebounceState>)[_STATE_KEY]
-}
-
-// ─── Composable ───────────────────────────────────────────────────────────────
-
-export interface UseContentSearchReturn {
-  query: ReactiveState<string>
-  results: ReactiveState<ContentSearchResult[]>
-  /** `true` from the moment the user starts typing until results (or an error) arrive. `false` when the query is empty or the search is complete. */
-  loading: ReactiveState<boolean>
-}
-
-const _factory = createComposable((): UseContentSearchReturn => {
-  const query = ref('')
-  const results = ref<ContentSearchResult[]>([])
-  const loading = ref(false)
-
-  // Debounce state lives on the component context, not in local render-body variables.
-  // Local variables are re-created on every re-render; the context object is stable
-  // for the lifetime of the element.  Storing state here lets the render-body
-  // watch() (see below) pick up the same timer and sequence counter across re-renders
-  // without the watcher accumulation that occurs when watch() is placed inside
-  // useOnConnected() (which runs once per mount but is not registered for cleanup
-  // by the reactive system, leaking watchers on every disconnect + reconnect cycle).
-  const state = getDebounceState(getCurrentComponentContext()! as Record<string, unknown>)
-
-  // Pre-warm the index on first mount so the first real search is faster.
-  useOnConnected(() => {
-    loadIndex().catch(() => {/* silently ignore pre-warm errors */})
-  })
-
-  // Cancel any in-flight debounce on unmount so stale async work doesn't land
-  // after the component is gone.
-  useOnDisconnected(() => {
-    if (state.timer !== null) {
-      clearTimeout(state.timer)
-      state.timer = null
-    }
-    state.seq++ // discard any in-flight async search
-    loading.value = false
-  })
-
-  // watch() is in the render body so the reactive system registers it under the
-  // current component and tears it down automatically on re-render and disconnect.
-  // The mutable state (seq / timer) lives on the context (above) and persists
-  // across re-renders — new watcher instances see the same timer and counter,
-  // which is what makes debounce cancellation correct even after a re-render.
-  watch(query, (q: string) => {
-    if (state.timer !== null) {
-      clearTimeout(state.timer)
-      state.timer = null
-    }
-
-    if (!q) {
-      // Increment seq so any in-flight async search is discarded when it resolves
-      state.seq++
-      loading.value = false
-      results.value = []
-      return
-    }
-
-    // Signal loading immediately so the UI can respond before the debounce fires
-    loading.value = true
-
-    state.timer = setTimeout(async () => {
-      state.timer = null
-      const seq = ++state.seq
-
-      try {
-        const index = await loadIndex() as { search(q: string, opts?: { prefix?: boolean }): ContentSearchResult[] }
-        if (seq !== state.seq) return // stale — a newer query is in flight
-        results.value = index.search(q, { prefix: true }) as ContentSearchResult[]
-      } catch {
-        if (seq !== state.seq) return
-        results.value = []
-      } finally {
-        // Only clear loading for the most recent search; a newer in-flight search
-        // keeps loading=true until it settles.
-        if (seq === state.seq) loading.value = false
-      }
-    }, 200)
-  })
-
-  return { query, results, loading }
-})
-
-/**
- * Full-text content search composable.
- *
- * Loads a pre-built MiniSearch index lazily on first use by fetching
- * `/_content/search-index.json`. Both MiniSearch and the index are loaded via
- * dynamic import — neither is in the app bundle.
- *
- * Searches `title` and `description` fields. Input is debounced (200 ms) so
- * the index is not queried on every keystroke. `loading` becomes `true` as soon
- * as the user starts typing and returns to `false` once results arrive. Results
- * are empty when the query is empty.
- *
- * **SSR note**: search is always client-side. In SSR mode the component renders
- * with empty results and hydrates on mount.
- *
- * @example
- * ```ts
- * component('site-search', () => {
- *   const { query, results, loading } = useContentSearch()
- *
- *   return html`
- *     <input type="search" :model="${query}" placeholder="Search…" />
- *     ${loading.value ? html`<p>Searching…</p>` : ''}
- *     ${when(results.value.length > 0, () => html`
- *       <ul>
- *         ${each(results.value, r => html`
- *           <li><a :href="${r._path}">${r.title}</a></li>
- *         `)}
- *       </ul>
- *     `)}
- *   `
- * })
- * ```
- */
-export function useContentSearch(): UseContentSearchReturn {
-  return _factory()
-}

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

@@ -1,146 +0,0 @@
-import type { ContentItem, ContentMeta } from '../../types/content.js'
-import { ContentClient } from '../content/client.js'
-
-// ─── QueryBuilder ─────────────────────────────────────────────────────────────
-
-export class QueryBuilder {
-  private _prefix: string | undefined
-  private _predicates: Array<(doc: ContentMeta) => boolean> = []
-  private _sortField: string | undefined
-  private _sortDir: 'asc' | 'desc' = 'asc'
-  private _limit: number | undefined
-  private _skip: number | undefined
-
-  constructor(prefix?: string) {
-    this._prefix = prefix
-  }
-
-  /** Filter results by a predicate. Receives a fully-typed `ContentMeta`. */
-  where(predicate: (doc: ContentMeta) => boolean): this {
-    this._predicates.push(predicate)
-    return this
-  }
-
-  /** Sort by a frontmatter field. Defaults to ascending order. */
-  sortBy(field: string, dir: 'asc' | 'desc' = 'asc'): this {
-    this._sortField = field
-    this._sortDir = dir
-    return this
-  }
-
-  /** Cap the result count. */
-  limit(n: number): this {
-    this._limit = n
-    return this
-  }
-
-  /** Skip the first `n` results (for pagination). */
-  skip(n: number): this {
-    this._skip = n
-    return this
-  }
-
-  /** Returns all matching `ContentMeta` items (no body loaded). */
-  async find(): Promise<ContentMeta[]> {
-    const manifest = await ContentClient.getManifest()
-    return this._applyFilters(manifest)
-  }
-
-  /** Returns the count of matching documents (no body loaded). */
-  async count(): Promise<number> {
-    const manifest = await ContentClient.getManifest()
-    return this._applyFilters(manifest).length
-  }
-
-  /**
-   * Returns the full `ContentItem` (body + toc) for the first matching document.
-   * When a `_path` prefix is provided and no predicates/sort/pagination are set,
-   * this fetches the single document directly by path.
-   */
-  async first(): Promise<ContentItem | null> {
-    // Fast path: no filters, no sort, no pagination — fetch directly by path
-    if (
-      this._prefix !== undefined &&
-      this._predicates.length === 0 &&
-      this._sortField === undefined &&
-      this._limit === undefined &&
-      this._skip === undefined
-    ) {
-      return ContentClient.getItem(this._prefix)
-    }
-
-    // Slow path: apply filters on the manifest, then fetch the first match
-    const manifest = await ContentClient.getManifest()
-    const filtered = this._applyFilters(manifest)
-    if (filtered.length === 0) return null
-    return ContentClient.getItem(filtered[0]._path)
-  }
-
-  private _applyFilters(items: ContentMeta[]): ContentMeta[] {
-    let result = items
-
-    // Prefix filter
-    if (this._prefix !== undefined) {
-      const p = this._prefix
-      result = result.filter(
-        (doc) => doc._path === p || doc._path.startsWith(p + '/'),
-      )
-    }
-
-    // Where predicates
-    for (const pred of this._predicates) {
-      result = result.filter(pred)
-    }
-
-    // Sort
-    if (this._sortField !== undefined) {
-      const field = this._sortField
-      const dir = this._sortDir
-      result = [...result].sort((a, b) => {
-        const av = a[field] as string | number | undefined
-        const bv = b[field] as string | number | undefined
-        if (av === undefined && bv === undefined) return 0
-        if (av === undefined) return 1
-        if (bv === undefined) return -1
-        const cmp = av < bv ? -1 : av > bv ? 1 : 0
-        return dir === 'asc' ? cmp : -cmp
-      })
-    }
-
-    // Skip
-    if (this._skip !== undefined) {
-      result = result.slice(this._skip)
-    }
-
-    // Limit
-    if (this._limit !== undefined) {
-      result = result.slice(0, this._limit)
-    }
-
-    return result
-  }
-}
-
-/**
- * Content query composable.
- *
- * Returns a `QueryBuilder` scoped to the given `_path` prefix. Chain filter,
- * sort, and pagination methods before calling a terminal method
- * (`.find()`, `.first()`, or `.count()`).
- *
- * @example
- * ```ts
- * // Single document
- * const doc = await queryContent('/blog/hello').first()
- *
- * // Listing — no body loaded
- * const posts = await queryContent('/blog')
- *   .where(doc => !doc.draft)
- *   .sortBy('date', 'desc')
- *   .limit(10)
- *   .find()
- * ```
- */
-export function queryContent(path?: string): QueryBuilder {
-  return new QueryBuilder(path)
-}

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

@@ -1,135 +0,0 @@
-import type { IncomingMessage, ServerResponse } from 'node:http'
-
-/** Options forwarded to the `Set-Cookie` header when writing a cookie via `useCookie()`. */
-export interface CookieOptions {
-  /** Cookie path. Defaults to '/' when setting/removing. */
-  path?: string
-  domain?: string
-  /** Max age in seconds. */
-  maxAge?: number
-  expires?: Date
-  httpOnly?: boolean
-  secure?: boolean
-  sameSite?: 'Strict' | 'Lax' | 'None'
-}
-
-/** Isomorphic cookie accessor returned by `useCookie()`. Reads the current value and provides `set`/`remove` methods. */
-export interface CookieRef {
-  /** The current cookie value, or undefined if not set. */
-  readonly value: string | undefined
-  /** Write the cookie value. */
-  set(value: string, options?: CookieOptions): void
-  /** Remove the cookie by setting Max-Age=0. */
-  remove(options?: CookieOptions): void
-}
-
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-
-function parseCookies(cookieHeader: string): Record<string, string> {
-  const result: Record<string, string> = {}
-  for (const part of cookieHeader.split(';')) {
-    const eqIdx = part.indexOf('=')
-    if (eqIdx < 0) continue
-    const key = part.slice(0, eqIdx).trim()
-    const rawValue = part.slice(eqIdx + 1).trim()
-    try {
-      result[key] = decodeURIComponent(rawValue)
-    } catch {
-      result[key] = rawValue
-    }
-  }
-  return result
-}
-
-function serializeCookie(name: string, value: string, options: CookieOptions = {}): string {
-  let str = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`
-  const path = options.path ?? '/'
-  if (path) str += `; Path=${path}`
-  if (options.domain) str += `; Domain=${options.domain}`
-  if (options.maxAge !== undefined) str += `; Max-Age=${options.maxAge}`
-  if (options.expires) str += `; Expires=${options.expires.toUTCString()}`
-  if (options.httpOnly) str += '; HttpOnly'
-  if (options.secure) str += '; Secure'
-  // Default SameSite to 'Lax' to prevent CSRF exposure on browsers that do not
-  // enforce a default (older Safari, Firefox < 79). 'Lax' allows top-level
-  // navigations while blocking third-party POSTs — the right default for most apps.
-  // Callers can override with sameSite: 'None' (requires Secure) or 'Strict'.
-  const sameSite = options.sameSite ?? 'Lax'
-  str += `; SameSite=${sameSite}`
-  return str
-}
-
-function appendSetCookie(res: ServerResponse, cookie: string): void {
-  const existing = res.getHeader('Set-Cookie')
-  const list: string[] = existing == null
-    ? []
-    : Array.isArray(existing) ? existing : [String(existing)]
-  list.push(cookie)
-  res.setHeader('Set-Cookie', list)
-}
-
-// ─── Composable ───────────────────────────────────────────────────────────────
-
-/**
- * Isomorphic cookie composable.
- *
- * - **Server (SSR/SSG)**: reads from `req.headers.cookie` via AsyncLocalStorage;
- *   writes/removes via `res.setHeader('Set-Cookie', ...)`.
- * - **Client**: reads and writes `document.cookie`.
- *
- * It is auto-imported, so you don't need to import it manually.
- *
- * @example
- * ```ts
- * const token = useCookie('auth-token')
- * console.log(token.value)           // read
- * token.set('abc123')                // write
- * token.remove()                     // delete
- * ```
- */
-export function useCookie(name: string, defaultOptions: CookieOptions = {}): CookieRef {
-  const g = globalThis as Record<string, unknown>
-
-  // ── SSR path ──────────────────────────────────────────────────────────────
-  const store = g['__CER_REQ_STORE__'] as
-    | { getStore(): { req: IncomingMessage; res: ServerResponse } | null }
-    | undefined
-
-  if (store) {
-    const ctx = store.getStore()
-    if (ctx) {
-      const { req, res } = ctx
-      const parsed = parseCookies(req.headers['cookie'] ?? '')
-      return {
-        value: parsed[name],
-        set(value: string, options?: CookieOptions) {
-          appendSetCookie(res, serializeCookie(name, value, { ...defaultOptions, ...options }))
-        },
-        remove(options?: CookieOptions) {
-          appendSetCookie(res, serializeCookie(name, '', { ...defaultOptions, ...options, maxAge: 0 }))
-        },
-      }
-    }
-  }
-
-  // ── Client path ───────────────────────────────────────────────────────────
-  if (typeof document !== 'undefined') {
-    const parsed = parseCookies(document.cookie)
-    return {
-      value: parsed[name],
-      set(value: string, options?: CookieOptions) {
-        document.cookie = serializeCookie(name, value, { ...defaultOptions, ...options })
-      },
-      remove(options?: CookieOptions) {
-        document.cookie = serializeCookie(name, '', { ...defaultOptions, ...options, maxAge: 0 })
-      },
-    }
-  }
-
-  // ── Build-time / unknown context ──────────────────────────────────────────
-  return {
-    value: undefined,
-    set() {},
-    remove() {},
-  }
-}