vite-plugin-react-server 0.3.4 → 0.3.6

package/plugin/helpers/inputNormalizerWorker.ts

@@ -0,0 +1,47 @@
+import type { Worker } from "node:worker_threads";
+import type { InputNormalizerWorker, NormalizerInput } from "../types.js";
+import { createInputNormalizer } from "./inputNormalizer.js";
+
+interface WorkerNormalizerOptions {
+  root: string;
+  moduleBase: string;
+  worker: Worker;
+  moduleBaseExceptions?: string[];
+}
+
+export function createInputNormalizerWorker({
+  root,
+  worker,
+}: WorkerNormalizerOptions): InputNormalizerWorker {
+  
+  const baseNormalizer = createInputNormalizer(root);
+
+  return async (input: NormalizerInput): Promise<[string, string]> => {
+    // Handle React components specially with worker
+    if (typeof input === "function") {
+      return new Promise((resolve, reject) => {
+        const handler = (message: any) => {
+          if (message.type === "CLIENT_REFERENCE") {
+            worker.off('message', handler);
+            resolve([message.ref.$$id, message.ref.$$location]);
+          }
+          if (message.type === "ERROR") {
+            worker.off('message', handler);
+            reject(new Error(message.error));
+          }
+        };
+
+        worker.on('message', handler);
+        worker.postMessage({
+          type: "CLIENT_REFERENCE",
+          id: input.name || 'AnonymousComponent',
+          location: input.toString(),
+          key: input.name
+        });
+      });
+    }
+
+    // For all other types, use the base normalizer
+    return baseNormalizer(input);
+  };
+} 

package/plugin/helpers/resolveFilePath.ts

@@ -0,0 +1,108 @@
+import { join, basename } from "node:path";
+import { access, realpath } from "node:fs/promises";
+import { normalizePath } from "vite";
+import { getDistDir, getMode, getNodePath, getPluginRoot } from "../config/getPaths.js";
+import pkg from "../../package.json" with { type: 'json' };
+
+type ResolveOptions = {
+  projectRoot?: string;
+  nodePath?: string;
+  pluginRoot?: string;
+  filePath: string;
+  subDir?: string;
+  normalize?: boolean;
+  distDir?: string;
+  mode?: "production" | "development" | "test";
+};
+
+export async function resolveFilePath({ 
+  projectRoot = process.cwd(),
+  nodePath = getNodePath(projectRoot),
+  mode = getMode(),
+  pluginRoot = getPluginRoot(),
+  distDir = getDistDir(mode),
+  filePath,
+  subDir,
+  normalize = false,
+}: ResolveOptions) {
+  try {
+    let resolvedPath: string | undefined;
+
+    // Helper to check if file exists
+    const exists = async (path: string) => {
+      try {
+        await access(path);
+        return true;
+      } catch {
+        return false;
+      }
+    };
+
+    // If it's a plugin export (like '/rsc-worker'), use exports map
+    if (filePath.startsWith('/') && filePath.slice(1) in pkg.exports) {
+      const exportPath = filePath.slice(1);
+      const pluginPath = pkg.exports[exportPath as keyof typeof pkg.exports];
+      return join(process.cwd(), pluginRoot, pluginPath); // Make absolute
+    }
+
+    // In test mode, preserve relative paths
+    if (mode === 'test' && !filePath.startsWith('/')) {
+      return filePath;
+    }
+
+    // For all other paths, try relative to project root first
+    const projectPath = join(projectRoot, filePath);
+    if (await exists(projectPath)) {
+      return normalize ? normalizePath(projectPath) : projectPath;
+    }
+
+    // 1. Try dist folder
+    const distPath = join(distDir, subDir ?? '', basename(filePath));
+    if (await exists(distPath)) {
+      resolvedPath = await realpath(distPath);
+    }
+
+    // 2. Try node_modules path
+    if (!resolvedPath && filePath.startsWith('/node_modules/')) {
+      const npmPath = join(nodePath, filePath.slice('/node_modules/'.length));
+      if (await exists(npmPath)) {
+        resolvedPath = await realpath(npmPath);
+      }
+    }
+
+    // 3. Try direct path
+    if (!resolvedPath && await exists(filePath)) {
+      resolvedPath = await realpath(filePath);
+    }
+
+    // 4. Try relative to project root
+    if (!resolvedPath) {
+      const projectPath = join(projectRoot, filePath);
+      if (await exists(projectPath)) {
+        resolvedPath = await realpath(projectPath);
+      }
+    }
+
+    if (!resolvedPath) {
+      throw new Error(
+        `Could not resolve path. Tried:\n` +
+        `- ${distPath}\n` +
+        `- ${join(nodePath, filePath.slice('/node_modules/'.length))}\n` +
+        `- ${filePath}\n` +
+        `- ${join(projectRoot, filePath)}`
+      );
+    }
+
+    return normalize ? normalizePath(
+      resolvedPath
+        .replace(pluginRoot, "/node_modules/vite-plugin-react-server")
+        .replace(projectRoot, "/")
+        .replace(nodePath, "/node_modules")
+        .replace(/^(?!\/)/, '/')
+    ) : resolvedPath;
+
+  } catch (error) {
+    // If realpath fails, return normalized input path
+    return normalize ? normalizePath(filePath) : filePath;
+  }
+} 

