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

package/plugin/dev-server/virtualRscHmrPlugin.ts

@@ -0,0 +1,82 @@
+import type { Plugin } from "vite";
+
+const VIRTUAL_RSC_HMR = 'virtual:react-server/hmr';
+const RESOLVED_VIRTUAL_RSC_HMR = '\0' + VIRTUAL_RSC_HMR;
+
+/**
+ * Virtual module source for `virtual:react-server/hmr`.
+ * Self-contained — no imports from the plugin package, so no dep re-optimization.
+ * HMR code is dead-code eliminated in production builds (import.meta.hot is undefined).
+ */
+const VIRTUAL_RSC_HMR_SOURCE = /* js */`
+import { useEffect, useCallback } from "react";
+
+const RSC_HMR_EVENT = 'vite-plugin-react-server:server-component-update';
+
+export { RSC_HMR_EVENT };
+
+export function useRscHmr(refetch, options = {}) {
+  const { verbose = true, filter } = options;
+
+  const handler = useCallback(
+    (data) => {
+      if (filter && !filter(data)) return;
+      if (verbose) {
+        console.log('[RSC HMR] Server component updated:', data.file);
+      }
+      refetch(window.location.pathname);
+    },
+    [refetch, verbose, filter]
+  );
+
+  useEffect(() => {
+    if (typeof import.meta.hot === 'undefined') return;
+    import.meta.hot.on(RSC_HMR_EVENT, handler);
+    if (verbose) {
+      console.log('[RSC HMR] Listening for server component updates');
+    }
+    return () => {
+      import.meta.hot.off(RSC_HMR_EVENT, handler);
+    };
+  }, [handler, verbose]);
+}
+
+export function setupRscHmr(options = {}) {
+  const { onUpdate, verbose = true } = options;
+  if (typeof import.meta.hot === 'undefined') return;
+  import.meta.hot.on(RSC_HMR_EVENT, async (data) => {
+    if (verbose) {
+      console.log('[RSC HMR] Server component updated:', data.file);
+    }
+    if (onUpdate === 'reload') {
+      window.location.reload();
+      return;
+    }
+    if (onUpdate) {
+      try { await onUpdate(data); }
+      catch (error) { console.error('[RSC HMR] Error in onUpdate handler:', error); window.location.reload(); }
+    } else {
+      window.location.reload();
+    }
+  });
+  if (verbose) {
+    console.log('[RSC HMR] Listening for server component updates');
+  }
+}
+`;
+
+/**
+ * Plugin that provides the `virtual:react-server/hmr` module.
+ * Works in both dev and build — HMR code tree-shakes away in production.
+ */
+export function virtualRscHmrPlugin(): Plugin {
+  return {
+    name: "vite-plugin-react-server:virtual-rsc-hmr",
+    resolveId(id) {
+      if (id === VIRTUAL_RSC_HMR) return RESOLVED_VIRTUAL_RSC_HMR;
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_RSC_HMR) return VIRTUAL_RSC_HMR_SOURCE;
+    },
+  };
+}

package/plugin/env/createConfigEnv.ts

@@ -0,0 +1,59 @@
+import type { ConfigEnv } from "vite";
+import { getNodeEnv } from "../config/getNodeEnv.js";
+import { getArgValue } from "./getArgValue.js";
+import { getCondition } from "../config/getCondition.js";
+
+/**
+ * Extended ConfigEnv that includes our custom properties
+ */
+export interface ExtendedConfigEnv extends ConfigEnv {
+  isAppMode?: boolean;
+}
+
+/**
+ * Reconstruct ConfigEnv from process.argv and environment variables
+ * This allows us to determine the config environment before the config hook runs
+ */
+export const createConfigEnv = (
+  mode: string = getNodeEnv(),
+  command: "build" | "serve" = "serve",
+  argv: string[] = process.argv
+): ExtendedConfigEnv => {
+  // Detect command from argv
+  if (argv.includes("build")) {
+    command = "build";
+  } else {
+    command = "serve";
+  }
+
+  // Detect mode from argv or environment
+  const modeArg = getArgValue("mode");
+  if (modeArg) {
+    mode = modeArg;
+  }
+
+  // Detect SSR build
+  const ssrArg = getArgValue("ssr");
+  let isSsrBuild = ssrArg === "true" || ssrArg === "1";
+
+  // In --app mode, check the current environment to determine if it's SSR
+  const appArg = getArgValue("app");
+  const isAppMode = appArg === "true" || appArg === "1" || argv.includes("--app");
+  
+  if (isAppMode) {
+    // Check if we're in an SSR environment by looking at the current environment
+    const currentEnvironment = getCondition('')
+    if (currentEnvironment === "server") {
+      isSsrBuild = true;
+    } else if (currentEnvironment === "client") {
+      isSsrBuild = false;
+    }
+  }
+
+  return {
+    command,
+    mode,
+    isSsrBuild,
+    isAppMode,
+  };
+};

