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

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

@@ -1,10 +1,7 @@
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { readFileSync } from 'node:fs'
-import { resolve } from 'pathe'
 
-// We test the server entry code generation by importing just that function.
-// The `buildSSR` function itself invokes Vite's `build` API which we don't
-// need to exercise in unit tests (it's an integration concern).
+// We test the SSR build pipeline by exercising buildSSR and its helpers.
+// Template content is tested in entry-server-template.test.ts.
 vi.mock('vite', () => ({ build: vi.fn().mockResolvedValue(undefined) }))
 vi.mock('../../plugin/generated-dir.js', () => ({
   writeGeneratedDir: vi.fn(),
@@ -20,8 +17,6 @@ vi.mock('node:fs', async (importOriginal) => {
 
 import type { ResolvedCerConfig } from '../../plugin/dev-server.js'
 
-// Build a minimal ResolvedCerConfig so we can call generateServerEntryCode
-// without spinning up a real Vite build.
 function makeConfig(overrides: Partial<ResolvedCerConfig> = {}): ResolvedCerConfig {
   return {
     root: '/project',
@@ -32,118 +27,6 @@ function makeConfig(overrides: Partial<ResolvedCerConfig> = {}): ResolvedCerConf
   } as unknown as ResolvedCerConfig
 }
 
-describe('build-ssr generateServerEntryCode (template content)', () => {
-  // Read the source of build-ssr.ts to assert it contains the expected
-  // generated code strings.  This is intentionally coarse-grained:
-  // we check that the template emits the right imports, exports, and
-  // structural elements rather than testing every character.
-  const src = readFileSync(
-    resolve(import.meta.dirname, '../../plugin/build-ssr.ts'),
-    'utf-8',
-  )
-
-  it('template imports registerBuiltinComponents from custom-elements-runtime', () => {
-    expect(src).toContain('registerBuiltinComponents')
-  })
-
-  it('template imports renderToStringWithJITCSS from ssr subpath', () => {
-    expect(src).toContain('renderToStringWithJITCSS')
-    expect(src).toContain('custom-elements-runtime/ssr')
-  })
-
-  it('template imports initRouter from router subpath', () => {
-    expect(src).toContain('initRouter')
-    expect(src).toContain('custom-elements-runtime/router')
-  })
-
-  it('template loads client index.html for merging', () => {
-    expect(src).toContain('_clientTemplate')
-    expect(src).toContain('../client/index.html')
-  })
-
-  it('template defines _mergeWithClientTemplate helper', () => {
-    expect(src).toContain('_mergeWithClientTemplate')
-  })
-
-  it('template defines _prepareRequest async function', () => {
-    expect(src).toContain('_prepareRequest')
-  })
-
-  it('template exports handler as both named and default export', () => {
-    expect(src).toContain('export const handler')
-    expect(src).toContain('export default handler')
-  })
-
-  it('template exports apiRoutes, plugins, and layouts', () => {
-    expect(src).toContain('export { apiRoutes, plugins, layouts }')
-  })
-
-  it('template sets globalThis.__CER_DATA__ synchronously before render', () => {
-    expect(src).toContain('globalThis).__CER_DATA__ = loaderData')
-  })
-
-  it('template deletes __CER_DATA__ after render', () => {
-    expect(src).toContain('delete (globalThis).__CER_DATA__')
-  })
-
-  it('template uses renderToStringWithJITCSSDSD (dsd always on)', () => {
-    expect(src).toContain('renderToStringWithJITCSSDSD')
-  })
-
-  it('template passes dsdPolyfill: false to suppress inline polyfill', () => {
-    expect(src).toContain('dsdPolyfill: false')
-  })
-
-  it('template calls registerEntityMap with entities.json', () => {
-    expect(src).toContain('registerEntityMap(entitiesJson)')
-    expect(src).toContain('entities.json')
-  })
-
-  it('template imports DSD_POLYFILL_SCRIPT and injects before </body>', () => {
-    expect(src).toContain('DSD_POLYFILL_SCRIPT')
-    expect(src).toContain("finalHtml.replace('</body>'")
-  })
-
-  it('template merges SSR html with client template when available', () => {
-    expect(src).toContain('_clientTemplate')
-    expect(src).toContain('_mergeWithClientTemplate(ssrHtml, _clientTemplate)')
-  })
-
-  it('template reads virtual:cer-routes', () => {
-    expect(src).toContain('virtual:cer-routes')
-  })
-
-  it('template reads virtual:cer-layouts', () => {
-    expect(src).toContain('virtual:cer-layouts')
-  })
-
-  it('template reads virtual:cer-plugins', () => {
-    expect(src).toContain('virtual:cer-plugins')
-  })
-
-  it('template reads virtual:cer-server-api', () => {
-    expect(src).toContain('virtual:cer-server-api')
-  })
-
-  it('template reads virtual:cer-components', () => {
-    expect(src).toContain('virtual:cer-components')
-  })
-
-  it('sets Content-Type header on response', () => {
-    expect(src).toContain('text/html; charset=utf-8')
-  })
-
-  it('template 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', () => {
-    expect(src).toContain('await _pluginsReady')
-  })
-})
-
 describe('buildSSR', () => {
   let buildMock: ReturnType<typeof vi.fn>
   let buildSSR: (config: ResolvedCerConfig, userConfig?: Record<string, unknown>) => Promise<void>
@@ -285,7 +168,7 @@ describe('buildSSR — virtual server-entry plugin', () => {
     const plugin = await getServerPlugin()
     const source = plugin.load('\0virtual:cer-server-entry')
     expect(typeof source).toBe('string')
-    expect(source).toContain('AUTO-GENERATED server entry')
+    expect(source).toContain('AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app')
   })
 
   it('load returns undefined for other ids', async () => {

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/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/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,212 +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(): string {
-  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'
-import { registerEntityMap, renderToStringWithJITCSSDSD, DSD_POLYFILL_SCRIPT } from '@jasonshimmy/custom-elements-runtime/ssr'
-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 } = renderToStringWithJITCSSDSD(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.
-  finalHtml = finalHtml.includes('</body>')
-    ? finalHtml.replace('</body>', DSD_POLYFILL_SCRIPT + '</body>')
-    : finalHtml + DSD_POLYFILL_SCRIPT
-
-  res.setHeader('Content-Type', 'text/html; charset=utf-8')
-  res.end(finalHtml)
-}
-
-export { apiRoutes, plugins, layouts }
-export default handler
-`
+  return ENTRY_SERVER_TEMPLATE
 }
 
 /**