npm - @jasonshimmy/vite-plugin-cer-app - Versions diffs - 0.20.3 → 0.20.5 - Mend

@jasonshimmy/vite-plugin-cer-app 0.20.3 → 0.20.5

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

package/CHANGELOG.md +8 -0
package/commits.txt +1 -1
package/dist/cli/commands/dev.d.ts.map +1 -1
package/dist/cli/commands/dev.js +5 -0
package/dist/cli/commands/dev.js.map +1 -1
package/dist/plugin/build-ssg.d.ts.map +1 -1
package/dist/plugin/build-ssg.js +0 -11
package/dist/plugin/build-ssg.js.map +1 -1
package/dist/plugin/content/index.d.ts +5 -4
package/dist/plugin/content/index.d.ts.map +1 -1
package/dist/plugin/content/index.js +9 -11
package/dist/plugin/content/index.js.map +1 -1
package/dist/plugin/dev-server.d.ts.map +1 -1
package/dist/plugin/dev-server.js +40 -2
package/dist/plugin/dev-server.js.map +1 -1
package/dist/plugin/dts-generator.d.ts.map +1 -1
package/dist/plugin/dts-generator.js +9 -1
package/dist/plugin/dts-generator.js.map +1 -1
package/dist/plugin/index.d.ts.map +1 -1
package/dist/plugin/index.js +7 -0
package/dist/plugin/index.js.map +1 -1
package/dist/plugin/virtual/routes.d.ts.map +1 -1
package/dist/plugin/virtual/routes.js +11 -0
package/dist/plugin/virtual/routes.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 +48 -21
package/dist/runtime/app-template.js.map +1 -1
package/dist/runtime/composables/use-page-data.d.ts +0 -41
package/dist/runtime/composables/use-page-data.d.ts.map +1 -1
package/dist/runtime/composables/use-page-data.js +44 -20
package/dist/runtime/composables/use-page-data.js.map +1 -1
package/dist/runtime/entry-client-template.d.ts +1 -1
package/dist/runtime/entry-client-template.d.ts.map +1 -1
package/dist/runtime/entry-client-template.js +10 -0
package/dist/runtime/entry-client-template.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 +30 -9
package/dist/runtime/entry-server-template.js.map +1 -1
package/e2e/cypress/e2e/group-meta.cy.ts +5 -2
package/e2e/cypress/e2e/preview-hardening.cy.ts +42 -33
package/e2e/cypress/e2e/use-page-data.cy.ts +122 -0
package/e2e/kitchen-sink/app/pages/blog/[slug].ts +4 -0
package/e2e/kitchen-sink/app/pages/blog/index.ts +5 -0
package/package.json +5 -2
package/src/__tests__/plugin/build-ssg.test.ts +2 -2
package/src/__tests__/plugin/content/loader.test.ts +19 -27
package/src/__tests__/plugin/entry-server-template.test.ts +11 -3
package/src/__tests__/plugin/virtual/routes.test.ts +26 -0
package/src/__tests__/runtime/app-template.test.ts +25 -13
package/src/__tests__/runtime/entry-client-template.test.ts +7 -1
package/src/__tests__/runtime/use-page-data.test.ts +178 -1
package/src/cli/commands/dev.ts +5 -0
package/src/plugin/build-ssg.ts +0 -12
package/src/plugin/content/index.ts +8 -11
package/src/plugin/dev-server.ts +37 -2
package/src/plugin/dts-generator.ts +7 -1
package/src/plugin/index.ts +7 -0
package/src/plugin/virtual/routes.ts +11 -0
package/src/runtime/app-template.ts +48 -21
package/src/runtime/composables/use-page-data.ts +50 -20
package/src/runtime/entry-client-template.ts +10 -0
package/src/runtime/entry-server-template.ts +30 -9

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

@@ -5,20 +5,22 @@
  * and makes the result available in two ways:
  *
  * 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.
