vite-plugin-react-server 1.1.20 → 1.2.0-alpha.0

package/plugin/react-static/createBuildLoader.ts

@@ -1,7 +1,6 @@
 import { join } from "node:path";
 import type {
-  InlineCssOpt,
-  PagePropOpt,
+  BuildModuleLoader,
   ResolvedUserConfig,
   ResolvedUserOptions,
 } from "../../server.js";
@@ -10,17 +9,16 @@ import { getModuleRef } from "../helpers/moduleRefs.js";
 import type { OutputBundle } from "rollup";
 import { temporaryReferences } from "./temporaryReferences.js";
 import { toError } from "../error/toError.js";
+import { readFile, writeFile, unlink } from "fs/promises";
+import { existsSync } from "fs";
 
-export interface BuildLoaderOptions<
-  T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
-> {
+export type CreateBuildLoaderFn = (props: {
   userConfig: ResolvedUserConfig;
-  userOptions: ResolvedUserOptions<T, InlineCSS>;
+  userOptions: ResolvedUserOptions;
   serverManifest: Manifest;
   clientManifest: Manifest;
   staticManifest: Manifest;
-}
+}, bundle: OutputBundle) => BuildModuleLoader;
 
 /**
  * Creates a loader function for handling module resolution during build.
@@ -30,27 +28,27 @@ export interface BuildLoaderOptions<
  *  - For server components: Use server manifest and server.js
  *  - For static assets: Use static manifest
  */
