@jasonshimmy/vite-plugin-cer-app 0.4.4 → 0.4.6

package/src/__tests__/plugin/entry-server-template.test.ts

@@ -8,17 +8,120 @@ const src = readFileSync(
 )
 
 describe('entry-server-template (ENTRY_SERVER_TEMPLATE content)', () => {
-  it('template imports plugins from virtual:cer-plugins', () => {
+  it('imports virtual:cer-components', () => {
+    expect(src).toContain('virtual:cer-components')
+  })
+
+  it('imports virtual:cer-routes', () => {
+    expect(src).toContain('virtual:cer-routes')
+  })
+
+  it('imports virtual:cer-layouts', () => {
+    expect(src).toContain('virtual:cer-layouts')
+  })
+
+  it('imports virtual:cer-plugins', () => {
     expect(src).toContain('virtual:cer-plugins')
   })
 
-  it('template initializes plugins and sets globalThis.__cerPluginProvides', () => {
+  it('imports virtual:cer-server-api', () => {
+    expect(src).toContain('virtual:cer-server-api')
+  })
+
+  it('imports registerBuiltinComponents from custom-elements-runtime', () => {
+    expect(src).toContain('registerBuiltinComponents')
+    expect(src).toContain('@jasonshimmy/custom-elements-runtime')
+  })
+
+  it('imports renderToStringWithJITCSSDSD and DSD_POLYFILL_SCRIPT from ssr subpath', () => {
+    expect(src).toContain('renderToStringWithJITCSSDSD')
+    expect(src).toContain('DSD_POLYFILL_SCRIPT')
+    expect(src).toContain('custom-elements-runtime/ssr')
+  })
+
+  it('imports initRouter from router subpath', () => {
+    expect(src).toContain('initRouter')
+    expect(src).toContain('custom-elements-runtime/router')
+  })
+
+  it('imports beginHeadCollection, endHeadCollection, serializeHeadTags from composables', () => {
+    expect(src).toContain('beginHeadCollection')
+    expect(src).toContain('endHeadCollection')
+    expect(src).toContain('serializeHeadTags')
+    expect(src).toContain('vite-plugin-cer-app/composables')
+  })
+
+  it('uses AsyncLocalStorage for request-scoped data isolation', () => {
+    expect(src).toContain('AsyncLocalStorage')
+    expect(src).toContain('node:async_hooks')
+    expect(src).toContain('_cerDataStore')
+    expect(src).toContain('__CER_DATA_STORE__')
+  })
+
+  it('scopes each request in _cerDataStore.run()', () => {
+    expect(src).toContain('_cerDataStore.run(')
+  })
+
+  it('uses _cerDataStore.enterWith() to scope loader data', () => {
+    expect(src).toContain('_cerDataStore.enterWith(data)')
+  })
+
+  it('initializes plugins and sets globalThis.__cerPluginProvides', () => {
     expect(src).toContain('__cerPluginProvides')
     expect(src).toContain('_pluginProvides')
     expect(src).toContain('_pluginsReady')
   })
 
-  it('template awaits _pluginsReady before handling each request', () => {
+  it('awaits _pluginsReady before handling each request', () => {
     expect(src).toContain('await _pluginsReady')
   })
+
+  it('calls registerEntityMap with entities.json', () => {
+    expect(src).toContain('registerEntityMap(entitiesJson)')
+    expect(src).toContain('entities.json')
+  })
+
+  it('loads client index.html for merging', () => {
+    expect(src).toContain('_clientTemplate')
+    expect(src).toContain('../client/index.html')
+  })
+
+  it('defines _mergeWithClientTemplate helper', () => {
+    expect(src).toContain('_mergeWithClientTemplate')
+  })
+
+  it('defines _prepareRequest async function', () => {
+    expect(src).toContain('_prepareRequest')
+  })
+
+  it('uses beginHeadCollection / endHeadCollection around the render', () => {
+    expect(src).toContain('beginHeadCollection()')
+    expect(src).toContain('endHeadCollection()')
+  })
+
+  it('passes dsdPolyfill: false to suppress inline polyfill', () => {
+    expect(src).toContain('dsdPolyfill: false')
+  })
+
+  it('injects DSD_POLYFILL_SCRIPT before </body>', () => {
+    expect(src).toContain("finalHtml.replace('</body>'")
+    expect(src).toContain('DSD_POLYFILL_SCRIPT')
+  })
+
+  it('merges SSR html with client template when available', () => {
+    expect(src).toContain('_mergeWithClientTemplate(ssrHtml, _clientTemplate)')
+  })
+
+  it('exports handler as both named and default export', () => {
+    expect(src).toContain('export const handler')
+    expect(src).toContain('export default handler')
+  })
+
+  it('exports apiRoutes, plugins, layouts, and routes', () => {
+    expect(src).toContain('export { apiRoutes, plugins, layouts, routes }')
+  })
+
+  it('sets Content-Type header on response', () => {
+    expect(src).toContain('text/html; charset=utf-8')
+  })
 })

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

@@ -74,16 +74,6 @@ describe('resolveConfig', () => {
     expect(cfg.port).toBe(4000)
   })
 
-  it('defaults ssr.dsd to true', () => {
-    const cfg = resolveConfig({}, ROOT)
-    expect(cfg.ssr.dsd).toBe(true)
-  })
-
-  it('respects explicit ssr.dsd=false', () => {
-    const cfg = resolveConfig({ ssr: { dsd: false } }, ROOT)
-    expect(cfg.ssr.dsd).toBe(false)
-  })
-
   it('defaults ssg.routes to "auto"', () => {
     const cfg = resolveConfig({}, ROOT)
     expect(cfg.ssg.routes).toBe('auto')

package/src/__tests__/types/config.test.ts

@@ -11,11 +11,6 @@ describe('defineConfig', () => {
     expect(defineConfig({})).toEqual({})
   })
 
-  it('preserves nested ssr config', () => {
-    const config = { ssr: { dsd: false } }
-    expect(defineConfig(config)).toEqual(config)
-  })
-
   it('preserves nested ssg config', () => {
     const config = { ssg: { routes: ['/a', '/b'], concurrency: 2 } }
     expect(defineConfig(config)).toEqual(config)

package/src/cli/create/index.ts

@@ -111,10 +111,17 @@ async function writeTemplateFiles(
 }
 
 /**
- * Returns the path to the template directory for the given mode.
+ * Returns the path to the shared template directory (files common to all modes).
+ */
+function getSharedTemplateDir(): string {
+  return join(__dirname, 'templates', 'shared')
+}
+
+/**
+ * Returns the path to the mode-specific template directory.
  * Resolves relative to the compiled dist output.
  */
-function getTemplateDir(mode: AppMode): string {
+function getModeTemplateDir(mode: AppMode): string {
   // When running from compiled dist/, templates are in create/templates/
   // This file is at dist/cli/create/index.js, so templates are at dist/cli/create/templates/
   return join(__dirname, 'templates', mode)
@@ -148,15 +155,22 @@ async function main(): Promise<void> {
         }
       }
 
-      // Load template files
-      const templateDir = getTemplateDir(mode)
+      // Load template files: shared first, then mode-specific (mode overrides shared)
+      const sharedDir = getSharedTemplateDir()
+      const modeDir = getModeTemplateDir(mode)
 
-      if (!existsSync(templateDir)) {
+      if (!existsSync(sharedDir) && !existsSync(modeDir)) {
         // Fallback: generate minimal template inline
-        console.warn(`[create-cer-app] Template directory not found at ${templateDir}, using inline template.`)
+        console.warn(`[create-cer-app] Template directory not found at ${modeDir}, using inline template.`)
         await generateInlineTemplate(targetDir, projectName, mode)
       } else {
-        const files = await readTemplateFiles(templateDir)
+        const files = new Map<string, string>()
+        if (existsSync(sharedDir)) {
+          for (const [k, v] of await readTemplateFiles(sharedDir)) files.set(k, v)
+        }
+        if (existsSync(modeDir)) {
+          for (const [k, v] of await readTemplateFiles(modeDir)) files.set(k, v)
+        }
         await writeTemplateFiles(files, targetDir, { projectName })
       }
 

package/src/cli/create/templates/{spa → shared}/app/pages/index.ts.tpl

@@ -1,7 +1,7 @@
 component('page-index', () => {
   return html`
     <div>
-      <h1>Welcome to {{projectName}}</h1>
+      <h1 class="text-2xl">Welcome to {{projectName}}</h1>
       <p>Edit <code>app/pages/index.ts</code> to get started.</p>
     </div>
   `

package/src/cli/create/templates/ssg/cer.config.ts.tpl

@@ -6,8 +6,5 @@ export default defineConfig({
     routes: 'auto',
     concurrency: 4,
   },
-  ssr: {
-    dsd: true,
-  },
   autoImports: { components: true, composables: true, directives: true, runtime: true },
 })

package/src/cli/create/templates/ssr/cer.config.ts.tpl

@@ -2,8 +2,5 @@ import { defineConfig } from '@jasonshimmy/vite-plugin-cer-app'
 
 export default defineConfig({
   mode: 'ssr',
-  ssr: {
-    dsd: true,
-  },
   autoImports: { components: true, composables: true, directives: true, runtime: true },
 })

package/src/index.ts

@@ -3,7 +3,7 @@ export { cerApp } from './plugin/index.js'
 export { defineConfig } from './types/config.js'
 
 // Re-export all types
-export type { CerAppConfig, SsgConfig, JitCssConfig, SsrConfig, AutoImportsConfig } from './types/config.js'
+export type { CerAppConfig, SsgConfig, JitCssConfig, AutoImportsConfig } from './types/config.js'
 export type { HydrateStrategy, SsgPathsContext, PageSsgConfig, PageMeta, PageLoaderContext, PageLoader } from './types/page.js'
 export type { ApiRequest, ApiResponse, ApiHandler, ApiContext } from './types/api.js'
 export type { AppContext, AppPlugin } from './types/plugin.js'

package/src/plugin/build-ssr.ts

@@ -3,6 +3,7 @@ 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.
@@ -23,216 +24,8 @@ export function resolveClientEntry(config: ResolvedCerConfig): string {
   return resolve(config.srcDir, 'app.ts')
 }
 
-/**
- * The server entry template that wires all virtual modules together and
- * exports a request handler for Node.js (Express-compatible).
- */
-function generateServerEntryCode(config: ResolvedCerConfig): string {
-  const dsd = config.ssr.dsd
-  const renderImport = dsd
-    ? `import { registerEntityMap, renderToStringWithJITCSSDSD, DSD_POLYFILL_SCRIPT } from '@jasonshimmy/custom-elements-runtime/ssr'`
-    : `import { registerEntityMap, renderToStringWithJITCSS } from '@jasonshimmy/custom-elements-runtime/ssr'`
-  return `// AUTO-GENERATED server entry by @jasonshimmy/vite-plugin-cer-app
-import { readFileSync, existsSync } from 'node:fs'
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import 'virtual:cer-components'
-import routes from 'virtual:cer-routes'
-import layouts from 'virtual:cer-layouts'
-import plugins from 'virtual:cer-plugins'
-import apiRoutes from 'virtual:cer-server-api'
-import { registerBuiltinComponents } from '@jasonshimmy/custom-elements-runtime'
-${renderImport}
-import entitiesJson from '@jasonshimmy/custom-elements-runtime/entities.json'
-import { initRouter } from '@jasonshimmy/custom-elements-runtime/router'
-import { beginHeadCollection, endHeadCollection, serializeHeadTags } from '@jasonshimmy/vite-plugin-cer-app/composables'
-
-registerBuiltinComponents()
-
-// Pre-load the full HTML entity map so named entities like — decode
-// correctly during SSR. Without this the bundled runtime falls back to a
-// minimal set (<, >, & …) and re-escapes everything else.
-registerEntityMap(entitiesJson)
-
-// Run plugins once at server startup so their provide() values are available
-// to useInject() during every SSR/SSG render pass.
-const _pluginProvides = new Map()
-;(globalThis).__cerPluginProvides = _pluginProvides
-const _pluginsReady = (async () => {
-  const _bootstrapRouter = initRouter({ routes })
-  for (const plugin of plugins) {
-    if (plugin && typeof plugin.setup === 'function') {
-      await plugin.setup({
-        router: _bootstrapRouter,
-        provide: (key, value) => _pluginProvides.set(key, value),
-        config: {},
-      })
-    }
-  }
-})()
-
-// Load the Vite-built client index.html (dist/client/index.html) so every SSR
-// response includes the client-side scripts needed for hydration and routing.
-// The server bundle lives at dist/server/server.js, so ../client resolves correctly.
-const _clientTemplatePath = join(dirname(fileURLToPath(import.meta.url)), '../client/index.html')
-const _clientTemplate = existsSync(_clientTemplatePath)
-  ? readFileSync(_clientTemplatePath, 'utf-8')
-  : null
-
-// Merge the SSR rendered body with the Vite client shell so the final page
-// contains both pre-rendered DSD content and the client bundle scripts.
-function _mergeWithClientTemplate(ssrHtml, clientTemplate) {
-  const headTag = '<head>', headCloseTag = '</head>'
-  const bodyTag = '<body>', bodyCloseTag = '</body>'
-  const headStart = ssrHtml.indexOf(headTag)
-  const headEnd   = ssrHtml.indexOf(headCloseTag)
-  const bodyStart = ssrHtml.indexOf(bodyTag)
-  const bodyEnd   = ssrHtml.lastIndexOf(bodyCloseTag)
-  const ssrHead = headStart >= 0 && headEnd > headStart
-    ? ssrHtml.slice(headStart + headTag.length, headEnd).trim() : ''
-  const ssrBody = bodyStart >= 0 && bodyEnd > bodyStart
-    ? ssrHtml.slice(bodyStart + bodyTag.length, bodyEnd).trim() : ssrHtml
-  // Hoist only top-level <style id=...> elements (cer-ssr-jit, cer-ssr-global)
-  // from the SSR body into the document <head>. Plain <style> blocks without
-  // an id attribute belong to shadow DOM templates and must stay in place —
-  // hoisting them to <head> breaks shadow DOM style encapsulation (document
-  // styles do not pierce shadow roots), which is the root cause of FOUC.
-  const headParts = ssrHead ? [ssrHead] : []
-  let ssrBodyContent = ssrBody
-  let pos = 0
-  while (pos < ssrBodyContent.length) {
-    const styleOpen  = ssrBodyContent.indexOf('<style id=', pos)
-    if (styleOpen < 0) break
-    const styleClose = ssrBodyContent.indexOf('</style>', styleOpen)
-    if (styleClose < 0) break
-    headParts.push(ssrBodyContent.slice(styleOpen, styleClose + 8))
-    ssrBodyContent = ssrBodyContent.slice(0, styleOpen) + ssrBodyContent.slice(styleClose + 8)
-    pos = styleOpen
-  }
-  ssrBodyContent = ssrBodyContent.trim()
-  // Inject the pre-rendered layout+page as light DOM of the app mount element
-  // so it is visible before JS boots, then the client router takes over.
-  let merged = clientTemplate
-  if (merged.includes('<cer-layout-view></cer-layout-view>')) {
-    merged = merged.replace('<cer-layout-view></cer-layout-view>',
-      '<cer-layout-view>' + ssrBodyContent + '</cer-layout-view>')
-  } else if (merged.includes('<div id="app"></div>')) {
-    merged = merged.replace('<div id="app"></div>',
-      '<div id="app">' + ssrBodyContent + '</div>')
-  }
-  const headAdditions = headParts.filter(Boolean).join('\\n')
-  if (headAdditions) {
-    // If SSR provides a <title>, replace the client template's <title> so the
-    // SSR title wins (client template title is the fallback default).
-    if (headAdditions.includes('<title>')) {
-      merged = merged.replace(/<title>[^<]*<\\/title>/, '')
-    }
-    merged = merged.replace('</head>', headAdditions + '\\n</head>')
-  }
-  return merged
-}
-
-// Per-request async setup: initialize a fresh router, resolve the matched
-// route and layout, pre-load the page module, and call the data loader.
-// Returns the vnode tree, router, head additions, and the raw loader data.
-//
-// loaderData is returned (not set on globalThis) so the handler can assign it
-// synchronously right before renderToStringWithJITCSS — guaranteeing that
-// concurrent renders (SSG concurrency > 1) never race on a shared global.
-const _prepareRequest = async (req) => {
-  await _pluginsReady
-  const router = initRouter({ routes, initialUrl: req.url ?? '/' })
-  const current = router.getCurrent()
-  const { route, params } = router.matchRoute(current.path)
-  const layoutName = route?.meta?.layout ?? 'default'
-  const layoutTag = layouts[layoutName]
-
-  // Pre-load the page module so we can embed the component tag directly.
-  // This avoids the async router-view (which injects content via script tags
-  // and breaks Declarative Shadow DOM on initial parse).
-  let pageVnode = { tag: 'div', props: {}, children: [] }
-  let head
-  let loaderData = null
-  if (route?.load) {
-    try {
-      const mod = await route.load()
-      const pageTag = mod.default
-      if (pageTag) {
-        pageVnode = { tag: pageTag, props: { attrs: { ...params } }, children: [] }
-      }
-      if (typeof mod.loader === 'function') {
-        const query = current.query ?? {}
-        const data = await mod.loader({ params, query, req })
-        if (data !== undefined && data !== null) {
-          loaderData = data
-          head = \`<script>window.__CER_DATA__ = \${JSON.stringify(data)}</script>\`
-        }
-      }
-    } catch {
-      // Non-fatal: loader errors fall back to an empty page; client will refetch.
-    }
-  }
-
-  const vnode = layoutTag
-    ? { tag: layoutTag, props: {}, children: [pageVnode] }
-    : pageVnode
-
-  return { vnode, router, head, loaderData }
-}
-
-export const handler = async (req, res) => {
-  const { vnode, router, head, loaderData } = await _prepareRequest(req)
-
-  // Set loader data on globalThis synchronously before the render so
-  // usePageData() can read it. Because renderToStringWithJITCSSDSD is entirely
-  // synchronous and JavaScript is single-threaded, no concurrent request can
-  // overwrite __CER_DATA__ between this assignment and the read inside setup().
-  if (loaderData !== null) {
-    ;(globalThis).__CER_DATA__ = loaderData
-  }
-
-  // Begin collecting useHead() calls made during the synchronous render pass.
-  beginHeadCollection()
-
-  // dsdPolyfill: false — we inject the polyfill manually after merging so it
-  // lands at the end of <body>, not inside <cer-layout-view> light DOM where
-  // scripts may not execute.
-  const { htmlWithStyles } = ${dsd ? 'renderToStringWithJITCSSDSD' : 'renderToStringWithJITCSS'}(vnode, {
-    dsdPolyfill: false,
-    router,
-  })
-
-  // Collect and serialize any useHead() calls from the rendered components.
-  const headTags = serializeHeadTags(endHeadCollection())
-
-  // Clear immediately after the synchronous render so the value never leaks
-  // to the next request on this same server process.
-  delete (globalThis).__CER_DATA__
-
-  // Merge loader data script + useHead() tags into the document head.
-  const headContent = [head, headTags].filter(Boolean).join('\\n')
-
-  // Wrap the rendered body in a full HTML document and inject the head additions
-  // (loader data script, useHead() tags, JIT styles). No polyfill in body yet.
-  const ssrHtml = \`<!DOCTYPE html><html><head>\${headContent}</head><body>\${htmlWithStyles}</body></html>\`
-
-  let finalHtml = _clientTemplate
-    ? _mergeWithClientTemplate(ssrHtml, _clientTemplate)
-    : ssrHtml
-
-  // Inject DSD polyfill at end of <body>, outside <cer-layout-view>, so the
-  // browser runs it after parsing the declarative shadow roots.
-  ${dsd ? `finalHtml = finalHtml.includes('</body>')
-    ? finalHtml.replace('</body>', DSD_POLYFILL_SCRIPT + '</body>')
-    : finalHtml + DSD_POLYFILL_SCRIPT` : '// dsd: false — no DSD polyfill needed'}
-
-  res.setHeader('Content-Type', 'text/html; charset=utf-8')
-  res.end(finalHtml)
-}
-
-export { apiRoutes, plugins, layouts }
-export default handler
-`
+function generateServerEntryCode(): string {
+  return ENTRY_SERVER_TEMPLATE
 }
 
 /**
@@ -281,7 +74,7 @@ export async function buildSSR(
   }
 
   // Generate server entry source inline via a virtual plugin
-  const serverEntryCode = generateServerEntryCode(config)
+  const serverEntryCode = generateServerEntryCode()
   const VIRTUAL_SERVER_ENTRY = 'virtual:cer-server-entry'
   const RESOLVED_SERVER_ENTRY = '\0virtual:cer-server-entry'
 

package/src/plugin/dev-server.ts

@@ -15,7 +15,6 @@ export interface ResolvedCerConfig {
   serverApiDir: string
   serverMiddlewareDir: string
   port: number
-  ssr: { dsd: boolean }
   ssg: { routes: 'auto' | string[]; concurrency: number; fallback: boolean }
   router: { base?: string; scrollToFragment?: boolean | object }
   jitCss: { content: string[]; extendedColors: boolean }

package/src/plugin/index.ts

@@ -69,9 +69,6 @@ export function resolveConfig(userConfig: CerAppConfig, root: string = process.c
     serverApiDir: join(root, 'server/api'),
     serverMiddlewareDir: join(root, 'server/middleware'),
     port: userConfig.port ?? 3000,
-    ssr: {
-      dsd: userConfig.ssr?.dsd ?? true,
-    },
     ssg: {
       routes: userConfig.ssg?.routes ?? 'auto',
       concurrency: userConfig.ssg?.concurrency ?? 4,
@@ -140,7 +137,6 @@ function generateAppConfigModule(config: ResolvedCerConfig): string {
   const exportedConfig = {
     mode: config.mode,
     router: config.router,
-    ssr: config.ssr,
     ssg: config.ssg,
   }
   return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const appConfig = ${JSON.stringify(exportedConfig, null, 2)}\nexport default appConfig\n`
@@ -371,13 +367,12 @@ export function cerApp(userConfig: CerAppConfig = {}): Plugin[] {
   // Include cerPlugin from the runtime for JIT CSS support
   // Resolve config eagerly so cerPlugin can use the final resolved values
   const resolvedForJit = resolveConfig(userConfig)
-  const { dsd } = resolvedForJit.ssr
   const { content, ...jitOptions } = resolvedForJit.jitCss
   const jitPlugins = cerPlugin({
     content,
     ...jitOptions,
     ssr: {
-      dsd,
+      dsd: true,
       jit: jitOptions,
     },
   })