vite-plugin-react-server 0.3.3 → 0.3.5

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,60 @@
+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";
+
+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);
+
+    // 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 {
+      let emitIfNotExists = await stat(fullDestination).then(stats => stats.isFile());
+      if (emitIfNotExists) {
+        console.log(
+          "[createBuildLoader] Emitting file:",
+          id,
+          pluginContext.getModuleInfo(id),
+          pluginContext.getWatchFiles(),
+          destination,
+          emitIfNotExists
+        );
+      }
+      return await import(fullDestination);
+    } catch (error) {
+      console.log(
+        "[createBuildLoader] A file wasn't emitted, emitting now",
+        error
+      );
+      console.log("[createBuildLoader] Module doesn't exist, emitting it", fullDestination, result.code);
+      await mkdir(join(root, userConfig.build.outDir), { recursive: true });
+
+      await writeFile(fullDestination, result.code ?? "");
+      console.log("[createBuildLoader] Emitted file:", fullDestination);
+      return await import(fullDestination);
+    }
+  };
+}

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,110 @@
+import type { Node } from "estree";
+import type { Plugin } from "vite";
+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): 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(

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

@@ -3,11 +3,22 @@ import {
   collectManifestCss,
   collectModuleGraphCss,
 } from "../collect-css-manifest.js";
-import { DEFAULT_CONFIG } from "../options.js";
+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 { createRscStream } from "./createRscStream.js";
+import type { PipeableStream } from "react-dom/server";
+
+type CreateHandlerResult = 
+  | { type: "success"; controller: AbortController; stream: PipeableStream; assets: any; clientPath: string }
+  | { type: "error"; error: Error }
+  | { type: "skip" };
+
+interface HandlerAssets {
+  css: Set<string>;
+  clientPath: string;
+}
 
 export async function createHandler<T>(
   url: string,
@@ -19,7 +30,7 @@ export async function createHandler<T>(
       Pick<StreamPluginOptions, "moduleBase" | "moduleBasePath" | "projectRoot">
     >,
   streamOptions: CreateHandlerOptions<T>
-) {
+): Promise<CreateHandlerResult> {
   const root = pluginOptions.projectRoot ?? process.cwd();
 
   const Html = pluginOptions.Html ?? DEFAULT_CONFIG.HTML;
@@ -55,8 +66,7 @@ export async function createHandler<T>(
     : (id: string) => collectModuleGraphCss(streamOptions.moduleGraph!, id);
 
   const loadWithCss = async (id: string) => {
-    if (!id) return {};
-
+    console.log('[RSC] Loading module:', id);
     try {
       const mod = await streamOptions.loader(id);
       const pageCss = await Promise.resolve(getCss(id));
@@ -110,35 +120,46 @@ export async function createHandler<T>(
       error: new Error("Invalid props: " + propsPath, {
         cause: props,
       }),
-    };
+    } 
   }
 
   // Add any additional CSS files
   if (streamOptions.cssFiles) {
     streamOptions.cssFiles.forEach((css) => cssModules.add(css));
   }
+
   const stream = createRscStream({
     Html: Html,
     Page: Page,
     props: props,
-    moduleBasePath: pluginOptions.moduleBasePath, // eg /src
+    moduleBasePath: pluginOptions.moduleBasePath,
     logger: streamOptions.logger ?? createLogger(),
     cssFiles: Array.from(cssModules),
     route: url,
     url,
     pipableStreamOptions: streamOptions.pipableStreamOptions,
+    htmlProps: {
+      pageProps: props,
+      route: url,
+      url: url,
+    },
   });
 
   if (!stream) {
+    console.log("[createHandler] No stream created for route:", url);
     return { type: "skip" as const };
   }
 
+  const assets: HandlerAssets = {
+    css: new Set(cssFiles ?? []),
+    clientPath: pagePath ?? ''
+  };
+
   return {
-    type: "success" as const,
+    type: "success",
     controller,
     stream,
-    assets: {
-      css: cssFiles,
-    },
+    assets,
+    clientPath: assets.clientPath,
   };
 }

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

@@ -2,6 +2,7 @@ import React from "react";
 import {
   createFromNodeStream,
   type CreateFromNodeStreamOptions,
+  // @ts-ignore
 } from "react-server-dom-esm/client.node";
 import type { Readable } from "stream";
 

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

@@ -1,10 +1,9 @@
-import React from "react";
-import {
-  renderToPipeableStream,
-  type PipeableStream,
-} from "react-server-dom-esm/server.node";
+import * as React from "react";
+// @ts-ignore
+import { renderToPipeableStream } from "react-server-dom-esm/server.node";
 import { CssCollector } from "../components.js";
 import type { RscStreamOptions } from "../types.js";
+import type { PipeableStream } from "react-dom/server";
 
 export function createRscStream(
   streamOptions: RscStreamOptions
@@ -15,11 +14,11 @@ export function createRscStream(
     props,
     logger,
     cssFiles,
-    route,
-    url,
     moduleBasePath,
     pipableStreamOptions,
+    htmlProps,
   } = streamOptions;
+
   const css = Array.isArray(cssFiles)
     ? cssFiles.map((css, index) =>
         React.createElement(CssCollector, {
@@ -33,10 +32,7 @@ export function createRscStream(
       Html,
       {
         key: "html",
-        pageProps: props,
-        moduleBasePath: moduleBasePath,
-        route,
-        url,
+        ...htmlProps
       },
       React.createElement(Page, { key: "page", ...props }),
       ...css
@@ -46,7 +42,7 @@ export function createRscStream(
       onError: logger?.error ?? console.error,
       onPostpone: logger?.info ?? console.info,
       environmentName: "Server",
-      ...pipableStreamOptions,
+      ...pipableStreamOptions
     }
   );
 }