@thomas.f/prnext 0.1.16-alpha → 0.1.18-alpha

package/build/app-static.mjs

@@ -3,6 +3,9 @@ import { writeFile } from 'node:fs/promises';
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { staticPath } from '../runtime/pages-paths.mjs';
+import {mapConcurrent} from './concurrent.mjs';
+import {mapPrerender,prerenderPath} from './prerender-pool.mjs';
+import {validateHtmlOnlyPrerender} from './html-only-config.mjs';
 
 const MAX_STATIC_PATHS = 10_000;
 const MAX_RESPONSE_BYTES = 16 * 1024 * 1024;
@@ -48,7 +51,9 @@ export async function prerenderApp(stage, manifest, dev) {
       ? await import(pathToFileURL(path.join(stage, 'runtime/app-static.mjs')).href) : null;
     const handlers = routes.some(route => route.kind === 'api')
       ? await import(pathToFileURL(path.join(stage, 'runtime/route-static.mjs')).href) : null;
-    for (const route of routes) {
+    const initialSeeds=[...manifest.prerendered];
+    const jobs=[],seeds=new Map(),partialRoutes=new Set();
+    await mapConcurrent(routes,async(route,routeIndex)=>{
       const handler = route.kind === 'api';
       const options = { modulePath: path.join(stage, route.module), distDir: stage, manifest, route, production: true };
       // This fixed internal entry shares the root layout, but its parameter
@@ -59,14 +64,22 @@ export async function prerenderApp(stage, manifest, dev) {
       if (handler) route.handlerMethods = inspected.methods;
       const dynamic = route.pattern.includes('[');
       const entries = appStaticEntries(route.pattern, dynamic ? inspected.params : [{}]);
+      if(route.htmlOnly && dynamic && (!inspected.generated || !entries.length || inspected.params.some(params=>appStaticEntries(route.pattern,[params]).length!==1))) {
+        throw new Error(`htmlOnly route ${route.pattern} requires nonempty complete generateStaticParams results.`);
+      }
       const config = route.cacheConfig;
+      if (config.ensureStatic === 'navigation') {
+        if (config.runtime === 'edge' || config.dynamic === 'force-dynamic' || config.revalidate === 0 || config.forceNoStore) throw new Error(`Route ${route.pattern}: ensureStatic='navigation' conflicts with request-time rendering configuration.`);
+        if (dynamic && (!inspected.generated || !entries.length || inspected.params.some(params => appStaticEntries(route.pattern, [params]).length !== 1))) throw new Error(`Route ${route.pattern}: ensureStatic='navigation' requires generateStaticParams() with complete, nonempty parameter sets.`);
+      }
       // Keep generated-path restrictions and method metadata for Edge routes,
       // while separating dynamic rendering from the persistent Data Cache.
       if (config.runtime === 'edge') {
         if (dynamic && config.dynamicParams === false) route.allowedPaths = entries.map(entry => entry.path);
-        continue;
+        return;
       }
       const partial = !handler && manifest.config?.cacheComponents === true && (!config.dynamic || config.dynamic === 'auto');
+      if(partial)partialRoutes.add(route);
       if (partial && dynamic && !inspected.generated) entries.length = 0;
       if (partial && dynamic && inspected.generated && inspected.params.length === 0) {
         throw new Error(`generateStaticParams for ${route.pattern} must return at least one parameter object when cacheComponents is enabled.`);
@@ -99,17 +112,20 @@ export async function prerenderApp(stage, manifest, dev) {
       if (partial) route.pprFallback = config.dynamicParams !== false;
       if (dynamic && config.dynamicParams === false) route.allowedPaths = entries.map(entry => entry.path);
       if (handler) {
-        if (!inspected.staticEligible) continue;
-        if (dynamic && !inspected.generated && !['force-static', 'error'].includes(config.dynamic)) continue;
+        if (!inspected.staticEligible) return;
+        if (dynamic && !inspected.generated && !['force-static', 'error'].includes(config.dynamic)) return;
       } else {
-        if (config.dynamic === 'force-dynamic' || (config.dynamic !== 'force-static' && (config.revalidate === 0 || config.forceNoStore))) continue;
-        if (dynamic && !inspected.generated && !partial && !['force-static', 'error'].includes(config.dynamic)) continue;
+        if (config.dynamic === 'force-dynamic' || (config.dynamic !== 'force-static' && (config.revalidate === 0 || config.forceNoStore))) return;
+        if (dynamic && !inspected.generated && !partial && !['force-static', 'error'].includes(config.dynamic)) return;
       }
       route.ssg = true;
       route.fallback = config.dynamicParams === false ? false : 'blocking';
-      for (const entry of entries) {
+      for (const [entryIndex,entry] of entries.entries()) {
         if (occupied.has(entry.path)) throw new Error(`Multiple pages prerender the same path: ${entry.path}.`);
-        const rendered = await (handler ? handlers.prerenderAppRouteHandler : pages.prerenderAppRoute)({ ...options, path: entry.path, params: entry.params });
+        occupied.add(entry.path);
+        jobs.push({route,routeIndex,entryIndex,path:entry.path,run:async()=>{
+        const rendered = await prerenderPath(handler?'handler':'app',{ ...options, path: entry.path, params: entry.params },handler?handlers.prerenderAppRouteHandler:pages.prerenderAppRoute);
+        if(route.htmlOnly)validateHtmlOnlyPrerender(route,rendered);
         if (rendered.partial) {
           const file = `static/partial-${createHash('sha256').update(entry.path).digest('hex').slice(0, 20)}.json`;
           await writeFile(path.join(stage, file), JSON.stringify({ ...rendered.partial, ...rendered.metadata }));
@@ -117,7 +133,7 @@ export async function prerenderApp(stage, manifest, dev) {
           if (!dynamic) { delete route.ssg; delete route.fallback; }
           else (route.dynamicPaths ||= []).push(entry.path);
           occupied.add(entry.path);
-          continue;
+          return;
         }
         if (rendered.dynamic) {
           route.dynamicReasons = [...new Set([...(route.dynamicReasons || []), rendered.reason || 'request-time data'])];
@@ -129,32 +145,43 @@ export async function prerenderApp(stage, manifest, dev) {
             // successful seeds survive, while ungenerated paths stay dynamic.
             if (handler && config.dynamicParams !== false) route.fallback = 'dynamic';
           }
-          continue;
+          return;
         }
         const body = Buffer.isBuffer(rendered.body) ? rendered.body : Buffer.from(rendered.body);
-        const flight = handler ? null : Buffer.isBuffer(rendered.flight) ? rendered.flight : Buffer.from(rendered.flight);
+        const flight = handler || route.htmlOnly ? null : Buffer.isBuffer(rendered.flight) ? rendered.flight : Buffer.from(rendered.flight);
         if (body.byteLength > MAX_RESPONSE_BYTES || (flight && flight.byteLength > MAX_RESPONSE_BYTES)) throw new Error(`Static App route ${entry.path} exceeds the 16 MiB response limit.`);
         const stem = `static/${handler ? 'route' : 'app'}-${createHash('sha256').update(entry.path).digest('hex').slice(0, 20)}`;
         const file = `${stem}.${handler ? 'body' : 'html'}`;
         // Flight is opaque text, not JSON; the native cache supplies text/x-component.
-        const dataFile = handler ? undefined : `${stem}.txt`;
+        const dataFile = handler || route.htmlOnly ? undefined : `${stem}.txt`;
         await writeFile(path.join(stage, file), body);
         if (dataFile) await writeFile(path.join(stage, dataFile), flight);
         occupied.add(entry.path);
-        manifest.prerendered.push({ routeId: route.id, path: entry.path, file, ...(dataFile ? { dataFile } : {}), status: rendered.status ?? 200,
+        seeds.set(entry.path,{ routeId: route.id, path: entry.path, file, ...(dataFile ? { dataFile } : {}), status: rendered.status ?? 200,
           headers: rendered.headers || {}, revalidate: rendered.revalidate ?? config.revalidate,
           generatedAt: rendered.generatedAt, tags: rendered.tags || [], paths: rendered.paths || [],
         });
+        }});
       }
+    });
+    jobs.sort((a,b)=>a.routeIndex-b.routeIndex||a.entryIndex-b.entryIndex);
+    await mapPrerender(jobs,job=>job.run());
+    manifest.prerendered=[...initialSeeds,...jobs.flatMap(job=>seeds.has(job.path)?[seeds.get(job.path)]:[])];
+    for(const route of routes){
+      const routeJobs=jobs.filter(job=>job.route===route);
+      if(route.dynamicPaths)route.dynamicPaths=routeJobs.filter(job=>route.dynamicPaths.includes(job.path)).map(job=>job.path);
+      if(route.ppr)route.ppr=Object.fromEntries(routeJobs.filter(job=>Object.hasOwn(route.ppr,job.path)).map(job=>[job.path,route.ppr[job.path]]));
+      if(route.dynamicReasons)route.dynamicReasons=[...new Set(route.dynamicReasons)].sort();
       // Unseen Cache Components paths are generated by the PPR runtime, which
       // handles either complete HTML/Flight or a resumable shell atomically.
-      if (partial && dynamic) {
+      if (partialRoutes.has(route) && route.pattern.includes('[')) {
         if (manifest.prerendered.some(page => page.routeId === route.id)) {
           // Concrete complete seeds use the native invalidation-aware cache.
           // Other paths still reach the PPR runtime, including dynamic holes.
           route.ssg = true; route.fallback = 'ppr';
         } else { delete route.ssg; delete route.fallback; }
       }
+      if(route.htmlOnly)route.fallback=false;
     }
   } finally { await closeAppRuntime(); }
 }

package/build/app-styles.mjs

@@ -0,0 +1,79 @@
+import path from 'node:path';
+
+const stylesheet = /\.(?:css|scss|sass)$/i;
+const conventions = ['layout', 'template', 'loading', 'error', 'notFound', 'not-found', 'default', 'page'];
+// Native esbuild identifies virtual inputs with absolute paths. The webpack
+// bridge uses the same namespaces with project-relative paths instead. Only
+// strip framework namespaces here; a Windows drive letter is part of the path.
+const styleNamespace = /^prnext-(?:css-mapping|compiled-css|app-empty|edge-empty):/;
+
+/** Join RSC references with their real client dependency graphs, without
+ * flattening CSS @import/composes dependencies into extra stylesheets. */
+export function createAppStyleGraph(root) {
+  const graph = new Map();
+  const file = name => path.resolve(root, name.replace(styleNamespace, ''));
+  return {
+    alias(source, target) {
+      if (file(source) !== file(target)) graph.set(file(source), new Set([file(target)]));
+    },
+    record(metafile) {
+      for (const [name, input] of Object.entries(metafile?.inputs || {})) {
+        const key = file(name), dependencies = graph.get(key) || new Set();
+        for (const dependency of input.imports || []) if (!dependency.external) dependencies.add(file(dependency.path));
+        graph.set(key, dependencies);
+      }
+    },
+    collect(roots) {
+      const seen = new Set(), styles = new Set();
+      const pending = [...roots].reverse();
+      while (pending.length) {
+        const key = file(pending.pop());
+        if (seen.has(key)) continue;
+        seen.add(key);
+        if (stylesheet.test(key)) { styles.add(key); continue; }
+        const dependencies = [...graph.get(key) || []];
+        for (let index = dependencies.length - 1; index >= 0; index--) pending.push(dependencies[index]);
+      }
+      return [...styles];
+    },
+  };
+}
+
+/** Layout scopes precede their descendants. Shared scopes produce the same
+ * content-addressed sheet on every route, while a page never owns a sibling's
+ * styles. A pruned parallel tree also includes its loading/error/default and
+ * intercepted branches so a retained slot cannot lose its stylesheet. */
+export function appStyleEntries(route) {
+  const scopes = [];
+  function add(files, path) {
+    const roots = conventions.filter(name => name !== 'page' && name !== 'default').map(name => files?.[name]).filter(file => typeof file === 'string');
+    if (roots.length) scopes.push({ path, kind:'layout', roots });
+    for (const kind of ['default', 'page']) if (typeof files?.[kind] === 'string') scopes.push({ path, kind, roots:[files[kind]] });
+  }
+  if (route.routing) {
+    function visit(node) {
+      add(node.files, node.path || '');
+      for (const child of node.children || []) visit(child);
+      for (const name of Object.keys(node.slots || {}).sort()) visit(node.slots[name]);
+    }
+    visit(route.routing);
+  } else {
+    for (const segment of route.segments || []) add(segment, segment.path || '');
+    if (route.file) add({ page: route.file }, '');
+  }
+  return scopes;
+}
+
+export const appStyleScopes = route => appStyleEntries(route).map(scope => scope.roots);
+
+export function planAppStyleEntries(route, graph) {
+  const included = new Set(), groups = [];
+  for (const scope of appStyleEntries(route)) {
+    const styles = graph.collect(scope.roots).filter(file => !included.has(file));
+    for (const file of styles) included.add(file);
+    if (styles.length) groups.push({ ...scope, styles });
+  }
+  return groups;
+}
+
+export const planAppStyles = (route, graph) => planAppStyleEntries(route, graph).map(scope => scope.styles);

package/build/app.mjs

@@ -1,6 +1,6 @@
-import {frameworkImportName, frameworkRuntimeImportPattern, frameworkSubpathPattern} from './framework-imports.mjs';
+import {applicationEntry, frameworkImportName, frameworkRuntimeImportPattern, frameworkSubpathPattern} from './framework-imports.mjs';
 import { moduleResolutionPlugin } from './module-resolution.mjs';
-import { build as bundle, compilerSource } from './compiler.mjs';
+import { build as bundle, compilerSource,readCompilerFile } from './compiler.mjs';
 import { readFile, writeFile, mkdir, cp, realpath } from 'node:fs/promises';
 import path from 'node:path';
 import { createHash } from 'node:crypto';
@@ -14,16 +14,20 @@ import { createServerActions } from './actions.mjs';
 import { expandActionExports } from './action-exports.mjs';
 import { compileEdge } from './edge.mjs';
 import { createNativePackages } from './native-packages.mjs';
-import { createRefreshTransform, devSingletonsPlugin, devClientFile } from './dev.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';
 
 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 +43,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 +144,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,11 +177,15 @@ 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 = {} }) {
-  const refresh = dev ? createRefreshTransform(project.root) : undefined;
+export async function compileApp({ project, stage, manifest, cssModules, fonts, images, dev, reactCompiler = false, defineEnvironment = {}, productionBrowserSourceMaps = false, serverExternalPackages = [], moduleResolution = {} }) {
+  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');
+  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) {
     const file = path.join(stage, '.entries', 'app-not-found.jsx');
     await writeFile(file, `import {notFound} from 'next/navigation';export default function MissingRoute(){notFound()}`);
@@ -193,6 +201,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
   }
   if (!routes.length) 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.');
+  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 });
   function actionTransform(source, file, mode, runtime = 'nodejs') {
     const result = actions.transform(source, file, mode);
@@ -203,6 +212,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();
@@ -228,29 +238,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,{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 };
@@ -294,9 +308,14 @@ 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 source = await fonts.transform(await expandActionExports(args.prnextSource ?? await readFile(args.path, 'utf8'), args.path, async (specifier, importer) => {
+          const original=await readCompilerFile(args.path,args.prnextSource);
+          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);
@@ -305,6 +324,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
           const actionSource = actionTransform(cachedSource, args.path, mode);
           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);
@@ -315,7 +335,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
             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) contents = await refresh(contents, args.path);
+          if (browser && refresh && !actions.isServerModule(cachedSource,args.path)) contents = await refresh(contents, args.path);
           return { contents, loader: extensions[path.extname(args.path)] || 'jsx', resolveDir: path.dirname(args.path) };
         });
       },
@@ -331,6 +351,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,{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 => {
@@ -358,7 +379,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;
@@ -373,13 +394,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(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');
+      } });
     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;
@@ -407,6 +433,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);
@@ -421,7 +449,6 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
   }
 
   async function collectBrowserStyles(browserEntries) {
-    if (!globalErrorId) return;
     const revision = `${boundaries.size}:${actions.actions.size}:${nativePackages.version}`;
     if (browserStyleRevision === revision) return;
     // SSR intentionally erases ssr:false loaders. Discover their dependencies
@@ -431,6 +458,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
       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)] });
     fonts.record(discovery.metafile);