package/plugin/env/createEnvPlugin.ts

@@ -0,0 +1,76 @@
+import type { Plugin, UserConfig } from "vite";
+import { resolveEnv } from "../config/resolveEnv.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { getEnvValue, setEnvValue } from "./getEnvKey.js";
+import { userProjectRoot } from "../root.js";
+
+export const createEnvPlugin =
+  (_maintThreadCondition: string) =>
+  (_options?: any): Plugin => {
+    let cleanupEnv: (() => void) | undefined;
+    const vitePrefix = DEFAULT_CONFIG.ENV_PREFIX as string;
+
+    // Set up environment variables immediately when plugin is created
+    const mode = getEnvValue("MODE", vitePrefix) || "development";
+    cleanupEnv = resolveEnv(mode, userProjectRoot, vitePrefix);
+
+    return {
+      name: "vite:plugin-react-server/env",
+      enforce: "post",
+
+      async config(config: UserConfig, configEnv) {
+        
+
+        // Set environment variables for the build
+        if (configEnv.isSsrBuild) {
+          process.env["VITE_SSR"] = "true";
+        }
+
+        // The environment plugin should not directly configure outputs
+        // Each environment should run through proper auto-discovery and resolveUserConfig
+        // TODO: Properly integrate with Environment API to create separate build environments
+
+        return config;
+      },
+
+      closeBundle() {
+        // Clean up environment variables when the bundle is closed
+        if (cleanupEnv) {
+          cleanupEnv();
+        }
+      },
+
+      configureServer(server) {
+        const envPrefix = Array.isArray(server.config.envPrefix)
+          ? server.config.envPrefix[0]
+          : server.config.envPrefix ?? DEFAULT_CONFIG.ENV_PREFIX;
+        const publicOrigin = getEnvValue("PUBLIC_ORIGIN", envPrefix) ?? "";
+
+        const desiredPort = server.config.server.port;
+        let shouldUpdatePublicOrigin = false;
+        if (publicOrigin && publicOrigin.includes(`:${desiredPort}`)) {
+          shouldUpdatePublicOrigin = true;
+        }
+        // Listen for when the server actually starts
+        if (shouldUpdatePublicOrigin) {
+          server.httpServer?.once("listening", () => {
+            const address = server.httpServer?.address();
+            if (address && typeof address !== "string") {
+              const port = address.port;
+              if (port !== desiredPort) {
+                const envPrefix = Array.isArray(server.config.envPrefix)
+                  ? server.config.envPrefix[0]
+                  : server.config.envPrefix ?? DEFAULT_CONFIG.ENV_PREFIX;
+                const newOrigin = publicOrigin.replace(
+                  `:${desiredPort}`,
+                  `:${port}`
+                );
+                setEnvValue("PUBLIC_ORIGIN", newOrigin, envPrefix);
+                console.warn("PUBLIC_ORIGIN did not match the port: " + port);
+              }
+            }
+          });
+        }
+      },
+    };
+  };

package/plugin/env/getArgValue.ts

