vite-plugin-react-server 1.1.12 → 1.1.13

package/plugin/source-map/readMappings.ts

@@ -0,0 +1,195 @@
+// alternative to webpack-sources/lib/helpers/readMappings.js
+// unused for now, but it's a dependency of react-server-dom-esm and you may or may not want to download webpack-sources
+export function readMappings(
+  mappings: string,
+  onMapping: (
+    generatedLine: number,
+    generatedColumn: number,
+    sourceIndex: number,
+    originalLine: number,
+    originalColumn: number,
+    nameIndex: number
+  ) => void
+) {
+  let generatedLine = 1;
+  let generatedColumn = 0;
+  let sourceIndex = 0;
+  let originalLine = 1;
+  let originalColumn = 0;
+  let nameIndex = 0;
+  let i = 0;
+  while (i < mappings.length) {
+    if (mappings[i] === ";") {
+      generatedLine++;
+      generatedColumn = 0;
+      i++;
+    } else if (mappings[i] === ",") {
+      i++;
+    } else {
+      let value = 0;
+      let shift = 0;
+      let hasMore = true;
+      while (hasMore) {
+        const c = mappings.charCodeAt(i++);
+        if (c >= 65 && c <= 90) {
+          value += (c - 65) << shift;
+        } else if (c >= 97 && c <= 122) {
+          value += (c - 97) << shift;
+        } else if (c >= 48 && c <= 57) {
+          value += (c - 48 + 26) << shift;
+        } else if (c === 43) {
+          value += 62 << shift;
+        } else if (c === 47) {
+          value += 63 << shift;
+        } else {
+          hasMore = false;
+        }
+        if (hasMore) {
+          shift += 6;
+        }
+      }
+      let isNegative = value & 1;
+      value = value >> 1;
+      if (isNegative) {
+        value = -value;
+      }
+      generatedColumn += value;
+      if (i < mappings.length && mappings[i] !== ";" && mappings[i] !== ",") {
+        value = 0;
+        shift = 0;
+        hasMore = true;
+        while (hasMore) {
+          const c = mappings.charCodeAt(i++);
+          if (c >= 65 && c <= 90) {
+            value += (c - 65) << shift;
+          } else if (c >= 97 && c <= 122) {
+            value += (c - 97) << shift;
+          } else if (c >= 48 && c <= 57) {
+            value += (c - 48 + 26) << shift;
+          } else if (c === 43) {
+            value += 62 << shift;
+          } else if (c === 47) {
+            value += 63 << shift;
+          } else {
+            hasMore = false;
+          }
+          if (hasMore) {
+            shift += 6;
+          }
+        }
+        isNegative = value & 1;
+        value = value >> 1;
+        if (isNegative) {
+          value = -value;
+        }
+        sourceIndex += value;
+        if (i < mappings.length && mappings[i] !== ";" && mappings[i] !== ",") {
+          value = 0;
+          shift = 0;
+          hasMore = true;
+          while (hasMore) {
+            const c = mappings.charCodeAt(i++);
+            if (c >= 65 && c <= 90) {
+              value += (c - 65) << shift;
+            } else if (c >= 97 && c <= 122) {
+              value += (c - 97) << shift;
+            } else if (c >= 48 && c <= 57) {
+              value += (c - 48 + 26) << shift;
+            } else if (c === 43) {
+              value += 62 << shift;
+            } else if (c === 47) {
+              value += 63 << shift;
+            } else {
+              hasMore = false;
+            }
+            if (hasMore) {
+              shift += 6;
+            }
+          }
+          isNegative = value & 1;
+          value = value >> 1;
+          if (isNegative) {
+            value = -value;
+          }
+          originalLine += value;
+          if (
+            i < mappings.length &&
+            mappings[i] !== ";" &&
+            mappings[i] !== ","
+          ) {
+            value = 0;
+            shift = 0;
+            hasMore = true;
+            while (hasMore) {
+              const c = mappings.charCodeAt(i++);
+              if (c >= 65 && c <= 90) {
+                value += (c - 65) << shift;
+              } else if (c >= 97 && c <= 122) {
+                value += (c - 97) << shift;
+              } else if (c >= 48 && c <= 57) {
+                value += (c - 48 + 26) << shift;
+              } else if (c === 43) {
+                value += 62 << shift;
+              } else if (c === 47) {
+                value += 63 << shift;
+              } else {
+                hasMore = false;
+              }
+              if (hasMore) {
+                shift += 6;
+              }
+            }
+            isNegative = value & 1;
+            value = value >> 1;
+            if (isNegative) {
+              value = -value;
+            }
+            originalColumn += value;
+            if (
+              i < mappings.length &&
+              mappings[i] !== ";" &&
+              mappings[i] !== ","
+            ) {
+              value = 0;
+              shift = 0;
+              hasMore = true;
+              while (hasMore) {
+                const c = mappings.charCodeAt(i++);
+                if (c >= 65 && c <= 90) {
+                  value += (c - 65) << shift;
+                } else if (c >= 97 && c <= 122) {
+                  value += (c - 97) << shift;
+                } else if (c >= 48 && c <= 57) {
+                  value += (c - 48 + 26) << shift;
+                } else if (c === 43) {
+                  value += 62 << shift;
+                } else if (c === 47) {
+                  value += 63 << shift;
+                } else {
+                  hasMore = false;
+                }
+                if (hasMore) {
+                  shift += 6;
+                }
+              }
+              isNegative = value & 1;
+              value = value >> 1;
+              if (isNegative) {
+                value = -value;
+              }
+              nameIndex += value;
+            }
+          }
+        }
+      }
+      onMapping(
+        generatedLine,
+        generatedColumn,
+        sourceIndex,
+        originalLine,
+        originalColumn,
+        nameIndex
+      );
+    }
+  }
+}

