@ivogt/rsc-router 0.0.0-experimental.7 → 0.0.0-experimental.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ivogt/rsc-router",
-  "version": "0.0.0-experimental.7",
+  "version": "0.0.0-experimental.9",
   "type": "module",
   "description": "Type-safe RSC router with partial rendering support",
   "author": "Ivo Todorov",
@@ -55,7 +55,7 @@
     },
     "./vite": {
       "types": "./src/vite/index.ts",
-      "import": "./src/vite/index.ts"
+      "import": "./dist/vite/index.js"
     },
     "./types": {
       "types": "./src/vite/version.d.ts"
@@ -89,6 +89,7 @@
   },
   "files": [
     "src",
+    "dist",
     "README.md"
   ],
   "peerDependencies": {
@@ -117,11 +118,13 @@
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
+    "esbuild": "^0.27.0",
     "tinyexec": "^0.3.2",
     "typescript": "^5.3.0",
     "vitest": "^2.1.8"
   },
   "scripts": {
+    "build": "pnpm dlx esbuild src/vite/index.ts --bundle --format=esm --outfile=dist/vite/index.js --platform=node --packages=external",
     "typecheck": "tsc --noEmit",
     "test": "playwright test",
     "test:ui": "playwright test --ui",

package/src/vite/index.ts

@@ -678,6 +678,92 @@ export async function rscRouter(
     plugins.push(createVersionInjectorPlugin(rscEntryPath));
   }
 
+  // Add CJS to ESM transformation for react-server-dom vendor files
+  plugins.push(createCjsToEsmPlugin());
+
   return plugins;
 }
 
+/**
+ * Transform CJS vendor files from @vitejs/plugin-rsc to ESM for browser compatibility.
+ * The react-server-dom vendor files are shipped as CJS which doesn't work in browsers.
+ */
+function createCjsToEsmPlugin(): Plugin {
+  return {
+    name: "rsc-router:cjs-to-esm",
+    enforce: "pre",
+    transform(code, id) {
+      const cleanId = id.split("?")[0];
+
+      // Transform the client.browser.js entry point to re-export from CJS
+      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,
+        };
+      }
+
+      // Transform the actual CJS files to ESM
+      if (
+        (cleanId.includes("vendor/react-server-dom/cjs/") ||
+          cleanId.includes("vendor\\react-server-dom\\cjs\\")) &&
+        cleanId.includes("client.browser")
+      ) {
+        let transformed = code;
+
+        // Extract the license comment to preserve it
+        const licenseMatch = transformed.match(/^\/\*\*[\s\S]*?\*\//);
+        const license = licenseMatch ? licenseMatch[0] : "";
+        if (license) {
+          transformed = transformed.slice(license.length);
+        }
+
+        // Remove "use strict" and the conditional IIFE wrapper
+        transformed = transformed.replace(
+          /^\s*["']use strict["'];\s*["']production["']\s*!==\s*process\.env\.NODE_ENV\s*&&\s*\(function\s*\(\)\s*\{/,
+          ""
+        );
+
+        // Remove the closing of the conditional IIFE at the end
+        transformed = transformed.replace(/\}\)\(\);?\s*$/, "");
+
+        // Replace require('react') and require('react-dom') with imports
+        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 '
+        );
+
+        // Transform exports.xyz = function() to export function xyz()
+        transformed = transformed.replace(
+          /exports\.(\w+)\s*=\s*function\s*\(/g,
+          "export function $1("
+        );
+
+        // Transform exports.xyz = value to export const xyz = value
+        transformed = transformed.replace(
+          /exports\.(\w+)\s*=/g,
+          "export const $1 ="
+        );
+
+        // Reconstruct with license at the top
+        transformed = license + "\n" + transformed;
+
+        return {
+          code: transformed,
+          map: null,
+        };
+      }
+
+      return null;
+    },
+  };
+}
+

package/src/vite/package-resolution.ts

@@ -5,47 +5,20 @@
  * appropriate aliases and exclude lists for Vite configuration.
  */
 
-import { existsSync, readFileSync } from "node:fs";
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
-// Get the directory of this file to find package.json
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-/**
- * Read the package name from package.json
- * This allows the name to change without updating hardcoded strings
- */
-function getPackageName(): string {
-  try {
-    // Navigate from src/vite/ to package root
-    const packageJsonPath = resolve(__dirname, "../../package.json");
-    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-    return packageJson.name;
-  } catch {
-    // Fallback to known name if package.json read fails
-    return "@ivogt/rsc-router";
-  }
-}
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+import packageJson from "../../package.json" with { type: "json" };
 
 /**
  * The canonical name used in virtual entries (without scope)
  */
 const VIRTUAL_PACKAGE_NAME = "rsc-router";
 
-/**
- * Cached package name from package.json
- */
-let _packageName: string | null = null;
-
 /**
  * Get the published package name (e.g., "@ivogt/rsc-router")
  */
 export function getPublishedPackageName(): string {
-  if (_packageName === null) {
-    _packageName = getPackageName();
-  }
-  return _packageName;
+  return packageJson.name;
 }
 
 /**