@wular/pnext 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wular/pnext",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A fast little framework for server-first React apps, fully compatible with Next.js",
   "type": "module",
   "bin": {

package/src/cli/analyze.ts

@@ -9,7 +9,6 @@ import { listFiles } from '../utils/fs'
 import type { BuildManifest, RouteManifestEntry } from '../types'
 
 export interface AnalyzeResult {
-  mode: 'production' | 'development'
   root: string
   compression: AnalyzeCompression
   files: AnalyzeFile[]
@@ -43,6 +42,10 @@ export interface AnalyzeBundleFile {
 }
 
 export interface AnalyzeDynamicBundleFile extends AnalyzeBundleFile {
+  /** Island's client-reference id, as emitted in the entry's island table. */
+  id: string
+  /** Display name: the reference's named export, or its module basename. */
+  component: string
   exportName: string
   load: 'render' | 'visible'
 }
@@ -63,11 +66,10 @@ export async function analyzeProject(
     throw new Error(`No PNext output found at ${config.outPath}. Run pnext build first.`)
   }
 
+  // Dev output is unminified, so its sizes say nothing about what ships; analyze is production-only.
   const target = analyzeTarget(config.outPath)
   if (!target) {
-    throw new Error(
-      `No PNext build or dev output found at ${config.outPath}. Run pnext build or pnext dev first.`,
-    )
+    throw new Error(`No production build found at ${config.outPath}. Run pnext build first.`)
   }
 
   const compression = options.compression ?? 'gzip'
@@ -83,13 +85,9 @@ export async function analyzeProject(
       }
     }),
   )