package/plugin/transformer/README.md

@@ -1,44 +1,310 @@
-# Vite React Client Transform plugin
+# Vite React Transform Plugin
 
-When consuming such a client file, you need to call vite with the react-server condition.
+This plugin provides the core transformation functionality for React Server Components (RSC) in Vite. It handles both client and server-side transformations, enabling seamless integration between React Server Components and Vite's build system.
+
+## Module Transformation Strategy
+
+The plugin uses a sophisticated approach to transform modules while preserving their structure. Each loader (client and server) handles BOTH client and server modules, but in their respective environments:
+
+### Environment-Specific Transformations
+
+#### Client Environment Loader
+Handles both:
+1. Client Modules ("use client")
+   - Registers client components for RSC boundaries
+   - Preserves client-side functionality
+
+2. Server Modules ("use server")
+   - Transforms server actions into client-side references
+   - Creates proxies for server function calls
+   - Handles server action imports
+
+#### Server Environment Loader
+Handles both:
+1. Server Modules ("use server")
+   - Registers server actions for RSC boundaries
+   - Preserves server-side functionality
+   - Handles server action imports
+
+2. Client Modules ("use client")
+   - Registers client components for RSC boundaries
+   - Creates server-side references for client components
+   - Ensures proper server-side rendering
+
+### AST-Based Transformation
+
+Both loaders use Abstract Syntax Trees (AST) to:
+1. Find the first export declaration
+2. Split source code into before/after exports
+3. Insert registration code in the right place
+4. Preserve original exports
+
+This ensures:
+- Imports stay at the top
+- Registration code is added in the right place
+- Original exports are preserved
+- No duplicate exports
+
+### Example Transformations
+
+#### Client Environment
+
+Client Module:
+```ts
+// Original
+"use client"
+import { useState } from 'react';
+export function Counter() { ... }
+
+// Transformed
+"use client"
+import { useState } from 'react';
+
+// Register client components
+if (typeof Counter === "function") {
+  const clientReference = registerClientReference(Counter, "url", "Counter", {...});
+  Counter = clientReference;
+}
+
+export function Counter() { ... }
+```
+
+Server Module:
+```ts
+// Original
+"use server"
+export async function add(a: number, b: number) { ... }
+
+// Transformed
+"use server"
+
+// Transform server action into client reference
+const add = function(...args) {
+  const serverReference = registerServerReference("url#add", add);
+  return serverReference.apply(null, args);
+};
+Object.defineProperties(add, {
+  $$typeof: { value: Symbol.for("react.server.reference") },
+  $$id: { value: "url#add" },
+  $$bound: { value: null },
+  $$name: { value: "add" }
+});
+
+export { add };
+```
+
+#### Server Environment
+
+Server Module:
+```ts
+// Original
+"use server"
+export async function add(a: number, b: number) { ... }
+
+// Transformed
+"use server"
+
+// Register server actions
+if (typeof add === "function") {
+  const serverReference = registerServerReference(add, "url", "add", {...});
+  add = serverReference;
+}
+
+export async function add(a: number, b: number) { ... }
+```
+
+Client Module:
+```ts
+// Original
+"use client"
+import { useState } from 'react';
+export function Counter() { ... }
+
+// Transformed
+"use client"
+import { useState } from 'react';
+
+// Register client components
+if (typeof Counter === "function") {
+  const clientReference = registerClientReference(Counter, "url", "Counter", {...});
+  Counter = clientReference;
+}
+
+export function Counter() { ... }
+```
+
+### Key Benefits
+
+1. **Environment-Aware Transformations**
+   - Each loader handles both module types
+   - Transformations are environment-specific
+   - Proper RSC boundary handling
+
+2. **Preserves Module Structure**
+   - Maintains original import order
+   - Keeps exports in their original location
+   - Preserves source maps
+
+3. **Handles Complex Cases**
+   - Server action imports from .server files
+   - Client component registration
+   - Proper metadata for RSC boundaries
+   - Environment-specific transformations
+
+4. **Avoids Common Pitfalls**
+   - No duplicate exports
+   - No broken source maps
+   - No mangled imports
+   - Proper environment isolation
+
+## Usage
+
+When using this plugin, you need to set the `react-server` condition in your Vite configuration:
 
 ```json
 { 
-    "scripts":{
+    "scripts": {
         "build": "NODE_OPTIONS='--conditions react-server' vite build",
-        "dev": "NODE_OPTIONS='--conditions react-server' vite",
+        "dev": "NODE_OPTIONS='--conditions react-server' vite"
     }
 }
 ```
 
