vite-plugin-react-server 0.3.18 → 1.0.0

package/plugin/react-static/plugin.ts

@@ -0,0 +1,256 @@
+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,
+  createLogger,
+} 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 pages: 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 resolvePagesResult = await resolvePages(userOptions.build.pages);
+      if (resolvePagesResult.type === "error") {
+        throw resolvePagesResult.error;
+      }
+      pages = resolvePagesResult.pages;
+      files = await checkFilesExist(pages, 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 pages) {
+        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(
+        pages,
+        files,
+        {
+          root: root,
+          outDir: userOptions.build.outDir,
+          htmlOutputPath: join( userOptions.build.outDir, userOptions.build.static, "index.html"),
+          pipableStreamOptions: {
+            bootstrapModules: bootstrapModules,
+          },
+          moduleRootPath: join(root, userOptions.build.outDir, userOptions.build.static, userOptions.moduleBasePath),
+          moduleBasePath: userOptions.moduleBasePath,
+          moduleBaseURL: userOptions.moduleBaseURL,
+          inlineCss: userOptions.inlineCss,
+          pageExportName: userOptions.pageExportName,
+          propsExportName: userOptions.propsExportName,
+          Html: userOptions.Html,
+          CssCollector: userOptions.CssCollector,
+          cssFiles: [],
+          logger: createLogger(),
+          moduleBase: userOptions.moduleBase,
+          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/react-static/types.ts

@@ -0,0 +1,3 @@
+export type ReactStaticPluginOptions = {
+  
+};

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<
@@ -67,7 +65,7 @@ export interface StreamPluginOptionsClient {
   cssFiles?: AliasOptions;
 }
 
-export type ResolvedUserOptions = Required<
+export type ResolvedUserOptions<InlineCSS extends boolean = boolean> = Required<
   Pick<
     StreamPluginOptions,
     | "moduleBase"
@@ -78,10 +76,12 @@ export type ResolvedUserOptions = Required<
     | "Page"
     | "props"
     | "Html"
+    | "CssCollector"
     | "pageExportName"
     | "propsExportName"
     | "collectCss"
     | "collectAssets"
+    | "inlineCss"
     | "htmlWorkerPath"
     | "rscWorkerPath"
     | "loaderPath"
@@ -89,10 +89,9 @@ export type ResolvedUserOptions = Required<
     | "serverEntry"
     | "moduleBaseExceptions"
     | "pipableStreamOptions"
-    | "moduleId"
   >
 > & {
-  build: NonNullable<Required<StreamPluginOptions["build"]>>;
+  build: NonNullable<Required<StreamPluginOptions<InlineCSS>["build"]>>;
   autoDiscover: {
     modulePattern: (path: string) => boolean;
     cssPattern: (path: string) => boolean;
@@ -119,7 +118,7 @@ export type createBuildConfigFn<C extends "react-client" | "react-server"> =
     ? Promise<InlineConfig>
     : Promise<InlineConfig>;
 
-export interface StreamPluginOptions {
+export interface StreamPluginOptions<InlineCSS extends boolean = boolean> {
   projectRoot?: string;
   moduleBase: string;
   moduleBasePath?: string;
@@ -167,23 +166,38 @@ export interface StreamPluginOptions {
     url: string;
     children: React.ReactNode;
   }>;
+  CssCollector?: InlineCSS extends true ? React.FC<React.PropsWithChildren<InlineCssCollectorProps>> : React.FC<React.PropsWithChildren<CssCollectorProps>>;
   collectCss?: boolean;
   collectAssets?: boolean;
+  inlineCss?: InlineCSS;
   build?: BuildConfig;
   moduleBaseExceptions?: string[];
   pipableStreamOptions?: PipeableStreamOptions;
-  moduleId?: (id: string, ssr: boolean) => string;
 }
 
-export interface CreateHandlerOptions<T = any> {
+export interface CreateHandlerOptions<T = any, InlineCSS extends boolean = boolean> {
+  root: string;
+  url: string;
+  route: string;
+  getCss: (id: string) => Promise<Map<string, string | CssContent>> | Map<string, string | CssContent>;
   loader: (id: string) => Promise<T>;
-  clientManifest?: import("vite").Manifest;
-  serverManifest?: import("vite").Manifest;
-  moduleGraph?: import("vite").ModuleGraph;
-  cssFiles?: string[];
+  Html: NonNullable<StreamPluginOptions['Html']>
+  CssCollector: InlineCSS extends true ? React.FC<React.PropsWithChildren<InlineCssCollectorProps>> : React.FC<React.PropsWithChildren<CssCollectorProps>>;
+  inlineCss: InlineCSS;
+  propsPath?: string;
+  pagePath?: string;
+  pageExportName: string
+  propsExportName: string
+  moduleBase: string
+  preserveModulesRoot?: boolean | undefined
+  moduleBasePath: string;
+  moduleRootPath: string;
+  moduleBaseURL: string;
+  cssFiles: (string | CssContent)[];
+  cssModules?: Map<string, string | CssContent> | undefined;
   onCssFile?: (path: string, parentUrl: string) => void;
-  logger?: import("vite").Logger;
-  pipableStreamOptions?: PipeableStreamOptions;
+  logger: import("vite").Logger;
+  pipableStreamOptions: PipeableStreamOptions;
 }
 
 export type ModuleLoader = (
@@ -245,7 +259,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 +373,50 @@ 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]
+  };
+}
+
+export interface CssContent {
+  type?: string;
+  content: string;
+  key?: string;
+  path: string;
+}
+
+export interface InlineCssCollectorProps {
+  cssFiles: CssContent[];
+  root: string;
+  moduleBaseURL: string;
+  moduleBasePath: string;
+  moduleRootPath: string;
+  route: string;
+  children?: React.ReactNode;
+}
+
+export interface CssCollectorProps {
+  cssFiles: CssContent[];
+  root: string;
+  moduleBaseURL: string;
+  moduleBasePath: string;
+  moduleRootPath: string;
+  route: string;
+  children?: React.ReactNode;
+}

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