vite-plugin-react-server 0.3.12 → 0.3.14

package/plugin/react-server/plugin.ts

@@ -32,6 +32,7 @@ import { createHandler } from "./createHandler.js";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
 import type { ServerResponse } from "node:http";
+import { collectManifestCss } from "../collect-css-manifest.js";
 
 let resolvedConfig: ResolvedConfig | null = null;
 let serverManifestPath: string | null = null;
@@ -145,9 +146,7 @@ export function reactServerPlugin(
         );
       }
     },
-    async configurePreviewServer(server) {
-      
-    },
+    async configurePreviewServer(server) {},
     async configureServer(server: ViteDevServer) {
       if (typeof loader !== "function") {
         loader = server.ssrLoadModule;
@@ -166,7 +165,6 @@ export function reactServerPlugin(
         root = server.config.root;
       }
 
-
       const activeStreams = new Set<ServerResponse>();
 
       // Handle Vite server restarts
@@ -308,7 +306,9 @@ export function reactServerPlugin(
         // Create the loader
         if (typeof loader !== "function") {
           if (!Object.keys(serverManifest).length) {
-            console.warn("[vite-plugin-react-server] No server manifest found, the plugin will try to use the plugin context - it may differ from vite's manifest.");
+            console.warn(
+              "[vite-plugin-react-server] No server manifest found, the plugin will try to use the plugin context - it may differ from vite's manifest."
+            );
             serverManifest = getBundleManifest({
               pluginContext: this,
               bundle: outpuptBundle,
@@ -316,15 +316,22 @@ export function reactServerPlugin(
               preserveModulesRoot: userOptions.build.preserveModulesRoot,
             });
             if (!Object.keys(serverManifest).length) {
-              console.warn("[vite-plugin-react-server] That didn't work, retrying to read manifest.");
+              console.warn(
+                "[vite-plugin-react-server] That didn't work, retrying to read manifest."
+              );
               const resolvedServerManifest = tryManifest({
                 root: root,
-                outDir: join(userOptions.build.outDir, userOptions.build.server),
+                outDir: join(
+                  userOptions.build.outDir,
+                  userOptions.build.server
+                ),
                 ssrManifest: false,
               });
               if (resolvedServerManifest.type === "error") {
                 // dont build the static files without a server manifest
-                console.error("[vite-plugin-react-server] Failed to read manifest, aborting build.");
+                console.error(
+                  "[vite-plugin-react-server] Failed to read manifest, aborting build."
+                );
                 return;
               }
               serverManifest = resolvedServerManifest.manifest;
@@ -343,34 +350,73 @@ export function reactServerPlugin(
         if (resolvedPages.type === "error") {
           throw resolvedPages.error;
         }
+
+        const onCssFile = async (path: string, parentUrl: string) => {
+          if (buildCssFiles && path.endsWith(".css")) {
+            buildCssFiles.add(path);
+            if (parentUrl.endsWith(userOptions.build.client)) {
+              // copy the file to the client build dir
+              const serverPath = join(
+                userOptions.build.outDir,
+                userOptions.build.server,
+                path
+              );
+              await writeFile(
+                serverPath,
+                await readFile(
+                  join(
+                    root,
+                    userOptions.build.outDir,
+                    userOptions.build.client,
+                    path
+                  )
+                )
+              );
+            } else {
+              // copy the file to the client build dir, assume it's in server build dir
+              const clientPath = join(
+                userOptions.build.outDir,
+                userOptions.build.client,
+                path
+              );
+              await mkdir(dirname(clientPath), { recursive: true });
+              await writeFile(
+                clientPath,
+                await readFile(
+                  join(
+                    root,
+                    userOptions.build.outDir,
+                    userOptions.build.server,
+                    path
+                  )
+                )
+              );
+            }
+          }
+        };
+
         const { failedRoutes, completedRoutes } = await renderPages(
           this,
           resolvedPages.pages,
           files,
           {
-            pipableStreamOptions: {},
+            pipableStreamOptions: {
+              bootstrapModules: clientManifest["index.html"]?.file
+                ? [clientManifest["index.html"].file]
+                : [],
+            },
             moduleBasePath: "",
             moduleBaseURL: "",
-            clientCss:
-              Object.values(clientManifest)
-                .flatMap((entry) => entry.css)
-                .filter((css) => typeof css === "string")
-                .map((css) => "/" + css) ?? [],
+            clientCss: clientManifest["index.html"]?.css
+              ? clientManifest["index.html"].css
+              : [],
             userConfig,
             pluginOptions: userOptions,
             worker: worker,
             clientManifest: clientManifest,
             serverManifest: serverManifest,
             loader,
-            onCssFile: async (path: string) => {
-              if (buildCssFiles && path.endsWith(".css")) {
-                buildCssFiles.add(path);
-                // copy the file to the client build dir
-                const clientPath = join(userOptions.build.outDir, userOptions.build.client, path);
-                await mkdir(dirname(clientPath), { recursive: true });
-                await writeFile(clientPath, await readFile(join(root, userOptions.build.outDir, userOptions.build.server, path)));
-              }
-            },
+            onCssFile: onCssFile,
           }
         );
 

package/plugin/transformer/plugin.ts

@@ -99,7 +99,7 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
         return null
       }
       return {
-        code: transformed.replace(key, join(resolvedOptions.userOptions.build.client, clientPath)),
+        code: transformed.replace(key, clientPath),
         map: null,
       };
     },

package/plugin/types.ts

@@ -181,7 +181,7 @@ export interface CreateHandlerOptions<T = any> {
   serverManifest?: import("vite").Manifest;
   moduleGraph?: import("vite").ModuleGraph;
   cssFiles?: string[];
-  onCssFile?: (path: string) => void;
+  onCssFile?: (path: string, parentUrl: string) => void;
   logger?: import("vite").Logger;
   pipableStreamOptions?: PipeableStreamOptions;
 }

package/plugin/worker/html/renderPages.ts

@@ -41,7 +41,7 @@ type RenderPagesOptions = {
   worker: Worker;
   pipableStreamOptions?: PipeableStreamOptions;
   loader: (id: string) => Promise<Record<string, any>>;
-  onCssFile?: (path: string) => void;
+  onCssFile?: (url: string, parentUrl: string) => void;
   clientCss?: string[];
   moduleBasePath: string;
   moduleBaseURL: string;
@@ -51,14 +51,14 @@ export async function renderPages(
   pluginContext: PluginContext,
   routes: string[],
   files: CheckFilesExistReturn,
-  options: RenderPagesOptions
+  options: RenderPagesOptions,
 ) {
   const root = pluginContext.environment.config.root;
   const outDir = pluginContext.environment.config.build.outDir;
   const failedRoutes = new Map<string, Error>();
   const completedRoutes = new Set<string>();
   const writePromises = new Map<string, Promise<void>>();
-
+  const clientCss = options.clientCss ?? [];
   try {
     // Set up worker message handling
     const allRoutesComplete = new Promise<void>((resolve, reject) => {
@@ -92,6 +92,19 @@ export async function renderPages(
       });
     });
 
+    collectManifestCss(
+      options.clientManifest,
+      options.moduleBasePath,
+      'index.html',
+      (url, parentUrl)=>{
+        options?.onCssFile?.(url, parentUrl);
+        if(!clientCss.includes(url)){
+          clientCss.push(url);
+        }
+      },
+      join(root, options.pluginOptions.build.outDir, options.pluginOptions.build.client)
+    );
+
     // Process routes sequentially
     for (const route of routes) {
       const routeFiles = files.urlMap.get(route);
@@ -101,11 +114,16 @@ export async function renderPages(
         continue;
       }
 
-      const cssFiles = collectManifestCss(
+      collectManifestCss(
         options.serverManifest,
         options.moduleBasePath,
         routeFiles.page,
-        options.onCssFile
+        (url, parentUrl)=>{
+          options.onCssFile?.(url, parentUrl);
+          if(!clientCss.includes(url)){
+            clientCss.push(url);
+          }
+        }
       );
 
       // Create handler for pure RSC output
@@ -116,12 +134,12 @@ export async function renderPages(
         loader: options.loader,
         clientManifest: options.clientManifest,
         serverManifest: options.serverManifest,
+        cssFiles: clientCss,
         pipableStreamOptions: {
           ...options.pipableStreamOptions,
           importMap: {
             imports: {
               ...options.pipableStreamOptions?.importMap?.imports,
-              ...Object.fromEntries(Array.from(cssFiles.entries()))
             }
           }
         },
@@ -132,12 +150,12 @@ export async function renderPages(
         loader: options.loader,
         clientManifest: options.clientManifest,
         serverManifest: options.serverManifest,
+        cssFiles: clientCss,
         pipableStreamOptions: {
           ...options.pipableStreamOptions,
           importMap: {
             imports: {
-              ...options.pipableStreamOptions?.importMap?.imports,
-              ...Object.fromEntries(Array.from(cssFiles.entries()))
+              ...options.pipableStreamOptions?.importMap?.imports
             }
           }
         },
@@ -200,7 +218,7 @@ export async function renderPages(
                   type: "RSC_CHUNK",
                   id: route,
                   chunk: chunk.toString(),
-                  moduleRootPath: join(root, options.pluginOptions.build.outDir),
+                  moduleRootPath: join(root, options.pluginOptions.build.outDir, options.pluginOptions.build.client),
                   moduleBaseURL: options.moduleBaseURL,
                   htmlOutputPath: join(options.pluginOptions.build.outDir, options.pluginOptions.build.client, route, 'index.html'),
                   pipableStreamOptions: options.pipableStreamOptions,