npm - @jasonshimmy/vite-plugin-cer-app - Versions diffs - 0.1.0 → 0.1.2 - Mend

@jasonshimmy/vite-plugin-cer-app 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/CHANGELOG.md +8 -0
package/IMPLEMENTATION_PLAN.md +1 -1
package/README.md +7 -7
package/VITE_PLUGIN_FRAMEWORK_PLAN.md +12 -12
package/commits.txt +1 -3
package/dist/cli/commands/generate.d.ts.map +1 -1
package/dist/cli/commands/generate.js +2 -0
package/dist/cli/commands/generate.js.map +1 -1
package/dist/cli/commands/preview.d.ts.map +1 -1
package/dist/cli/commands/preview.js +21 -2
package/dist/cli/commands/preview.js.map +1 -1
package/dist/cli/create/index.js +2 -2
package/dist/cli/create/index.js.map +1 -1
package/dist/cli/index.js +1 -1
package/dist/cli/index.js.map +1 -1
package/dist/plugin/build-ssg.d.ts.map +1 -1
package/dist/plugin/build-ssg.js +10 -21
package/dist/plugin/build-ssg.js.map +1 -1
package/dist/plugin/build-ssr.d.ts.map +1 -1
package/dist/plugin/build-ssr.js +151 -28
package/dist/plugin/build-ssr.js.map +1 -1
package/dist/plugin/dts-generator.js +4 -4
package/dist/plugin/dts-generator.js.map +1 -1
package/dist/plugin/index.js +2 -2
package/dist/plugin/index.js.map +1 -1
package/dist/plugin/transforms/auto-import.js +3 -3
package/dist/plugin/transforms/auto-import.js.map +1 -1
package/dist/plugin/virtual/components.js +3 -3
package/dist/plugin/virtual/components.js.map +1 -1
package/dist/plugin/virtual/composables.js +3 -3
package/dist/plugin/virtual/composables.js.map +1 -1
package/dist/plugin/virtual/error.js +2 -2
package/dist/plugin/virtual/error.js.map +1 -1
package/dist/plugin/virtual/layouts.js +3 -3
package/dist/plugin/virtual/layouts.js.map +1 -1
package/dist/plugin/virtual/loading.js +2 -2
package/dist/plugin/virtual/loading.js.map +1 -1
package/dist/plugin/virtual/middleware.js +3 -3
package/dist/plugin/virtual/middleware.js.map +1 -1
package/dist/plugin/virtual/plugins.js +3 -3
package/dist/plugin/virtual/plugins.js.map +1 -1
package/dist/plugin/virtual/routes.d.ts.map +1 -1
package/dist/plugin/virtual/routes.js +14 -4
package/dist/plugin/virtual/routes.js.map +1 -1
package/dist/plugin/virtual/server-api.js +3 -3
package/dist/plugin/virtual/server-api.js.map +1 -1
package/dist/plugin/virtual/server-middleware.js +3 -3
package/dist/plugin/virtual/server-middleware.js.map +1 -1
package/dist/runtime/app-template.d.ts +1 -1
package/dist/runtime/app-template.d.ts.map +1 -1
package/dist/runtime/app-template.js +6 -0
package/dist/runtime/app-template.js.map +1 -1
package/dist/runtime/composables/use-page-data.d.ts +15 -6
package/dist/runtime/composables/use-page-data.d.ts.map +1 -1
package/dist/runtime/composables/use-page-data.js +30 -9
package/dist/runtime/composables/use-page-data.js.map +1 -1
package/dist/runtime/entry-server-template.d.ts +1 -1
package/dist/runtime/entry-server-template.d.ts.map +1 -1
package/dist/runtime/entry-server-template.js +138 -17
package/dist/runtime/entry-server-template.js.map +1 -1
package/docs/cli.md +2 -2
package/docs/configuration.md +4 -4
package/docs/data-loading.md +8 -7
package/docs/getting-started.md +5 -5
package/docs/head-management.md +3 -3
package/docs/middleware.md +2 -2
package/docs/plugins.md +1 -1
package/docs/rendering-modes.md +1 -1
package/docs/routing.md +1 -1
package/docs/server-api.md +10 -1
package/docs/testing.md +4 -4
package/package.json +1 -1
package/src/__tests__/index.test.ts +21 -0
package/src/__tests__/plugin/build-ssg.test.ts +265 -0
package/src/__tests__/plugin/build-ssr.test.ts +180 -0
package/src/__tests__/plugin/cer-app-plugin.test.ts +409 -0
package/src/__tests__/plugin/dts-generator.test.ts +246 -0
package/src/__tests__/plugin/resolve-config.test.ts +158 -0
package/src/__tests__/plugin/transforms/auto-import.test.ts +1 -1
package/src/__tests__/plugin/virtual/components.test.ts +1 -1
package/src/__tests__/plugin/virtual/composables.test.ts +1 -1
package/src/__tests__/plugin/virtual/error.test.ts +71 -0
package/src/__tests__/plugin/virtual/layouts.test.ts +1 -1
package/src/__tests__/plugin/virtual/loading.test.ts +72 -0
package/src/__tests__/plugin/virtual/middleware.test.ts +1 -1
package/src/__tests__/plugin/virtual/plugins.test.ts +1 -1
package/src/__tests__/plugin/virtual/routes.test.ts +1 -1
package/src/__tests__/plugin/virtual/server-api.test.ts +1 -1
package/src/__tests__/plugin/virtual/server-middleware.test.ts +102 -0
package/src/__tests__/runtime/use-page-data.test.ts +81 -5
package/src/__tests__/types/config.test.ts +23 -0
package/src/cli/commands/generate.ts +2 -0
package/src/cli/commands/preview.ts +21 -2
package/src/cli/create/index.ts +2 -2
package/src/cli/create/templates/spa/cer.config.ts.tpl +1 -1
package/src/cli/create/templates/spa/package.json.tpl +1 -1
package/src/cli/create/templates/ssg/cer.config.ts.tpl +1 -1
package/src/cli/create/templates/ssg/package.json.tpl +1 -1
package/src/cli/create/templates/ssr/cer.config.ts.tpl +1 -1
package/src/cli/create/templates/ssr/package.json.tpl +1 -1
package/src/cli/index.ts +1 -1
package/src/plugin/build-ssg.ts +9 -22
package/src/plugin/build-ssr.ts +150 -28
package/src/plugin/dts-generator.ts +4 -4
package/src/plugin/index.ts +2 -2
package/src/plugin/transforms/auto-import.ts +3 -3
package/src/plugin/virtual/components.ts +3 -3
package/src/plugin/virtual/composables.ts +3 -3
package/src/plugin/virtual/error.ts +2 -2
package/src/plugin/virtual/layouts.ts +3 -3
package/src/plugin/virtual/loading.ts +2 -2
package/src/plugin/virtual/middleware.ts +3 -3
package/src/plugin/virtual/plugins.ts +3 -3
package/src/plugin/virtual/routes.ts +15 -4
package/src/plugin/virtual/server-api.ts +3 -3
package/src/plugin/virtual/server-middleware.ts +3 -3
package/src/runtime/app-template.ts +6 -0
package/src/runtime/composables/use-page-data.ts +31 -9
package/src/runtime/entry-server-template.ts +138 -17
package/tsconfig.build.json +1 -1
package/dist/__tests__/plugin/path-utils.test.d.ts +0 -2
package/dist/__tests__/plugin/path-utils.test.d.ts.map +0 -1
package/dist/__tests__/plugin/path-utils.test.js +0 -305
package/dist/__tests__/plugin/path-utils.test.js.map +0 -1
package/dist/__tests__/plugin/scanner.test.d.ts +0 -2
package/dist/__tests__/plugin/scanner.test.d.ts.map +0 -1
package/dist/__tests__/plugin/scanner.test.js +0 -143
package/dist/__tests__/plugin/scanner.test.js.map +0 -1
package/dist/__tests__/plugin/transforms/auto-import.test.d.ts +0 -2
package/dist/__tests__/plugin/transforms/auto-import.test.d.ts.map +0 -1
package/dist/__tests__/plugin/transforms/auto-import.test.js +0 -151
package/dist/__tests__/plugin/transforms/auto-import.test.js.map +0 -1
package/dist/__tests__/plugin/transforms/head-inject.test.d.ts +0 -2
package/dist/__tests__/plugin/transforms/head-inject.test.d.ts.map +0 -1
package/dist/__tests__/plugin/transforms/head-inject.test.js +0 -151
package/dist/__tests__/plugin/transforms/head-inject.test.js.map +0 -1
package/dist/__tests__/plugin/virtual/components.test.d.ts +0 -2
package/dist/__tests__/plugin/virtual/components.test.d.ts.map +0 -1
package/dist/__tests__/plugin/virtual/components.test.js +0 -47
package/dist/__tests__/plugin/virtual/components.test.js.map +0 -1
package/dist/__tests__/plugin/virtual/composables.test.d.ts +0 -2
package/dist/__tests__/plugin/virtual/composables.test.d.ts.map +0 -1
package/dist/__tests__/plugin/virtual/composables.test.js +0 -48
package/dist/__tests__/plugin/virtual/composables.test.js.map +0 -1
package/dist/__tests__/plugin/virtual/layouts.test.d.ts +0 -2
package/dist/__tests__/plugin/virtual/layouts.test.d.ts.map +0 -1
package/dist/__tests__/plugin/virtual/layouts.test.js +0 -59
package/dist/__tests__/plugin/virtual/layouts.test.js.map +0 -1
package/dist/__tests__/plugin/virtual/middleware.test.d.ts +0 -2
package/dist/__tests__/plugin/virtual/middleware.test.d.ts.map +0 -1
package/dist/__tests__/plugin/virtual/middleware.test.js +0 -58
package/dist/__tests__/plugin/virtual/middleware.test.js.map +0 -1
package/dist/__tests__/plugin/virtual/plugins.test.d.ts +0 -2
package/dist/__tests__/plugin/virtual/plugins.test.d.ts.map +0 -1
package/dist/__tests__/plugin/virtual/plugins.test.js +0 -73
package/dist/__tests__/plugin/virtual/plugins.test.js.map +0 -1
package/dist/__tests__/plugin/virtual/routes.test.d.ts +0 -2
package/dist/__tests__/plugin/virtual/routes.test.d.ts.map +0 -1
package/dist/__tests__/plugin/virtual/routes.test.js +0 -167
package/dist/__tests__/plugin/virtual/routes.test.js.map +0 -1
package/dist/__tests__/plugin/virtual/server-api.test.d.ts +0 -2
package/dist/__tests__/plugin/virtual/server-api.test.d.ts.map +0 -1
package/dist/__tests__/plugin/virtual/server-api.test.js +0 -72
package/dist/__tests__/plugin/virtual/server-api.test.js.map +0 -1
package/dist/__tests__/runtime/use-head.test.d.ts +0 -2
package/dist/__tests__/runtime/use-head.test.d.ts.map +0 -1
package/dist/__tests__/runtime/use-head.test.js +0 -202
package/dist/__tests__/runtime/use-head.test.js.map +0 -1
package/dist/__tests__/runtime/use-page-data.test.d.ts +0 -2
package/dist/__tests__/runtime/use-page-data.test.d.ts.map +0 -1
package/dist/__tests__/runtime/use-page-data.test.js +0 -41
package/dist/__tests__/runtime/use-page-data.test.js.map +0 -1

