vite-plugin-react-server 0.1.0

package/dist/worker/renderPages.js

@@ -0,0 +1,99 @@
+import { resolve, join } from "node:path";
+import { Transform } from "node:stream";
+import { createHandler } from "../react-server/createHandler.js";
+async function renderPages(routes, options) {
+  const destinationRoot = resolve(
+    options.pluginOptions.projectRoot,
+    options.outDir
+  );
+  const failedRoutes = /* @__PURE__ */ new Map();
+  const moduleBasePath = join(
+    destinationRoot,
+    options.pluginOptions.moduleBasePath
+  );
+  const moduleBaseURL = options.pluginOptions.moduleBaseURL;
+  const htmlRoot = resolve(
+    options.pluginOptions.projectRoot,
+    options.pluginOptions.build?.client ?? options.outDir
+  );
+  const filesOutputted = [];
+  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((resolve2) => {
+              options.worker.removeAllListeners();
+              options.worker.terminate();
+              resolve2();
+            })
+          );
+        }
+        break;
+    }
+  });
+  const pipableStreamOptions = options.pipableStreamOptions ?? {};
+  const renderPromises = routes.map(async (route) => {
+    try {
+      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");
+      await new Promise((resolve2, reject) => {
+        const transform = new Transform({
+          transform(chunk, _encoding, callback) {
+            options.worker.postMessage({
+              type: "RSC_CHUNK",
+              id: route,
+              chunk,
+              moduleBasePath,
+              moduleBaseURL,
+              htmlOutputPath,
+              outDir: options.outDir,
+              pipableStreamOptions
+            });
+            callback();
+          },
+          flush(callback) {
+            options.worker.postMessage({
+              type: "RSC_END",
+              id: route
+            });
+            callback();
+          }
+        });
+        const messageHandler = (msg) => {
+          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);
+              resolve2();
+            }
+          }
+        };
+        options.worker.on("message", messageHandler);
+        result.stream?.pipe(transform);
+      });
+    } catch (error) {
+      failedRoutes.set(route, error);
+    }
+  });
+  await Promise.all(renderPromises);
+  if (failedRoutes.size > 0) {
+    console.error("[vite-react-stream] Failed routes:", failedRoutes);
+  }
+}
+export {
+  renderPages
+};
+//# sourceMappingURL=renderPages.js.map

