@jasonshimmy/vite-plugin-cer-app 0.19.2 → 0.20.0

package/src/__tests__/runtime/use-content-search.test.ts

@@ -0,0 +1,139 @@
+/**
+ * Tests for useContentSearch helpers.
+ *
+ * Covers:
+ * - contentSearchIndexUrl() — correct URL with and without router.base
+ * - loadIndex() singleton — fetched and built only once per session
+ * - loadIndex() error path — fetch failure rejects cleanly; singleton reset allows retry
+ * - loadIndex() returns a searchable MiniSearch instance
+ *
+ * Note: The full useContentSearch() composable (query reactive state, stale-seq
+ * guard, useOnConnected pre-warm) requires a component context provided by the
+ * custom-elements-runtime and is exercised by the e2e suite in content.cy.ts.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import MiniSearch from 'minisearch'
+import { buildSearchIndex } from '../../plugin/content/search.js'
+import type { ContentItem } from '../../types/content.js'
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const SAMPLE_ITEMS: ContentItem[] = [
+  {
+    _path: '/blog/hello',
+    _file: 'blog/hello.md',
+    _type: 'markdown',
+    title: 'Hello World',
+    description: 'First post about web components',
+    body: '<p>Hello</p>',
+    toc: [],
+  },
+  {
+    _path: '/docs/start',
+    _file: 'docs/start.md',
+    _type: 'markdown',
+    title: 'Getting Started',
+    description: 'How to get started',
+    body: '<p>Start</p>',
+    toc: [],
+  },
+]
+
+/** Builds a serialised MiniSearch index from sample items (same format as search.ts). */
+function buildIndex(): string {
+  return buildSearchIndex(SAMPLE_ITEMS)
+}
+
+// ─── contentSearchIndexUrl ────────────────────────────────────────────────────
+
+describe('contentSearchIndexUrl', () => {
+  it('returns a URL ending with /_content/search-index.json', async () => {
+    const { contentSearchIndexUrl } = await import('../../runtime/content/client.js')
+    const url = contentSearchIndexUrl()
+    expect(url).toMatch(/\/_content\/search-index\.json$/)
+  })
+})
+
+// ─── loadIndex singleton ──────────────────────────────────────────────────────
+
+describe('loadIndex', () => {
+  let originalFetch: typeof globalThis.fetch
+
+  beforeEach(async () => {
+    originalFetch = globalThis.fetch
+    // Reset the singleton before each test so tests are independent
+    const { resetIndexSingleton } = await import('../../runtime/composables/use-content-search.js')
+    resetIndexSingleton()
+  })
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch
+  })
+
+  it('fetches the index only once despite multiple concurrent calls (singleton)', async () => {
+    const indexJson = buildIndex()
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      text: () => Promise.resolve(indexJson),
+    } as unknown as Response)
+
+    const { loadIndex, resetIndexSingleton } = await import('../../runtime/composables/use-content-search.js')
+    resetIndexSingleton()
+
+    // Call loadIndex() three times concurrently — only one fetch should occur.
+    const [r1, r2, r3] = await Promise.all([loadIndex(), loadIndex(), loadIndex()])
+    expect(vi.mocked(globalThis.fetch)).toHaveBeenCalledTimes(1)
+    // All calls must resolve to the same underlying index object
+    expect(r1).toBe(r2)
+    expect(r2).toBe(r3)
+  })
+
+  it('returns a MiniSearch-compatible index that can search by title', async () => {
+    const indexJson = buildIndex()
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      text: () => Promise.resolve(indexJson),
+    } as unknown as Response)
+
+    const { loadIndex, resetIndexSingleton } = await import('../../runtime/composables/use-content-search.js')
+    resetIndexSingleton()
+
+    const index = await loadIndex() as ReturnType<typeof MiniSearch.loadJSON>
+    const results = index.search('Hello', { prefix: true }) as Array<{ _path: string }>
+    expect(results.some((r) => r._path === '/blog/hello')).toBe(true)
+  })
+
+  it('rejects when fetch fails (non-ok status)', async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+    } as unknown as Response)
+
+    const { loadIndex, resetIndexSingleton } = await import('../../runtime/composables/use-content-search.js')
+    resetIndexSingleton()
+
+    await expect(loadIndex()).rejects.toThrow()
+  })
+
+  it('allows retry after singleton reset following an error', async () => {
+    const { loadIndex, resetIndexSingleton } = await import('../../runtime/composables/use-content-search.js')
+
+    // First call fails
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 503,
+    } as unknown as Response)
+    resetIndexSingleton()
+    await expect(loadIndex()).rejects.toThrow()
+
+    // Reset and retry with a good response
+    resetIndexSingleton()
+    const indexJson = buildIndex()
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      text: () => Promise.resolve(indexJson),
+    } as unknown as Response)
+    const index = await loadIndex() as ReturnType<typeof MiniSearch.loadJSON>
+    expect(index).toBeDefined()
+  })
+})

