vite-plugin-react-server 1.1.12 → 1.1.13

package/plugin/helpers/collectViteModuleGraphCss.ts

@@ -1,5 +1,5 @@
 import type { EnvironmentModuleGraph, ModuleGraph } from "vite";
-import type { CreateHandlerOptions, CssContent } from "../types.js";
+import type { CreateHandlerOptions, CssContent,  InlineCssOpt,  PagePropOpt } from "../types.js";
 import { createCssProps } from "./createCssProps.js";
 
 type CollectViteModuleGraphCssResult =
@@ -29,7 +29,8 @@ type CollectViteModuleGraphCssResult =
     };
 
 export async function collectViteModuleGraphCss<
-  InlineCSS extends boolean | undefined = undefined
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
 >({
   moduleGraph,
   onCss,
@@ -40,7 +41,7 @@ export async function collectViteModuleGraphCss<
   onCss?: (cssContent: CssContent, parentUrl: string) => void;
   parentUrl?: string;
   handlerOptions: Pick<
-    CreateHandlerOptions<InlineCSS>,
+    CreateHandlerOptions<T, InlineCSS>,
     | "pagePath"
     | "moduleBaseURL"
     | "moduleBasePath"

package/plugin/helpers/createCssProps.tsx

@@ -1,4 +1,5 @@
 import type { ResolvedUserOptions, CssContent } from "../types.js";
+import type { InlineCssOpt, PagePropOpt } from "../../server.js";
 import { join, relative } from "node:path";
 import { deserializeRegExp } from "./serializeUserOptions.js";
 
@@ -21,7 +22,10 @@ import { deserializeRegExp } from "./serializeUserOptions.js";
  * @param css - The css options
  * @returns A CssContent object
  */
-export const createCssProps = ({
+export const createCssProps = <
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>({
   id,
   code,
   userOptions,
@@ -29,14 +33,14 @@ export const createCssProps = ({
   id: string;
   code: string;
   userOptions: Pick<
-    ResolvedUserOptions,
+    ResolvedUserOptions<T, InlineCSS>,
     | "css"
     | "moduleBaseURL"
     | "moduleBasePath"
     | "moduleRootPath"
     | "projectRoot"
   >;
-}): CssContent => {
+}): CssContent<InlineCSS> => {
   const { css, moduleBaseURL, moduleBasePath, moduleRootPath, projectRoot } =
     userOptions;
   // If we don't have a bundle entry, create a linked CSS file
@@ -74,24 +78,37 @@ export const createCssProps = ({
             "data-vite-dev-id": join(projectRoot, moduleRootPath, normalizedId),
           }
         : {}),
-    } as CssContent<true>;
+    } as CssContent<InlineCSS>;
   }
-  const joined = normalizedId.startsWith(moduleBasePath) ? normalizedId : join(moduleBasePath, normalizedId);
+  const joined = normalizedId.startsWith(moduleBasePath)
+    ? normalizedId
+    : join(moduleBasePath, normalizedId);
   const moduleBaseHasTrailingSlash = moduleBaseURL.endsWith("/");
   const joinedHasLeadingSlash = joined.startsWith("/");
   const safeParseURL = (() => {
-    if(joined.startsWith(moduleBaseHasTrailingSlash ? moduleBaseURL.slice(0, -1) : moduleBaseURL)) {
+    if (
+      joined.startsWith(
+        moduleBaseHasTrailingSlash ? moduleBaseURL.slice(0, -1) : moduleBaseURL
+      )
+    ) {
       return joined;
     }
     try {
       if (moduleBaseURL.includes("//")) {
         // relative to moduleBaseURL
-        return new URL(joinedHasLeadingSlash ? joined.slice(1) : joined, moduleBaseURL).href;
+        return new URL(
+          joinedHasLeadingSlash ? joined.slice(1) : joined,
+          moduleBaseURL
+        ).href;
       }
     } catch (error) {}
     // if the url is not valid, we return the moduleBaseURL + the normalizedId
     // dont make it a argument of join or it will mangle something like http:// into http:/
-    return moduleBaseURL + (!moduleBaseHasTrailingSlash && !joinedHasLeadingSlash ? "/" : "") + (moduleBaseHasTrailingSlash ? joined.slice(1) : joined);
+    return (
+      moduleBaseURL +
+      (!moduleBaseHasTrailingSlash && !joinedHasLeadingSlash ? "/" : "") +
+      (moduleBaseHasTrailingSlash ? joined.slice(1) : joined)
+    );
   })();
   // Default case
   return {
@@ -100,5 +117,5 @@ export const createCssProps = ({
     rel: "stylesheet",
     href: safeParseURL,
     precedence: "high",
-  } as CssContent<false>;
+  } as CssContent<InlineCSS>;
 };

package/plugin/helpers/createHandler.ts

@@ -1,9 +1,12 @@
-import type { CreateHandlerOptions } from "../types.js";
+import type { CreateHandlerOptions, InlineCssOpt } from "../types.js";
+import type { PagePropOpt } from "../../server.js";
 import { createRscStream } from "./createRscStream.js";
 
-
-export async function createHandler(handlerOptions: CreateHandlerOptions) {
-  if(!handlerOptions.PageComponent) {
+export function createHandler<
+  T extends PagePropOpt = PagePropOpt,
+  InlineCSS extends InlineCssOpt = InlineCssOpt
+>(handlerOptions: CreateHandlerOptions<T, InlineCSS>) {
+  if (!handlerOptions.PageComponent) {
     throw new Error("PageComponent is required");
   }
   try {

package/plugin/helpers/createRscStream.tsx

@@ -1,11 +1,12 @@
 import { React, ReactDOMServer } from "../vendor/vendor.server.js";
-import type { CreateHandlerOptions, StreamMetrics } from "../types.js";
+import type {
+  CreateHandlerOptions,
+  StreamMetrics,
+  PagePropOpt,
+} from "../types.js";
 import { performance } from "node:perf_hooks";
-export function createRscStream<
-  T,
-  C extends React.ComponentType<T>,
-  InlineCSS extends boolean = true
->({
+
+export function createRscStream<T extends PagePropOpt = PagePropOpt>({
   Html = React.Fragment,
   PageComponent,
   pageProps,
@@ -22,7 +23,7 @@ export function createRscStream<
   onEvent,
   projectRoot,
 }: Pick<
-  CreateHandlerOptions<T, C, InlineCSS>,
+  CreateHandlerOptions<T>,
   | "Html"
   | "PageComponent"
   | "pageProps"
@@ -46,7 +47,7 @@ export function createRscStream<
   let streamError: Error | null = null;
   const startTime = performance.now();
   try {
-    const htmlIsFragment = Html == React.Fragment;
+    const htmlIsFragment = Html === React.Fragment;
     const url = route.startsWith(moduleBaseURL) ? route : moduleBaseURL + route;
 
     if (!PageComponent) {
@@ -64,10 +65,15 @@ export function createRscStream<
         },
       };
     }
+
     const elements = htmlIsFragment ? (
-      <CssCollector cssFiles={cssFiles}>
-        <PageComponent {...(pageProps as any)} />
-      </CssCollector>
+      <CssCollector
+        key={route}
+        as={React.Fragment}
+        cssFiles={cssFiles}
+        pageProps={pageProps}
+        Page={PageComponent}
+      />
     ) : (
       <Html
         moduleBase={moduleBase}
@@ -82,9 +88,9 @@ export function createRscStream<
         globalCss={globalCss}
         CssCollector={CssCollector}
         manifest={manifest}
-      >
-        <PageComponent {...(pageProps as any)} />
-      </Html>
+        Page={PageComponent}
+        as={"div"}
+      />
     );
     const stream = ReactDOMServer.renderToPipeableStream(
       elements,

package/plugin/helpers/index.ts

@@ -15,10 +15,10 @@ export * from "./inputNormalizer.js";
 export * from "./collectBundleManifestCss.js";
 export * from "./collectManifestCss.js";
 export * from "./collectViteModuleGraphCss.js";
-export * from "./createCssProps.jsx";
+export * from "./createCssProps.js";
 
 // Stream and handler creation
-export * from "./createRscStream.jsx";
+export * from "./createRscStream.js";
 export * from "./createHandler.js";
 export * from "./createEventHandler.js";
 

package/plugin/helpers/inputNormalizer.ts

@@ -180,7 +180,7 @@ export function createInputNormalizer({
   root,
   moduleBasePath,
   preserveModulesRoot = undefined,
-  removeExtension = DEFAULT_CONFIG.MODULE_EXTENSION,
+  removeExtension = DEFAULT_CONFIG.AUTO_DISCOVER.moduleExtension,
 }: CreateInputNormalizerProps): InputNormalizer {
   if (stashedNormalizer) {
     return stashedNormalizer;
@@ -246,7 +246,9 @@ export function createInputNormalizer({
         ? virtualPrefix[0] + normalizedPath
         : normalizedPath
       : normalizedPath;
-
+    if(virtualPrefix){
+      return ['', ''];
+    }
     return [key, finalPath];
   };
   return stashedNormalizer;

package/plugin/helpers/moduleResolver.ts

@@ -0,0 +1,36 @@
+let stashedResolve: any = null;
+
+export function setStashedResolve(resolve: any) {
+  stashedResolve = resolve;
+}
+
+export async function resolveClientImport(specifier: string, parentURL: string) {
+  const conditions = ["node", "import"];
+
+  if (stashedResolve === null) {
+    throw new Error(
+      "Expected resolve to have been called before transformSource"
+    );
+  }
+
+  try {
+    const result = await stashedResolve(
+      specifier,
+      {
+        conditions,
+        parentURL,
+      },
+      stashedResolve
+    );
+
+    if (!result) {
+      console.warn(`Failed to resolve import: ${specifier}`);
+      return null;
+    }
+
+    return result;
+  } catch (error) {
+    console.error(`Error resolving import ${specifier}:`, error);
+    return null;
+  }
+} 

package/plugin/helpers/requestInfo.ts

@@ -1,43 +1,89 @@
-import { join } from "node:path";
+import { join, resolve } from "node:path";
 import type { ResolvedUserOptions } from "../types.js";
-import type { Connect } from "vite";
+import { createLogger, type Connect, type Logger } from "vite";
 import { MIME_TYPES } from "../config/mimeTypes.js";
 
 /**
  * # Request info
- * 
- * Does the initial work to check if the request is for html, rsc, css, or something else not handled by this plugin.
- * 
- * @param req 
- * @param userOptions 
- * @param hostDir 
- * @returns 
+ *
+ * Does the initial work to check if the request is for html, rsc, json, js, css, server-action, or something else not handled by this plugin.
+ *
+ * @param req
+ * @param userOptions
+ * @param hostDir
+ * @returns
  */
 export function requestInfo(
   req: Connect.IncomingMessage,
-  userOptions: Pick<ResolvedUserOptions, "normalizer" | "build" | "autoDiscover">,
-  hostDir: string
+  userOptions: Pick<
+    ResolvedUserOptions,
+    "normalizer" | "build" | "autoDiscover" | "verbose"
+  >,
+  hostDir: string,
+  logger: Logger = createLogger()
 ) {
   const [, value] = userOptions.normalizer(req.url);
   const dotIndex = value.lastIndexOf(".");
   const ext = dotIndex === -1 ? "" : value.slice(dotIndex);
   // handle index.html
+  const isVendor = userOptions.autoDiscover.vendorPattern(value);
+  const isVirtual = userOptions.autoDiscover.virtualPattern(value);
+  const isJS = userOptions.autoDiscover.modulePattern(value);
   const isHtml = userOptions.autoDiscover.htmlPattern(value);
-  const hasHtmlHeader = req.headers.accept?.includes("text/html");
+  const isCss = userOptions.autoDiscover.cssPattern(value);
+  const isJson = userOptions.autoDiscover.jsonPattern(value);
   const isRsc = userOptions.autoDiscover.rscPattern(value);
+  const hasJsHeader =
+    req.headers["sec-fetch-dest"] === "script" ||
+    req.headers["accept"]?.includes("*/*") ||
+    req.headers["accept"]?.includes("text/javascript");
+  const hasJsonHeader = req.headers["accept"]?.includes("application/json");
+  const hasHtmlHeader = req.headers.accept?.includes("text/html");
   const hasRscHeader = req.headers.accept?.includes("text/x-component");
+  const hasCssHeader = req.headers.accept?.includes("text/css");
   const isFolder = !ext;
+  const isJsRequest =
+    !isJson && !isHtml && !isCss && !isRsc && (isJS || hasJsHeader);
+  const isJsonRequest = isJson || (hasJsonHeader && !isJsRequest);
   const isHtmlRequest =
-    isHtml || hasHtmlHeader || (isFolder && !hasRscHeader && !isRsc);
-  const isRscRequest = !isHtmlRequest && (isRsc || hasRscHeader);
-  const isCss = userOptions.autoDiscover.cssPattern(value);
+    isHtml ||
+    hasHtmlHeader ||
+    (isFolder && !hasRscHeader && !isRsc && !isJsRequest);
+  const isRscRequest =
+    !isJsRequest && !isHtmlRequest && (isRsc || hasRscHeader);
   const isCssRequest =
     !isHtmlRequest &&
     !isRscRequest &&
-    (isCss || req.headers.accept?.includes("text/css"));
+    !isJsRequest &&
+    !isJsonRequest &&
+    (isCss || hasCssHeader);
+
+  // Form action detection
+  const formContentType = req.headers["content-type"] ?? "";
+  const isFormContentType =
+    formContentType.includes("application/x-www-form-urlencoded") ||
+    formContentType.includes("multipart/form-data");
+  const isFormActionRequest =
+    isFormContentType &&
+    req.headers["sec-fetch-dest"] === "document" &&
+    req.headers["sec-fetch-mode"] === "navigate";
+
+  // Server action detection
+  const hasServerActionHeaders =
+    isJsonRequest &&
+    (req.headers["sec-fetch-dest"] === "empty" ||
+      req.headers["sec-fetch-dest"] === "") &&
+    req.headers["sec-fetch-mode"] === "cors";
+  const isServerActionRequest = hasServerActionHeaders;
+
   let filePath = join(hostDir, value);
   let contentType;
-  if (isHtmlRequest) {
+  if (isServerActionRequest) {
+    // For server actions, we'll get the actual file path from the request body
+    // The route is just a placeholder
+    filePath = value;
+    contentType = "application/json; charset=utf-8";
+  } else if (isHtmlRequest) {
     if (!isHtml) {
       filePath = join(hostDir, value, userOptions.build.htmlOutputPath);
     }
@@ -49,9 +95,19 @@ export function requestInfo(
     contentType = "text/x-component; charset=utf-8";
   } else if (isCssRequest) {
     if (!isCss) {
-      filePath = join(hostDir, value);
+      filePath = join(hostDir, value + ".css");
     }
     contentType = "text/css; charset=utf-8";
+  } else if (isJsRequest) {
+    if (!isJS) {
+      filePath = resolve(hostDir, value + ".js");
+    }
+    contentType = "application/javascript; charset=utf-8";
+  } else if (isJsonRequest) {
+    if (!isJson) {
+      filePath = join(hostDir, value + ".json");
+    }
+    contentType = "application/json; charset=utf-8";
   } else {
     const mimeType = MIME_TYPES[ext];
     if (mimeType) {
@@ -63,18 +119,41 @@ export function requestInfo(
   const route = value
     .replace(userOptions.build.rscOutputPath, "")
     .replace(userOptions.build.htmlOutputPath, "");
-    
+
   const routeWithoutTrailingSlash =
     route === "" || route === "/"
       ? "/"
       : route.endsWith("/")
       ? route.slice(0, -1)
       : route;
-  const routeWithLeadingSlash =
-    routeWithoutTrailingSlash.startsWith("/")
-      ? routeWithoutTrailingSlash
-      : `/${routeWithoutTrailingSlash}`;
 
+  const routeWithLeadingSlash = !routeWithoutTrailingSlash
+    ? "/"
+    : routeWithoutTrailingSlash.startsWith("/")
+    ? routeWithoutTrailingSlash
+    : `/${routeWithoutTrailingSlash}`;
+
+  if (userOptions.verbose) {
+    if (isFormActionRequest) {
+      logger.info(`[react-dev-server] (form-action) ${routeWithLeadingSlash}`);
+    } else if (isServerActionRequest) {
+      logger.info(
+        `[react-dev-server] (server-action) ${routeWithLeadingSlash}`
+      );
+    } else if (isHtmlRequest) {
+      logger.info(`[react-dev-server] (html) ${routeWithLeadingSlash}`);
+    } else if (isRscRequest) {
+      logger.info(`[react-dev-server] (rsc.) ${routeWithLeadingSlash}`);
+    } else if (isCssRequest) {
+      logger.info(`[react-dev-server] (css) ${routeWithLeadingSlash}`);
+    } else if (isJsRequest) {
+      logger.info(`[react-dev-server] (js) ${routeWithLeadingSlash}`);
+    } else if (isJsonRequest) {
+      logger.info(`[react-dev-server] (json) ${routeWithLeadingSlash}`);
+    } else {
+      logger.info(`[react-dev-server] (other) ${routeWithLeadingSlash}`);
+    }
+  }
   return {
     route: routeWithLeadingSlash,
     ext,
@@ -87,5 +166,20 @@ export function requestInfo(
     isFolder,
     contentType,
     filePath,
+    isJS,
+    isVendor,
+    isVirtual,
+    hasJsHeader,
+    isJsRequest,
+    isJson,
+    isJsonRequest,
+    hasCssHeader,
+    hasJsonHeader,
+    hasHtmlHeader,
+    hasRscHeader,
+    hasServerActionHeaders,
+    isServerActionRequest,
+    isFormContentType,
+    isFormActionRequest,
   };
 }

package/plugin/helpers/resolvePage.ts

@@ -72,11 +72,10 @@ export const resolvePage = async <T, N extends string>({
         error: toError(module.error),
       };
     }
+    console.log({ module });
     return {
       type: "error",
-      error: new Error(
-        `Export "${exportName}" not found in module ${id}.`
-      ),
+      error: new Error(`Export "${exportName}" not found in module ${id}.`),
     };
   } else if (!Page) {
     return {

package/plugin/helpers/resolvePageAndProps.ts

@@ -1,3 +1,4 @@
+import type { PageComponentType, PagePropOpt } from "../types.js";
 import { resolvePage } from "./resolvePage.js";
 import { resolveProps } from "./resolveProps.js";
 
@@ -10,11 +11,11 @@ type ResolvePageAndPropsOptions<N1 extends string, N2 extends string> = {
   loader: (id: string) => Promise<any>;
 };
 
-type ResolvePageAndPropsResult<T> =
+type ResolvePageAndPropsResult<T extends PagePropOpt = PagePropOpt> =
   | {
       type: "success";
       error?: never;
-      PageComponent: React.ComponentType<T>;
+      PageComponent: PageComponentType<T>;
       pageProps: T;
     }
   | {
@@ -31,9 +32,9 @@ type ResolvePageAndPropsResult<T> =
     };
 
 export async function resolvePageAndProps<
-  T,
-  N1 extends string,
-  N2 extends string
+  T extends PagePropOpt = PagePropOpt,
+  N1 extends string = string,
+  N2 extends string = string
 >(
   handlerOptions: ResolvePageAndPropsOptions<N1, N2>
 ): Promise<ResolvePageAndPropsResult<T>> {
@@ -72,7 +73,7 @@ export async function resolvePageAndProps<
     const { props } = resolvePropsResult;
     return {
       type: "success",
-      PageComponent: Page as React.ComponentType<T>,
+      PageComponent: Page as PageComponentType<T>,
       pageProps: props as T,
     };
   } catch (error) {

package/plugin/helpers/serializeUserOptions.ts

@@ -2,6 +2,8 @@ import type { ResolvedConfig, ViteDevServer } from "vite";
 import type {
   AutoDiscoveredFiles,
   ResolvedUserOptions,
+  PagePropOpt,
+  InlineCssOpt,
 } from "../types.js";
 import { cleanObject } from "./cleanObject.js";
 
@@ -173,8 +175,8 @@ export const serializedDevServerConfig = <T extends ViteDevServer["config"]>(
 };
 
 // For your own options (if you need custom non-serializable functions)
-export const serializedOptions = <T extends ResolvedUserOptions>(
-  userOptions: T,
+export const serializedOptions = <T extends PagePropOpt = PagePropOpt, InlineCSS extends InlineCssOpt = InlineCssOpt>(
+  userOptions: ResolvedUserOptions<T, InlineCSS>,
   autoDiscoveredFiles: AutoDiscoveredFiles,
   customNonSerializableFunctions: Set<string> = PLUGIN_NON_SERIALIZABLE_FUNCTIONS
 ) => {
@@ -207,3 +209,19 @@ export const serializedOptions = <T extends ResolvedUserOptions>(
     customNonSerializableFunctions
   ));
 };
+
+export function hydrateUserOptions(userOptions: any) {
+  if (!userOptions) return userOptions;
+  
+  // Restore RegExp objects
+  if (userOptions.autoDiscover) {
+    const { autoDiscover } = userOptions;
+    for (const key in autoDiscover) {
+      if (typeof autoDiscover[key] === 'string' && autoDiscover[key].startsWith('__REGEXP__')) {
+        autoDiscover[key] = deserializeRegExp(autoDiscover[key]);
+      }
+    }
+  }
+  
+  return userOptions;
+}