-## Key Concepts
+## Architecture
+
+### Environment Separation
 
-1. **Environment Separation**
-   - The main thread runs with Vite's `react-server` condition
-   - HTML rendering must happen in a clean Node environment (worker thread)
-   - Worker needs `NODE_OPTIONS=''` to avoid inheriting Vite's conditions
+The plugin maintains a clear separation between different environments and uses dedicated workers for each scenario:
 
-2. **RSC Stream Flow**
-   ```
-   Main Thread (Vite)     Worker Thread (Clean Node)            Vite Dev Thread (Browser)
-   ---------------        ---------------------                 ---------------------
-   RSC Stream     →       HTML Rendering                        React Client
-   (react-server) →       (react-dom/server.node)               (react-dom/client)
-                  →       (react-server-dom-esm/client.node)    (react-server-dom-esm/client.browser)
-   ```
+1. **Client-Side Scenario**
+   - Main Thread (Vite)
+     - Runs with Vite's default conditions
+     - Handles client-side module transformation
+     - Manages the client build pipeline
+   - HTML Worker Thread
+     - Runs in a clean Node environment
+     - Handles HTML rendering
+     - Uses `react-dom/server` for server-side rendering
+     - Uses `react-server-dom-esm/client.node` for client-side RSC
+     - Processes static HTML generation
+
+2. **Server-Side Scenario**
+   - Main Thread (Vite)
+     - Runs with `react-server` condition
+     - Handles server-side module transformation
+     - Manages the server build pipeline
+   - RSC Worker Thread
+     - Runs in a clean Node environment
+     - Handles RSC streaming
+     - Uses `react-server-dom-esm/server.node`
+     - Processes server component requests
+
+3. **Browser Environment**
+   - Client-side React components
+   - Uses `react-dom/client`
+   - Handles hydration and client-side updates
+
+### RSC Stream Flow
+
+#### Client-Side Flow
+```
+Main Thread (Vite)     HTML Worker Thread (Clean Node)        Browser
+---------------        ---------------------                 ---------------------
+Client Modules →       HTML Rendering                        React Client
+                     (react-dom/server)                      (react-dom/client)
+                     (react-server-dom-esm/client.node)      (react-server-dom-esm/client.browser)
+```
+
+#### Server-Side Flow
+```
+Main Thread (Vite)     RSC Worker Thread (Clean Node)         Static Output
+---------------        ---------------------                 ---------------------
+Server Modules →       RSC Streaming                         Static Files
+(react-server) →       (react-server-dom-esm/server.node)    (HTML + RSC)
+```
 
