vite-plugin-react-server 1.1.10 → 1.1.12

package/plugin/utils/createCallServer.ts

@@ -0,0 +1,26 @@
+import {
+  createFromFetch,
+  encodeReply,
+  // @ts-ignore
+} from "react-server-dom-esm/client.browser";
+
+type ServerResponse = { returnValue: unknown };
+
+export const createCallServer = (moduleBaseURL: string) => {
+  const callServer = async (_id: string, args: unknown[]): Promise<unknown> => {
+    const response = await createFromFetch(
+      fetch(moduleBaseURL, {
+        method: "POST",
+        body: await encodeReply(args),
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+      }),
+      { callServer, moduleBaseURL }
+    );
+    const returnValue = (response as ServerResponse).returnValue;
+    return returnValue;
+  };
+  return callServer;
+};

package/plugin/utils/createReactFetcher.ts

@@ -1,29 +1,33 @@
 import type { ReactNode } from "react";
 // @ts-ignore
 import { createFromFetch } from "react-server-dom-esm/client.browser";
-import { callServer } from "./callServer.js";
-import { pageURL } from "./pageURL.js";
+import { createCallServer } from "./createCallServer.js";
 import { env } from "./env.js";
+import { createPageURL } from "./urls.js";
 
 export function createReactFetcher({
   moduleBaseURL = env.BASE_URL,
-  url,
+  publicOrigin = env.PUBLIC_ORIGIN,
+  url = window.location.pathname,
+  indexRSC = "index.rsc",
   headers = {
     Accept: "text/x-component",
   },
 }: {
   url?: string;
   moduleBaseURL?: string;
+  publicOrigin?: string;
+  indexRSC?: string;
   headers?: HeadersInit;
 } = {}): Promise<ReactNode> {
-  const parsedURL = pageURL(moduleBaseURL, url);
+  const parsedURL = createPageURL(moduleBaseURL, publicOrigin, env.DEV)(url, indexRSC);
   return createFromFetch(
     fetch(parsedURL.indexRSC, {
       headers: headers,
     }),
     {
-      callServer: callServer,
+      callServer: createCallServer(parsedURL.moduleBaseURL),
       moduleBaseURL: parsedURL.moduleBaseURL,
     }
-  ) as Promise<ReactNode>;
+  );
 }

package/plugin/utils/envUrls.node.ts

@@ -0,0 +1,19 @@
+import { createAbsoluteURL, createBaseURL, createPageURL } from "./urls.js";
+
+export const absoluteURL = (path: string) =>
+  createAbsoluteURL(
+    process.env.VITE_BASE_URL ?? "/",
+    process.env.VITE_PUBLIC_ORIGIN ?? ""
+  )(path);
+
+export const baseURL = (path: string) =>
+  createBaseURL(process.env.VITE_BASE_URL ?? "/")(path);
+
+export const pageURL = (path: string) =>
+  createPageURL(
+    process.env.VITE_BASE_URL ?? "/",
+    process.env.VITE_PUBLIC_ORIGIN ?? "",
+    typeof process.env.VITE_DEV === "string"
+      ? process.env.VITE_DEV === "true" || process.env.VITE_DEV === "1"
+      : process.env["NODE_ENV"] === "development"
+  )(path);

package/plugin/utils/envUrls.ts

@@ -0,0 +1,8 @@
+import { env } from "./env.js";
+import { createAbsoluteURL, createBaseURL, createPageURL } from "./urls.js";
+
+export const absoluteURL = createAbsoluteURL(env.BASE_URL, env.PUBLIC_ORIGIN);
+export const baseURL = createBaseURL(env.BASE_URL);
+export const pageURL = createPageURL(env.BASE_URL, env.PUBLIC_ORIGIN, env.DEV);
+export const { indexRSC: rootIndexRSC, moduleBaseURL } = pageURL("/");
+export const { BASE_URL, PUBLIC_ORIGIN } = env;

package/plugin/utils/index.ts

@@ -1,4 +1,4 @@
 export * from "./createReactFetcher.js";
 export * from "./callServer.js";
-export * from "./pageURL.js";
+export * from "./urls.js";
 export * from "./env.js";