package/dist/worker/renderPages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderPages.js","sources":["../../src/worker/renderPages.ts"],"sourcesContent":["import { join, resolve as resolvePath } from \"node:path\";\nimport { Transform } from \"node:stream\";\nimport type { Worker } from \"node:worker_threads\";\nimport type { PipeableStreamOptions } from \"react-dom/server.node\";\nimport { createHandler } from \"../react-server/createHandler.js\";\nimport type { StreamPluginOptions } from \"../types.js\";\nimport type {\n  WorkerRscChunkMessage,\n  WorkerRscEndMessage,\n} from \"./types.js\";\n\ntype RenderPagesOptions = {\n  pluginOptions: Required<\n    Pick<\n      StreamPluginOptions,\n      \"moduleBase\" | \"moduleBasePath\" | \"moduleBaseURL\" | \"projectRoot\"\n    >\n  > &\n    Pick<\n      StreamPluginOptions,\n      \"Page\" | \"props\" | \"build\" | \"Html\" | \"pageExportName\" | \"propsExportName\"\n    >;\n  outDir: string;\n  manifest: Record<string, { file: string }>;\n  worker: Worker;\n  pipableStreamOptions?: PipeableStreamOptions;\n  loader: (id: string) => Promise<Record<string, any>>;\n  onCssFile?: (path: string) => void;\n  clientCss?: string[];\n};\n\nexport async function renderPages(\n  routes: string[],\n  options: RenderPagesOptions\n) {\n  const destinationRoot = resolvePath(\n    options.pluginOptions.projectRoot,\n    options.outDir\n  );\n  const failedRoutes = new Map<string, Error>();\n  const moduleBasePath = join(\n    destinationRoot,\n    options.pluginOptions.moduleBasePath\n  );\n  const moduleBaseURL = options.pluginOptions.moduleBaseURL;\n\n  const htmlRoot = resolvePath(\n    options.pluginOptions.projectRoot,\n    options.pluginOptions.build?.client ?? options.outDir\n  );\n  const filesOutputted: string[] = [];\n\n  options.worker.on(\"message\", (msg) => {\n    switch (msg.type) {\n      case \"ERROR\":\n        console.error(\"[RenderPages] Worker error:\", msg.error);\n        break;\n      case \"HTML\":\n        filesOutputted.push(msg.outputPath);\n        if (filesOutputted.length === routes.length) {\n          renderPromises.push(\n            new Promise<void>((resolve) => {\n              options.worker.removeAllListeners();\n              options.worker.terminate();\n              resolve();\n            })\n          );\n        }\n        break;\n      default:\n        break;\n    }\n  });\n  const pipableStreamOptions = options.pipableStreamOptions ?? {};\n\n  // Create promises for each route in the batch\n  const renderPromises = routes.map(async (route) => {\n    try {\n      // Wait for handler creation\n      const result = await createHandler(route, options.pluginOptions, {\n        loader: options.loader,\n        manifest: options.manifest,\n      });\n\n      if (result.type !== \"success\") {\n        return;\n      }\n      const htmlOutputPath = join(htmlRoot, route, \"index.html\");\n\n      // Create a promise that resolves when the worker completes\n      await new Promise<void>((resolve, reject) => {\n        // Pipe RSC stream to worker\n        const transform = new Transform({\n          transform(chunk, _encoding, callback) {\n            // Send raw chunk\n            options.worker.postMessage({\n              type: \"RSC_CHUNK\",\n              id: route,\n              chunk: chunk,\n              moduleBasePath,\n              moduleBaseURL,\n              htmlOutputPath: htmlOutputPath,\n              outDir: options.outDir,\n              pipableStreamOptions,\n            } satisfies WorkerRscChunkMessage);\n            callback();\n          },\n          flush(callback) {\n            options.worker.postMessage({\n              type: \"RSC_END\",\n              id: route,\n            } satisfies WorkerRscEndMessage);\n            callback();\n          },\n        });\n\n        // Listen for worker response for this route\n        const messageHandler = (msg: any) => {\n          if (msg.route === route) {\n            if (msg.type === \"ERROR\") {\n              options.worker.removeListener(\"message\", messageHandler);\n              reject(new Error(msg.error));\n            } else if (msg.type === \"HTML\") {\n              options.worker.removeListener(\"message\", messageHandler);\n              resolve();\n            }\n          }\n        };\n\n        options.worker.on(\"message\", messageHandler);\n        result.stream?.pipe(transform);\n      });\n    } catch (error) {\n      failedRoutes.set(route, error as Error);\n    }\n  });\n\n  // Wait for all routes to complete\n  await Promise.all(renderPromises);\n\n  if (failedRoutes.size > 0) {\n    console.error(\"[vite-react-stream] Failed routes:\", failedRoutes);\n  }\n}\n"],"names":["resolvePath","resolve"],"mappings":";;;AA+BsB,eAAA,YACpB,QACA,SACA;AACA,QAAM,kBAAkBA;AAAAA,IACtB,QAAQ,cAAc;AAAA,IACtB,QAAQ;AAAA,EACV;AACM,QAAA,mCAAmB,IAAmB;AAC5C,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA,QAAQ,cAAc;AAAA,EACxB;AACM,QAAA,gBAAgB,QAAQ,cAAc;AAE5C,QAAM,WAAWA;AAAAA,IACf,QAAQ,cAAc;AAAA,IACtB,QAAQ,cAAc,OAAO,UAAU,QAAQ;AAAA,EACjD;AACA,QAAM,iBAA2B,CAAC;AAElC,UAAQ,OAAO,GAAG,WAAW,CAAC,QAAQ;AACpC,YAAQ,IAAI,MAAM;AAAA,MAChB,KAAK;AACK,gBAAA,MAAM,+BAA+B,IAAI,KAAK;AACtD;AAAA,MACF,KAAK;AACY,uBAAA,KAAK,IAAI,UAAU;AAC9B,YAAA,eAAe,WAAW,OAAO,QAAQ;AAC5B,yBAAA;AAAA,YACb,IAAI,QAAc,CAACC,aAAY;AAC7B,sBAAQ,OAAO,mBAAmB;AAClC,sBAAQ,OAAO,UAAU;AACjB,cAAAA,SAAA;AAAA,YACT,CAAA;AAAA,UACH;AAAA,QAAA;AAEF;AAAA,IAEA;AAAA,EACJ,CACD;AACK,QAAA,uBAAuB,QAAQ,wBAAwB,CAAC;AAG9D,QAAM,iBAAiB,OAAO,IAAI,OAAO,UAAU;AAC7C,QAAA;AAEF,YAAM,SAAS,MAAM,cAAc,OAAO,QAAQ,eAAe;AAAA,QAC/D,QAAQ,QAAQ;AAAA,QAChB,UAAU,QAAQ;AAAA,MAAA,CACnB;AAEG,UAAA,OAAO,SAAS,WAAW;AAC7B;AAAA,MAAA;AAEF,YAAM,iBAAiB,KAAK,UAAU,OAAO,YAAY;AAGzD,YAAM,IAAI,QAAc,CAACA,UAAS,WAAW;AAErC,cAAA,YAAY,IAAI,UAAU;AAAA,UAC9B,UAAU,OAAO,WAAW,UAAU;AAEpC,oBAAQ,OAAO,YAAY;AAAA,cACzB,MAAM;AAAA,cACN,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,QAAQ,QAAQ;AAAA,cAChB;AAAA,YAAA,CAC+B;AACxB,qBAAA;AAAA,UACX;AAAA,UACA,MAAM,UAAU;AACd,oBAAQ,OAAO,YAAY;AAAA,cACzB,MAAM;AAAA,cACN,IAAI;AAAA,YAAA,CACyB;AACtB,qBAAA;AAAA,UAAA;AAAA,QACX,CACD;AAGK,cAAA,iBAAiB,CAAC,QAAa;AAC/B,cAAA,IAAI,UAAU,OAAO;AACnB,gBAAA,IAAI,SAAS,SAAS;AAChB,sBAAA,OAAO,eAAe,WAAW,cAAc;AACvD,qBAAO,IAAI,MAAM,IAAI,KAAK,CAAC;AAAA,YAAA,WAClB,IAAI,SAAS,QAAQ;AACtB,sBAAA,OAAO,eAAe,WAAW,cAAc;AAC/C,cAAAA,SAAA;AAAA,YAAA;AAAA,UACV;AAAA,QAEJ;AAEQ,gBAAA,OAAO,GAAG,WAAW,cAAc;AACpC,eAAA,QAAQ,KAAK,SAAS;AAAA,MAAA,CAC9B;AAAA,aACM,OAAO;AACD,mBAAA,IAAI,OAAO,KAAc;AAAA,IAAA;AAAA,EACxC,CACD;AAGK,QAAA,QAAQ,IAAI,cAAc;AAE5B,MAAA,aAAa,OAAO,GAAG;AACjB,YAAA,MAAM,sCAAsC,YAAY;AAAA,EAAA;AAEpE;"}

