@react-router/dev 0.0.0-experimental-cb25a21e1 → 0.0.0-experimental-27337b0d6

package/dist/cli/commands.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli/detectPackageManager.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli/index.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli/run.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli/useJavascript.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/colors.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/config/defaults/entry.client.rsc.tsx

@@ -0,0 +1,90 @@
+import { HydratedRouter } from "react-router";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+// @ts-expect-error - no types
+import ReactServerDOM from "react-server-dom-diy/client";
+
+if (import.meta.env.PROD) {
+  window.__diy_client_manifest__ = {
+    _cache: new Map(),
+    resolveClientReference([id, exportName]) {
+      return {
+        preloadModule() {
+          if (window.__diy_client_manifest__._cache.has(id)) {
+            return window.__diy_client_manifest__._cache.get(id);
+          }
+          const promise = import("virtual:react-router/client-references")
+            .then(({ default: mods }) => mods[id]())
+            .then((mod) => {
+              promise.status = "fulfilled";
+              promise.value = mod;
+            })
+            .catch((res) => {
+              promise.status = "rejected";
+              promise.reason = res;
+              throw res;
+            });
+          promise.status = "pending";
+          window.__diy_client_manifest__._cache.set(id, promise);
+          return promise;
+        },
+        requireModule() {
+          const cached = window.__diy_client_manifest__._cache.get(id);
+          if (!cached) throw new Error(`Module ${id} not found`);
+          if (cached.reason) throw cached.reason;
+          return cached.value[exportName];
+        },
+      };
+    },
+  };
+} else {
+  window.__diy_client_manifest__ = {
+    _cache: new Map(),
+    resolveClientReference([id, exportName]) {
+      return {
+        preloadModule() {
+          if (window.__diy_client_manifest__._cache.has(id)) {
+            return window.__diy_client_manifest__._cache.get(id);
+          }
+          const promise = import(id)
+            .then((mod) => {
+              promise.status = "fulfilled";
+              promise.value = mod;
+            })
+            .catch((res) => {
+              promise.status = "rejected";
+              promise.reason = res;
+              throw res;
+            });
+          promise.status = "pending";
+          window.__diy_client_manifest__._cache.set(id, promise);
+          return promise;
+        },
+        requireModule() {
+          const cached = window.__diy_client_manifest__._cache.get(id);
+          if (!cached) throw new Error(`Module ${id} not found`);
+          if (cached.reason) throw cached.reason;
+          return cached.value[exportName];
+        },
+      };
+    },
+  };
+}
+
+window.createFromReadableStream = function createFromReadableStream(
+  body: ReadableStream<Uint8Array>
+) {
+  return ReactServerDOM.createFromReadableStream(
+    body,
+    window.__diy_client_manifest__
+  );
+};
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>
+  );
+});

package/dist/config/defaults/entry.react-server.node.tsx

@@ -0,0 +1,15 @@
+import * as stream from "node:stream";
+
+import { createReadableStreamFromReadable } from "@react-router/node";
+// @ts-expect-error - no types
+import ReactServerDOM from "react-server-dom-diy/server";
+
+export function renderToReadableStream(data: unknown) {
+  const passthrough = new stream.PassThrough();
+  const { pipe } = ReactServerDOM.renderToPipeableStream(
+    data,
+    global.__diy_server_manifest__
+  );
+  pipe(passthrough);
+  return createReadableStreamFromReadable(passthrough);
+}

package/dist/config/defaults/entry.react-server.web.tsx

@@ -0,0 +1,9 @@
+// @ts-expect-error - no types
+import ReactServerDOM from "react-server-dom-diy/server";
+
+export function renderToReadableStream(data: unknown) {
+  return ReactServerDOM.renderToReadableStream(
+    data,
+    global.__diy_server_manifest__
+  );
+}

package/dist/config/defaults/entry.server.node.rsc.tsx

