vite-plugin-react-server 0.1.0

package/src/worker/renderPages.ts

@@ -0,0 +1,144 @@
+import { join, resolve as resolvePath } from "node:path";
+import { Transform } from "node:stream";
+import type { Worker } from "node:worker_threads";
+import type { PipeableStreamOptions } from "react-dom/server.node";
+import { createHandler } from "../react-server/createHandler.js";
+import type { StreamPluginOptions } from "../types.js";
+import type {
+  WorkerRscChunkMessage,
+  WorkerRscEndMessage,
+} from "./types.js";
+
+type RenderPagesOptions = {
+  pluginOptions: Required<
+    Pick<
+      StreamPluginOptions,
+      "moduleBase" | "moduleBasePath" | "moduleBaseURL" | "projectRoot"
+    >
+  > &
+    Pick<
+      StreamPluginOptions,
+      "Page" | "props" | "build" | "Html" | "pageExportName" | "propsExportName"
+    >;
+  outDir: string;
+  manifest: Record<string, { file: string }>;
+  worker: Worker;
+  pipableStreamOptions?: PipeableStreamOptions;
+  loader: (id: string) => Promise<Record<string, any>>;
+  onCssFile?: (path: string) => void;
+  clientCss?: string[];
+};
+
+export async function renderPages(
+  routes: string[],
+  options: RenderPagesOptions
+) {
+  const destinationRoot = resolvePath(
+    options.pluginOptions.projectRoot,
+    options.outDir
+  );
+  const failedRoutes = new Map<string, Error>();
+  const moduleBasePath = join(
+    destinationRoot,
+    options.pluginOptions.moduleBasePath
+  );
+  const moduleBaseURL = options.pluginOptions.moduleBaseURL;
+
+  const htmlRoot = resolvePath(
+    options.pluginOptions.projectRoot,
+    options.pluginOptions.build?.client ?? options.outDir
+  );
+  const filesOutputted: string[] = [];
+
+  options.worker.on("message", (msg) => {
+    switch (msg.type) {
+      case "ERROR":
+        console.error("[RenderPages] Worker error:", msg.error);
+        break;
+      case "HTML":
+        filesOutputted.push(msg.outputPath);
+        if (filesOutputted.length === routes.length) {
+          renderPromises.push(
+            new Promise<void>((resolve) => {
+              options.worker.removeAllListeners();
+              options.worker.terminate();
+              resolve();
+            })
+          );
+        }
+        break;
+      default:
+        break;
+    }
+  });
+  const pipableStreamOptions = options.pipableStreamOptions ?? {};
+
+  // Create promises for each route in the batch
+  const renderPromises = routes.map(async (route) => {
+    try {
+      // Wait for handler creation
+      const result = await createHandler(route, options.pluginOptions, {
+        loader: options.loader,
+        manifest: options.manifest,
+      });
+
+      if (result.type !== "success") {
+        return;
+      }
+      const htmlOutputPath = join(htmlRoot, route, "index.html");
+
+      // Create a promise that resolves when the worker completes
+      await new Promise<void>((resolve, reject) => {
+        // Pipe RSC stream to worker
+        const transform = new Transform({
+          transform(chunk, _encoding, callback) {
+            // Send raw chunk
+            options.worker.postMessage({
+              type: "RSC_CHUNK",
+              id: route,
+              chunk: chunk,
+              moduleBasePath,
+              moduleBaseURL,
+              htmlOutputPath: htmlOutputPath,
+              outDir: options.outDir,
+              pipableStreamOptions,
+            } satisfies WorkerRscChunkMessage);
+            callback();
+          },
+          flush(callback) {
+            options.worker.postMessage({
+              type: "RSC_END",
+              id: route,
+            } satisfies WorkerRscEndMessage);
+            callback();
+          },
+        });
+
+        // Listen for worker response for this route
+        const messageHandler = (msg: any) => {
+          if (msg.route === route) {
+            if (msg.type === "ERROR") {
+              options.worker.removeListener("message", messageHandler);
+              reject(new Error(msg.error));
+            } else if (msg.type === "HTML") {
+              options.worker.removeListener("message", messageHandler);
+              resolve();
+            }
+          }
+        };
+
+        options.worker.on("message", messageHandler);
+        result.stream?.pipe(transform);
+      });
+    } catch (error) {
+      failedRoutes.set(route, error as Error);
+    }
+  });
+
+  // Wait for all routes to complete
+  await Promise.all(renderPromises);
+
+  if (failedRoutes.size > 0) {
+    console.error("[vite-react-stream] Failed routes:", failedRoutes);
+  }
+}

