vite-plugin-react-server 0.1.0

package/src/transformer/preserveDirectives.ts

@@ -0,0 +1,100 @@
+import type { Node } from "estree";
+import type { Plugin } from "rollup";
+import { SourceMapGenerator } from "source-map";
+import { DEFAULT_CONFIG } from "../options.js";
+import type { Options } from "../types.js";
+
+const REACT_DIRECTIVES = new Set(["use client", "use server", "use no-memo"]);
+
+interface PreserveDirectiveMeta {
+  directives: Record<string, Set<string>>;
+}
+
+export function preserveDirectives(options?: Pick<Options, "include">): Plugin {
+  const meta: PreserveDirectiveMeta = {
+    directives: {},
+  };
+  const fileRegex = options?.include ?? DEFAULT_CONFIG.FILE_REGEX;
+
+  return {
+    name: "react-preserve-directives",
+    transform: {
+      order: "post",
+      handler(code, id) {
+        if (!fileRegex.test(id)) {
+          return null;
+        }
+
+        const ast = this.parse(code) as Node;
+        if (ast.type !== "Program") {
+          return null;
+        }
+
+        let hasDirectives = false;
+        const directives = new Set<string>();
+
+        // Look for directives at start of file
+        for (const node of ast.body) {
+          if (node.type !== "ExpressionStatement") {
+            break;
+          }
+
+          if (
+            node.expression.type === "Literal" &&
+            typeof node.expression.value === "string" &&
+            REACT_DIRECTIVES.has(node.expression.value)
+          ) {
+            directives.add(node.expression.value);
+            hasDirectives = true;
+          }
+        }
+
+        if (!hasDirectives) return null;
+
+        meta.directives[id] = directives;
+
+        // Generate source map
+        const map = new SourceMapGenerator({
+          file: id,
+          sourceRoot: "",
+        });
+        map.setSourceContent(id, code);
+
+        return {
+          code,
+          map: map.toString(),
+          meta: { directives: Array.from(directives) },
+        };
+      },
+    },
+
+    renderChunk(code, chunk) {
+      const moduleIds = chunk.moduleIds;
+      const chunkDirectives = moduleIds
+        .map((id) => meta.directives[id])
+        .filter((dirs): dirs is Set<string> => !!dirs)
+        .reduce((acc, dirs) => {
+          dirs.forEach((d) => acc.add(d));
+          return acc;
+        }, new Set<string>());
+
+      if (chunkDirectives.size) {
+        const directiveCode = Array.from(chunkDirectives)
+          .map((d) => `"${d}";`)
+          .join("\n");
+        return {
+          code: `${directiveCode}\n${code}`,
+        };
+      }
+
+      return null;
+    },
+
+    onLog(level, log) {
+      if (log.code === "MODULE_LEVEL_DIRECTIVE" && level === "warn") {
+        return false;
+      }
+      return this.warn(log);
+    },
+  };
+}

package/src/transformer/preserver.ts

@@ -0,0 +1,47 @@
+interface RSCChunk {
+  id: number;
+  type?: string;
+  content: any;
+  timing?: number;
+}
+
+export function preserveRSC(chunk: string): string {
+  // Try to parse RSC format: <id>:<content>
+  const match = chunk.match(/^(\d+):(.+)$/);
+  if (!match) return chunk;
+
+  const [_, id, content] = match;
+
+  // Handle different chunk types
+  if (content.startsWith('"$S')) {
+    // Fragment type
+    return chunk;
+  }
+
+  if (content.startsWith("I[")) {
+    // Import type
+    return chunk;
+  }
+
+  try {
+    // Try to parse as array/object
+    const parsed = JSON.parse(content);
+
+    // Check if this is a component chunk
+    if (Array.isArray(parsed) && parsed[2] === "html") {
+      const componentChunk = {
+        name: "Page",
+        env: "Server",
+        key: "page",
+        owner: null,
+        stack: [],
+        props: parsed[3],
+      };
+      return `${id}:${JSON.stringify(componentChunk)}\n:N${Date.now()}`;
+    }
+
+    return chunk;
+  } catch {
+    return chunk;
+  }
+}

package/src/transformer/transformer.ts