-3. **Request Handling**
-   - Skip Vite's internal requests (`/@vite/client`, etc.)
-   - Handle HTML and directory requests
-   - Pass through static files
+## Key Features
 
-4. **Module Resolution**
-   - Client components need proper import maps
-   - Use Vite's module resolution for dependencies
-   - Bootstrap modules must be properly resolved
+1. **Module Transformation**
+   - Transforms "use client" and "use server" directives
+   - Handles client/server component boundaries
+   - Manages module resolution and imports
 
-5. **Common Pitfalls**
-   - Don't try to use `react-dom/server.node` in the main thread
-   - Don't mix React server/client conditions in the same environment
+2. **Request Handling**
+   - Processes HTML and directory requests
+   - Skips Vite's internal requests
+   - Handles static file serving
+
+3. **Module Resolution**
+   - Maintains proper import maps for client components
+   - Resolves dependencies using Vite's module system
+   - Handles bootstrap module resolution
+
+## Common Pitfalls
+
+1. **Environment Conflicts**
+   - Don't use `react-dom/server.node` in the main thread
+   - Avoid mixing React server/client conditions
+   - Keep worker thread environments clean
+   - Ensure proper worker thread isolation
+
+2. **Stream Handling**
    - Be careful with stream handling between threads
-   - Watch for proper module resolution in both environments
+   - Ensure proper error handling in streams
+   - Monitor stream backpressure
+   - Handle worker thread communication properly
+
+3. **Module Resolution**
+   - Watch for proper module resolution in both environments
+   - Ensure consistent module IDs across client/server
+   - Handle path normalization correctly
+   - Maintain proper module boundaries between workers
+
+## Best Practices
+
+1. **Development**
+   - Use the `react-server` condition for development
+   - Monitor stream metrics for performance
+   - Use proper error boundaries
+   - Test both client and server scenarios
+
+2. **Production**
+   - Ensure proper build order (client → server → static)
+   - Monitor bundle sizes
+   - Test RSC boundaries thoroughly
+   - Verify worker thread performance
+
+3. **Debugging**
+   - Use source maps for debugging
+   - Monitor stream metrics
+   - Check module resolution paths
+   - Debug worker thread issues separately
+
+## Configuration
+
+The plugin can be configured through Vite's plugin system:
+
+```typescript
+import { defineConfig } from 'vite';
+import { reactTransformPlugin } from './plugin/transformer';
+
+export default defineConfig({
+  plugins: [
+    reactTransformPlugin({
+      // Plugin options
+    })
+  ]
+});
+```
+
+## Contributing
+
+When contributing to this plugin:
+
+1. Maintain environment separation
+2. Follow the established stream flow
+3. Test in all environments
+4. Update documentation for changes
+5. Consider performance implications
+6. Test both worker scenarios
+7. Ensure proper worker thread isolation