package/plugin/helpers/resolveWorkerModule.ts

@@ -0,0 +1,41 @@
+import { tryManifest } from "./tryManifest.js";
+
+export async function resolveWorkerModule(
+  moduleGraph: Set<string> | string[],
+  options: {
+    root: string,
+    outDir: string,
+    workerPath: string
+  }
+) {
+  console.log('Resolving worker module:', {
+    moduleGraph: Array.from(moduleGraph),
+    options
+  });
+
+  // Try module graph first
+  const workerModule = Array.from(moduleGraph).find(id => 
+    id.includes(options.workerPath)
+  );
+
+  console.log('Found in module graph:', workerModule);
+
+  if (workerModule) {
+    return workerModule;
+  }
+
+  // Fallback to manifest
+  const resolvedManifest = tryManifest({
+    root: options.root,
+    outDir: options.outDir,
+    ssrManifest: false
+  });
+
+  console.log('Manifest result:', resolvedManifest);
+
+  if (resolvedManifest.type === "error") {
+    throw new Error(`Could not find worker path in module graph or manifest: ${options.workerPath}`);
+  }
+
+  return resolvedManifest.manifest[options.workerPath]?.file;
+} 

package/plugin/helpers/validateModuleBase.ts

@@ -0,0 +1,30 @@
+import type { InputOption } from "rollup";
+
+export function validateModuleBase(
+  input: InputOption,
+  moduleBase: string,
+  moduleBaseExceptions: string[]
+) {
+  for (const [key, value] of Object.entries(input)) {
+    const isException =
+      moduleBaseExceptions.includes(key) || ["/index", "index"].includes(key);
+    if (!key.includes("/")) return;
+    if (value.startsWith("//")) {
+      throw new Error(`Path shouldn't start with //`);
+    }
+    if (!key.startsWith(moduleBase) && !isException) {
+      throw new Error(
+        `Invalid input: ${key} does not start with ${moduleBase}. If this is a valid key, add it to moduleBaseExceptions otherwise put the file in the ${moduleBase} directory. Exception: ${moduleBaseExceptions.join(
+          ", "
+        )}`
+      );
+    }
+    if (!value.startsWith("/" + moduleBase) && !isException) {
+      throw new Error(
+        `Invalid value: ${value} does not start with ${moduleBase}. If this is a valid path, add it to moduleBaseExceptions otherwise put the file in the ${moduleBase} directory. Exception: ${moduleBaseExceptions.join(
+          ", "
+        )}`
+      );
+    }
+  }
+}

package/plugin/helpers/validateResolvedConfig.ts

@@ -0,0 +1,21 @@
+import type { ResolvedConfig } from "vite";
+
+export function validateResolvedConfig(config: ResolvedConfig): asserts config is ResolvedConfig {
+    if (
+      typeof config === "object" &&
+      config != null &&
+      "build" in config &&
+      typeof config.build === "object" &&
+      config.build != null &&
+      "rollupOptions" in config.build &&
+      typeof config.build.rollupOptions === "object" &&
+      config.build.rollupOptions != null &&
+      "input" in config.build.rollupOptions &&
+      typeof config.build.rollupOptions.input === "object" &&
+      config.build.rollupOptions.input != null
+    ) {
+      return undefined; 
+    }
+    throw new Error("Invalid config");
+  };
+  

package/plugin/index.ts

@@ -0,0 +1,2 @@
+export * from './plugin.js';
+export type * from './types.js';

package/plugin/loader/createBuildLoader.ts

