npm - @jasonshimmy/vite-plugin-cer-app - Versions diffs - 0.4.5 → 0.4.6 - Mend

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

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 (47) hide show

package/src/runtime/entry-server-template.ts CHANGED Viewed

@@ -1,9 +1,15 @@
 /**
  * Template string for `entry-server.ts`.
  *
- * This is the Node.js SSR entry point. It imports all virtual modules,
- * wires up the routing, and exports a handler compatible with
- * Express/Fastify/Node http.
+ * This is the Node.js SSR entry point used for both development and production
+ * builds. It imports all virtual modules, wires up the routing, and exports a
+ * request handler compatible with Express/Fastify/Node http.
+ *
+ * Key features:
+ * - AsyncLocalStorage for race-condition-free concurrent renders (SSG concurrency > 1)
+ * - Declarative Shadow DOM via renderToStringWithJITCSSDSD (always on)
+ * - useHead() support via beginHeadCollection / endHeadCollection
+ * - DSD polyfill injected at end of <body> after client-template merge
  */
 export const ENTRY_SERVER_TEMPLATE = `// Server-side entry — AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app
 import { readFileSync, existsSync } from 'node:fs'
@@ -16,10 +22,10 @@ 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, DSD_POLYFILL_SCRIPT } from '@jasonshimmy/custom-elements-runtime/ssr'
+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 { createSSRHandler } from '@jasonshimmy/custom-elements-runtime/ssr-middleware'
+import { beginHeadCollection, endHeadCollection, serializeHeadTags } from '@jasonshimmy/vite-plugin-cer-app/composables'
 registerBuiltinComponents()
@@ -29,9 +35,8 @@ registerBuiltinComponents()
 registerEntityMap(entitiesJson)
 // Run plugins once at server startup so their provide() values are available
-// to useInject() during every SSR render pass. Stored on globalThis so all
-// dynamically-imported page chunks share the same reference (same pattern as
-// __CER_HEAD_COLLECTOR__ and __CER_DATA_STORE__).
+// to useInject() during every SSR/SSG render pass. Stored on globalThis so all
+// dynamically-imported page chunks share the same reference.
 const _pluginProvides = new Map()
 ;(globalThis).__cerPluginProvides = _pluginProvides
 const _pluginsReady = (async () => {
@@ -63,8 +68,8 @@ const _clientTemplate = existsSync(_clientTemplatePath)
   ? readFileSync(_clientTemplatePath, 'utf-8')
   : null
-// Merge the SSR handler's full HTML document with the Vite client shell so the
-// final page contains both pre-rendered DSD content and the client bundle scripts.
+// 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>'
@@ -116,18 +121,11 @@ function _mergeWithClientTemplate(ssrHtml, clientTemplate) {
   return merged
 }
-/**
- * Per-request VNode factory — initializes a fresh router at the request URL,
- * resolves the active layout from the matched route's meta, pre-loads the
- * matched page component (bypassing the async router-view so DSD renders
- * synchronously), calls the route's data loader (if any), and injects the
- * serialized result into the document head as window.__CER_DATA__ for
- * client-side hydration.
- *
- * createStreamingSSRHandler threads the router through each component's SSR
- * context so concurrent renders never share state.
- */
-const vnodeFactory = async (req) => {
+// Per-request async setup: initialize a fresh router, resolve the matched
+// route and layout, pre-load the page module, and call the data loader.
+// Loader data is scoped to the current AsyncLocalStorage context via enterWith()
+// so concurrent renders never share state.
+const _prepareRequest = async (req) => {
   await _pluginsReady
   const router = initRouter({ routes, initialUrl: req.url ?? '/' })
   const current = router.getCurrent()
@@ -151,7 +149,6 @@ const vnodeFactory = async (req) => {
         const query = current.query ?? {}
         const data = await mod.loader({ params, query, req })
         if (data !== undefined && data !== null) {
-          // Make data available to usePageData() during the SSR render pass.
           // enterWith() scopes the value to the current async context so
           // concurrent renders (SSG concurrency > 1) never share data.
           _cerDataStore.enterWith(data)
@@ -170,51 +167,44 @@ const vnodeFactory = async (req) => {
   return { vnode, router, head }
 }
-// Capture the raw SSR handler and wrap it to merge the response with the
-// Vite client template before sending — this injects the JS/CSS asset bundles
-// so the browser can hydrate and enable client-side routing.
-const _rawHandler = createSSRHandler(vnodeFactory, {
-  render: { dsd: true, dsdPolyfill: false },
-})
-/**
- * The main request handler.
- * Compatible with Express, Fastify, and Node's raw http.createServer.
- *
- * Each request is run inside a fresh _cerDataStore.run() context so that
- * concurrent renders (e.g. SSG with concurrency > 1) get isolated stores.
- * vnodeFactory calls _cerDataStore.enterWith(loaderData) from within this
- * context, making the data visible to usePageData() during SSR rendering
- * without any global-state races.
- */
 export const handler = async (req, res) => {
-  if (!_clientTemplate) {
-    // No client template — run handler normally, then inject DSD polyfill.
-    let _html = ''
-    await _cerDataStore.run(null, async () => {
-      await _rawHandler(req, { setHeader: () => {}, end: (body) => { _html = body } })
+  await _cerDataStore.run(null, async () => {
+    const { vnode, router, head } = await _prepareRequest(req)
+    // 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,
     })
-    // Inject DSD polyfill at end of <body>, outside any custom element light DOM.
-    const _final = _html.includes('</body>')
-      ? _html.replace('</body>', DSD_POLYFILL_SCRIPT + '</body>')
-      : _html + DSD_POLYFILL_SCRIPT
+    // Collect and serialize any useHead() calls from the rendered components.
+    const headTags = serializeHeadTags(endHeadCollection())
+    // 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')
-    return res.end(_final)
-  }
-  let _capturedHtml = ''
-  // Wrap _rawHandler in an isolated async-local-storage context so that
-  // vnodeFactory's enterWith() call is scoped to this request only.
-  await _cerDataStore.run(null, async () => {
-    // Omit write() to force the non-streaming collect-then-end code path.
-    await _rawHandler(req, { setHeader: () => {}, end: (body) => { _capturedHtml = body } })
+    res.end(finalHtml)
   })
-  let _merged = _mergeWithClientTemplate(_capturedHtml, _clientTemplate)
-  // Inject DSD polyfill at end of <body>, outside <cer-layout-view> light DOM.
-  _merged = _merged.includes('</body>')
-    ? _merged.replace('</body>', DSD_POLYFILL_SCRIPT + '</body>')
-    : _merged + DSD_POLYFILL_SCRIPT
-  res.setHeader('Content-Type', 'text/html; charset=utf-8')
-  res.end(_merged)
 }
 export { apiRoutes, plugins, layouts, routes }

package/dist/cli/create/templates/spa/app/pages/index.ts.tpl DELETED Viewed

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

package/dist/cli/create/templates/ssg/app/pages/index.ts.tpl DELETED Viewed

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

package/dist/cli/create/templates/ssr/.gitignore.tpl DELETED Viewed

@@ -1,25 +0,0 @@
-# Dependencies
-node_modules/
-# Build output
-dist/
-# CER App generated directory
-.cer/
-# Environment variables
-.env.local
-.env.*.local
-# Editor
-.vscode/
-.idea/
-*.suo
-*.sw?
-# OS
-.DS_Store
-Thumbs.db
-# Logs
-*.log

package/dist/cli/create/templates/ssr/app/layouts/default.ts.tpl DELETED Viewed

@@ -1,15 +0,0 @@
-component('layout-default', () => {
-  return html`
-    <header>
-      <nav>
-        <router-link to="/">Home</router-link>
-      </nav>
-    </header>
-    <main>
-      <slot></slot>
-    </main>
-    <footer>
-      <p>Built with CER App</p>
-    </footer>
-  `
-})

package/dist/cli/create/templates/ssr/index.html.tpl DELETED Viewed

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{projectName}}</title>
-  </head>
-  <body>
-    <cer-layout-view></cer-layout-view>
-    <script type="module" src="/@cer/app.ts"></script>
-  </body>
-</html>

package/dist/cli/create/templates/ssr/tsconfig.json.tpl DELETED Viewed

@@ -1,3 +0,0 @@
-{
-  "extends": "./.cer/tsconfig.json"
-}

package/src/cli/create/templates/spa/.gitignore.tpl DELETED Viewed

@@ -1,25 +0,0 @@
-# Dependencies
-node_modules/
-# Build output
-dist/
-# CER App generated directory
-.cer/
-# Environment variables
-.env.local
-.env.*.local
-# Editor
-.vscode/
-.idea/
-*.suo
-*.sw?
-# OS
-.DS_Store
-Thumbs.db
-# Logs
-*.log

package/src/cli/create/templates/spa/app/layouts/default.ts.tpl DELETED Viewed

@@ -1,15 +0,0 @@
-component('layout-default', () => {
-  return html`
-    <header>
-      <nav>
-        <router-link to="/">Home</router-link>
-      </nav>
-    </header>
-    <main>
-      <slot></slot>
-    </main>
-    <footer>
-      <p>Built with CER App</p>
-    </footer>
-  `
-})

package/src/cli/create/templates/spa/index.html.tpl DELETED Viewed

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{projectName}}</title>
-  </head>
-  <body>
-    <cer-layout-view></cer-layout-view>
-    <script type="module" src="/@cer/app.ts"></script>
-  </body>
-</html>

package/src/cli/create/templates/spa/tsconfig.json.tpl DELETED Viewed

@@ -1,3 +0,0 @@
-{
-  "extends": "./.cer/tsconfig.json"
-}

package/src/cli/create/templates/ssg/.gitignore.tpl DELETED Viewed

@@ -1,25 +0,0 @@
-# Dependencies
-node_modules/
-# Build output
-dist/
-# CER App generated directory
-.cer/
-# Environment variables
-.env.local
-.env.*.local
-# Editor
-.vscode/
-.idea/
-*.suo
-*.sw?
-# OS
-.DS_Store
-Thumbs.db
-# Logs
-*.log

package/src/cli/create/templates/ssg/app/layouts/default.ts.tpl DELETED Viewed

@@ -1,15 +0,0 @@
-component('layout-default', () => {
-  return html`
-    <header>
-      <nav>
-        <router-link to="/">Home</router-link>
-      </nav>
-    </header>
-    <main>
-      <slot></slot>
-    </main>
-    <footer>
-      <p>Built with CER App</p>
-    </footer>
-  `
-})

package/src/cli/create/templates/ssg/app/pages/index.ts.tpl DELETED Viewed

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

package/src/cli/create/templates/ssg/index.html.tpl DELETED Viewed

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{projectName}}</title>
-  </head>
-  <body>
-    <cer-layout-view></cer-layout-view>
-    <script type="module" src="/@cer/app.ts"></script>
-  </body>
-</html>

package/src/cli/create/templates/ssg/tsconfig.json.tpl DELETED Viewed

@@ -1,3 +0,0 @@
-{
-  "extends": "./.cer/tsconfig.json"
-}

package/src/cli/create/templates/ssr/.gitignore.tpl DELETED Viewed

@@ -1,25 +0,0 @@
-# Dependencies
-node_modules/
-# Build output
-dist/
-# CER App generated directory
-.cer/
-# Environment variables
-.env.local
-.env.*.local
-# Editor
-.vscode/
-.idea/
-*.suo
-*.sw?
-# OS
-.DS_Store
-Thumbs.db
-# Logs
-*.log

package/src/cli/create/templates/ssr/app/layouts/default.ts.tpl DELETED Viewed

@@ -1,15 +0,0 @@
-component('layout-default', () => {
-  return html`
-    <header>
-      <nav>
-        <router-link to="/">Home</router-link>
-      </nav>
-    </header>
-    <main>
-      <slot></slot>
-    </main>
-    <footer>
-      <p>Built with CER App</p>
-    </footer>
-  `
-})

package/src/cli/create/templates/ssr/app/pages/index.ts.tpl DELETED Viewed

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

package/src/cli/create/templates/ssr/index.html.tpl DELETED Viewed

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{projectName}}</title>
-  </head>
-  <body>
-    <cer-layout-view></cer-layout-view>
-    <script type="module" src="/@cer/app.ts"></script>
-  </body>
-</html>