@ivogt/rsc-router 0.0.0-experimental.10 → 0.0.0-experimental.12

package/dist/vite/index.js

@@ -675,7 +675,7 @@ import { resolve } from "node:path";
 // package.json
 var package_default = {
   name: "@ivogt/rsc-router",
-  version: "0.0.0-experimental.10",
+  version: "0.0.0-experimental.12",
   type: "module",
   description: "Type-safe RSC router with partial rendering support",
   author: "Ivo Todorov",
@@ -1070,14 +1070,10 @@ async function rscRouter(options) {
                   }
                 }
               },
-              // Pre-bundle rsc-html-stream and react-server-dom vendor to prevent discovery during first request
-              // The vendor file is CJS and needs to be transformed to ESM by Vite's optimizer
+              // Pre-bundle rsc-html-stream to prevent discovery during first request
               // Exclude rsc-router modules to ensure same Context instance
               optimizeDeps: {
-                include: [
-                  "rsc-html-stream/client",
-                  "@vitejs/plugin-rsc/vendor/react-server-dom/client.browser"
-                ],
+                include: ["rsc-html-stream/client"],
                 exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions
               }
@@ -1167,9 +1163,7 @@ async function rscRouter(options) {
                   }
                 },
                 // Always exclude rsc-router modules, conditionally add virtual entry
