vite-plugin-react-server 0.3.9 → 0.3.11

package/plugin/helpers/getModuleManifest.ts

@@ -9,6 +9,11 @@ interface ModuleManifestEntry {
   dynamicImports?: string[];
 }
 
+/**
+ * Get the module manifest from the plugin context, will only work during development
+ * @param this - The plugin context
+ * @returns The module manifest
+ */
 export function getModuleManifest(this: PluginContext): Record<string, ModuleManifestEntry> {
   const manifest: Record<string, ModuleManifestEntry> = {};
 

package/plugin/helpers/inputNormalizer.ts

@@ -1,37 +1,186 @@
-import { join } from "path";
 import { normalizePath } from "vite";
-import { DEFAULT_CONFIG } from "../config/defaults.js";
 import type { InputNormalizer, NormalizerInput } from "../types.js";
+import { join } from "path";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
 
-export function createInputNormalizer(root: string): InputNormalizer {
+type CreateInputNormalizerProps = {
+  root: string;
+  preserveModulesRoot?: string | undefined;
+  removeExtension?: boolean | RegExp | string | ((path: string) => boolean);
+  moduleBasePath?: string;
+};
 
-  // Normalize a key by removing file extensions and leading slashes
-  const normalizeKey = (key: string): string => {
-    return key
-      .replace(DEFAULT_CONFIG.FILE_REGEX, "") // Remove TypeScript/JavaScript extensions
-      .replace(/^\/+/, ""); // Remove leading slashes
-  };
+const resolveExtensionOptions = (
+  removeExtension: CreateInputNormalizerProps["removeExtension"]
+) => {
+  if (typeof removeExtension === "boolean") {
+    if (removeExtension) {
+      return (path: string) => {
+        const extensionIndex = path.lastIndexOf(".");
+        return extensionIndex !== -1 ? path.slice(0, extensionIndex) : path;
+      };
+    }
+    return (path: string) => path;
+  }
+  if (typeof removeExtension === "string") {
+    return (path: string) => path.replace(removeExtension, "");
+  }
+  if (removeExtension instanceof RegExp) {
+    return (path: string) =>
+      removeExtension.test(path) ? path.replace(removeExtension, "") : path;
+  }
+  if (typeof removeExtension === "function") {
+    return (path: string) => {
+      const extIndex = path.lastIndexOf(".");
+      if (extIndex !== -1) {
+        const extension = path.slice(extIndex);
+        if (removeExtension(extension)) {
+          return path.slice(0, extIndex);
+        }
+      }
+      return path;
+    };
+  }
+  return (path: string) => path;
+};
 
-  // Main normalize function
-  return (input: NormalizerInput): [string, string] => {
-    
-    // Handle tuple input [key, path]
-    if (Array.isArray(input)) {
-      const [key, path] = input;
-      const normalized: [string, string] = [
-        normalizeKey(key),
-        normalizePath(join(root, path))
-      ] 
-      return normalized;
+const resolveRootOption = (
+  root: CreateInputNormalizerProps["root"],
+  preserveModulesRoot: CreateInputNormalizerProps["preserveModulesRoot"]
+) => {
+  if (typeof root !== "string" && typeof preserveModulesRoot !== "string") {
+    return "";
+  }
+  if (typeof preserveModulesRoot === "string" && typeof root === "string") {
+    const normalizedRoot = normalizePath(root);
+    const normalizedPreserveModulesRoot = normalizePath(preserveModulesRoot);
+    if (normalizedPreserveModulesRoot.startsWith(normalizedRoot)) {
+      return join(normalizedPreserveModulesRoot, "/");
     }
+    return join(normalizedRoot, normalizedPreserveModulesRoot, "/");
+  }
+  if (typeof preserveModulesRoot === "string" && typeof root !== "string") {
+    const normalizedRoot = normalizePath(root);
+    const normalizedPreserveModulesRoot = normalizePath(preserveModulesRoot);
+    if (normalizedRoot.startsWith(normalizedPreserveModulesRoot)) {
+      return join(normalizedPreserveModulesRoot, "/");
+    }
+    return join(normalizedRoot, normalizedPreserveModulesRoot, "/");
+  }
+  if (typeof preserveModulesRoot !== "string" && typeof root === "string") {
+    const normalizedRoot = normalizePath(root);
+    return join(normalizedRoot, "/");
+  }
+  return "/";
+};
+const createKeyNormalizer =
+  ({
+    normalizedRoot,
+    preserveModulesRoot,
+    handleExtension,
+  }: {
+    normalizedRoot: string;
+    preserveModulesRoot: string | undefined;
+    handleExtension: (path: string) => string;
+  }) =>
+  (key: string) => {
+    const normalPath = normalizePath(key);
+    const noRoot = normalPath.startsWith(normalizedRoot)
+      ? normalPath.slice(normalizedRoot.length)
+      : normalPath;
+    const noExtension = handleExtension(noRoot);
 
-    // Handle string input
-    if (typeof input === "string") {
-      const key = normalizeKey(input);
-      const path = normalizePath(join(root, input));  
-      return [key, path];
+    let noRelativeNorAbsolute = noExtension;
+    while (
+      noRelativeNorAbsolute.startsWith("/") ||
+      noRelativeNorAbsolute.startsWith(".")
+    ) {
+      noRelativeNorAbsolute = noRelativeNorAbsolute.slice(1);
+    }
+    if (preserveModulesRoot) {
+      const removedModulesRoot = noRelativeNorAbsolute.startsWith(
+        preserveModulesRoot
+      )
+        ? noRelativeNorAbsolute.slice(preserveModulesRoot.length)
+        : noRelativeNorAbsolute;
+      return removedModulesRoot.startsWith(normalizedRoot)
+        ? removedModulesRoot.slice(normalizedRoot.length)
+        : removedModulesRoot;
     }
+    return noRelativeNorAbsolute;
+  };
+
+const createPathNormalizer =
+  ({ normalizedRoot, moduleBasePath }: { normalizedRoot: string, moduleBasePath: string }) =>
+  (path: string) => {
+    if(typeof path !== 'string') {
+      throw new Error(`Invalid path: ${JSON.stringify(path)}`);
+    }
+    const normalPath = normalizePath(path);
+    const noRoot = normalPath.startsWith(normalizedRoot)
+      ? normalPath.slice(normalizedRoot.length)
+      : normalPath;
+    // no leading slash when starting with module base
+    if(noRoot.startsWith(moduleBasePath)) {
+      return noRoot.slice(1);
+    }
+    return noRoot;
+  };
+ /**
+  * @description Create a function that normalizes the input
+  * @param root - The root of the project
+  * @param preserveModulesRoot - The root of the preserve modules
+  * @param removeExtension - Whether to remove the extension of the file
+  * @returns A function that normalizes the input
+  */
+export function createInputNormalizer({
+  root,
+  preserveModulesRoot = undefined,
+  removeExtension = DEFAULT_CONFIG.FILE_REGEX,
+  moduleBasePath = "/",
+}: CreateInputNormalizerProps): InputNormalizer {
+  const normalizedRoot = resolveRootOption(root, preserveModulesRoot);
+  const handleExtension = resolveExtensionOptions(removeExtension);
 
-    throw new Error(`Invalid input type: ${typeof input}`);
+  const normalizeEntryKey = createKeyNormalizer({
+    normalizedRoot,
+    preserveModulesRoot,
+    handleExtension,
+  });
+
+  const normalizeEntryPath = createPathNormalizer({ normalizedRoot, moduleBasePath });
+  return function normalizeInput(id: NormalizerInput): [string, string] {
+    // Normalize both paths to use POSIX separators
+    if (Array.isArray(id)) {
+      const [key, path] = id;
+      if(typeof key === 'string' && Array.isArray(path) && path.length === 2) {
+        const isNumber = !isNaN(Number(key));
+        if(isNumber) {
+          // ignore it
+          return normalizeInput([path[0], path[1]]);
+        }
+        return normalizeInput([join(key, path[0]), path[1]]);
+      }
+      if(typeof key !== 'string' || typeof path !== 'string') {
+        throw new Error(`Invalid input: ${JSON.stringify(id)}`);
+      }
+      return [normalizeEntryKey(key), normalizeEntryPath(path)];
+    } else if (typeof id === "string") {
+      // Return both the normalized ID and original normalized path
+      return [normalizeEntryKey(id), normalizeEntryPath(id)];
+    } else if (
+      typeof id === "object" &&
+      id !== null &&
+      "$$typeof" in id &&
+      "$$id" in id &&
+      typeof id.$$id === "string"
+    ) {
+      const normalized: [string, string] = [
+        normalizeEntryKey(id.$$id),
+        normalizeEntryPath(id.$$id),
+      ];
+      return normalized;
+    }
+    throw new Error(`Invalid input type: ${typeof id}`);
   };
 }

package/plugin/helpers/inputNormalizerWorker.ts

@@ -7,14 +7,19 @@ interface WorkerNormalizerOptions {
   moduleBase: string;
   worker: Worker;
   moduleBaseExceptions?: string[];
+  preserveModulesRoot: boolean | undefined;
 }
 
 export function createInputNormalizerWorker({
   root,
+  moduleBase,
   worker,
+  preserveModulesRoot,
 }: WorkerNormalizerOptions): InputNormalizerWorker {
-  
-  const baseNormalizer = createInputNormalizer(root);
+  const baseNormalizer = createInputNormalizer({
+    root,
+    preserveModulesRoot: preserveModulesRoot === true ? moduleBase : undefined,
+  });
 
   return async (input: NormalizerInput): Promise<[string, string]> => {
     // Handle React components specially with worker
@@ -22,21 +27,21 @@ export function createInputNormalizerWorker({
       return new Promise((resolve, reject) => {
         const handler = (message: any) => {
           if (message.type === "CLIENT_REFERENCE") {
-            worker.off('message', handler);
+            worker.off("message", handler);
             resolve([message.ref.$$id, message.ref.$$location]);
           }
           if (message.type === "ERROR") {
-            worker.off('message', handler);
+            worker.off("message", handler);
             reject(new Error(message.error));
           }
         };
 
-        worker.on('message', handler);
+        worker.on("message", handler);
         worker.postMessage({
           type: "CLIENT_REFERENCE",
-          id: input.name || 'AnonymousComponent',
+          id: input.name || "AnonymousComponent",
           location: input.toString(),
-          key: input.name
+          key: input.name,
         });
       });
     }
@@ -44,4 +49,4 @@ export function createInputNormalizerWorker({
     // For all other types, use the base normalizer
     return baseNormalizer(input);
   };
-} 
+}

package/plugin/helpers/tryManifest.ts

@@ -11,9 +11,11 @@ type TryManifestOptions<SSR extends boolean> = {
 export function tryManifest<SSR extends boolean>(options: TryManifestOptions<SSR>): {
   type: "success";
   manifest: SSR extends true ? Record<string, string[]> : Manifest;
+  error?:never
 } | {
   type: "error";
   error: Error;
+  manifest?:never
 } {
   const manifestPath = resolve(
     options.root,

package/plugin/loader/createBuildLoader.ts

@@ -1,23 +1,67 @@
-import { join } from "path";
+import { join, resolve } from "node:path";
 import type { PluginContext } from "rollup";
-import type { ResolvedUserConfig } from "../../server.js";
-import { DEFAULT_CONFIG } from "../config/defaults.js";
+import type { ResolvedUserConfig, ResolvedUserOptions } from "../../server.js";
+import type { Manifest } from "vite";
+import { createInputNormalizer } from "../helpers/inputNormalizer.js";
 
 export interface BuildLoaderOptions {
   root: string;
   pluginContext: PluginContext;
   userConfig: ResolvedUserConfig;
+  userOptions: ResolvedUserOptions;
+  serverManifest: Manifest;
+  clientManifest: Manifest;
 }
 
 export function createBuildLoader({
-  root,
   userConfig,
+  userOptions,
+  pluginContext,
+  clientManifest,
+  serverManifest,
 }: BuildLoaderOptions) {
-  return async (id: string) => {
-    return import(join(
-      root,
-      userConfig.build.outDir,
-      id.replace(DEFAULT_CONFIG.FILE_REGEX, "") + ".js"
-    ));
+  const root = pluginContext.environment.config.root ?? userConfig.root ?? userOptions.projectRoot ?? process.cwd();
+  const normalizer = createInputNormalizer({
+    root: userConfig.root,
+    preserveModulesRoot:
+      userOptions.build.preserveModulesRoot === true
+        ? userOptions.moduleBase
+        : undefined,
+  });
+
+  return async function buildLoader(id: string) {
+    // Normalize the requested ID - strip leading slash
+    const [normalizedId] = normalizer(id.replace(/^\//, ''));
+
+    // Try to find the module in either manifest
+    const clientEntry = Object.entries(clientManifest).find(([key]) => {
+      const [keyNormalized] = normalizer(key);
+      return keyNormalized === normalizedId;
+    });
+
+    if (clientEntry) {
+      console.log("[vite:plugin-react-server] Loading client entry", clientEntry[1].file);
+      const module = await import(
+        join(root, clientEntry[1].file)
+      );
+      return module;
+    }
+
+    const serverEntry = Object.entries(serverManifest).find(([key]) => {
+      const [keyNormalized] = normalizer(key);
+      return keyNormalized === normalizedId;
+    });
+
+    if (serverEntry) {
+      const module = await import(
+        join(root, serverEntry[1].file)
+      );
+      return module;
+    }
+    const availableModules = [...Object.keys(clientManifest), ...Object.keys(serverManifest)]
+
+    throw new Error(
+      `Module not found: ${id}, available modules: ${availableModules.join(", ")}`
+    );
   };
 }

package/plugin/loader/createPageLoader.ts

@@ -76,13 +76,7 @@ export function createPageLoader({
   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);

package/plugin/plugin.ts

@@ -1,4 +1,4 @@
-import "./assertServerCondition.js";
+import { assertServerCondition } from "./assertServerCondition.js";
 export { reactServerPlugin } from "./react-server/plugin.js";
 export { reactClientPlugin } from "./react-client/plugin.js";
 export { reactTransformPlugin } from "./transformer/plugin.js";
@@ -6,3 +6,4 @@ 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
+assertServerCondition(process);

package/plugin/preserver/plugin.ts

@@ -1,6 +1,7 @@
 import type { Node } from "estree";
 import MagicString from "magic-string";
 import type { StreamPluginOptions } from "../types.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
 
 const REACT_DIRECTIVES = new Set(["use client", "use server"]);
 
@@ -15,7 +16,7 @@ export function reactPreservePlugin(_options: StreamPluginOptions): import("vite
       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")) {
+        if (id.includes("node_modules") || id.includes("vite/dist") || !id.match(DEFAULT_CONFIG.FILE_REGEX)) {
           return null;
         }
 

package/plugin/react-client/index.ts

@@ -1 +1,12 @@
-export { reactClientPlugin } from "./plugin.js";
+import { reactPreservePlugin } from "../plugin.js";
+import { reactTransformPlugin } from "../transformer/plugin.js";
+import type { StreamPluginOptions } from "../types.js";
+import { reactClientPlugin } from "./plugin.js";
+
+export function vitePluginReactClient(options = {} as StreamPluginOptions): import("vite").Plugin[] {
+    return [
+      reactPreservePlugin(options),
+      reactClientPlugin(options),
+      reactTransformPlugin(options),
+    ];
+  } 

package/plugin/react-client/plugin.ts

@@ -1,33 +1,148 @@
-import type { Plugin as VitePlugin, UserConfig } from "vite";
-
-import type { ResolvedUserOptions, StreamPluginOptions } from "../types.js";
+import { type Manifest, type Plugin, type ResolvedConfig } from "vite";
+import type {
+  ResolvedUserConfig,
+  ResolvedUserOptions,
+  StreamPluginOptions,
+} from "../types.js";
 import { resolveOptions } from "../config/resolveOptions.js";
 import { resolveUserConfig } from "../config/resolveUserConfig.js";
-
+import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
+import { dirname, join, resolve } from "node:path";
+import { getBundleManifest } from "../helpers/getBundleManifest.js";
+import { checkFilesExist } from "../checkFilesExist.js";
+import { resolvePages } from "../config/resolvePages.js";
 let userOptions: ResolvedUserOptions;
-
-export function reactClientPlugin(options: StreamPluginOptions): VitePlugin {
-  const resolvedOptions = resolveOptions(options);
+let userConfig: ResolvedUserConfig;
+let clientManifest: Manifest = {};
+let resolvedConfig: ResolvedConfig;
+let root: string;
+let loader: ((id: string) => Promise<Record<string, any>>) = (id: string) => import(id);
+export function reactClientPlugin(options: StreamPluginOptions): Plugin {
+  const resolvedOptions = resolveOptions(options, true);
   if (resolvedOptions.type === "error") {
     throw resolvedOptions.error;
   }
   userOptions = resolvedOptions.userOptions;
+  root = userOptions.projectRoot;
+
+  console.log("[vite:react-client] Initial setup:", {
+    projectRoot: userOptions.projectRoot,
+    root: root,
+    clientEntry: userOptions.clientEntry
+  });
 
   return {
-    name: "vite:react-stream-client",
-    async config(config): Promise<UserConfig> {
+    name: "vite:react-client",
+
+    async config(config, configEnv) {
+
+      if(typeof config.root === "string" &&
+        config.root !== root &&
+        config.root !== process.cwd() &&
+        config.root !== "") {
+        root = config.root;
+        console.log("[vite:react-client] Root updated:", root);
+      }
+
+      const pages = await resolvePages(userOptions.build.pages);
+      if(pages.type === "error") {
+        throw pages.error;
+      }
+
+      const files = await checkFilesExist(pages.pages, userOptions, root);
+
+
       const resolvedConfig = resolveUserConfig({
-        condition: "react-client",
+        isClient: true,
         config,
-        configEnv: { command: "build", mode: "production" },
+        configEnv,
         userOptions,
+        files
       });
 
       if (resolvedConfig.type === "error") {
         throw resolvedConfig.error;
       }
 
-      return resolvedConfig.userConfig;
+      userConfig = resolvedConfig.userConfig;
+      return userConfig;
+    },
+
+    configResolved(config) {
+      resolvedConfig = config;
+    },
+
+    async generateBundle(options, bundle) {
+      // Create manifest entries for each chunk
+      clientManifest = getBundleManifest(this, bundle, undefined);
+
+      // Write manifest immediately after generation
+      const manifestPath = join(
+        root,
+        resolvedConfig.environments['client'].build.outDir as string,
+        resolvedConfig.environments['client'].build.manifest as string
+      );
+      await mkdir(dirname(manifestPath), { recursive: true });
+
+      return await writeFile(
+        manifestPath,
+        JSON.stringify(clientManifest, null, 2)
+      );
+    },
+    
+    async configurePreviewServer(server) {
+      if (typeof loader !== "function") {
+        loader = (id: string) => import(id);
+      }
+      server.middlewares.use(async (req, res, next) => {
+        console.log('req.url', req.url);
+        if (req.url && req.url.endsWith('.js')) {
+          const nodeRoot = process.env['NODE_PATH'] ?? process.cwd();
+          
+          try {
+            const stats = await stat(req.url);
+            if (stats.isFile()) {
+              const content = await readFile(req.url, 'utf-8');
+              res.setHeader('Content-Type', 'application/javascript');
+              res.end(content);
+            } else {
+              next();
+            }
+          } catch (error) {
+            console.error('error', error);
+            next();
+          }
+        } else {
+          next();
+        }
+      });
+    },
+    // setup dev server
+    async configureServer(server) {
+      if (typeof loader !== "function") {
+        loader = server.ssrLoadModule;
+      }
+      server.middlewares.use(async (req, res, next) => {
+        console.log('req.url', req.url);
+        if (req.url && req.url.endsWith('.js')) {
+          const filePath = join(root, req.url);
+          try {
+            const stats = await stat(filePath);
+            if (stats.isFile()) {
+              const content = await readFile(filePath, 'utf-8');
+              res.setHeader('Content-Type', 'application/javascript');
+              res.end(content);
+            } else {
+              next();
+            }
+          } catch (error) {
+            next();
+          }
+        } else if(req.url && req.url.endsWith('.rsc')) {
+          // stream the rsc stream
+          throw new Error('Not implemented');
+        }
+      });
     }
   };
 }

package/plugin/react-server/createHandler.ts

@@ -7,7 +7,7 @@ import {
 import { DEFAULT_CONFIG } from "../config/defaults.js";
 import { resolvePage } from "../resolvePage.js";
 import { resolveProps } from "../resolveProps.js";
-import type { CreateHandlerOptions, StreamPluginOptions } from "../types.js";
+import type { CreateHandlerOptions, ResolvedUserOptions } from "../types.js";
 import { createRscStream } from "./createRscStream.js";
 
 type CreateHandlerResult = 
@@ -22,13 +22,7 @@ interface HandlerAssets {
 
 export async function createHandler<T>(
   url: string,
-  pluginOptions: Pick<
-    StreamPluginOptions,
-    "Page" | "props" | "build" | "Html" | "pageExportName" | "propsExportName"
-  > &
-    Required<
-      Pick<StreamPluginOptions, "moduleBase" | "moduleBasePath" | "projectRoot">
-    >,
+  pluginOptions: ResolvedUserOptions,
   streamOptions: CreateHandlerOptions<T>
 ): Promise<CreateHandlerResult> {
   const root = pluginOptions.projectRoot ?? process.cwd();
@@ -52,13 +46,13 @@ export async function createHandler<T>(
 
   const cssModules = new Set<string>();
 
-  if (!(streamOptions.manifest || streamOptions.moduleGraph))
-    throw new Error("Missing manifest or moduleGraph, pass it to options.");
+  if (!(streamOptions.serverManifest || streamOptions.moduleGraph))
+    throw new Error("Missing server manifest or moduleGraph, pass it to options.");
 
-  const getCss = streamOptions.manifest
+  const getCss = streamOptions.serverManifest
     ? (id: string) =>
         collectManifestCss(
-          streamOptions.manifest!,
+          streamOptions.serverManifest!,
           root,
           id,
           streamOptions.onCssFile
@@ -131,7 +125,7 @@ export async function createHandler<T>(
     Html: Html,
     Page: Page,
     props: props,
-    moduleBasePath: pluginOptions.moduleBasePath,
+    moduleBasePath: '',
     logger: streamOptions.logger ?? createLogger(),
     cssFiles: Array.from(cssModules),
     route: url,