@thomas.f/prnext 0.1.17-alpha → 0.1.19-alpha

package/build/app.mjs

@@ -17,13 +17,18 @@ import { createNativePackages } from './native-packages.mjs';
 import { createRefreshTransform, createSourceLocationTransform, devSingletonsPlugin, devClientFile } from './dev.mjs';
 import { npmPackagesPlugin } from './npm-packages.mjs';
 import { transformCacheComponents } from './cache-components.mjs';
+import {createReactCompilerTransform} from './react-compiler.mjs';
+import {createAppStyleGraph, appStyleScopes, planAppStyleEntries} from './app-styles.mjs';
+import {selectHtmlOnlyRoutes} from './html-only-config.mjs';
+import {createHtmlOnlyGraph} from './html-only-graph.mjs';
+import {createLazyDynamicImports} from './lazy-dynamic-imports.mjs';
 
 const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
-const extensions = { '.js': 'jsx', '.jsx': 'jsx', '.mjs': 'jsx', '.cjs': 'jsx', '.ts': 'ts', '.tsx': 'tsx' };
+const extensions = { '.js': 'jsx', '.jsx': 'jsx', '.mjs': 'jsx', '.cjs': 'jsx', '.ts': 'ts', '.tsx': 'tsx', '.mts': 'ts', '.cts': 'ts' };
 const assetLoaders = Object.fromEntries(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif', '.svg', '.ico', '.woff', '.woff2', '.ttf', '.eot'].map(ext => [ext, 'file']));
 const builtins = new Set([...builtinModules, ...builtinModules.map(name => `node:${name}`)]);
-const compatibility = new Set(['link', 'image', 'head', 'router', 'compat/router', 'next-router-context', 'next-app-router-context', 'navigation', 'headers', 'server', 'cache', 'dynamic', 'script', 'og']);
-const forcedClient = new Set(['link.cjs', 'image.cjs', 'head.cjs', 'router.cjs', 'compat-router.cjs', 'next-router-context.cjs', 'next-app-router-context.cjs', 'app-context.cjs', 'script.cjs']);
+const compatibility = new Set(['link', 'image', 'head', 'router', 'compat/router', 'next-router-context', 'next-app-router-context', 'navigation', 'headers', 'server', 'cache', 'dynamic', 'script', 'og', 'offline', 'redis-cache']);
+const forcedClient = new Set(['link.cjs', 'image.cjs', 'head.cjs', 'router.cjs', 'compat-router.cjs', 'next-router-context.cjs', 'next-app-router-context.cjs', 'app-context.cjs', 'script.cjs', 'offline.cjs']);
 
 export async function validateReactVersions(resolveFromProject) {
   const names = ['react', 'react-dom', 'react-server-dom-webpack'];
@@ -39,7 +44,7 @@ export async function validateReactVersions(resolveFromProject) {
 }
 
 function sourceAst(source, filename) {
-  return parse(source, { sourceType: 'unambiguous', sourceFilename: filename, plugins: ['jsx', ...(/\.tsx?$/.test(filename) ? ['typescript'] : [])] });
+  return parse(source, { sourceType: 'unambiguous', sourceFilename: filename, plugins: ['jsx', ...(/\.[cm]?tsx?$/.test(filename) ? ['typescript'] : [])] });
 }
 function clientDirective(source, filename) {
   if (!source.includes('use client')) return false;
@@ -140,7 +145,7 @@ function routeEntry(route, globalError, dev) {
   if (globalError) imports.push(`export {default as GlobalError} from ${JSON.stringify(globalError)};`);
   imports.push(`export {default as NavigationBoundary} from ${JSON.stringify(path.join(packageRoot, 'compat/app-navigation-boundary.cjs'))};`);
   imports.push(`export {ClientPageRoot} from ${JSON.stringify(path.join(packageRoot, 'compat/app-client-page.cjs'))};`);
-  imports.push(`export {LayoutProvider,LayoutSlot} from ${JSON.stringify(path.join(packageRoot, 'compat/app-layout-context.cjs'))};`);
+  imports.push(`export {LayoutProvider,LayoutSlot,ActivitySlot} from ${JSON.stringify(path.join(packageRoot, 'compat/app-layout-context.cjs'))};`);
   if (route.routing || route.segments.some(segment => segment.error)) imports.push(`export {default as ErrorBoundary} from ${JSON.stringify(path.join(packageRoot, 'compat/app-error-boundary.cjs'))};`);
   if (route.routing) {
     let index = 0;
@@ -173,13 +178,18 @@ function routeEntry(route, globalError, dev) {
 }
 
 /** Compile independent React Server and client graphs. The RSC graph contains only references to client boundaries. */
-export async function compileApp({ project, stage, manifest, cssModules, fonts, images, dev, defineEnvironment = {}, productionBrowserSourceMaps = false, serverExternalPackages = [], moduleResolution = {} }) {
+export async function compileApp({ project, stage, manifest, cssModules, fonts, images, dev, devActionSecret, reactCompiler = false, defineEnvironment = {}, productionBrowserSourceMaps = false, serverExternalPackages = [], moduleResolution = {},lazyDynamicImports=false,devLazyRequest,devLazyOnly=false,devLazyActivated=[] }) {
+  if(devLazyOnly&&(!dev||!lazyDynamicImports||!devLazyRequest))throw Error('Deferred-only compilation requires a registered development import');
   const refresh = dev ? createRefreshTransform(project.root, {generation:manifest.cacheId,forceGeneration:manifest.devForceRefresh,forceFiles:manifest.devAffectedModules}) : undefined;
   const locations = dev ? createSourceLocationTransform(project.root) : undefined;
+  const compileReact = reactCompiler ? createReactCompilerTransform(project.root, reactCompiler, {dev}) : undefined;
   const { basePath = '', assetPrefix = '', assetBase = '/_prnext/assets', trailingSlash = false, skipTrailingSlashRedirect = false } = manifest.config || {};
   const publicPath = assetBase + '/';
-  const routes = project.routes.filter(route => route.router === 'app');
-  if (project.appNotFound) {
+  const lazy=dev&&lazyDynamicImports?createLazyDynamicImports({root:project.root,stage,manifest,request:devLazyRequest,activated:devLazyActivated}):undefined;
+  const routes = devLazyOnly?[]:project.routes.filter(route => route.router === 'app');
+  const htmlOnly = dev ? new Set() : selectHtmlOnlyRoutes(project.routes, manifest.config.htmlOnly, manifest.config);
+  const htmlGraph = !dev && htmlOnly.size ? createHtmlOnlyGraph(project.root) : undefined;
+  if (project.appNotFound&&!devLazyOnly) {
     const file = path.join(stage, '.entries', 'app-not-found.jsx');
     await writeFile(file, `import {notFound} from 'next/navigation';export default function MissingRoute(){notFound()}`);
     const segments = project.appNotFound.segments.map(segment => ({ ...segment }));
@@ -192,11 +202,12 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     routes.push({ ...project.appNotFound, segments, id, file, pattern: '/_not-found', kind: 'page', router: 'app', internal: true });
     manifest.appNotFound = id;
   }
-  if (!routes.length) return;
+  if (!routes.length&&!devLazyOnly) return;
   if (!manifest.config.cacheComponents && routes.some(route => route.cacheConfig?.instant !== undefined || route.pageConfig?.instant !== undefined || route.segments?.some(segment => segment.staticConfig?.instant !== undefined))) throw new Error('instant requires cacheComponents: true.');
-  const actions = createServerActions({ projectRoot: project.root });
-  function actionTransform(source, file, mode, runtime = 'nodejs') {
-    const result = actions.transform(source, file, mode);
+  if (!manifest.config.cacheComponents && routes.some(route => route.cacheConfig?.ensureStatic !== undefined || route.pageConfig?.ensureStatic !== undefined || route.segments?.some(segment => segment.staticConfig?.ensureStatic !== undefined))) throw new Error('ensureStatic requires cacheComponents: true.');
+  const actions = createServerActions({ projectRoot: project.root,developmentSession:dev?manifest.devSession:undefined,developmentSecret:dev?devActionSecret:undefined });
+  function actionTransform(source, file, mode, runtime = 'nodejs', revisionSource = source) {
+    const result = actions.transform(source, file, mode, {revisionSource});
     if (mode !== 'browser') for (const action of actions.actions.values()) if (action.file === file) {
       (action.runtimes ||= new Set()).add(runtime);
     }
@@ -204,6 +215,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
   }
   const boundaries = new Map();
   const cssFiles = new Set();
+  const styleGraph = createAppStyleGraph(project.root);
   const globalErrorCssFiles = new Set();
   const globalErrorOnlyCss = new Set();
   const canonicalPaths = new Map();
@@ -229,30 +241,33 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     throw new Error('app/global-error must be a Client Component. Add the "use client" directive.');
   }
 
-  function graphPlugin(mode, { styleTarget = cssFiles, omitGlobalStyles = true } = {}) {
+  function graphPlugin(mode, { styleTarget = cssFiles, omitGlobalStyles = true, omitAllStyles = false } = {}) {
     const browser = mode === 'browser';
     const rsc = mode === 'rsc';
     return {
       name: `prnext-app-${mode}`,
       setup(esbuild) {
-        applicationEntry(esbuild,readCompilerFile);
+        applicationEntry(esbuild,readCompilerFile,{transformTypedHelpers:!!compileReact && (browser || mode==='ssr')});
         esbuild.onResolve({ filter: /^prnext-internal:use-cache$/ }, () => browser
           ? { errors: [{ text: "'use cache' cannot enter a Client Component graph" }] }
           : { path: '../compat/use-cache.cjs', external: true });
         if (browser && omitGlobalStyles) esbuild.onResolve({ filter: /\.(?:css|scss|sass)$/i }, async args => {
-          if (!globalErrorOnlyCss.size || /\.module\.(?:css|scss|sass)$/i.test(args.path) || args.pluginData?.prnextResolvingCss || args.pluginData?.prnextAppCss || args.kind === 'import-rule' || args.path.startsWith('prnext-css:')) return;
+          if ((!omitAllStyles && !globalErrorOnlyCss.size) || /\.module\.(?:css|scss|sass)$/i.test(args.path) || args.pluginData?.prnextResolvingCss || args.pluginData?.prnextAppCss || args.kind === 'import-rule' || args.path.startsWith('prnext-css:')) return;
           const resolved = await esbuild.resolve(args.path, { resolveDir: args.resolveDir, kind: args.kind, pluginData: { prnextAppCss: true } });
-          if (!resolved.errors.length && !resolved.external && resolved.namespace === 'file' && globalErrorOnlyCss.has(await canonicalFile(resolved.path))) return { path: resolved.path, namespace: 'prnext-app-empty' };
+          if (!resolved.errors.length && !resolved.external && resolved.namespace === 'file' && (omitAllStyles || globalErrorOnlyCss.has(await canonicalFile(resolved.path)))) return { path: resolved.path, namespace: 'prnext-app-empty' };
         });
         esbuild.onResolve({ filter: /^prnext-internal:action-(?:crypto|client|ssr)$/ }, args => {
           const helper = args.path.slice('prnext-internal:'.length);
           if (browser && helper !== 'action-client') return { errors: [{ text: 'Server Action implementation cannot enter the browser graph.' }] };
           return browser ? { path: path.join(packageRoot, 'runtime', helper + '.mjs') } : { path: '../runtime/' + helper + '.mjs', external: true };
         });
+        esbuild.onResolve({ filter: /^prnext-internal:metadata-route$/ }, () => browser
+          ? { errors: [{ text: 'Metadata route handlers are server-only.' }] }
+          : { path: '../runtime/metadata-route.mjs', external: true });
         esbuild.onResolve({ filter: frameworkRuntimeImportPattern }, args => {
           const name = frameworkImportName(args.path);
           if (!compatibility.has(name)) return { errors: [{ text: `PRNext does not implement ${args.path} yet (imported by ${args.importer}).` }] };
-          if (browser && ['headers', 'server', 'cache', 'og'].includes(name)) return { errors: [{ text: `${args.path} is server-only and cannot be imported by a Client Component.` }] };
+          if (browser && ['headers', 'server', 'cache', 'og', 'redis-cache'].includes(name)) return { errors: [{ text: `${args.path} is server-only and cannot be imported by a Client Component.` }] };
           const target = path.join(packageRoot, 'compat', (name === 'compat/router' ? 'compat-router' : name === 'dynamic' ? 'app-dynamic' : rsc && name === 'navigation' ? 'navigation-server' : name) + '.cjs');
           if (!browser && (!rsc || !forcedClient.has(path.basename(target)))) return { path: '../compat/' + path.basename(target), external: true };
           return { path: target };
@@ -296,18 +311,23 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
             if (!/\.module\.(?:css|scss|sass)$/i.test(args.path)) return { path: file, namespace: 'prnext-app-empty' };
           });
         }
-        esbuild.onLoad({ filter: /\.(?:[cm]?js|jsx|tsx?)$/, namespace: 'file' }, async args => {
+        esbuild.onLoad({ filter: /\.(?:[cm]?[jt]s|[jt]sx)$/, namespace: 'file' }, async args => {
           if (browser && args.path === project.document) return { errors: [{ text: 'pages/_document is server-only and cannot be imported by a Client Component.' }] };
           const original=await readCompilerFile(args.path,args.prnextSource);
-          const source = await fonts.transform(await expandActionExports(locations?await locations(original,args.path):original, args.path, async (specifier, importer) => {
+          htmlGraph?.source(args.path, original);
+          // Only Client Component graphs use React's memo-cache runtime. Server
+          // Components, route handlers and Server Action graphs remain untouched.
+          const compiled=compileReact && (browser || mode==='ssr') ? await compileReact(original,args.path,{loaderOutput:args.prnextSource!==undefined}) : original;
+          const source = await fonts.transform(await expandActionExports(locations?await locations(compiled,args.path):compiled, args.path, async (specifier, importer) => {
             const resolved = await esbuild.resolve(specifier, { resolveDir: path.dirname(importer), kind: 'import-statement', pluginData: { prnextExportScan: true } });
             return resolved.errors.length || resolved.external || resolved.namespace !== 'file' ? undefined : resolved.path;
           }), args.path);
           const cacheSegment = cacheSegments.get(await canonicalFile(args.path)) || '';
           const cachedSource = transformCacheComponents(source, args.path, { enabled: manifest.config.cacheComponents, handlers: manifest.config.cacheHandlers, projectRoot: project.root, mode, buildId: manifest.cacheId, segment: cacheSegment });
-          const actionSource = actionTransform(cachedSource, args.path, mode);
+          const actionSource = actionTransform(cachedSource, args.path, mode, 'nodejs', original);
           const builtin = path.dirname(args.path) === path.join(packageRoot, 'compat') && forcedClient.has(path.basename(args.path));
           if (rsc && (builtin || clientDirective(source, args.path))) {
+            htmlGraph?.issue(args.path, 'a Client Component or interactive framework component');
             let boundary = boundaries.get(args.path);
             if (!boundary) {
               const exports = await exportedNames(args.path, esbuild);
@@ -317,8 +337,9 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
             const references = boundary.exports.map((name, index) => builtin && path.basename(args.path) === 'image.cjs' && name === 'getImageProps' ? `export {getImageProps} from ${JSON.stringify(path.join(packageRoot, 'compat/image-shared.cjs'))};` : `const ref${index}=registerClientReference(function(){throw new Error(${JSON.stringify(`Cannot call client export ${name} from a Server Component (${path.relative(project.root, args.path)}).`)});},${JSON.stringify(boundary.id)},${JSON.stringify(name)});export {ref${index} as ${JSON.stringify(name)}};`);
             return { contents: `import {registerClientReference} from 'react-server-dom-webpack/server';\n${references.join('\n')}`, loader: 'js', resolveDir: path.dirname(args.path) };
           }
-          let contents = transformDynamicImports(actionSource, args.path, { projectRoot: project.root, mode: rsc ? 'rsc' : browser ? 'browser' : 'server' });
-          if (browser && refresh && !actions.isServerModule(cachedSource,args.path)) contents = await refresh(contents, args.path);
+          let contents = transformDynamicImports(actionSource, args.path, { projectRoot: project.root, mode: rsc ? 'rsc' : browser ? 'browser' : 'server',dev });
+          if(browser&&lazy)contents=lazy.transform(contents,args.path);
+          if (browser && refresh && !actions.isServerModule(cachedSource,args.path,{revisionSource:original})) contents = await refresh(contents, args.path);
           return { contents, loader: extensions[path.extname(args.path)] || 'jsx', resolveDir: path.dirname(args.path) };
         });
       },
@@ -334,7 +355,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     const rsc = mode === 'rsc';
     const framework = new Set(['link', 'image', 'head', 'router', 'compat-router', 'next-router-context', 'next-app-router-context', 'navigation', 'script', 'app-context', 'app-layout-context', 'app-navigation-boundary', 'app-client-page', 'app-error-boundary', 'app-dynamic']);
     return { name: 'prnext-edge-app', setup(esbuild) {
-      applicationEntry(esbuild,readCompilerFile);
+      applicationEntry(esbuild,readCompilerFile,{transformTypedHelpers:!!compileReact && mode==='ssr'});
       esbuild.onResolve({filter:/^prnext-internal:action-(?:crypto|ssr)$/}, args => ({path:args.path.slice('prnext-internal:'.length),namespace:'prnext-edge-action'}));
       esbuild.onLoad({filter:/.*/,namespace:'prnext-edge-action'}, args => ({loader:'js',contents:(args.path==='action-crypto'?['encryptBoundArgs','decryptBoundArgs','bindEncryptedReference']:['createServerReference']).map(name=>`export const ${name}=globalThis.__PRNEXT_EDGE_ACTIONS[${JSON.stringify(args.path)}][${JSON.stringify(name)}];`).join('\n')}));
       esbuild.onResolve({ filter: frameworkSubpathPattern }, args => {
@@ -362,7 +383,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
         const names = await exportedNames(args.path, esbuild), name = path.basename(args.path, '.cjs');
         return { loader: 'js', contents: `const module=globalThis.__PRNEXT_EDGE_FRAMEWORK[${JSON.stringify(name)}];\n` + [...names].map((name, index) => `const value${index}=${name === 'default' ? '(module.default||module)' : `module[${JSON.stringify(name)}]`};export {value${index} as ${JSON.stringify(name)}};`).join('\n') };
       });
-      if (rsc) esbuild.onLoad({ filter: /\.(?:[cm]?js|jsx|tsx?)$/, namespace: 'file' }, async args => {
+      if (rsc) esbuild.onLoad({ filter: /\.(?:[cm]?[jt]s|[jt]sx)$/, namespace: 'file' }, async args => {
         const source = args.prnextSource ?? await readFile(args.path, 'utf8');
         const builtin = path.dirname(args.path) === path.join(packageRoot, 'compat') && forcedClient.has(path.basename(args.path));
         if (!builtin && !clientDirective(source, args.path)) return;
@@ -377,13 +398,18 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     } };
   }
   async function edgeAppBuild(file, outfile, mode, defaultExport = false) {
-    const result = await compileEdge({ file, outfile, projectRoot: project.root, dev, defineEnvironment, reactMode: mode, defaultExport,
+    const result = await compileEdge({ file, outfile, projectRoot: project.root, dev, defineEnvironment, reactMode: mode, defaultExport, transformTypedHelpers:!!compileReact && mode==='ssr',
       plugins: [moduleResolutionPlugin(moduleResolution, project.root), edgeGraphPlugin(mode), images.plugin(), fonts.plugin(), cssModules.plugin(false)],
-      transformSource: async (source, file, builder) => actionTransform(await fonts.transform(await expandActionExports(locations?await locations(source,file):source, file, async (specifier, importer) => {
-        const resolved = await builder.resolve(specifier, {resolveDir:path.dirname(importer),kind:'import-statement',pluginData:{prnextExportScan:true}});
-        return resolved.errors.length || resolved.external || resolved.namespace !== 'file' ? undefined : resolved.path;
-      }), file), file, mode, 'edge') });
+      transformSource: async (source, file, builder, {loaderOutput=false}={}) => {
+        const compiled=compileReact && mode==='ssr' ? await compileReact(source,file,{loaderOutput}) : source;
+        return actionTransform(await fonts.transform(await expandActionExports(locations?await locations(compiled,file):compiled, file, async (specifier, importer) => {
+          const resolved = await builder.resolve(specifier, {resolveDir:path.dirname(importer),kind:'import-statement',pluginData:{prnextExportScan:true}});
+          return resolved.errors.length || resolved.external || resolved.namespace !== 'file' ? undefined : resolved.path;
+        }), file), file, mode, 'edge', source);
+      } });
     fonts.record(result.metafile);
+    styleGraph.record(result.metafile);
+    htmlGraph?.record(result.metafile);
   }
   async function serverBuild(entryPoints, outdir, mode, styleTarget = cssFiles) {
     if (!Object.keys(entryPoints).length) return;
@@ -411,6 +437,8 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
       }
     }
     fonts.record(output.metafile);
+    styleGraph.record(output.metafile);
+    htmlGraph?.record(output.metafile);
     for (const file of output.outputFiles) {
       await mkdir(path.dirname(file.path), { recursive: true });
       await writeFile(file.path, file.contents);
@@ -424,22 +452,25 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     return output;
   }
 
-  async function collectBrowserStyles(browserEntries) {
-    if (!globalErrorId) return;
+  async function collectBrowserStyles(browserEntries,force=false) {
     const revision = `${boundaries.size}:${actions.actions.size}:${nativePackages.version}`;
-    if (browserStyleRevision === revision) return;
+    if (!force&&browserStyleRevision === revision) return;
     // SSR intentionally erases ssr:false loaders. Discover their dependencies
     // in one browser graph, then classify styles by reachability from each root.
     const discovery = await bundle({ ...common, write: false, entryPoints: browserEntries, outdir: path.join(stage, '.browser-styles'),
       platform: 'browser', format: 'esm', target: ['es2022'], splitting: true,
       define: { 'process.env': '{}', ...common.define },
-      plugins: [moduleResolutionPlugin(moduleResolution, project.root), ...(dev ? [devSingletonsPlugin()] : []), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), nativePackages.plugin('browser'), cssModules.plugin(true)] });
+      plugins: [...(lazy?[lazy.plugin()]:[]),moduleResolutionPlugin(moduleResolution, project.root), ...(dev ? [devSingletonsPlugin()] : []), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), nativePackages.plugin('browser'), cssModules.plugin(true)] });
+    await lazy?.discover(discovery.metafile);
     fonts.record(discovery.metafile);
-    const entryIds = new Map(await Promise.all(Object.entries(browserEntries).map(async ([id, file]) => [await canonicalFile(file), id])));
+    styleGraph.record(discovery.metafile);
+    const entryIds = new Map((await Promise.all(Object.entries(browserEntries).map(async ([id, file]) => [[path.resolve(file), id], [await canonicalFile(file), id]]))).flat());
     const globalRoots = [], normalRoots = [];
     for (const output of Object.values(discovery.metafile.outputs)) {
       if (!output.entryPoint) continue;
-      const id = entryIds.get(await canonicalFile(path.resolve(project.root, output.entryPoint)));
+      // Dynamic entry points can contain a query/fragment identity rather
+      // than a physical filename. Only configured roots need classification.
+      const id = entryIds.get(path.resolve(project.root, output.entryPoint));
       if (id) (id === globalErrorId ? globalRoots : normalRoots).push(output.entryPoint);
     }
     async function collect(roots, target) {
@@ -477,6 +508,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     const collectInstant = node => {if(!node)return;instantConfigs.push(...Object.values(node.config || {}));for(const child of [...(node.children || []),...Object.values(node.slots || {})])collectInstant(child);};
     collectInstant(route.routing);
     manifest.routes.push({ id: route.id, pattern: route.pattern, kind: route.kind, router: 'app', module: `server/${route.id}.mjs`, css: [], ...(route.internal ? { internal: true } : {}),
+      ...(!dev && htmlOnly.has(route.id) ? { htmlOnly:true } : {}),
       ...(route.parallel ? { parallel: true, interception: !!route.interception } : {}),
       ...(route.cacheConfig ? { cacheConfig: route.cacheConfig } : {}),
       ...(route.kind === 'page' ? { instantSamples: [route.pageConfig, ...[...route.segments].reverse().map(segment => segment.staticConfig)].find(config => config?.instant?.unstable_samples)?.instant.unstable_samples, instantBuild: instantConfigs.some(config => config?.instant?.level === 'experimental-error'), hasStaticParams: route.id !== manifest.appNotFound && !!(route.pageConfig?.generateStaticParams || route.segments.some(segment => segment.staticConfig?.generateStaticParams)) }
@@ -489,12 +521,13 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
   const browserRevision = () => `${boundaryRevision()}:${cssFiles.size}:${globalErrorCssFiles.size}:${nativePackages.version}`;
   // Route Handlers have a Node React environment and must not share RSC chunks
   // that import registerServerReference or client-reference registration.
-  await serverBuild(handlerEntries, 'server', 'route');
+  if (!devLazyOnly) await serverBuild(handlerEntries, 'server', 'route');
   for (;;) {
     // Each graph consumes discoveries from the preceding one. Discovering a
     // client boundary in RSC is normal: SSR and browser below already include
     // it. Only discoveries made too late for a graph require another pass.
     const emittedActions = actionRevision();
+    if (!devLazyOnly) {
     for (const action of actions.actions.values()) {
       const entry = path.join(stage, '.entries', 'action-' + action.id + '.mjs');
       await writeFile(entry, `export {${JSON.stringify(action.binding)} as invoke} from ${JSON.stringify(action.file)};`);
@@ -502,8 +535,10 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
       if (!action.runtimes?.size || action.runtimes.has('nodejs')) entries['action-' + action.id] = entry;
     }
     await serverBuild(entries, 'server', 'rsc');
+    }
     const serverNativeVersion = nativePackages.version;
     const emittedBoundaries = boundaryRevision();
+    if (!devLazyOnly) {
     const ssrEntries = {};
     const globalSsrEntries = {};
     for (const boundary of boundaries.values()) {
@@ -514,54 +549,95 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     await serverBuild(ssrEntries, 'app-ssr', 'ssr');
     for (const boundary of boundaries.values()) if (boundary.edge) await edgeAppBuild(path.join(stage, '.entries', boundary.id + '.ssr.mjs'), path.join(stage, 'app-ssr-edge', boundary.id + '.mjs'), 'ssr', boundary.exports.includes('default'));
     await serverBuild(globalSsrEntries, 'app-ssr', 'ssr', globalErrorCssFiles);
+    }
     const browserEntries = {};
     for (const boundary of boundaries.values()) {
       const entry = path.join(stage, '.entries', boundary.id + '.browser.mjs');
       await writeFile(entry, boundaryEntry(boundary));
       browserEntries[boundary.id] = entry;
     }
-    await collectBrowserStyles(browserEntries);
+    if(!devLazyRequest)await collectBrowserStyles(browserEntries);
+    let lazyEntries={};
+    if(lazy)for(;;){
+      const next=await lazy.targetEntries();
+      if(Object.keys(next).join(',')===Object.keys(lazyEntries).join(','))break;
+      lazyEntries=next;
+      await collectBrowserStyles(devLazyRequest?lazyEntries:{...browserEntries,...lazyEntries},true);
+    }
     globalErrorOnlyCss.clear();
     for (const file of globalErrorCssFiles) if (!cssFiles.has(file)) globalErrorOnlyCss.add(file);
     const emittedBrowserInputs = browserRevision();
-    if (routes.some(route => route.kind === 'page')) {
+    if (devLazyOnly||routes.some(route => route.kind === 'page')) {
     let globalErrorCss = [];
     if (globalErrorCssFiles.size) {
       const styleEntry = path.join(stage, '.entries', 'app-global-error-style.mjs');
       await writeFile(styleEntry, [...globalErrorCssFiles].map(file => `import ${JSON.stringify(file)};`).join('\n'));
       const styles = await bundle({ ...common, entryPoints: { 'app-global-error-style': styleEntry }, outdir: path.join(stage, 'assets'), entryNames: '[name]-[hash]',
         platform: 'browser', format: 'esm', target: ['es2022'], minify: !dev, sourcemap: dev || productionBrowserSourceMaps,
-        plugins: [moduleResolutionPlugin(moduleResolution, project.root), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), cssModules.plugin(true)] });
+        plugins: [moduleResolutionPlugin(moduleResolution, project.root), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), cssModules.plugin(true)] }, { role: 'styles' });
       globalErrorCss = Object.values(styles.metafile.outputs).filter(output => output.cssBundle).map(output => publicPath + path.basename(output.cssBundle));
     }
     if (globalErrorId) manifest.app.globalError = { id: globalErrorId, name: 'default', css: globalErrorCss };
     const runtimeEntry = path.join(stage, '.entries', 'app-runtime.mjs');
+    const htmlOnlyRoutes = !dev && htmlOnly.size ? routes.filter(route => route.kind === 'page' && !route.internal).map(route => ({pattern:route.pattern,...(htmlOnly.has(route.id)?{htmlOnly:true}:{})})) : undefined;
     const importers = Object.entries(browserEntries).map(([id, file]) => `${JSON.stringify(id)}:()=>import(${JSON.stringify(file)})`);
-    await writeFile(runtimeEntry, `${dev ? `import ${JSON.stringify(devClientFile)};\n` : ''}${[...cssFiles].map(file => `import ${JSON.stringify(file)};`).join('\n')}\nimport {bootstrapApp} from ${JSON.stringify(path.join(packageRoot, 'runtime/app-client.mjs'))};\nbootstrapApp({clientModules:{${importers.join(',')}},...${JSON.stringify({ basePath, assetPrefix, assetBase, trailingSlash, skipTrailingSlashRedirect, strictMode: manifest.config.reactStrictMode !== false, cacheComponents: manifest.config.cacheComponents === true, ...(globalErrorId ? { globalErrorId, globalErrorCss } : {}), ...(dev ? { dev: { buildId: manifest.buildId, clientManifest: manifest.devClient, onDemand:manifest.devOnDemand===true, sequence:manifest.devSequence, session:manifest.devSession, indicator:manifest.devIndicators, ...(manifest.devTools ? {tools:manifest.devTools} : {}) } } : {}) })}});\n`);
-    const clientEntries = { 'app-runtime': runtimeEntry, ...browserEntries };
+    if(!devLazyRequest)await writeFile(runtimeEntry, `${dev ? `import ${JSON.stringify(devClientFile)};\n` : ''}\nimport {bootstrapApp} from ${JSON.stringify(path.join(packageRoot, 'runtime/app-client.mjs'))};\nbootstrapApp({clientModules:{${importers.join(',')}},...${JSON.stringify({ basePath, assetPrefix, assetBase, htmlOnlyRoutes, trailingSlash, skipTrailingSlashRedirect, deploymentId: dev ? undefined : manifest.cacheId, strictMode: manifest.config.reactStrictMode !== false, cacheComponents: manifest.config.cacheComponents === true, partialPrefetching: manifest.config.partialPrefetching === true, navigationCache: manifest.config.navigationCache, ...(globalErrorId ? { globalErrorId, globalErrorCss } : {}), ...(dev ? { dev: { buildId: manifest.buildId, clientManifest: manifest.devClient, onDemand:manifest.devOnDemand===true, sequence:manifest.devSequence, session:manifest.devSession, indicator:manifest.devIndicators, ...(manifest.devTools ? {tools:manifest.devTools} : {}) } } : {}) })}});\n`);
+    const clientEntries = devLazyRequest?{...lazyEntries,...lazy.bridgeEntries()}:{ 'app-runtime': runtimeEntry, ...browserEntries,...lazyEntries,...(lazy?lazy.bridgeEntries():{}) };
     const browser = await bundle({ ...common, entryPoints: clientEntries, outdir: path.join(stage, 'assets'), entryNames: '[name]-[hash]', chunkNames: 'app-chunk-[hash]', platform: 'browser', format: 'esm', target: ['es2022'], splitting: true, minify: !dev, sourcemap: dev || productionBrowserSourceMaps,
-      define: { 'process.env': '{}', ...common.define }, plugins: [moduleResolutionPlugin(moduleResolution, project.root), ...(dev ? [devSingletonsPlugin()] : []), images.plugin(), fonts.plugin(), graphPlugin('browser'), nativePackages.plugin('browser'), cssModules.plugin(true, { emitStyles: file => !globalErrorOnlyCss.has(file) })] });
+      define: { 'process.env': '{}', ...common.define, __PRNEXT_CACHE_COMPONENTS__: JSON.stringify(manifest.config.cacheComponents === true) }, plugins: [...(lazy?[lazy.plugin()]:[]),moduleResolutionPlugin(moduleResolution, project.root), ...(dev ? [devSingletonsPlugin()] : []), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitAllStyles: !lazy }), nativePackages.plugin('browser'), cssModules.plugin(true, { emitStyles: () => !!lazy })] });
     fonts.record(browser.metafile);
     const entryIds = new Map(Object.entries(clientEntries).map(([id, file]) => [file, id]));
     const edgeBoundaries = new Set([...boundaries.values()].filter(boundary => boundary.edge).map(boundary => boundary.id));
-    const styles = new Set();
     let client;
     for (const [output, metadata] of Object.entries(browser.metafile.outputs)) {
-      if (metadata.cssBundle) styles.add(publicPath + path.basename(metadata.cssBundle));
       if (!metadata.entryPoint || !output.endsWith('.js')) continue;
+      if(lazy?.record(metadata,output))continue;
       const id = entryIds.get(path.resolve(project.root, metadata.entryPoint));
       if (id === 'app-runtime') { client = publicPath + path.basename(output); continue; }
       if (!id) continue;
       manifest.app.clientModules[id] = { id, chunks: [id, publicPath + path.basename(output)], name: '*', ssrModule: `app-ssr/${id}.mjs`, ...(edgeBoundaries.has(id) ? { edgeSsrModule: `app-ssr-edge/${id}.mjs` } : {}), browserModule: publicPath + path.basename(output) };
     }
-    for (const route of manifest.routes) if (route.router === 'app' && route.kind === 'page') { route.client = client; route.css = [...styles]; }
+    const styleBundles = new Map();
+    for (const route of routes.filter(route => route.kind === 'page')) {
+      // All esbuild graphs canonicalize their inputs, including symlinked
+      // convention files. Match those identities before querying reachability.
+      for (const files of appStyleScopes(route)) for (const file of files) styleGraph.alias(file, await canonicalFile(file));
+      const plan = planAppStyleEntries(route, styleGraph);
+      const styles = [];
+      const cssScopes = [];
+      for (const { styles:files, path:scopePath, kind } of plan) {
+        const signature = JSON.stringify(files);
+        if (!styleBundles.has(signature)) {
+          const id = 'app-style-' + createHash('sha256').update(files.map(file => path.relative(project.root, file).replaceAll(path.sep, '/')).join('\0')).digest('hex').slice(0, 16);
+          const styleEntry = path.join(stage, '.entries', id + '.mjs');
+          await writeFile(styleEntry, files.map(file => `import ${JSON.stringify(file)};`).join('\n'));
+          const output = await bundle({ ...common, entryPoints: { [id]: styleEntry }, outdir: path.join(stage, 'assets'), entryNames: '[name]-[hash]', platform: 'browser', format: 'esm', target: ['es2022'], minify: !dev, sourcemap: dev || productionBrowserSourceMaps,
+            plugins: [moduleResolutionPlugin(moduleResolution, project.root), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitGlobalStyles: false }), cssModules.plugin(true)] }, { role: 'styles' });
+          styleBundles.set(signature, Object.values(output.metafile.outputs).filter(output => output.cssBundle).map(output => publicPath + path.basename(output.cssBundle)));
+        }
+        const css = styleBundles.get(signature);
+        styles.push(...css);
+        if (route.parallel) cssScopes.push({ path:scopePath, kind, css });
+      }
+      const emitted = manifest.routes.find(item => item.id === route.id);
+      if (!emitted.htmlOnly) emitted.client = client;
+      emitted.css = [...new Set(styles)];
+      if (route.parallel) emitted.cssScopes = cssScopes;
+    }
     }
     manifest.app.actions = Object.fromEntries([...actions.actions.values()].map(action => [action.id, {
       module: `server/action-${action.runtimes?.has('nodejs')?'':'edge-'}${action.id}.mjs`, export: 'invoke',
       ...(action.runtimes?.has('edge') ? {edgeModule:`server/action-edge-${action.id}.mjs`} : {}),
     }]));
-    if (emittedActions === actionRevision() && emittedBoundaries === boundaryRevision() &&
+    if ((devLazyOnly || emittedActions === actionRevision() && emittedBoundaries === boundaryRevision()) &&
         serverNativeVersion === nativePackages.version && emittedBrowserInputs === browserRevision()) break;
   }
 
+  lazy?.finish();
+
+  if (htmlGraph) for (const route of routes) if (htmlOnly.has(route.id)) {
+    for (const file of [...appStyleScopes(route).flat(), ...(route.metadataFiles || []).map(item=>item.file)].filter(Boolean)) htmlGraph.alias(file, await canonicalFile(file));
+    htmlGraph.validate(route);
+  }
+
 }

package/build/bundle-runtime.mjs

@@ -15,7 +15,7 @@ export const runtimeEntryNames = Object.freeze([
 ].sort());
 
 /** Run once, after compiling application/Edge graphs and before any prerender. */
-export async function bundleRuntime(stage,{projectRoot}={}) {
+export async function bundleRuntime(stage,{projectRoot,sourceDirectory}={}) {
   const resolvedStage = path.resolve(stage);
   if (!path.basename(resolvedStage).startsWith('.prnext-build-')) {
     throw new Error('Runtime bundling requires an unpublished PRNext build stage.');
@@ -29,20 +29,31 @@ export async function bundleRuntime(stage,{projectRoot}={}) {
   if (path.relative(canonicalStage, canonicalRuntime) !== 'runtime') {
     throw new Error('Runtime bundling escaped the build stage.');
   }
-  const entries = await readdir(runtime, { withFileTypes: true });
-  const originals = entries.filter(entry => entry.name.endsWith('.mjs'));
+  const input=sourceDirectory?await realpath(sourceDirectory):runtime;
+  const entries = await readdir(input, { withFileTypes: true });
+  const originals = entries.filter(entry => entry.name.endsWith('.mjs')&&!entry.name.endsWith('.test.mjs'));
   if (originals.some(entry => !entry.isFile() || entry.isSymbolicLink())) {
     throw new Error('Runtime source modules must be ordinary files.');
   }
   for (const name of runtimeEntryNames) {
     if (!originals.some(entry => entry.name === `${name}.mjs`)) throw new Error(`Missing runtime entry ${name}.mjs`);
   }
+  const sources=new Map();
+  // Production compiles the installed sources directly. Only generated stage
+  // overrides (currently the bundled env loader) replace an installed module.
+  // Hash and compile the same captured bytes; do not trust mtimes or skip app
+  // graph callbacks. This avoids copying hundreds of modules into every stage.
+  for(const entry of originals){
+    let file=path.join(input,entry.name);
+    if(sourceDirectory){const override=path.join(runtime,entry.name);const info=await lstat(override).catch(e=>{if(e.code!=='ENOENT')throw e;});if(info){if(!info.isFile()||info.isSymbolicLink())throw Error('Runtime overrides must be ordinary files');file=override;}}
+    sources.set(path.join(input,entry.name),await readFile(file));
+  }
   let directory,key,cached;
   if(projectRoot){
-    directory=await privateCacheDirectory(projectRoot,'runtime-bundle-v1');
+    directory=await privateCacheDirectory(projectRoot,'runtime-bundle-v2');
     if(directory){
       const hash=createHash('sha256').update(esbuildVersion).update(JSON.stringify(runtimeEntryNames)).update(await readFile(new URL('./bundle-runtime.mjs',import.meta.url)));
-      for(const entry of [...originals].sort((a,b)=>a.name.localeCompare(b.name)))hash.update(JSON.stringify([entry.name,createHash('sha256').update(await readFile(path.join(runtime,entry.name))).digest('hex')]));
+      for(const entry of [...originals].sort((a,b)=>a.name.localeCompare(b.name)))hash.update(JSON.stringify([entry.name,createHash('sha256').update(sources.get(path.join(input,entry.name))).digest('hex')]));
       key=hash.digest('hex');cached=await readCacheRecord(directory,key);
     }
   }
@@ -52,10 +63,10 @@ export async function bundleRuntime(stage,{projectRoot}={}) {
   const virtualOutput = path.join(resolvedStage, '.runtime-bundle');
   const validCache=cached&&Array.isArray(cached.files)&&cached.files.length<=128&&cached.files.every(item=>Array.isArray(item)&&item.length===2&&/^[\w-]+\.mjs$/.test(item[0])&&typeof item[1]==='string')&&new Set(cached.files.map(([name])=>name)).size===cached.files.length&&runtimeEntryNames.every(name=>cached.files.some(([file])=>file===name+'.mjs'));
   const result = validCache?null:await build({
-    absWorkingDir: runtime,
-    entryPoints: runtimeEntryNames.map(name => path.join(runtime, `${name}.mjs`)),
+    absWorkingDir: input,
+    entryPoints: runtimeEntryNames.map(name => path.join(input, `${name}.mjs`)),
     outdir: virtualOutput,
-    outbase: runtime,
+    outbase: input,
     entryNames: '[name]',
     chunkNames: '_shared-[hash]',
     outExtension: { '.js': '.mjs' },
@@ -73,6 +84,7 @@ export async function bundleRuntime(stage,{projectRoot}={}) {
     metafile: true,
     write: false,
     logLevel: 'silent',
+    plugins:[{name:'prnext-runtime-snapshot',setup(build){build.onLoad({filter:/\.mjs$/},args=>sources.has(args.path)?{contents:sources.get(args.path),loader:'js',resolveDir:path.dirname(args.path)}:undefined);}}],
   });
   const emitted = new Map();
   if(validCache)for(const [name,contents]of cached.files)emitted.set(name,Buffer.from(contents));
@@ -87,7 +99,8 @@ export async function bundleRuntime(stage,{projectRoot}={}) {
   // This is an unpublished, disposable stage. On any write failure buildProject
   // discards the stage and preserves the previous published build unchanged.
   for (const [name, contents] of emitted) await writeFile(path.join(runtime, name), contents);
-  for (const entry of originals) {
+  for (const entry of await readdir(runtime,{withFileTypes:true})) {
+    if(!entry.name.endsWith('.mjs')||!entry.isFile())continue;
     if (!emitted.has(entry.name)) await unlink(path.join(runtime, entry.name));
   }
   // JSON, CJS, license files and the OG assets directory are never traversed or

package/build/cache-components.mjs

@@ -15,7 +15,7 @@ export function transformCacheComponents(source, file, { enabled, projectRoot, m
   return cachedTransform('cache-components',source,[file,enabled,projectRoot,mode,buildId,configuredSegment,handlers],()=>transformUncached(source,file,{enabled,projectRoot,mode,buildId,configuredSegment,handlers}));
 }
 function transformUncached(source,file,{enabled,projectRoot,mode,buildId,configuredSegment,handlers}) {
-  const ast = parse(source, { sourceType: 'unambiguous', sourceFilename: file, plugins: ['jsx', ...(/\.tsx?$/.test(file) ? ['typescript'] : [])] });
+  const ast = parse(source, { sourceType: 'unambiguous', sourceFilename: file, plugins: ['jsx', ...(/\.[cm]?tsx?$/.test(file) ? ['typescript'] : [])] });
   let program;
   traverse(ast, { Program(value) { program = value; value.stop(); } });
   const moduleDirective = ast.program.directives.find(cacheDirective);

package/build/cache-handlers.mjs

@@ -47,7 +47,7 @@ export async function prepareCacheHandlers({ config, projectRoot, stage, environ
       platform: 'node', target: 'node22', format: 'esm', packages: 'external', logLevel: 'silent', define: environment,
       banner: { js: "import {createRequire as __prnextCreateRequire} from 'node:module';const require=__prnextCreateRequire(import.meta.url);" },
       plugins: [{ name: 'cache-handler-compatibility', setup(builder) {
-        builder.onResolve({ filter: /^(?:next|prnext|@thomas\.f\/prnext)\/(cache|headers|server)(?:\.js)?$/ }, ({ path: specifier }) => ({ path: `../compat/${frameworkImportName(specifier)}.cjs`, external: true }));
+        builder.onResolve({ filter: /^(?:next|prnext|@thomas\.f\/prnext)\/(cache(?:\/redis)?|headers|server)(?:\.js)?$/ }, ({ path: specifier }) => ({ path: `../compat/${frameworkImportName(specifier)}.cjs`, external: true }));
       } }],
     });
     result[name] = output;

package/build/compact-css.mjs

@@ -0,0 +1,53 @@
+import postcss from 'postcss';
+import selectors from 'postcss-selector-parser';
+import values from 'postcss-value-parser';
+import { createHash } from 'node:crypto';
+
+// Names are independent of compilation order and of which routes are built.
+// A collision fails the build instead of changing one of two published maps.
+export function compactCssModule(css, exports, {globals = new Set(), hash = name => 'p' + createHash('sha256').update(name).digest('base64url').slice(0, 10)} = {}) {
+  const names = new Map(), reverse = new Map();
+  for (const list of Object.values(exports)) for (const name of list.split(/\s+/).filter(Boolean)) {
+    if (names.has(name) || globals.has(name)) continue;
+    const short = hash(name);
+    if (!/^[a-zA-Z_][\w-]*$/.test(short) || globals.has(short) && short!==name || reverse.has(short) && reverse.get(short) !== name) throw new Error('CSS Module compact-name collision.');
+    names.set(name, short); reverse.set(short, name);
+  }
+  const root = postcss.parse(css);
+  root.walkRules(rule => {
+    rule.selector = selectors(ast => ast.walkClasses(node => {
+      if (names.has(node.value)) node.value = names.get(node.value);
+    })).processSync(rule.selector);
+  });
+  root.walkAtRules(/^(?:-webkit-)?keyframes$/i, rule => {
+    const parsed = values(rule.params);
+    parsed.walk(node => { if (node.type === 'word' && names.has(node.value)) node.value = names.get(node.value); });
+    rule.params = parsed.toString();
+  });
+  root.walkDecls(/^(?:-webkit-)?animation(?:-name)?$/i, declaration => {
+    const parsed = values(declaration.value);
+    parsed.walk(node => { if (node.type === 'word' && names.has(node.value)) node.value = names.get(node.value); });
+    declaration.value = parsed.toString();
+  });
+  return { css: root.toString(), names:[...names], mapping: Object.fromEntries(Object.entries(exports).map(([key, list]) => [key, list.split(/\s+/).map(name => names.get(name) || name).join(' ')])) };
+}
+
+export function globalCssNames(css, {local = true} = {}, result = new Set()) {
+  const root = postcss.parse(css);
+  root.walkRules(rule => {
+    selectors(ast => ast.each(selector => {
+      let global = !local;
+      selector.each(node => {
+        if (node.type === 'pseudo' && [':global',':local'].includes(node.value)) {
+          if (node.nodes?.length) { if (node.value === ':global') node.walkClasses(item=>result.add(item.value)); }
+          else global = node.value === ':global';
+        } else if (global) { if(node.type==='class') result.add(node.value); node.walkClasses?.(item=>result.add(item.value)); }
+      });
+    })).processSync(rule.selector);
+  });
+  root.walkDecls(/^composes$/i, declaration => {
+    const words = values(declaration.value).nodes.filter(node=>node.type==='word').map(node=>node.value);
+    if (words.at(-1)==='global' && words.at(-2)==='from') for(const name of words.slice(0,-2)) result.add(name);
+  });
+  return result;
+}