@@ -0,0 +1,44 @@
+import { join, relative } from "path";
+import type { PluginContext } from "rollup";
+import type { ResolvedUserConfig } from "../../server.js";
+import { createInputNormalizer } from "../helpers/inputNormalizer.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { mkdir, stat, writeFile } from "node:fs/promises";
+import { dirname } from "node:path";
+
+export interface BuildLoaderOptions {
+  root: string;
+  pluginContext: PluginContext;
+  userConfig: ResolvedUserConfig;
+}
+
+export function createBuildLoader({
+  root,
+  pluginContext,
+  userConfig,
+}: BuildLoaderOptions) {
+  const normalizer = createInputNormalizer(root);
+  return async (id: string) => {
+    console.log("[createBuildLoader] Loading module:", id);
+    const moduleId = join(root, id);
+    const info = pluginContext.getModuleInfo(id)!;
+    if(info){
+      return await import(id);
+    }
+    // Load the module source
+    const result = await pluginContext.load({ id: moduleId });
+    if (!result) {
+      throw new Error(`Failed to load module: ${id}`);
+    }
+    let destination = id.replace(DEFAULT_CONFIG.FILE_REGEX, "") + ".js";
+    let fullDestination = join(root, userConfig.build.outDir, destination);
+
+
+    // Import and evaluate the module
+    try {
+      return import(fullDestination);
+    } catch (error) {
+      import(id);
+    }
+  };
+}

package/plugin/loader/createCssLoader.ts

@@ -0,0 +1,73 @@
+import { ModuleGraph, type Manifest } from "vite";
+import {
+  collectManifestCss,
+  collectModuleGraphCss,
+} from "../collect-css-manifest.js";
+
+type BaseCssLoaderOptions = {
+  /** callback to add css files to the stream */
+  onCssFile: (css: string) => void;
+  /** loader to load the module */
+  loader: (id: string) => Promise<Record<string, any>>;
+  /** url of the page */
+  url: string;
+  /** manually provided css files to add */
+  cssFiles: string[];
+};
+
+type CreateCssLoaderOptions =
+  | (BaseCssLoaderOptions & {
+      /** manifest to collect css from */
+      manifest: Manifest;
+      /** when manifest is given, moduleGraph is not needed */
+      moduleGraph?: never;
+    })
+  | (BaseCssLoaderOptions & {
+      /** when moduleGraph is given, manifest is not needed, manual cssFiles can still be provided */
+      manifest?: never;
+      /** when moduleGraph is given, manifest is not needed, manual cssFiles can still be provided */
+      moduleGraph: ModuleGraph;
+    });
+
+/**
+ * create a loader that can be used to load css files from a manifest or a moduleGraph
+ * @param options
+ * @returns
+ */
+export async function createCssLoader(options: CreateCssLoaderOptions) {
+  const root = process.cwd();
+
+  const cssModules = new Set<string>();
+
+  if (!(options.manifest || options.moduleGraph))
+    throw new Error("Missing manifest or moduleGraph, pass it to options.");
+
+  const getCss = options.manifest
+    ? (id: string) =>
+        collectManifestCss(
+          options.manifest,
+          root,
+          id,
+          options.onCssFile
+        )
+    : (id: string) => collectModuleGraphCss(options.moduleGraph!, id, options.onCssFile);
+
+  const loadWithCss = async (id: string) => {
+    if (!id) return {};
+
+    try {
+      const mod = await options.loader(id);
+      const pageCss = await Promise.resolve(getCss(id));
+      Array.from(pageCss.keys()).forEach((css) => cssModules.add(css));
+      return mod as Record<string, any>;
+    } catch (e: any) {
+      if (e.message?.includes("module runner has been closed")) {
+        return { type: "skip" } as Record<string, any>;
+      } else {
+        return { type: "error", error: e } as Record<string, any>;
+      }
+    }
+  };
+
+  return loadWithCss;
+}

package/{src/html → plugin/loader}/createPageLoader.ts

@@ -1,13 +1,18 @@
 import { resolve as resolvePath } from "node:path";
-import { load } from "react-server-dom-esm/node-loader";
+
+import { 
+  load
+  // @ts-ignore
+} from "react-server-dom-esm/node-loader";
+
 import {
   registerClientReference,
   registerServerReference,
+  // @ts-ignore
 } from "react-server-dom-esm/server.node";