package/plugin/transformer/index.ts

@@ -1,2 +1 @@
 export { reactTransformPlugin as reactTransformPluginServer } from "./plugin.server.js";
-export { reactTransformPlugin as reactTransformPluginClient } from "./plugin.client.js";

package/plugin/transformer/plugin.client.ts

@@ -1,111 +0,0 @@
-import { resolveOptions } from "../config/resolveOptions.js";
-import type { ResolvedUserOptions, StreamPluginOptions } from "../types.js";
-import { type Manifest, type Plugin } from "vite";
-import { transformModuleIfNeeded } from "../loader/react-loader.js";
-import { join } from "node:path";
-import { tryManifest } from "../helpers/tryManifest.js";
-
-/**
- * Plugin for transforming server actions for the client build.
- *
- * Core responsibilities:
- * 1. Transforms "use server" directives
- * 2. Transforms server actions for the client build
- * 3. Uses react-loader's transformModuleIfNeeded to create a server action reference
- *
- * When a component is marked with "use server", it:
- * - Gets transformed into a server action
- * - Maintains module ID for RSC boundaries
- * - Preserves class/function behavior
- *
- * @example
- * ```ts
- * export default defineConfig({
- *   plugins: [
- *     viteReactClientTransformPlugin({
- *       projectRoot: process.cwd(),
- *     })
- *   ]
- * });
- * ```
- */
-let isBuild = true;
-
-export function reactTransformPlugin(options: StreamPluginOptions): Plugin {
-  let userOptions: ResolvedUserOptions;
-  const resolvedOptionsResult = resolveOptions(options);
-  if (resolvedOptionsResult.type === "error") throw resolvedOptionsResult.error;
-  userOptions = resolvedOptionsResult.userOptions;
-  let staticManifest: Manifest;
-
-  return {
-    name: "vite:react-server-action-transform",
-    enforce: "pre",
-    async config(_, configEnv) {
-      isBuild = configEnv.command !== "serve";
-      if (!configEnv.isSsrBuild) {
-        staticManifest = {};
-      } else {
-        const staticManifestResult = await tryManifest({
-          root: userOptions.projectRoot,
-          ssrManifest: false,
-          outDir: join(userOptions.build.outDir, userOptions.build.static),
-        });
-        if (staticManifestResult.type === "error") {
-          staticManifest = {};
-        } else {
-          staticManifest = staticManifestResult.manifest;
-        }
-      }
-    },
-    async transform(code, id, options) {
-      const ssr = options?.ssr;
-      const isServer = code.match('"use server"') !== null;
-      const isClient = code.match('"use client"') !== null;
-      if (!ssr) return null;
-      if (!isServer && !isClient) return null;
-      if (isServer && isClient) {
-        throw new Error(
-          "Server and client components cannot be used in the same file"
-        );
-      }
-      if (isClient) {
-        return null;
-      }
-      const [key, value] = userOptions.normalizer(id);
-      if (isServer && isBuild) {
-        id = key + ".js";
-      }
-      const finalID = userOptions.moduleID(value);
-      const transformed = await transformModuleIfNeeded(code, finalID, null);
-      if (!transformed) return null;
-      return {
-        code: transformed,
-        id: finalID,
-        map: null,
-      };
-    },
-    renderChunk(code, chunk, _options) {
-      // Only process client components
-      if (!chunk.fileName.includes(".client")) return null;
-
-      // Get the original file name without extension
-      const originalName = chunk.fileName.replace(userOptions.autoDiscover.moduleExtension, "");
-
-      // Find matching entry in static manifest
-      const manifestEntry = Object.entries(staticManifest).find(([_, info]) =>
-        info.file.startsWith(originalName)
-      );
-
-      if (manifestEntry) {
-        // Use the static manifest's file name
-        return {
-          code,
-          fileName: manifestEntry[1].file,
-        };
-      }
-
-      return null;
-    },
-  };
-}