package/plugin/utils/moduleBaseURL.ts

@@ -0,0 +1,7 @@
+import { env } from "./env.js";
+
+const { BASE_URL: baseURL, PUBLIC_ORIGIN: publicOrigin } = env;
+
+const moduleBaseURL: string = `${publicOrigin}${baseURL}`;
+
+export { moduleBaseURL };

package/plugin/utils/urls.ts

@@ -0,0 +1,217 @@
+
+/**
+ * # createAbsoluteUrl
+ *
+ * This function takes a baseURL and a public origin and returns a function that takes a path and returns the path with the baseURL attached to it.
+ *
+ * @example
+ * ```ts
+ * const absoluteURL = createAbsoluteURL("/mmc", "https://bidoof.com")
+ * console.log(absoluteURL("/test")) // "https://bidoof.com/mmc/test"
+ * ```
+ *
+ * @example
+ * ```ts
+ * const absoluteURL = createAbsoluteURL("/mmc", "https://bidoof.com")
+ * console.log(absoluteURL("/test")) // "https://bidoof.com/mmc/test"
+ * ```
+ *
+ * This can replace code like `${process.env.VITE_PUBLIC_ORIGIN}/test` with `absoluteUrl('/test')`, and you can be sure that it will work after
+ * changing the plugin settings.
+ */
+export const createAbsoluteURL = (
+  withBaseURL: string,
+  withPublicOrigin: string
+) => {
+  const baseURL = createBaseURL(withBaseURL);
+  if (withPublicOrigin === "" || typeof withPublicOrigin !== "string")
+    return baseURL;
+  return (path: string) => {
+    const pathWithBaseURL = baseURL(path);
+    try {
+      return new URL(pathWithBaseURL, withPublicOrigin).toString();
+    } catch (error) {
+      return withPublicOrigin + pathWithBaseURL;
+    }
+  };
+};
+
+/**
+ * # createBaseURL
+ *
+ * This function takes a baseURL and returns a function that takes a path and returns the path with the baseURL attached to it.
+ *
+ * @example
+ * ```ts
+ * const baseURL = createBaseURL("/mmc")
+ * console.log(baseURL("/test")) // "/mmc/test"
+ * ```
+ *
+ * @example
+ * ```ts
+ * const baseURL = createBaseURL("/mmc/")
+ * console.log(baseURL("/test")) // "/mmc/test"
+ * ```
+ *
+ * This can replace code like `${import.meta.env.test` with `baseURL(path)`, and you can be sure that it will work after
+ * changing the plugin settings.
+ *
+ * Path handling logic:
+ * 1. For baseURL ending with "/":
+ *    - If path starts with "/", slice off the leading slash to avoid double slashes
+ *    - If path doesn't start with "/", keep it as is
+ *
+ * 2. For baseURL not ending with "/":
+ *    - If path starts with "/", directly concatenate with baseURL
+ *    - If path doesn't start with "/", add a slash between baseURL and path
+ *
+ * baseURL "src"  + path "src/test" -> should not concatenate to src/src/test
+ * baseURL "/" + path "https://bidoof.com" -> should not concatenate to /https://bidoof.com"
+ */
+export const createBaseURL = (withBaseURL: string) => {
+  if (withBaseURL.endsWith("/")) {
+    return (path: string) => {
+      if (path === "") return withBaseURL;
+      if (path.startsWith(withBaseURL) || isAbsoluteURL(path)) return path;
+      return `${withBaseURL}${removeLeadingSlash(path)}`;
+    };
+  } else {
+    return (path: string) => {
+      if (path === "") return withBaseURL;
+      if (isAbsoluteURL(path)) return path;
+      if (path.startsWith("/")) return withBaseURL + path;
+      if (path.startsWith(withBaseURL)) return path;
+      return `${withBaseURL}/${path}`;
+    };
+  }
+};
+
+/** Remove a single trailing slash from the URL if it ends with one */
+export const removeTrailingSlash = (url: string) =>
+  url.endsWith("/") ? url.slice(0, -1) : url;
+
+/** Add a single trailing slash to the URL if it doesn't end with one */
+export const addTrailingSlash = (url: string) =>
+  url.endsWith("/") ? url : `${url}/`;
+
+export const removeLeadingSlash = (url: string) =>
+  url.startsWith("/") ? url.slice(1) : url;
+
+export const addLeadingSlash = (url: string) =>
+  url.startsWith("/") ? url : `/${url}`;
+
+export const isBlankRegex = /^(?:[a-zA-Z][a-zA-Z0-9+.-]*:)?\/\//;
+export const isAbsoluteURL = (url: string) =>
+  isBlankRegex.test(url) || url.startsWith("//");
+
+
+export const folderName = (path: string, withBaseURL: string) => {
+  const baseURL = createBaseURL(withBaseURL);
+  return baseURL(path.replace(/\[index.(html?|rsc|HTML?)]$/, ""));
+}
+
+/**
+ * # createPageURL
+ *
+ * This function takes a baseURL, public origin and a optional normalizer function that mirrors the baseURL's format.
+ * If baseURL ends with a slash, we continue it using the URL itself (must end with a slash)
+ *
+ * - `indexRSC`: The path to the index.rsc file
+ * - `moduleBaseURL`: The baseURL to use for the module
+ *
+ * These can be passed in directly to the createReactFetcher and also determine the defaults when no input are provided.
+ *
+ * @example
+ * ```ts
+ * import { createFromFetch } from "react-server-dom-esm/client.browser";
+ * const parsedURL = pageURL(window.location.pathname ?? "/");
+ * const data = createFromFetch(
+ *  fetch(parsedURL.indexRSC, {
+ *    headers: {
+ *      Accept: "text/x-component",
+ *    }
+ *  }),
+ *  {
+ *    callServer: callServer,
+ *    moduleBaseURL: parsedURL.moduleBaseURL,
+ *  }
+ * );
+ * ```
+ *
+ * The moduleBasePath being set at the config level as "/",
+ * then we pass it to create a stream `renderToPipeableStream(elements, moduleBasePath)`, and we see
+ * ```text
+ * 2:I["src/components/Clickable.client-Dx9diOqr.js","ClientClickable"]
+ * ```
+ *
+ */
+export const createPageURL = (
+  withBaseURL: string,
+  withPublicOrigin: string,
+  isDev = false,
+  normalizer = !withBaseURL.endsWith("/")
+    ? removeTrailingSlash
+    : addTrailingSlash,
+) => {
+  return (to: string, fileName: string = "index.rsc") => {
+    try {
+      // Create the base URL first
+      const folderName = addTrailingSlash(
+        to.replace(/\[index.(html?|rsc|HTML?)]$/, "")
+      );
+      const baseURL = createBaseURL(withBaseURL);
+      const rscPath = baseURL(folderName) + fileName;
+      // Create moduleBaseURL and normalize it to match input format
+      const moduleBaseURL = parseURL(withBaseURL, withPublicOrigin);
+      if (moduleBaseURL.type === "error") {
+        throw moduleBaseURL.error;
+      }
+      const indexRSC = parseURL(rscPath, withPublicOrigin);
+      if (indexRSC.type === "error") {
+        throw indexRSC.error;
+      }
+      return {
+        indexRSC: indexRSC.url.toString(),
+        moduleBaseURL: normalizer(moduleBaseURL.url.toString()),
+      };
+    } catch (error) {
+      if (isDev) console.error("Error parsing pageURL", error);
+      return {
+        indexRSC: withBaseURL + "index.rsc",
+        moduleBaseURL: withBaseURL,
+      };
+    }
+  };
+};
+
+/**
+ * # moduleBaseURL
+ *
+ * This function takes a baseURL, public origin and a optional normalizer function that mirrors the baseURL's format.
+ *
+ * @example
+ * ```ts
+ * const moduleBaseURL = parseURL("/mmc", "https://bidoof.com")
+ * if(moduleBaseURL.type === "error") {
+ *   console.error(moduleBaseURL.error)
+ * } else {
+ *   console.log(moduleBaseURL.url)
+ * }
+ * ```
+ *
+ **/
+export const parseURL = (
+  url: string,
+  base: string
+):
+  | { type: "success"; url: URL; error?: never; base?: never }
+  | { type: "error"; url: string; base: string; error: Error } => {
+  try {
+    return {
+      type: "success",
+      url: new URL(url, base),
+    };
+  } catch (error) {
+    return { type: "error", url: url, base: base, error: error as Error };
+  }
+};