-  const routeBundles =
-    target.mode === 'production'
-      ? await analyzeRouteBundles(config.outPath, target.root, rows, options.route)
-      : []
+  const routeBundles = await analyzeRouteBundles(config.outPath, target.root, rows, options.route)
 
   return {
-    mode: target.mode,
     root: path.relative(config.root, target.root),
     compression,
     files: rows,
@@ -115,7 +113,9 @@ async function analyzeRouteBundles(
 
   const manifest = JSON.parse(await readFile(manifestPath, 'utf8')) as BuildManifest
   const pages = manifest.routes.filter(route => route.kind === 'page')
-  const selected = routeFilter ? filterAnalyzeRoutes(pages, routeFilter) : pages
+  const selected: AnalyzeRouteSelection[] = routeFilter
+    ? filterAnalyzeRoutes(pages, routeFilter)
+    : pages.map(route => ({ route }))
   if (routeFilter && selected.length === 0) {
     throw new Error(
       `No route matches ${routeFilter}. Routes:\n  ${pages
@@ -135,22 +135,29 @@ async function analyzeRouteBundles(
   }
 
   const bundles: AnalyzeRouteBundle[] = []
-  for (const route of selected) {
-    bundles.push(await analyzeRouteBundle(route, sizes, js))
+  for (const { route, pathname } of selected) {
+    bundles.push(await analyzeRouteBundle(route, sizes, js, pathname))
   }
   return bundles
 }
 
+interface AnalyzeRouteSelection {
+  route: RouteManifestEntry
+  /** Concrete pathname the filter matched, for a param route's prerendered HTML. */
+  pathname?: string
+}
+
 // Accepts the route in ':id' or '[id]' template form, or a concrete pathname
-// (e.g. /users/ada) matched through the route patterns.
-function filterAnalyzeRoutes(pages: RouteManifestEntry[], filter: string) {
+// (e.g. /users/ada) matched through the route patterns. A concrete pathname is
+// carried through so the bundle reports that page's prerendered HTML.
+function filterAnalyzeRoutes(pages: RouteManifestEntry[], filter: string): AnalyzeRouteSelection[] {
   const normalized = filter === '/' ? filter : filter.replace(/\/+$/, '')
   const direct = pages.filter(
     route => route.route === normalized || publicRoutePath(route.route) === normalized,
   )
-  if (direct.length > 0) return direct
+  if (direct.length > 0) return direct.map(route => ({ route }))
   const matched = matchRoute(pages, normalized)
-  return matched ? [matched.route] : []
+  return matched ? [{ route: matched.route, pathname: normalized }] : []
 }
 
 function publicRoutePath(route: string) {
@@ -161,14 +168,30 @@ async function analyzeRouteBundle(
   route: RouteManifestEntry,
   sizes: Map<string, AnalyzeFile>,
   js: (path: string) => Promise<string>,
+  pathname?: string,
 ): Promise<AnalyzeRouteBundle> {
   const initial = new Set<string>()
-  addIfExists(initial, sizes, routeHtmlPath(route))
+  addIfExists(initial, sizes, routeHtmlPath(route, pathname))
   addIfExists(initial, sizes, 'assets/global.css')
-  addIfExists(initial, sizes, `assets/${route.id}.css`)
+  // Mirrors the renderer's stylesheet list: compat cssChunking splits a route's
+  // CSS into `<id>-<n>.css` and records them in cssAssets; `<id>.css` is emitted
+  // only when it is unset.
+  for (const asset of route.cssAssets ?? (route.cssImports.length ? [`${route.id}.css`] : []))
+    addIfExists(initial, sizes, `assets/${asset}`)
+  // Every compat page loads this with a blocking <script>. The sibling
+  // `_ssgManifest.js` (router-fetched, never in the document) and the
+  // `polyfills-*.js` chunk (noModule: legacy browsers only) are deliberately
+  // not initial weight for a modern client.
+  addIfExists(initial, sizes, '_next/static/pnext/_buildManifest.js')
 
   if (route.clientEntry) {
     addIfExists(initial, sizes, route.clientEntry)
+    // The build records the entry's chunk closure from the esbuild metafile and
+    // the renderer modulepreloads exactly this set. Chunk folding hoists imports
+    // out of the entry module, so walking its source alone under-reports; the
+    // walk stays as a union for dev-style single-bundle entries, which never
+    // populate clientEntryImports.
+    for (const asset of route.clientEntryImports ?? []) addIfExists(initial, sizes, asset)
     for (const dependency of await staticDependencies(route.clientEntry, sizes, js))
       initial.add(dependency)
   }
@@ -180,17 +203,21 @@ async function analyzeRouteBundle(
 
   if (route.clientEntry && sizes.has(toPosix(route.clientEntry))) {
     const entrySource = await js(route.clientEntry)
-    const imports = dynamicImports(entrySource, route.clientEntry)
-    for (const imported of imports) {
-      const reference = route.clientReferences.find(item => item.exportName === imported.exportName)
+    for (const island of islandImports(entrySource, route.clientEntry)) {
+      const row = sizes.get(island.path)
+      if (!row) continue
+      // Keyed by island id: every island's loader resolves `module.default`, so
+      // matching on the export name collapses them all onto one reference.
+      const reference = route.clientReferences.find(item => item.id === island.id)
       const load: AnalyzeDynamicBundleFile['load'] =
         reference?.dynamic?.load === 'visible' ? 'visible' : 'render'
-      const row = sizes.get(imported.path)
-      if (!row) continue
-      dynamicTargets.add(imported.path)
+      dynamicTargets.add(island.path)
+      const exportName = reference?.exportName ?? 'default'
       const item: AnalyzeDynamicBundleFile = {
-        path: imported.path,
-        exportName: imported.exportName,
+        path: island.path,
+        id: island.id,
+        component: islandComponent(exportName, reference?.file, island.path),
+        exportName,
         load,
         rawBytes: row.rawBytes,
         compressedBytes: row.compressedBytes,
@@ -198,12 +225,22 @@ async function analyzeRouteBundle(
       if (load === 'visible') visibleDynamic.push(item)
       else dynamic.push(item)
 
-      for (const dependency of await staticDependencies(imported.path, sizes, js)) {
+      // An island with its own CSS loads `assets/<referenceId>.css` alongside its
+      // chunk (loadIslandCss); it is deferred weight, so it belongs here rather
+      // than in initial.
+      if (reference?.cssImports?.length) addIfExists(lazyShared, sizes, `assets/${island.id}.css`)
+      for (const dependency of await staticDependencies(island.path, sizes, js)) {
         if (!initial.has(dependency) && !dynamicTargets.has(dependency)) lazyShared.add(dependency)
       }
     }
 
-    for (const importedPath of dynamicImportPaths(entrySource, route.clientEntry)) {
+    // Same metafile closure as the renderer's low-priority preloads, unioned
+    // with the entry-source walk for the same reason as the static side above.
+    for (const asset of [
+      ...(route.clientDynamicImports ?? []),
+      ...dynamicImportPaths(entrySource, route.clientEntry),
+    ]) {
+      const importedPath = toPosix(asset)
       if (initial.has(importedPath) || dynamicTargets.has(importedPath)) continue
       if (sizes.has(importedPath)) lazyShared.add(importedPath)
       for (const dependency of await staticDependencies(importedPath, sizes, js)) {
@@ -222,6 +259,12 @@ async function analyzeRouteBundle(
   }
 }
 
+function islandComponent(exportName: string, file: string | undefined, chunkPath: string) {
+  if (exportName !== 'default') return exportName
+  const source = file ?? chunkPath.replace(/-[A-Z0-9]{8}\.js$/, '.js')
+  return path.posix.basename(toPosix(source)).replace(/\.[^.]+$/, '')
+}
+
 async function staticDependencies(
   entry: string,
   sizes: Map<string, AnalyzeFile>,
@@ -244,17 +287,22 @@ async function staticDependencies(
   return dependencies
 }
 
-function dynamicImports(source: string, from: string) {
-  const imports: { path: string; exportName: string }[] = []
+// Entries of the entry module's island table, as emitted by client/entry.ts:
+//   { id: "c-...", options: {...}, load: () => import("./chunk.js").then(m => m.default) }
+// The CSS variant wraps the import in `Promise.all([...])`. Statically-bundled
+// islands carry `Component:` instead of `load:` and are part of the entry's own
+// closure, so they are not matched here.
+function islandImports(source: string, from: string) {
+  const imports: { path: string; id: string }[] = []
   const pattern =
-    /import\("([^"]+)"\)\.then\([A-Za-z_$][\w$]*=>[A-Za-z_$][\w$]*\.([A-Za-z_$][\w$]*)\)/g
+    /\bid\s*:\s*"([^"]+)"\s*,\s*options\s*:\s*\{[^{}]*\}\s*,\s*load\s*:\s*\(\)\s*=>\s*(?:Promise\.all\(\[\s*)?import\(\s*"([^"]+)"\s*\)/g
   let match: RegExpExecArray | null
   while ((match = pattern.exec(source))) {
-    const specifier = match[1]
-    const exportName = match[2]
-    if (!specifier || !exportName) continue
+    const id = match[1]
+    const specifier = match[2]
+    if (!id || !specifier) continue
     const resolved = resolveBuiltImport(from, specifier)
-    if (resolved) imports.push({ path: resolved, exportName })
+    if (resolved) imports.push({ path: resolved, id })
   }
   return imports
 }
@@ -306,18 +354,27 @@ function bundleFiles(paths: string[], sizes: Map<string, AnalyzeFile>) {
     .sort((a, b) => b.compressedBytes - a.compressedBytes)
 }
 
-function routeHtmlPath(route: RouteManifestEntry) {
-  return route.route === '/' ? 'index.html' : `${route.route.replace(/^\/+/, '')}/index.html`
+function routeHtmlPath(route: RouteManifestEntry, pathname?: string) {
+  const target = pathname ?? prerenderedPathname(route) ?? route.route
+  return target === '/' ? 'index.html' : `${target.replace(/^\/+/, '')}/index.html`
+}
+
+// A param route prerenders one file per param set, never `posts/:slug/index.html`.
+// Report the first as the representative page instead of dropping HTML entirely.
+function prerenderedPathname(route: RouteManifestEntry) {
+  const params = route.prerenderedParams?.[0]
+  if (!params) return undefined
+  return route.route.replace(/:([a-zA-Z0-9_]+)\*?/g, (_match, name: string) => {
+    const value = params[name]
+    return Array.isArray(value) ? value.join('/') : (value ?? '')
+  })
 }
 
 function analyzeTarget(outPath: string) {
+  // PPR shells live in `.pnext/ppr`, outside `public`: they are resumed
+  // server-side and never downloaded, so they are not shipped weight.
   const publicPath = path.join(outPath, 'public')
-  if (existsSync(publicPath)) return { mode: 'production' as const, root: publicPath }
-
-  const cachePath = path.join(outPath, 'cache')
-  if (existsSync(cachePath)) return { mode: 'development' as const, root: cachePath }
-
-  return null
+  return existsSync(publicPath) ? { root: publicPath } : null
 }
 
 function compressedSize(bytes: Buffer, compression: AnalyzeCompression) {
@@ -344,9 +401,7 @@ export function printAnalyzeResult(
   result: AnalyzeResult,
   options: { route?: string; files: boolean },
 ) {
-  console.log(
-    `PNext analyze: ${result.mode === 'production' ? 'production build' : 'dev server cache'} at ${dim(result.root)} (${result.compression})`,
-  )
+  console.log(`PNext analyze: production build at ${dim(result.root)} (${result.compression})`)
   printRouteBundles(result)
   // With a route filter, the remaining files are mostly other routes' bundles —
   // listing them as "other" would misread as unowned weight.
@@ -385,11 +440,11 @@ function printDynamicBundleGroup(
   if (files.length === 0) return
   console.log(`\n  ${bold(label)}`)
   const columns = rowColumns(files)
-  const componentWidth = Math.max(...files.map(file => file.exportName.length))
+  const componentWidth = Math.max(...files.map(file => file.component.length))
   const pathWidth = Math.max(...files.map(file => file.path.length))
   for (const file of files) {
     console.log(
-      `    ${file.exportName.padEnd(componentWidth)}  ${dim(file.path.padEnd(pathWidth))}  ${formatFileSize(file, compression, columns)}`,
+      `    ${file.component.padEnd(componentWidth)}  ${dim(file.path.padEnd(pathWidth))}  ${formatFileSize(file, compression, columns)}`,
     )
   }
 }

package/src/cli/dev.ts

@@ -86,7 +86,11 @@ function watchServerMemory(server: DevServerHandle) {
   if (!Number.isFinite(limitMb) || limitMb <= 0) return
   const limitBytes = limitMb * 1024 * 1024
   const timer = setInterval(() => {
-    const rss = process.memoryUsage.rss()
+    // Bun (<=1.3.x) lacks the `process.memoryUsage.rss` fast path Node provides.
+    const rss =
+      typeof process.memoryUsage.rss === 'function'
+        ? process.memoryUsage.rss()
+        : process.memoryUsage().rss
     if (rss < limitBytes) return
     clearInterval(timer)
     const usedMb = Math.round(rss / (1024 * 1024))

package/src/client/build.ts

@@ -35,8 +35,6 @@ import {
 } from '../resolve/imports'
 import {
   CLIENT_RUNTIME_MODULE,
-  DYN_SHARED_GLOBAL,
-  dynSharedSpecifiers,
   clientEntrySource,
   clientRuntimeFacts,
   clientRuntimeSource,
@@ -369,23 +367,60 @@ async function preparePrebuilt(
   }
 }
 
-/** The served URL of a deferred dynamic reference's on-demand chunk (dev split). */
-export function deferredDynamicChunkHref(reference: Pick<ClientReference, 'id'>) {
-  return `/__pnext/client-dyn/${reference.id}.js`
+/**
+ * The served URL of a deferred dynamic reference's on-demand output (dev split).
+ * `r` names the route whose build emitted it: two routes reaching the same island
+ * each bundle their own, and one route's copy chunk-splits against its own entry.
+ */
+export function deferredDynamicChunkHref(reference: Pick<ClientReference, 'id'>, routeId?: string) {
+  const query = routeId ? `?r=${encodeURIComponent(routeId)}` : ''
+  return `/__pnext/client-dyn/${reference.id}.js${query}`
+}
+
+/** Where the dev server serves this build's chunks from (see publicPath). */
+export const devClientPublicPath = '/__pnext/client'
+
+export interface DeferredDynamicEntry {
+  id: string
+  file: string
+}
+
+/**
+ * Every deferred reference this route's build must emit an output for: the ones
+ * the route scan named, plus the ones its own pipeline rewrite registered.
+ */
+function deferredDynamicEntries(route: RouteManifestEntry): DeferredDynamicEntry[] {
+  const entries = new Map<string, string>()
+  for (const reference of route.clientReferences) {
+    if (reference.dynamic && !ssrClientReference(reference)) {
+      entries.set(reference.id, reference.file)
+    }
+  }
+  for (const [id, ref] of deferredDynamicRouteRefs.get(route.id) ?? []) entries.set(id, ref.file)
+  return [...entries].map(([id, file]) => ({ id, file }))
 }
 
 export interface DeferredDynamicRef {
   file: string
   exportName: string
+  /** Entry that rewrote this reference: the build its output is emitted by. */
+  routeId?: string
 }
 
 // Process-level registry the dev chunk endpoint resolves ids through. Entries
 // come from the pipeline rewrite below and from each out-dir's sidecar (a
 // restart serving a cached entry never re-ran the rewrite).
 const deferredDynamicRefs = new Map<string, DeferredDynamicRef>()
+// Indexed by route as well: a route's build needs every reference it reached as
+// an entry point, and a rewrite only names them once the build has run.
+const deferredDynamicRouteRefs = new Map<string, Map<string, DeferredDynamicRef>>()
 
 export function registerDeferredDynamicRef(id: string, ref: DeferredDynamicRef) {
   deferredDynamicRefs.set(id, ref)
+  if (!ref.routeId) return
+  const refs = deferredDynamicRouteRefs.get(ref.routeId) ?? new Map<string, DeferredDynamicRef>()
+  deferredDynamicRouteRefs.set(ref.routeId, refs)
+  refs.set(id, ref)
 }
 
 export function deferredDynamicRefById(id: string) {
@@ -396,11 +431,11 @@ export function deferredDynamicRefById(id: string) {
 export const DEFERRED_DYNAMIC_SIDECAR = 'dyn-refs.json'
 
 /** Dev-only: deferred dynamic references load from the on-demand chunk endpoint. */
-function devDeferredDynamicHref(dev: boolean | undefined) {
+function devDeferredDynamicHref(dev: boolean | undefined, routeId?: string) {
   if (!dev || !devDynamicSplitEnabled()) return undefined
   return (reference: ClientReference) =>
     reference.dynamic && !ssrClientReference(reference)
-      ? deferredDynamicChunkHref(reference)
+      ? deferredDynamicChunkHref(reference, routeId)
       : undefined
 }
 
@@ -422,7 +457,7 @@ export async function buildClientEntry({ config, route, outDir, dev }: ClientBui
   await ensureDir(outDir)
   const suspense = routeSuspenseFree(config, route) === false
   const source = clientEntrySource({
-    deferredDynamicHref: devDeferredDynamicHref(dev),
+    deferredDynamicHref: devDeferredDynamicHref(dev, route.id),
     pageFile: route.client ? route.file : undefined,
     clientReferences: route.clientReferences,
     nextCompat: nextCompatEnabled(config),
@@ -439,7 +474,7 @@ export async function buildClientEntry({ config, route, outDir, dev }: ClientBui
   })
   const entryName = clientEntryName(route)
   const outfile = path.join(outDir, `${entryName}.js`)
-  const pipeline = createClientSourcePipeline(config, dev === true)
+  const pipeline = createClientSourcePipeline(config, dev === true, route.id)
   pipeline.warmRoutes([route])
   const runtimeFacts = clientRuntimeFacts(
     [
@@ -467,38 +502,59 @@ export async function buildClientEntry({ config, route, outDir, dev }: ClientBui
     ),
   )
 
+  const split = Boolean(devDeferredDynamicHref(dev))
+  const runEntryBuild = (dynEntries: DeferredDynamicEntry[]) =>
+    build({
+      ...baseClientBuildOptions(config, dev),
+      // Every deferred reference is an entry point of THIS build, so esbuild
+      // hoists what it shares with the route entry into a shared chunk. Module
+      // identity — contexts, singletons, the preact instance — then holds by
+      // construction, and esbuild owns the interop it always did.
+      entryPoints: [
+        { in: virtualEntryPath(route.id), out: entryName },
+        ...dynEntries.map(entry => ({ in: entry.file, out: entry.id })),
+      ],
+      // Chunk imports as absolute URLs: an on-demand output is served from a
+      // different directory than the entry, and a relative specifier would make
+      // the browser fetch the same chunk under two URLs — two module instances.
+      ...(split ? { publicPath: devClientPublicPath } : {}),
+      outdir: outDir,
+      metafile: true,
+      plugins: clientBuildPlugins(
+        config,
+        pipeline,
+        [
+          ...(prebuilt ? [prebuilt.plugin] : []),
+          virtualEntryPlugin([{ route, source }]),
+          ...(split ? [deferredDynamicExternalPlugin()] : []),
+          clientRuntimePlugin(runtimeFacts),
+        ],
+        !suspense,
+      ),
+    })
+
   let metafile: Metafile | undefined
+  let dynEntries = split ? deferredDynamicEntries(route) : []
   try {
     const result = await profileClientBuild(route, dev, () =>
-      clientProfile.timeAsync('esbuild', () =>
-        build({
-          ...baseClientBuildOptions(config, dev),
-          stdin: {
-            contents: source,
-            loader: 'ts',
-            resolveDir: process.cwd(),
-            sourcefile: `${route.id}.ts`,
-          },
-          outdir: outDir,
-          entryNames: entryName,
-          metafile: true,
-          plugins: clientBuildPlugins(
-            config,
-            pipeline,
-            [
-              ...(prebuilt ? [prebuilt.plugin] : []),
-              ...(devDeferredDynamicHref(dev) ? [deferredDynamicExternalPlugin()] : []),
-              clientRuntimePlugin(runtimeFacts),
-            ],
-            !suspense,
-          ),
-        }),
-      ),
+      clientProfile.timeAsync('esbuild', () => runEntryBuild(dynEntries)),
     )
     metafile = result.metafile
   } catch (error) {
     throw withClientImportTrace(error, config, route, source)
   }
+  // A dynamic() inside a 'use client' module is only named by the pipeline's
+  // rewrite, which runs mid-build: those references become entry points on the
+  // rebuild here, and stay ones from then on (the registry outlives the build).
+  if (split) {
+    const discovered = deferredDynamicEntries(route)
+    if (discovered.length !== dynEntries.length) {
+      dynEntries = discovered
+      metafile = (
+        await clientProfile.timeAsync('esbuildDynEntries', () => runEntryBuild(dynEntries))
+      ).metafile
+    }
+  }
   await clientProfile.timeAsync('prebuiltSettle', () => prebuilt?.settle() ?? Promise.resolve())
 
   if (metafile) {
@@ -522,88 +578,6 @@ export async function buildClientEntry({ config, route, outDir, dev }: ClientBui
   return outfile
 }
 
-/**
- * Dev split: bundle ONE deferred dynamic reference on browser demand. The
- * chunk is its own esbuild build, so single-instance vendors (preact and its
- * facades) resolve to shared shims reading the entry's published namespaces
- * (see dynSharedTableSource) instead of bundling a second copy whose hooks
- * would never see the entry renderer's dispatch.
- */
-export async function buildClientDynamicChunk({
-  config,
-  route,
-  reference,
-  outDir,
-}: {
-  config: ResolvedConfig
-  route?: RouteManifestEntry
-  reference: DeferredDynamicRef & { id: string }
-  outDir: string
-}) {
-  await ensureDir(outDir)
-  const pipeline = createClientSourcePipeline(config, true)
-  const prebuilt = await preparePrebuilt(
-    config,
-    outDir,
-    true,
-    importer => pipeline.sourceOf(importer) ?? readTextSyncSafe(importer),
-    route ? surfaceSignature(config, route, true) : '',
-  )
-  const source = [
-    reference.exportName === 'default'
-      ? `export { default } from ${JSON.stringify(reference.file)};`
-      : '',
-    `export * from ${JSON.stringify(reference.file)};`,
-  ].join('\n')
-  const outfile = path.join(outDir, `${reference.id}.js`)
-  await clientProfile.timeAsync('dynChunk', () =>
-    build({
-      ...baseClientBuildOptions(config, true),
-      stdin: {
-        contents: source,
-        loader: 'ts',
-        resolveDir: process.cwd(),
-        sourcefile: `${reference.id}.dyn.ts`,
-      },
-      outdir: outDir,
-      entryNames: reference.id,
-      plugins: clientBuildPlugins(config, pipeline, [
-        ...(prebuilt ? [prebuilt.plugin] : []),
-        dynSharedVendorPlugin(nextCompatEnabled(config)),
-        deferredDynamicExternalPlugin(),
-      ]),
-    }),
-  )
-  await prebuilt?.settle()
-  clientProfile.report(`client dynamic chunk ${reference.id}`)
-  return outfile
-}
-
-/** Shared-vendor shims: preact resolves to the entry's published namespace. */
-function dynSharedVendorPlugin(nextCompat: boolean): Plugin {
-  const namespace = 'pnext-dyn-shared'
-  const filter = new RegExp(`^(?:${dynSharedSpecifiers(nextCompat).map(escapeRegex).join('|')})$`)
-  return {
-    name: 'pnext-dyn-shared-vendor',
-    setup(build) {
-      build.onResolve({ filter }, args =>
-        args.namespace === namespace ? undefined : { path: args.path, namespace },
-      )
-      build.onLoad({ filter: /.*/, namespace }, async args => {
-        const names = Object.keys((await import(args.path)) as Record<string, unknown>).filter(
-          name => /^[A-Za-z_$][\w$]*$/.test(name) && name !== 'default',
-        )
-        const lines = [
-          `const m = window.${DYN_SHARED_GLOBAL}[${JSON.stringify(args.path)}];`,
-          'export default (m && m.default);',
-          ...names.map(name => `export const ${name} = m.${name};`),
-        ]
-        return { contents: lines.join('\n'), loader: 'js' }
-      })
-    },
-  }
-}
-
 /**
  * Bundle every route's client entry in a single esbuild build. With `splitting`
  * enabled, esbuild emits the shared dependency graph (preact runtime, ui kit,
@@ -1404,7 +1378,7 @@ function coreStaticAssetModule(
  * App-convention .js/.mjs may contain JSX (jsxImportSource is preact), so those parse with the jsx
  * loader; scoped to the source roots, so third-party node_modules .js keeps esbuild's default loader.
  */
-function createClientSourcePipeline(config: ResolvedConfig, dev = false) {
+function createClientSourcePipeline(config: ResolvedConfig, dev = false, routeId?: string) {
   const sourceRewrite = nextCompatEnabled(config)
   const compiler = getCompatModeExtensions().reactCompilerOptions(config)
   const asyncPre = hasClientSourceAsyncPreTransforms()
@@ -1466,9 +1440,10 @@ function createClientSourcePipeline(config: ResolvedConfig, dev = false) {
         specifier => resolveImport(rootFromFile(resolved), resolved, specifier),
         target => {
           const id = clientReferenceId(target.file, target.exportName)
-          registerDeferredDynamicRef(id, target)
-          deferredRefs.set(id, target)
-          return deferredDynamicChunkHref({ id })
+          const ref = { ...target, routeId }
+          registerDeferredDynamicRef(id, ref)
+          deferredRefs.set(id, ref)
+          return deferredDynamicChunkHref({ id }, routeId)
         },
       )
     }