package/src/worker/types.ts

@@ -0,0 +1,38 @@
+import type { PipeableStreamOptions } from "react-dom/server.node";
+
+export interface RenderState {
+  chunks: string[];
+  complete: boolean;
+  rendered: boolean;
+  outDir: string;
+  moduleBasePath: string;
+  moduleBaseURL: string;
+  htmlOutputPath: string;
+  id: string;
+  pipableStreamOptions: PipeableStreamOptions;
+}
+
+export interface WorkerRscChunkMessage {
+  type: "RSC_CHUNK";
+  id: string;
+  chunk: string;
+  moduleBasePath: string;
+  moduleBaseURL: string;
+  outDir: string;
+  htmlOutputPath: string;
+  pipableStreamOptions: PipeableStreamOptions;
+}
+
+export interface WorkerRscEndMessage {
+  type: "RSC_END";
+  id: string;
+}
+
+export interface WorkerShutdownMessage {
+  type: "SHUTDOWN";
+}
+
+export type WorkerMessage =
+  | WorkerRscChunkMessage
+  | WorkerRscEndMessage
+  | WorkerShutdownMessage;

package/src/worker/worker.tsx

@@ -0,0 +1,136 @@
+import { createWriteStream } from "node:fs";
+import { mkdir } from "node:fs/promises";
+import { dirname } from "node:path";
+import { Writable } from "node:stream";
+import { parentPort } from "node:worker_threads";
+import type { PipeableStream } from "react-server-dom-esm/server.node";
+import { createHtmlStream } from "./createHtmlStream.js";
+import type { RenderState, WorkerMessage } from "./types.js";
+
+if (!parentPort) {
+  throw new Error("This module must be run as a worker");
+}
+
+declare global {
+  interface Window {
+    href: string;
+  }
+} 
+// Initialize happy-dom window
+(global as any).window = {
+  href: undefined,
+  pathname: undefined,
+}
+
+// Track active renders
+const activeRenders = new Map<string, RenderState>();
+const activeStreams = new Map<string, PipeableStream>();
+const activeWrites = new Map<string, Writable>();
+
+async function shutdown() {
+  console.log("[Worker] Shutting down forcefully");
+  while (activeRenders.size > 0) {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  for (const stream of activeStreams.values()) {
+    stream.abort();
+  }
+  for (const writeStream of activeWrites.values()) {
+    writeStream.destroy();
+  }
+  process.exit(0);
+}
+// Handle incoming messages
+parentPort.on("message", async (message: WorkerMessage) => {
+  if (message.type === "SHUTDOWN") {
+    await shutdown();
+  }
+  if (!parentPort) {
+    throw new Error("No parent port available");
+  }
+  try {
+    switch (message.type) {
+      case "RSC_CHUNK": {
+        const { chunk, id, ...rest } = message;
+        (global as any).window.pathname = id;
+        // Skip if already rendered
+        let renderState = activeRenders.get(id);
+        if (renderState?.rendered) {
+          return;
+        }
+        // Initialize render state
+        if (!renderState) {
+          renderState = {
+            chunks: [],
+            complete: false,
+            rendered: false,
+            id: id,
+            ...rest,
+          };
+          activeRenders.set(id, renderState);
+        }
+        // Add chunk
+        if (chunk) renderState.chunks.push(chunk);
+        break;
+      }
+
+      case "RSC_END": {
+        const { id } = message;
+        const render = activeRenders.get(id);
+
+        if (!render || !parentPort || render.rendered) return;
+        try {
+          const writeToFile = render.outDir && render.htmlOutputPath;
+          // Write RSC content
+          if (writeToFile) {
+            await mkdir(dirname(render.htmlOutputPath), { recursive: true });
+          }
+          const { stream, writeStream } = createHtmlStream(
+            render,
+            writeToFile
+              ? createWriteStream(render.htmlOutputPath)
+              : new Writable({
+                  write(chunk, _, callback) {
+                    parentPort?.postMessage({
+                      type: "HTML",
+                      route: render.id,
+                      content: chunk.toString(),
+                    });
+                    callback();
+                  },
+                })
+          );
+          activeStreams.set(id, stream);
+          activeWrites.set(id, writeStream);
+          writeStream.on("finish", () => {
+            activeStreams.delete(id);
+            activeWrites.delete(id);
+          });
+          writeStream.on("error", () => {
+            activeStreams.delete(id);
+            activeWrites.delete(id);
+            stream.abort();
+          });
+        } catch (error) {
+          activeRenders.delete(id);
+          activeStreams.delete(id);
+          activeWrites.delete(id);
+          throw error;
+        } finally {
+          activeRenders.delete(id);
+        }
+        break;
+      }
+    }
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    parentPort?.postMessage({
+      type: "ERROR",
+      error: errorMessage,
+    });
+  }
+});
+
+// Signal ready only after loader is registered
+parentPort.postMessage({ type: "READY" });
+

package/tsconfig.json

@@ -0,0 +1,79 @@
+{
+  // when we extend a tsconfig.json file, it will merge and override the compilerOptions but not the arrays like lib, rootDirs, etc.
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    // idk whatever this does but strict sounds like a good idea. (https://www.typescriptlang.org/tsconfig/#strict)
+    "strict": true,
+    // Should you want to just import a js file anyway. You can use type comments in a .js file like: /* @type {string} */
+    "allowJs": true,
+    // prevents issues when renaming files only in casing
+    "forceConsistentCasingInFileNames": true,
+    // our jsx type's will be configured for react.
+    "jsx": "react",
+    // RSC portability - JSX will be transpiled to React.createElement
+    "jsxFactory": "React.createElement",
+    // The fragment refers to the empty component, like <></>
+    "jsxFragmentFactory": "React.Fragment",
+    // We force module detection to be sure that the module system is detected correctly.
+    "moduleDetection": "force",
+    // To indicate that we are NOT going to be emitting files
+    // This just means that when you write a switch statement, you will get an error once you forget to add a break statement.
+    "noFallthroughCasesInSwitch": true,
+    // We don't allow property access from index signatures. In this case we prefer to write record['images'] instead of record.images
+    "noPropertyAccessFromIndexSignature": true,
+    // You'll get an error if you forget to remove a variable. If you intended not to use it, you can prefix the variable with an underscore or change to a underscore variable to indicate unused variables.
+    "noUnusedLocals": false,
+    // Same as above, but for function parameters.
+    "noUnusedParameters": false,
+    // We allow JSON imports. In fact we promote using them. We need to use the `with {type: 'json'}` which is the most recent way to do it.
+    "resolveJsonModule": true,
+    // If you are having issues with libraries, you can disable this and it won't check the types of the libraries.
+    "skipLibCheck": false,
+    // The source folder is intended for polymorphic code that can work on the client, server, or during development. By default new code should go here, and should follow the types defined here.
+    "rootDir": "src",
+    // We collect all of our compiled files into the dist folder so that we do not clutter our source directories with distilled files.
+    "outDir": "dist",
+    // We tell the transpiler that we are using vite and that we want to use the client types. This makes sure that our import.meta.env types are available, as well as the experimental react types.
+    "types": [
+      "vite/client",
+    ],
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules",
+      "./types",
+    ],
+    "resolvePackageJsonImports": true,
+    "resolvePackageJsonExports": true,
+    "emitDeclarationOnly": true,
+    "verbatimModuleSyntax": true,
+    // The very latest ES features
+    "target": "es2022",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "lib": [
+      "es2023",
+      "dom",
+      "dom.iterable",
+    ]
+  },
+  "include": [
+    // support just normal ts
+    "src/**/*.ts",
+    // support tsx
+    "src/**/*.tsx",
+    // support mts
+    "src/**/*.mts",
+    // support json
+    "src/**/*.json",
+    // package.json
+    "package.json",
+    // types
+    "types/**/*.d.ts",
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}