+ *    `AsyncLocalStorage` context (set via `_cerDataStore.run(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>`. On first component
- *    instantiation `usePageData()` returns that value so the client
- *    starts with the correct state without an extra network round-trip.
+ *    `window.__CER_DATA__` in the page `<head>`. On first component render
+ *    `usePageData()` returns that value, caches it on the component context, and
+ *    returns the same cached value on all subsequent re-renders of that component
+ *    instance. The data remains available for the initial hydrated route until
+ *    the next client-side navigation clears it before loading new page data.
  *
- * The client-side value is cleared via `queueMicrotask` in `_doHydrate`
- * (app-template) after the initial router navigation completes — deferred by
- * one microtask so the queued reactive re-render can still read the data
- * before it is removed. Subsequent navigations via `router.push` / `router.replace`
- * each clear `__CER_DATA__` synchronously before loading the next page's data.
+ * **Why caching is necessary**: the render function passed to `component()` is
+ * called on every re-render (it is the render function, not a setup function).
+ * Without caching, `usePageData()` could return `null` on later re-renders if a
+ * browser upgrades or re-renders the hydrated page after the initial read,
+ * flip the `ssrData` guard from truthy → null, and re-trigger client-side fetches.
  *
  * @returns The serialized loader result, or `null` if no SSR data is present.
  *
@@ -39,6 +41,11 @@
  * })
  * ```
  */
+import { getCurrentComponentContext } from '@jasonshimmy/custom-elements-runtime'
+// Key used to cache the page data on the component context object across re-renders.
+const _PAGE_DATA_KEY = '_cerPageData'
 export function usePageData<T = unknown>(): T | null {
   const g = globalThis as Record<string, unknown>
@@ -51,13 +58,36 @@ export function usePageData<T = unknown>(): T | null {
     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
-  return data
+  // Client-side: check the component context cache first.
+  // getCurrentComponentContext() returns the context object for the component
+  // whose renderFn is currently executing (set by the component() runtime
+  // before calling renderFn). Caching on the context ensures the same value is
+  // returned on every re-render of the same element instance even if the
+  // browser performs a later hydration-time re-render.
+  const ctx = getCurrentComponentContext() as Record<string, unknown> | null
+  if (ctx) {
+    if (_PAGE_DATA_KEY in ctx) {
+      return ctx[_PAGE_DATA_KEY] as T | null
+    }
+  }
+  // Read the raw value from the global set by the server-rendered <script> tag.
+  const data = g['__CER_DATA__'] as T | undefined | null
+  const result: T | null = (data === undefined || data === null) ? null : data
+  // Cache on the component context so subsequent re-renders of this element
+  // instance return the same value without reading __CER_DATA__ again.
+  // Use Object.defineProperty to bypass the reactive Proxy set-trap on context,
+  // which would otherwise schedule a spurious re-render (and risk an infinite loop)
+  // every time we first cache the value.
+  if (ctx) {
+    Object.defineProperty(ctx, _PAGE_DATA_KEY, {
+      value: result,
+      writable: false,
+      enumerable: false,
+      configurable: true,
+    })
+  }
+  return result
 }

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

@@ -6,6 +6,16 @@
  */
 export const ENTRY_CLIENT_TEMPLATE = `// Client-side entry — hydrates SSR output
+// Mark the already-rendered entry URL so plugin-generated route middleware can
+// skip replaying guards once during hydration. This is cleared by the app
+// bootstrap after the initial hydrated route commits.
+if (typeof window !== 'undefined') {
+  (globalThis).__CER_HYDRATION_ENTRY__ = {
+    path: window.location.pathname,
+    query: Object.fromEntries(new URLSearchParams(window.location.search)),
+  }
+}
 // Capture SSR loader data before any scripts clear it.
 // usePageData() reads from this global; it is cleared after the first read
 // so subsequent client-side navigations don't reuse stale data.

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

