vite-plugin-react-server 0.3.18 → 0.3.19

package/plugin/react-static/plugin.ts

@@ -0,0 +1,247 @@
+import { join, dirname } from "node:path";
+import { Worker } from "node:worker_threads";
+import {
+  type ResolvedConfig,
+  type UserConfig,
+  type Manifest,
+  type IndexHtmlTransformHook,
+  type Plugin as VitePlugin,
+} from "vite";
+import { checkFilesExist } from "../checkFilesExist.js";
+import { resolveOptions } from "../config/resolveOptions.js";
+import { resolvePages } from "../config/resolvePages.js";
+import { resolveUserConfig } from "../config/resolveUserConfig.js";
+import { tryManifest } from "../helpers/tryManifest.js";
+import { createBuildLoader } from "../loader/createBuildLoader.js";
+import type {
+  BuildTiming,
+  CheckFilesExistReturn,
+  ReactStreamPluginMeta,
+  ResolvedUserConfig,
+  ResolvedUserOptions,
+} from "../types.js";
+import { type StreamPluginOptions } from "../types.js";
+import { createWorker } from "../worker/createWorker.js";
+import { renderPages } from "../worker/html/renderPages.js";
+import { mkdir } from "node:fs/promises";
+import { collectManifestClientFiles } from "../collect-manifest-client-files.js";
+import { mkdirSync, copyFileSync } from "node:fs";
+import { copyDir } from "../copy-dir.js";
+
+let resolvedConfig: ResolvedConfig | null = null;
+let loader: ((id: string) => Promise<Record<string, any>>) | null = null;
+let worker: Worker;
+let htmlTransform: IndexHtmlTransformHook | null = null;
+let clientAssets = new Set<string>();
+
+export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
+  meta: ReactStreamPluginMeta;
+}> {
+  const timing: BuildTiming = {
+    start: Date.now(),
+  };
+
+  let files: CheckFilesExistReturn;
+  let root: string = process.cwd();
+  let userConfig: ResolvedUserConfig;
+  let userOptions: ResolvedUserOptions;
+  let resolvedPages: string[];
+  let serverManifest: Manifest = {};
+  let clientManifest: Manifest = {};
+
+  const resolvedOptions = resolveOptions(options, false);
+  if (resolvedOptions.type === "error") {
+    throw resolvedOptions.error;
+  }
+  userOptions = resolvedOptions.userOptions;
+  if (
+    userOptions.projectRoot != root &&
+    typeof userOptions.projectRoot === "string" &&
+    userOptions.projectRoot !== process.cwd() &&
+    userOptions.projectRoot !== ""
+  ) {
+    root = userOptions.projectRoot;
+    console.log(
+      "[vite:plugin-react-server] Root dir changed in plugin",
+      userOptions.projectRoot,
+      root
+    );
+  }
+
+  return {
+    name: "vite:plugin-react-server/static",
+    enforce: "post",
+    api: {
+      meta: { timing },
+    },
+    async config(config, configEnv): Promise<UserConfig> {
+      if (
+        typeof config.root === "string" &&
+        config.root !== root &&
+        config.root !== process.cwd() &&
+        config.root !== ""
+      ) {
+        root = config.root;
+      }
+      const resolvedPagesResult = await resolvePages(userOptions.build.pages);
+      if (resolvedPagesResult.type === "error") {
+        throw resolvedPagesResult.error;
+      }
+      resolvedPages = resolvedPagesResult.pages;
+      files = await checkFilesExist(resolvedPages, userOptions, root);
+
+      const resolvedConfig = resolveUserConfig({
+        isStatic: true,
+        config,
+        configEnv,
+        userOptions,
+        files,
+      });
+
+      if (resolvedConfig.type === "error") {
+        throw resolvedConfig.error;
+      }
+
+      userConfig = resolvedConfig.userConfig;
+      timing.configResolved = Date.now();
+      return {};
+    },
+    async buildStart() {
+      timing.buildStart = Date.now();
+    },
+    async closeBundle() {
+      timing.renderStart = Date.now();
+
+      // Create the loader
+      const serverManifestResult = tryManifest({
+        root: root,
+        outDir: join(userOptions.build.outDir, userOptions.build.server),
+        ssrManifest: false,
+      });
+      if (serverManifestResult.type === "error") {
+        throw serverManifestResult.error;
+      }
+      serverManifest = serverManifestResult.manifest;
+
+      // Get the client manifest
+      const clientManifestResult = tryManifest({
+        root: root,
+        outDir: join(userOptions.build.outDir, userOptions.build.client),
+        ssrManifest: false,
+      });
+
+      if (clientManifestResult.type === "error") {
+        throw clientManifestResult.error;
+      }
+      clientManifest = clientManifestResult.manifest;
+
+      // Ensure static directory exists
+      const staticDir = join(root, userOptions.build.outDir, userOptions.build.static);
+      await mkdir(staticDir, { recursive: true });
+
+      worker = await createWorker({
+        projectRoot: root,
+        workerPath: userOptions.htmlWorkerPath,
+        condition: "react-server",
+        reverseCondition: true,
+        mode: (resolvedConfig?.mode ?? "production") as "production" | "development",
+      });
+
+      if (typeof loader !== "function") {
+        loader = createBuildLoader({
+          root: root,
+          userConfig,
+          userOptions,
+          pluginContext: this,
+          serverManifest,
+          clientManifest,
+        });
+      }
+
+      // Collect CSS files per route
+      const routeCssMap = new Map<string, Set<string>>();
+      const globalCss = new Set<string>();
+      // copy whole client directory to static directory
+      await mkdir(staticDir, { recursive: true });
+      await copyDir(join(root, userOptions.build.outDir, userOptions.build.client), join(root, userOptions.build.outDir, userOptions.build.static));
+      // Add global CSS from index.html - use client manifest
+      const {cssFiles: indexCss} = collectManifestClientFiles({
+        manifest: clientManifest,
+        root: root,
+        pagePath: 'index.html',
+        moduleBase: userOptions.moduleBase,
+        preserveModulesRoot: userOptions.build.preserveModulesRoot,
+        testClient: ()=>true,
+      });
+      indexCss.forEach((css) => globalCss.add(css));
+
+      // Add CSS for each route's page component - use server manifest
+      for (const route of resolvedPages) {
+        const routeFiles = files.urlMap.get(route);
+        if (routeFiles) {
+          const pageCss = collectManifestClientFiles({
+            manifest: serverManifest,
+            root: root,
+            pagePath: routeFiles.page,
+            moduleBase: userOptions.moduleBase,
+            preserveModulesRoot: userOptions.build.preserveModulesRoot,
+            onClientModule(path) {
+              // copy the css file to the static directory
+              const targetPath = join(root, userOptions.build.outDir, userOptions.build.server, path);
+              const destinationPath = join(root, userOptions.build.outDir, userOptions.build.static, path);
+              mkdirSync(dirname(destinationPath), { recursive: true });
+              copyFileSync(targetPath, destinationPath);
+            },
+            testClient: userOptions.autoDiscover.cssPattern,
+            testJson: userOptions.autoDiscover.jsonPattern,
+          });
+          routeCssMap.set(route, new Set([...globalCss, ...pageCss.cssFiles.keys()]));
+        }
+      }
+      const bootstrapModules = clientManifest["index.html"]?.file
+      ? [clientManifest["index.html"].file.startsWith("/")
+          ? clientManifest["index.html"].file.slice(1)
+          : clientManifest["index.html"].file]
+      : [];
+      
+      const { failedRoutes, completedRoutes} = await renderPages(
+        resolvedPages,
+        files,
+        {
+          outDir: userOptions.build.outDir,
+          htmlOutputPath: join( userOptions.build.outDir, userOptions.build.static, "index.html"),
+          pipableStreamOptions: {
+            bootstrapModules: bootstrapModules,
+          },
+          moduleBasePath: join(root, userOptions.build.outDir, userOptions.build.client),
+          moduleBaseURL: userOptions.moduleBaseURL,
+          userConfig,
+          pluginOptions: userOptions,
+          worker,
+          clientManifest,
+          serverManifest,
+          loader,
+          transformIndexHtml: htmlTransform!,
+          onClientJSFile: (url) => {
+            if (!clientAssets.has(url)) {
+              const clientPath = join(root, userOptions.build.outDir, userOptions.build.client, url);
+              const targetPath = join(root, userOptions.build.outDir, userOptions.build.static, url);
+              mkdirSync(dirname(targetPath), { recursive: true });
+              copyFileSync(clientPath, targetPath);
+              clientAssets.add(url);
+            }
+          }
+        }
+      );
+
+      if (failedRoutes.size > 0) {
+        console.error(
+          "[vite-plugin-react-server] Failed to render routes:",
+          failedRoutes
+        );
+      }
+      console.log(`Rendered ${completedRoutes.size} unique routes to ${join(userOptions.build.outDir, userOptions.build.static)}`);
+      await worker.terminate();
+    },
+  };
+}

