vite-plugin-react-server 1.1.9 → 1.1.11

package/plugin/react-static/configurePreviewServer.ts

@@ -1,10 +1,14 @@
 import type { PreviewServer } from "vite";
-import { MIME_TYPES } from "../config/mimeTypes.js";
 import type { ResolvedUserOptions } from "../types.js";
 import { join } from "node:path";
 import { createReadStream } from "node:fs";
 import { stat } from "node:fs/promises";
 import { pipeline } from "node:stream/promises";
+import { requestInfo } from "../helpers/requestInfo.js";
+
+interface StreamError extends Error {
+  code?: string;
+}
 
 export async function configurePreviewServer({
   server,
@@ -13,77 +17,86 @@ export async function configurePreviewServer({
   server: PreviewServer;
   userOptions: ResolvedUserOptions;
 }) {
-  const staticHostDir = join(userOptions.projectRoot, userOptions.build.outDir, userOptions.build.static);
+  const staticHostDir = join(
+    userOptions.projectRoot,
+    userOptions.build.outDir,
+    userOptions.build.static
+  );
   server.middlewares.use(async (req, res, next) => {
-    if(!req.url) {
-      console.log("no url")
+    if (!req.url) {
       return next();
     }
-    const [withoutQuery] = req.url.split("?");
-    const [, value] = userOptions.normalizer(withoutQuery);
-    const ext = value.slice(value.lastIndexOf("."));
-    // handle index.html
-    const isHtml = userOptions.autoDiscover.htmlPattern(value)
-    if (isHtml || (req.headers.accept?.includes("text/html"))) {
-      const indexHtml = isHtml ? join(staticHostDir, value) : join(staticHostDir, value, userOptions.build.htmlOutputPath);
-      try {
-        const stats = await stat(indexHtml);
-        if (stats.isFile()) {
-          res.setHeader("Content-Type", "text/html; charset=utf-8");
-          await pipeline(createReadStream(indexHtml), res);
-          return;
-        }
-      } catch {
-        // File doesn't exist, continue to next middleware
-      }
-    } 
-    const isRsc = userOptions.autoDiscover.rscPattern(value)
-    if (isRsc || (req.headers.accept?.includes("text/x-component"))) {
-      const rsc = isRsc ? join(staticHostDir, value) : join(staticHostDir, value, userOptions.build.rscOutputPath);
-      try {
-        const stats = await stat(rsc);
-        if (stats.isFile()) {
-          res.setHeader("Content-Type", "text/x-component; charset=utf-8");
-          await pipeline(createReadStream(rsc), res);
-          return;
-        }
-      } catch {
-        // File doesn't exist, continue to next middleware
-      }
-    }
-    const isCss = userOptions.autoDiscover.cssPattern(value)
-    if (isCss || (req.headers.accept?.includes("text/css") && (ext === ""))) {
-      const css = isCss ? join(staticHostDir, value) : join(staticHostDir, value);
-      try {
-        const stats = await stat(css);
-        if (stats.isFile()) {
-          res.setHeader("Content-Type", "text/css; charset=utf-8");
-          await pipeline(createReadStream(css), res);
-          return;
-        }
-      } catch {
-        // File doesn't exist, continue to next middleware
-      }
-    }
+    const { contentType, filePath } = requestInfo(req, userOptions, staticHostDir);
+    
     // Handle static files including CSS
-    if (ext) {
-      const filePath = join(staticHostDir, value);
+    if (filePath) {
       try {
         const stats = await stat(filePath);
         if (stats.isFile()) {
-          // Set proper MIME type based on file extension
-          const contentType = MIME_TYPES[ext];
-          // Ensure CSS files are served with the correct MIME type
-          if (contentType) {
-            res.setHeader("Content-Type", `${contentType}; charset=utf-8`);
-          } else {
-            res.setHeader("Content-Type", "application/octet-stream");
+          res.setHeader("Content-Type", contentType);
+          
+          // Create abort controller for the stream
+          const controller = new AbortController();
+          const { signal } = controller;
+
+          // Check if response is still writable before streaming
+          if (!res.writable) {
+            res.statusCode = 499;
+            res.end("Client closed request");
+            return;
+          }
+
+          try {
+            const readStream = createReadStream(filePath);
+            readStream.on('error', () => {
+              if (!res.writable) {
+                controller.abort();
+              }
+            });
+            await pipeline(readStream, res, { signal });
+          } catch (error) {
+            const streamError = error as StreamError;
+            // Handle different error cases
+            if (streamError.code === 'ERR_STREAM_PREMATURE_CLOSE' || 
+                streamError.name === 'AbortError') {
+              // Client closed the connection
+              if (res.writable) {
+                res.statusCode = 499;
+                res.end("Client closed request");
+              }
+            } else if (streamError.code === 'ENOENT') {
+              // File not found
+              res.statusCode = 404;
+              server.config.logger.error(`File not found: ${filePath}. ${streamError.message}`, {
+                error: streamError,
+              });
+              res.end("File not found");
+            } else {
+              // Server error
+              server.config.logger.error(`Error loading file: ${filePath}. ${streamError.message}`, {
+                error: streamError,
+              });
+              res.statusCode = 500;
+              res.end("Internal server error");
+            }
+            return;
           }
-          await pipeline(createReadStream(filePath), res);
           return;
         }
-      } catch {
-        // File doesn't exist, continue to next middleware
+      } catch (error) {
+        const err = error as Error;
+        // Handle file system errors
+        if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+          res.statusCode = 404;
+          res.end("File not found");
+        } else {
+          server.config.logger.error(`Error loading file: ${filePath}.`, {
+            error: err,
+          });
+          res.statusCode = 500;
+          res.end("Internal server error");
+        }
+        return;
       }
     }
     next();

package/plugin/react-static/fileWriter.ts

@@ -13,7 +13,7 @@ import type { FileWriterOptions } from "../types.js";
 import { join } from "node:path";
 import { createWriteStream } from "node:fs";
 import { mkdir } from "node:fs/promises";
-import { Readable, Transform } from "node:stream";
+import { type Readable, Transform } from "node:stream";
 
 /**
  * Writes HTML and RSC files for a route using streams

package/plugin/react-static/plugin.ts

@@ -39,7 +39,7 @@ import { type StreamPluginOptions } from "../types.js";
 import { renderPages } from "./renderPages.js";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
 import { createWorker } from "../worker/createWorker.js";
-import { resolveAutoDiscover } from "../config/resolveAutoDiscover.js";
+import { resolveAutoDiscover } from "../config/autoDiscover/resolveAutoDiscover.js";
 import { getCondition } from "../config/getCondition.js";
 import {
   serializedOptions,
@@ -49,6 +49,8 @@ import { collectManifestCss } from "../helpers/collectManifestCss.js";
 import { createCssProps } from "../helpers/createCssProps.js";
 import { tryManifest } from "../helpers/tryManifest.js";
 import { performance } from "node:perf_hooks";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { baseURL } from "../utils/envUrls.node.js";
 
 if (getCondition() !== "react-server") {
   throw new Error(
@@ -64,7 +66,6 @@ let userOptions: ResolvedUserOptions;
 let autoDiscoveredFiles: AutoDiscoveredFiles | null = null;
 let serverManifest: Manifest | undefined = undefined;
 let buildLoader: Awaited<ReturnType<typeof createBuildLoader>> | undefined;
-
 export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
   meta: ReactStreamPluginMeta;
 }> {
@@ -92,7 +93,6 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
       if (config.root && config.root !== userOptions.projectRoot) {
         userOptions.projectRoot = config.root;
       }
-
       const autoDiscoverResult = await resolveAutoDiscover({
         config,
         configEnv,
@@ -103,7 +103,6 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         throw autoDiscoverResult.error;
       }
       autoDiscoveredFiles = autoDiscoverResult.autoDiscoveredFiles;
-
       const resolvedConfig = resolveUserConfig({
         condition: "react-server",
         config,
@@ -121,7 +120,6 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
     configResolved(config) {
       resolvedConfig = config;
     },
-
     async buildStart() {
       timing.buildStart = Date.now();
       if (userOptions.onEvent && autoDiscoveredFiles) {
@@ -136,10 +134,21 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
     },
 
     async renderStart() {
+      
       timing.renderStart = Date.now();
     },
 
     async writeBundle(options, bundle) {
+      if (userOptions.onEvent) {
+        userOptions.onEvent({
+          type: "build.writeBundle.static-server",
+          data: {
+            pages: Array.from(autoDiscoveredFiles?.urlMap.keys() ?? []),
+            options,
+            bundle,
+          },
+        });
+      }
       try {
         const bundleManifest = getBundleManifest<false>({
           bundle,
@@ -166,7 +175,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
           throw clientManifestResult.error;
         }
         const clientManifest = clientManifestResult.manifest;
-
+        
         buildLoader = await createBuildLoader(
           {
             userConfig,
@@ -266,34 +275,12 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
           cssFilesByPage.set(url, pageCssMap);
         }
 
-        if (userOptions.onEvent) {
-          userOptions.onEvent({
-            type: "build.writeBundle",
-            data: {
-              pages: Array.from(autoDiscoveredFiles?.urlMap.keys() ?? []),
-              options,
-              bundle,
-              manifest: serverManifest,
-            },
-          });
-        }
         const staticManifest = autoDiscoveredFiles?.staticManifest ?? {};
         const indexHtml = staticManifest?.["index.html"]?.file;
-        const safeParseURL = (() => {
-          try {
-            return new URL(join(userOptions.moduleBasePath, indexHtml), userOptions.moduleBaseURL).href;
-          } catch (error) {
-            return userOptions.moduleBaseURL + join(userOptions.moduleBasePath, indexHtml);
-          }
-        })();
         const pipeableStreamOptions = {
           ...userOptions.pipeableStreamOptions,
           bootstrapModules: [
-            ...(safeParseURL
-              ? [
-                  safeParseURL,
-                ]
-              : []),
+            ...(indexHtml ? [baseURL(indexHtml)] : []),
             ...(userOptions.pipeableStreamOptions?.bootstrapModules ?? []),
           ],
         };
@@ -309,7 +296,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
               ? resolvedConfig.envPrefix
               : Array.isArray(resolvedConfig.envPrefix)
               ? resolvedConfig.envPrefix[0]
-              : "VITE_";
+              : DEFAULT_CONFIG.ENV_PREFIX;
           const routeCount = autoDiscoveredFiles?.urlMap.size ?? 0;
           const maxListeners = routeCount + 1;
           const workerResult = await createWorker({
@@ -319,6 +306,7 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
             reverseCondition: "react-client",
             maxListeners: maxListeners,
             envPrefix: viteEnvPrefix,
+            logger: this.environment.logger,
             workerData: {
               resolvedConfig: serializeResolvedConfig(resolvedConfig),
               userOptions: {
@@ -390,6 +378,11 @@ export function reactStaticPlugin(options: StreamPluginOptions): VitePlugin<{
         this.environment.logger.info(
           `Rendered ${finalResult.completedRoutes.size} unique routes in ${finalResult.streamMetrics.duration}ms`
         );
+        if(process.env['NODE_ENV'] !== 'production') {
+          this.environment.logger.warn(
+            `THIS IS BUILD IS NOT INTENDED FOR PRODUCTION (${process.env['NODE_ENV']})`
+          );
+        }
 
         // Update timing
         timing.render = Date.now() - (timing.renderStart ?? timing.start);

package/plugin/root.ts

@@ -1,4 +1,10 @@
 import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 export const pluginRoot = dirname(fileURLToPath(import.meta.url));
-export const isLinked = !import.meta.url.startsWith(process.cwd());
+export const userProjectRoot =
+  process.argv
+    .find((arg) => arg.includes("node_modules"))
+    ?.match(/^(.+?)\/node_modules\/.+$/)?.[1] ||
+  process.env["npm_config_local_prefix"] ||
+  process.cwd();
+export const isLinked = !pluginRoot.startsWith(userProjectRoot);

package/plugin/transformer/plugin.client.ts

@@ -37,15 +37,7 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
   if (resolvedOptionsResult.type === "error") throw resolvedOptionsResult.error;
   userOptions = resolvedOptionsResult.userOptions;
   let staticManifest: Manifest;
-  const getID = (id: string) => {
-    if(userOptions.moduleBasePath !== '' && !id.startsWith(userOptions.moduleBasePath)) {
-      id = join(userOptions.moduleBasePath, id);
-    }
-    if(!id.startsWith('/')) {
-      id = '/' + id;
-    }
-    return id;
-  }
+
   return {
     name: "vite:react-server-action-transform",
     enforce: "pre",
@@ -80,11 +72,11 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
       if (isClient) {
         return null;
       }
+      const [key, value] = userOptions.normalizer(id);
       if (isServer && isBuild) {
-        const [key] = userOptions.normalizer(id);
         id = key + ".js";
       }
-      const finalID = getID(id);
+      const finalID = userOptions.moduleID(value);
       const transformed = await transformModuleIfNeeded(code, finalID, null);
       if (!transformed) return null;
       return {
@@ -98,7 +90,7 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
       if (!chunk.fileName.includes(".client")) return null;
 
       // Get the original file name without extension
-      const originalName = chunk.fileName.replace(".js", "");
+      const originalName = chunk.fileName.replace(userOptions.autoDiscover.moduleExtension, "");
 
       // Find matching entry in static manifest
       const manifestEntry = Object.entries(staticManifest).find(([_, info]) =>

package/plugin/transformer/plugin.server.ts

@@ -38,42 +38,34 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
 
   let staticManifest: Manifest;
 
-  const getID = (id: string) => {
-    if(userOptions.moduleBasePath !== '' && !id.startsWith(userOptions.moduleBasePath)) {
-      id = join(userOptions.moduleBasePath, id);
-    }
-    if(!id.startsWith('/')) {
-      id = '/' + id;
-    }
-    return id;
-  }
   return {
     name: "vite:react-server-transform",
     enforce: "pre", // Run before Vite's transforms
-    async config(_, configEnv) {
+    async config(_config, configEnv) {
       isBuild = configEnv.command !== "serve";
-      const staticManifestResult = await tryManifest({
-        root: userOptions.projectRoot,
-        ssrManifest: false,
-        outDir: join(userOptions.build.outDir, userOptions.build.static),
-      });
-      if (staticManifestResult.type === "error") {
-        console.error(staticManifestResult.error);
-        throw staticManifestResult.error;
+      if (isBuild) {
+        const staticManifestResult = await tryManifest({
+          root: userOptions.projectRoot,
+          ssrManifest: false,
+          outDir: join(userOptions.build.outDir, userOptions.build.static),
+        });
+        if (staticManifestResult.type === "error") {
+          throw staticManifestResult.error;
+        }
+        staticManifest = staticManifestResult.manifest;
       }
-      staticManifest = staticManifestResult.manifest;
     },
     async transform(code, id, options) {
       const ssr = options?.ssr;
       if (!ssr) return null;
       if (!userOptions.autoDiscover.modulePattern(id)) return null;
       if (!code.match('"use client"')) return null;
-    
+
+      const [key, value] = userOptions.normalizer(id);
       if (isBuild) {
-        const [key, value] = userOptions.normalizer(id);
         if (staticManifest) {
           if (value in staticManifest) {
-            id = staticManifest[value].file
+            id = userOptions.moduleID(staticManifest[value].file);
           } else {
             const hash = this.emitFile({
               id,
@@ -84,16 +76,17 @@ export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
             // get fileName from hash
 
             const fileName = this.getFileName(hash);
-            id = fileName;
+            id = userOptions.moduleID(fileName);
           }
         } else {
           throw new Error(`Client manifest not found.`);
         }
+      } else {
+        id = join(userOptions.moduleBasePath, value);
       }
-      const finalID = getID(id);
       const transformed = await transformModuleIfNeeded(
         code,
-        finalID,
+        id,
         // Pass null for nextLoad since we don't need module loading in the plugin
         null
       );

package/plugin/transformer/upgradeCssModuleCode.ts

@@ -1,42 +1,42 @@
-/**
- * Upgrades CSS module code to track class usage.
- * 
- * This function modifies the CSS module exports to track which classes are actually used.
- * It adds a proxy around the exports that records class usage in a global Set.
- * 
- * @param code The original CSS module code from Vite
- * @returns The upgraded CSS module code with tracking
- */
-export function upgradeCssModuleCode(code: string): string {
-  // Check if this is a CSS module export
-  if (code.includes('export default')) {
-    // Add tracking code to the CSS module exports
-    return code.replace(
-      /export default ({[\s\S]*?})/,
-      (_match: string, exports: string) => {
-        return `
-          const originalExports = ${exports};
-          const trackedExports = {};
+// /**
+//  * Upgrades CSS module code to track class usage.
+//  * 
+//  * This function modifies the CSS module exports to track which classes are actually used.
+//  * It adds a proxy around the exports that records class usage in a global Set.
+//  * 
+//  * @param code The original CSS module code from Vite
+//  * @returns The upgraded CSS module code with tracking
+//  */
+// export function upgradeCssModuleCode(code: string): string {
+//   // Check if this is a CSS module export
+//   if (code.includes('export default')) {
+//     // Add tracking code to the CSS module exports
+//     return code.replace(
+//       /export default ({[\s\S]*?})/,
+//       (_match: string, exports: string) => {
+//         return `
+//           const originalExports = ${exports};
+//           const trackedExports = {};
           
-          // Create a proxy to track class usage
-          Object.keys(originalExports).forEach(key => {
-            Object.defineProperty(trackedExports, key, {
-              get: function() {
-                // Track that this class was used
-                if (typeof window !== 'undefined') {
-                  window.__cssModuleClassesUsed = window.__cssModuleClassesUsed || new Set();
-                  window.__cssModuleClassesUsed.add(key);
-                }
-                return originalExports[key];
-              }
-            });
-          });
+//           // Create a proxy to track class usage
+//           Object.keys(originalExports).forEach(key => {
+//             Object.defineProperty(trackedExports, key, {
+//               get: function() {
+//                 // Track that this class was used
+//                 if (typeof window !== 'undefined') {
+//                   window.__cssModuleClassesUsed = window.__cssModuleClassesUsed || new Set();
+//                   window.__cssModuleClassesUsed.add(key);
+//                 }
+//                 return originalExports[key];
+//               }
+//             });
+//           });
           
-          export default trackedExports;
-        `;
-      }
-    );
-  }
+//           export default trackedExports;
+//         `;
+//       }
+//     );
+//   }
   
-  return code;
-} 
+//   return code;
+// } 

package/plugin/types/env.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface ImportMetaEnv {
+    readonly PUBLIC_ORIGIN: string;
+  }
+}
+
+export {};