@@ -0,0 +1,164 @@
+import { PassThrough, Readable } from "node:stream";
+
+import type { AppLoadContext, EntryContext } from "@react-router/node";
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { RemixServer } from "react-router";
+import * as isbotModule from "isbot";
+import { renderToPipeableStream } from "react-dom/server";
+// @ts-expect-error - no types
+import ReactServerDOM from "react-server-dom-diy/client";
+
+const ABORT_DELAY = 5_000;
+
+export function createFromReadableStream(body: ReadableStream<Uint8Array>) {
+  return ReactServerDOM.createFromNodeStream(
+    Readable.fromWeb(body as any),
+    global.__diy_client_manifest__
+  );
+}
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  loadContext: AppLoadContext
+) {
+  let prohibitOutOfOrderStreaming =
+    isBotRequest(request.headers.get("user-agent")) || remixContext.isSpaMode;
+
+  return prohibitOutOfOrderStreaming
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      );
+}
+
+// We have some Remix apps in the wild already running with isbot@3 so we need
+// to maintain backwards compatibility even though we want new apps to use
+// isbot@4.  That way, we can ship this as a minor Semver update to @react-router/dev.
+function isBotRequest(userAgent: string | null) {
+  if (!userAgent) {
+    return false;
+  }
+
+  // isbot >= 3.8.0, >4
+  if ("isbot" in isbotModule && typeof isbotModule.isbot === "function") {
+    return isbotModule.isbot(userAgent);
+  }
+
+  // isbot < 3.8.0
+  if ("default" in isbotModule && typeof isbotModule.default === "function") {
+    return isbotModule.default(userAgent);
+  }
+
+  return false;
+}
+
+function handleBotRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onAllReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+
+function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onShellReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}

package/dist/config/findConfig.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/config/flatRoutes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/config/format.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/config/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/config.d.ts

