vite-plugin-react-server 0.1.0

package/src/react-server/createDevMiddleware.ts

@@ -0,0 +1,75 @@
+import { IncomingMessage, ServerResponse } from "http";
+import type { ViteDevServer } from "vite";
+import { type RequestHandler, type StreamPluginOptions } from "../types.js";
+import { createHandler } from "./createHandler.js";
+
+export type DevMiddlewareOptions = Required<
+  Pick<
+    StreamPluginOptions,
+    "moduleBase" | "moduleBasePath" | "moduleBaseURL" | "projectRoot"
+  >
+> &
+  Pick<StreamPluginOptions, "Page" | "props" | "build" | "Html" | "pageExportName" | "propsExportName">;
+
+/**
+ * Creates a request handler for development
+ */
+export function createDevMiddleware(
+  server: ViteDevServer,
+  options: DevMiddlewareOptions
+): RequestHandler {
+  return async (req: IncomingMessage, res: ServerResponse, next: any) => {
+    // Skip non-page requests
+    if (
+      !req.url ||
+      (req.url.includes(".") && !req.url.endsWith("/index.rsc"))
+    ) {
+      return next();
+    }
+    const url = req.url.endsWith("/index.rsc")
+      ? req.url.replace("/index.rsc", "/")
+      : req.url;
+
+    try {
+      console.log("[stream] Handling RSC stream");
+
+      const result = await createHandler(url, options, {
+        loader: server.ssrLoadModule,
+        moduleGraph: server.moduleGraph,
+      });
+
+      if (result.type === "error") {
+        if (
+          (result.error as Error).message?.includes(
+            "module runner has been closed"
+          )
+        ) {
+          console.log("[RSC] Module runner closed, returning 503");
+          res.writeHead(503, { "Content-Type": "text/x-component" });
+          res.end('{"error":"Server restarting..."}');
+          return;
+        }
+        console.error("[RSC] Stream error:", result.error);
+        res.writeHead(500, { "Content-Type": "text/x-component" });
+        res.end('{"error":"Internal Server Error"}');
+        return;
+      }
+
+      if (result.type !== "success") {
+        res.end();
+        return;
+      }
+
+      res.setHeader("Content-Type", "text/x-component");
+      if (result.stream) result.stream.pipe(res);
+    } catch (error: any) {
+      if (error.message?.includes("module runner has been closed")) {
+        console.log("[RSC] Module runner closed, returning 503");
+        res.writeHead(503, { "Content-Type": "text/x-component" });
+        res.end('{"error":"Server restarting..."}');
+        return;
+      }
+      next(error);
+    }
+  };
+}

package/src/react-server/createDevServer.ts

@@ -0,0 +1,10 @@
+import type { ViteDevServer } from "vite";
+import type { StreamPluginOptions } from "../types.js";
+import { createDevMiddleware, type DevMiddlewareOptions } from "./createDevMiddleware.js";
+
+export function createDevServer(
+  server: ViteDevServer,
+  options: DevMiddlewareOptions
+) {
+  server.middlewares.use(createDevMiddleware(server, options));
+}

package/src/react-server/createHandler.ts

