@reckona/mreact-router 0.0.203 → 0.0.205

package/src/vite.ts

@@ -1,16 +1,19 @@
-import { readFile } from "node:fs/promises";
+import { readFile, realpath } from "node:fs/promises";
 import type { ServerResponse } from "node:http";
-import { dirname } from "node:path";
+import { dirname, isAbsolute, relative, resolve, sep } from "node:path";
 import { formatDiagnostic } from "@reckona/mreact-compiler";
+import type { DehydrateOptions } from "@reckona/mreact-query";
 import {
   createCompilerModuleContext,
   transformCompilerModuleContext,
 } from "@reckona/mreact-compiler/internal";
 import {
+  isFileLoadingAllowed,
   normalizePath,
   type Connect,
   type Plugin,
   type PluginOption,
+  type ResolvedConfig,
   type UserConfig,
   type ViteDevServer,
 } from "vite";
@@ -22,6 +25,7 @@ import {
   type ResolvedAppRouterProject,
 } from "./config.js";
 import type { AppRouterImportPolicy } from "./import-policy.js";
+import { dehydrateOptionsFromModule } from "./dehydrate-policy.js";
 import {
   collectClientRouteReferences,
   createClientRouteInferenceCache,
@@ -77,6 +81,8 @@ export type {
   AppRouterRequestErrorLogEvent,
   AppRouterRequestStartLogEvent,
   AppRouterRequestTimingLogEvent,
+  AppRouterUpgradeErrorLogEvent,
+  AppRouterUpgradeRejectedLogEvent,
 } from "./logger.js";
 export type { RequestHostPolicy } from "./serve.js";
 
@@ -85,6 +91,7 @@ export type { RequestHostPolicy } from "./serve.js";
  */
 export interface AppRouterViteMiddlewareOptions extends AppRouterProjectOptions {
   allowedHosts?: readonly string[] | undefined;
+  dehydrateOptions?: DehydrateOptions | undefined;
   define?: UserConfig["define"] | undefined;
   hostPolicy?: RequestHostPolicy | undefined;
   importPolicy?: AppRouterImportPolicy | undefined;
@@ -106,6 +113,7 @@ type AppRouterViteRuntimeMiddlewareOptions = AppRouterViteMiddlewareOptions & {
  */
 export interface AppRouterVitePluginOptions extends AppRouterProjectOptions {
   allowedHosts?: readonly string[] | undefined;
+  dehydrateOptions?: DehydrateOptions | undefined;
   hostPolicy?: RequestHostPolicy | undefined;
   importPolicy?: AppRouterImportPolicy | undefined;
   logger?: AppRouterLogger | undefined;
@@ -123,6 +131,7 @@ const virtualReactiveDevtoolsId = "\0mreact-router-reactive-devtools";
 const mreactRouterConfigKey = "__mreactRouterConfig";
 
 type MreactRouterPluginConfig = ResolvedAppRouterProject & {
+  dehydrateOptions?: DehydrateOptions | undefined;
   importPolicy?: AppRouterImportPolicy | undefined;
 };
 
@@ -130,6 +139,11 @@ type MreactRouterPlugin = Plugin & {
   [mreactRouterConfigKey]: MreactRouterPluginConfig;
 };
 
+interface DevCssViteFileSystemConfigs {
+  canonical: ResolvedConfig;
+  logical: ResolvedConfig;
+}
+
 /**
  * Creates the app-router Vite plugin for route compilation and development middleware.
  */
@@ -138,6 +152,7 @@ export function createAppRouterVitePlugin(options: AppRouterVitePluginOptions):
   const normalizedSourceDirs = project.allowedSourceDirs.map((directory) =>
     normalizePath(directory),
   );
+  const canonicalDevCssSourceRoot = resolveCanonicalDevCssSourceRoot(project.projectRoot);
   const packageFile = (monorepoDir: string, packageName: string, entry: string): string =>
     workspacePackageFile({
       currentFileUrl: import.meta.url,
@@ -229,11 +244,15 @@ export function createAppRouterVitePlugin(options: AppRouterVitePluginOptions):
   // built-in CSS plugin) whose `transform` requires a dev-server environment the
   // lightweight navigation scan cannot provide. Mirrors what the build forwards.
   let userVitePlugins: readonly PluginOption[] | undefined;
+  let resolvedViteConfig: Promise<DevCssViteFileSystemConfigs> | undefined;
   let devServerModuleCacheVersion = 0;
 
   const plugin: MreactRouterPlugin = {
     [mreactRouterConfigKey]: {
       ...project,
+      ...(options.dehydrateOptions === undefined
+        ? {}
+        : { dehydrateOptions: options.dehydrateOptions }),
       ...(options.importPolicy === undefined ? {} : { importPolicy: options.importPolicy }),
     },
     enforce: "pre",
@@ -275,6 +294,9 @@ export function createAppRouterVitePlugin(options: AppRouterVitePluginOptions):
         },
       };
     },
+    configResolved(config) {
+      resolvedViteConfig = resolveDevCssViteFileSystemConfigs(config);
+    },
     configureServer(server) {
       server.middlewares.use(createDevCssProxyMiddleware());
       server.middlewares.use(createClientRouteTransformMiddleware(project.routesDir, server));
@@ -327,8 +349,10 @@ export function createAppRouterVitePlugin(options: AppRouterVitePluginOptions):
     load(id) {
       if (isDevCssSourceModuleId(id)) {
         return loadDevCssSourceModule({
+          allowedRoot: canonicalDevCssSourceRoot,
           cssFile: clientRequestPath(id),
           sourceDirs: project.allowedSourceDirs,
+          viteConfig: resolvedViteConfig,
         });
       }
 
@@ -412,6 +436,13 @@ export function prepareReactiveEffectRunDevtoolsEvent() { return undefined; }`;
       };
     },
     async resolveId(id, importer) {
+      const devCssFile = devCssSourceRequestFile(id, project.projectRoot);
+      if (devCssFile !== undefined) {
+        const queryStart = id.indexOf("?");
+        const query = queryStart === -1 ? "" : id.slice(queryStart);
+        return `${normalizePath(devCssFile)}${query}`;
+      }
+
       const runtimePath = runtimePaths.get(id);
 
       if (id === "@reckona/mreact-reactive-core") {
@@ -637,7 +668,8 @@ async function handleAppRouterViteRequest(
       return;
     }
 
-    const request = nodeRequestToWebRequest(incoming, origin);
+    const request = nodeRequestToWebRequest(incoming, origin, outgoing);
+    const dehydrateOptions = await resolveDevDehydrateOptions(project, options);
     const routeTransformPlugins = options.navigationScanVitePlugins ?? options.vitePlugins;
     const routes = await scanAppRoutes({ appDir: project.routesDir });
     const routeMatcher = createRouteMatcher(routes);
@@ -658,6 +690,7 @@ async function handleAppRouterViteRequest(
       outgoing,
       await renderAppRequest({
         appDir: project.routesDir,
+        dehydrateOptions,
         define: options.define,
         dev: true,
         importPolicy: {
@@ -688,6 +721,29 @@ async function handleAppRouterViteRequest(
   }
 }
 
+async function resolveDevDehydrateOptions(
+  project: ResolvedAppRouterProject,
+  options: AppRouterViteRuntimeMiddlewareOptions,
+): Promise<DehydrateOptions | undefined> {
+  if (options.dehydrateOptions !== undefined) {
+    return options.dehydrateOptions;
+  }
+  if (project.dehydratePolicyModule === undefined) {
+    return undefined;
+  }
+  if (options.viteDevServer === undefined) {
+    throw new Error("dehydratePolicyModule requires a Vite dev server module runner.");
+  }
+
+  const policyModule = await options.viteDevServer.ssrLoadModule(
+    normalizePath(project.dehydratePolicyModule),
+  );
+  return dehydrateOptionsFromModule(
+    policyModule,
+    `mreactRouter dehydratePolicyModule ${project.dehydratePolicyModule}`,
+  );
+}
+
 function sendViteErrorOverlay(server: ViteDevServer | undefined, error: unknown): void {
   if (server === undefined) {
     return;
@@ -903,19 +959,115 @@ function isDevCssSourceModuleId(id: string): boolean {
   return new URLSearchParams(id.slice(id.indexOf("?") + 1)).has(devCssSourceQuery);
 }
 
+function devCssSourceRequestFile(id: string, projectRoot: string): string | undefined {
+  if (!new URLSearchParams(id.slice(id.indexOf("?") + 1)).has(devCssSourceQuery)) {
+    return undefined;
+  }
+
+  const requestPath = clientRequestPath(id);
+  if (requestPath.startsWith("/@fs/")) {
+    return `/${requestPath.slice("/@fs/".length)}`;
+  }
+  if (isAbsolute(requestPath) && isPathInsideDirectory(projectRoot, requestPath)) {
+    return requestPath;
+  }
+
+  return resolve(projectRoot, `.${requestPath.startsWith("/") ? requestPath : `/${requestPath}`}`);
+}
+
 async function loadDevCssSourceModule(options: {
+  allowedRoot: Promise<string | undefined>;
   cssFile: string;
   sourceDirs: readonly string[];
+  viteConfig: Promise<DevCssViteFileSystemConfigs> | undefined;
 }): Promise<string | undefined> {
-  const code = await readFile(options.cssFile, "utf8");
+  const refusal = () => new Error("Dev CSS source is outside the configured project roots.");
+
+  if (options.cssFile.includes("\0")) {
+    throw refusal();
+  }
+
+  let allowedRoot: string | undefined;
+  let cssFile: string;
+  let viteConfig: DevCssViteFileSystemConfigs | undefined;
+  try {
+    [allowedRoot, cssFile, viteConfig] = await Promise.all([
+      options.allowedRoot,
+      realpath(options.cssFile),
+      options.viteConfig,
+    ]);
+  } catch {
+    throw refusal();
+  }
+
+  if (
+    allowedRoot === undefined ||
+    !isPathInsideDirectory(allowedRoot, cssFile) ||
+    (viteConfig !== undefined &&
+      (!isFileLoadingAllowed(viteConfig.logical, normalizePath(options.cssFile)) ||
+        !isFileLoadingAllowed(viteConfig.canonical, normalizePath(cssFile))))
+  ) {
+    throw refusal();
+  }
+
+  let code: string;
+  try {
+    code = await readFile(cssFile, "utf8");
+  } catch {
+    throw refusal();
+  }
 
   return prependTailwindSourceDirectives({
     code,
-    cssFile: options.cssFile,
+    cssFile,
     sourceDirs: options.sourceDirs,
   });
 }
 
+async function resolveCanonicalDevCssSourceRoot(directory: string): Promise<string | undefined> {
+  try {
+    return await realpath(directory);
+  } catch {
+    return undefined;
+  }
+}
+
+async function resolveDevCssViteFileSystemConfigs(
+  config: ResolvedConfig,
+): Promise<DevCssViteFileSystemConfigs> {
+  const allow = await Promise.all(
+    config.server.fs.allow.map(async (directory) => {
+      try {
+        return normalizePath(await realpath(directory));
+      } catch {
+        return normalizePath(directory);
+      }
+    }),
+  );
+
+  return {
+    canonical: {
+      ...config,
+      server: {
+        ...config.server,
+        fs: {
+          ...config.server.fs,
+          allow,
+        },
+      },
+    },
+    logical: config,
+  };
+}
+
+function isPathInsideDirectory(directory: string, candidate: string): boolean {
+  const relativePath = relative(directory, candidate);
+  return (
+    relativePath === "" ||
+    (relativePath !== ".." && !relativePath.startsWith(`..${sep}`) && !isAbsolute(relativePath))
+  );
+}
+
 function importerInRuntimePackage(
   importer: string | undefined,
   directories: readonly string[],