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

package/package.json

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

package/src/router.ts

@@ -160,6 +160,39 @@ export interface RSCRouterOptions<TEnv = any> {
    */
   defaultNotFoundBoundary?: ReactNode | NotFoundBoundaryHandler;
 
+  /**
+   * Component to render when no route matches the requested URL.
+   *
+   * This is rendered within your document/app shell with a 404 status code.
+   * Use this for a custom 404 page that maintains your app's look and feel.
+   *
+   * If not provided, a default "Page not found" component is rendered.
+   *
+   * Can be a static ReactNode or a function receiving the pathname.
+   *
+   * @example
+   * ```typescript
+   * // Simple static component
+   * const router = createRSCRouter<AppEnv>({
+   *   document: AppShell,
+   *   notFound: <NotFound404 />,
+   * });
+   *
+   * // Dynamic component with pathname
+   * const router = createRSCRouter<AppEnv>({
+   *   document: AppShell,
+   *   notFound: ({ pathname }) => (
+   *     <div>
+   *       <h1>404 - Not Found</h1>
+   *       <p>No page exists at {pathname}</p>
+   *       <a href="/">Go home</a>
+   *     </div>
+   *   ),
+   * });
+   * ```
+   */
+  notFound?: ReactNode | ((props: { pathname: string }) => ReactNode);
+
   /**
    * Callback invoked when an error occurs during request handling.
    *
@@ -368,6 +401,11 @@ export interface RSCRouter<
    */
   readonly cache?: RSCRouterOptions<TEnv>["cache"];
 
+  /**
+   * Not found component to render when no route matches (for internal use by RSC handler)
+   */
+  readonly notFound?: RSCRouterOptions<TEnv>["notFound"];
+
   /**
    * App-level middleware entries (for internal use by RSC handler)
    * These wrap the entire request/response cycle
@@ -456,6 +494,7 @@ export function createRSCRouter<TEnv = any>(
     document: documentOption,
     defaultErrorBoundary,
     defaultNotFoundBoundary,
+    notFound,
     onError,
     cache,
   } = options;
@@ -3471,6 +3510,9 @@ export function createRSCRouter<TEnv = any>(
     // Expose cache configuration for RSC handler
     cache,
 
+    // Expose notFound component for RSC handler
+    notFound,
+
     // Expose global middleware for RSC handler
     middleware: globalMiddleware,
 

package/src/rsc/handler.ts

@@ -7,6 +7,7 @@
  * and progressive enhancement (no-JS form submissions).
  */
 
+import { createElement } from "react";
 import { renderSegments } from "../segment-system.js";
 import { RouteNotFoundError } from "../errors.js";
 import { getLoaderLazy } from "../server/loader-registry.js";
@@ -291,22 +292,85 @@ export function createRSCHandler<TEnv = unknown>(
       // ============================================================================
       // REGULAR RSC RENDERING (Navigation)
       // ============================================================================
-      return handleRscRendering(request, env, url, isPartial, handleStore, nonce);
+      // Note: Must use "return await" for try/catch to catch async rejections
+      return await handleRscRendering(request, env, url, isPartial, handleStore, nonce);
     } catch (error) {
       // Check if middleware/handler returned Response
       if (error instanceof Response) {
         return error;
       }
 
-      // Return 404 for unmatched routes instead of 500
-      if (error instanceof RouteNotFoundError) {
+      // Render 404 page for unmatched routes
+      // Check both instanceof and error.name for cross-bundle compatibility
+      const isRouteNotFound =
+        error instanceof RouteNotFoundError ||
+        (error instanceof Error && error.name === "RouteNotFoundError");
+      if (isRouteNotFound) {
         callOnError(error, "routing", {
           request,
           url,
           env,
-          handledByBoundary: false,
+          handledByBoundary: true, // Handled by notFound component
+        });
+
+        // Get notFound component from router options or use default
+        const notFoundOption = router.notFound;
+        const notFoundComponent =
+          typeof notFoundOption === "function"
+            ? notFoundOption({ pathname: url.pathname })
+            : notFoundOption ?? createElement("h1", null, "Not Found");
+
+        // Create a simple segment for the 404 page
+        const notFoundSegment = {
+          id: "notFound",
+          namespace: "notFound",
+          type: "route" as const,
+          index: 0,
+          component: notFoundComponent,
+          params: {},
+        };
+
+        // Render with rootLayout to maintain app shell
+        const root = await renderSegments([notFoundSegment], {
+          rootLayout: router.rootLayout,
+        });
+
+        const payload: RscPayload = {
+          root,
+          metadata: {
+            pathname: url.pathname,
+            segments: [notFoundSegment],
+            matched: [],
+            diff: [],
+            isPartial: false,
+            handles: handleStore.stream(),
+            version,
+          },
+        };
+
+        const rscStream = renderToReadableStream(payload);
+
+        // Determine if this is an RSC request or HTML request
+        const isRscRequest =
+          (!request.headers.get("accept")?.includes("text/html") &&
+            !url.searchParams.has("__html")) ||
+          url.searchParams.has("__rsc");
+
+        if (isRscRequest) {
+          return createResponseWithMergedHeaders(rscStream, {
+            status: 404,
+            headers: { "content-type": "text/x-component;charset=utf-8" },
+          });
+        }
+
+        // Delegate to SSR for HTML response
+        const ssrModule = await loadSSRModule();
+        const htmlStream = await ssrModule.renderHTML(rscStream, { nonce });
+
+        return createResponseWithMergedHeaders(htmlStream, {
+          status: 404,
+          headers: { "content-type": "text/html;charset=utf-8" },
         });
-        return createResponseWithMergedHeaders("Not Found", { status: 404 });
       }
 
       // Report unhandled errors

package/src/vite/index.ts

@@ -12,6 +12,12 @@ import {
   getVirtualVersionContent,
   VIRTUAL_IDS,
 } from "./virtual-entries.ts";
+import {
+  getExcludeDeps,
+  getPackageAliases,
+  getPublishedPackageName,
+  isWorkspaceDevelopment,
+} from "./package-resolution.ts";
 
 // Re-export plugins
 export { exposeActionId } from "./expose-action-id.ts";
@@ -21,26 +27,6 @@ export { exposeLocationStateId } from "./expose-location-state-id.ts";
 
 // Virtual module type declarations in ./version.d.ts
 
-/**
- * Modules that must be excluded from Vite's dependency optimization.
- *
- * When rsc-router is installed from npm, Vite's dep optimizer bundles these modules
- * into separate chunks. However, @vitejs/plugin-rsc creates virtual proxy modules
- * for client components that import from the original source paths.
- *
- * This creates two different module instances:
- * 1. Bundled version in /node_modules/.vite/deps/
- * 2. Original source via plugin-rsc proxy
- *
- * When both instances create React Contexts (e.g., OutletContext), React sees them
- * as different contexts, causing useContext to return undefined even when a Provider
- * exists in the tree.
- *
- * By excluding these modules, we ensure a single module instance is used everywhere.
- *
- * We include both the scoped package name (@ivogt/rsc-router) and the aliased paths
- * (rsc-router) because Vite's optimizer runs before alias resolution.
- */
 /**
  * esbuild plugin to provide rsc-router:version virtual module during optimization.
  * This is needed because esbuild runs during Vite's dependency optimization phase,
@@ -68,118 +54,6 @@ const sharedEsbuildOptions = {
   plugins: [versionEsbuildPlugin],
 };
 
-const RSC_ROUTER_EXCLUDE_DEPS = [
-  // Scoped package paths
-  "@ivogt/rsc-router",
-  "@ivogt/rsc-router/browser",
-  "@ivogt/rsc-router/client",
-  "@ivogt/rsc-router/server",
-  "@ivogt/rsc-router/rsc",
-  "@ivogt/rsc-router/ssr",
-  "@ivogt/rsc-router/internal/deps/browser",
-  "@ivogt/rsc-router/internal/deps/html-stream-client",
-  "@ivogt/rsc-router/internal/deps/ssr",
-  "@ivogt/rsc-router/internal/deps/rsc",
-  // Aliased paths (before alias resolution)
-  "rsc-router/browser",
-  "rsc-router/client",
-  "rsc-router/server",
-  "rsc-router/rsc",
-  "rsc-router/ssr",
-  "rsc-router/internal/deps/browser",
-  "rsc-router/internal/deps/html-stream-client",
-  "rsc-router/internal/deps/ssr",
-  "rsc-router/internal/deps/rsc",
-];
-
-/**
- * Plugin to transform CJS react-server-dom vendor files to ESM.
- * The @vitejs/plugin-rsc package ships client.browser.js as CommonJS
- * which doesn't work in the browser. This transforms both:
- * 1. The entry point (client.browser.js) to re-export from the CJS file
- * 2. The actual CJS file content to ESM syntax
- */
-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
-        // Pattern: "use strict"; "production" !== process.env.NODE_ENV && (function() { ... })();
-        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
-        // The pattern spans multiple lines with whitespace
-        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;
-    },
-  };
-}
-
 /**
  * RSC plugin entry points configuration.
  * All entries use virtual modules by default. Specify a path to use a custom entry file.
@@ -558,6 +432,10 @@ export async function rscRouter(
 
   const plugins: PluginOption[] = [];
 
+  // Get package resolution info (workspace vs npm install)
+  const rscRouterAliases = getPackageAliases();
+  const excludeDeps = getExcludeDeps();
+
   // Track RSC entry path for version injection
   let rscEntryPath: string | null = null;
 
@@ -584,29 +462,11 @@ export async function rscRouter(
           // Exclude rsc-router modules from optimization to prevent module duplication
           // This ensures the same Context instance is used by both browser entry and RSC proxy modules
           optimizeDeps: {
-            exclude: RSC_ROUTER_EXCLUDE_DEPS,
+            exclude: excludeDeps,
             esbuildOptions: sharedEsbuildOptions,
           },
           resolve: {
-            alias: {
-              // Map rsc-router/* to @ivogt/rsc-router/* for virtual entries
-              // This allows the package to work when published under a scoped name
-              "rsc-router/internal/deps/browser":
-                "@ivogt/rsc-router/internal/deps/browser",
-              "rsc-router/internal/deps/ssr":
-                "@ivogt/rsc-router/internal/deps/ssr",
-              "rsc-router/internal/deps/rsc":
-                "@ivogt/rsc-router/internal/deps/rsc",
-              "rsc-router/internal/deps/html-stream-client":
-                "@ivogt/rsc-router/internal/deps/html-stream-client",
-              "rsc-router/internal/deps/html-stream-server":
-                "@ivogt/rsc-router/internal/deps/html-stream-server",
-              "rsc-router/browser": "@ivogt/rsc-router/browser",
-              "rsc-router/client": "@ivogt/rsc-router/client",
-              "rsc-router/server": "@ivogt/rsc-router/server",
-              "rsc-router/rsc": "@ivogt/rsc-router/rsc",
-              "rsc-router/ssr": "@ivogt/rsc-router/ssr",
-            },
+            alias: rscRouterAliases,
           },
           environments: {
             client: {
@@ -621,7 +481,7 @@ export async function rscRouter(
               // Exclude rsc-router modules to ensure same Context instance
               optimizeDeps: {
                 include: ["rsc-html-stream/client"],
-                exclude: RSC_ROUTER_EXCLUDE_DEPS,
+                exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions,
               },
             },
@@ -644,13 +504,15 @@ export async function rscRouter(
                   "react/jsx-runtime",
                   "rsc-html-stream/server",
                 ],
-                exclude: RSC_ROUTER_EXCLUDE_DEPS,
+                exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions,
               },
             },
             rsc: {
-              // RSC environment also needs esbuild options for version virtual module
+              // RSC environment needs exclude list and esbuild options
+              // Exclude rsc-router modules to prevent createContext in RSC environment
               optimizeDeps: {
+                exclude: excludeDeps,
                 esbuildOptions: sharedEsbuildOptions,
               },
             },
@@ -716,29 +578,11 @@ export async function rscRouter(
             // Exclude rsc-router modules from optimization to prevent module duplication
             // This ensures the same Context instance is used by both browser entry and RSC proxy modules
             optimizeDeps: {
-              exclude: RSC_ROUTER_EXCLUDE_DEPS,
+              exclude: excludeDeps,
               esbuildOptions: sharedEsbuildOptions,
             },
             resolve: {
-              alias: {
-                // Map rsc-router/* to @ivogt/rsc-router/* for virtual entries
-                // This allows the package to work when published under a scoped name
-                "rsc-router/internal/deps/browser":
-                  "@ivogt/rsc-router/internal/deps/browser",
-                "rsc-router/internal/deps/ssr":
-                  "@ivogt/rsc-router/internal/deps/ssr",
-                "rsc-router/internal/deps/rsc":
-                  "@ivogt/rsc-router/internal/deps/rsc",
-                "rsc-router/internal/deps/html-stream-client":
-                  "@ivogt/rsc-router/internal/deps/html-stream-client",
-                "rsc-router/internal/deps/html-stream-server":
-                  "@ivogt/rsc-router/internal/deps/html-stream-server",
-                "rsc-router/browser": "@ivogt/rsc-router/browser",
-                "rsc-router/client": "@ivogt/rsc-router/client",
-                "rsc-router/server": "@ivogt/rsc-router/server",
-                "rsc-router/rsc": "@ivogt/rsc-router/rsc",
-                "rsc-router/ssr": "@ivogt/rsc-router/ssr",
-              },
+              alias: rscRouterAliases,
             },
             environments: {
               client: {
@@ -751,7 +595,7 @@ export async function rscRouter(
                 },
                 // Always exclude rsc-router modules, conditionally add virtual entry
                 optimizeDeps: {
-                  exclude: RSC_ROUTER_EXCLUDE_DEPS,
+                  exclude: excludeDeps,
                   esbuildOptions: sharedEsbuildOptions,
                   ...(useVirtualClient && {
                     // Tell Vite to scan the virtual entry for dependencies
@@ -765,7 +609,7 @@ export async function rscRouter(
                     entries: [VIRTUAL_IDS.ssr],
                     // Pre-bundle React for SSR to ensure single instance
                     include: ["react", "react-dom/server.edge", "react/jsx-runtime"],
-                    exclude: RSC_ROUTER_EXCLUDE_DEPS,
+                    exclude: excludeDeps,
                     esbuildOptions: sharedEsbuildOptions,
                   },
                 },
@@ -834,10 +678,6 @@ export async function rscRouter(
     plugins.push(createVersionInjectorPlugin(rscEntryPath));
   }
 
-  // Add CJS-to-ESM transform for @vitejs/plugin-rsc vendor files
-  // This must be added to transform the CommonJS client.browser.js to ESM
-  plugins.push(createCjsToEsmPlugin());
-
   return plugins;
 }
 

package/src/vite/package-resolution.ts

@@ -0,0 +1,152 @@
+/**
+ * Package Resolution Utilities
+ *
+ * Handles detection of workspace vs npm install context and generates
+ * 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";
+  }
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 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
+ * - 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/*"
+ */
+export function isInstalledFromNpm(): boolean {
+  const packageName = getPublishedPackageName();
+  // Check if the scoped package exists in node_modules
+  return existsSync(resolve(process.cwd(), "node_modules", packageName));
+}
+
+/**
+ * Check if we're in a monorepo/workspace development context
+ */
+export function isWorkspaceDevelopment(): boolean {
+  return !isInstalledFromNpm();
+}
+
+/**
+ * Subpaths that need to be excluded from Vite's dependency optimization
+ * and potentially aliased
+ */
+const PACKAGE_SUBPATHS = [
+  "",
+  "/browser",
+  "/client",
+  "/server",
+  "/rsc",
+  "/ssr",
+  "/internal/deps/browser",
+  "/internal/deps/html-stream-client",
+  "/internal/deps/ssr",
+  "/internal/deps/rsc",
+] as const;
+
+/**
+ * Generate the list of modules to exclude from Vite's dependency optimization.
+ *
+ * We include both the published name and the virtual name because
+ * Vite's optimizer runs before alias resolution.
+ */
+export function getExcludeDeps(): string[] {
+  const packageName = getPublishedPackageName();
+  const excludes: string[] = [];
+
+  for (const subpath of PACKAGE_SUBPATHS) {
+    // Add scoped package paths
+    excludes.push(`${packageName}${subpath}`);
+    // Add virtual/aliased paths (before alias resolution)
+    if (packageName !== VIRTUAL_PACKAGE_NAME) {
+      excludes.push(`${VIRTUAL_PACKAGE_NAME}${subpath}`);
+    }
+  }
+
+  return excludes;
+}
+
+/**
+ * Subpaths that need aliasing (subset of PACKAGE_SUBPATHS)
+ */
+const ALIAS_SUBPATHS = [
+  "/internal/deps/browser",
+  "/internal/deps/ssr",
+  "/internal/deps/rsc",
+  "/internal/deps/html-stream-client",
+  "/internal/deps/html-stream-server",
+  "/browser",
+  "/client",
+  "/server",
+  "/rsc",
+  "/ssr",
+] as const;
+
+/**
+ * Generate aliases to map virtual package paths to the actual published package.
+ *
+ * Only needed when installed from npm, where the package is under @ivogt/rsc-router
+ * but virtual entries import from rsc-router/*.
+ *
+ * Returns empty object in workspace development where rsc-router resolves directly.
+ */
+export function getPackageAliases(): Record<string, string> {
+  if (isWorkspaceDevelopment()) {
+    // No aliases needed - rsc-router resolves directly
+    return {};
+  }
+
+  const packageName = getPublishedPackageName();
+  const aliases: Record<string, string> = {};
+
+  for (const subpath of ALIAS_SUBPATHS) {
+    aliases[`${VIRTUAL_PACKAGE_NAME}${subpath}`] = `${packageName}${subpath}`;
+  }
+
+  return aliases;
+}