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

package/src/plugin/build-ssg.ts

@@ -1,403 +0,0 @@
-import { writeFile, mkdir, readFile } from 'node:fs/promises'
-import { existsSync } from 'node:fs'
-import { join } from 'pathe'
-import {
-  injectFaviconLink,
-  injectCanonicalLink,
-  addNoopenerToExternalLinks,
-  generateRobotsTxt,
-} from './html-post-process.js'
-import { createServer, type UserConfig } from 'vite'
-import type { ResolvedCerConfig } from './dev-server.js'
-import type { ContentItem } from '../types/content.js'
-import { buildSSR } from './build-ssr.js'
-import { buildRouteEntry } from './path-utils.js'
-import fg from 'fast-glob'
-
-interface SsgManifest {
-  generatedAt: string
-  paths: string[]
-  errors: Array<{ path: string; error: string }>
-}
-
-const CONTENT_STORE_KEY = '__CER_CONTENT_STORE__'
-
-
-/**
- * Collects all static paths to generate.
- * For 'auto' mode: scans app/pages/ and collects only static (non-dynamic) routes
- *   plus any dynamic routes that provide ssg.paths().
- * For explicit string[] mode: uses those paths directly.
- */
-/**
- * Expands a set of base paths into locale-prefixed variants when i18n is
- * configured. Skips expansion for `no_prefix` strategy.
- */
-function _expandWithLocales(
-  paths: string[],
-  i18n: ResolvedCerConfig['i18n'],
-): string[] {
-  if (!i18n || i18n.strategy === 'no_prefix') return paths
-  const { locales, defaultLocale, strategy } = i18n
-  const expanded: string[] = []
-  for (const p of paths) {
-    for (const locale of locales) {
-      const isDefault = locale === defaultLocale
-      if (isDefault && strategy === 'prefix_except_default') {
-        expanded.push(p)
-      } else {
-        expanded.push(`/${locale}${p === '/' ? '' : p}`)
-      }
-    }
-  }
-  return [...new Set(expanded)]
-}
-
-async function collectSsgPaths(
-  config: ResolvedCerConfig,
-  viteUserConfig: UserConfig,
-): Promise<string[]> {
-  const ssgConfig = config.ssg
-
-  if (Array.isArray(ssgConfig.routes) && ssgConfig.routes.length > 0) {
-    return _expandWithLocales(ssgConfig.routes, config.i18n)
-  }
-
-  // Auto-discover paths
-  const paths: string[] = ['/']
-
-  if (!existsSync(config.pagesDir)) return paths
-
-  const files = await fg('**/*.ts', {
-    cwd: config.pagesDir,
-    absolute: true,
-    onlyFiles: true,
-  })
-
-  const staticFiles: string[] = []
-  const dynamicFiles: Array<{
-    file: string
-    entry: ReturnType<typeof buildRouteEntry>
-    usesQueryContent: boolean
-  }> = []
-
-  for (const file of files) {
-    // Skip routes that declare render: 'server' or render: 'spa' — they are
-    // either always-SSR or client-only and must not be pre-rendered.
-    let src = ''
-    try {
-      src = await readFile(file, 'utf-8')
-      const renderMatch = src.match(/render\s*:\s*['"]([^'"]+)['"]/)
-      const renderMode = renderMatch ? renderMatch[1] : null
-      if (renderMode === 'server' || renderMode === 'spa') continue
-    } catch { /* ignore read errors */ }
-
-    const entry = buildRouteEntry(file, config.pagesDir)
-    const usesQueryContent = /\bqueryContent\s*\(/.test(src)
-
-    if (!entry.isDynamic && !entry.isCatchAll) {
-      staticFiles.push(file)
-      if (entry.routePath !== '/') {
-        paths.push(entry.routePath)
-      }
-    } else if (entry.isDynamic) {
-      dynamicFiles.push({ file, entry, usesQueryContent })
-    }
-  }
-
-  if (dynamicFiles.length > 0) {
-    // Use a Vite SSR dev server to load page modules with auto-imports applied
-    const viteServer = await createServer({
-      ...viteUserConfig,
-      root: config.root,
-      server: { middlewareMode: true },
-      appType: 'custom',
-      logLevel: 'silent',
-    })
-
-    try {
-      for (const { file, entry, usesQueryContent } of dynamicFiles) {
-        try {
-          const pageMod = await viteServer.ssrLoadModule(file)
-          const pageMeta = pageMod.meta ?? pageMod.pageMeta
-
-          if (pageMeta?.render === 'server' || pageMeta?.render === 'spa') continue
-          if (pageMeta?.ssg?.paths) {
-            const pathsResult = await pageMeta.ssg.paths()
-            for (const ctx of pathsResult) {
-              let resolvedPath = entry.routePath
-              for (const [key, value] of Object.entries(ctx.params as Record<string, unknown>)) {
-                resolvedPath = resolvedPath.replace(`:${key}*`, String(value))
-                resolvedPath = resolvedPath.replace(`:${key}`, String(value))
-              }
-              paths.push(resolvedPath)
-            }
-            continue
-          }
-
-          if (entry.isCatchAll && usesQueryContent) {
-            const contentStore = (globalThis as Record<string, unknown>)[CONTENT_STORE_KEY] as ContentItem[] | undefined
-            const catchAllPaths = _collectCatchAllContentPaths(entry.routePath, contentStore ?? [])
-            paths.push(...catchAllPaths)
-          }
-        } catch {
-          console.warn(`[cer-app] Could not enumerate paths for ${file}`)
-        }
-      }
-    } finally {
-      await viteServer.close()
-    }
-  }
-
-  // When i18n is configured, expand every collected path into locale-prefixed
-  // variants so each locale gets its own pre-rendered HTML file.
-  //   strategy 'prefix'                → /en/about, /fr/about
-  //   strategy 'prefix_except_default' → /about, /fr/about
-  //   strategy 'no_prefix'             → no expansion (locale detected from header/cookie only)
-  if (config.i18n && config.i18n.strategy !== 'no_prefix') {
-    const { locales, defaultLocale, strategy } = config.i18n
-    const expanded: string[] = []
-    for (const p of paths) {
-      for (const locale of locales) {
-        const isDefault = locale === defaultLocale
-        if (isDefault && strategy === 'prefix_except_default') {
-          expanded.push(p)
-        } else {
-          expanded.push(`/${locale}${p === '/' ? '' : p}`)
-        }
-      }
-    }
-    return [...new Set(expanded)]
-  }
-
-  return [...new Set(paths)] // deduplicate
-}
-
-function _collectCatchAllContentPaths(routePath: string, store: ContentItem[]): string[] {
-  if (store.length === 0) return []
-
-  const prefix = routePath
-    .replace(/:[^/]+\*$/, '')
-    .replace(/\/+$/, '') || '/'
-
-  return store
-    .map((item) => item._path)
-    .filter((contentPath) => {
-      if (prefix === '/') return true
-      return contentPath === prefix || contentPath.startsWith(prefix + '/')
-    })
-}
-
-// Cache the server module across renderPath calls (loaded once per SSG run)
-let _serverMod: Record<string, unknown> | null = null
-
-/**
- * Renders a single path using the SSR server bundle and returns the HTML.
- *
- * The server bundle's handler already merges the SSR output with
- * dist/client/index.html internally (via the _mergeWithClientTemplate helper
- * it embeds at build time), so this function simply captures the response.
- */
-async function renderPath(
-  path: string,
-  serverBundlePath: string,
-): Promise<string> {
-  // Load server bundle once
-  if (!_serverMod) {
-    try {
-      _serverMod = await import(serverBundlePath) as Record<string, unknown>
-    } catch (err) {
-      throw new Error(`Failed to load server bundle at ${serverBundlePath}: ${err}`)
-    }
-  }
-
-  const handlerFn =
-    (typeof _serverMod['handler'] === 'function' ? _serverMod['handler'] : null) ??
-    (typeof (_serverMod['default'] as Record<string, unknown> | undefined)?.['handler'] === 'function'
-      ? (_serverMod['default'] as Record<string, unknown>)['handler']
-      : null)
-
-  if (typeof handlerFn !== 'function') {
-    console.warn(`[cer-app] No handler function found in server bundle for path: ${path}`)
-    return ''
-  }
-
-  // Mock req/res for the Express-style handler.
-  // The handler internally merges with dist/client/index.html, so we just
-  // capture whatever it writes/ends with.
-  const mockReq = { url: path, headers: {} }
-  return new Promise<string>((resolve, reject) => {
-    const chunks: string[] = []
-    const mockRes = {
-      setHeader: () => {},
-      write: (chunk: string) => { chunks.push(chunk) },
-      end: (body?: string) => resolve(chunks.join('') + (body ?? '')),
-    }
-    ;(handlerFn as (req: unknown, res: unknown) => Promise<void>)(mockReq, mockRes).catch(reject)
-  })
-}
-
-/**
- * Writes the rendered HTML to the output directory.
- * path '/' -> dist/index.html
- * path '/about' -> dist/about/index.html
- * @internal exported for unit testing
- */
-export async function writeRenderedPath(
-  path: string,
-  html: string,
-  distDir: string,
-): Promise<void> {
-  let outputPath: string
-  if (path === '/') {
-    outputPath = join(distDir, 'index.html')
-  } else {
-    // Normalize path and create directory
-    const cleanPath = path.replace(/^\//, '').replace(/\/$/, '')
-    outputPath = join(distDir, cleanPath, 'index.html')
-  }
-
-  await mkdir(join(outputPath, '..'), { recursive: true })
-  await writeFile(outputPath, html, 'utf-8')
-}
-
-/**
- * Detects which favicon href to use from the project's public directory.
- * Prefers .svg > .ico > .png. Returns null when none is found.
- */
-function detectFaviconHref(root: string): string | null {
-  const candidates = ['/favicon.svg', '/favicon.ico', '/favicon.png']
-  for (const href of candidates) {
-    if (existsSync(join(root, 'public', href.slice(1)))) return href
-  }
-  return null
-}
-
-/**
- * Applies all HTML post-processing transforms to a rendered page.
- *
- * - Injects `<link rel="icon">` when a favicon exists in public/ and none
- *   is already declared in the HTML.
- * - Injects `<link rel="canonical">` when `config.siteUrl` is set and none
- *   is already declared.
- * - Adds `rel="noopener noreferrer"` to every `<a target="_blank">` link
- *   that is missing it.
- */
-function postProcessHtml(
-  html: string,
-  path: string,
-  config: ResolvedCerConfig,
-  faviconHref: string | null,
-): string {
-  let out = html
-
-  if (faviconHref) {
-    out = injectFaviconLink(out, faviconHref)
-  }
-
-  if (config.siteUrl) {
-    const canonicalUrl = config.siteUrl + (path === '/' ? '' : path)
-    out = injectCanonicalLink(out, canonicalUrl)
-  }
-
-  out = addNoopenerToExternalLinks(out)
-
-  return out
-}
-
-/**
- * Full SSG build pipeline:
- * 1. Run the SSR dual-build (client + server bundles)
- * 2. Enumerate all paths to generate
- * 3. Render each path using the server bundle
- * 4. Post-process HTML (favicon, canonical, noopener)
- * 5. Write HTML files to dist/
- * 6. Write robots.txt (when not already present in public/)
- * 7. Write ssg-manifest.json
- */
-export async function buildSSG(
-  config: ResolvedCerConfig,
-  viteUserConfig: UserConfig = {},
-): Promise<void> {
-  const distDir = join(config.root, 'dist')
-  const serverDistDir = join(distDir, 'server')
-  const serverBundlePath = join(serverDistDir, 'server.js')
-
-  console.log('[cer-app] Starting SSG build...')
-
-  // Step 1: Run the SSR build to produce client + server bundles
-  await buildSSR(config, viteUserConfig)
-
-  // Step 2: Collect paths to generate
-  console.log('[cer-app] Collecting SSG paths...')
-  const paths = await collectSsgPaths(config, viteUserConfig)
-  console.log(`[cer-app] Found ${paths.length} path(s) to generate:`, paths)
-
-  // Detect favicon once for use in every page's post-processing pass.
-  const faviconHref = detectFaviconHref(config.root)
-
-  // Step 3+4+5: Render, post-process, 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 })
-  // so concurrent renders are safe — each request carries its own router with its
-  // own URL state and never reads from the shared activeRouterProxy singleton.
-  const concurrency = config.ssg?.concurrency ?? 4
-  console.log(`[cer-app] Rendering ${paths.length} path(s) with concurrency ${concurrency}...`)
-
-  const generatedPaths: string[] = []
-  const errors: Array<{ path: string; error: string }> = []
-
-  // Process paths in chunks of `concurrency` so we don't overwhelm the process
-  // with hundreds of simultaneous renders on very large sites.
-  for (let i = 0; i < paths.length; i += concurrency) {
-    const chunk = paths.slice(i, i + concurrency)
-    const results = await Promise.allSettled(
-      chunk.map(async (path) => {
-        console.log(`[cer-app] Generating: ${path}`)
-        const raw = await renderPath(path, serverBundlePath)
-        const html = postProcessHtml(raw, path, config, faviconHref)
-        await writeRenderedPath(path, html, distDir)
-        return path
-      }),
-    )
-    for (let j = 0; j < results.length; j++) {
-      const result = results[j]
-      if (result.status === 'fulfilled') {
-        generatedPaths.push(result.value)
-      } else {
-        const errorMsg = String(result.reason)
-        console.error(`[cer-app] Failed to generate ${chunk[j]}: ${errorMsg}`)
-        errors.push({ path: chunk[j], error: errorMsg })
-      }
-    }
-  }
-
-  // Step 6: Write robots.txt unless the project supplies its own via public/robots.txt,
-  // which Vite copies to dist/ as-is. Always overwrite any previously generated file so
-  // that siteUrl changes (e.g. adding the Sitemap directive) take effect on rebuild.
-  const publicRobots = join(config.root, 'public', 'robots.txt')
-  if (!existsSync(publicRobots)) {
-    const distRobots = join(distDir, 'robots.txt')
-    await mkdir(distDir, { recursive: true })
-    await writeFile(distRobots, generateRobotsTxt(config.siteUrl), 'utf-8')
-    console.log('[cer-app] Generated robots.txt')
-  }
-
-  // Step 7: Write SSG manifest
-  const manifest: SsgManifest = {
-    generatedAt: new Date().toISOString(),
-    paths: generatedPaths,
-    errors,
-  }
-
-  const manifestPath = join(distDir, 'ssg-manifest.json')
-  await mkdir(distDir, { recursive: true })
-  await writeFile(manifestPath, JSON.stringify(manifest, null, 2), 'utf-8')
-
-  console.log(`[cer-app] SSG build complete.`)
-  console.log(`  Generated ${generatedPaths.length} page(s).`)
-  if (errors.length > 0) {
-    console.warn(`  ${errors.length} error(s) — see ${manifestPath} for details.`)
-  }
-  console.log(`  Manifest: ${manifestPath}`)
-}

package/src/plugin/build-ssr.ts

@@ -1,134 +0,0 @@
-import { build, type UserConfig } from 'vite'
-import { join, resolve } from 'pathe'
-import { existsSync, renameSync } from 'node:fs'
-import type { ResolvedCerConfig } from './dev-server.js'
-import { getGeneratedDir, writeGeneratedDir } from './generated-dir.js'
-import { ENTRY_SERVER_TEMPLATE } from '../runtime/entry-server-template.js'
-
-/**
- * Resolves the client build entry point for an SSR/SSG build.
- *
- * Priority order:
- * 1. `index.html` at the project root — consumer-provided HTML shell.
- * 2. `.cer/index.html` — auto-generated HTML shell (Nuxt-style magic).
- * 3. `app/entry-client.ts` — fallback for projects that manage HTML externally.
- * 4. `app/app.ts` — last resort (same bundle, no DSD hydration preamble).
- */
-export function resolveClientEntry(config: ResolvedCerConfig): string {
-  const indexHtml = resolve(config.root, 'index.html')
-  if (existsSync(indexHtml)) return indexHtml
-  const cerIndexHtml = join(getGeneratedDir(config.root), 'index.html')
-  if (existsSync(cerIndexHtml)) return cerIndexHtml
-  const entryClient = resolve(config.srcDir, 'entry-client.ts')
-  if (existsSync(entryClient)) return entryClient
-  return resolve(config.srcDir, 'app.ts')
-}
-
-function generateServerEntryCode(): string {
-  return ENTRY_SERVER_TEMPLATE
-}
-
-/**
- * Runs the dual (client + server) SSR build using Vite's programmatic API.
- *
- * 1. Client bundle: normal Vite build (outputs to dist/client)
- * 2. Server bundle: SSR build (outputs to dist/server), uses a generated entry
- */
-export async function buildSSR(
-  config: ResolvedCerConfig,
-  viteUserConfig: UserConfig = {},
-): Promise<void> {
-  const clientOutDir = join(config.root, 'dist/client')
-  const serverOutDir = join(config.root, 'dist/server')
-
-  // Write .cer/ generated files BEFORE resolving the client entry so that
-  // .cer/index.html is on disk when resolveClientEntry checks for it.
-  writeGeneratedDir(config)
-
-  // Resolve the client entry — index.html is preferred so Vite writes a
-  // processed index.html to dist/client/ for use as the SSG shell template.
-  const clientEntry = resolveClientEntry(config)
-
-  // Build the client bundle
-  console.log('[cer-app] Building client bundle...')
-  await build({
-    ...viteUserConfig,
-    root: config.root,
-    build: {
-      ...viteUserConfig.build,
-      outDir: clientOutDir,
-      ssrManifest: true,
-      rollupOptions: {
-        input: clientEntry,
-      },
-    },
-  })
-
-  // If the client entry was .cer/index.html, Vite outputs it as
-  // dist/client/.cer/index.html (preserving relative path). The SSR server
-  // template expects dist/client/index.html, so rename it into place.
-  const generatedHtmlOut = join(clientOutDir, '.cer/index.html')
-  const rootHtmlOut = join(clientOutDir, 'index.html')
-  if (existsSync(generatedHtmlOut) && !existsSync(rootHtmlOut)) {
-    renameSync(generatedHtmlOut, rootHtmlOut)
-  }
-
-  // Generate server entry source inline via a virtual plugin
-  const serverEntryCode = generateServerEntryCode()
-  const VIRTUAL_SERVER_ENTRY = 'virtual:cer-server-entry'
-  const RESOLVED_SERVER_ENTRY = '\0virtual:cer-server-entry'
-
-  // Build the server (SSR) bundle
-  console.log('[cer-app] Building server bundle...')
-  await build({
-    ...viteUserConfig,
-    root: config.root,
-    plugins: [
-      ...(viteUserConfig.plugins ?? []),
-      {
-        name: 'vite-plugin-cer-server-entry',
-        enforce: 'pre' as const,
-        resolveId(id: string) {
-          if (id === VIRTUAL_SERVER_ENTRY) return RESOLVED_SERVER_ENTRY
-        },
-        load(id: string) {
-          if (id === RESOLVED_SERVER_ENTRY) return serverEntryCode
-        },
-      },
-    ],
-    build: {
-      ...viteUserConfig.build,
-      outDir: serverOutDir,
-      ssr: true,
-      rollupOptions: {
-        input: VIRTUAL_SERVER_ENTRY,
-        output: {
-          entryFileNames: 'server.js',
-        },
-      },
-    },
-    ssr: {
-      // Keep vite-plugin-cer-app inlined so its virtual-module composables
-      // (useRoute, useState, useFetch, etc.) are available in the server bundle.
-      //
-      // Do NOT add @jasonshimmy/custom-elements-runtime here. Inlining it
-      // creates a second, isolated copy of the component registry (the module-
-      // level Map in namespace-helpers). Third-party CER component libraries
-      // (e.g. @jasonshimmy/cer-material) are external and resolve the runtime
-      // from node_modules at runtime, giving them a *different* Map instance.
-      // That means components registered by plugins never appear in the
-      // renderer's registry → renderToStreamWithJITCSSDSD emits bare stubs
-      // with no DSD → FOUC when the browser upgrades those elements.
-      //
-      // By keeping the runtime external both the server bundle and all
-      // third-party plugins resolve it from node_modules at runtime, sharing
-      // one Map and one registry, so DSD is generated for all registered
-      // components regardless of which package called component().
-      noExternal: ['@jasonshimmy/vite-plugin-cer-app'],
-    },
-  })
-
-  console.log('[cer-app] SSR build complete.')
-  console.log(`  Client: ${clientOutDir}`)
-  console.log(`  Server: ${serverOutDir}`)
-}

package/src/plugin/content/emitter.ts

@@ -1,50 +0,0 @@
-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')
-  }
-}