package/plugin/vendor/index.ts

@@ -0,0 +1 @@
+export * from './vendor.js';

package/plugin/vendor/vendor.ts

@@ -0,0 +1,6 @@
+import { getCondition } from '../config/getCondition.js';
+
+export const {
+    React,
+    ReactDOMServer,
+} = await import(`./vendor.${getCondition('')}.js`);

package/plugin/worker/createWorker.ts

@@ -9,6 +9,9 @@ import { join } from "node:path";
 import { pluginRoot } from "../root.js";
 import * as React from "react";
 import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { createLogger, type Logger } from "vite";
+import type { HtmlWorkerOutputMessage } from "./types.js";
+import type { RscWorkerOutputMessage } from "./types.js";
 
 export type CreateWorkerOptions = {
   projectRoot?: string;
@@ -25,6 +28,8 @@ export type CreateWorkerOptions = {
   htmlChunkSize?: number; // Size of HTML chunks in bytes
   workerData?: any;
   transferList?: TransferListItem[];
+  logger?: Logger;
+  verbose?: boolean;
 };
 
 type CreateWorkerSuccess = {
@@ -65,6 +70,8 @@ export async function createWorker(
     },
     htmlChunkSize = 8 * 1024,
     transferList = [],
+    logger = createLogger(),
+    verbose = false,
   } = options;
   let workerPathWithDefault =
     typeof workerPath === "string" ? workerPath : undefined;
@@ -96,7 +103,8 @@ export async function createWorker(
       [envPrefix + "PROD"]: mode === "production" ? "1" : "0",
       [envPrefix + "SSR"]: "true",
       [envPrefix + "BASE_URL"]: options.workerData.userOptions.moduleBaseURL,
-      [envPrefix + "PUBLIC_ORIGIN"]: options.workerData.userOptions.publicOrigin,
+      [envPrefix + "PUBLIC_ORIGIN"]:
+        options.workerData.userOptions.publicOrigin,
       NODE_ENV: nodeEnv,
       NODE_PATH: nodePath,
       NODE_OPTIONS: process.env["NODE_OPTIONS"]?.includes(reverseCondition)
@@ -128,11 +136,35 @@ export async function createWorker(
         const timeout = setTimeout(() => {
           reject({ type: "error", error: new Error("Worker ready timeout") });
         }, 5000);
-
-        worker.once("message", (msg) => {
+        const exitHandler = (code: number) => {
+          clearTimeout(timeout);
+          worker.removeListener("message", messageHandler);
+          worker.removeListener("exit", exitHandler);
+          if (code === 0) {
+            resolve({
+              type: "skip",
+              reason: "Worker exited with code 0",
+              workerPath: workerPathWithDefault,
+            } satisfies CreateWorkerSkip);
+          } else {
+            const error = new Error(`Worker exited with code ${code}`);
+            logger.error(`worker exited with code ${code}`, { error });
+            reject({
+              type: "error",
+              error,
+              workerPath: workerPathWithDefault,
+            } satisfies CreateWorkerError);
+          }
+        };
+        const messageHandler = (msg: HtmlWorkerOutputMessage | RscWorkerOutputMessage) => {
+          if (verbose) logger.info(`Initial worker message ${msg.type}`);
           if (msg.type === "READY") {
+            if (verbose) logger.info(`Worker running for ${msg.env}`);
             clearTimeout(timeout);
+            worker.removeListener("message", messageHandler);
+            worker.removeListener("exit", exitHandler);
             if (msg.env !== nodeEnv) {
+              if (verbose) logger.info(`Worker environment mismatch.`);
               reject({
                 type: "error",
                 error: new Error(
@@ -147,25 +179,9 @@ export async function createWorker(
               workerPath: workerPathWithDefault,
             } satisfies CreateWorkerSuccess);
           }
-        });
-
-        worker.once("exit", (code) => {
-          clearTimeout(timeout);
-          worker.removeAllListeners();
-          if (code === 0) {
-            resolve({
-              type: "skip",
-              reason: "Worker exited with code 0",
-              workerPath: workerPathWithDefault,
-            } satisfies CreateWorkerSkip);
-          } else {
-            reject({
-              type: "error",
-              error: new Error(`Worker exited with code ${code}`),
-              workerPath: workerPathWithDefault,
-            } satisfies CreateWorkerError);
-          }
-        });
+        }
+        worker.once("message", messageHandler);
+        worker.once("exit", exitHandler);
       }
     );
   } catch (error) {

package/plugin/worker/html/createHtmlWorkerRenderState.tsx

@@ -8,7 +8,7 @@ import { Transform } from "node:stream";
 import type { HtmlWorkerOutputMessage } from "../types.js";
 import { join } from "node:path";
 import type { StreamMetrics } from "../../types.js";
-import { ReactDOMServer } from "../../vendor.client.js";
+import { ReactDOMServer } from "../../vendor/vendor.client.js";
 
 
 const createMetrics = (): StreamMetrics => {

package/plugin/worker/html/html-worker.development.tsx

@@ -3,6 +3,7 @@ import { messageHandler } from "./messageHandler.js";
 import { MessageChannel, parentPort } from "node:worker_threads";
 import { pluginRoot } from "../../root.js";
 import { register } from "node:module";
+import type { ReadyMessage } from "../types.js";
 
 // Create channels for each loader
 const cssLoaderChannel = new MessageChannel();
@@ -22,4 +23,4 @@ parentPort?.postMessage({
   type: "READY",
   env: process.env["NODE_ENV"],
   pid: process.pid,
-});
+} satisfies ReadyMessage);

package/plugin/worker/html/html-worker.production.tsx

@@ -3,6 +3,7 @@ import { messageHandler } from "./messageHandler.js";
 import { MessageChannel, parentPort } from "node:worker_threads";
 import { pluginRoot } from "../../root.js";
 import { register } from "node:module";
+import type { ReadyMessage } from "../types.js";
 
 // Create channels for each loader
 const cssLoaderChannel = new MessageChannel();
@@ -24,4 +25,4 @@ parentPort?.postMessage({
   type: "READY",
   env: process.env["NODE_ENV"],
   pid: process.pid,
-});
+} satisfies ReadyMessage);

package/plugin/worker/rsc/handleRender.ts

@@ -2,11 +2,11 @@ import { resolvePageAndProps } from "../../helpers/resolvePageAndProps.js";
 import type { RscRenderMessage, StreamHandlers } from "../types.js";
 import { activeStreams, cssFiles } from "./state.js";
 import { createRscStream } from "../../helpers/createRscStream.js";
-import { CssCollector } from "../../css-collector.js";
+import { CssCollector } from "../../components/css-collector.js";
 import { PassThrough } from "node:stream";
 import { join } from "node:path";
 import { workerData } from "node:worker_threads";
-import { React } from "../../vendor.server.js";
+import { React } from "../../vendor/vendor.server.js";
 import { hmrState } from "./state.js";
 import { performance } from "node:perf_hooks";
 
@@ -23,14 +23,13 @@ export async function handleRender(
     propsExportName = workerData.userOptions.propsExportName,
     projectRoot = workerData.userOptions.projectRoot,
     moduleRootPath = workerData.userOptions.moduleRootPath,
-    moduleBaseURL = workerData.userOptions.moduleBaseURL,
-    moduleBasePath = workerData.userOptions.moduleBasePath,
+    moduleBaseURL = workerData.userOptions.moduleBaseURL ?? "/",
+    moduleBasePath = workerData.userOptions.moduleBasePath ?? "/",
     moduleBase = workerData.userOptions.moduleBase,
     pipeableStreamOptions = workerData.userOptions.pipeableStreamOptions,
     cssFiles: messageCssFiles,
     globalCss = workerData.globalCss,
   } = msg;
-
   try {
     // Load modules
     const pageAndPropsResult = await resolvePageAndProps({

package/plugin/worker/rsc/messageHandler.tsx

@@ -1,9 +1,18 @@
 import { parentPort, workerData } from "node:worker_threads";
-import { addCssFileContent, hmrState } from "./state.js";
+import { activeStreams, addCssFileContent, hmrState } from "./state.js";
 import { handleRender } from "./handleRender.js";
-import type { RscWorkerOutputMessage, StreamHandlers } from "../types.js";
+import type {
+  HmrAcceptMessage,
+  RscWorkerInputMessage,
+  RscWorkerOutputMessage,
+  StreamHandlers,
+} from "../types.js";
+import { sendMessage } from "../sendMessage.js";
 
-export async function messageHandler(msg: any, port = parentPort) {
+export async function messageHandler(
+  msg: RscWorkerInputMessage,
+  port = parentPort
+) {
   if (!port) {
     throw new Error("No port found");
   }
@@ -48,6 +57,20 @@ export async function messageHandler(msg: any, port = parentPort) {
         metrics,
       } satisfies RscWorkerOutputMessage);
     },
+    onHmrAccept: (routes: string[]) => {
+      port.postMessage({
+        type: "HMR_ACCEPT",
+        id: (msg as HmrAcceptMessage).id,
+        routes: routes,
+      });
+    },
+    onHmrUpdate: (routes: string[]) => {
+      port.postMessage({
+        type: "HMR_UPDATE",
+        id: msg.id,
+        routes: routes,
+      });
+    },
   };
   switch (msg.type) {
     case "RSC_RENDER":
@@ -56,28 +79,23 @@ export async function messageHandler(msg: any, port = parentPort) {
       return;
     case "INITIALIZED_CSS_LOADER":
       return;
+    case "INITIALIZED_ENV_LOADER":
+      return;
     case "HMR_UPDATE":
       // Mark the module as invalidated
-      hmrState.set(msg.path, {
+      hmrState.set(msg.id, {
         timestamp: msg.timestamp || Date.now(),
         invalidated: true,
         routes: msg.routes || [],
       });
       // Notify the main thread that we've processed the update
-      port.postMessage({
-        type: "HMR_ACCEPT",
-        path: msg.path,
-        routes: msg.routes,
-      });
+      handlers.onHmrUpdate(msg.routes || []);
       return;
     case "HMR_CLEANUP":
       // Clear the invalidation state
-      hmrState.delete(msg.path);
+      hmrState.delete(msg.id);
       // Notify the main thread that we've processed the cleanup
-      port.postMessage({
-        type: "HMR_ACCEPT",
-        path: msg.path,
-      });
+      handlers.onHmrAccept(msg.routes || []);
       return;
     case "CSS_FILE":
       if (msg.id) {
@@ -87,13 +105,31 @@ export async function messageHandler(msg: any, port = parentPort) {
 
         addCssFileContent(msg.id, msg.content, {
           projectRoot: workerData.userOptions.projectRoot || process.cwd(),
-          moduleBaseURL: workerData.userOptions.moduleBaseURL || "",
-          moduleBasePath: workerData.userOptions.moduleBasePath || "",
-          moduleRootPath: workerData.userOptions.moduleRootPath || "",
+          moduleBaseURL: workerData.userOptions.moduleBaseURL || "/",
+          moduleBasePath: workerData.userOptions.moduleBasePath || "/",
+          moduleRootPath: workerData.userOptions.moduleRootPath,
           css: cssOptions,
         });
       }
       return;
+    case "SHUTDOWN": {
+      // If id is "*", clean up all render states
+      if (msg.id === "*") {
+        activeStreams.forEach((stream, renderId) => {
+          stream.end();
+          activeStreams.delete(renderId);
+        });
+        parentPort?.removeAllListeners();
+      } else {
+        activeStreams.delete(msg.id);
+      }
+      // Send SHUTDOWN_COMPLETE message to signal that shutdown is complete
+      sendMessage({
+        type: "SHUTDOWN_COMPLETE",
+        id: msg.id,
+      } satisfies RscWorkerOutputMessage);
+      return;
+    }
     default: {
       console.log("Unknown message", msg);
       return;