@@ -0,0 +1,56 @@
+/**
+ * Helper function to parse command-line arguments in both formats:
+ * --arg value (space-separated) and --arg=value (equals-separated)
+ * Handles Vite CLI patterns including short forms, optional arguments, and duplicates
+ * Based on Vite's CLI implementation patterns
+ */
+export function getArgValue(argName: string, shortForm?: string): string | undefined {
+  const args = process.argv;
+  const foundValues: string[] = [];
+
+  // Check for --arg=value format first (all occurrences)
+  for (const arg of args) {
+    if (arg.startsWith(`--${argName}=`)) {
+      const value = arg.substring(`--${argName}=`.length);
+      foundValues.push(value);
+    }
+    // Also check short form if provided
+    if (shortForm && arg.startsWith(`-${shortForm}=`)) {
+      const value = arg.substring(`-${shortForm}=`.length);
+      foundValues.push(value);
+    }
+  }
+
+  // Check for --arg value format (space-separated)
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    
+    // Check long form
+    if (arg === `--${argName}`) {
+      // If this is the last argument or next argument starts with -, 
+      // then this is a boolean flag or optional argument without value
+      if (i + 1 >= args.length || args[i + 1].startsWith("-")) {
+        foundValues.push("");
+      } else {
+        foundValues.push(args[i + 1]);
+      }
+    }
+    
+    // Check short form if provided  
+    if (shortForm && arg === `-${shortForm}`) {
+      if (i + 1 >= args.length || args[i + 1].startsWith("-")) {
+        foundValues.push("");
+      } else {
+        foundValues.push(args[i + 1]);
+      }
+    }
+  }
+
+  // Return undefined if no values found
+  if (foundValues.length === 0) {
+    return undefined;
+  }
+
+  // Like Vite's filterDuplicateOptions, take the last value when there are duplicates
+  return foundValues[foundValues.length - 1];
+}

package/plugin/env/getEnvKey.ts

@@ -0,0 +1,80 @@
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { getNodeEnv } from "../config/getNodeEnv.js";
+
+/**
+ * Standard environment variable keys that should be prefixed
+ */
+export const ENV_KEYS = {
+  MODE: "MODE",
+  DEV: "DEV", 
+  PROD: "PROD",
+  SSR: "SSR",
+  BASE_URL: "BASE_URL",
+  PUBLIC_ORIGIN: "PUBLIC_ORIGIN"
+} as const;
+
+export type EnvKey = keyof typeof ENV_KEYS;
+
+/**
+ * Gets the full environment variable name with the configured prefix
+ * @param key The environment variable key (e.g., "MODE", "DEV", "BASE_URL")
+ * @param prefix The environment prefix (defaults to user config or "VITE_")
+ * @returns The full environment variable name (e.g., "VITE_MODE", "CUSTOM_PREFIX_DEV")
+ */
+export function getEnvKey(key: EnvKey, prefix?: string): string {
+  return `${prefix ?? DEFAULT_CONFIG.ENV_PREFIX}${ENV_KEYS[key]}`;
+}
+
+/**
+ * Gets the environment variable value with the configured prefix
+ * @param key The environment variable key
+ * @param prefix The environment prefix (optional)
+ * @returns The environment variable value or undefined
+ */
+export function getEnvValue(key: EnvKey, prefix: string = DEFAULT_CONFIG.ENV_PREFIX): string | undefined {
+  const result =  process.env[getEnvKey(key, prefix)];
+
+  if(result == null && prefix === DEFAULT_CONFIG.ENV_PREFIX) {
+    if(key === 'MODE') return getNodeEnv();
+  }
+
+  return result;
+}
+
+/**
+ * Sets an environment variable with the configured prefix
+ * @param key The environment variable key
+ * @param value The value to set
+ * @param prefix The environment prefix (optional)
+ */
+export function setEnvValue(key: EnvKey, value: string, prefix: string = DEFAULT_CONFIG.ENV_PREFIX): void {
+  process.env[getEnvKey(key, prefix)] = value;
+}
+
+/**
+ * Checks if the SSR environment variable is enabled
+ * @param prefix The environment prefix (optional)
+ * @returns true if SSR is enabled, false otherwise
+ */
+export function isSsrEnabled(prefix: string = DEFAULT_CONFIG.ENV_PREFIX): boolean {
+  const ssrValue = getEnvValue("SSR", prefix);
+  return typeof ssrValue === "string"
+    ? ssrValue === "true" || ssrValue === "1"
+    : Boolean(ssrValue);
+}
+
+/**
+ * Creates an object with all standard environment variable keys for the given prefix
+ * @param prefix The environment prefix
+ * @returns Object with all environment variable names
+ */
+export function getEnvKeys(prefix: string = DEFAULT_CONFIG.ENV_PREFIX): Record<EnvKey, string> {
+  return {
+    MODE: getEnvKey("MODE", prefix),
+    DEV: getEnvKey("DEV", prefix),
+    PROD: getEnvKey("PROD", prefix),
+    SSR: getEnvKey("SSR", prefix),
+    BASE_URL: getEnvKey("BASE_URL", prefix),  
+    PUBLIC_ORIGIN: getEnvKey("PUBLIC_ORIGIN", prefix)
+  };
+} 