@@ -39,6 +39,7 @@ interface FutureConfig {
     v3_fetcherPersist: boolean;
     v3_relativeSplatPath: boolean;
     v3_throwAbortReason: boolean;
+    unstable_serverComponents: boolean;
 }
 export type BuildManifest = DefaultBuildManifest | ServerBundlesBuildManifest;
 type BuildEndHook = (args: {
@@ -256,6 +257,7 @@ export declare function resolveEntryFiles({ rootDirectory, reactRouterConfig, }:
     reactRouterConfig: ResolvedVitePluginConfig;
 }): Promise<{
     entryClientFilePath: string;
+    entryReactServerFilePath: string | undefined;
     entryServerFilePath: string;
 }>;
 export {};

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -187,7 +187,8 @@ async function resolveReactRouterConfig({
   let future = {
     v3_fetcherPersist: (userFuture === null || userFuture === void 0 ? void 0 : userFuture.v3_fetcherPersist) === true,
     v3_relativeSplatPath: (userFuture === null || userFuture === void 0 ? void 0 : userFuture.v3_relativeSplatPath) === true,
-    v3_throwAbortReason: (userFuture === null || userFuture === void 0 ? void 0 : userFuture.v3_throwAbortReason) === true
+    v3_throwAbortReason: (userFuture === null || userFuture === void 0 ? void 0 : userFuture.v3_throwAbortReason) === true,
+    unstable_serverComponents: (userFuture === null || userFuture === void 0 ? void 0 : userFuture.unstable_serverComponents) === true
   };
   let reactRouterConfig = deepFreeze({
     appDirectory,
@@ -223,10 +224,13 @@ async function resolveEntryFiles({
   let defaultsDirectory = path__default["default"].resolve(__dirname, "config", "defaults");
   let userEntryClientFile = findEntry(appDirectory, "entry.client");
   let userEntryServerFile = findEntry(appDirectory, "entry.server");
+  let userEntryReactServerFile = findEntry(appDirectory, "entry.react-server");
   let entryServerFile;
-  let entryClientFile = userEntryClientFile || "entry.client.tsx";
+  let entryReactServerFile;
+  let entryClientFile = userEntryClientFile || future.unstable_serverComponents ? "entry.client.rsc.tsx" : "entry.client.tsx";
   let pkgJson = await PackageJson__default["default"].load(rootDirectory);
   let deps = pkgJson.content.dependencies ?? {};
+  let serverRuntime = deps["@react-router/deno"] ? "deno" : deps["@react-router/cloudflare"] ? "cloudflare" : deps["@react-router/node"] ? "node" : undefined;
   if (!reactRouterConfig.ssr) {
     // This is a super-simple default since we don't need streaming in SPA Mode.
     // We can include this in a remix-spa template, but right now `npx remix reveal`
@@ -240,7 +244,6 @@ async function resolveEntryFiles({
   } else if (userEntryServerFile) {
     entryServerFile = userEntryServerFile;
   } else {
-    let serverRuntime = deps["@react-router/deno"] ? "deno" : deps["@react-router/cloudflare"] ? "cloudflare" : deps["@react-router/node"] ? "node" : undefined;
     if (!serverRuntime) {
       let serverRuntimes = ["@react-router/deno", "@react-router/cloudflare", "@react-router/node"];
       let formattedList = disjunctionListFormat.format(serverRuntimes);
@@ -261,12 +264,26 @@ async function resolveEntryFiles({
         stdio: "inherit"
       });
     }
-    entryServerFile = `entry.server.${serverRuntime}.tsx`;
+    entryServerFile = reactRouterConfig.future.unstable_serverComponents ? `entry.server.${serverRuntime}.rsc.tsx` : `entry.server.${serverRuntime}.tsx`;
+  }
+  if (future.unstable_serverComponents) {
+    if (userEntryReactServerFile) {
+      entryReactServerFile = userEntryReactServerFile;
+    } else {
+      if (!serverRuntime) {
+        let serverRuntimes = ["@react-router/deno", "@react-router/cloudflare", "@react-router/node"];
+        let formattedList = disjunctionListFormat.format(serverRuntimes);
+        throw new Error(`Could not determine server runtime. Please install one of the following: ${formattedList}`);
+      }
+      entryReactServerFile = `entry.react-server.${serverRuntime === "node" ? serverRuntime : "web"}.tsx`;
+    }
   }
   let entryClientFilePath = userEntryClientFile ? path__default["default"].resolve(reactRouterConfig.appDirectory, userEntryClientFile) : path__default["default"].resolve(defaultsDirectory, entryClientFile);
   let entryServerFilePath = userEntryServerFile ? path__default["default"].resolve(reactRouterConfig.appDirectory, userEntryServerFile) : path__default["default"].resolve(defaultsDirectory, entryServerFile);
+  let entryReactServerFilePath = userEntryReactServerFile ? path__default["default"].resolve(reactRouterConfig.appDirectory, userEntryReactServerFile) : entryReactServerFile ? path__default["default"].resolve(defaultsDirectory, entryReactServerFile) : undefined;
   return {
     entryClientFilePath,
+    entryReactServerFilePath,
     entryServerFilePath
   };
 }

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/invariant.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/runtime.client.d.ts

@@ -0,0 +1 @@
+export declare function createServerReference(_: unknown, mod: string, name: string): void;

package/dist/runtime.client.js

@@ -0,0 +1,19 @@
+/**
+ * @react-router/dev v0.0.0-experimental-27337b0d6
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function createServerReference(_, mod, name) {
+  throw new Error("Server references are not yet implemented.");
+}
+
+exports.createServerReference = createServerReference;

package/dist/vite/babel.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/build.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -227,7 +227,16 @@ async function build(root, {
     });
   }
   await cleanBuildDirectory(viteConfig, ctx);
-  // Run the Vite client build first
+  // Then run React server build first
+  if (reactRouterConfig.future.unstable_serverComponents) {
+    // TODO: This will be handled by the vite env API in the future
+    process.env.REACT_SERVER_BUILD = "1";
+    await viteBuild({
+      ssr: true
+    });
+  }
+  process.env.REACT_SERVER_BUILD = "";
+  // Run the Vite client build second
   await viteBuild({
     ssr: false
   });
@@ -267,6 +276,10 @@ async function build(root, {
     reactRouterConfig,
     viteConfig
   }));
+  const {
+    serverModules
+  } = plugin.getReactServerOptions();
+  invariant["default"](!serverModules.size, "`use server` is not yet supported.");
 }
 
 exports.build = build;

package/dist/vite/cloudflare-proxy-plugin.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/dev.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/import-vite-esm-sync.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/index.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/node-adapter.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/plugin.d.ts

@@ -59,6 +59,7 @@ type ReactRouterPluginSsrBuildContext = {
 export type ReactRouterPluginContext = ReactRouterPluginSsrBuildContext & {
     rootDirectory: string;
     entryClientFilePath: string;
+    entryReactServerFilePath?: string;
     entryServerFilePath: string;
     reactRouterConfig: ResolvedVitePluginConfig;
     viteManifestEnabled: boolean;
@@ -68,4 +69,12 @@ type MaybePromise<T> = T | Promise<T>;
 export declare let setReactRouterDevLoadContext: (loadContext: (request: Request) => MaybePromise<Record<string, unknown>>) => void;
 export type ReactRouterVitePlugin = (config?: VitePluginConfig) => Vite.Plugin[];
 export declare const reactRouterVitePlugin: ReactRouterVitePlugin;
+declare global {
+    var __clientModules: Set<string>;
+    var __serverModules: Set<string>;
+}
+export declare function getReactServerOptions(): {
+    clientModules: Set<string>;
+    serverModules: Set<string>;
+};
 export {};

package/dist/vite/plugin.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -22,6 +22,7 @@ var reactRouter = require('react-router');
 var esModuleLexer = require('es-module-lexer');
 var jsesc = require('jsesc');
 var colors = require('picocolors');
+var unpluginRsc = require('unplugin-rsc');
 var findConfig = require('../config/findConfig.js');
 var invariant = require('../invariant.js');
 var nodeAdapter = require('./node-adapter.js');
@@ -118,13 +119,16 @@ let serverManifestId = vmod.id("server-manifest");
 let browserManifestId = vmod.id("browser-manifest");
 let hmrRuntimeId = vmod.id("hmr-runtime");
 let injectHmrRuntimeId = vmod.id("inject-hmr-runtime");
+let reactServerBuildId = vmod.id("react-server-build");
+let clientReferencesId = vmod.id("client-references");
+let serverReferencesId = vmod.id("server-references");
 const resolveRelativeRouteFilePath = (route, reactRouterConfig) => {
   let vite = importViteEsmSync.importViteEsmSync();
   let file = route.file;
   let fullPath = path__namespace.resolve(reactRouterConfig.appDirectory, file);
   return vite.normalizePath(fullPath);
 };
-let vmods = [serverBuildId, serverManifestId, browserManifestId];
+let vmods = [serverBuildId, serverManifestId, browserManifestId, reactServerBuildId, clientReferencesId, serverReferencesId];
 const invalidateVirtualModules = viteDevServer => {
   vmods.forEach(vmod$1 => {
     let mod = viteDevServer.moduleGraph.getModuleById(vmod.resolve(vmod$1));
@@ -233,6 +237,7 @@ const getServerBundleBuildConfig = viteUserConfig => {
   return viteUserConfig.__reactRouterServerBundleBuildConfig;
 };
 let getServerBuildDirectory = ctx => path__namespace.join(ctx.reactRouterConfig.buildDirectory, "server", ...(ctx.serverBundleBuildConfig ? [ctx.serverBundleBuildConfig.serverBundleId] : []));
+let getReactServerBuildDirectory = reactRouterConfig => path__namespace.join(reactRouterConfig.buildDirectory, "react-server");
 let getClientBuildDirectory = reactRouterConfig => path__namespace.join(reactRouterConfig.buildDirectory, "client");
 let defaultEntriesDir = path__namespace.resolve(__dirname, "..", "config", "defaults");
 let defaultEntries = fse__namespace.readdirSync(defaultEntriesDir).map(filename => path__namespace.join(defaultEntriesDir, filename));
@@ -280,6 +285,7 @@ const reactRouterVitePlugin = _config => {
     });
     let {
       entryClientFilePath,
+      entryReactServerFilePath,
       entryServerFilePath
     } = await config.resolveEntryFiles({
       rootDirectory,
@@ -297,6 +303,7 @@ const reactRouterVitePlugin = _config => {
       reactRouterConfig,
       rootDirectory,
       entryClientFilePath,
+      entryReactServerFilePath,
       entryServerFilePath,
       viteManifestEnabled,
       ...ssrBuildCtx
@@ -314,7 +321,7 @@ const reactRouterVitePlugin = _config => {
     ctx.serverBundleBuildConfig.routes :
     // Otherwise, all routes are imported as usual
     ctx.reactRouterConfig.routes;
-    return `
+    let code = `
     import * as entryServer from ${JSON.stringify(resolveFileUrl.resolveFileUrl(ctx, ctx.entryServerFilePath))};
     ${Object.keys(routes).map((key, index) => {
       let route = routes[key];
@@ -340,6 +347,61 @@ const reactRouterVitePlugin = _config => {
         }`;
     }).join(",\n  ")}
       };`;
+    if (ctx.reactRouterConfig.future.unstable_serverComponents) {
+      code += `
+      export { default as clientReferences } from ${JSON.stringify(clientReferencesId)};`;
+    }
+    return code;
+  };
+  let {
+    clientModules,
+    serverModules
+  } = getReactServerOptions();
+  let getReactServerEntry = () => {
+    invariant["default"](viteConfig, "viteconfig required to generate the react-server entry");
+    invariant["default"](ctx.entryReactServerFilePath, "entryReactServerFilePath required to generate the react-server entry");
+    let routes = ctx.serverBundleBuildConfig ?
+    // For server bundle builds, the server build should only import the
+    // routes for this bundle rather than importing all routes
+    ctx.serverBundleBuildConfig.routes :
+    // Otherwise, all routes are imported as usual
+    ctx.reactRouterConfig.routes;
+    return `
+      import * as entryServer from ${JSON.stringify(resolveFileUrl.resolveFileUrl(ctx, ctx.entryReactServerFilePath))};
+      ${Object.keys(routes).map((key, index) => {
+      let route = routes[key];
+      return `import * as route${index} from ${JSON.stringify(resolveFileUrl.resolveFileUrl(ctx, resolveRelativeRouteFilePath(route, ctx.reactRouterConfig)))};`;
+    }).join("\n")}
+      export const future = ${JSON.stringify(ctx.reactRouterConfig.future)};
+      export const basename = ${JSON.stringify(ctx.reactRouterConfig.basename)};
+      export const entry = { module: entryServer };
+      export const routes = {
+        ${Object.keys(routes).map((key, index) => {
+      let route = routes[key];
+      return `${JSON.stringify(key)}: {
+        id: ${JSON.stringify(route.id)},
+        parentId: ${JSON.stringify(route.parentId)},
+        path: ${JSON.stringify(route.path)},
+        index: ${JSON.stringify(route.index)},
+        caseSensitive: ${JSON.stringify(route.caseSensitive)},
+        module: route${index}
+      }`;
+    }).join(",\n  ")}
+      };`;
+  };
+  let getClientReferencesEntry = () => {
+    let result = "export default {";
+    for (let clientModule of clientModules) {
+      result += `${JSON.stringify(prodHash(clientModule))}: () => import(${JSON.stringify(clientModule)}),`;
+    }
+    return `${result}};`;
+  };
+  let getServerReferencesEntry = () => {
+    let result = "export default {";
+    for (let serverModule of serverModules) {
+      result += `${JSON.stringify(prodHash(serverModule))}: () => import(${JSON.stringify(serverModule)}),`;
+    }
+    return `${result}\};`;
   };
   let loadViteManifest = async directory => {
     let manifestContents = await fse__namespace.readFile(path__namespace.resolve(directory, ".vite", "manifest.json"), "utf-8");
@@ -538,9 +600,9 @@ const reactRouterVitePlugin = _config => {
               rollupOptions: {
                 ...baseRollupOptions,
                 preserveEntrySignatures: "exports-only",
-                input: [ctx.entryClientFilePath, ...Object.values(ctx.reactRouterConfig.routes).map(route => `${path__namespace.resolve(ctx.reactRouterConfig.appDirectory, route.file)}${BUILD_CLIENT_ROUTE_QUERY_STRING}`)]
+                input: [ctx.entryClientFilePath, ...Object.values(ctx.reactRouterConfig.routes).map(route => `${path__namespace.resolve(ctx.reactRouterConfig.appDirectory, route.file)}${BUILD_CLIENT_ROUTE_QUERY_STRING}`), ...(ctx.reactRouterConfig.future.unstable_serverComponents ? clientModules : [])]
               }
-            } : {
+            } : !ctx.reactRouterConfig.future.unstable_serverComponents || !process.env.REACT_SERVER_BUILD ? {
               // We move SSR-only assets to client assets. Note that the
               // SSR build can also emit code-split JS files (e.g. by
               // dynamic import) under the same assets directory
@@ -561,6 +623,28 @@ const reactRouterVitePlugin = _config => {
                   format: ctx.reactRouterConfig.serverModuleFormat
                 }
               }
+            } : {
+              // We move SSR-only assets to client assets. Note that the
+              // SSR build can also emit code-split JS files (e.g. by
+              // dynamic import) under the same assets directory
+              // regardless of "ssrEmitAssets" option, so we also need to
+              // keep these JS files have to be kept as-is.
+              ssrEmitAssets: true,
+              copyPublicDir: false,
+              // Assets in the public directory are only used by the client
+              manifest: true,
+              // We need the manifest to detect SSR-only assets
+              outDir: getReactServerBuildDirectory(ctx.reactRouterConfig),
+              rollupOptions: {
+                ...baseRollupOptions,
+                preserveEntrySignatures: "exports-only",
+                // TODO: Add server references (serverModules) to input
+                input: reactServerBuildId,
+                output: {
+                  entryFileNames: ctx.reactRouterConfig.serverBuildFile,
+                  format: ctx.reactRouterConfig.serverModuleFormat
+                }
+              }
             })
           }
         } : undefined),
@@ -714,7 +798,7 @@ const reactRouterVitePlugin = _config => {
       // After the SSR build is finished, we inspect the Vite manifest for
       // the SSR build and move server-only assets to client assets directory
       async handler() {
-        if (!ctx.isSsrBuild) {
+        if (!ctx.isSsrBuild || process.env.REACT_SERVER_BUILD) {
           return;
         }
         invariant["default"](viteConfig);
@@ -798,6 +882,18 @@ const reactRouterVitePlugin = _config => {
             });
             return `window.__remixManifest=${reactRouterManifestString};`;
           }
+        case vmod.resolve(reactServerBuildId):
+          {
+            return getReactServerEntry();
+          }
+        case vmod.resolve(clientReferencesId):
+          {
+            return getClientReferencesEntry();
+          }
+        case vmod.resolve(serverReferencesId):
+          {
+            return getServerReferencesEntry();
+          }
       }
     }
   }, {
@@ -853,9 +949,20 @@ const reactRouterVitePlugin = _config => {
   }, {
     name: "react-router-route-exports",
     async transform(code, id, options) {
-      if (options !== null && options !== void 0 && options.ssr) return;
+      var _ctx;
+      if (options !== null && options !== void 0 && options.ssr && !((_ctx = ctx) !== null && _ctx !== void 0 && _ctx.reactRouterConfig.future.unstable_serverComponents)) {
+        return;
+      }
       let route = getRoute(ctx.reactRouterConfig, id);
       if (!route) return;
+      let [filepath] = id.split("?");
+      if (ctx.reactRouterConfig.future.unstable_serverComponents && process.env.REACT_SERVER_BUILD) {
+        return removeExports.removeExports(code, CLIENT_ROUTE_EXPORTS, {
+          sourceMaps: true,
+          filename: id,
+          sourceFileName: filepath
+        });
+      }
       if (!ctx.reactRouterConfig.ssr) {
         let serverOnlyExports = esModuleLexer.parse(code)[1].map(exp => exp.n).filter(exp => SERVER_ONLY_ROUTE_EXPORTS.includes(exp));
         if (serverOnlyExports.length > 0) {
@@ -871,7 +978,6 @@ const reactRouterVitePlugin = _config => {
           }
         }
       }
-      let [filepath] = id.split("?");
       return removeExports.removeExports(code, SERVER_ONLY_ROUTE_EXPORTS, {
         sourceMaps: true,
         filename: id,
@@ -967,6 +1073,82 @@ const reactRouterVitePlugin = _config => {
       });
       return modules;
     }
+  }, {
+    name: "remix:react-server",
+    config() {
+      const env = process.env.REACT_SERVER_BUILD ? "server" : "client";
+      switch (env) {
+        case "server":
+          return {
+            optimizeDeps: {
+              include: ["react", "react/jsx-runtime", "react/jsx-dev-runtime", "react-server-dom-diy/server"]
+            },
+            resolve: {
+              conditions: ["react-server"]
+            },
+            ssr: {
+              noExternal: ["react", "react/jsx-runtime", "react/jsx-dev-runtime", "react-server-dom-diy/server"],
+              optimizeDeps: {
+                include: ["react", "react/jsx-runtime", "react/jsx-dev-runtime", "react-server-dom-diy/server"]
+              },
+              resolve: {
+                conditions: ["react-server"],
+                externalConditions: ["react-server"]
+              }
+            }
+          };
+      }
+    },
+    configResolved(resolvedViteConfig) {
+      viteConfig = resolvedViteConfig;
+      invariant["default"](viteConfig);
+    },
+    transform(...args) {
+      invariant["default"](viteConfig);
+      const env = process.env.REACT_SERVER_BUILD ? "server" : "client";
+      let hash = viteConfig.mode !== "production" ? devHash : prodHash;
+      switch (env) {
+        case "client":
+          return unpluginRsc.rscClientPlugin.vite({
+            include: ["**/*"],
+            transformModuleId: hash,
+            useServerRuntime: {
+              function: "createServerReference",
+              module: "@react-router/dev/dist/runtime.client.js"
+            },
+            onModuleFound(id, type) {
+              switch (type) {
+                case "use server":
+                  serverModules.add(id);
+                  break;
+              }
+            }
+          }).transform.call(this, ...args);
+        case "server":
+          return unpluginRsc.rscServerPlugin.vite({
+            include: ["**/*"],
+            transformModuleId: hash,
+            useClientRuntime: {
+              function: "registerClientReference",
+              module: "react-server-dom-diy/server"
+            },
+            useServerRuntime: {
+              function: "registerServerReference",
+              module: "react-server-dom-diy/server"
+            },
+            onModuleFound(id, type) {
+              switch (type) {
+                case "use client":
+                  clientModules.add(id);
+                  break;
+                case "use server":
+                  serverModules.add(id);
+                  break;
+              }
+            }
+          }).transform.call(this, ...args);
+      }
+    }
   }];
 };
 function isInReactRouterMonorepo() {
@@ -1165,8 +1347,31 @@ function createPrerenderRoutes(manifest, parentId = "", routesByParentId = group
     };
   });
 }
