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

package/e2e/cypress/e2e/content.cy.ts

@@ -0,0 +1,228 @@
+/**
+ * Content layer e2e tests — exercises queryContent() and useContentSearch().
+ *
+ * Pages under test:
+ *   /content-index  — queryContent().find()  (all content)
+ *   /content-blog   — queryContent('/blog').find() (blog prefix, draft exclusion)
+ *   /content-doc    — queryContent('/docs/getting-started').first() (body + TOC)
+ *   /content-search — useContentSearch() (MiniSearch, client-side)
+ */
+
+const mode = Cypress.env('mode') as 'spa' | 'ssr' | 'ssg'
+
+// ─── /content-index ───────────────────────────────────────────────────────────
+
+describe('Content index — queryContent().find()', () => {
+  if (mode !== 'spa') {
+    it('pre-renders content items in initial HTML (SSR/SSG)', () => {
+      cy.request('/content-index').then((response) => {
+        expect(response.body).to.include('Welcome')
+        expect(response.body).to.include('Hello World')
+      })
+    })
+  }
+
+  it('renders at least 3 content items after hydration', () => {
+    cy.visit('/content-index')
+    cy.get('[data-cy=content-list]').should('exist')
+    cy.get('[data-cy=content-item]', { timeout: 8000 }).should('have.length.at.least', 3)
+  })
+
+  it('shows total item count', () => {
+    cy.visit('/content-index')
+    // Use .should() so Cypress retries until the text updates (handles
+    // the case where the client-side fetch updates the count after hydration).
+    cy.get('[data-cy=content-total]', { timeout: 8000 })
+      .invoke('text')
+      .should((text) => {
+        const n = parseInt(text.replace(/\D/g, ''), 10)
+        expect(n).to.be.at.least(3)
+      })
+  })
+
+  it('each item has a data-path attribute', () => {
+    cy.visit('/content-index')
+    cy.get('[data-cy=content-item]', { timeout: 8000 }).first().should('have.attr', 'data-path')
+  })
+
+  it('root content item appears with title "Welcome"', () => {
+    cy.visit('/content-index')
+    cy.get('[data-cy=content-item][data-path="/"]', { timeout: 8000 }).should('exist')
+    cy.get('[data-cy=content-item][data-path="/"] [data-cy=content-item-title]').should('contain', 'Welcome')
+  })
+})
+
+// ─── /content-blog ────────────────────────────────────────────────────────────
+
+describe('Content blog listing — queryContent("/blog").find()', () => {
+  if (mode !== 'spa') {
+    it('pre-renders blog posts in initial HTML (SSR/SSG)', () => {
+      cy.request('/content-blog').then((response) => {
+        expect(response.body).to.include('Hello World')
+      })
+    })
+
+    it('does not pre-render draft post in initial HTML (SSR/SSG)', () => {
+      cy.request('/content-blog').then((response) => {
+        expect(response.body).not.to.include('Draft Post')
+      })
+    })
+  }
+
+  it('renders blog posts after hydration', () => {
+    cy.visit('/content-blog')
+    cy.get('[data-cy=content-blog-list]').should('exist')
+    cy.get('[data-cy=content-blog-item]', { timeout: 8000 }).should('have.length.at.least', 1)
+  })
+
+  it('shows Hello World post', () => {
+    cy.visit('/content-blog')
+    cy.get('[data-cy=content-blog-title]', { timeout: 8000 }).first().should('contain', 'Hello World')
+  })
+
+  it('does not show draft post', () => {
+    cy.visit('/content-blog')
+    cy.get('[data-cy=content-blog-list]', { timeout: 8000 })
+    cy.get('[data-cy=content-blog-item][data-path="/blog/2026-04-02-draft"]').should('not.exist')
+    cy.get('[data-cy=content-blog-title]').each(($el) => {
+      expect($el.text()).not.to.include('Draft Post')
+    })
+  })
+
+  it('blog items have data-path starting with /blog', () => {
+    cy.visit('/content-blog')
+    cy.get('[data-cy=content-blog-item]', { timeout: 8000 }).each(($el) => {
+      const path = $el.attr('data-path') ?? ''
+      expect(path).to.match(/^\/blog/)
+    })
+  })
+})
+
+// ─── /content-doc ─────────────────────────────────────────────────────────────
+
+describe('Content doc — queryContent("/docs/getting-started").first()', () => {
+  if (mode !== 'spa') {
+    it('pre-renders doc title in initial HTML (SSR/SSG)', () => {
+      cy.request('/content-doc').then((response) => {
+        expect(response.body).to.include('Getting Started')
+      })
+    })
+
+    it('pre-renders heading "Installation" in initial HTML (SSR/SSG)', () => {
+      cy.request('/content-doc').then((response) => {
+        expect(response.body).to.include('Installation')
+      })
+    })
+  }
+
+  it('renders doc title after hydration', () => {
+    cy.visit('/content-doc')
+    cy.get('[data-cy=content-doc-title]', { timeout: 8000 }).should('contain', 'Getting Started')
+  })
+
+  it('renders doc description', () => {
+    cy.visit('/content-doc')
+    cy.get('[data-cy=content-doc-desc]', { timeout: 8000 }).should('contain', 'install')
+  })
+
+  it('renders TOC with at least 2 entries', () => {
+    cy.visit('/content-doc')
+    cy.get('[data-cy=content-doc-toc-item]', { timeout: 8000 }).should('have.length.at.least', 2)
+  })
+
+  it('TOC links have href with # anchor', () => {
+    cy.visit('/content-doc')
+    cy.get('[data-cy=content-doc-toc-link]', { timeout: 8000 }).each(($el) => {
+      const href = $el.attr('href') ?? ''
+      expect(href).to.match(/^#/)
+    })
+  })
+
+  it('TOC has Installation entry', () => {
+    cy.visit('/content-doc')
+    cy.get('[data-cy=content-doc-toc-item]', { timeout: 8000 }).contains('Installation')
+  })
+
+  it('body contains rendered HTML with heading ids', () => {
+    cy.visit('/content-doc')
+    cy.get('[data-cy=content-doc-body]', { timeout: 8000 }).first().within(() => {
+      cy.get('h2[id]').should('have.length.at.least', 1)
+    })
+  })
+
+  it('body contains "Installation" heading', () => {
+    cy.visit('/content-doc')
+    cy.get('[data-cy=content-doc-body]', { timeout: 8000 }).contains('h2', 'Installation')
+  })
+})
+
+// ─── /content-search ──────────────────────────────────────────────────────────
+
+// Helper: set the search input value and fire the input event.
+// We navigate directly to the shadow root of page-content-search to get
+// exactly one element (the JS-hydrated input with the @input listener).
+function setSearchQuery(value: string) {
+  cy.get('cer-layout-view').shadow().find('page-content-search').shadow()
+    .find('[data-cy=content-search-input]')
+    .invoke('val', value)
+    .trigger('input', { force: true })
+}
+
+describe('Content search — useContentSearch()', () => {
+  // Before each search test, intercept the pre-built search index so we can
+  // wait for the component's useOnConnected pre-warm to complete (signals full
+  // hydration).  useContentSearch loads /_content/search-index.json (not the
+  // manifest) via MiniSearch.loadJSON.
+  beforeEach(() => {
+    cy.intercept('GET', '/_content/search-index.json').as('searchIndex')
+  })
+
+  it('renders search input', () => {
+    cy.visit('/content-search')
+    cy.get('[data-cy=content-search-input]').should('exist')
+  })
+
+  it('shows no results before typing 2 chars', () => {
+    cy.visit('/content-search')
+    cy.wait('@searchIndex')
+    setSearchQuery('H')
+    cy.get('[data-cy=content-search-result]').should('not.exist')
+  })
+
+  it('shows results after typing a 2-char query', () => {
+    cy.visit('/content-search')
+    cy.wait('@searchIndex')
+    setSearchQuery('He')
+    cy.get('[data-cy=content-search-result]', { timeout: 8000 }).should('have.length.at.least', 1)
+  })
+
+  it('searching "Hello" finds Hello World post', () => {
+    cy.visit('/content-search')
+    cy.wait('@searchIndex')
+    setSearchQuery('Hello')
+    cy.get('[data-cy=content-search-result]', { timeout: 8000 }).should('contain', 'Hello World')
+  })
+
+  it('searching "Getting" finds Getting Started doc', () => {
+    cy.visit('/content-search')
+    cy.wait('@searchIndex')
+    setSearchQuery('Getting')
+    cy.get('[data-cy=content-search-result]', { timeout: 8000 }).should('contain', 'Getting Started')
+  })
+
+  it('result items have data-path attribute', () => {
+    cy.visit('/content-search')
+    cy.wait('@searchIndex')
+    setSearchQuery('Hello')
+    cy.get('[data-cy=content-search-result]', { timeout: 8000 }).first().should('have.attr', 'data-path')
+  })
+
+  it('clearing query clears results', () => {
+    cy.visit('/content-search')
+    cy.wait('@searchIndex')
+    setSearchQuery('Hello')
+    cy.get('[data-cy=content-search-result]', { timeout: 8000 }).should('have.length.at.least', 1)
+    setSearchQuery('')
+    cy.get('[data-cy=content-search-result]').should('not.exist')
+  })
+})

package/e2e/kitchen-sink/app/pages/content-blog.ts

@@ -0,0 +1,37 @@
+/**
+ * Content blog listing page — exercises `queryContent('/blog').find()`.
+ * Filters to blog prefix, verifies draft exclusion, and renders titles.
+ * Route: /content-blog
+ */
+
+component('page-content-blog', () => {
+  useHead({ title: 'Content Blog — Kitchen Sink' })
+
+  const ssrData = usePageData<{ posts: ContentMeta[] }>()
+  const posts = ref<ContentMeta[]>(ssrData?.posts ?? [])
+
+  useOnConnected(async () => {
+    if (ssrData) return // already hydrated
+    posts.value = await queryContent('/blog').find()
+  })
+
+  return html`
+    <div>
+      <h1 data-cy="content-blog-heading">Blog Posts</h1>
+      <ul data-cy="content-blog-list">
+        ${posts.value.map(post => html`
+          <li data-cy="content-blog-item" data-path="${post._path}">
+            <strong data-cy="content-blog-title">${post.title ?? post._path}</strong>
+            ${post.description ? html`<p data-cy="content-blog-desc">${post.description}</p>` : ''}
+          </li>
+        `)}
+      </ul>
+      ${posts.value.length === 0 ? html`<p data-cy="content-blog-empty">No posts found.</p>` : ''}
+    </div>
+  `
+})
+
+export const loader = async () => {
+  const posts = await queryContent('/blog').find()
+  return { posts }
+}

package/e2e/kitchen-sink/app/pages/content-doc.ts

@@ -0,0 +1,42 @@
+/**
+ * Content doc page — exercises `queryContent('/docs/getting-started').first()`.
+ * Verifies full body, TOC headings with id attributes, and excerpt.
+ * Route: /content-doc
+ */
+
+component('page-content-doc', () => {
+  useHead({ title: 'Content Doc — Kitchen Sink' })
+
+  const ssrData = usePageData<{ doc: ContentItem | null }>()
+  const doc = ref<ContentItem | null>(ssrData?.doc ?? null)
+
+  useOnConnected(async () => {
+    if (ssrData) return // already hydrated
+    doc.value = await queryContent('/docs/getting-started').first()
+  })
+
+  return html`
+    <div>
+      <h1 data-cy="content-doc-heading">Doc Viewer</h1>
+      ${doc.value ? html`
+        <h2 data-cy="content-doc-title">${doc.value.title}</h2>
+        <p data-cy="content-doc-desc">${doc.value.description}</p>
+        <nav data-cy="content-doc-toc">
+          <ul>
+            ${(doc.value.toc ?? []).map(h => html`
+              <li data-cy="content-doc-toc-item" data-depth="${h.depth}">
+                <a href="#${h.id}" data-cy="content-doc-toc-link">${h.text}</a>
+              </li>
+            `)}
+          </ul>
+        </nav>
+        <div data-cy="content-doc-body">${unsafeHTML(doc.value.body)}</div>
+      ` : html`<p data-cy="content-doc-missing">Document not found.</p>`}
+    </div>
+  `
+})
+
+export const loader = async () => {
+  const doc = await queryContent('/docs/getting-started').first()
+  return { doc }
+}

package/e2e/kitchen-sink/app/pages/content-index.ts

@@ -0,0 +1,39 @@
+/**
+ * Content index page — exercises `queryContent().find()` with a page loader.
+ * Route: /content-index
+ */
+
+component('page-content-index', () => {
+  useHead({ title: 'Content Index — Kitchen Sink' })
+
+  const ssrData = usePageData<{ items: ContentMeta[]; total: number }>()
+  const items = ref<ContentMeta[]>(ssrData?.items ?? [])
+  const total = ref<number>(ssrData?.total ?? 0)
+
+  useOnConnected(async () => {
+    if (ssrData) return // already hydrated — skip client fetch
+    const all = await queryContent().find()
+    items.value = all
+    total.value = all.length
+  })
+
+  return html`
+    <div>
+      <h1 data-cy="content-index-heading">All Content</h1>
+      <p data-cy="content-total">Total items: <strong>${total.value}</strong></p>
+      <ul data-cy="content-list">
+        ${items.value.map(item => html`
+          <li data-cy="content-item" data-path="${item._path}">
+            <strong data-cy="content-item-title">${item.title ?? item._path}</strong>
+            ${item.description ? html`<span data-cy="content-item-desc"> — ${item.description}</span>` : ''}
+          </li>
+        `)}
+      </ul>
+    </div>
+  `
+})
+
+export const loader = async () => {
+  const all = await queryContent().find()
+  return { items: all, total: all.length }
+}

package/e2e/kitchen-sink/app/pages/content-search.ts

@@ -0,0 +1,35 @@
+/**
+ * Content search page — exercises `useContentSearch()`.
+ * Typing 2+ characters into the search box triggers MiniSearch results.
+ * Route: /content-search
+ */
+
+component('page-content-search', () => {
+  useHead({ title: 'Content Search — Kitchen Sink' })
+
+  const { query, results } = useContentSearch()
+
+  return html`
+    <div>
+      <h1 data-cy="content-search-heading">Content Search</h1>
+      <input
+        type="search"
+        placeholder="Search content…"
+        data-cy="content-search-input"
+        .value="${query.value}"
+        @input="${(e: Event) => { query.value = (e.target as HTMLInputElement).value }}"
+      />
+      <ul data-cy="content-search-results">
+        ${results.value.map(r => html`
+          <li data-cy="content-search-result" data-path="${r._path}">
+            <a href="${r._path}" data-cy="content-search-link">${r.title ?? r._path}</a>
+            ${r.description ? html`<p data-cy="content-search-desc">${r.description}</p>` : ''}
+          </li>
+        `)}
+      </ul>
+      ${results.value.length === 0 && query.value.length >= 2 ? html`
+        <p data-cy="content-search-empty">No results for "${query.value}".</p>
+      ` : ''}
+    </div>
+  `
+})

package/e2e/kitchen-sink/cer.config.ts

@@ -5,6 +5,7 @@ const LOG_FILE = '/tmp/cer-hooks-test.log'
 
 // Kitchen sink configuration — mode is overridden by --mode CLI flag
 export default {
+  content: {},
   ssg: { routes: 'auto', concurrency: 2 },
   autoImports: { runtime: true, components: true, composables: true },
   runtimeConfig: {

package/e2e/kitchen-sink/content/blog/2026-04-01-hello.md

@@ -0,0 +1,26 @@
+---
+title: Hello World
+description: The first content blog post — tests excerpt and TOC extraction.
+date: 2026-04-01
+draft: false
+---
+
+# Hello World
+
+Welcome to the content layer.
+
+<!-- more -->
+
+## Introduction
+
+This post exercises the `<!-- more -->` excerpt boundary.
+
+## Features
+
+- Parsed frontmatter
+- TOC extraction
+- Excerpt support
+
+## Conclusion
+
+That's all for now.

package/e2e/kitchen-sink/content/blog/2026-04-02-draft.md

@@ -0,0 +1,10 @@
+---
+title: Draft Post
+description: This post is a draft and should be excluded from production builds.
+date: 2026-04-02
+draft: true
+---
+
+# Draft Post
+
+This post should never appear in production because `draft: true`.

package/e2e/kitchen-sink/content/blog/index.md

@@ -0,0 +1,8 @@
+---
+title: Blog
+description: All blog posts — used as a listing page in content tests.
+---
+
+# Blog
+
+Browse all posts below.

package/e2e/kitchen-sink/content/docs/getting-started.md

@@ -0,0 +1,46 @@
+---
+title: Getting Started
+description: How to install and configure the content layer — tests TOC depth and heading ids.
+---
+
+# Getting Started
+
+This guide walks you through installation and basic usage.
+
+## Installation
+
+Run the following command:
+
+```sh
+npm install @jasonshimmy/vite-plugin-cer-app
+```
+
+## Configuration
+
+Add the `content` option to `cer.config.ts`:
+
+```ts
+export default defineConfig({
+  content: {},
+})
+```
+
+### Options
+
+| Option | Default | Description |
+|---|---|---|
+| `dir` | `'content'` | Content directory relative to `app/`. |
+| `drafts` | `false` | Include draft items in production builds. |
+
+## Usage
+
+Use `queryContent()` in any page or loader:
+
+```ts
+const posts = await queryContent('/blog').find()
+```
+
+## Next Steps
+
+- Read the [full docs](https://example.com)
+- Join the community

package/e2e/kitchen-sink/content/index.md

@@ -0,0 +1,16 @@
+---
+title: Welcome
+description: Kitchen sink home content page — verifies root content query.
+---
+
+# Welcome
+
+This is the **root content** item (`_path: '/'`).
+
+<!-- more -->
+
+Below the excerpt boundary.
+
+- Item A
+- Item B
+- Item C

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasonshimmy/vite-plugin-cer-app",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "description": "Nuxt-style meta-framework for @jasonshimmy/custom-elements-runtime",
   "type": "module",
   "keywords": [
@@ -88,21 +88,24 @@
   "dependencies": {
     "commander": "^14.0.3",
     "fast-glob": "^3.3.3",
+    "gray-matter": "^4.0.3",
     "magic-string": "^0.30.21",
+    "marked": "^18.0.0",
+    "minisearch": "^7.2.0",
     "pathe": "^2.0.3"
   },
   "devDependencies": {
-    "@jasonshimmy/custom-elements-runtime": "^3.7.1",
-    "@types/node": "^25.5.0",
+    "@jasonshimmy/custom-elements-runtime": "^3.7.4",
+    "@types/node": "^25.6.0",
     "@vitest/coverage-v8": "^4.1.2",
-    "cypress": "^15.13.0",
-    "eslint": "^10.1.0",
+    "cypress": "^15.13.1",
+    "eslint": "^10.2.0",
     "happy-dom": "^20.8.9",
     "jiti": "^2.6.1",
     "start-server-and-test": "^3.0.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.2",
-    "vite": "^8.0.3",
+    "typescript-eslint": "^8.58.1",
+    "vite": "^8.0.8",
     "vitest": "^4.1.0"
   },
   "publishConfig": {

package/src/__tests__/plugin/build-ssg.test.ts

@@ -137,7 +137,8 @@ describe('buildSSG — path collection', () => {
   it('calls fg when pagesDir exists and no explicit routes', async () => {
     vi.mocked(existsSync).mockReturnValue(true)
     await buildSSG(makeConfig())
-    expect(fg).toHaveBeenCalledTimes(1)
+    // fg is called once for page discovery and once by loadContentStore (content scan)
+    expect(fg).toHaveBeenCalledTimes(2)
   })
 
   it('skips Vite dev server when all discovered pages are static', async () => {

package/src/__tests__/plugin/content/emitter.test.ts

@@ -0,0 +1,117 @@
+import { describe, it, expect } from 'vitest'
+import { contentPathToFile, emitContentFiles } from '../../../plugin/content/emitter.js'
+import { mkdtempSync, readFileSync, existsSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'pathe'
+import type { ContentItem } from '../../../types/content.js'
+
+// ─── contentPathToFile ────────────────────────────────────────────────────────
+
+describe('contentPathToFile', () => {
+  it('maps / to index.json', () => {
+    expect(contentPathToFile('/')).toBe('index.json')
+  })
+
+  it('maps /about to about.json', () => {
+    expect(contentPathToFile('/about')).toBe('about.json')
+  })
+
+  it('maps /blog/hello to blog/hello.json', () => {
+    expect(contentPathToFile('/blog/hello')).toBe('blog/hello.json')
+  })
+
+  it('maps /blog to blog.json', () => {
+    expect(contentPathToFile('/blog')).toBe('blog.json')
+  })
+
+  it('maps /docs/getting-started to docs/getting-started.json', () => {
+    expect(contentPathToFile('/docs/getting-started')).toBe('docs/getting-started.json')
+  })
+})
+
+// ─── emitContentFiles ─────────────────────────────────────────────────────────
+
+describe('emitContentFiles', () => {
+  const items: ContentItem[] = [
+    {
+      _path: '/',
+      _file: 'index.md',
+      _type: 'markdown',
+      title: 'Home',
+      description: 'Welcome',
+      body: '<h1>Home</h1>',
+      toc: [],
+    },
+    {
+      _path: '/blog/hello',
+      _file: 'blog/hello.md',
+      _type: 'markdown',
+      title: 'Hello',
+      description: 'First post',
+      date: '2026-04-03',
+      draft: false,
+      body: '<h1>Hello</h1>',
+      toc: [{ depth: 1, id: 'hello', text: 'Hello' }],
+      excerpt: '<p>Intro</p>',
+    },
+  ]
+
+  it('writes manifest.json with lean ContentMeta (no body/toc/excerpt/_file)', () => {
+    const outDir = mkdtempSync(join(tmpdir(), 'cer-emitter-'))
+    emitContentFiles(items, outDir, '{}')
+    const manifest = JSON.parse(readFileSync(join(outDir, '_content/manifest.json'), 'utf-8'))
+    expect(Array.isArray(manifest)).toBe(true)
+    expect(manifest).toHaveLength(2)
+    const root = manifest.find((m: { _path: string }) => m._path === '/')
+    expect(root.title).toBe('Home')
+    expect('body' in root).toBe(false)
+    expect('toc' in root).toBe(false)
+    expect('excerpt' in root).toBe(false)
+    expect('_file' in root).toBe(false)
+  })
+
+  it('writes search-index.json with provided content', () => {
+    const outDir = mkdtempSync(join(tmpdir(), 'cer-emitter-'))
+    emitContentFiles(items, outDir, '{"test":true}')
+    const idx = JSON.parse(readFileSync(join(outDir, '_content/search-index.json'), 'utf-8'))
+    expect(idx).toEqual({ test: true })
+  })
+
+  it('writes root document to _content/index.json', () => {
+    const outDir = mkdtempSync(join(tmpdir(), 'cer-emitter-'))
+    emitContentFiles(items, outDir, '{}')
+    expect(existsSync(join(outDir, '_content/index.json'))).toBe(true)
+    const doc = JSON.parse(readFileSync(join(outDir, '_content/index.json'), 'utf-8'))
+    expect(doc._path).toBe('/')
+    expect(doc.body).toBe('<h1>Home</h1>')
+  })
+
+  it('writes nested document to correct subdirectory', () => {
+    const outDir = mkdtempSync(join(tmpdir(), 'cer-emitter-'))
+    emitContentFiles(items, outDir, '{}')
+    const docPath = join(outDir, '_content/blog/hello.json')
+    expect(existsSync(docPath)).toBe(true)
+    const doc = JSON.parse(readFileSync(docPath, 'utf-8'))
+    expect(doc._path).toBe('/blog/hello')
+    expect(doc.toc).toEqual([{ depth: 1, id: 'hello', text: 'Hello' }])
+    expect(doc.excerpt).toBe('<p>Intro</p>')
+  })
+
+  it('coexisting blog.json and blog/ dir is allowed', () => {
+    const items2: ContentItem[] = [
+      ...items,
+      {
+        _path: '/blog',
+        _file: 'blog/index.md',
+        _type: 'markdown',
+        title: 'Blog',
+        body: '<p>Blog</p>',
+        toc: [],
+      },
+    ]
+    const outDir = mkdtempSync(join(tmpdir(), 'cer-emitter-'))
+    emitContentFiles(items2, outDir, '{}')
+    expect(existsSync(join(outDir, '_content/blog.json'))).toBe(true)
+    expect(existsSync(join(outDir, '_content/blog/hello.json'))).toBe(true)
+  })
+})