+    styleGraph.record(discovery.metafile);
     const entryIds = new Map(await Promise.all(Object.entries(browserEntries).map(async ([id, file]) => [await canonicalFile(file), id])));
     const globalRoots = [], normalRoots = [];
     for (const output of Object.values(discovery.metafile.outputs)) {
@@ -473,6 +501,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)) }
@@ -481,11 +510,16 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
   }
   manifest.app = { clientModules: {}, actions: {}, actionKey: actions.actionKey };
   const actionRevision = () => [...actions.actions.values()].map(action=>action.id+':'+[...(action.runtimes || [])].sort().join(',')).join(';');
+  const boundaryRevision = () => [...boundaries.values()].map(boundary=>boundary.id+':'+!!boundary.edge).join(';');
+  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');
   for (;;) {
-    const revision = `${actionRevision()}:${boundaries.size}:${cssFiles.size}:${globalErrorCssFiles.size}`;
+    // 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();
     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)};`);
@@ -493,6 +527,8 @@ 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();
     const ssrEntries = {};
     const globalSsrEntries = {};
     for (const boundary of boundaries.values()) {
@@ -512,6 +548,7 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     await collectBrowserStyles(browserEntries);
     globalErrorOnlyCss.clear();
     for (const file of globalErrorCssFiles) if (!cssFiles.has(file)) globalErrorOnlyCss.add(file);
+    const emittedBrowserInputs = browserRevision();
     if (routes.some(route => route.kind === 'page')) {
     let globalErrorCss = [];
     if (globalErrorCssFiles.size) {
@@ -524,31 +561,62 @@ export async function compileApp({ project, stage, manifest, cssModules, fonts,
     }
     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 } } : {}) })}});\n`);
