@ivogt/rsc-router 0.0.0-experimental.11 → 0.0.0-experimental.13

package/dist/vite/index.js

@@ -102,7 +102,7 @@ function exposeActionId() {
   let hashToFileMap;
   let rscPluginApi;
   return {
-    name: "rsc-router:expose-action-id",
+    name: "@ivogt/rsc-router:expose-action-id",
     // Run after all other plugins (including RSC plugin's transforms)
     enforce: "post",
     configResolved(resolvedConfig) {
@@ -116,7 +116,7 @@ function exposeActionId() {
       }
       if (!rscPluginApi) {
         throw new Error(
-          "[rsc-router] Could not find @vitejs/plugin-rsc. rsc-router requires the Vite RSC plugin.\nThe RSC plugin should be included automatically. If you disabled it with\nrscRouter({ rsc: false }), add rsc() before rscRouter() in your config."
+          "[rsc-router] Could not find @vitejs/plugin-rsc. @ivogt/rsc-router requires the Vite RSC plugin.\nThe RSC plugin should be included automatically. If you disabled it with\nrscRouter({ rsc: false }), add rsc() before rscRouter() in your config."
         );
       }
       if (!isBuild) return;
@@ -189,7 +189,7 @@ function hashLoaderId(filePath, exportName) {
   return `${hash.slice(0, 8)}#${exportName}`;
 }
 function hasCreateLoaderImport(code) {
-  const pattern = /import\s*\{[^}]*\bcreateLoader\b[^}]*\}\s*from\s*["']rsc-router(?:\/server)?["']/;
+  const pattern = /import\s*\{[^}]*\bcreateLoader\b[^}]*\}\s*from\s*["']@ivogt\/rsc-router(?:\/server)?["']/;
   return pattern.test(code);
 }
 function countCreateLoaderArgs(code, startPos, endPos) {
@@ -265,7 +265,7 @@ function exposeLoaderId() {
   const loaderRegistry = /* @__PURE__ */ new Map();
   const pendingLoaderScans = /* @__PURE__ */ new Map();
   return {
-    name: "rsc-router:expose-loader-id",
+    name: "@ivogt/rsc-router:expose-loader-id",
     enforce: "post",
     configResolved(resolvedConfig) {
       config = resolvedConfig;
@@ -325,7 +325,7 @@ function exposeLoaderId() {
     load(id) {
       if (id === RESOLVED_VIRTUAL_LOADER_MANIFEST) {
         if (!isBuild) {
-          return `import { setLoaderImports } from "rsc-router/server";
+          return `import { setLoaderImports } from "@ivogt/rsc-router/server";
 
 // Dev mode: empty map, loaders are resolved dynamically via path parsing
 setLoaderImports({});
@@ -338,13 +338,13 @@ setLoaderImports({});
           );
         }
         if (lazyImports.length === 0) {
-          return `import { setLoaderImports } from "rsc-router/server";
+          return `import { setLoaderImports } from "@ivogt/rsc-router/server";
 
 // No fetchable loaders discovered during build
 setLoaderImports({});
 `;
         }
-        const code = `import { setLoaderImports } from "rsc-router/server";
+        const code = `import { setLoaderImports } from "@ivogt/rsc-router/server";
 
 // Lazy import map - loaders are loaded on-demand when first requested
 setLoaderImports({
@@ -394,7 +394,7 @@ function hashHandleId(filePath, exportName) {
   return `${hash.slice(0, 8)}#${exportName}`;
 }
 function hasCreateHandleImport(code) {
-  const pattern = /import\s*\{[^}]*\bcreateHandle\b[^}]*\}\s*from\s*["']rsc-router(?:\/[^"']+)?["']/;
+  const pattern = /import\s*\{[^}]*\bcreateHandle\b[^}]*\}\s*from\s*["']@ivogt\/rsc-router(?:\/[^"']+)?["']/;
   return pattern.test(code);
 }
 function analyzeCreateHandleArgs(code, startPos, endPos) {
@@ -462,7 +462,7 @@ function exposeHandleId() {
   let config;
   let isBuild = false;
   return {
-    name: "rsc-router:expose-handle-id",
+    name: "@ivogt/rsc-router:expose-handle-id",
     enforce: "post",
     configResolved(resolvedConfig) {
       config = resolvedConfig;
@@ -497,7 +497,7 @@ function hashLocationStateKey(filePath, exportName) {
   return `${hash.slice(0, 8)}#${exportName}`;
 }
 function hasCreateLocationStateImport(code) {
-  const pattern = /import\s*\{[^}]*\bcreateLocationState\b[^}]*\}\s*from\s*["']rsc-router(?:\/[^"']+)?["']/;
+  const pattern = /import\s*\{[^}]*\bcreateLocationState\b[^}]*\}\s*from\s*["']@ivogt\/rsc-router(?:\/[^"']+)?["']/;
   return pattern.test(code);
 }
 function transformLocationStateExports(code, filePath, sourceId, isBuild = false) {
@@ -554,7 +554,7 @@ function exposeLocationStateId() {
   let config;
   let isBuild = false;
   return {
-    name: "rsc-router:expose-location-state-id",
+    name: "@ivogt/rsc-router:expose-location-state-id",
     enforce: "post",
     configResolved(resolvedConfig) {
       config = resolvedConfig;
@@ -584,11 +584,11 @@ import {
   setServerCallback,
   encodeReply,
   createTemporaryReferenceSet,
-} from "rsc-router/internal/deps/browser";
+} from "@ivogt/rsc-router/internal/deps/browser";
 import { createElement, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
-import { rscStream } from "rsc-router/internal/deps/html-stream-client";
-import { initBrowserApp, RSCRouter } from "rsc-router/browser";
+import { rscStream } from "@ivogt/rsc-router/internal/deps/html-stream-client";
+import { initBrowserApp, RSCRouter } from "@ivogt/rsc-router/browser";
 
 async function initializeApp() {
   const deps = {
@@ -610,10 +610,10 @@ async function initializeApp() {
 initializeApp().catch(console.error);
 `.trim();
 var VIRTUAL_ENTRY_SSR = `
-import { createFromReadableStream } from "rsc-router/internal/deps/ssr";
+import { createFromReadableStream } from "@ivogt/rsc-router/internal/deps/ssr";
 import { renderToReadableStream } from "react-dom/server.edge";
-import { injectRSCPayload } from "rsc-router/internal/deps/html-stream-server";
-import { createSSRHandler } from "rsc-router/ssr";
+import { injectRSCPayload } from "@ivogt/rsc-router/internal/deps/html-stream-server";
+import { createSSRHandler } from "@ivogt/rsc-router/ssr";
 
 export const renderHTML = createSSRHandler({
   createFromReadableStream,
@@ -632,10 +632,10 @@ import {
   loadServerAction,
   decodeAction,
   decodeFormState,
-} from "rsc-router/internal/deps/rsc";
+} from "@ivogt/rsc-router/internal/deps/rsc";
 import { router } from "${routerPath}";
-import { createRSCHandler } from "rsc-router/rsc";
-import { VERSION } from "rsc-router:version";
+import { createRSCHandler } from "@ivogt/rsc-router/rsc";
+import { VERSION } from "@ivogt/rsc-router:version";
 
 // Import loader manifest to ensure all fetchable loaders are registered at startup
 // This is critical for serverless/multi-process deployments where the loader module
@@ -662,7 +662,7 @@ var VIRTUAL_IDS = {
   browser: "virtual:rsc-router/entry.browser.js",
   ssr: "virtual:rsc-router/entry.ssr.js",
   rsc: "virtual:rsc-router/entry.rsc.js",
-  version: "rsc-router:version"
+  version: "@ivogt/rsc-router:version"
 };
 function getVirtualVersionContent(version) {
   return `export const VERSION = ${JSON.stringify(version)};`;
@@ -675,7 +675,7 @@ import { resolve } from "node:path";
 // package.json
 var package_default = {
   name: "@ivogt/rsc-router",
-  version: "0.0.0-experimental.11",
+  version: "0.0.0-experimental.13",
   type: "module",
   description: "Type-safe RSC router with partial rendering support",
   author: "Ivo Todorov",
@@ -810,7 +810,7 @@ var package_default = {
 };
 
 // src/vite/package-resolution.ts
-var VIRTUAL_PACKAGE_NAME = "rsc-router";
+var VIRTUAL_PACKAGE_NAME = "@ivogt/rsc-router";
 function getPublishedPackageName() {
   return package_default.name;
 }
@@ -870,13 +870,13 @@ function getPackageAliases() {
 
 // src/vite/index.ts
 var versionEsbuildPlugin = {
-  name: "rsc-router-version",
+  name: "@ivogt/rsc-router-version",
   setup(build) {
     build.onResolve({ filter: /^rsc-router:version$/ }, (args) => ({
       path: args.path,
-      namespace: "rsc-router-virtual"
+      namespace: "@ivogt/rsc-router-virtual"
     }));
-    build.onLoad({ filter: /.*/, namespace: "rsc-router-virtual" }, () => ({
+    build.onLoad({ filter: /.*/, namespace: "@ivogt/rsc-router-virtual" }, () => ({
       contents: `export const VERSION = "dev";`,
       loader: "js"
     }));
@@ -898,7 +898,7 @@ function createVirtualEntriesPlugin(entries, routerPath) {
     virtualModules[VIRTUAL_IDS.rsc] = getVirtualEntryRSC(absoluteRouterPath);
   }
   return {
-    name: "rsc-router:virtual-entries",
+    name: "@ivogt/rsc-router:virtual-entries",
     enforce: "pre",
     resolveId(id) {
       if (id in virtualModules) {
@@ -936,7 +936,7 @@ function createVersionPlugin() {
   let isDev = false;
   let server = null;
   return {
-    name: "rsc-router:version",
+    name: "@ivogt/rsc-router:version",
     enforce: "pre",
     configResolved(config) {
       isDev = config.command === "serve";
@@ -984,7 +984,7 @@ function createVersionInjectorPlugin(rscEntryPath) {
   let projectRoot = "";
   let resolvedEntryPath = "";
   return {
-    name: "rsc-router:version-injector",
+    name: "@ivogt/rsc-router:version-injector",
     enforce: "pre",
     configResolved(config) {
       projectRoot = config.root;
@@ -999,7 +999,7 @@ function createVersionInjectorPlugin(rscEntryPath) {
       if (!code.includes("createRSCHandler")) {
         return null;
       }
-      if (code.includes("rsc-router:version")) {
+      if (code.includes("@ivogt/rsc-router:version")) {
         return null;
       }
       const handlerCallMatch = code.match(/createRSCHandler\s*\(\s*\{/);
@@ -1020,7 +1020,7 @@ function createVersionInjectorPlugin(rscEntryPath) {
         if (nextNewline === -1) break;
         insertIndex = nextNewline + 1;
       }
-      const versionImport = `import { VERSION } from "rsc-router:version";
+      const versionImport = `import { VERSION } from "@ivogt/rsc-router:version";
 `;
       let newCode = code.slice(0, insertIndex) + versionImport + code.slice(insertIndex);
       newCode = newCode.replace(
@@ -1048,7 +1048,7 @@ async function rscRouter(options) {
       ssr: VIRTUAL_IDS.ssr
     };
     plugins.push({
-      name: "rsc-router:cloudflare-integration",
+      name: "@ivogt/rsc-router:cloudflare-integration",
       enforce: "pre",
       config() {
         return {
@@ -1137,7 +1137,7 @@ async function rscRouter(options) {
       rscEntryPath = userEntries.rsc ?? null;
       let hasWarnedDuplicate = false;
       plugins.push({
-        name: "rsc-router:rsc-integration",
+        name: "@ivogt/rsc-router:rsc-integration",
         enforce: "pre",
         config() {
           const useVirtualClient = finalEntries.client === VIRTUAL_IDS.browser;
@@ -1231,7 +1231,7 @@ async function rscRouter(options) {
 }
 function createCjsToEsmPlugin() {
   return {
-    name: "rsc-router:cjs-to-esm",
+    name: "@ivogt/rsc-router:cjs-to-esm",
     enforce: "pre",
     transform(code, id) {
       const cleanId = id.split("?")[0];
@@ -1250,8 +1250,9 @@ function createCjsToEsmPlugin() {
         if (license) {
           transformed = transformed.slice(license.length);
         }
+        transformed = transformed.replace(/^\s*["']use strict["'];\s*/, "");
         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*\{/,
           ""
         );
         transformed = transformed.replace(/\}\)\(\);?\s*$/, "");
@@ -1259,6 +1260,10 @@ function createCjsToEsmPlugin() {
           /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("

package/package.json

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

package/src/__tests__/component-utils.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect } from "vitest";
+import { isClientComponent, assertClientComponent } from "../component-utils";
+
+describe("component-utils", () => {
+  describe("isClientComponent", () => {
+    it("should return false for regular functions", () => {
+      const ServerComponent = () => null;
+      expect(isClientComponent(ServerComponent)).toBe(false);
+    });
+
+    it("should return false for non-functions", () => {
+      expect(isClientComponent(null)).toBe(false);
+      expect(isClientComponent(undefined)).toBe(false);
+      expect(isClientComponent("string")).toBe(false);
+      expect(isClientComponent(123)).toBe(false);
+      expect(isClientComponent({})).toBe(false);
+    });
+
+    it("should return true for functions with client reference marker", () => {
+      const ClientComponent = () => null;
+      // Simulate what the bundler does for "use client" components
+      (ClientComponent as any).$$typeof = Symbol.for("react.client.reference");
+      (ClientComponent as any).$$id = "src/components/MyComponent.tsx#default";
+
+      expect(isClientComponent(ClientComponent)).toBe(true);
+    });
+
+    it("should return false for functions with wrong $$typeof symbol", () => {
+      const Component = () => null;
+      (Component as any).$$typeof = Symbol.for("react.element");
+
+      expect(isClientComponent(Component)).toBe(false);
+    });
+  });
+
+  describe("assertClientComponent", () => {
+    it("should throw for non-function values", () => {
+      expect(() => assertClientComponent(null, "document")).toThrow(
+        'document must be a client component function with "use client" directive'
+      );
+
+      expect(() => assertClientComponent({}, "document")).toThrow(
+        'document must be a client component function with "use client" directive'
+      );
+    });
+
+    it("should throw for server components (no client marker)", () => {
+      const ServerComponent = () => null;
+
+      expect(() => assertClientComponent(ServerComponent, "document")).toThrow(
+        'document must be a client component with "use client" directive'
+      );
+      expect(() => assertClientComponent(ServerComponent, "document")).toThrow(
+        "cannot be serialized in the RSC payload"
+      );
+    });
+
+    it("should not throw for client components", () => {
+      const ClientComponent = () => null;
+      (ClientComponent as any).$$typeof = Symbol.for("react.client.reference");
+      (ClientComponent as any).$$id = "src/document.tsx#default";
+
+      expect(() =>
+        assertClientComponent(ClientComponent, "document")
+      ).not.toThrow();
+    });
+
+    it("should include component name in error message", () => {
+      const ServerComponent = () => null;
+
+      expect(() => assertClientComponent(ServerComponent, "myLayout")).toThrow(
+        "myLayout must be a client component"
+      );
+    });
+  });
+});

package/src/cache/cf/cf-cache-store.ts

@@ -19,7 +19,7 @@ import type {
   CacheGetResult,
 } from "../types.js";
 import type { RequestContext } from "../../server/request-context.js";
-import { VERSION } from "rsc-router:version";
+import { VERSION } from "@ivogt/rsc-router:version";
 
 // ============================================================================
 // Constants

package/src/component-utils.ts

@@ -0,0 +1,76 @@
+/**
+ * Component utilities for RSC
+ *
+ * Helpers for working with React Server Components and client components.
+ */
+
+import type { ComponentType } from "react";
+
+/**
+ * Symbol used by React to mark client component references.
+ * When a file has "use client" directive, the bundler transforms the exports
+ * to include this symbol on $$typeof.
+ */
+const CLIENT_REFERENCE = Symbol.for("react.client.reference");
+
+/**
+ * Check if a component is a client component (has "use client" directive).
+ *
+ * Client components are marked by the bundler with:
+ * - $$typeof: Symbol.for("react.client.reference")
+ * - $$id: string (module identifier)
+ *
+ * @param component - The component to check
+ * @returns true if the component has client reference marker
+ *
+ * @example
+ * ```typescript
+ * import { MyComponent } from "./my-component"; // has "use client"
+ *
+ * if (!isClientComponent(MyComponent)) {
+ *   throw new Error("MyComponent must be a client component");
+ * }
+ * ```
+ */
+export function isClientComponent(
+  component: ComponentType<unknown> | unknown
+): boolean {
+  if (typeof component !== "function") {
+    return false;
+  }
+  const withMeta = component as { $$typeof?: symbol };
+  return withMeta.$$typeof === CLIENT_REFERENCE;
+}
+
+/**
+ * Assert that a component is a client component.
+ * Throws a descriptive error if not.
+ *
+ * @param component - The component to check
+ * @param name - Name to use in error message (e.g., "document")
+ * @throws Error if the component is not a client component
+ */
+export function assertClientComponent(
+  component: ComponentType<unknown> | unknown,
+  name: string
+): asserts component is ComponentType<unknown> {
+  if (typeof component !== "function") {
+    throw new Error(
+      `${name} must be a client component function with "use client" directive. ` +
+        `Make sure to pass the component itself, not a JSX element: ` +
+        `${name}: My${capitalize(name)} (correct) vs ${name}: <My${capitalize(name)} /> (incorrect)`
+    );
+  }
+
+  if (!isClientComponent(component)) {
+    throw new Error(
+      `${name} must be a client component with "use client" directive at the top of the file. ` +
+        `Server components cannot be used as the ${name} because their function reference ` +
+        `cannot be serialized in the RSC payload. Add "use client" to your ${name} file.`
+    );
+  }
+}
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/src/router.ts

@@ -2,6 +2,7 @@ import type { ComponentType } from "react";
 import { type ReactNode } from "react";
 import { CacheScope, createCacheScope } from "./cache/cache-scope.js";
 import type { SegmentCacheStore } from "./cache/types.js";
+import { assertClientComponent } from "./component-utils.js";
 import { DefaultDocument } from "./components/DefaultDocument.js";
 import { DefaultErrorFallback } from "./default-error-boundary.js";
 import {
@@ -511,16 +512,9 @@ export function createRSCRouter<TEnv = any>(
     invokeOnError(onError, error, phase, context, "Router");
   }
 
-  // Validate document is a function (component)
-  // Note: We cannot validate "use client" at runtime since it's a bundler directive.
-  // If a server component is passed, React will throw during rendering with a
-  // "Functions cannot be passed to Client Components" error.
-  if (documentOption !== undefined && typeof documentOption !== "function") {
-    throw new Error(
-      `document must be a client component function with "use client" directive. ` +
-        `Make sure to pass the component itself, not a JSX element: ` +
-        `document: MyDocument (correct) vs document: <MyDocument /> (incorrect)`
-    );
+  // Validate document is a client component
+  if (documentOption !== undefined) {
+    assertClientComponent(documentOption, "document");
   }
 
   // Use default document if none provided (keeps internal name as rootLayout)

package/src/rsc/handler.ts

@@ -32,7 +32,7 @@ import type {
 } from "./types.js";
 import { hasBodyContent, createResponseWithMergedHeaders } from "./helpers.js";
 import { generateNonce } from "./nonce.js";
-import { VERSION } from "rsc-router:version";
+import { VERSION } from "@ivogt/rsc-router:version";
 import type { ErrorPhase } from "../types.js";
 import { invokeOnError } from "../router/error-handling.js";
 

package/src/server.ts

@@ -82,6 +82,12 @@ export {
   sanitizeError,
 } from "./errors.js";
 
+// Component utilities
+export {
+  isClientComponent,
+  assertClientComponent,
+} from "./component-utils.js";
+
 // Types (re-exported for convenience)
 export type {
   RouterEnv,

package/src/vite/__tests__/expose-loader-id.test.ts

@@ -4,7 +4,7 @@ import { describe, it, expect } from "vitest";
  * Mock function to test createLoader detection patterns
  */
 function hasCreateLoaderImport(code: string): boolean {
-  const pattern = /import\s*\{[^}]*\bcreateLoader\b[^}]*\}\s*from\s*["']rsc-router(?:\/server)?["']/;
+  const pattern = /import\s*\{[^}]*\bcreateLoader\b[^}]*\}\s*from\s*["']@ivogt\/rsc-router(?:\/server)?["']/;
   return pattern.test(code);
 }
 
@@ -24,22 +24,22 @@ function extractLoaderExports(code: string): string[] {
 describe("exposeLoaderId plugin", () => {
   describe("hasCreateLoaderImport", () => {
     it("should detect direct import from rsc-router", () => {
-      const code = `import { createLoader } from "rsc-router";`;
+      const code = `import { createLoader } from "@ivogt/rsc-router";`;
       expect(hasCreateLoaderImport(code)).toBe(true);
     });
 
     it("should detect import from rsc-router/server", () => {
-      const code = `import { createLoader } from "rsc-router/server";`;
+      const code = `import { createLoader } from "@ivogt/rsc-router/server";`;
       expect(hasCreateLoaderImport(code)).toBe(true);
     });
 
     it("should detect createLoader with other imports", () => {
-      const code = `import { map, createLoader, route } from "rsc-router";`;
+      const code = `import { map, createLoader, route } from "@ivogt/rsc-router";`;
       expect(hasCreateLoaderImport(code)).toBe(true);
     });
 
     it("should NOT detect aliased import", () => {
-      const code = `import { createLoader as cl } from "rsc-router";`;
+      const code = `import { createLoader as cl } from "@ivogt/rsc-router";`;
       // Our simple pattern doesn't support aliasing - this is intentional
       expect(hasCreateLoaderImport(code)).toBe(true); // Still matches the word
     });
@@ -50,12 +50,12 @@ describe("exposeLoaderId plugin", () => {
     });
 
     it("should NOT detect default import", () => {
-      const code = `import createLoader from "rsc-router";`;
+      const code = `import createLoader from "@ivogt/rsc-router";`;
       expect(hasCreateLoaderImport(code)).toBe(false);
     });
 
     it("should NOT detect namespace import", () => {
-      const code = `import * as router from "rsc-router";`;
+      const code = `import * as router from "@ivogt/rsc-router";`;
       expect(hasCreateLoaderImport(code)).toBe(false);
     });
   });

package/src/vite/expose-action-id.ts

@@ -229,7 +229,7 @@ export function exposeActionId(): Plugin {
   let rscPluginApi: RscPluginApi | undefined;
 
   return {
-    name: "rsc-router:expose-action-id",
+    name: "@ivogt/rsc-router:expose-action-id",
     // Run after all other plugins (including RSC plugin's transforms)
     enforce: "post",
 
@@ -251,7 +251,7 @@ export function exposeActionId(): Plugin {
       if (!rscPluginApi) {
         throw new Error(
           "[rsc-router] Could not find @vitejs/plugin-rsc. " +
-            "rsc-router requires the Vite RSC plugin.\n" +
+            "@ivogt/rsc-router requires the Vite RSC plugin.\n" +
             "The RSC plugin should be included automatically. If you disabled it with\n" +
             "rscRouter({ rsc: false }), add rsc() before rscRouter() in your config."
         );

package/src/vite/expose-handle-id.ts

@@ -25,9 +25,9 @@ function hashHandleId(filePath: string, exportName: string): string {
  * Check if file imports createHandle from rsc-router
  */
 function hasCreateHandleImport(code: string): boolean {
-  // Match: import { createHandle } from "rsc-router" or "rsc-router/..."
+  // Match: import { createHandle } from "@ivogt/rsc-router" or "@ivogt/rsc-router/..."
   const pattern =
-    /import\s*\{[^}]*\bcreateHandle\b[^}]*\}\s*from\s*["']rsc-router(?:\/[^"']+)?["']/;
+    /import\s*\{[^}]*\bcreateHandle\b[^}]*\}\s*from\s*["']@ivogt\/rsc-router(?:\/[^"']+)?["']/;
   return pattern.test(code);
 }
 
@@ -167,7 +167,7 @@ function transformHandleExports(
  * The name is auto-generated from file path + export name.
  *
  * Requirements:
- * - Must use direct import: import { createHandle } from "rsc-router"
+ * - Must use direct import: import { createHandle } from "@ivogt/rsc-router"
  * - Must use named export: export const MyHandle = createHandle(...)
  */
 export function exposeHandleId(): Plugin {
@@ -175,7 +175,7 @@ export function exposeHandleId(): Plugin {
   let isBuild = false;
 
   return {
-    name: "rsc-router:expose-handle-id",
+    name: "@ivogt/rsc-router:expose-handle-id",
     enforce: "post",
 
     configResolved(resolvedConfig) {

package/src/vite/expose-loader-id.ts

@@ -25,10 +25,10 @@ function hashLoaderId(filePath: string, exportName: string): string {
  * Check if file imports createLoader from rsc-router
  */
 function hasCreateLoaderImport(code: string): boolean {
-  // Match: import { createLoader } from "rsc-router" or "rsc-router/server"
+  // Match: import { createLoader } from "@ivogt/rsc-router" or "@ivogt/rsc-router/server"
   // Must be exact - no aliasing support
   const pattern =
-    /import\s*\{[^}]*\bcreateLoader\b[^}]*\}\s*from\s*["']rsc-router(?:\/server)?["']/;
+    /import\s*\{[^}]*\bcreateLoader\b[^}]*\}\s*from\s*["']@ivogt\/rsc-router(?:\/server)?["']/;
   return pattern.test(code);
 }
 
@@ -176,7 +176,7 @@ let manifestGenerated = false;
  * The manifest can be imported by the RSC handler to get all loaders.
  *
  * Requirements:
- * - Must use direct import: import { createLoader } from "rsc-router"
+ * - Must use direct import: import { createLoader } from "@ivogt/rsc-router"
  * - No aliasing support (import { createLoader as cl } won't work)
  * - Must use named export: export const MyLoader = createLoader(...)
  */
@@ -194,7 +194,7 @@ export function exposeLoaderId(): Plugin {
   const pendingLoaderScans = new Map<string, Promise<void>>();
 
   return {
-    name: "rsc-router:expose-loader-id",
+    name: "@ivogt/rsc-router:expose-loader-id",
     enforce: "post",
 
     configResolved(resolvedConfig) {
@@ -276,7 +276,7 @@ export function exposeLoaderId(): Plugin {
         if (!isBuild) {
           // Dev mode: empty map - use fallback path parsing in loader registry
           // IDs in dev mode are "filePath#exportName" format for easier debugging
-          return `import { setLoaderImports } from "rsc-router/server";
+          return `import { setLoaderImports } from "@ivogt/rsc-router/server";
 
 // Dev mode: empty map, loaders are resolved dynamically via path parsing
 setLoaderImports({});
@@ -297,14 +297,14 @@ setLoaderImports({});
 
         // If no loaders discovered, set empty map
         if (lazyImports.length === 0) {
-          return `import { setLoaderImports } from "rsc-router/server";
+          return `import { setLoaderImports } from "@ivogt/rsc-router/server";
 
 // No fetchable loaders discovered during build
 setLoaderImports({});
 `;
         }
 
-        const code = `import { setLoaderImports } from "rsc-router/server";
+        const code = `import { setLoaderImports } from "@ivogt/rsc-router/server";
 
 // Lazy import map - loaders are loaded on-demand when first requested
 setLoaderImports({

package/src/vite/expose-location-state-id.ts

@@ -25,9 +25,9 @@ function hashLocationStateKey(filePath: string, exportName: string): string {
  * Check if file imports createLocationState from rsc-router
  */
 function hasCreateLocationStateImport(code: string): boolean {
-  // Match: import { createLocationState } from "rsc-router" or "rsc-router/client"
+  // Match: import { createLocationState } from "@ivogt/rsc-router" or "@ivogt/rsc-router/client"
   const pattern =
-    /import\s*\{[^}]*\bcreateLocationState\b[^}]*\}\s*from\s*["']rsc-router(?:\/[^"']+)?["']/;
+    /import\s*\{[^}]*\bcreateLocationState\b[^}]*\}\s*from\s*["']@ivogt\/rsc-router(?:\/[^"']+)?["']/;
   return pattern.test(code);
 }
 
@@ -135,7 +135,7 @@ function transformLocationStateExports(
  * The key is auto-generated from file path + export name.
  *
  * Requirements:
- * - Must use direct import: import { createLocationState } from "rsc-router"
+ * - Must use direct import: import { createLocationState } from "@ivogt/rsc-router"
  * - Must use named export: export const MyState = createLocationState(...)
  */
 export function exposeLocationStateId(): Plugin {
@@ -143,7 +143,7 @@ export function exposeLocationStateId(): Plugin {
   let isBuild = false;
 
   return {
-    name: "rsc-router:expose-location-state-id",
+    name: "@ivogt/rsc-router:expose-location-state-id",
     enforce: "post",
 
     configResolved(resolvedConfig) {

package/src/vite/index.ts

@@ -33,13 +33,13 @@ export { exposeLocationStateId } from "./expose-location-state-id.ts";
  * before Vite's plugin system can handle virtual modules.
  */
 const versionEsbuildPlugin = {
-  name: "rsc-router-version",
+  name: "@ivogt/rsc-router-version",
   setup(build: any) {
     build.onResolve({ filter: /^rsc-router:version$/ }, (args: any) => ({
       path: args.path,
-      namespace: "rsc-router-virtual",
+      namespace: "@ivogt/rsc-router-virtual",
     }));
-    build.onLoad({ filter: /.*/, namespace: "rsc-router-virtual" }, () => ({
+    build.onLoad({ filter: /.*/, namespace: "@ivogt/rsc-router-virtual" }, () => ({
       contents: `export const VERSION = "dev";`,
       loader: "js",
     }));
@@ -184,7 +184,7 @@ function createVirtualEntriesPlugin(
   }
 
   return {
-    name: "rsc-router:virtual-entries",
+    name: "@ivogt/rsc-router:virtual-entries",
     enforce: "pre",
 
     resolveId(id) {
@@ -254,7 +254,7 @@ function createVersionPlugin(): Plugin {
   let server: any = null;
 
   return {
-    name: "rsc-router:version",
+    name: "@ivogt/rsc-router:version",
     enforce: "pre",
 
     configResolved(config) {
@@ -323,7 +323,7 @@ function createVersionInjectorPlugin(rscEntryPath: string): Plugin {
   let resolvedEntryPath = "";
 
   return {
-    name: "rsc-router:version-injector",
+    name: "@ivogt/rsc-router:version-injector",
     enforce: "pre",
 
     configResolved(config) {
@@ -346,7 +346,7 @@ function createVersionInjectorPlugin(rscEntryPath: string): Plugin {
       }
 
       // Check if VERSION is already imported
-      if (code.includes("rsc-router:version")) {
+      if (code.includes("@ivogt/rsc-router:version")) {
         return null;
       }
 
@@ -382,7 +382,7 @@ function createVersionInjectorPlugin(rscEntryPath: string): Plugin {
       }
 
       // Insert VERSION import
-      const versionImport = `import { VERSION } from "rsc-router:version";\n`;
+      const versionImport = `import { VERSION } from "@ivogt/rsc-router:version";\n`;
       let newCode = code.slice(0, insertIndex) + versionImport + code.slice(insertIndex);
 
       // Add version: VERSION to createRSCHandler call
@@ -454,7 +454,7 @@ export async function rscRouter(
     };
 
     plugins.push({
-      name: "rsc-router:cloudflare-integration",
+      name: "@ivogt/rsc-router:cloudflare-integration",
       enforce: "pre",
       config() {
         // Configure environments for cloudflare deployment
@@ -561,7 +561,7 @@ export async function rscRouter(
       let hasWarnedDuplicate = false;
 
       plugins.push({
-        name: "rsc-router:rsc-integration",
+        name: "@ivogt/rsc-router:rsc-integration",
         enforce: "pre",
 
         config() {
@@ -691,7 +691,7 @@ export async function rscRouter(
  */
 function createCjsToEsmPlugin(): Plugin {
   return {
-    name: "rsc-router:cjs-to-esm",
+    name: "@ivogt/rsc-router:cjs-to-esm",
     enforce: "pre",
     transform(code, id) {
       const cleanId = id.split("?")[0];
@@ -727,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,

package/src/vite/package-resolution.ts

@@ -12,7 +12,7 @@ import packageJson from "../../package.json" with { type: "json" };
 /**
  * The canonical name used in virtual entries (without scope)
  */
-const VIRTUAL_PACKAGE_NAME = "rsc-router";
+const VIRTUAL_PACKAGE_NAME = "@ivogt/rsc-router";
 
 /**
  * Get the published package name (e.g., "@ivogt/rsc-router")
@@ -25,12 +25,12 @@ export function getPublishedPackageName(): string {
  * Check if the package is installed from npm (scoped) vs workspace (unscoped)
  *
  * In workspace development:
- * - Package is installed as "rsc-router" via pnpm workspace alias
+ * - Package is installed as "@ivogt/rsc-router" via pnpm workspace alias
  * - The scoped name (@ivogt/rsc-router) doesn't exist in node_modules
  *
  * When installed from npm:
  * - Package is installed as "@ivogt/rsc-router"
- * - We need aliases to map "rsc-router/*" to "@ivogt/rsc-router/*"
+ * - We need aliases to map "@ivogt/rsc-router/*" to "@ivogt/rsc-router/*"
  */
 export function isInstalledFromNpm(): boolean {
   const packageName = getPublishedPackageName();

package/src/vite/version.d.ts

@@ -3,7 +3,7 @@
  * This module is provided by the Vite plugin at build/dev time.
  */
 
-declare module "rsc-router:version" {
+declare module "@ivogt/rsc-router:version" {
   /**
    * Auto-generated version string for cache invalidation.
    * Changes on server restart (dev) or build (prod).

package/src/vite/virtual-entries.ts

@@ -10,11 +10,11 @@ import {
   setServerCallback,
   encodeReply,
   createTemporaryReferenceSet,
-} from "rsc-router/internal/deps/browser";
+} from "@ivogt/rsc-router/internal/deps/browser";
 import { createElement, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
-import { rscStream } from "rsc-router/internal/deps/html-stream-client";
-import { initBrowserApp, RSCRouter } from "rsc-router/browser";
+import { rscStream } from "@ivogt/rsc-router/internal/deps/html-stream-client";
+import { initBrowserApp, RSCRouter } from "@ivogt/rsc-router/browser";
 
 async function initializeApp() {
   const deps = {
@@ -37,10 +37,10 @@ initializeApp().catch(console.error);
 `.trim();
 
 export const VIRTUAL_ENTRY_SSR: string = `
-import { createFromReadableStream } from "rsc-router/internal/deps/ssr";
+import { createFromReadableStream } from "@ivogt/rsc-router/internal/deps/ssr";
 import { renderToReadableStream } from "react-dom/server.edge";
-import { injectRSCPayload } from "rsc-router/internal/deps/html-stream-server";
-import { createSSRHandler } from "rsc-router/ssr";
+import { injectRSCPayload } from "@ivogt/rsc-router/internal/deps/html-stream-server";
+import { createSSRHandler } from "@ivogt/rsc-router/ssr";
 
 export const renderHTML = createSSRHandler({
   createFromReadableStream,
@@ -63,10 +63,10 @@ import {
   loadServerAction,
   decodeAction,
   decodeFormState,
-} from "rsc-router/internal/deps/rsc";
+} from "@ivogt/rsc-router/internal/deps/rsc";
 import { router } from "${routerPath}";
-import { createRSCHandler } from "rsc-router/rsc";
-import { VERSION } from "rsc-router:version";
+import { createRSCHandler } from "@ivogt/rsc-router/rsc";
+import { VERSION } from "@ivogt/rsc-router:version";
 
 // Import loader manifest to ensure all fetchable loaders are registered at startup
 // This is critical for serverless/multi-process deployments where the loader module
@@ -97,7 +97,7 @@ export const VIRTUAL_IDS = {
   browser: "virtual:rsc-router/entry.browser.js",
   ssr: "virtual:rsc-router/entry.ssr.js",
   rsc: "virtual:rsc-router/entry.rsc.js",
-  version: "rsc-router:version",
+  version: "@ivogt/rsc-router:version",
 } as const;
 
 /**