package/dist/worker/types.d.ts

@@ -0,0 +1,31 @@
+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;
+//# sourceMappingURL=types.d.ts.map

package/dist/worker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/worker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB,EAAE,qBAAqB,CAAC;CAC7C;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,WAAW,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,qBAAqB,CAAC;CAC7C;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,MAAM,MAAM,aAAa,GACrB,qBAAqB,GACrB,mBAAmB,GACnB,qBAAqB,CAAC"}

package/dist/worker/worker.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        href: string;
+    }
+}
+export {};
+//# sourceMappingURL=worker.d.ts.map

package/dist/worker/worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"worker.d.ts","sourceRoot":"","sources":["../../src/worker/worker.tsx"],"names":[],"mappings":"AAaA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,EAAE,MAAM,CAAC;KACd;CACF"}

package/package.json

@@ -0,0 +1,116 @@
+{
+    "name": "vite-plugin-react-server",
+    "version": "0.1.0",
+    "description": "Vite plugin for React Server Components (RSC)",
+    "type": "module",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "src",
+        "README.md",
+        "LICENSE",
+        "tsconfig.json"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "react-server": "./dist/react-server/plugin.js",
+            "default": "./dist/react-client/plugin.js"
+        },
+        "./client": {
+            "types": "./dist/react-client/plugin.d.ts",
+            "import": "./dist/react-client/plugin.js",
+            "default": "./dist/react-client/plugin.js"
+        },
+        "./server": {
+            "types": "./dist/react-server/plugin.d.ts",
+            "import": "./dist/react-server/plugin.js",
+            "react-server": "./dist/react-server/plugin.js",
+            "default": "./dist/react-server/plugin.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "typesVersions": {
+        "*": {
+            ".": [
+                "./dist/index.d.ts"
+            ],
+            "client": [
+                "./dist/react-client/plugin.d.ts"
+            ],
+            "server": [
+                "./dist/react-server/plugin.d.ts"
+            ]
+        }
+    },
+    "sideEffects": false,
+    "scripts": {
+        "build": "npm run clean && npm run build:types && npm run build:vite",
+        "build:types": "tsc --build --force",
+        "build:vite": "vite build",
+        "clean": "rm -rf dist",
+        "prepublishOnly": "npm run build",
+        "lint": "eslint ./src --fix",
+        "test:server": "NODE_OPTIONS='--conditions react-server' vitest run",
+        "test:client": "vitest run",
+        "test": "npm run test:client && npm run test:server",
+        "test:coverage": "vitest run --coverage",
+        "test:ui": "vitest --ui",
+        "copy-oss": "cp -r ./oss-experimental/* ./node_modules/",
+        "patch-oss": "npx patch-package react-server-dom-esm --exclude 'nothing' && npx patch-package react react-dom",
+        "apply-patch": "npm run copy-oss && npm run patch-oss",
+        "postinstall": "patch-package",
+        "publish": "npm run postinstall && npm run build && npm publish"
+    },
+    "keywords": [
+        "vite",
+        "vite-plugin",
+        "react",
+        "rsc",
+        "server-components"
+    ],
+    "author": "Nico Brinkkemper",
+    "license": "MIT",
+    "engines": {
+        "node": "^20.0.0 || >=21.0.0"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/nicobrinkkemper/vite-plugin-react-server.git"
+    },
+    "bugs": {
+        "url": "https://github.com/nicobrinkkemper/vite-plugin-react-server/issues"
+    },
+    "homepage": "https://github.com/nicobrinkkemper/vite-plugin-react-server#readme",
+    "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "vite": "^5.0.0"
+    },
+    "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        },
+        "react-dom": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@types/node": "^20.17.16",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
+        "acorn-loose": "^8.3.0",
+        "patch-package": "^8.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-server-dom-esm": "^0.0.1",
+        "source-map": "^0.7.4",
+        "typescript": "^5.7.3",
+        "vite": "^5.4.14",
+        "vitest": "^3.0.4",
+        "webpack-sources": "^3.2.0"
+    }
+}

