@reckona/mreact-router 0.0.120 → 0.0.122

package/src/client.ts

@@ -31,10 +31,7 @@ import {
   type RouterBundleAssetOutput,
   type RouterBundleChunkOutput,
 } from "./bundle-pipeline.js";
-import {
-  resolveClientConsolePureFunctions,
-  type AppRouterProductionOptions,
-} from "./config.js";
+import { resolveClientConsolePureFunctions, type AppRouterProductionOptions } from "./config.js";
 import type { AppRoute } from "./routes.js";
 import { existingRouteShellCandidates } from "./route-shells.js";
 import {
@@ -116,6 +113,7 @@ interface ClientRouteSourceTransform {
 export interface ClientRouteInferenceResult {
   client: boolean;
   clientBoundaryImports: string[];
+  clientBoundaryFallbackImports: string[];
   diagnostics: ClientRouteInferenceDiagnostic[];
 }
 
@@ -265,6 +263,7 @@ export async function inferClientRouteModule(options: {
         client:
           mergedRouteInference.client || shellInferences.some((inference) => inference.client),
         clientBoundaryImports: mergedRouteInference.clientBoundaryImports,
+        clientBoundaryFallbackImports: mergedRouteInference.clientBoundaryFallbackImports,
         diagnostics: [
           ...mergedRouteInference.diagnostics,
           ...shellInferences.flatMap((inference) => inference.diagnostics),
@@ -325,6 +324,7 @@ function clientRouteInferenceFromBoundaryGraph(
   return {
     client: clientRoute || clientBoundaryImports.length > 0,
     clientBoundaryImports,
+    clientBoundaryFallbackImports: [],
     diagnostics: [],
   };
 }
@@ -338,6 +338,9 @@ function mergeClientRouteInference(
     clientBoundaryImports: Array.from(
       new Set([...left.clientBoundaryImports, ...right.clientBoundaryImports]),
     ),
+    clientBoundaryFallbackImports: Array.from(
+      new Set([...left.clientBoundaryFallbackImports, ...right.clientBoundaryFallbackImports]),
+    ),
     diagnostics: [...left.diagnostics, ...right.diagnostics],
   };
 }
@@ -466,6 +469,7 @@ export async function collectClientRouteReferences(options: {
     const output = transformCompilerModuleContext({
       code: source.code,
       clientBoundaryImports: source.inference.clientBoundaryImports,
+      clientBoundaryFallbackImports: source.inference.clientBoundaryFallbackImports,
       dev: false,
       filename: source.filename,
       moduleContext: source.moduleContext,
@@ -511,6 +515,7 @@ export async function collectClientRouteReferences(options: {
       routeInference.client ||
       sources.some((source) => source.filename !== options.filename && source.inference.client),
     clientBoundaryImports: routeInference.clientBoundaryImports,
+    clientBoundaryFallbackImports: routeInference.clientBoundaryFallbackImports,
     clientReferenceImports,
     clientReferenceManifest,
     diagnostics: sources
@@ -685,6 +690,7 @@ async function inferClientRouteModuleSource(options: {
 
   try {
     const clientBoundaryImports: string[] = [];
+    const clientBoundaryFallbackImports: string[] = [];
     const clientBoundaryExportNames = new Set<string>();
     const nestedClientExportNames = new Set<string>();
     const clientReferenceSourceFiles: string[] = [];
@@ -779,7 +785,10 @@ async function inferClientRouteModuleSource(options: {
           renderedComponentRoots,
         );
         if (
-          matchesInferredExportNames(importedNavigationExportNames, imported.navigationLinkExportNames)
+          matchesInferredExportNames(
+            importedNavigationExportNames,
+            imported.navigationLinkExportNames,
+          )
         ) {
           usesNavigationLink = true;
           for (const exportName of renderedLocalExportNames(reference, exportInfo)) {
@@ -841,6 +850,9 @@ async function inferClientRouteModuleSource(options: {
         }
 
         clientBoundaryImports.push(reference.source);
+        if (!imported.clientBoundaryModule && isClientBoundaryFallbackEligibleSource(source)) {
+          clientBoundaryFallbackImports.push(reference.source);
+        }
         continue;
       }
 
@@ -933,6 +945,7 @@ async function inferClientRouteModuleSource(options: {
         clientProxy ||
         nestedClient,
       clientBoundaryImports,
+      clientBoundaryFallbackImports,
       clientBoundaryExportNames: Array.from(clientBoundaryExportNames),
       clientBoundaryModule: clientProxy || implicitModuleClient,
       nestedClientExportNames: Array.from(nestedClientExportNames),
@@ -956,6 +969,7 @@ function emptyClientRouteModuleInferenceResult(
     boundaryGraphFallbackRequired: false,
     client: false,
     clientBoundaryImports: [],
+    clientBoundaryFallbackImports: [],
     clientBoundaryExportNames: [],
     clientBoundaryModule: false,
     nestedClientExportNames: [],
@@ -992,7 +1006,12 @@ async function clientRouteModuleAnalysisForSource(options: {
         })),
     ),
   );
-  setLatestModuleCacheEntry(options.cache.moduleAnalysisByFile, options.filename, cacheKey, analysis);
+  setLatestModuleCacheEntry(
+    options.cache.moduleAnalysisByFile,
+    options.filename,
+    cacheKey,
+    analysis,
+  );
   return analysis;
 }
 
@@ -1090,6 +1109,10 @@ function isStyleModuleSpecifier(source: string): boolean {
 
 const styleModuleExtensions = new Set([".css", ".less", ".sass", ".scss", ".styl", ".stylus"]);
 
+function isClientBoundaryFallbackEligibleSource(source: string): boolean {
+  return !/\bon[A-Z][A-Za-z0-9_$]*\s*=/u.test(source) && !/\bglobalThis\b/u.test(source);
+}
+
 function renderedImportedExportNames(
   reference: ClientRouteStaticImportReference,
   componentRoots: ReadonlySet<string>,
@@ -1227,14 +1250,14 @@ function startsUppercase(value: string): boolean {
 export function formatClientRouteInferenceDiagnostic(
   diagnostic: ClientRouteInferenceDiagnostic,
 ): string {
-  const route = diagnostic.routePath === undefined ? "" : ` on route ${JSON.stringify(diagnostic.routePath)}`;
+  const route =
+    diagnostic.routePath === undefined ? "" : ` on route ${JSON.stringify(diagnostic.routePath)}`;
   return `${diagnostic.code}: ${diagnostic.message}${route}`;
 }
 
-function withClientRouteDiagnosticPath<T extends ClientRouteInferenceDiagnostic | ClientRouteInferenceResult>(
-  value: T,
-  routePath: string | undefined,
-): T {
+function withClientRouteDiagnosticPath<
+  T extends ClientRouteInferenceDiagnostic | ClientRouteInferenceResult,
+>(value: T, routePath: string | undefined): T {
   if (routePath === undefined) {
     return value;
   }

package/src/module-runner.ts

@@ -411,7 +411,7 @@ async function transformServerSourceFile(
     console.warn(formatClientRouteInferenceDiagnostic(diagnostic));
   }
 
-  const cacheKey = `${options.serverOutput}\0${options.dev ? "dev" : "prod"}\0${options.filename}\0${transformedSourceHash}\0${clientInference.clientBoundaryImports.join("\0")}\0${vitePluginsCacheKey(options.vitePlugins)}`;
+  const cacheKey = `${options.serverOutput}\0${options.dev ? "dev" : "prod"}\0${options.filename}\0${transformedSourceHash}\0${clientInference.clientBoundaryImports.join("\0")}\0${clientInference.clientBoundaryFallbackImports.join("\0")}\0${vitePluginsCacheKey(options.vitePlugins)}`;
   const cached = readRouterRuntimeCacheEntry(
     serverSourceTransformCache,
     cacheKey,
@@ -425,6 +425,7 @@ async function transformServerSourceFile(
   const output = transformCompilerModuleContext({
     code: source,
     clientBoundaryImports: clientInference.clientBoundaryImports,
+    clientBoundaryFallbackImports: clientInference.clientBoundaryFallbackImports,
     dev: options.dev,
     filename: options.filename,
     moduleContext,
@@ -488,12 +489,20 @@ function withNodeRequireShimForEsmBundle(options: {
     return code;
   }
 
-  return `${rewritten.needsNativeImport ? 'const __mreactNativeImport = Function("specifier", "return import(specifier)");\n' : ""}${needsFilenameGlobalShim ? `const __filename = ${JSON.stringify(options.filename)};
+  return `${rewritten.needsNativeImport ? 'const __mreactNativeImport = Function("specifier", "return import(specifier)");\n' : ""}${
+    needsFilenameGlobalShim
+      ? `const __filename = ${JSON.stringify(options.filename)};
 const __dirname = ${JSON.stringify(dirname(options.filename))};
-` : ""}${rewritten.needsRequire || needsRequireShim ? `import { createRequire as __mreactCreateRequire } from "node:module";
+`
+      : ""
+  }${
+    rewritten.needsRequire || needsRequireShim
+      ? `import { createRequire as __mreactCreateRequire } from "node:module";
 const __mreactRequire = __mreactCreateRequire(${JSON.stringify(requireBaseUrl)});
 const require = __mreactRequire;
-` : ""}${code}`;
+`
+      : ""
+  }${code}`;
 }
 
 function needsCommonJsFilenameGlobalShim(code: string): boolean {
@@ -535,7 +544,11 @@ function rewriteNodeModulesExternalImports(code: string): {
       }
 
       needsNativeImport = true;
-      const rewritten = esmImportClauseToNativeImportStatements(clause.trim(), specifier, importIndex++);
+      const rewritten = esmImportClauseToNativeImportStatements(
+        clause.trim(),
+        specifier,
+        importIndex++,
+      );
       for (const [name, replacement] of rewritten.bindings) {
         nativeImportBindings.set(name, replacement);
       }
@@ -601,7 +614,9 @@ function isNodeModulesPath(file: string): boolean {
 function isNodeImportableModuleFile(file: string): boolean {
   const extension = extname(file);
 
-  return extension === ".cjs" || extension === ".mjs" || extension === ".js" || extension === ".node";
+  return (
+    extension === ".cjs" || extension === ".mjs" || extension === ".js" || extension === ".node"
+  );
 }
 
 function isNodeCommonJsModuleFile(file: string): boolean {
@@ -676,7 +691,10 @@ function commonJsImportClauseToRequireStatements(
   const defaultName = clause.slice(0, commaIndex).trim();
   const namedOrNamespace = clause.slice(commaIndex + 1).trim();
   const temporaryName = `__mreactExternalCommonJs${importIndex}`;
-  const statements = [`const ${temporaryName} = ${requireExpression};`, `const ${defaultName} = ${temporaryName};`];
+  const statements = [
+    `const ${temporaryName} = ${requireExpression};`,
+    `const ${defaultName} = ${temporaryName};`,
+  ];
 
   if (namedOrNamespace.startsWith("* as ")) {
     statements.push(`const ${namedOrNamespace.slice(5).trim()} = ${temporaryName};`);
@@ -737,10 +755,7 @@ function collectNamedEsmImportBindings(
   }
 }
 
-function namedCommonJsImportsToRequireStatements(
-  clause: string,
-  sourceExpression: string,
-): string {
+function namedCommonJsImportsToRequireStatements(clause: string, sourceExpression: string): string {
   const objectBindings: string[] = [];
   const statements: string[] = [];
 

package/src/render.ts

@@ -159,6 +159,7 @@ export interface RenderAppRequestOptions {
   appDir: string;
   assetBaseUrl?: string | undefined;
   clientScripts?: ReadonlyMap<string, string>;
+  clientStylesByFile?: ReadonlyMap<string, readonly string[]>;
   clientStyles?: ReadonlyMap<string, readonly string[]>;
   env?: unknown;
   importPolicy?: AppRouterImportPolicy | undefined;
@@ -303,6 +304,7 @@ async function preloadBuiltPageRouteModules(options: {
     const stringOutput = transformServerModule({
       code: routeCode,
       clientBoundaryImports: options.analysis.clientInference.clientBoundaryImports,
+      clientBoundaryFallbackImports: options.analysis.clientInference.clientBoundaryFallbackImports,
       filename: options.file,
       serverModules: options.serverModules,
       serverOutput: "string",
@@ -321,6 +323,7 @@ async function preloadBuiltPageRouteModules(options: {
     const streamOutput = transformServerModule({
       code: routeCode,
       clientBoundaryImports: options.analysis.clientInference.clientBoundaryImports,
+      clientBoundaryFallbackImports: options.analysis.clientInference.clientBoundaryFallbackImports,
       filename: options.file,
       serverModules: options.serverModules,
       serverOutput: "stream",
@@ -800,6 +803,7 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
     const response = await renderSpecialRoute({
       appDir: options.appDir,
       assetBaseUrl: options.assetBaseUrl,
+      currentStyleSheets: options.clientStylesByFile?.get(notFoundFile),
       error: undefined,
       request: options.request,
       routePath: url.pathname,
@@ -1036,6 +1040,7 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
         const stringOutput = transformServerModule({
           code: routeCode,
           clientBoundaryImports: clientInference.clientBoundaryImports,
+          clientBoundaryFallbackImports: clientInference.clientBoundaryFallbackImports,
           filename: matched.route.file,
           serverModules: options.serverModules,
           serverOutput: "string",
@@ -1179,6 +1184,7 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
       const output = transformServerModule({
         code: routeCode,
         clientBoundaryImports: clientInference.clientBoundaryImports,
+        clientBoundaryFallbackImports: clientInference.clientBoundaryFallbackImports,
         filename: matched.route.file,
         serverModules: options.serverModules,
         serverOutput: "stream",
@@ -1285,6 +1291,7 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
     const output = transformServerModule({
       code: routeCode,
       clientBoundaryImports: clientInference.clientBoundaryImports,
+      clientBoundaryFallbackImports: clientInference.clientBoundaryFallbackImports,
       filename: matched.route.file,
       serverModules: options.serverModules,
       serverOutput: "string",
@@ -1449,6 +1456,7 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
       const response = await renderSpecialRoute({
         appDir: options.appDir,
         assetBaseUrl: options.assetBaseUrl,
+        currentStyleSheets: options.clientStylesByFile?.get(notFoundFile),
         error: undefined,
         request: options.request,
         routePath: matched.route.path,
@@ -1475,6 +1483,7 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
     const response = await renderSpecialRoute({
       appDir: options.appDir,
       assetBaseUrl: options.assetBaseUrl,
+      currentStyleSheets: options.clientStylesByFile?.get(errorFile),
       error,
       request: options.request,
       routePath: matched.route.path,
@@ -1737,6 +1746,7 @@ function boundaryFilenameCandidates(filename: string): string[] {
 async function renderSpecialRoute(options: {
   appDir: string;
   assetBaseUrl?: string | undefined;
+  currentStyleSheets?: readonly string[] | undefined;
   error: unknown;
   navigation?:
     | {
@@ -1807,6 +1817,7 @@ async function renderSpecialRoute(options: {
   return new Response(
     `<!DOCTYPE html>${clientNavigationHeadTags({
       assetBaseUrl: options.assetBaseUrl,
+      currentStyleSheets: options.currentStyleSheets,
       currentScript:
         options.navigation?.clientRoute === true ? options.navigation.script : undefined,
       routeScripts: options.routeScripts,
@@ -2396,6 +2407,7 @@ async function loadBundledMiddlewareModule(options: {
 function transformServerModule(options: {
   code: string;
   clientBoundaryImports?: readonly string[];
+  clientBoundaryFallbackImports?: readonly string[];
   filename: string;
   serverModules?: ReadonlyMap<string, BuiltServerModuleArtifact> | undefined;
   serverOutput: ServerOutputMode;
@@ -2428,7 +2440,9 @@ function transformServerModule(options: {
   }
 
   const awaitHydrationKey = options.serverAwaitHydration === true ? "1" : "0";
-  const key = `${options.filename}\0${options.serverOutput}\0${sourceHash}\0${awaitHydrationKey}`;
+  const boundaryKey = options.clientBoundaryImports?.join("\0") ?? "";
+  const fallbackKey = options.clientBoundaryFallbackImports?.join("\0") ?? "";
+  const key = `${options.filename}\0${options.serverOutput}\0${sourceHash}\0${awaitHydrationKey}\0${boundaryKey}\0${fallbackKey}`;
   const cached = readRouterRuntimeCacheEntry(
     serverTransformCache,
     key,
@@ -2444,6 +2458,9 @@ function transformServerModule(options: {
     ...(options.clientBoundaryImports === undefined
       ? {}
       : { clientBoundaryImports: options.clientBoundaryImports }),
+    ...(options.clientBoundaryFallbackImports === undefined
+      ? {}
+      : { clientBoundaryFallbackImports: options.clientBoundaryFallbackImports }),
     dev: true,
     filename: options.filename,
     serverEscape: nativeEscapeTransform,
@@ -2523,6 +2540,7 @@ function routeSourceAnalysisFromArtifact(
     clientInference: {
       client: artifact.clientRoute,
       clientBoundaryImports: [...artifact.clientBoundaryImports],
+      clientBoundaryFallbackImports: [...(artifact.clientBoundaryFallbackImports ?? [])],
       diagnostics: [],
     },
     hasLoader: artifact.hasLoader,
@@ -3477,7 +3495,12 @@ async function renderShellPrefixSuffix(
   const artifact = serverModules?.get(shell.file)?.[serverOutput];
   const clientInference =
     artifact !== undefined && artifact.sourceHash === memoizedHashText(code)
-      ? { client: false, clientBoundaryImports: [], diagnostics: [] }
+      ? {
+          client: false,
+          clientBoundaryImports: [],
+          clientBoundaryFallbackImports: [],
+          diagnostics: [],
+        }
       : await inferClientRouteModule({
           cache: clientRouteInferenceCache,
           code: stripRouteClientOnlyExports(code, shell.file),
@@ -3490,6 +3513,7 @@ async function renderShellPrefixSuffix(
   const output = transformServerModule({
     code,
     clientBoundaryImports: clientInference.clientBoundaryImports,
+    clientBoundaryFallbackImports: clientInference.clientBoundaryFallbackImports,
     filename: shell.file,
     serverModules,
     serverOutput,

package/src/route-styles.ts

@@ -1,5 +1,5 @@
-import { access, readFile } from "node:fs/promises";
-import { dirname, isAbsolute, relative, resolve, sep } from "node:path";
+import { access, readdir, readFile } from "node:fs/promises";
+import { dirname, join, isAbsolute, relative, resolve, sep } from "node:path";
 import { collectStaticImportReferences } from "@reckona/mreact-compiler";
 import { existingRouteShellCandidates } from "./route-shells.js";
 
@@ -65,6 +65,34 @@ export async function collectRouteCssHrefs(options: {
   });
 }
 
+export async function collectSpecialBoundaryFiles(directory: string): Promise<string[]> {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const files: string[] = [];
+
+  for (const entry of entries) {
+    const path = join(directory, entry.name);
+
+    if (entry.isDirectory()) {
+      if (entry.name === ".vite" || entry.name === "node_modules") {
+        continue;
+      }
+
+      files.push(...(await collectSpecialBoundaryFiles(path)));
+      continue;
+    }
+
+    if (entry.isFile() && isSpecialBoundaryFilename(entry.name)) {
+      files.push(path);
+    }
+  }
+
+  return files.sort();
+}
+
+function isSpecialBoundaryFilename(filename: string): boolean {
+  return /^(?:error|not-found)(?:\.mreact)?\.tsx$/u.test(filename);
+}
+
 function resolveCssImport(options: {
   importer: string;
   projectRoot: string;

package/src/serve.ts

@@ -41,6 +41,7 @@ interface BuiltRuntime {
   allowedSourceDirs: readonly string[];
   assetBaseUrl?: string | undefined;
   clientScripts: ReadonlyMap<string, string>;
+  clientStylesByFile: ReadonlyMap<string, readonly string[]>;
   clientStyles: ReadonlyMap<string, readonly string[]>;
   hasMiddleware: boolean;
   navigationScripts: ReadonlyMap<string, string>;
@@ -763,6 +764,7 @@ async function materializeBuiltRuntime(options: {
   const serverManifest = JSON.parse(options.serverManifestText) as BuiltServerManifest;
   const clientManifest = JSON.parse(options.clientManifestText) as {
     routes: ClientRouteManifestEntry[];
+    styles?: Array<{ css?: readonly string[]; file: string }>;
   };
   const appDir = await materializeBuiltServerApp(options.runtimeDir, serverManifest);
   const projectRoot = appDir;
@@ -818,6 +820,13 @@ async function materializeBuiltRuntime(options: {
       route.css !== undefined && route.css.length > 0 ? [[route.path, route.css]] : [],
     ),
   );
+  const clientStylesByFile = new Map(
+    (clientManifest.styles ?? []).flatMap((style) =>
+      style.css !== undefined && style.css.length > 0
+        ? [[join(routesDir, style.file), style.css] as const]
+        : [],
+    ),
+  );
   const navigationScripts = new Map(
     clientManifest.routes.flatMap((route) =>
       route.navigation === true && route.navigationScript !== undefined
@@ -846,6 +855,7 @@ async function materializeBuiltRuntime(options: {
       ? {}
       : { assetBaseUrl: serverManifest.assetBaseUrl }),
     clientScripts,
+    clientStylesByFile,
     clientStyles,
     hasMiddleware,
     navigationScripts,
@@ -1156,6 +1166,7 @@ function builtRenderAppRequestOptions(
     appDir: options.runtime.appDir,
     assetBaseUrl: options.runtime.assetBaseUrl,
     clientScripts: options.runtime.clientScripts,
+    clientStylesByFile: options.runtime.clientStylesByFile,
     clientStyles: options.runtime.clientStyles,
     importPolicy: {
       ...options.importPolicy,

package/src/vite.ts

@@ -38,7 +38,7 @@ import {
 import { nodeRequestToWebRequest, sendResponse } from "./http.js";
 import { renderAppRequest } from "./render.js";
 import { stripRouteClientOnlyExports } from "./route-source.js";
-import { collectRouteCssHrefs } from "./route-styles.js";
+import { collectRouteCssHrefs, collectSpecialBoundaryFiles } from "./route-styles.js";
 import { scanAppRoutes } from "./routes.js";
 import { resolveRequestHost, type RequestHostPolicy } from "./serve.js";
 import { hasJsxSyntax } from "./source-jsx.js";
@@ -504,6 +504,7 @@ async function handleAppRouterViteRequest(
           projectRoot: project.projectRoot,
         },
         clientStyles: await devRouteStyles(project),
+        clientStylesByFile: await devSpecialRouteStyles(project),
         navigationScripts: await devNavigationScripts(
           project.routesDir,
           options.clientRouteInferenceCache,
@@ -790,6 +791,28 @@ async function devRouteStyles(
   return new Map<string, readonly string[]>(routeStyles);
 }
 
+async function devSpecialRouteStyles(
+  project: ResolvedAppRouterProject,
+): Promise<ReadonlyMap<string, readonly string[]>> {
+  const entries = await Promise.all(
+    (await collectSpecialBoundaryFiles(project.routesDir)).map(async (file) => {
+      const hrefs = await collectRouteCssHrefs({
+        appDir: project.routesDir,
+        hrefPrefix: devCssPrefix,
+        pageFile: file,
+        projectRoot: project.projectRoot,
+      });
+
+      return hrefs.length === 0 ? undefined : ([file, hrefs as readonly string[]] as const);
+    }),
+  );
+  const routeStyles = entries.filter(
+    (entry): entry is readonly [string, readonly string[]] => entry !== undefined,
+  );
+
+  return new Map<string, readonly string[]>(routeStyles);
+}
+
 async function devNavigationScripts(
   appDir: string,
   inferenceCache?: ClientRouteInferenceCache | undefined,