-export async function createBuildLoader<
-  T extends PagePropOpt = PagePropOpt,
-  InlineCSS extends InlineCssOpt = InlineCssOpt
->(
+export const createBuildLoader: CreateBuildLoaderFn = function _createBuildLoader(
   {
     userOptions,
     serverManifest,
     clientManifest,
     staticManifest,
-  }: BuildLoaderOptions<T, InlineCSS>,
-  bundle: OutputBundle
+  },
+  bundle
 ) {
   const manifestKeys = Object.keys(serverManifest);
   if (!manifestKeys.length) {
     throw new Error("Server manifest is empty");
   }
 
-  return async function buildLoader(id: string) {
+  return async function buildLoader(id) {
+    if (userOptions.verbose) {
+      console.log("[buildLoader] id: ", id);
+    }
     const [withoutQuery, query] = id.split("?", 2);
-    const [normalizedKey, normalizedValue] =
-      userOptions.normalizer(withoutQuery);
+    const [moduleId, exportName] = withoutQuery.split("#", 2);
+    const [normalizedKey, normalizedValue] = userOptions.normalizer(moduleId);
     const moduleRef = getModuleRef(id);
 
     // Check if we have a temporary reference (cached module)
@@ -83,12 +81,14 @@ export async function createBuildLoader<
         if (serverChunk) {
           if (serverChunk.type === "asset") {
             // For CSS files, ensure we're in the React Server environment
-            if (userOptions.autoDiscover.jsonPattern(normalizedValue)) {
+            if (userOptions.autoDiscover.jsonPattern.test(normalizedValue)) {
               const jsonContent = serverChunk.source;
               if (typeof jsonContent === "string") {
                 return { default: JSON.parse(jsonContent) };
               }
-            } else if (userOptions.autoDiscover.cssPattern(normalizedValue)) {
+            } else if (
+              userOptions.autoDiscover.cssPattern.test(normalizedValue)
+            ) {
               const cssContent = serverChunk.source;
               if (typeof cssContent === "string") {
                 return { default: cssContent };
@@ -105,15 +105,14 @@ export async function createBuildLoader<
 
       // Determine if this is a client component
       const isClientComponent =
-        userOptions.autoDiscover.clientComponents(normalizedValue);
-      const isServerAction =
-        userOptions.autoDiscover.serverFunctions(normalizedValue);
-      const isPage = userOptions.autoDiscover.pagePattern(normalizedValue);
-      const isProps = userOptions.autoDiscover.propsPattern(normalizedValue);
+        userOptions.autoDiscover.clientPattern.test(normalizedValue);
 
       // For client components, use client manifest
       if (isClientComponent) {
         const clientEntry = clientManifest[normalizedValue];
+        if (userOptions.verbose) {
+          console.log("clientEntry", clientEntry);
+        }
         if (clientEntry) {
           try {
             const module = await import(
@@ -135,30 +134,6 @@ export async function createBuildLoader<
         }
       }
 
-      // For server components and actions, use server manifest
-      if (isServerAction || isPage || isProps) {
-        const serverEntry = serverManifest[normalizedValue];
-        if (serverEntry) {
-          try {
-            const module = await import(
-              join(
-                userOptions.projectRoot,
-                userOptions.build.outDir,
-                userOptions.build.server,
-                serverEntry.file
-              )
-            );
-            temporaryReferences?.set(moduleRef, module);
-            return module;
-          } catch (error) {
-            const err = toError(error);
-            console.warn("Error loading server module:", err);
-            temporaryReferences?.delete(moduleRef);
-            throw err;
-          }
-        }
-      }
-
       // For static assets, use static manifest
       const staticEntry = staticManifest[normalizedValue];
       if (staticEntry) {
@@ -172,6 +147,10 @@ export async function createBuildLoader<
             )
           );
           temporaryReferences?.set(moduleRef, module);
+          // If we have an export name, make sure it's a key
+          if (exportName && !(exportName in module)) {
+            throw new Error(`Export ${exportName} not found in module ${normalizedValue}`);
+          }
           return module;
         } catch (error) {
           const err = toError(error);
@@ -181,6 +160,135 @@ export async function createBuildLoader<
         }
       }
 
+      // Check server manifest for any remaining modules (including Html/Root components)
+      const serverEntry = serverManifest[normalizedValue];
+
+      if (serverEntry) {
+        try {
+          const module = await import(
+            join(
+              userOptions.projectRoot,
+              userOptions.build.outDir,
+              userOptions.build.server,
+              serverEntry.file
+            )
+          );
+          temporaryReferences?.set(moduleRef, module);
+          // If we have an export name, make sure it's a key
+          if (exportName && !(exportName in module)) {
+            throw new Error(`Export ${exportName} not found in module ${normalizedValue}`);
+          }
+          return module;
+        } catch (error) {
+          const err = toError(error);
+          if(userOptions.panicThreshold === "critical_errors") {
+            console.warn("Error loading server module:", err);
+            temporaryReferences?.delete(moduleRef);
+          } else {
+            console.error("Error loading server module:", err);
+            throw err;
+          }
+        }
+      }
+
+      // For source files (like custom Root/Html components), try to load directly from filesystem
+      const sourceFilePath = join(userOptions.projectRoot, normalizedValue);
+      if (userOptions.verbose) {
+        console.log("[buildLoader] Checking source file:", sourceFilePath, "exists:", existsSync(sourceFilePath));
+      }
+      if (existsSync(sourceFilePath)) {
+        try {
+          if (userOptions.verbose) {
+            console.log("[buildLoader] Loading source file:", sourceFilePath);
+          }
+
+          // For TypeScript/TSX files, first check if there's a built version in dist
+          if (sourceFilePath.endsWith('.tsx') || sourceFilePath.endsWith('.ts') || sourceFilePath.endsWith('.mts')) {
+            // Try to find the built module first - check both static and server directories
+            const relativePath = normalizedValue.replace(/^src\//, '');
+            const staticBuiltPath = join(
+              userOptions.projectRoot,
+              userOptions.build.outDir,
+              userOptions.build.static,
+              relativePath.replace(/\.(tsx?|mts)$/, '.js')
+            );
+            const serverBuiltPath = join(
+              userOptions.projectRoot,
+              userOptions.build.outDir,
+              userOptions.build.server,
+              relativePath.replace(/\.(tsx?|mts)$/, '.js')
+            );
+
+            // Check static directory first, then server directory
+            let builtModulePath: string | null = null;
+            if (existsSync(staticBuiltPath)) {
+              builtModulePath = staticBuiltPath;
+            } else if (existsSync(serverBuiltPath)) {
+              builtModulePath = serverBuiltPath;
+            }
+
+            if (builtModulePath) {
+              if (userOptions.verbose) {
+                console.log("[buildLoader] Found built module:", builtModulePath);
+              }
+              const module = await import(builtModulePath);
+              temporaryReferences?.set(moduleRef, module);
+              // If we have an export name, make sure it's a key
+              if (exportName && !(exportName in module)) {
+                throw new Error(`Export ${exportName} not found in module ${normalizedValue}`);
+              }
+              return module;
+            }
+
+            // If no built module found, try to compile the source file
+            if (userOptions.verbose) {
+              console.log("[buildLoader] No built module found, trying to compile source file");
+            }
+
+            // Use esbuild to compile the TypeScript/TSX file
+            const { transformWithEsbuild } = await import('vite');
+            const sourceCode = await readFile(sourceFilePath, 'utf-8');
+            const result = await transformWithEsbuild(sourceCode, sourceFilePath, {
+              format: 'esm',
+              sourcemap: false,
+            });
+
+            // Create a temporary file with the compiled code
+            const tempFilePath = sourceFilePath.replace(/\.(tsx?|mts)$/, '.temp.js');
+            await writeFile(tempFilePath, result.code);
+
+            try {
+              const module = await import(tempFilePath);
+              temporaryReferences?.set(moduleRef, module);
+              // If we have an export name, make sure it's a key
+              if (exportName && !(exportName in module)) {
+                throw new Error(`Export ${exportName} not found in module ${normalizedValue}`);
+              }
+              return module;
+            } finally {
+              // Clean up temporary file
+              try {
+                await unlink(tempFilePath);
+              } catch (cleanupError) {
+                // Ignore cleanup errors
+                if (userOptions.verbose) {
+                  console.warn("[buildLoader] Failed to cleanup temp file:", cleanupError);
+                }
+              }
+            }
+          } else {
+            // For other files, read as text
+            const content = await readFile(sourceFilePath, 'utf-8');
+            return { default: content };
+          }
+        } catch (error) {
+          const err = toError(error);
+          console.warn("Error loading source file:", err);
+          temporaryReferences?.delete(moduleRef);
+          throw err;
+        }
+      }
+
       throw new Error(`Module ${normalizedValue} not found during build`);
     } catch (error) {
       const emptyExports = {
@@ -192,3 +300,4 @@ export async function createBuildLoader<
     }
   };
 }
+