@rsc-kit/core 0.20.2 → 0.20.4

package/dist/vite.js

@@ -2264,7 +2264,6 @@ const NITRO_HANDLER_OPTIONS = `    props: (match, request) => ({
       ...match.params,
       ...Object.fromEntries(new URL(request.url).searchParams),
     }),
-    version: process.env.RSC_BUILD_VERSION,
     // A built server gzips what it answers, where the runtime can; the dev
     // server answers raw, which is what a person reading a response wants.
     compress: import.meta.env.PROD,
@@ -2394,6 +2393,7 @@ import { LoadingBoundary } from ${JSON.stringify(join(packageDir, "js/LoadingBou
 import { DocumentTitle } from ${JSON.stringify(join(packageDir, "js/DocumentTitle"))}
 import { SlotBoundary } from ${JSON.stringify(join(packageDir, "js/SlotBoundary"))}
 import { RouteErrorBoundary } from ${JSON.stringify(join(packageDir, "js/RouteErrorBoundary"))}
+import __rsc_assets from 'virtual:vite-rsc/assets-manifest'
 import { sectionComponent } from ${JSON.stringify(join(packageDir, "js/section"))}
 import { PathnameProvider } from ${JSON.stringify(join(packageDir, "js/PathnameProvider"))}
 import { DefaultRouteError } from ${JSON.stringify(join(packageDir, "js/DefaultRouteError"))}
@@ -2660,6 +2660,69 @@ export function manifest(): any {
   return ${JSON.stringify(routeManifest())}
 }
 
+/**
+ * The stylesheet and the client entry every document of this build links,
+ * from the build's own manifest, for the host's Link header - a CDN sends
+ * it ahead as 103 Early Hints. The root layout's stylesheet is the one the
+ * document carries; the entry's own is usually empty, and either way both
+ * are named. See earlyHints.ts.
+ */
+export function criticalAssets(): { styles: string[]; modules: string[]; fonts: string[] } {
+  // Nothing to send ahead in development: the entry is Vite's own url, and
+  // there is no CDN in front to hint.
+  if (import.meta.env.DEV) return { styles: [], modules: [], fonts: [] }
+
+  const manifest = __rsc_assets as {
+    clientEntryUrl?: string
+    clientEntryDeps?: { css?: string[] }
+    serverResources?: Record<string, { css?: string[] }>
+  }
+  const styles = new Set<string>(manifest.clientEntryDeps?.css ?? [])
+
+  const rootLayouts = ['app/layout.tsx', 'app/layout.jsx', 'app/layout.ts', 'app/layout.js']
+
+  for (const [file, resources] of Object.entries(manifest.serverResources ?? {})) {
+    if (rootLayouts.some((name) => file === name || file.endsWith('/' + name))) {
+      for (const href of resources.css ?? []) styles.add(href)
+    }
+  }
+
+  return {
+    styles: [...styles],
+    modules: manifest.clientEntryUrl ? [manifest.clientEntryUrl] : [],
+    fonts: [],
+  }
+}
+
+let cachedBuildId: string | null = null
+
+/**
+ * What this build's client is, as a short id.
+ *
+ * Derived from the bootstrap script the document ships - the hashed name of
+ * the browser entry, which changes with the client references and chunks
+ * it maps - so two builds whose browsers would disagree never share one.
+ * The host puts it on every answer and compares it against what a client
+ * says it is running; a mismatch on a payload request is a 409, and the
+ * client loads the document instead. Read once, on demand, because the
+ * bootstrap content is a build product this bundle only reaches at runtime.
+ */
+export async function buildId(): Promise<string> {
+  if (cachedBuildId !== null) return cachedBuildId
+
+  const content: string = await (import.meta as any).viteRsc.loadBootstrapScriptContent('index')
+  let hash = 2166136261
+
+  for (let i = 0; i < content.length; i++) {
+    hash ^= content.charCodeAt(i)
+    hash = Math.imul(hash, 16777619) >>> 0
+  }
+
+  cachedBuildId = hash.toString(16).padStart(8, '0')
+
+  return cachedBuildId
+}
+
 /**
  * For each server action id, whether a client built it. The build asks after
  * the bundle exists, because the answer is a mark on the loaded function and
@@ -3206,6 +3269,15 @@ async function renderTree(
     if (md.description != null) head.push(createElement('meta', { key: '__d', name: 'description', content: String(md.description) }))
     // The name only, never the version - see the identify option.
     if (manifest().build?.identify) head.push(createElement('meta', { key: '__g', name: 'generator', content: 'rsc-kit' }))
+  }
+
+  // Which build this document is, for the client to say on every navigation
+  // - read from the document rather than learned from the first answer,
+  // because a document a service worker served from its cache is the last
+  // build's while the answers are this one's. An id, not a version number.
+  if (bootstrap) head.push(createElement('meta', { key: '__v', name: 'rsc-kit:build', content: await buildId() }))
+
+  if (md) {
 
     // robots is a string, or the object Next takes: index and follow as
     // their no- forms, the flags by name, the limits as name:value. googleBot
@@ -4437,6 +4509,8 @@ async function serve(request: Request): Promise<Response> {
       handleApiRoute,
       resolveMetadata,
       runRouteMiddleware,
+      buildId,
+      criticalAssets,
     } as never,
 ${NITRO_HANDLER_OPTIONS}${NITRO_PRERENDERED}    maxActionBody: ${maxActionBody === undefined ? "undefined" : String(maxActionBody)},
   })
@@ -4520,6 +4594,7 @@ function generateEntrySsr() {
     const fallbackReport = join(packageDir, "js/fallbackReport");
     const redirectDigestModule = join(packageDir, "redirectDigest");
     const notFoundModule = join(packageDir, "notFound");
+    const earlyClicks = join(packageDir, "js/earlyClicks");
     return `// GENERATED by rscKit() — do not edit.
 import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
 import { renderToReadableStream, resume } from 'react-dom/server.edge'