@@ -0,0 +1,144 @@
+import { createLogger } from "vite";
+import {
+  collectManifestCss,
+  collectModuleGraphCss,
+} from "../collect-css-manifest.js";
+import { DEFAULT_CONFIG } from "../options.js";
+import { resolvePage } from "../resolvePage.js";
+import { resolveProps } from "../resolveProps.js";
+import type { CreateHandlerOptions, StreamPluginOptions } from "../types.js";
+import { createRscStream } from "./createRscStream.js";
+
+export async function createHandler<T>(
+  url: string,
+  pluginOptions: Pick<
+    StreamPluginOptions,
+    "Page" | "props" | "build" | "Html" | "pageExportName" | "propsExportName"
+  > &
+    Required<
+      Pick<StreamPluginOptions, "moduleBase" | "moduleBasePath" | "projectRoot">
+    >,
+  streamOptions: CreateHandlerOptions<T>
+) {
+  const root = pluginOptions.projectRoot ?? process.cwd();
+
+  const Html = pluginOptions.Html ?? DEFAULT_CONFIG.HTML;
+  const pageExportName =
+    pluginOptions.pageExportName ?? DEFAULT_CONFIG.PAGE_EXPORT;
+  const propsExportName =
+    pluginOptions.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT;
+  const controller = new AbortController();
+
+  const cssFiles = streamOptions.cssFiles;
+  const propsPath =
+    typeof pluginOptions.props === "function"
+      ? pluginOptions.props(url)
+      : pluginOptions.props;
+  const pagePath =
+    typeof pluginOptions.Page === "function"
+      ? pluginOptions.Page(url)
+      : pluginOptions.Page;
+
+  const cssModules = new Set<string>();
+
+  if (!(streamOptions.manifest || streamOptions.moduleGraph))
+    throw new Error("Missing manifest or moduleGraph, pass it to options.");
+
+  const getCss = streamOptions.manifest
+    ? (id: string) =>
+        collectManifestCss(
+          streamOptions.manifest!,
+          root,
+          id,
+          streamOptions.onCssFile
+        )
+    : (id: string) => collectModuleGraphCss(streamOptions.moduleGraph!, id);
+
+  const loadWithCss = async (id: string) => {
+    if (!id) return {};
+
+    try {
+      const mod = await streamOptions.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>;
+      }
+    }
+  };
+
+  const PropsModule = await resolveProps({
+    propsModule: await loadWithCss(propsPath ?? pagePath),
+    path: String(propsPath ?? pagePath),
+    exportName: propsExportName,
+    url,
+  });
+  if (PropsModule.type === "error")
+    return { type: PropsModule.type, error: PropsModule?.error };
+  if (PropsModule.type === "skip") return { type: PropsModule.type };
+  const props = PropsModule[propsExportName as keyof typeof PropsModule] as any;
+  if (props?.type === "error") return { type: props.type, error: props.error };
+  if (props?.type === "skip") return { type: props.type };
+
+  const PageModule = await resolvePage({
+    pageModule: await loadWithCss(pagePath),
+    path: pagePath,
+    exportName: pageExportName,
+    url,
+  });
+  if (PageModule.type === "error")
+    return { type: PageModule.type, error: PageModule.error };
+  if (PageModule.type === "skip") return { type: PageModule.type };
+  const Page = PageModule[pageExportName as keyof typeof PageModule] as any;
+  if (Page?.type === "error") return { type: Page.type, error: Page.error };
+  if (Page?.type === "skip") return { type: Page.type };
+  if (!(typeof Page === "function")) {
+    return {
+      type: "error",
+      error: new Error("Invalid Page component: " + pagePath, {
+        cause: Page,
+      }),
+    };
+  }
+  if (!(typeof props === "object")) {
+    return {
+      type: "error",
+      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
+    logger: streamOptions.logger ?? createLogger(),
+    cssFiles: Array.from(cssModules),
+    route: url,
+    url,
+    pipableStreamOptions: streamOptions.pipableStreamOptions,
+  });
+
+  if (!stream) {
+    return { type: "skip" as const };
+  }
+
+  return {
+    type: "success" as const,
+    controller,
+    stream,
+    assets: {
+      css: cssFiles,
+    },
+  };
+}

package/src/react-server/createReactNodeStreamer.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import {
+  createFromNodeStream,
+  type CreateFromNodeStreamOptions,
+} from "react-server-dom-esm/client.node";
+import type { Readable } from "stream";
+
+export function createReactNodeStreamer({
+  stream,
+  moduleBasePath,
+  moduleBaseURL,
+  options,
+}: {
+  stream: Readable;
+  moduleBasePath: string;
+  moduleBaseURL: string;
+  options?: CreateFromNodeStreamOptions;
+}) {
+  return createFromNodeStream(
+    stream,
+    moduleBasePath,
+    moduleBaseURL,
+    options
+  ) as React.Usable<React.ReactNode>;
+}

package/src/react-server/createRscStream.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import {
+  renderToPipeableStream,
+  type PipeableStream,
+} from "react-server-dom-esm/server.node";
+import { CssCollector } from "../components.js";
+import type { RscStreamOptions } from "../types.js";
+
+export function createRscStream(
+  streamOptions: RscStreamOptions
+): PipeableStream {
+  const {
+    Html,
+    Page,
+    props,
+    logger,
+    cssFiles,
+    route,
+    url,
+    moduleBasePath,
+    pipableStreamOptions,
+  } = streamOptions;
+  const css = Array.isArray(cssFiles)
+    ? cssFiles.map((css, index) =>
+        React.createElement(CssCollector, {
+          key: `css-${index}`,
+          url: css,
+        })
+      )
+    : [];
+  return renderToPipeableStream(
+    React.createElement(
+      Html,
+      {
+        key: "html",
+        pageProps: props,
+        moduleBasePath: moduleBasePath,
+        route,
+        url,
+      },
+      React.createElement(Page, { key: "page", ...props }),
+      ...css
+    ),
+    moduleBasePath,
+    {
+      onError: logger?.error ?? console.error,
+      onPostpone: logger?.info ?? console.info,
+      environmentName: "Server",
+      ...pipableStreamOptions,
+    }
+  );
+}