@@ -214,8 +214,10 @@ function _mergeWithClientTemplate(ssrHtml, clientTemplate) {
 // 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.
+// Loader data is returned so the handler can scope it to _cerDataStore.run()
+// during rendering. (AsyncLocalStorage.enterWith() inside an awaited child
+// function does not propagate back to the parent continuation, so run() is
+// the only reliable approach.)
 const _prepareRequest = async (req) => {
   await _pluginsReady
   const router = initRouter({ routes, initialUrl: req.url ?? '/' })
@@ -236,6 +238,9 @@ const _prepareRequest = async (req) => {
   // and breaks Declarative Shadow DOM on initial parse).
   let pageVnode = { tag: 'div', props: {}, children: [] }
   let head
+  // Loader data to pass to usePageData() during rendering. Declared here
+  // (outside try/catch) so it's visible in all return paths.
+  let loaderData = null
   if (route?.load) {
     try {
       const mod = await route.load()
@@ -262,9 +267,11 @@ const _prepareRequest = async (req) => {
         const query = current.query ?? {}
         const data = await mod.loader({ params, query, req })
         if (data !== undefined && data !== null) {
-          // enterWith() scopes the value to the current async context so
-          // concurrent renders (SSG concurrency > 1) never share data.
-          _cerDataStore.enterWith(data)
+          // Store loader data so the handler can pass it to _cerDataStore.run()
+          // below. Using enterWith() here doesn't work because it only modifies
+          // the async context *inside* this awaited function, not the outer
+          // handler's continuation where renderToStreamWithJITCSSDSD runs.
+          loaderData = data
           head = \`<script>window.__CER_DATA__ = \${JSON.stringify(data)}</script>\`
           // Expose primitive loader values as element attributes so useProps()
           // can read them.  Complex objects are only accessible via usePageData().
@@ -311,7 +318,7 @@ const _prepareRequest = async (req) => {
   // If the request matched a catch-all route (user-defined 404.ts or [...all].ts),
   // return HTTP 404 so browsers and crawlers treat it as a not-found response.
   const isCatchAll = route?.path === '/:all*'
-  return { vnode, router, head, status: isCatchAll ? 404 : null }
+  return { vnode, router, head, status: isCatchAll ? 404 : null, loaderData }
 }
 export const handler = async (req, res) => {
@@ -332,10 +339,17 @@ export const handler = async (req, res) => {
     try { _authUser = await useSession({ name: _authSessionKey }).get() } catch { /* no session secret */ }
   }
   await _cerAuthStore.run(_authUser, async () => {
-    const { vnode, router, head, status } = await _prepareRequest(req)
+    const { vnode, router, head, status, loaderData } = await _prepareRequest(req)
     if (status != null) res.statusCode = status
     let _headCollectionOpen = false
+    // Wrap the entire render pass in _cerDataStore.run(loaderData) so that
+    // usePageData() inside component renderFn calls sees the correct store
+    // value. AsyncLocalStorage.enterWith() inside _prepareRequest does NOT
+    // propagate back to this outer async continuation — it only affects the
+    // async chain inside _prepareRequest itself. Using run() here is the only
+    // reliable way to scope the data store to the synchronous render pass.
+    await _cerDataStore.run(loaderData ?? null, async () => {
     try {
       // Begin collecting useHead() calls made during the synchronous render pass.
       // IMPORTANT: the stream's start() function runs synchronously on construction,
@@ -394,8 +408,14 @@ export const handler = async (req, res) => {
       // (loader data script, useHead() tags, JIT styles). No polyfill in body yet.
       const ssrHtml = \`<!DOCTYPE html><html><head>\${headContent}</head><body>\${firstChunk}</body></html>\`
-      const merged = _clientTemplate
-        ? _mergeWithClientTemplate(ssrHtml, _clientTemplate)
+      // In dev mode the module-level _clientTemplate is null (only the
+      // production dist/client/index.html path is searched at init time).
+      // The dev server sets (globalThis).__CER_CLIENT_TEMPLATE__ per-request
+      // after running server.transformIndexHtml so the Vite client scripts
+      // (/@vite/client, HMR) are included in every SSR response.
+      const _resolvedClientTemplate = (globalThis).__CER_CLIENT_TEMPLATE__ ?? _clientTemplate
+      const merged = _resolvedClientTemplate
+        ? _mergeWithClientTemplate(ssrHtml, _resolvedClientTemplate)
         : ssrHtml
       // Split at </body> so async swap scripts and the DSD polyfill can be streamed
@@ -439,6 +459,7 @@ export const handler = async (req, res) => {
         try { void _hooks.onResponse({ path: _requestPath, method: req.method ?? 'GET', statusCode: res.statusCode, duration: Date.now() - _requestStart, req }) } catch { /* ignore */ }
       }
     }
+    }) // _cerDataStore.run(loaderData)
   })  // _cerAuthStore.run
   })  // _cerFetchStore.run
   })  // _cerDataStore.run