@@ -4529,6 +4604,7 @@ import { noteFallback } from ${JSON.stringify(request)}
 import { cancelledByConsumer, caughtByLoading } from ${JSON.stringify(fallbackReport)}
 import { parseRedirectDigest } from ${JSON.stringify(redirectDigestModule)}
 import { isNotFoundDigest } from ${JSON.stringify(notFoundModule)}
+import { EARLY_CLICKS } from ${JSON.stringify(earlyClicks)}
 
 // Set only by the dev server. @vitejs/plugin-rsc emits its bootstrap and CSS
 // links root-relative in dev, which would send the browser to the host for
@@ -4547,8 +4623,11 @@ export async function handleSsr(
   // Without the bootstrap the page ships no client runtime at all: no React,
   // no Flight client, no router. HTML only. A page with nothing interactive on
   // it has no use for 70kB of hydration.
+  // The click listener first, then the runtime's import: a tap in the
+  // seconds before the runtime hydrates is held for it rather than given
+  // to the browser as a document load. See earlyClicks.ts.
   const bootstrapScriptContent = bootstrap
-    ? await (import.meta as any).viteRsc.loadBootstrapScriptContent('index')
+    ? EARLY_CLICKS + (await (import.meta as any).viteRsc.loadBootstrapScriptContent('index'))
     : undefined
 
   // Without an onError handler React rejects each abortable task on its own,
@@ -4590,7 +4669,7 @@ export async function handleSsrPrerender(
   const bootstrapScriptContent =
     options.bootstrap === false
       ? undefined
-      : await (import.meta as any).viteRsc.loadBootstrapScriptContent('index')
+      : EARLY_CLICKS + (await (import.meta as any).viteRsc.loadBootstrapScriptContent('index'))
 
   const { prelude, postponed } = await prerender(root as any, {
     bootstrapScriptContent,
@@ -5420,6 +5499,21 @@ export function rscKit(options = {}) {
                 if (typeof nitro.options.compressPublicAssets !== "object")
                     nitro.options.compressPublicAssets = true;
                 nitro.options.virtual ??= {};
+                // The names of functions survive Nitro's bundle. The pages were
+                // prerendered against Vite's own server bundles, where a dependency
+                // is loaded from node_modules under the names it was written with;
+                // Nitro then bundles that dependency into the server, and renames a
+                // function whose name collides with another's - J becomes J2 - and
+                // `name` follows the identifier. React's resume of a stored shell
+                // compares the component names it recorded with the ones it meets,
+                // and a renamed one is "Expected the resume to render <J> in this
+                // slot but instead it rendered <J2>", on every request, with the
+                // hole rendered in the browser instead. keepNames pins `name` to
+                // what the source said, whatever the identifier became.
+                nitro.options.rollupConfig = {
+                    ...(nitro.options.rollupConfig ?? {}),
+                    output: { keepNames: true, ...(nitro.options.rollupConfig?.output ?? {}) },
+                };
                 // A polyfill a dependency checks for at module evaluation, loaded
                 // before any service. The bundler places an external import after
                 // the chunk imports of the module that had it, whatever the source