package/src/react-server/createSsrHandler.ts

@@ -0,0 +1,147 @@
+import { dirname, join, resolve } from "node:path";
+import { Writable } from "node:stream";
+import { fileURLToPath } from "node:url";
+import { Worker } from "node:worker_threads";
+import { type ViteDevServer } from "vite";
+import { DEFAULT_CONFIG } from "../options.js";
+import type { RequestHandler, StreamPluginOptions } from "../types.js";
+import type { WorkerRscChunkMessage } from "../worker/types.js";
+import { createHandler } from "./createHandler.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export function createSsrHandler(
+  options: Required<
+    Pick<
+      StreamPluginOptions,
+      "Page" | "props" | "build" | "Html" | "pageExportName" | "propsExportName"
+    >
+  > &
+    Required<
+      Pick<
+        StreamPluginOptions,
+        "moduleBase" | "moduleBasePath" | "moduleBaseURL" | "projectRoot"
+      >
+    > &
+    Pick<StreamPluginOptions, "workerPath">,
+  server: ViteDevServer,
+  clientComponents: Map<string, string>
+): RequestHandler {
+  const worker = new Worker(
+    options?.workerPath
+      ? resolve(server.config.root, options?.workerPath)
+      : resolve(__dirname, "..", DEFAULT_CONFIG.WORKER_PATH),
+    {
+      env: {
+        NODE_OPTIONS: "--conditions ''",
+        VITE_LOADER_PATH: resolve(
+          server.config.cacheDir,
+          "react-stream/worker/loader.js"
+        ),
+      },
+    }
+  );
+
+  return async function handleSsrRequest(req, res, next) {
+    if (
+      !req.url ||
+      req.url.startsWith("/@") ||
+      (req.url.includes(".") && !req.url.endsWith(".html"))
+    ) {
+      return next();
+    }
+
+    try {
+      const result = await createHandler(
+        req.url ?? "",
+        {
+          Page: options.Page,
+          props: options.props,
+          build: options.build,
+          Html: options.Html,
+          pageExportName: options.pageExportName,
+          propsExportName: options.propsExportName,
+          moduleBase: options.moduleBase,
+          moduleBasePath: options.moduleBasePath,
+          projectRoot: server.config.root,
+        },
+        {
+          loader: server.ssrLoadModule.bind(server),
+          moduleGraph: server.moduleGraph,
+        }
+      );
+      const moduleBasePath = join(
+        server.config.cacheDir,
+        options.moduleBasePath
+      );
+      const htmlOutputPath = join(
+        server.config.cacheDir,
+        server.config.build.outDir,
+        req.url,
+        "index.html"
+      );
+      if (result.type !== "success") {
+        throw new Error(
+          result.type === "error" ? String(result.error) : "Skipped"
+        );
+      }
+
+      // Collect RSC stream data
+      const rscData = await new Promise<string>((resolve, reject) => {
+        let data = "";
+        if (!result.stream) {
+          resolve(data);
+          return;
+        }
+        const writable = new Writable({
+          write(chunk, _, callback) {
+            data += chunk;
+            callback();
+          },
+          final(callback) {
+            resolve(data);
+            callback();
+          },
+        });
+
+        result.stream.pipe(writable);
+        writable.on("error", reject);
+      });
+
+      // Get HTML from worker
+      const html = await new Promise<string>((resolve, reject) => {
+        worker.postMessage({
+          type: "RSC_CHUNK",
+          id: req.url ?? "/",
+          chunk: rscData,
+          moduleBasePath,
+          moduleBaseURL: options.moduleBaseURL,
+          // Don't need file paths in dev mode
+          outDir: "",
+          htmlOutputPath: "",
+          pipableStreamOptions: {
+            bootstrapModules: ["/dist/client.js"],
+          },
+        } satisfies WorkerRscChunkMessage);
+
+        worker.once("message", (msg) => {
+          if (msg.type === "ERROR") {
+            const message =
+              msg.error instanceof Error
+                ? msg.error.message
+                : String(msg.error);
+            reject(new Error(message, { cause: msg }));
+          } else if (msg.type === "HTML") {
+            // In dev, content will be the HTML string
+            resolve(msg.content);
+          }
+        });
+      });
+
+      res.setHeader("Content-Type", "text/html");
+      res.end(html);
+    } catch (error) {
+      next(error);
+    }
+  };
+}