-                // Include react-server-dom vendor to transform CJS to ESM
                 optimizeDeps: {
-                  include: ["@vitejs/plugin-rsc/vendor/react-server-dom/client.browser"],
                   exclude: excludeDeps,
                   esbuildOptions: sharedEsbuildOptions,
                   ...useVirtualClient && {
@@ -1232,8 +1226,62 @@ async function rscRouter(options) {
   if (rscEntryPath) {
     plugins.push(createVersionInjectorPlugin(rscEntryPath));
   }
+  plugins.push(createCjsToEsmPlugin());
   return plugins;
 }
+function createCjsToEsmPlugin() {
+  return {
+    name: "rsc-router:cjs-to-esm",
+    enforce: "pre",
+    transform(code, id) {
+      const cleanId = id.split("?")[0];
+      if (cleanId.includes("vendor/react-server-dom/client.browser.js") || cleanId.includes("vendor\\react-server-dom\\client.browser.js")) {
+        const isProd = process.env.NODE_ENV === "production";
+        const cjsFile = isProd ? "./cjs/react-server-dom-webpack-client.browser.production.js" : "./cjs/react-server-dom-webpack-client.browser.development.js";
+        return {
+          code: `export * from "${cjsFile}";`,
+          map: null
+        };
+      }
+      if ((cleanId.includes("vendor/react-server-dom/cjs/") || cleanId.includes("vendor\\react-server-dom\\cjs\\")) && cleanId.includes("client.browser")) {
+        let transformed = code;
+        const licenseMatch = transformed.match(/^\/\*\*[\s\S]*?\*\//);
+        const license = licenseMatch ? licenseMatch[0] : "";
+        if (license) {
+          transformed = transformed.slice(license.length);
+        }
+        transformed = transformed.replace(/^\s*["']use strict["'];\s*/, "");
+        transformed = transformed.replace(
+          /^\s*["']production["']\s*!==\s*process\.env\.NODE_ENV\s*&&\s*\(function\s*\(\)\s*\{/,
+          ""
+        );
+        transformed = transformed.replace(/\}\)\(\);?\s*$/, "");
+        transformed = transformed.replace(
+          /var\s+React\s*=\s*require\s*\(\s*["']react["']\s*\)\s*,[\s\n]+ReactDOM\s*=\s*require\s*\(\s*["']react-dom["']\s*\)\s*,/g,
+          'import React from "react";\nimport ReactDOM from "react-dom";\nvar '
+        );
+        transformed = transformed.replace(
+          /var\s+ReactDOM\s*=\s*require\s*\(\s*["']react-dom["']\s*\)\s*,/g,
+          'import ReactDOM from "react-dom";\nvar '
+        );
+        transformed = transformed.replace(
+          /exports\.(\w+)\s*=\s*function\s*\(/g,
+          "export function $1("
+        );
+        transformed = transformed.replace(
+          /exports\.(\w+)\s*=/g,
+          "export const $1 ="
+        );
+        transformed = license + "\n" + transformed;
+        return {
+          code: transformed,
+          map: null
+        };
+      }
+      return null;
+    }
+  };
+}
 export {
   exposeActionId,
   exposeHandleId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ivogt/rsc-router",
-  "version": "0.0.0-experimental.10",
+  "version": "0.0.0-experimental.12",
   "type": "module",
   "description": "Type-safe RSC router with partial rendering support",
   "author": "Ivo Todorov",

package/src/vite/index.ts

@@ -477,14 +477,10 @@ export async function rscRouter(
                   },
                 },
               },
-              // Pre-bundle rsc-html-stream and react-server-dom vendor to prevent discovery during first request
-              // The vendor file is CJS and needs to be transformed to ESM by Vite's optimizer
+              // Pre-bundle rsc-html-stream to prevent discovery during first request
               // Exclude rsc-router modules to ensure same Context instance
               optimizeDeps: {
-                include: [
-                  "rsc-html-stream/client",
-                  "@vitejs/plugin-rsc/vendor/react-server-dom/client.browser",
-                ],
+                include: ["rsc-html-stream/client"],
                 exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions,
               },
@@ -598,9 +594,7 @@ export async function rscRouter(
                   },
                 },
                 // Always exclude rsc-router modules, conditionally add virtual entry
-                // Include react-server-dom vendor to transform CJS to ESM
                 optimizeDeps: {
-                  include: ["@vitejs/plugin-rsc/vendor/react-server-dom/client.browser"],
                   exclude: excludeDeps,
                   esbuildOptions: sharedEsbuildOptions,
                   ...(useVirtualClient && {
@@ -684,9 +678,9 @@ export async function rscRouter(
     plugins.push(createVersionInjectorPlugin(rscEntryPath));
   }
 
-  // CJS to ESM transformation is now handled by Vite's optimizeDeps.include
-  // See client environment config where we include "@vitejs/plugin-rsc/vendor/react-server-dom/client.browser"
-  // plugins.push(createCjsToEsmPlugin());
+  // Transform CJS vendor files to ESM for browser compatibility
+  // optimizeDeps.include doesn't work because the file is loaded after initial optimization
+  plugins.push(createCjsToEsmPlugin());
 
   return plugins;
 }
@@ -733,21 +727,30 @@ function createCjsToEsmPlugin(): Plugin {
           transformed = transformed.slice(license.length);
         }
 
-        // Remove "use strict" and the conditional IIFE wrapper
+        // Remove "use strict" (both dev and prod have this)
+        transformed = transformed.replace(/^\s*["']use strict["'];\s*/, "");
+
+        // Remove the conditional IIFE wrapper (development only)
         transformed = transformed.replace(
-          /^\s*["']use strict["'];\s*["']production["']\s*!==\s*process\.env\.NODE_ENV\s*&&\s*\(function\s*\(\)\s*\{/,
+          /^\s*["']production["']\s*!==\s*process\.env\.NODE_ENV\s*&&\s*\(function\s*\(\)\s*\{/,
           ""
         );
 
-        // Remove the closing of the conditional IIFE at the end
+        // Remove the closing of the conditional IIFE at the end (development only)
         transformed = transformed.replace(/\}\)\(\);?\s*$/, "");
 
-        // Replace require('react') and require('react-dom') with imports
+        // Replace require('react') and require('react-dom') with imports (development)
         transformed = transformed.replace(
           /var\s+React\s*=\s*require\s*\(\s*["']react["']\s*\)\s*,[\s\n]+ReactDOM\s*=\s*require\s*\(\s*["']react-dom["']\s*\)\s*,/g,
           'import React from "react";\nimport ReactDOM from "react-dom";\nvar '
         );
 
+        // Replace require('react-dom') only (production - doesn't import React)
+        transformed = transformed.replace(
+          /var\s+ReactDOM\s*=\s*require\s*\(\s*["']react-dom["']\s*\)\s*,/g,
+          'import ReactDOM from "react-dom";\nvar '
+        );
+
         // Transform exports.xyz = function() to export function xyz()
         transformed = transformed.replace(
           /exports\.(\w+)\s*=\s*function\s*\(/g,