package/src/build/createBuildConfig.ts

@@ -0,0 +1,74 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { InlineConfig } from "vite";
+import { DEFAULT_CONFIG } from "../options.js";
+import type { StreamPluginOptions } from "../types.js";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+type CreateBuildConfigOptions = {
+  root: string;
+  base: string;
+  outDir: string;
+  entries: string[];
+  options?: StreamPluginOptions;
+};
+
+export function createBuildConfig({
+  root,
+  base,
+  outDir,
+  entries,
+  options,
+}: CreateBuildConfigOptions) {
+  // Transform entries into proper input format with unique keys
+  const entryInputs = Object.fromEntries(
+    entries.map((entry) => {
+      // Get the path relative to root
+      const relativePath = entry.replace(root + "/", "");
+      // Create a unique key based on the full path
+      const key = relativePath.replace(/\.[^/.]+$/, ""); // Remove extension
+
+      return [key, entry];
+    })
+  );
+
+  const workerPath = options?.workerPath
+    ? resolve(root, options.workerPath)
+    : resolve(__dirname, "..", DEFAULT_CONFIG.WORKER_PATH);
+
+  const loaderPath = options?.loaderPath
+    ? resolve(root, options.loaderPath)
+    : resolve(__dirname, "..", DEFAULT_CONFIG.LOADER_PATH);
+
+  const config: InlineConfig = {
+    configFile: false,
+    root,
+    base,
+    build: {
+      target: "node18",
+      ssr: true,
+      ssrEmitAssets: false,
+      manifest: true,
+      ssrManifest: true,
+      outDir,
+      rollupOptions: {
+        input: {
+          ...entryInputs,
+          worker: workerPath,
+          loader: loaderPath,
+        },
+        output: {
+          format: "esm",
+          preserveModules: true,
+          hoistTransitiveImports: false,
+          esModule: true,
+          entryFileNames: "[name].js",
+          chunkFileNames: "[name].js",
+          assetFileNames: "[name][extname]",
+        },
+      },
+    },
+  };
+
+  return config;
+}