+function prodHash(str, _) {
+  return `/${path__namespace.relative(process.cwd(), str)}`;
+}
+function devHash(str, _) {
+  const resolved = path__namespace.resolve(str);
+  let unixPath = resolved.replace(/\\/g, "/");
+  if (!unixPath.startsWith("/")) {
+    unixPath = `/${unixPath}`;
+  }
+  if (resolved.startsWith(process.cwd())) {
+    return `/${path__namespace.relative(process.cwd(), unixPath)}`;
+  }
+  return `/@fs${unixPath}`;
+}
+global.__clientModules = global.__clientModules || new Set();
+global.__serverModules = global.__serverModules || new Set();
+function getReactServerOptions() {
+  return {
+    clientModules: global.__clientModules,
+    serverModules: global.__serverModules
+  };
+}
 
 exports.extractPluginContext = extractPluginContext;
+exports.getReactServerOptions = getReactServerOptions;
 exports.getServerBuildDirectory = getServerBuildDirectory;
 exports.loadPluginContext = loadPluginContext;
 exports.reactRouterVitePlugin = reactRouterVitePlugin;

package/dist/vite/profiler.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/remove-exports.d.ts

@@ -1,2 +1,4 @@
 import type { GeneratorOptions } from "@babel/generator";
-export declare const removeExports: (source: string, exportsToRemove: string[], generateOptions?: GeneratorOptions) => import("@babel/generator").GeneratorResult;
+export declare const removeExports: (source: string, exportsToRemove: string[], generateOptions?: GeneratorOptions) => import("@babel/generator").GeneratorResult | {
+    code: string;
+};