-import { createNormalizedRelativePath } from "../helpers/normalizedRelativePath.js";
 
 type CreatePageLoaderOptions = {
-  manifest: Record<string, { file: string }>;
+  manifest: Record<string, { file: string; src?: string }>;
   root: string;
   outDir: string;
   moduleBase: string;
@@ -52,41 +57,44 @@ export const createDefaultLoader = ({
       return [key, value];
     }
   };
-  return async (url: string) =>
-    Object.fromEntries(Object.entries(await import(url)).map(mapper));
+  return async (url: string) => {
+    console.log("[createDefaultLoader] Loading:", url);
+    const result = await import(url);
+    console.log("[createDefaultLoader] Result:", result);
+    return Object.fromEntries(Object.entries(result).map(mapper));
+  };
 };
 
-export const createPageLoader = ({
+export function createPageLoader({
   manifest,
   root,
   outDir,
   moduleBase,
-  registerServer,
-  registerClient,
   alwaysRegisterServer,
   alwaysRegisterClient,
-}: CreatePageLoaderOptions) => {
-  const pathNormalizer = createNormalizedRelativePath({
-    root,
-    outDir,
-    moduleBase,
-    noLeadingSlash: true,
-    noTrailingSlash: true,
-    moduleBaseExceptions: [],
-  });
-  return async (id: string) => {
-    const normalizedId = pathNormalizer(id);
-    const entry =
-      normalizedId in manifest
-        ? manifest[normalizedId]
-        : Object.values(manifest).find((entry) => entry.file === normalizedId);
-    if (!entry) {
+  registerServer,
+  registerClient,
+}: CreatePageLoaderOptions) {
+  return async function loader(id: string) {
+    console.log("[pageLoader] Loading:", {
+      id,
+      manifest: Object.keys(manifest),
+      outDir,
+      moduleBase
+    });
+    console.log("[pageLoader] Manifest:", manifest);
+    // Try to find the entry directly or by source file
+    const manifestEntry = manifest[id] || 
+                         Object.values(manifest).find(entry => entry.src === id);
+
+    if (!manifestEntry) {
       throw new Error(
-        `Could not find manifest entry for ${id}, ${normalizedId} from ${root}`
+        `Could not find manifest entry for ${id} from ${root}. Available entries: ${Object.keys(manifest).join(', ')}`
       );
     }
+
     const loaderResult = await load(
-      resolvePath(root, outDir, entry.file),
+      resolvePath(root, outDir, manifestEntry.file),
       { format: "module" },
       createDefaultLoader({
         id,
@@ -98,4 +106,4 @@ export const createPageLoader = ({
     );
     return loaderResult;
   };
-};
+}

package/plugin/plugin.ts

@@ -0,0 +1,8 @@
+import "./assertServerCondition.js";
+export { reactServerPlugin } from "./react-server/plugin.js";
+export { reactClientPlugin } from "./react-client/plugin.js";
+export { reactTransformPlugin } from "./transformer/plugin.js";
+export { reactPreservePlugin } from "./preserver/plugin.js";
+export { vitePluginReactServer } from "./react-server/index.js";
+// the main plugin is version is the server version, if you want the client version, use the `vite-plugin-react-server/client` import
+// this is because the workflow assumes main thread = react server condition

package/plugin/preserver/index.ts

@@ -0,0 +1 @@
+export { reactPreservePlugin } from "./plugin.js";

package/plugin/preserver/plugin.ts

@@ -0,0 +1,109 @@
+import type { Node } from "estree";
+import MagicString from "magic-string";
+import type { StreamPluginOptions } from "../types.js";
+
+const REACT_DIRECTIVES = new Set(["use client", "use server"]);
+
+export function reactPreservePlugin(_options: StreamPluginOptions): import("vite").Plugin {
+  const meta: Record<string, Set<string>> = {};
+
+  return {
+    name: "vite-plugin-react-server:preserve-directives",
+    enforce: "post",
+
+    transform: {
+      order: "post", // Ensure this runs last in transform phase
+      handler(code: string, id: string) {
+        // Skip node_modules and vite files
+        if (id.includes("node_modules") || id.includes("vite/dist")) {
+          return null;
+        }
+
+        let ast: Node;
+        try {
+          ast = this.parse(code, {
+            allowReturnOutsideFunction: true,
+            jsx: true,
+          }) as Node;
+        } catch (e) {
+          console.warn(`[PreservePlugin] Failed to parse ${id}`, e);
+          return null;
+        }
+
+        if (ast.type !== "Program") {
+          return null;
+        }
+
+        const magicString = new MagicString(code);
+        let hasChanged = false;
+
+        // Only look at top-level directives
+        for (const node of ast.body) {
+          if (node.type !== "ExpressionStatement") {
+            break;
+          }
+
+          let directive: string | null = null;
+          if ("directive" in node) {
+            directive = node.directive;
+          } else if (
+            node.expression.type === "Literal" &&
+            typeof node.expression.value === "string" &&
+            REACT_DIRECTIVES.has(node.expression.value)
+          ) {
+            directive = node.expression.value;
+          }
+
+          if (directive) {
+            meta[id] ||= new Set<string>();
+            meta[id].add(directive);
+
+            if ("start" in node && "end" in node) {
+              magicString.remove(node.start as number, node.end as number);
+              hasChanged = true;
+            }
+          }
+        }
+
+        if (!hasChanged) {
+          return null;
+        }
+
+        return {
+          code: magicString.toString(),
+          map: magicString.generateMap({ hires: true }),
+          meta: {
+            directives: Array.from(meta[id] || []),
+          },
+        };
+      },
+    },
+
+    renderChunk(code, chunk) {
+      const chunkDirectives = new Set<string>();
+
+      // Collect directives from all modules in chunk
+      for (const id of chunk.moduleIds) {
+        if (meta[id]) {
+          meta[id].forEach((d) => chunkDirectives.add(d));
+        }
+      }
+
+      if (chunkDirectives.size) {
+        const magicString = new MagicString(code);
+        magicString.prepend(
+          Array.from(chunkDirectives)
+            .map((d) => `"${d}";`)
+            .join("\n") + "\n"
+        );
+
+        return {
+          code: magicString.toString(),
+          map: magicString.generateMap({ hires: true }),
+        };
+      }
+
+      return null;
+    },
+  };
+}

package/plugin/react-client/index.ts

@@ -0,0 +1 @@
+export { reactClientPlugin } from "./plugin.js";

package/plugin/react-client/plugin.ts

@@ -0,0 +1,33 @@
+import type { Plugin as VitePlugin, UserConfig } from "vite";
+
+import type { ResolvedUserOptions, StreamPluginOptions } from "../types.js";
+import { resolveOptions } from "../config/resolveOptions.js";
+import { resolveUserConfig } from "../config/resolveUserConfig.js";
+
+let userOptions: ResolvedUserOptions;
+
+export function reactClientPlugin(options: StreamPluginOptions): VitePlugin {
+  const resolvedOptions = resolveOptions(options);
+  if (resolvedOptions.type === "error") {
+    throw resolvedOptions.error;
+  }
+  userOptions = resolvedOptions.userOptions;
+
+  return {
+    name: "vite:react-stream-client",
+    async config(config): Promise<UserConfig> {
+      const resolvedConfig = resolveUserConfig({
+        condition: "react-client",
+        config,
+        configEnv: { command: "build", mode: "production" },
+        userOptions,
+      });
+
+      if (resolvedConfig.type === "error") {
+        throw resolvedConfig.error;
+      }
+
+      return resolvedConfig.userConfig;
+    }
+  };
+}

package/{src → plugin}/react-server/createDevMiddleware.ts

@@ -18,6 +18,14 @@ export function createDevMiddleware(
   server: ViteDevServer,
   options: DevMiddlewareOptions
 ): RequestHandler {
+  // Add HMR support
+  const hmr = server.hot;
+  
+  hmr?.on('vite:beforeUpdate', () => {
+    // Clear module cache before updates
+    server.moduleGraph.invalidateAll();
+  });
+
   return async (req: IncomingMessage, res: ServerResponse, next: any) => {
     // Skip non-page requests
     if (
@@ -34,7 +42,15 @@ export function createDevMiddleware(
       console.log("[stream] Handling RSC stream");
 
       const result = await createHandler(url, options, {
-        loader: server.ssrLoadModule,
+        loader: (id)=>{
+          const mod = server.ssrLoadModule(id);
+          if(!mod) {
+            throw new Error(`[RSC] Module not found: ${id}`);
+          } else {
+            console.log('[RSC] Loaded module:', id);
+          }
+          return mod;
+        },
         moduleGraph: server.moduleGraph,
       });
 

package/{src → plugin}/react-server/createDevServer.ts

@@ -1,5 +1,4 @@
 import type { ViteDevServer } from "vite";
-import type { StreamPluginOptions } from "../types.js";
 import { createDevMiddleware, type DevMiddlewareOptions } from "./createDevMiddleware.js";
 
 export function createDevServer(