package/plugin/env/index.ts

@@ -1 +1,14 @@
-export * from './plugin.js';
+import type { Plugin } from "vite";
+import { getCondition } from "../config/getCondition.js";
+
+const dir = new URL("./", import.meta.url).pathname.replace(/\/$/, "");
+const condition = getCondition("");
+
+export const { envPlugin } = (await import(`${dir}/plugin.${condition}.js`)) as {
+  envPlugin: () => Plugin;
+};
+
+export * from './plugin.js';
+export * from './userConfigEnv.js'; 
+export * from './getArgValue.js';
+export * from './createConfigEnv.js';

package/plugin/env/plugin.client.ts

@@ -0,0 +1,3 @@
+import { createEnvPlugin } from "./createEnvPlugin.js";
+export const envPlugin = createEnvPlugin("react-client");
+

package/plugin/env/plugin.server.ts

@@ -0,0 +1,4 @@
+import { createEnvPlugin } from "./createEnvPlugin.js";
+export const envPlugin = createEnvPlugin("react-server");
+
+

package/plugin/env/plugin.ts

@@ -1,178 +1,54 @@
 import type { Plugin } from "vite";
-import { resolveConfigDefine, resolveEnv } from "../config/resolveEnv.js";
-import { DEFAULT_CONFIG } from "../config/defaults.js";
-import { userProjectRoot } from "../root.js";
-import { getNodeEnv } from "../getNodeEnv.js";
-import type { ConfigEnv } from "vite";
+import { getCondition } from "../config/getCondition.js";
 