package/dist/vite/remove-exports.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -179,6 +179,20 @@ const removeExports = (source, exportsToRemove, generateOptions = {}) => {
       if (shouldRemove) {
         path.remove();
       }
+    },
+    ExportDefaultDeclaration(path) {
+      if (exportsToRemove.includes("default")) {
+        removedExports.add("default");
+        path.remove();
+        return false;
+      }
+    },
+    ExportDefaultSpecifier(path) {
+      if (exportsToRemove.includes("default")) {
+        removedExports.add("default");
+        path.remove();
+        return false;
+      }
     }
   });
   if (removedExports.size === 0) {
@@ -272,7 +286,9 @@ const removeExports = (source, exportsToRemove, generateOptions = {}) => {
       ImportNamespaceSpecifier: sweepImport
     });
   } while (referencesRemovedInThisPass);
-  return babel.generate(document, generateOptions);
+  return {
+    code: babel.generate(document, generateOptions).code + `\n${[...removedExports].map(exp => exp === "default" ? "export default 1;" : `export const ${exp} = 1;`).join("\n")}`
+  };
 };
 
 exports.removeExports = removeExports;

package/dist/vite/resolve-file-url.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/styles.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/vmod.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-cb25a21e1
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "0.0.0-experimental-cb25a21e1",
+  "version": "0.0.0-experimental-27337b0d6",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -42,9 +42,9 @@
     "react-refresh": "^0.14.0",
     "semver": "^7.3.7",
     "set-cookie-parser": "^2.6.0",