package/src/checkFilesExist.ts

@@ -0,0 +1,67 @@
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+import type { StreamPluginOptions } from "./types.js";
+
+export async function checkFilesExist(
+  pages: string[],
+  options: Pick<StreamPluginOptions, "Page" | "props">,
+  root: string
+) {
+  const errors: string[] = [];
+  const pageSet = new Set<string>();
+  const pageMap = new Map<string, string>();
+  // Check if files exist when string paths are provided
+  if (typeof options.Page === "string") {
+    const pagePath = resolve(root, options.Page);
+    pageMap.set(options.Page, pagePath);
+    if (!pageSet.has(pagePath)) {
+      if (!existsSync(pagePath)) {
+        errors.push(`Page file not found: ${pagePath}`);
+      }
+      pageSet.add(pagePath);
+    }
+  } else if (typeof options.Page === "function" && pages) {
+    for (const page of pages) {
+      const pagePath = options.Page(resolve(root, page));
+      pageMap.set(page, pagePath);
+      if (pageSet.has(pagePath)) {
+        continue;
+      }
+      if (!existsSync(pagePath)) {
+        errors.push(`Page file not found: ${pagePath}`);
+      }
+      pageSet.add(pagePath);
+    }
+  }
+
+  const propsSet = new Set<string>();
+  const propsMap = new Map<string, string>();
+  if (typeof options.props === "string") {
+    const propsPath = resolve(root, options.props);
+    propsMap.set(options.props, propsPath);
+    if (!propsSet.has(propsPath)) {
+      if (!existsSync(propsPath)) {
+        errors.push(`Props file not found: ${propsPath}`);
+      }
+      propsSet.add(propsPath);
+    }
+  } else if (typeof options.props === "function" && pages) {
+    for (const page of pages) {
+      const propsPath = options.props(resolve(root, page));
+      propsMap.set(page, propsPath);
+      if (propsSet.has(propsPath)) {
+        continue;
+      }
+      if (!existsSync(propsPath)) {
+        errors.push(`Props file not found: ${propsPath}`);
+      }
+      propsSet.add(propsPath);
+    }
+  }
+
+  if (errors.length) {
+    throw new Error("React Stream Plugin Validation:\n" + errors.join("\n"));
+  }
+
+  return { pageMap, pageSet, propsMap, propsSet };
+}

package/src/collect-css-manifest.ts