package/plugin/resolvePage.ts

@@ -1,3 +1,5 @@
+import { stashedPages } from "./config/resolvePages.js";
+
 type ResolvePageOptions = {
   pageModule: Record<string, any>;
   path: string;
@@ -16,6 +18,13 @@ export async function resolvePage({
   url,
   exportName,
 }: ResolvePageOptions): Promise<ResolvePageResult> {
+  if(stashedPages.length > 0 && stashedPages.includes(path)){
+    return {
+      type: "success",
+      key: path,
+      Page: pageModule,
+    }
+  }
   if (!pageModule) {
     return {
       type: "error",

package/plugin/root.ts

@@ -0,0 +1,4 @@
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+export const pluginRoot = dirname(fileURLToPath(import.meta.url));
+

package/plugin/transformer/plugin.ts

@@ -1,6 +1,6 @@
 import { resolveOptions } from "../config/resolveOptions.js";
-import type { StreamPluginOptions } from "../types.js";
-import { type Plugin } from "vite";
+import type { InputNormalizer, ResolvedUserOptions, StreamPluginOptions } from "../types.js";
+import { type Manifest, type Plugin } from "vite";
 import { transformModuleIfNeeded } from "../loader/react-loader.js";
 import { DEFAULT_CONFIG } from "../config/defaults.js";
 import { createInputNormalizer } from "../helpers/inputNormalizer.js";
@@ -32,37 +32,47 @@ import { join } from "node:path";
  */
 
 export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
-  const resolvedOptions = resolveOptions(options);
-  let isDev = false;
-  if (resolvedOptions.type === "error") throw resolvedOptions.error;
-  const normalizer = createInputNormalizer({
-    root: resolvedOptions.userOptions.projectRoot,
-    preserveModulesRoot: undefined,
-    removeExtension: false,
-  });
-
-  // Get the client manifest
-  const clientManifestResult = tryManifest({
-    root: resolvedOptions.userOptions.projectRoot,
-    outDir: join(
-      resolvedOptions.userOptions.build.outDir,
-      resolvedOptions.userOptions.build.client
-    ),
-    ssrManifest: false,
-  });
-
+  let normalizer: InputNormalizer;
+  let clientManifest: Manifest;
+  let isDev:boolean;
+  let userOptions: ResolvedUserOptions
   return {
     name: "vite:react-transform",
     enforce: "pre", // Run before Vite's transforms
     config(config, configEnv) {
-      isDev = configEnv.mode === "development" && configEnv.command === "serve";
+      const resolvedOptionsResult = resolveOptions(
+        options,
+        config.build?.outDir?.startsWith(
+          join(options.build?.outDir ?? DEFAULT_CONFIG.BUILD.outDir, options.build?.client ?? DEFAULT_CONFIG.BUILD.client)
+        ) ?? false
+      );
+      isDev = configEnv.mode === "development" && configEnv.command === "serve"
+      if (resolvedOptionsResult.type === "error") throw resolvedOptionsResult.error;
+      userOptions = resolvedOptionsResult.userOptions;
+      normalizer = createInputNormalizer({
+        root: resolvedOptionsResult.userOptions.projectRoot,
+        preserveModulesRoot: undefined,
+        removeExtension: false,
+      });
+
     },
     async transform(code, id, options) {
       const ssr = options?.ssr ?? false;
       if (!ssr) return null;
       if (!id.match(DEFAULT_CONFIG.FILE_REGEX)) return null;
-      if (!code.match('"use client"'))
-        return null;
+      if (!code.match('"use client"')) return null;
+      
+      // Get the client manifest
+      const clientManifestResult = tryManifest({
+        root: userOptions.projectRoot,
+        outDir: join(
+          userOptions.build.outDir,
+          userOptions.build.client
+        ),
+        ssrManifest: false,
+      });
+      if (clientManifestResult.type === "error") throw clientManifestResult.error;
+      clientManifest = clientManifestResult.manifest;
       const [key, value] = normalizer(id);
       const transformed = await transformModuleIfNeeded(
         code,
@@ -87,16 +97,15 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
             transformed,
           }
         );
-        return null
-      }
-      if (clientManifestResult.type === "error") {
-        throw clientManifestResult.error;
+        return null;
       }
-      const clientPath = clientManifestResult.manifest[key]?.file;
+      const clientPath = clientManifest[key]?.file;
 
       if (!clientPath) {
-        console.warn(`[vite-plugin-react-server] Could not find client path for ${value}. Ignoring.`)
-        return null
+        console.warn(
+          `[vite-plugin-react-server] Could not find client path for ${value}. Ignoring.`
+        );
+        return null;
       }
       return {
         code: transformed.replace(key, clientPath),

package/plugin/transformer/types.ts

@@ -1,19 +0,0 @@
-export interface ViteReactClientTransformOptions {
-  projectRoot?: string;
-  moduleId?: (path: string, ssr: boolean) => string;
-  validateModuleId?: (moduleId: string) => boolean;
-  include?: string | RegExp | (string | RegExp)[];
-  exclude?: string | RegExp | (string | RegExp)[];
-}
-
-export interface TransformerOptions {
-  moduleId: (path: string, ssr: boolean) => string;
-  /**
-   * Optional validation function for module IDs
-   */
-  validateModuleId?: (moduleId: string) => boolean;
-  /**
-   * The directory to use for the module IDs
-   */
-  moduleBase: string;
-}

package/plugin/types.ts

@@ -1,5 +1,3 @@
-import type { ComponentType } from "react";
-import type { RenderToPipeableStreamOptions } from "react-dom/server";
 import type { PreRenderedChunk } from "rollup";
 import type { PreRenderedAsset } from "rollup";
 import type {
@@ -25,7 +23,7 @@ export type ResolvedUserConfig = Required<
   Pick<UserConfig, "root" | "mode" | "build" | "resolve">
 > &
   Omit<UserConfig, "root" | "mode" | "build" | "resolve"> & {
-    resolve: {alias:AliasOptions} & ResolveOptions;
+    resolve:  ResolveOptions;
   } & {
     build: NonNullable<
       Required<
@@ -89,7 +87,6 @@ export type ResolvedUserOptions = Required<
     | "serverEntry"
     | "moduleBaseExceptions"
     | "pipableStreamOptions"
-    | "moduleId"
   >
 > & {
   build: NonNullable<Required<StreamPluginOptions["build"]>>;
@@ -172,15 +169,17 @@ export interface StreamPluginOptions {
   build?: BuildConfig;
   moduleBaseExceptions?: string[];
   pipableStreamOptions?: PipeableStreamOptions;
-  moduleId?: (id: string, ssr: boolean) => string;
 }
 
 export interface CreateHandlerOptions<T = any> {
   loader: (id: string) => Promise<T>;
   clientManifest?: import("vite").Manifest;
   serverManifest?: import("vite").Manifest;
+  moduleBasePath: string;
+  moduleBaseURL: string;
   moduleGraph?: import("vite").ModuleGraph;
   cssFiles?: string[];
+  cssModules?: Set<string>;
   onCssFile?: (path: string, parentUrl: string) => void;
   logger?: import("vite").Logger;
   pipableStreamOptions?: PipeableStreamOptions;
@@ -245,7 +244,7 @@ export interface BuildOutput {
 }
 
 export interface BuildConfig {
-  pages: string[] | (() => Promise<string[]> | string[]);
+  pages: string[] | (() => Promise<string[]> | string[]) | Promise<string[]>;
   assetsDir?: string;
   client?: string; // Output directory for client files
   server?: string; // Output directory for server files
@@ -359,3 +358,23 @@ export type HtmlProps = {
   url: string;
   cssFiles: string[];
 };
+
+export interface PageAsset {
+  type: 'css' | 'js';
+  path: string;
+  parentUrl: string;
+}
+
+export interface PageData {
+  route: string;
+  clientComponents?: string[];
+  html?: {
+    raw: string;
+    transformed?: string;
+    assets: PageAsset[];
+  };
+  rsc?: {
+    content: string;
+    modules: Array<[string, string]>; // [modulePath, exportName]
+  };
+}

package/plugin/worker/createWorker.ts

@@ -1,7 +1,7 @@
 import { Worker, type ResourceLimits } from "node:worker_threads";
 import { getMode, getNodePath } from "../config/getPaths.js";
 import { getCondition } from "../config/getCondition.js";
-import { join } from "node:path";
+
 type CreateWorkerOptions = {
   projectRoot?: string;
   condition?: "react-server" | "react-client";

package/plugin/worker/html/README.md

@@ -0,0 +1,63 @@
+# HTML Worker
+
+The HTML worker handles HTML generation and transformation as part of the server plugin (which runs under the `react-server` condition). Since the main thread is already in the correct condition for RSC, the HTML worker can work directly with RSC streams without needing a separate RSC worker.
+
+The worker receives RSC streams directly from the main thread (which is running under `react-server` condition) and transforms them into HTML. This is different from the client plugin, which needs a separate RSC worker to handle server-condition tasks.
+
+## Extending the Worker
+
+Users can create their own HTML workers for application-level use. This allows for:
+
+1. Custom HTML processing
+2. Specialized asset handling
+3. Custom build pipelines
+
+Example of creating a custom HTML worker:
+
+```typescript
+import { messageHandler } from 'vite-plugin-react-server/worker/html/messageHandler'
+import type { HtmlWorkerMessage } from 'vite-plugin-react-server/worker/types'
+
+// Create your custom message handler
+const customMessageHandler = async (msg: HtmlWorkerMessage) => {
+  // Add your custom logic here
+  return messageHandler(msg)
+}
+
+// Initialize your worker
+if (typeof WorkerGlobalScope !== 'undefined') {
+  parentPort.on('message', customMessageHandler)
+}
+```
+
+## Messages
+You have two options, either directly write the files from the worker or pass them back to the main thread through messages.
+
+```ts
+
+```
+
+## Client Dev Mode Integration
+
+When running in client dev mode, you can use your custom HTML worker as part of your application:
+
+1. The worker runs in the client environment
+2. It can handle HTML transformations in real-time
+3. Provides immediate feedback during development
+4. Can be integrated with other development tools
+
+## Future Possibilities
+
+The HTML worker architecture supports various potential enhancements:
+
+- Custom HTML transformation pipelines
+- Advanced asset optimization strategies
+- Integration with other build tools
+- Real-time HTML processing in development
+
+## Notes
+
+- The worker must handle streaming HTML content
+- Asset paths need to be properly resolved
+- Consider memory usage when processing large HTML files
+- Ensure proper coordination with the RSC worker 

package/plugin/worker/html/html-worker.development.tsx

@@ -1,8 +1,95 @@
+// no offical types for node:module available yet (23.7.0)
+declare module "node:module" {
+  export interface ImportAttributes {
+    [key: string]: string | undefined;
+  }
+
+  export interface ResolveHookContext {
+    conditions: string[];
+    parentURL: string | undefined;
+    importAttributes: ImportAttributes;
+  }
+
+  export interface LoadHookContext {
+    conditions: string[];
+    format: ModuleFormat | null | undefined;
+    importAttributes: ImportAttributes;
+    shortCircuit?: boolean;
+  }
+
+  export interface ResolveResult {
+    url: string;
+    shortCircuit: boolean;
+  }
+
+  export interface LoadResult {
+    format: string;
+    source: string | SharedArrayBuffer | Uint8Array;
+    shortCircuit: boolean;
+  }
+
+  export interface HooksAPI {
+    resolve?: (
+      specifier: string,
+      context: ResolveHookContext,
+      nextResolve: (
+        specifier: string,
+        context: ResolveHookContext
+      ) => ResolveResult
+    ) => ResolveResult;
+
+    load?: (
+      url: string,
+      context: LoadHookContext,
+      nextLoad: (url: string, context: LoadHookContext) => LoadResult
+    ) => LoadResult;
+  }
+
+  export function registerHooks(hooks: HooksAPI): void;
+}
+import { join } from "node:path";
+import { pluginRoot } from "../../root.js";
 import { messageHandler } from "./messageHandler.js";
 import { parentPort } from "node:worker_threads";
+import { register } from "node:module";
+import { register as registerTsx } from "tsx/esm/api";
+import { MessageChannel } from "node:worker_threads";
 
 if (!parentPort) throw new Error("This module must be run as a worker");
-parentPort?.on("message", messageHandler);
 
+// Create channels for each loader
+const reactLoaderChannel = new MessageChannel();
+const cssLoaderChannel = new MessageChannel();
+
+// Listen for messages from loaders
+reactLoaderChannel.port2.on("message", messageHandler);
+cssLoaderChannel.port2.on("message", messageHandler);
+
+const loaderPath = "file://" + join(pluginRoot, "loader/react-loader.js");
+const cssLoaderPath = "file://" + join(pluginRoot, "loader/css-loader.js");
+
+// Register react-loader
+register(loaderPath, {
+  parentURL: pluginRoot,
+  data: { port: reactLoaderChannel.port1 },
+  transferList: [reactLoaderChannel.port1],
+});
+register(cssLoaderPath, {
+  parentURL: pluginRoot,
+  data: { port: cssLoaderChannel.port1 },
+  transferList: [cssLoaderChannel.port1],
+});
+
+// Register loaders
+registerTsx();
 // Signal ready with environment
-parentPort?.postMessage({ type: "READY", env: process.env["NODE_ENV"] });
+parentPort?.on("message", messageHandler);
+parentPort?.postMessage({
+  type: "READY",
+  env: process.env["NODE_ENV"],
+  pid: process.pid,
+});
+
+if (process.env["NODE_ENV"] !== "development") {
+  throw new Error("This module must be run in development mode");
+}

package/plugin/worker/html/html-worker.production.tsx

@@ -1,18 +1,16 @@
 import { messageHandler } from "./messageHandler.js";
 import { parentPort } from "node:worker_threads";
-import { Window } from 'happy-dom';
-const window = new Window({ url: 'https://localhost:8080' });
-const document = window.document;
-globalThis.window = window as any;
-globalThis.document = document as any;
 
-let ready = false;
 if (!parentPort) throw new Error("This module must be run as a worker");
 
 // Signal ready with environment
 parentPort?.on("message", messageHandler);
-parentPort?.postMessage({ 
-    type: "READY", 
-    env: process.env["NODE_ENV"],
-    pid: process.pid 
+parentPort?.postMessage({
+  type: "READY",
+  env: process.env["NODE_ENV"],
+  pid: process.pid,
 });
+
+if (process.env["NODE_ENV"] !== "production") {
+  throw new Error("This module must be run in development mode");
+}