package/src/plugin/build-ssr.ts CHANGED Viewed

@@ -3,66 +3,189 @@ import { join, resolve } from 'pathe'
 import { existsSync } from 'node:fs'
 import type { ResolvedCerConfig } from './dev-server.js'
+/**
+ * Resolves the client build entry point for an SSR/SSG build.
+ *
+ * Priority order:
+ * 1. `index.html` at the project root — preferred because Vite writes a
+ *    processed `index.html` to `dist/client/` with correct asset references,
+ *    which `renderPath` then uses as the shell template for SSG pages.
+ * 2. `app/entry-client.ts` — fallback for projects that handle HTML injection
+ *    themselves (e.g. a custom Express server).
+ * 3. `app/app.ts` — last resort (same bundle, no DSD hydration preamble).
+ */
+function resolveClientEntry(config: ResolvedCerConfig): string {
+  const indexHtml = resolve(config.root, 'index.html')
+  if (existsSync(indexHtml)) return indexHtml
+  const entryClient = resolve(config.srcDir, 'entry-client.ts')
+  if (existsSync(entryClient)) return entryClient
+  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 {
-  return `// AUTO-GENERATED server entry by vite-plugin-cer-app
+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 { html, registerBuiltinComponents } from '@jasonshimmy/custom-elements-runtime'
+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 { createStreamingSSRHandler } from '@jasonshimmy/custom-elements-runtime/ssr-middleware'
 registerBuiltinComponents()
-// Per-request VNode factory: initialize a fresh router at the request URL,
-// resolve the active layout from the matched route's meta, wrap the router-view
-// in that layout element, and call the route's data loader so the result is
-// serialized as window.__CER_DATA__ for client-side hydration.
+// Pre-load the full HTML entity map so named entities like &mdash; decode
+// correctly during SSR. Without this the bundled runtime falls back to a
+// minimal set (&lt;, &gt;, &amp; …) and re-escapes everything else.
+registerEntityMap(entitiesJson)
+// 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 <style> elements from the SSR body into the document <head> so
+  // JIT CSS rules are applied before the layout paints.
+  const headParts = ssrHead ? [ssrHead] : []
+  let ssrBodyContent = ssrBody
+  let pos = 0
+  while (pos < ssrBodyContent.length) {
+    const styleOpen  = ssrBodyContent.indexOf('<style', 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) 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.
 //
-// createStreamingSSRHandler threads the router through each component's SSR
-// context so concurrent renders never share state.
-const vnodeFactory = async (req) => {
+// 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) => {
   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]
-  const inner = html\`<router-view></router-view>\`
-  const vnode = layoutTag
-    ? { tag: layoutTag, props: {}, children: [inner] }
-    : inner
-  // Call the route's data loader (if present) and serialize for client hydration.
+  // 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 {
-      // Loader errors are non-fatal during SSR; the client will refetch.
+      // Non-fatal: loader errors fall back to an empty page; client will refetch.
     }
   }
-  return { vnode, router, head }
+  const vnode = layoutTag
+    ? { tag: layoutTag, props: {}, children: [pageVnode] }
+    : pageVnode
+  return { vnode, router, head, loaderData }
 }
-export const handler = createStreamingSSRHandler(vnodeFactory, {
-  render: {
-    dsd: ${config.ssr.dsd},
-  },
-})
+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
+  }
+  // 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,
+  })
+  // Clear immediately after the synchronous render so the value never leaks
+  // to the next request on this same server process.
+  delete (globalThis).__CER_DATA__
+  // 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>\${head ?? ''}</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
@@ -82,10 +205,9 @@ export async function buildSSR(
   const clientOutDir = join(config.root, 'dist/client')
   const serverOutDir = join(config.root, 'dist/server')
-  // Determine client entry — prefer entry-client.ts, fall back to app.ts
-  const clientEntry = existsSync(resolve(config.srcDir, 'entry-client.ts'))
-    ? resolve(config.srcDir, 'entry-client.ts')
-    : resolve(config.srcDir, 'app.ts')
+  // 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...')
@@ -103,7 +225,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/dts-generator.ts CHANGED Viewed

@@ -94,7 +94,7 @@ export async function generateAutoImportDts(
   const exports = composableExports ?? await scanComposableExports(composablesDir)
   const lines: string[] = [
-    '// AUTO-GENERATED by vite-plugin-cer-app',
+    '// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app',
     '// Do not edit — regenerated automatically on dev server start and build.',
     '',
     'export {}',
@@ -115,7 +115,7 @@ export async function generateAutoImportDts(
   lines.push('')
   for (const name of FRAMEWORK_GLOBALS) {
-    lines.push(`  const ${name}: typeof import('vite-plugin-cer-app/composables')['${name}']`)
+    lines.push(`  const ${name}: typeof import('@jasonshimmy/vite-plugin-cer-app/composables')['${name}']`)
   }
   if (exports.size > 0) {
@@ -151,7 +151,7 @@ export async function generateVirtualModuleDts(
   const exports = composableExports ?? await scanComposableExports(composablesDir)
   const lines: string[] = [
-    '// AUTO-GENERATED by vite-plugin-cer-app',
+    '// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app',
     '// Do not edit — regenerated automatically on dev server start and build.',
     '',
     `declare module 'virtual:cer-routes' {`,
@@ -164,7 +164,7 @@ export async function generateVirtualModuleDts(
     `declare module 'virtual:cer-components' {}`,
     '',
     `declare module 'virtual:cer-plugins' {`,
-    `  import type { AppPlugin } from 'vite-plugin-cer-app/types'`,
+    `  import type { AppPlugin } from '@jasonshimmy/vite-plugin-cer-app/types'`,
     `  const plugins: AppPlugin[]`,
     `  export default plugins`,
     `}`,

package/src/plugin/index.ts CHANGED Viewed

@@ -133,7 +133,7 @@ function generateAppConfigModule(config: ResolvedCerConfig): string {
     ssr: config.ssr,
     ssg: config.ssg,
   }
-  return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const appConfig = ${JSON.stringify(exportedConfig, null, 2)}\nexport default appConfig\n`
+  return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const appConfig = ${JSON.stringify(exportedConfig, null, 2)}\nexport default appConfig\n`
 }
 /**
@@ -183,7 +183,7 @@ export function cerApp(userConfig: CerAppConfig = {}): Plugin[] {
   const moduleCache = new Map<string, string>()
   const cerAppPlugin: Plugin = {
-    name: 'vite-plugin-cer-app',
+    name: '@jasonshimmy/vite-plugin-cer-app',
     config(viteConfig) {
       const root = viteConfig.root ? resolve(viteConfig.root) : process.cwd()

package/src/plugin/transforms/auto-import.ts CHANGED Viewed

@@ -11,7 +11,7 @@ const RUNTIME_IMPORTS = `import { component, html, css, ref, computed, watch, wa
 const DIRECTIVE_IMPORTS = `import { when, each, match, anchorBlock } from '@jasonshimmy/custom-elements-runtime/directives';`
-const FRAMEWORK_IMPORTS = `import { useHead, usePageData } from 'vite-plugin-cer-app/composables';`
+const FRAMEWORK_IMPORTS = `import { useHead, usePageData } from '@jasonshimmy/vite-plugin-cer-app/composables';`
 const FRAMEWORK_IDENTIFIERS = ['useHead', 'usePageData']
@@ -160,8 +160,8 @@ function buildComposableImport(code: string, composableExports?: Map<string, str
  * Returns true if injection is needed (not already imported).
  */
 function isFrameworkImportNeeded(code: string): boolean {
-  if (code.includes("from 'vite-plugin-cer-app/composables'") ||
-      code.includes('from "vite-plugin-cer-app/composables"')) {
+  if (code.includes("from '@jasonshimmy/vite-plugin-cer-app/composables'") ||
+      code.includes('from "@jasonshimmy/vite-plugin-cer-app/composables"')) {
     return false
   }

package/src/plugin/virtual/components.ts CHANGED Viewed

@@ -7,16 +7,16 @@ import { scanDirectory } from '../scanner.js'
  */
 export async function generateComponentsCode(componentsDir: string): Promise<string> {
   if (!existsSync(componentsDir)) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\n// No components directory found\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\n// No components directory found\n`
   }
   const files = await scanDirectory('**/*.ts', componentsDir)
   if (files.length === 0) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\n// No components found\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\n// No components found\n`
   }
-  const lines: string[] = ['// AUTO-GENERATED by vite-plugin-cer-app', '']
+  const lines: string[] = ['// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app', '']
   for (const file of files) {
     lines.push(`import ${JSON.stringify(file)}`)

package/src/plugin/virtual/composables.ts CHANGED Viewed

@@ -7,16 +7,16 @@ import { scanDirectory } from '../scanner.js'
  */
 export async function generateComposablesCode(composablesDir: string): Promise<string> {
   if (!existsSync(composablesDir)) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\n// No composables directory found\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\n// No composables directory found\n`
   }
   const files = await scanDirectory('**/*.ts', composablesDir)
   if (files.length === 0) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\n// No composables found\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\n// No composables found\n`
   }
-  const lines: string[] = ['// AUTO-GENERATED by vite-plugin-cer-app', '']
+  const lines: string[] = ['// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app', '']
   for (const file of files) {
     lines.push(`export * from ${JSON.stringify(file)}`)

package/src/plugin/virtual/error.ts CHANGED Viewed

@@ -17,7 +17,7 @@ export async function generateErrorCode(srcDir: string): Promise<string> {
   if (!existsSync(errorFile)) {
     return [
-      '// AUTO-GENERATED by vite-plugin-cer-app',
+      '// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app',
       'export const hasError = false',
       'export const errorTag = null',
       '',
@@ -25,7 +25,7 @@ export async function generateErrorCode(srcDir: string): Promise<string> {
   }
   return [
-    '// AUTO-GENERATED by vite-plugin-cer-app',
+    '// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app',
     `import ${JSON.stringify(errorFile)}`,
     'export const hasError = true',
     "export const errorTag = 'page-error'",

package/src/plugin/virtual/layouts.ts CHANGED Viewed

@@ -8,16 +8,16 @@ import { fileToLayoutName, fileToLayoutTagName } from '../path-utils.js'
  */
 export async function generateLayoutsCode(layoutsDir: string): Promise<string> {
   if (!existsSync(layoutsDir)) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const layouts = {}\nexport default layouts\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const layouts = {}\nexport default layouts\n`
   }
   const files = await scanDirectory('**/*.ts', layoutsDir)
   if (files.length === 0) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const layouts = {}\nexport default layouts\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const layouts = {}\nexport default layouts\n`
   }
-  const lines: string[] = ['// AUTO-GENERATED by vite-plugin-cer-app', '']
+  const lines: string[] = ['// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app', '']
   // Side-effect imports to register the layout custom elements
   for (const file of files) {

package/src/plugin/virtual/loading.ts CHANGED Viewed

@@ -16,7 +16,7 @@ export async function generateLoadingCode(srcDir: string): Promise<string> {
   if (!existsSync(loadingFile)) {
     return [
-      '// AUTO-GENERATED by vite-plugin-cer-app',
+      '// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app',
       'export const hasLoading = false',
       'export const loadingTag = null',
       '',
@@ -24,7 +24,7 @@ export async function generateLoadingCode(srcDir: string): Promise<string> {
   }
   return [
-    '// AUTO-GENERATED by vite-plugin-cer-app',
+    '// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app',
     `import ${JSON.stringify(loadingFile)}`,
     'export const hasLoading = true',
     "export const loadingTag = 'page-loading'",

package/src/plugin/virtual/middleware.ts CHANGED Viewed

@@ -8,16 +8,16 @@ import { scanDirectory } from '../scanner.js'
  */
 export async function generateMiddlewareCode(middlewareDir: string): Promise<string> {
   if (!existsSync(middlewareDir)) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const middleware = {}\nexport default middleware\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const middleware = {}\nexport default middleware\n`
   }
   const files = await scanDirectory('**/*.ts', middlewareDir)
   if (files.length === 0) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const middleware = {}\nexport default middleware\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const middleware = {}\nexport default middleware\n`
   }
-  const lines: string[] = ['// AUTO-GENERATED by vite-plugin-cer-app', '']
+  const lines: string[] = ['// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app', '']
   const entries: Array<{ alias: string; name: string }> = []

package/src/plugin/virtual/plugins.ts CHANGED Viewed

@@ -8,17 +8,17 @@ import { sortPluginFiles } from '../path-utils.js'
  */
 export async function generatePluginsCode(pluginsDir: string): Promise<string> {
   if (!existsSync(pluginsDir)) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const plugins = []\nexport default plugins\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const plugins = []\nexport default plugins\n`
   }
   const files = await scanDirectory('**/*.ts', pluginsDir)
   if (files.length === 0) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const plugins = []\nexport default plugins\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const plugins = []\nexport default plugins\n`
   }
   const sorted = sortPluginFiles(files)
-  const lines: string[] = ['// AUTO-GENERATED by vite-plugin-cer-app', '']
+  const lines: string[] = ['// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app', '']
   const aliases: string[] = []
   sorted.forEach((file, i) => {

package/src/plugin/virtual/routes.ts CHANGED Viewed

@@ -51,16 +51,16 @@ function extractLayout(source: string): string | null {
  */
 export async function generateRoutesCode(pagesDir: string): Promise<string> {
   if (!existsSync(pagesDir)) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nconst routes = []\nexport default routes\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nconst routes = []\nexport default routes\n`
   }
   const files = await scanDirectory('**/*.ts', pagesDir)
   if (files.length === 0) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nconst routes = []\nexport default routes\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nconst routes = []\nexport default routes\n`
   }
-  const entries = files.map((f) => {
+  const rawEntries = files.map((f) => {
     const entry = buildRouteEntry(f, pagesDir)
     // 404.ts convention: treat as catch-all not-found route
     if (basename(f) === '404.ts') {
@@ -68,6 +68,17 @@ export async function generateRoutesCode(pagesDir: string): Promise<string> {
     }
     return entry
   })
+  // Deduplicate by routePath — keep the first occurrence after sorting to
+  // avoid "Duplicate route path detected" warnings (e.g. when both 404.ts
+  // and [...all].ts resolve to the same /:all* catch-all route).
+  const seen = new Set<string>()
+  const entries = rawEntries.filter((e) => {
+    if (seen.has(e.routePath)) return false
+    seen.add(e.routePath)
+    return true
+  })
   const sorted = sortRoutes(entries)
   // Read each file's source once to extract static metadata (middleware + layout)
@@ -83,7 +94,7 @@ export async function generateRoutesCode(pagesDir: string): Promise<string> {
     }),
   )
-  const lines: string[] = ['// AUTO-GENERATED by vite-plugin-cer-app', '']
+  const lines: string[] = ['// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app', '']
   // Build routes array with lazy load() functions for code splitting.
   const routeItems = sorted.map((entry, i) => {

package/src/plugin/virtual/server-api.ts CHANGED Viewed

@@ -8,16 +8,16 @@ import { fileToRoutePath } from '../path-utils.js'
  */
 export async function generateServerApiCode(serverApiDir: string): Promise<string> {
   if (!existsSync(serverApiDir)) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const apiRoutes = []\nexport default apiRoutes\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const apiRoutes = []\nexport default apiRoutes\n`
   }
   const files = await scanDirectory('**/*.ts', serverApiDir)
   if (files.length === 0) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const apiRoutes = []\nexport default apiRoutes\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const apiRoutes = []\nexport default apiRoutes\n`
   }
-  const lines: string[] = ['// AUTO-GENERATED by vite-plugin-cer-app', '']
+  const lines: string[] = ['// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app', '']
   const entries: Array<{ alias: string; apiPath: string }> = []

package/src/plugin/virtual/server-middleware.ts CHANGED Viewed

@@ -8,19 +8,19 @@ import { scanDirectory } from '../scanner.js'
  */
 export async function generateServerMiddlewareCode(serverMiddlewareDir: string): Promise<string> {
   if (!existsSync(serverMiddlewareDir)) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const serverMiddleware = []\nexport default serverMiddleware\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const serverMiddleware = []\nexport default serverMiddleware\n`
   }
   const files = await scanDirectory('**/*.ts', serverMiddlewareDir)
   if (files.length === 0) {
-    return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const serverMiddleware = []\nexport default serverMiddleware\n`
+    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nexport const serverMiddleware = []\nexport default serverMiddleware\n`
   }
   // Sort alphabetically so middleware runs in a deterministic order
   const sorted = [...files].sort()
-  const lines: string[] = ['// AUTO-GENERATED by vite-plugin-cer-app', '']
+  const lines: string[] = ['// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app', '']
   const entries: Array<{ alias: string; name: string }> = []

package/src/runtime/app-template.ts CHANGED Viewed

@@ -135,6 +135,12 @@ for (const plugin of plugins) {
 if (typeof window !== 'undefined') {
   await router.replace(window.location.pathname + window.location.search + window.location.hash)
+  // Clear SSR loader data after the initial navigation so that subsequent
+  // client-side navigations don't accidentally reuse it. We wait until after
+  // router.replace() so both the pre-rendered element (upgraded during
+  // component registration) and the new element from router.replace() can
+  // both call usePageData() and receive the hydration data.
+  delete (globalThis as any).__CER_DATA__
   createDOMJITCSS().mount()
 }

package/src/runtime/composables/use-page-data.ts CHANGED Viewed

@@ -1,13 +1,22 @@
 /**
  * usePageData — reads SSR-injected loader data for the current page.
  *
- * During SSR/SSG the server calls the matched route's `loader()` function,
- * serializes the result as `window.__CER_DATA__`, and injects it into the
- * HTML `<head>`. On client hydration this composable reads that payload so
- * the page component can skip the initial data fetch.
+ * During SSR/SSG the server calls the matched route's `loader()` function
+ * and makes the result available in two ways:
  *
- * The data is cleared after the first call so subsequent client-side
- * navigations don't accidentally serve stale SSR data.
+ * 1. **Server render pass** — the data is stored in a per-request
+ *    `AsyncLocalStorage` context (set via `_cerDataStore.enterWith(data)`
+ *    in the entry-server template). `usePageData()` reads this store so the
+ *    component renders with real data in the initial SSR/SSG HTML.
+ *
+ * 2. **Client hydration** — the server also serializes the data as
+ *    `window.__CER_DATA__` in the page `<head>`. The client entry captures
+ *    this into `globalThis.__CER_DATA__` before the app boots. On first
+ *    component instantiation `usePageData()` returns that value so the client
+ *    starts with the correct state without an extra network round-trip.
+ *
+ * The client-side value is cleared after the first read so subsequent
+ * client-side navigations don't accidentally reuse stale SSR data.
  *
  * @returns The serialized loader result, or `null` if no SSR data is present.
  *
@@ -29,11 +38,24 @@
  * ```
  */
 export function usePageData<T = unknown>(): T | null {
-  // Works in both SSR (globalThis) and browser (window) contexts.
   const g = globalThis as Record<string, unknown>
+  // Server-side: read from the per-request AsyncLocalStorage context.
+  // __CER_DATA_STORE__ is set by the entry-server template and is only present
+  // in Node.js, so this branch is tree-shaken out of the client bundle.
+  const store = g['__CER_DATA_STORE__'] as { getStore(): unknown } | undefined
+  if (store) {
+    const ssrData = store.getStore() as T | null | undefined
+    if (ssrData !== undefined && ssrData !== null) return ssrData
+  }
+  // Client-side: read from window.__CER_DATA__ captured by the client entry.
+  // Do NOT clear here — the data is cleared by app-template.ts after the
+  // initial router.replace() completes. This ensures both the pre-rendered
+  // element (upgraded during component registration) and the new element
+  // created by router.replace() can both access the SSR data without a
+  // race where the first read consumes it before the second can use it.
   const data = g['__CER_DATA__'] as T | undefined
   if (data === undefined || data === null) return null
-  // Clear so that subsequent client navigations don't reuse stale SSR data.
-  delete g['__CER_DATA__']
   return data
 }