-    "@react-router/node": "0.0.0-experimental-cb25a21e1",
-    "@react-router/server-runtime": "0.0.0-experimental-cb25a21e1",
-    "react-router": "0.0.0-experimental-cb25a21e1"
+    "@react-router/node": "0.0.0-experimental-27337b0d6",
+    "@react-router/server-runtime": "0.0.0-experimental-27337b0d6",
+    "react-router": "0.0.0-experimental-27337b0d6"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -65,23 +65,29 @@
     "express": "^4.17.1",
     "esbuild-register": "^3.3.2",
     "fast-glob": "3.2.11",
+    "react-server-dom-diy": "0.0.0-experimental-15a3a5622-202404158",
     "strip-ansi": "^6.0.1",
     "tiny-invariant": "^1.2.0",
+    "unplugin-rsc": "0.0.9",
     "vite": "^5.1.0",
     "wrangler": "^3.28.2",
-    "@react-router/serve": "0.0.0-experimental-cb25a21e1"
+    "@react-router/serve": "0.0.0-experimental-27337b0d6"
   },
   "peerDependencies": {
+    "react-server-dom-diy": "*",
     "typescript": "^5.1.0",
     "vite": "^5.1.0",
     "wrangler": "^3.28.2",
-    "react-router": "^0.0.0-experimental-cb25a21e1",
-    "@react-router/serve": "^0.0.0-experimental-cb25a21e1"
+    "react-router": "^0.0.0-experimental-27337b0d6",
+    "@react-router/serve": "^0.0.0-experimental-27337b0d6"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {
       "optional": true
     },
+    "react-server-dom-diy": {
+      "optional": true
+    },
     "typescript": {
       "optional": true
     },