@@ -0,0 +1,76 @@
+import type { Manifest, ModuleGraph } from "vite";
+
+export async function collectModuleGraphCss(
+  moduleGraph: ModuleGraph,
+  pagePath: string
+) {
+  if (!pagePath) return new Map<string, string>();
+
+  const cssFiles = new Map<string, string>();
+  const pageModule = await moduleGraph.getModuleByUrl(pagePath, true);
+  if (!pageModule) {
+    return new Map<string, string>();
+  }
+  const seen = new Set<string>();
+  const walkModule = (mod: any) => {
+    if (!mod?.id || seen.has(mod.id)) return;
+    seen.add(mod.id);
+    if (mod?.id?.endsWith(".css")) {
+      cssFiles.set(mod?.url, mod?.id);
+    }
+    mod?.importedModules?.forEach((imp: any) => walkModule(imp));
+  };
+  walkModule(pageModule);
+  return cssFiles;
+}
+
+export function collectManifestCss(
+  manifest: Manifest,
+  root: string,
+  pagePath: string,
+  onCss?: (path: string) => void
+) {
+  const relativePagePath = pagePath.startsWith(root + "/")
+    ? pagePath.slice(root.length + 1)
+    : pagePath;
+  if (!relativePagePath) return new Map<string, string>();
+  const cssFiles = new Map<string, string>();
+  const seen = new Set<string>();
+
+  const walkManifestEntry = (id: string) => {
+    if (seen.has(id)) return;
+    seen.add(id);
+    if (id.endsWith(".css")) {
+      cssFiles.set(id, id);
+      onCss?.(id);
+      return;
+    }
+    // Get the manifest entry
+    const entry = manifest[id];
+    if (!entry) return;
+
+    // Add direct CSS
+    if (entry.css) {
+      entry.css.forEach((css: string) => {
+        cssFiles.set(entry.file, css);
+        onCss?.(css);
+      });
+    }
+
+    // Walk imports recursively
+    if (entry.imports) {
+      entry.imports.forEach((imp: string) => walkManifestEntry(imp));
+    }
+
+    // Also check dynamicImports
+    if (entry.dynamicImports) {
+      entry.dynamicImports.forEach((imp: string) => walkManifestEntry(imp));
+    }
+  };
+
+  if (manifest[relativePagePath]) {
+    walkManifestEntry(relativePagePath);
+  }
+
+  return cssFiles;
+}

package/src/components.tsx

@@ -0,0 +1,14 @@
+import { createElement } from 'react';
+
+/**
+ * A component that emits <link> tags for CSS files during streaming.
+ * The high precedence ensures they bubble up to the document head.
+ */
+export function CssCollector({ url }: { url: string }) {
+  return createElement('link', {
+    key: url,
+    rel: 'stylesheet',
+    href: url,
+    precedence: 'high'
+  });
+} 

package/src/copy-dir.ts