@@ -0,0 +1,123 @@
+import { SourceMapGenerator } from "source-map";
+import type { TransformerOptions } from "./types.js";
+
+export function createRscTransformer(options: TransformerOptions) {
+  return {
+    name: "vite:react-stream-transformer",
+    enforce: "post" as const,
+
+    async transform(
+      code: string,
+      path: string,
+      { ssr }: { inMap: null | string; ssr: boolean }
+    ) {
+      try {
+        let transformedCode = code;
+        const directiveMatch = code.match(/^["']use client["'];?/);
+        const moduleId = options.moduleId(path, ssr);
+
+        // Log the path transformation
+        console.log("[RSC Transform] Module path transformation:", {
+          original: path,
+          transformed: moduleId,
+        });
+
+        // Find all named exports
+        const exportMatches = Array.from(
+          code.matchAll(/export\s+(?:const|let|var|function|class)\s+(\w+)/g)
+        );
+
+        if (!exportMatches.length) {
+          console.warn(`[RSC] No exports found in client component: ${path}`);
+          return null;
+        }
+
+        // Transform each export
+        for (const [fullMatch, exportName] of exportMatches) {
+          if (!exportName) {
+            console.warn(`[RSC] Invalid export in client component: ${path}`);
+            continue;
+          }
+
+          const isClass = fullMatch.includes("class");
+
+          // Remove export keyword
+          transformedCode = transformedCode.replace(
+            fullMatch,
+            fullMatch.replace("export ", "")
+          );
+
+          if (!directiveMatch || directiveMatch.index !== 0) {
+            // Server component
+            transformedCode += `
+const ${exportName}Ref = Object.defineProperties(
+  ${
+    isClass
+      ? `class extends ${exportName} {
+          constructor(...args) { super(...args); }
+        }`
+      : `function(...args) { return ${exportName}.apply(null, args); }`
+  },
+  {
+    $$typeof: { value: Symbol.for("react.server.reference") },
+    $$id: { value: ${JSON.stringify(moduleId + "#" + exportName)} },
+    $$filepath: { value: ${JSON.stringify(path)} },
+    $$async: { value: true }
+  }
+);
+export { ${exportName}Ref as ${exportName} };
+`;
+          } else {
+            // Client component
+            transformedCode += `
+const ${exportName}Ref = Object.defineProperties(
+  ${
+    isClass
+      ? `class extends ${exportName} {
+          constructor(...args) { super(...args); }
+        }`
+      : `function(...args) { return ${exportName}.apply(null, args); }`
+  },
+  {
+    $$typeof: { value: Symbol.for("react.client.reference") },
+    $$id: { value: ${JSON.stringify(moduleId + "#" + exportName)} },
+    $$filepath: { value: ${JSON.stringify(path)} }
+  }
+);
+export { ${exportName}Ref as ${exportName} };
+`;
+          }
+        }
+
+        return {
+          code: transformedCode,
+          map: new SourceMapGenerator({ file: path }).toString(),
+        };
+      } catch (error) {
+        console.error(
+          `[RSC] Error transforming client component: ${path}`,
+          error
+        );
+        throw error;
+      }
+    },
+  };
+}
+
+/**
+ * transformedCode += `
+const ${exportName}Ref = Object.defineProperties(
+  ${
+    isClass
+      ? `class extends ${exportName} {
+          constructor(...args) { super(...args); }
+        }`
+      : `function(...args) { return ${exportName}.apply(null, args); }`
+  },
+  {
+    $$typeof: { value: Symbol.for("react.client.reference") },
+    $$id: { value: ${JSON.stringify(moduleId + "#" + exportName)} }
+  }
+);
+export { ${exportName}Ref as ${exportName} };`;
+ */

package/src/transformer/types.ts

@@ -0,0 +1,15 @@
+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;
+}

package/src/types.ts

@@ -0,0 +1,245 @@
+import type {
+  AliasOptions,
+  Connect,
+  Logger,
+  Manifest,
+  ModuleGraph,
+  ViteDevServer,
+} from "vite";
+
+export interface StreamPluginOptionsClient {
+  outDir?: string;
+  build?: BuildConfig;
+  assetsDir?: string;
+  projectRoot?: string;
+  moduleBase?: string;
+  moduleBasePath?: string;
+  moduleBaseURL?: string;
+  clientComponents?: AliasOptions;
+  cssFiles?: AliasOptions;
+}
+
+export type ResolvedUserOptions = Required<
+  Pick<
+    StreamPluginOptions,
+    | "moduleBase"
+    | "moduleBasePath"
+    | "moduleBaseURL"
+    | "projectRoot"
+    | "build"
+    | "Page"
+    | "props"
+    | "Html"
+    | "pageExportName"
+    | "propsExportName"
+    | "collectCss"
+    | "collectAssets"
+    | "assetsDir"
+  >
+> & { build: NonNullable<Required<StreamPluginOptions["build"]>> };
+
+export interface StreamPluginOptions {
+  projectRoot?: string;
+  assetsDir?: string;
+  moduleBase?: string;
+  moduleBasePath?: string;
+  moduleBaseURL?: string;
+  clientEntry?: string;
+  serverOutDir?: string;
+  clientOutDir?: string;
+  // Auto-discovery (zero-config)
+  autoDiscover?: {
+    pagePattern?: string;
+    propsPattern?: string;
+  };
+  // Manual configuration
+  Page: string | ((url: string) => string);
+  props?: undefined | string | ((url: string) => string);
+  // Escape hatches
+  workerPath?: string;
+  loaderPath?: string;
+  pageExportName?: string;
+  propsExportName?: string;
+  Html?: React.FC<{
+    manifest: Manifest;
+    pageProps: any;
+    route: string;
+    url: string;
+    children: React.ReactNode;
+  }>;
+  collectCss?: boolean;
+  collectAssets?: boolean;
+  build?: BuildConfig;
+}
+
+export interface CreateHandlerOptions<T = any> {
+  loader: (id: string) => Promise<T>;
+  manifest?: Manifest;
+  moduleGraph?: ModuleGraph;
+  cssFiles?: string[];
+  onCssFile?: (path: string) => void;
+  logger?: Logger;
+  pipableStreamOptions?: any;
+}
+
+export type ModuleLoader = (
+  url: string,
+  context?: any,
+  defaultLoad?: any
+) => Promise<Record<string, any>>;
+
+export interface BaseProps {
+  manifest: Manifest;
+  children?: React.ReactNode;
+  assets?: {
+    css?: string[];
+  };
+}
+
+export type StreamResult =
+  | {
+      type: "success";
+      stream: any;
+      assets?: {
+        css?: string[];
+      };
+    }
+  | { type: "error"; error: unknown }
+  | { type: "skip" };
+
+export interface RscStreamOptions {
+  Page: React.ComponentType;
+  props: any;
+  Html: any;
+  logger?: Console | Logger;
+  cssFiles?: string[];
+  route: string;
+  url: string;
+  pipableStreamOptions?: any;
+  moduleBasePath: string;
+}
+
+export interface RouteConfig {
+  path: string;
+  // Define page/props paths using patterns
+  pattern?: {
+    page?: string; // e.g. "page/_theme/[route]/page"
+    props?: string; // e.g. "page/_theme/[route]/props"
+  };
+  // Or use explicit paths
+  paths?: {
+    page: string; // e.g. "page/home/page"
+    props: string; // e.g. "page/home/props"
+  };
+}
+
+export interface BuildOutput {
+  dir?: string;
+  rsc?: string;
+  ext?: string;
+}
+
+export interface BuildConfig {
+  pages: string[] | (() => Promise<string[]> | string[]);
+  client?: string; // Output directory for client files
+  server?: string; // Output directory for server files
+}
+
+export interface RscResolver {
+  /**
+   * Get RSC data for static generation
+   * @param path - Route path (e.g. "/", "/about")
+   */
+  getRscData: (path: string) => Promise<{
+    Page: React.ComponentType;
+    props: any;
+  }>;
+}
+
+export interface Options {
+  include?: RegExp;
+  projectRoot?: string;
+  moduleBase: string;
+  // can be inferred from moduleBase, will add / to moduleBase by default (if not already present)
+  moduleBasePath?: string;
+  Html?: React.ComponentType<React.PropsWithChildren<{ manifest: Manifest }>>;
+  Page: string | ((url: string) => string);
+  props?: string | ((url: string) => string);
+  pageExportName?: string;
+  propsExportName?: string;
+  collectCss?: boolean;
+  collectAssets?: boolean;
+  emitCss?: boolean;
+  moduleLoader?: (server: ViteDevServer) => ModuleLoader;
+  build?: BuildConfig;
+  outDir?: string; // defaults to 'dist'
+  /**
+   * Configure static asset copying
+   * - true: Copy all assets
+   * - false: Don't copy assets
+   * - Function: Custom filter for which files to copy
+   */
+  copyAssets?: boolean | ((file: string) => boolean);
+}
+
+export type RequestHandler = Connect.NextHandleFunction;
+
+export interface SsrStreamOptions {
+  url: string;
+  controller: AbortController;
+  loader: (id: string) => Promise<any>;
+  Html: any;
+  options: StreamPluginOptions;
+  pageExportName: string;
+  propsExportName: string;
+  moduleGraph: any;
+  bootstrapModules?: string[];
+  importMap?: Record<string, string[]>;
+  clientComponents?: boolean;
+  onlyClientComponents?: boolean;
+}
+
+export type RscServerConfig = {
+  /** How to get RSC data (e.g. HTTP, direct import, etc) */
+  getRscComponent: (url: string) => React.Usable<React.ReactNode>;
+  /** Base URL for client assets */
+  clientBase?: string;
+  /** SSR stream rendering options */
+  ssrOptions?: SsrStreamOptions;
+};
+
+export interface RscServerModule {
+  /**
+   * Get RSC data for a route
+   * @param path - Route path (e.g. "/", "/about")
+   * @returns Page component and props
+   */
+  getRscData: (path: string) => Promise<{
+    /** Page component to render */
+    Page: React.ComponentType;
+    /** Props to pass to the page */
+    props: any;
+  }>;
+}
+
+export interface RegisterComponentMessage {
+  type: "REGISTER_COMPONENT";
+  id: string;
+  code: string;
+}
+
+export type RscBuildResult = string[];
+
+export interface ReactStreamPluginMeta {
+  timing: BuildTiming;
+}
+
+export interface BuildTiming {
+  start: number;
+  configResolved?: number;
+  buildStart?: number;
+  buildEnd?: number;
+  renderStart?: number;
+  renderEnd?: number;
+  total?: number;
+}

package/src/worker/createHtmlStream.ts

@@ -0,0 +1,76 @@
+import { createWriteStream } from "node:fs";
+import { Readable, Writable } from "node:stream";
+import { parentPort } from "node:worker_threads";
+import { renderToPipeableStream } from "react-dom/server";
+import { createFromNodeStream } from "react-server-dom-esm/client.node";
+import type { RenderState } from "./types.js";
+
+const concatter = (chunk: string) => {
+  if (Array.isArray(chunk)) {
+    return Buffer.from(chunk);
+  }
+  return Buffer.from(chunk);
+};
+
+export function createHtmlStream(
+  renderState: RenderState,
+  writeStream: Writable
+) {
+  const outputPath = renderState.htmlOutputPath;
+
+  // Create readable stream from RSC content
+  const rscStream = Readable.from(renderState.chunks.map(concatter));
+
+  // Create RSC node stream
+  const reactElements = createFromNodeStream(
+    rscStream,
+    renderState.moduleBasePath,
+    renderState.moduleBaseURL
+  );
+  // rsc file destination follows the same path as the html file, but with a .rsc extension
+  const rscOutputPath = renderState.htmlOutputPath.endsWith(".html")
+    ? renderState.htmlOutputPath.slice(0, -5) + ".rsc"
+    : renderState.htmlOutputPath.endsWith("/")
+    ? renderState.htmlOutputPath + "index.rsc"
+    : renderState.htmlOutputPath.endsWith(".")
+    ? renderState.htmlOutputPath + "rsc"
+    : renderState.htmlOutputPath + ".rsc";
+
+  const writeRscEntry = createWriteStream(rscOutputPath);
+  rscStream.on("data", (chunk) => {
+    writeRscEntry.write(chunk);
+  });
+  rscStream.on("end", () => {
+    writeRscEntry.end();
+  });
+  const stream = renderToPipeableStream(reactElements as React.ReactNode, {
+    ...renderState.pipableStreamOptions,
+    onAllReady() {
+      writeStream.on("finish", () => {
+        parentPort?.postMessage({
+          type: "HTML",
+          outputPath,
+          route: renderState.id,
+        });
+      });
+      writeStream.on("error", (error) => {
+        console.error("[Worker] Write error at", error);
+        stream.abort();
+      });
+    },
+    onShellReady() {
+      stream.pipe(writeStream);
+    },
+    onError(error) {
+      console.error("[Worker] Render error at", error);
+      stream.abort();
+      writeStream.destroy();
+    },
+    onShellError(error) {
+      console.error("[Worker] Shell error at", error);
+      stream.abort();
+      writeStream.destroy();
+    },
+  });
+  return { stream, writeStream };
+}

package/src/worker/createWorker.ts

@@ -0,0 +1,39 @@
+import { resolve } from "node:path";
+import { Worker } from "node:worker_threads";
+
+export async function createWorker(
+  projectRoot: string,
+  outDir: string,
+  fileName: string,
+  mode: "production" | "development"
+) {
+  console.log("[Worker] Creating worker...");
+  const workerPath = resolve(projectRoot, outDir, fileName);
+  console.log("[Worker] Worker path:", workerPath);
+
+  try {
+    const worker = new Worker(workerPath, {
+      env: {
+        NODE_OPTIONS: "",
+        NODE_PATH: resolve(projectRoot, "node_modules"),
+        NODE_ENV: mode,
+      },
+    });
+    worker.setMaxListeners(1000);
+
+    // Wait for worker to be ready
+    await new Promise<void>((resolve, reject) => {
+      worker.once("message", (message) => {
+        if (message.type === "READY") {
+          resolve();
+        }
+      });
+      worker.once("error", reject);
+    });
+
+    return worker;
+  } catch (error) {
+    console.error("[Worker] Startup error:", error);
+    throw error;
+  }
+}

package/src/worker/loader.ts

@@ -0,0 +1,16 @@
+/**
+ * Extension point for custom module loading in the worker thread.
+ * This file can be overridden via the plugin options:
+ *
+ * ```ts
+ * reactStreamPlugin({
+ *   loaderPath: './my-custom-loader.ts'
+ * })
+ * ```
+ *
+ * The default loader provides basic module loading functionality.
+ * Override this if you need custom module resolution or transformation.
+ */
+export function load(id: string) {
+  return import(id);
+}