+    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 = { 'app-runtime': runtimeEntry, ...browserEntries };
     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: [moduleResolutionPlugin(moduleResolution, project.root), ...(dev ? [devSingletonsPlugin()] : []), images.plugin(), fonts.plugin(), graphPlugin('browser', { omitAllStyles: true }), nativePackages.plugin('browser'), cssModules.plugin(true, { emitStyles: () => false })] });
     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;
       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)] });
+          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 (revision === `${actionRevision()}:${boundaries.size}:${cssFiles.size}:${globalErrorCssFiles.size}`) break;
+    if (emittedActions === actionRevision() && emittedBoundaries === boundaryRevision() &&
+        serverNativeVersion === nativePackages.version && emittedBrowserInputs === browserRevision()) break;
+  }
+
+  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/build-lock.mjs

@@ -11,7 +11,7 @@ function alive(pid) {
 }
 async function owner(directory) {
   const info = await lstat(directory);
-  if (!info.isDirectory() || info.isSymbolicLink()) throw busy('The build lock is not a real directory. Check .prnext-build.lock before retrying.');
+  if (!info.isDirectory() || info.isSymbolicLink()) throw busy(`The project lock is not a real directory. Check ${path.basename(directory)} before retrying.`);
   const file = await open(path.join(directory, 'owner.json'), 'r');
   try {
     if ((await file.stat()).size > 4096) throw new Error('oversized owner');
@@ -22,8 +22,8 @@ async function owner(directory) {
 }
 
 /** One publisher per canonical project, covering React and direct static imports. */
-export async function withBuildLock(directory, action) {
-  const root = await realpath(directory), lock = path.join(root, LOCK);
+export async function withBuildLock(directory, action, {development = false} = {}) {
+  const root = await realpath(directory), lock = path.join(root, development ? '.prnext-dev.lock' : LOCK);
   const identity = { pid: process.pid, host: hostname(), token: randomUUID(), createdAt: new Date().toISOString() };
   const prepared = path.join(root, `.prnext-lock-${identity.token}`);
   await mkdir(prepared, { mode: 0o700 });
@@ -37,16 +37,16 @@ export async function withBuildLock(directory, action) {
         try { previous = await owner(lock); }
         catch (cause) {
           if (cause.code === 'ENOENT' && attempt < 8) continue;
-          throw busy('Cannot verify the build lock. Check .prnext-build.lock before retrying.');
+          throw busy(`Cannot verify the project lock. Check ${path.basename(lock)} before retrying.`);
         }
-        if (previous.host !== identity.host || alive(previous.pid)) throw busy(`A build is already running for this project (PID ${previous.pid}). Wait for it to finish.`);
+        if (previous.host !== identity.host || alive(previous.pid)) throw busy(development ? `A development server is already running for this project (PID ${previous.pid}). Stop it before starting another.` : `A build is already running for this project (PID ${previous.pid}). Wait for it to finish.`);
         // Exactly one contender can recover this generation. Never delete a lock
         // merely because it is old: long builds and suspended processes are valid.
         let claim;
         try { claim = await open(path.join(lock, 'recovery'), 'wx', 0o600); }
         catch (cause) {
           if (cause.code === 'ENOENT' && attempt < 8) continue;
-          throw busy('Build lock recovery is in progress. Retry shortly; if recovery was interrupted, check .prnext-build.lock manually.');
+          throw busy(`Project lock recovery is in progress. Retry shortly; if recovery was interrupted, check ${path.basename(lock)} manually.`);
         }
         const retired = path.join(root, `.prnext-lock-retired-${identity.token}`);
         try {