@@ -0,0 +1,27 @@
+import { copyFileSync, mkdirSync, readdirSync, statSync } from "node:fs";
+import { join } from "node:path";
+
+export async function copyDir(src: string, dest: string, options?: { 
+  filter?: (file: string) => boolean 
+}) {
+  const entries = readdirSync(src);
+
+  mkdirSync(dest, { recursive: true });
+
+  for (const entry of entries) {
+    const srcPath = join(src, entry);
+    const destPath = join(dest, entry);
+
+    const stat = statSync(srcPath);
+    
+    if (options?.filter && !options.filter(srcPath)) {
+      continue;
+    }
+
+    if (stat.isDirectory()) {
+      await copyDir(srcPath, destPath, options);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+} 

package/src/getEnv.ts

@@ -0,0 +1,135 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import type { ConfigEnv, UserConfig } from "vite";
+import { loadEnv } from "vite";
+import { DEFAULT_CONFIG } from "./options.js";
+
+/**
+ * Get environment variables for Vite, sets defaults to ensure the server can start with BASE_URL and PUBLIC_URL
+ *
+ * @param config - Vite configuration object
+ * @param { isPreview: boolean } - Object containing a boolean indicating if the environment is for preview
+ * @returns An object containing the environment variables
+ */
+export function getEnv(config: UserConfig, configEnv: ConfigEnv) {
+  const isLocal =
+    config.mode === "development"
+
+  const envName = isLocal
+    ? `${config.mode}.local`
+    : config.mode
+    ? config.mode
+    : "production";
+  const environmentName = config.mode ?? envName ?? "production";
+
+  const env = loadEnv(
+    environmentName,
+    config.envDir ?? config.root ?? process.cwd(),
+    config.envPrefix ?? DEFAULT_CONFIG.ENV_PREFIX ?? "VITE_"
+  );
+
+  // Get server config
+  const serverConfig = config.server || {};
+  const previewConfig = config.preview || {};
+  const host = configEnv.isPreview
+    ? previewConfig.host ?? DEFAULT_CONFIG.PREVIEW_HOST
+    : serverConfig.host ?? DEFAULT_CONFIG.DEV_HOST;
+  let previewPort = previewConfig.port ?? DEFAULT_CONFIG.PREVIEW_PORT;
+  let devPort = serverConfig.port ?? DEFAULT_CONFIG.DEV_PORT;
+
+  let homepage = env["VITE_BASE_URL"]
+  if (configEnv.command === "build" && (!homepage || homepage === "")) {
+    try {
+      const packageJson = JSON.parse(
+        readFileSync(resolve(config.root ?? "", "package.json"), "utf-8")
+      );
+      homepage = packageJson.homepage ?? "";
+      if (!homepage || homepage === "") {
+        console.warn(
+          "[RSC] 🔧 For production builds, please set 'homepage' in package.json, or set VITE_BASE_URL in your environment"
+        );
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  let baseUrl =
+    env["VITE_BASE_URL"] && env["VITE_PUBLIC_URL"] !== ""
+      ? env["VITE_BASE_URL"]
+      : configEnv.isPreview
+      ? `http://${host}:${previewPort}`
+      : configEnv.command === "serve"
+      ? `http://${host}:${devPort}`
+      : homepage;
+
+  let publicUrl =
+    env["VITE_PUBLIC_URL"] && env["VITE_PUBLIC_URL"] !== ""
+      ? env["VITE_PUBLIC_URL"]
+      : "";
+
+  // Determine port and host based on mode
+  const port = configEnv.isPreview
+    ? previewConfig.port || DEFAULT_CONFIG.PREVIEW_PORT // Preview server
+    : serverConfig.port || DEFAULT_CONFIG.DEV_PORT; // Dev server
+
+  // Build base URL
+  if (configEnv.isPreview && `http://${host}:${port}` !== baseUrl) {
+    console.log(
+      `VITE_BASE_URL: \"${baseUrl}\" wasn't configured correctly for this server, overriding to: \"http://${host}:${port}\"`
+    );
+    baseUrl = `http://${host}:${port}`;
+  }
+
+  const envPrefix =
+    typeof config.envPrefix === "string"
+      ? config.envPrefix
+      : Array.isArray(config.envPrefix)
+      ? config.envPrefix[0]
+      : DEFAULT_CONFIG.ENV_PREFIX;
+
+  const nodeProcessEnv = {
+    NODE_ENV: configEnv.command === "build" ? "production" : "development",
+  };
+  const defineProcess = Object.entries(nodeProcessEnv)
+    .map(([key, value]) => {
+      switch (key) {
+        case "NODE_ENV":
+          const isDev =
+            value === ""
+              ? configEnv.command === "build"
+                ? false
+                : true
+              : value === "development";
+          return [`import.meta.env.DEV`, JSON.stringify(isDev)];
+        default:
+          return null;
+      }
+    })
+    .filter(Array.isArray);
+
+  const defineImportMeta = Object.entries(env).map(([key, value]) => [
+    `import.meta.env.${key}`,
+    key === "VITE_BASE_URL"
+      ? value
+        ? JSON.stringify(value)
+        : JSON.stringify(baseUrl)
+      : key === "VITE_PUBLIC_URL"
+      ? value
+        ? JSON.stringify(value)
+        : JSON.stringify(publicUrl)
+      : JSON.stringify(value),
+  ]);
+  const define = Object.fromEntries([...defineProcess, ...defineImportMeta]);
+
+  return {
+    baseUrl,
+    publicUrl,
+    port,
+    host,
+    envPrefix,
+    environmentName,
+    env,
+    define,
+  };
+}