-/**
- * Reconstruct ConfigEnv from process.argv and environment variables
- * This allows us to determine the config environment before the config hook runs
- */
-export const createConfigEnv = (): ConfigEnv => {
-  const argv = process.argv;
-  
-  // Detect command from argv
-  let command: 'build' | 'serve' = 'serve';
-  if (argv.includes('build')) {
-    command = 'build';
-  } else if (argv.includes('dev') || argv.includes('serve') || argv.includes('preview')) {
-    command = 'serve';
+// Helper exports used by transformers
+export function getEnvironmentName(plugin: any): string | undefined {
+  if (plugin?.environment?.name) return plugin.environment.name;
+  if (plugin?.config && (plugin.config as any).environment?.name) {
+    return (plugin.config as any).environment.name;
   }
-  
-  // Detect mode from argv or environment
-  let mode: string = getNodeEnv();
-  const modeIndex = argv.findIndex(arg => arg === '--mode' || arg === '-m');
-  if (modeIndex !== -1 && argv[modeIndex + 1]) {
-    mode = argv[modeIndex + 1];
+  const traditionalModeConfig = (globalThis as any)
+    .__vitePluginReactServerTraditionalModeConfig;
+  if (traditionalModeConfig?.isTraditionalMode) {
+    return traditionalModeConfig.environmentName as string;
   }
-  
-  // Detect SSR build
-  const isSsrBuild = argv.includes('--ssr');
-  
-  return {
-    command,
-    mode,
-    isSsrBuild
-  };
-};
-
-/**
- * Helper function to parse command-line arguments in both formats:
- * --arg value (space-separated) and --arg=value (equals-separated)
- * Handles any IFS characters and edge cases
- */
-function getArgValue(argName: string): string | undefined {
-  // Check for --arg=value format first (handles any character after =)
-  const equalsArg = process.argv.find((arg) => arg.startsWith(`--${argName}=`));
-  if (equalsArg) {
-    return equalsArg.substring(`--${argName}=`.length);
-  }
-  
-  // Check for --arg value format (handles any IFS characters)
-  const argIndex = process.argv.findIndex((arg) => arg === `--${argName}`);
-  if (argIndex !== -1 && argIndex + 1 < process.argv.length) {
-    const value = process.argv[argIndex + 1];
-    // Only return if the next argument doesn't start with -- (isn't another flag)
-    if (value && !value.startsWith("--")) {
-      return value;
-    }
-  }
-  
   return undefined;
 }
 
-const isBuild = process.argv.includes("build");
-const isPreview = process.argv.includes("preview");
-
-
-// Set up environment variables from .env files as early as possible
-// This is to ensure that the env variables are available even in the config file,
-// and you can use process.env to configure the plugin.
+export function validateEnvironmentName(
+  environmentName: string,
+  allowedEnvironments: string[]
+): boolean {
+  return allowedEnvironments.includes(environmentName);
+}
 
-// Detect mode from command line arguments
-const detectedMode = getArgValue("mode");
 
-const cleanupInitialUserConfigEnv = resolveEnv(
-  detectedMode || process.env["NODE_ENV"] || (isBuild || isPreview ? "production" : "development"),
-  userProjectRoot,
-  DEFAULT_CONFIG.ENV_PREFIX
-);
+// Helper function to ensure config resolution in the correct condition
+export function ensureConditionalConfigResolution(environmentName: string) {
+  const appModeConfig = (globalThis as any)
+    .__vitePluginReactServerAppModeConfig;
 
-/**
- * This plugin can be used to set up the environment defined in the env file
- * and the `define` clause in the vite config to be directly assigned to the process.env,
- * making it available in workers, server components and plugin hooks like config, configureServer, etc.
- *
- * You can also set these variable in the package.json script like `VITE_PUBLIC_ORIGIN=https://example.com npm run build`
- * The default ones like `VITE_DEV` etc, are set to the default values if not defined in the env file or the `define` clause.
- *
- * If they do end up in the build, the define clause replaces process.env.VITE_BASE_URL etc, same like it
- * replaces `import.meta.env.BASE_URL`.
- *
- * While using node.process.env is dangerous as it may expose valuable information to the client, the define clause
- * replaces them in the build so it's safe as long as you stick to simple stuff like const baseUrl = process.env.VITE_BASE_URL
- * would be the same as writing const baseUrl = import.meta.env.BASE_URL. But this plugin doesn't enable that feature nor does
- * it return any config, it just sets the process.env variables at a early momemt and deletes them after the build unless they were
- * already set in the environment.
- * 
- * This plugin will not override process.env variable that were previously set, and will remove any values that it did set after the bundle closes.
- * ```example
- * const config = {
- *    moduleBase: 'src',
- *    // loaded from either .env file or existing process.env, based on the NODE_ENV
- *    publicOrigin: process.env.VITE_PUBLIC_ORIGIN,
- * }
- * ```
- * @returns
- */
-export function envPlugin(): Plugin {
-  let cleanupEnv: (() => void) | undefined;
-  let vitePrefix = DEFAULT_CONFIG.ENV_PREFIX as string;
-  return {
-    name: "vite-plugin-react-server:env",
-    enforce: "pre",
-    config(config, { mode }) {
-      if(config.envPrefix) {
-        if(typeof config.envPrefix === "string") {
-          vitePrefix = config.envPrefix;
-        } else if(Array.isArray(config.envPrefix)) {
-          vitePrefix = config.envPrefix[0];
-        }
-      }
-      const invalidEnv =
-        (mode !== undefined && mode !== process.env[`${vitePrefix}MODE`]) ||
-        (config.root !== undefined && config.root !== userProjectRoot);
-      if (invalidEnv) {
-        cleanupInitialUserConfigEnv();
-      }
-      // Clean up any previous env setup
-      const cleanupUserConfigEnv = invalidEnv
-        ? resolveEnv(
-            mode || process.env[`${vitePrefix}MODE`] || "production",
-            config.root ?? userProjectRoot,
-            vitePrefix
-          )
-        : cleanupInitialUserConfigEnv;
-      const cleanupUserConfig = resolveConfigDefine(config);
+  if (appModeConfig && appModeConfig.isAppMode) {
+    // In --app mode, ensure we're resolving in the correct condition
+    const condition =
+      environmentName === "server" ? "react-server" : "react-client";
 
-      // Combine cleanup functions
-      cleanupEnv = () => {
-        cleanupUserConfig();
-        cleanupUserConfigEnv();
-      };
-    },
-    closeBundle() {
-      // Clean up environment variables when the bundle is closed
-      cleanupEnv?.();
-    },
-    configureServer(server) {
-      const envPrefix = Array.isArray(server.config.envPrefix) ? server.config.envPrefix[0] : server.config.envPrefix ?? DEFAULT_CONFIG.ENV_PREFIX;
-      const publicOrigin = process.env[`${envPrefix}PUBLIC_ORIGIN`] ?? ""
+    if (!appModeConfig.resolvedInConditions.has(condition)) {
+      appModeConfig.resolvedInConditions.add(condition);
 
-      const desiredPort = server.config.server.port;
-      let shouldUpdatePublicOrigin = false;
-      if (publicOrigin && publicOrigin.includes(`:${desiredPort}`)) {
-        shouldUpdatePublicOrigin = true;
-      }
-      // Listen for when the server actually starts
-      if (shouldUpdatePublicOrigin) {
-        server.httpServer?.once("listening", () => {
-          const address = server.httpServer?.address();
-          if (address && typeof address !== "string") {
-            const port = address.port;
-            if (port !== desiredPort) {
-              const envPrefix = Array.isArray(server.config.envPrefix) ? server.config.envPrefix[0] : server.config.envPrefix ?? DEFAULT_CONFIG.ENV_PREFIX;
-              const newOrigin = publicOrigin.replace(
-                `:${desiredPort}`,
-                `:${port}`
-              );
-              process.env[`${envPrefix}PUBLIC_ORIGIN`] = newOrigin
-              console.warn("PUBLIC_ORIGIN did not match the port: " + port);
-            }
-          }
-        });
-      }
+      // This could trigger additional config resolution if needed
+      return true;
+    } else {
+      return false;
     }
-  };
+  }
+
+  return false;
 }
+
+const dir = new URL("./", import.meta.url).pathname.replace(/\/$/, "");
+const condition = getCondition("");
+
+export const { envPlugin } = (await import(`${dir}/plugin.${condition}.js`)) as {
+  envPlugin: () => Plugin;
+};

package/plugin/env/userConfigEnv.ts

@@ -0,0 +1,22 @@
+import { resolveEnv } from "../config/resolveEnv.js";
+import { DEFAULT_CONFIG } from "../config/defaults.js";
+import { userProjectRoot } from "../root.js";
+import { getArgValue } from "./getArgValue.js";
+
+
+const isBuild = process.argv.includes("build");
+const isPreview = process.argv.includes("preview");
+
+
+// Set up environment variables from .env files as early as possible
+// This is to ensure that the env variables are available even in the config file,
+// and you can use process.env to configure the plugin.
+
+// Detect mode from command line arguments
+const detectedMode = getArgValue("mode")  || process.env["NODE_ENV"] || (isBuild || isPreview ? "production" : "development");
+
+export const userConfigEnv = resolveEnv(
+  detectedMode,
+  userProjectRoot,  
+  DEFAULT_CONFIG.ENV_PREFIX
+);