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

package/docs/content.md

@@ -473,18 +473,19 @@ Important behavior notes:
 
 **Auto-imported** in pages, layouts, and components.
 
-Returns reactive `query` and `results` refs. The MiniSearch index is loaded once on the client (lazily, the first time the composable is used). Search is debounce-free — results update synchronously on each keypress, but the initial index fetch is async.
+Returns reactive `query`, `results`, and `loading` refs. The MiniSearch index is loaded lazily the first time the component mounts (pre-warmed via `useOnConnected`) and cached for the lifetime of the session. Input is debounced (200 ms) so the index is not queried on every keystroke.
 
 ```ts
-const { query, results } = useContentSearch()
+const { query, results, loading } = useContentSearch()
 ```
 
 ### Return value
 
 ```ts
 interface UseContentSearchReturn {
-  query: Ref<string>               // bind to an <input> value
+  query: Ref<string>                   // bind with :model or @input
   results: Ref<ContentSearchResult[]>  // reactive search results
+  loading: Ref<boolean>                // true from first keystroke until results arrive
 }
 ```
 
@@ -492,10 +493,11 @@ interface UseContentSearchReturn {
 
 ```ts
 component('page-search', () => {
-  const { query, results } = useContentSearch()
+  const { query, results, loading } = useContentSearch()
 
   return html`
     <input type="search" :model="${query}" placeholder="Search…" />
+    ${loading.value ? html`<p>Searching…</p>` : ''}
     <ul>
       ${each(results.value, r => html`
         <li><a :href="${r._path}">${r.title}</a></li>
@@ -505,7 +507,7 @@ component('page-search', () => {
 })
 ```
 
-Search activates when `query.value.length >= 2`. Empty or single-character queries return an empty array.
+`loading` becomes `true` as soon as the user types anything and returns to `false` once results arrive or the query is cleared. An empty query clears results immediately without waiting for the debounce. Search is always client-side — in SSR mode the component renders with empty results and hydrates on mount.
 
 ### Searched fields
 

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

@@ -303,6 +303,63 @@ describe('Content search — useContentSearch()', () => {
     setSearchQuery('')
     cy.get('[data-cy=content-search-result]').should('not.exist')
   })
+
+  it('shows no-results message for an unmatched query', () => {
+    // Use a query with no underscores — MiniSearch tokenizes on \p{P} which
+    // includes underscores, splitting e.g. "foo_bar" into two tokens that can
+    // accidentally match real content via OR semantics.
+    cy.visit('/content-search')
+    cy.wait('@searchIndex')
+    setSearchQuery('zzznomatch')
+    // Wait for the empty state — implicitly waits for loading to clear first
+    cy.get('[data-cy=content-search-empty]', { timeout: 8000 }).should('exist')
+    cy.get('[data-cy=content-search-result]').should('not.exist')
+    cy.get('[data-cy=content-search-loading]').should('not.exist')
+  })
+
+  it('sequential search: search → clear → search again returns correct results', () => {
+    cy.visit('/content-search')
+    cy.wait('@searchIndex')
+
+    // First search
+    setSearchQuery('Hello')
+    cy.get('[data-cy=content-search-result]', { timeout: 8000 }).should('contain', 'Hello World')
+
+    // Clear — results gone
+    setSearchQuery('')
+    cy.get('[data-cy=content-search-result]').should('not.exist')
+    cy.get('[data-cy=content-search-empty]').should('not.exist')
+
+    // Second search with a different term
+    setSearchQuery('Getting')
+    cy.get('[data-cy=content-search-result]', { timeout: 8000 }).should('contain', 'Getting Started')
+    // First search result must not bleed through
+    cy.get('[data-cy=content-search-result]').each(($el) => {
+      expect($el.text()).not.to.include('Hello World')
+    })
+  })
+
+  it('rapid typing triggers only one search request (debounce)', () => {
+    cy.visit('/content-search')
+    cy.wait('@searchIndex')
+
+    // Type characters in quick succession — each triggers a new watch callback
+    // but only the last one should produce a network request after 200 ms.
+    cy.intercept('GET', '/_content/search-index.json').as('secondIndex')
+    setSearchQuery('G')
+    setSearchQuery('Ge')
+    setSearchQuery('Get')
+    setSearchQuery('Gett')
+    setSearchQuery('Getti')
+    setSearchQuery('Getting')
+
+    // Results arrive for the final query
+    cy.get('[data-cy=content-search-result]', { timeout: 8000 }).should('contain', 'Getting Started')
+
+    // The search index is cached after the first pre-warm fetch (singleton), so
+    // no additional network request should occur for these follow-on searches.
+    cy.get('@secondIndex.all').should('have.length', 0)
+  })
 })
 
 // ─── /content-fallback ────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasonshimmy/vite-plugin-cer-app",
-  "version": "0.23.0",
+  "version": "0.23.2",
   "description": "Nuxt-style meta-framework for @jasonshimmy/custom-elements-runtime",
   "type": "module",
   "keywords": [

package/src/__tests__/plugin/app-template.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'pathe'
 import { generateAppEntryTemplate } from '../../runtime/app-template.js'
+import { generateJitInitModule } from '../../plugin/index.js'
 
 const src = readFileSync(
   resolve(import.meta.dirname, '../../runtime/app-template.ts'),
@@ -44,15 +45,27 @@ describe('app-template (source content)', () => {
     expect(src).toContain('custom-elements-runtime/router')
   })
 
-  it('imports enableJITCSS from the jit-css subpath', () => {
-    expect(src).toContain('enableJITCSS')
-    expect(src).toContain('custom-elements-runtime/jit-css')
-  })
-
   it('imports virtual:cer-jit-css', () => {
     expect(src).toContain('virtual:cer-jit-css')
   })
 
+  it('imports virtual:cer-jit-init before virtual:cer-layouts so JIT CSS is enabled before elements upgrade', () => {
+    expect(src).toContain('virtual:cer-jit-init')
+    const initIdx = src.indexOf('virtual:cer-jit-init')
+    const layoutsIdx = src.indexOf('virtual:cer-layouts')
+    const pluginsIdx = src.indexOf('virtual:cer-plugins')
+    expect(initIdx).toBeLessThan(layoutsIdx)
+    expect(initIdx).toBeLessThan(pluginsIdx)
+  })
+
+  it('does not import enableJITCSS in the module body (delegated to virtual:cer-jit-init)', () => {
+    // The enableJITCSS import must not appear in the template literal — it belongs
+    // in virtual:cer-jit-init which runs during the static import phase, before
+    // virtual:cer-layouts and virtual:cer-plugins upgrade custom elements.
+    const templateStart = src.indexOf('return `')
+    expect(src.slice(templateStart)).not.toContain("import { enableJITCSS }")
+  })
+
   it('imports virtual:cer-content-components for markdown-backed custom elements', () => {
     expect(src).toContain('virtual:cer-content-components')
   })
@@ -63,20 +76,50 @@ describe('app-template (source content)', () => {
 })
 
 describe('generateAppEntryTemplate', () => {
-  it('calls enableJITCSS() with no arguments when customColors is omitted', () => {
+  it('includes virtual:cer-jit-init import', () => {
+    const out = generateAppEntryTemplate()
+    expect(out).toContain("import 'virtual:cer-jit-init'")
+  })
+
+  it('places virtual:cer-jit-init before virtual:cer-layouts and virtual:cer-plugins', () => {
+    const out = generateAppEntryTemplate()
+    const initIdx = out.indexOf('virtual:cer-jit-init')
+    const layoutsIdx = out.indexOf('virtual:cer-layouts')
+    const pluginsIdx = out.indexOf('virtual:cer-plugins')
+    expect(initIdx).toBeGreaterThanOrEqual(0)
+    expect(initIdx).toBeLessThan(layoutsIdx)
+    expect(initIdx).toBeLessThan(pluginsIdx)
+  })
+
+  it('does not import enableJITCSS in the generated output (delegated to virtual:cer-jit-init)', () => {
+    const out = generateAppEntryTemplate()
+    expect(out).not.toContain("import { enableJITCSS }")
+  })
+
+  it('still includes all standard template content', () => {
     const out = generateAppEntryTemplate()
+    expect(out).toContain('virtual:cer-jit-css')
+    expect(out).toContain('virtual:cer-routes')
+    expect(out).toContain('export { router }')
+  })
+})
+
+describe('generateJitInitModule', () => {
+  it('calls enableJITCSS() with no arguments when no options are set', () => {
+    const out = generateJitInitModule({ content: [], extendedColors: false, customColors: undefined })
     expect(out).toContain('enableJITCSS()')
     expect(out).not.toContain('customColors')
+    expect(out).not.toContain('extendedColors')
   })
 
   it('calls enableJITCSS() with no arguments when customColors is an empty object', () => {
-    const out = generateAppEntryTemplate({})
+    const out = generateJitInitModule({ content: [], extendedColors: false, customColors: {} })
     expect(out).toContain('enableJITCSS()')
     expect(out).not.toContain('customColors')
   })
 
   it('serializes a single color family into the enableJITCSS call', () => {
-    const out = generateAppEntryTemplate({ brand: { '500': '#7c3aed' } })
+    const out = generateJitInitModule({ content: [], extendedColors: false, customColors: { brand: { '500': '#7c3aed' } } })
     expect(out).toContain('enableJITCSS({ customColors:')
     expect(out).toContain('"brand"')
     expect(out).toContain('"500"')
@@ -84,9 +127,10 @@ describe('generateAppEntryTemplate', () => {
   })
 
   it('serializes multiple color families correctly', () => {
-    const out = generateAppEntryTemplate({
-      brand: { '100': '#ede9fe', '900': '#4c1d95' },
-      accent: { DEFAULT: '#f59e0b' },
+    const out = generateJitInitModule({
+      content: [],
+      extendedColors: false,
+      customColors: { brand: { '100': '#ede9fe', '900': '#4c1d95' }, accent: { DEFAULT: '#f59e0b' } },
     })
     expect(out).toContain('"brand"')
     expect(out).toContain('"accent"')
@@ -95,18 +139,28 @@ describe('generateAppEntryTemplate', () => {
   })
 
   it('serializes CSS variable references as color values', () => {
-    const out = generateAppEntryTemplate({
-      surface: { DEFAULT: 'var(--md-sys-color-surface)' },
+    const out = generateJitInitModule({
+      content: [],
+      extendedColors: false,
+      customColors: { surface: { DEFAULT: 'var(--md-sys-color-surface)' } },
     })
     expect(out).toContain('"surface"')
     expect(out).toContain('var(--md-sys-color-surface)')
   })
 
-  it('still includes all standard template content when customColors is provided', () => {
-    const out = generateAppEntryTemplate({ brand: { '500': '#ff0000' } })
-    expect(out).toContain('virtual:cer-jit-css')
-    expect(out).toContain('virtual:cer-routes')
+  it('includes extendedColors: true when set', () => {
+    const out = generateJitInitModule({ content: [], extendedColors: true, customColors: undefined })
+    expect(out).toContain('extendedColors: true')
+  })
+
+  it('includes extendedColors array when set', () => {
+    const out = generateJitInitModule({ content: [], extendedColors: ['slate', 'blue'], customColors: undefined })
+    expect(out).toContain('extendedColors: ["slate","blue"]')
+  })
+
+  it('imports enableJITCSS from the jit-css subpath', () => {
+    const out = generateJitInitModule({ content: [], extendedColors: false, customColors: undefined })
     expect(out).toContain('enableJITCSS')
-    expect(out).toContain('export { router }')
+    expect(out).toContain('custom-elements-runtime/jit-css')
   })
 })

package/src/__tests__/plugin/html-post-process.test.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect } from 'vitest'
+import {
+  injectFaviconLink,
+  injectCanonicalLink,
+  addNoopenerToExternalLinks,
+  generateRobotsTxt,
+} from '../../plugin/html-post-process.js'
+
+// ---------------------------------------------------------------------------
+// injectFaviconLink
+// ---------------------------------------------------------------------------
+
+describe('injectFaviconLink', () => {
+  it('injects link before </head> when none exists', () => {
+    const html = '<html><head><title>Test</title></head><body></body></html>'
+    const result = injectFaviconLink(html, '/favicon.ico')
+    expect(result).toContain('<link rel="icon" href="/favicon.ico">')
+    expect(result.indexOf('<link rel="icon"')).toBeLessThan(result.indexOf('</head>'))
+  })
+
+  it('does not inject when rel="icon" already present', () => {
+    const html = '<html><head><link rel="icon" href="/custom.ico"></head></html>'
+    expect(injectFaviconLink(html, '/favicon.ico')).toBe(html)
+  })
+
+  it('does not inject when rel="shortcut icon" already present', () => {
+    const html = '<html><head><link rel="shortcut icon" href="/old.ico"></head></html>'
+    expect(injectFaviconLink(html, '/favicon.ico')).toBe(html)
+  })
+
+  it('prepends tag when no </head> is found', () => {
+    const html = '<html><body></body></html>'
+    const result = injectFaviconLink(html, '/favicon.svg')
+    expect(result).toContain('<link rel="icon" href="/favicon.svg">')
+  })
+
+  it('supports svg favicon href', () => {
+    const html = '<html><head></head></html>'
+    expect(injectFaviconLink(html, '/favicon.svg')).toContain('href="/favicon.svg"')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// injectCanonicalLink
+// ---------------------------------------------------------------------------
+
+describe('injectCanonicalLink', () => {
+  it('injects canonical before </head>', () => {
+    const html = '<html><head><title>T</title></head><body></body></html>'
+    const result = injectCanonicalLink(html, 'https://example.com/about')
+    expect(result).toContain('<link rel="canonical" href="https://example.com/about">')
+    expect(result.indexOf('<link rel="canonical"')).toBeLessThan(result.indexOf('</head>'))
+  })
+
+  it('does not inject when canonical already present', () => {
+    const html = '<head><link rel="canonical" href="https://example.com/"></head>'
+    expect(injectCanonicalLink(html, 'https://example.com/')).toBe(html)
+  })
+
+  it('escapes & in the URL', () => {
+    const html = '<html><head></head></html>'
+    const result = injectCanonicalLink(html, 'https://example.com/?a=1&b=2')
+    expect(result).toContain('href="https://example.com/?a=1&amp;b=2"')
+  })
+
+  it('prepends tag when no </head> is found', () => {
+    const html = '<html><body></body></html>'
+    const result = injectCanonicalLink(html, 'https://example.com/')
+    expect(result).toContain('<link rel="canonical"')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// addNoopenerToExternalLinks
+// ---------------------------------------------------------------------------
+
+describe('addNoopenerToExternalLinks', () => {
+  it('adds rel to target="_blank" link with no rel', () => {
+    const html = '<a href="https://example.com" target="_blank">Link</a>'
+    const result = addNoopenerToExternalLinks(html)
+    expect(result).toContain('rel="noopener noreferrer"')
+  })
+
+  it('does not modify links without target="_blank"', () => {
+    const html = '<a href="https://example.com">Link</a>'
+    expect(addNoopenerToExternalLinks(html)).toBe(html)
+  })
+
+  it('does not duplicate when both values already present', () => {
+    const html = '<a href="https://x.com" target="_blank" rel="noopener noreferrer">X</a>'
+    const result = addNoopenerToExternalLinks(html)
+    expect(result).toBe(html)
+  })
+
+  it('appends missing noopener to existing rel', () => {
+    const html = '<a href="https://x.com" target="_blank" rel="noreferrer">X</a>'
+    const result = addNoopenerToExternalLinks(html)
+    expect(result).toContain('noopener')
+    expect(result).toContain('noreferrer')
+  })
+
+  it('appends missing noreferrer to existing rel', () => {
+    const html = '<a href="https://x.com" target="_blank" rel="noopener">X</a>'
+    const result = addNoopenerToExternalLinks(html)
+    expect(result).toContain('noreferrer')
+  })
+
+  it('handles target="_blank" after href in attributes', () => {
+    const html = '<a href="https://x.com" class="btn" target="_blank">X</a>'
+    const result = addNoopenerToExternalLinks(html)
+    expect(result).toContain('rel="noopener noreferrer"')
+  })
+
+  it('handles multiple links in the same document', () => {
+    const html = [
+      '<a href="https://a.com" target="_blank">A</a>',
+      '<a href="/internal">Internal</a>',
+      '<a href="https://b.com" target="_blank">B</a>',
+    ].join('')
+    const result = addNoopenerToExternalLinks(html)
+    expect(result.match(/rel="noopener noreferrer"/g)?.length).toBe(2)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// generateRobotsTxt
+// ---------------------------------------------------------------------------
+
+describe('generateRobotsTxt', () => {
+  it('generates allow-all rules without siteUrl', () => {
+    const txt = generateRobotsTxt(null)
+    expect(txt).toContain('User-agent: *')
+    expect(txt).toContain('Allow: /')
+    expect(txt).not.toContain('Sitemap:')
+  })
+
+  it('includes Sitemap directive when siteUrl is provided', () => {
+    const txt = generateRobotsTxt('https://example.com')
+    expect(txt).toContain('Sitemap: https://example.com/sitemap.xml')
+  })
+
+  it('ends with a newline', () => {
+    expect(generateRobotsTxt(null).endsWith('\n')).toBe(true)
+    expect(generateRobotsTxt('https://example.com').endsWith('\n')).toBe(true)
+  })
+})

package/src/__tests__/plugin/resolve-config.test.ts

@@ -197,4 +197,37 @@ describe('resolveConfig', () => {
     expect(cfg.runtimeConfig.public).toEqual({ apiBase: '/api' })
     expect(cfg.runtimeConfig.private).toEqual({ token: '' })
   })
+
+  it('defaults siteUrl to null when not set', () => {
+    const cfg = resolveConfig({}, ROOT)
+    expect(cfg.siteUrl).toBeNull()
+  })
+
+  it('stores siteUrl with trailing slash stripped', () => {
+    const cfg = resolveConfig({ siteUrl: 'https://example.com/' }, ROOT)
+    expect(cfg.siteUrl).toBe('https://example.com')
+  })
+
+  it('stores siteUrl unchanged when no trailing slash', () => {
+    const cfg = resolveConfig({ siteUrl: 'https://example.com' }, ROOT)
+    expect(cfg.siteUrl).toBe('https://example.com')
+  })
+
+  it('exposes siteUrl in runtimeConfig.public', () => {
+    const cfg = resolveConfig({ siteUrl: 'https://example.com' }, ROOT)
+    expect(cfg.runtimeConfig.public['siteUrl']).toBe('https://example.com')
+  })
+
+  it('does not add siteUrl to runtimeConfig.public when not set', () => {
+    const cfg = resolveConfig({}, ROOT)
+    expect(Object.prototype.hasOwnProperty.call(cfg.runtimeConfig.public, 'siteUrl')).toBe(false)
+  })
+
+  it('user-supplied runtimeConfig.public.siteUrl overrides the siteUrl shorthand', () => {
+    const cfg = resolveConfig({
+      siteUrl: 'https://example.com',
+      runtimeConfig: { public: { siteUrl: 'https://override.com' } },
+    }, ROOT)
+    expect(cfg.runtimeConfig.public['siteUrl']).toBe('https://override.com')
+  })
 })

package/src/__tests__/runtime/app-template.test.ts

@@ -91,6 +91,16 @@ describe('APP_ENTRY_TEMPLATE — meta.hydrate', () => {
     expect(APP_ENTRY_TEMPLATE).toContain('return')
   })
 
+  it('keeps the SSR slot during the initRouter startup microtask navigation (before page chunk loads)', () => {
+    // initRouter() queues queueMicrotask(() => navigate(...)) to run guards on
+    // the entry URL. That microtask fires during await route.load() — before
+    // _currentPageTag is set. Without this guard, _cerHydrating would be set to
+    // false prematurely, dropping the SSR slot and showing an empty router-view.
+    expect(APP_ENTRY_TEMPLATE).toContain(
+      'if (_cerHydrating.value && _currentPageTag !== null) _cerHydrating.value = false',
+    )
+  })
+
   it('exposes router globally as __cerRouter', () => {
     expect(APP_ENTRY_TEMPLATE).toContain('__cerRouter')
   })