package/src/__tests__/runtime/use-content.test.ts

@@ -0,0 +1,226 @@
+/**
+ * Tests for queryContent() composable and QueryBuilder.
+ *
+ * Covers:
+ * - Server-side path: reads from globalThis.__CER_CONTENT_STORE__
+ * - .where() predicate filtering
+ * - .sortBy() sorting
+ * - .limit() and .skip() pagination
+ * - .find() returns ContentMeta[]
+ * - .count() returns number
+ * - .first() returns ContentItem (direct path fetch fast path)
+ * - .first() with filters (slow path through manifest)
+ * - prefix scoping
+ * - empty results
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import type { ContentItem } from '../../types/content.js'
+
+const g = globalThis as Record<string, unknown>
+
+const STORE: ContentItem[] = [
+  {
+    _path: '/blog/hello',
+    _file: 'blog/hello.md',
+    _type: 'markdown',
+    title: 'Hello World',
+    description: 'First post',
+    date: '2026-04-03',
+    draft: false,
+    body: '<p>Hello</p>',
+    toc: [],
+  },
+  {
+    _path: '/blog/world',
+    _file: 'blog/world.md',
+    _type: 'markdown',
+    title: 'World Post',
+    description: 'Second post',
+    date: '2026-04-10',
+    draft: true,
+    body: '<p>World</p>',
+    toc: [],
+  },
+  {
+    _path: '/about',
+    _file: 'about.md',
+    _type: 'markdown',
+    title: 'About',
+    body: '<p>About</p>',
+    toc: [],
+  },
+  {
+    _path: '/blog',
+    _file: 'blog/index.md',
+    _type: 'markdown',
+    title: 'Blog',
+    body: '<p>Blog index</p>',
+    toc: [],
+  },
+]
+
+function setup() {
+  g['__CER_CONTENT_STORE__'] = STORE
+}
+
+function teardown() {
+  delete g['__CER_CONTENT_STORE__']
+}
+
+describe('queryContent() — .find()', () => {
+  beforeEach(setup)
+  afterEach(teardown)
+
+  it('returns all items when no prefix', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent().find()
+    expect(result).toHaveLength(STORE.length)
+  })
+
+  it('filters by prefix — exact match', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent('/about').find()
+    expect(result).toHaveLength(1)
+    expect(result[0]._path).toBe('/about')
+  })
+
+  it('filters by prefix — includes children', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent('/blog').find()
+    expect(result.map((r) => r._path).sort()).toEqual(['/blog', '/blog/hello', '/blog/world'])
+  })
+
+  it('.where() filters items', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent('/blog').where((doc) => !doc.draft).find()
+    expect(result.every((r) => !r.draft)).toBe(true)
+    expect(result.some((r) => r._path === '/blog/world')).toBe(false)
+  })
+
+  it('.where() with date filter', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent('/blog')
+      .where((doc) => typeof doc.date === 'string' && doc.date >= '2026-04-09')
+      .find()
+    expect(result).toHaveLength(1)
+    expect(result[0]._path).toBe('/blog/world')
+  })
+
+  it('.sortBy() ascending', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent('/blog').sortBy('date').find()
+    const dates = result.filter((r) => r.date).map((r) => r.date as string)
+    expect(dates).toEqual([...dates].sort())
+  })
+
+  it('.sortBy() descending', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent('/blog').sortBy('date', 'desc').find()
+    const dates = result.filter((r) => r.date).map((r) => r.date as string)
+    expect(dates).toEqual([...dates].sort().reverse())
+  })
+
+  it('.limit() caps results', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent().limit(2).find()
+    expect(result).toHaveLength(2)
+  })
+
+  it('.skip() offsets results', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const all = await queryContent().find()
+    const skipped = await queryContent().skip(1).find()
+    expect(skipped).toHaveLength(all.length - 1)
+    expect(skipped[0]._path).toBe(all[1]._path)
+  })
+
+  it('chained .where().sortBy().limit()', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent('/blog')
+      .where((doc) => !doc.draft)
+      .sortBy('date', 'desc')
+      .limit(1)
+      .find()
+    expect(result).toHaveLength(1)
+  })
+
+  it('returns ContentMeta — no body in results', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent().find()
+    for (const item of result) {
+      expect('body' in item).toBe(false)
+    }
+  })
+
+  it('no prefix returns all items including those outside /blog', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const result = await queryContent().find()
+    expect(result.some((r) => r._path === '/about')).toBe(true)
+  })
+})
+
+describe('queryContent() — .count()', () => {
+  beforeEach(setup)
+  afterEach(teardown)
+
+  it('returns total count with no filters', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const count = await queryContent().count()
+    expect(count).toBe(STORE.length)
+  })
+
+  it('returns filtered count with .where()', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const count = await queryContent('/blog').where((doc) => !doc.draft).count()
+    // /blog index (no draft field) + /blog/hello (draft: false)
+    expect(count).toBe(2)
+  })
+})
+
+describe('queryContent() — .first()', () => {
+  beforeEach(setup)
+  afterEach(teardown)
+
+  it('fast path: fetches item directly by path', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const item = await queryContent('/about').first()
+    expect(item).not.toBeNull()
+    expect(item?._path).toBe('/about')
+    expect(item?.body).toBe('<p>About</p>')
+  })
+
+  it('fast path: returns null for unknown path', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const item = await queryContent('/does-not-exist').first()
+    expect(item).toBeNull()
+  })
+
+  it('slow path: applies .where() filter then fetches first match', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const item = await queryContent('/blog')
+      .where((doc) => !doc.draft)
+      .first()
+    expect(item).not.toBeNull()
+    expect(item?.draft).not.toBe(true)
+  })
+
+  it('returns full ContentItem with body and toc', async () => {
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    const item = await queryContent('/blog/hello').first()
+    expect(item?.body).toBeDefined()
+    expect(Array.isArray(item?.toc)).toBe(true)
+  })
+
+  it('returns null when no prefix is set and no store', async () => {
+    // Remove store temporarily
+    delete g['__CER_CONTENT_STORE__']
+    const { queryContent } = await import('../../runtime/composables/use-content.js')
+    // Without store, the client fetch path will run; since there's no real server, it may fail.
+    // Just verify it doesn't throw — result can be null.
+    const item = await queryContent('/about').first().catch(() => null)
+    expect(item === null || item === undefined || typeof item === 'object').toBe(true)
+    // Restore
+    g['__CER_CONTENT_STORE__'] = STORE
+  })
+})

package/src/cli/commands/preview.ts

@@ -225,6 +225,8 @@ export function previewCommand(): Command {
           apiRoutes?: Array<{ path: string; handlers: Record<string, unknown> }>
         }
         try {
+          // Expose the app root so the server bundle can resolve content files at runtime.
+          process.env.__CER_APP_ROOT__ = root
           serverMod = await import(pathToFileURL(serverBundle).href)
         } catch (err) {
           console.error('[cer-app] Failed to load server bundle:', err)

package/src/cli/create/templates/spa/package.json.tpl

@@ -8,10 +8,10 @@
     "preview": "cer-app preview"
   },
   "dependencies": {
-    "@jasonshimmy/custom-elements-runtime": "^3.7.1"
+    "@jasonshimmy/custom-elements-runtime": "^3.7.2"
   },
   "devDependencies": {
-    "@jasonshimmy/vite-plugin-cer-app": "^0.19.2",
+    "@jasonshimmy/vite-plugin-cer-app": "^0.19.3",
     "typescript": "^5.9.3",
     "vite": "^8.0.3"
   }

package/src/cli/create/templates/ssg/package.json.tpl

@@ -9,10 +9,10 @@
     "preview": "cer-app preview"
   },
   "dependencies": {
-    "@jasonshimmy/custom-elements-runtime": "^3.7.1"
+    "@jasonshimmy/custom-elements-runtime": "^3.7.2"
   },
   "devDependencies": {
-    "@jasonshimmy/vite-plugin-cer-app": "^0.19.2",
+    "@jasonshimmy/vite-plugin-cer-app": "^0.19.3",
     "typescript": "^5.9.3",
     "vite": "^8.0.3"
   }

package/src/cli/create/templates/ssr/package.json.tpl

@@ -8,10 +8,10 @@
     "preview": "cer-app preview --ssr"
   },
   "dependencies": {
-    "@jasonshimmy/custom-elements-runtime": "^3.7.1"
+    "@jasonshimmy/custom-elements-runtime": "^3.7.2"
   },
   "devDependencies": {
-    "@jasonshimmy/vite-plugin-cer-app": "^0.19.2",
+    "@jasonshimmy/vite-plugin-cer-app": "^0.19.3",
     "typescript": "^5.9.3",
     "vite": "^8.0.3"
   }

package/src/index.ts

@@ -15,3 +15,6 @@ export type { UseFetchOptions, UseFetchReturn, UseFetchResult, UseFetchReactiveR
 
 // Re-export resolved config type for use in build scripts
 export type { ResolvedCerConfig } from './plugin/dev-server.js'
+
+// Content layer types
+export type { ContentItem, ContentMeta, ContentHeading, ContentSearchResult, CerContentConfig } from './types/content.js'

package/src/plugin/build-ssg.ts

@@ -5,6 +5,7 @@ import { createServer, type UserConfig } from 'vite'
 import type { ResolvedCerConfig } from './dev-server.js'
 import { buildSSR } from './build-ssr.js'
 import { buildRouteEntry } from './path-utils.js'
+import { CONTENT_STORE_KEY, loadContentStore, resolveContentDir } from './content/index.js'
 import fg from 'fast-glob'
 
 interface SsgManifest {
@@ -249,6 +250,17 @@ export async function buildSSG(
   const paths = await collectSsgPaths(config, viteUserConfig)
   console.log(`[cer-app] Found ${paths.length} path(s) to generate:`, paths)
 
+  // Restore the in-memory content store to the production (no-draft) content.
+  // collectSsgPaths may spin up a Vite dev server (watchMode=true) whose
+  // buildStart hook overwrites globalThis.__CER_CONTENT_STORE__ with drafts
+  // included.  Re-running loadContentStore with isProduction=true corrects this
+  // so that every renderPath call sees only published content.
+  {
+    const contentDir = resolveContentDir(config.root)
+    const productionItems = await loadContentStore(contentDir, false, true)
+    ;(globalThis as Record<string, unknown>)[CONTENT_STORE_KEY] = productionItems
+  }
+
   // Step 3+4: Render and write paths with bounded concurrency.
   // The server bundle uses per-request router instances (initRouter returns the
   // router; the factory passes it to createStreamingSSRHandler as { vnode, router })

package/src/plugin/content/emitter.ts

@@ -0,0 +1,50 @@
+import { writeFileSync, mkdirSync } from 'node:fs'
+import { join, dirname } from 'pathe'
+import type { ContentItem, ContentMeta } from '../../types/content.js'
+import { toContentMeta } from './parser.js'
+
+/**
+ * Converts a `_path` to the relative file path under `_content/`.
+ *
+ * Special case: `_path === '/'` writes to `_content/index.json` rather than
+ * `_content/.json` (which would be invalid on most filesystems and confusing).
+ */
+export function contentPathToFile(path: string): string {
+  if (path === '/') return 'index.json'
+  // Remove leading slash, append .json
+  return path.slice(1) + '.json'
+}
+
+/**
+ * Writes all content output files to `<outDir>/_content/`:
+ *
+ * - `manifest.json`      — `ContentMeta[]` (no body, no toc, no excerpt)
+ * - `search-index.json`  — serialised MiniSearch index string
+ * - `[path].json`        — full `ContentItem` per document
+ *
+ * `router.base` is NOT prepended here — that is a client-side fetch concern.
+ */
+export function emitContentFiles(
+  items: ContentItem[],
+  outDir: string,
+  searchIndexJson: string,
+): void {
+  const contentDir = join(outDir, '_content')
+  mkdirSync(contentDir, { recursive: true })
+
+  // manifest.json — lean metadata only
+  const manifest: ContentMeta[] = items.map(toContentMeta)
+  writeFileSync(join(contentDir, 'manifest.json'), JSON.stringify(manifest), 'utf-8')
+
+  // search-index.json
+  writeFileSync(join(contentDir, 'search-index.json'), searchIndexJson, 'utf-8')
+
+  // Per-document full JSON files
+  for (const item of items) {
+    const relFile = contentPathToFile(item._path)
+    const absFile = join(contentDir, relFile)
+    // Ensure subdirectory exists (e.g. _content/blog/ for _path: /blog/hello)
+    mkdirSync(dirname(absFile), { recursive: true })
+    writeFileSync(absFile, JSON.stringify(item), 'utf-8')
+  }
+}