wip

Author: jacob-ebey

.gitignore

@@ -10,6 +10,7 @@ node_modules/
 /examples/*/dist
 /tutorial/dist
 /integration/playwright-report
+/playgrounds/
 
 # v5 build files
 /packages/*/cjs/

package.json

@@ -145,6 +145,10 @@
   "pnpm": {
     "patchedDependencies": {
       "@changesets/[email protected]": "patches/@[email protected]"
+    },
+    "overrides": {
+      "react": "0.0.0-experimental-96c584661-20240412",
+      "react-dom": "0.0.0-experimental-96c584661-20240412"
     }
   }
 }

packages/react-router-dom/ssr/single-fetch.tsx

@@ -75,7 +75,7 @@ export function StreamTransfer({
   let scriptTag = value ? (
     <script
       dangerouslySetInnerHTML={{
-        __html: `window.__remixContext.streamController.enqueue(${escapeHtml(
+        __html: `window.__remixContext.streamControllers[${identifier}].enqueue(${escapeHtml(
           JSON.stringify(value)
         )});`,
       }}
@@ -88,7 +88,7 @@ export function StreamTransfer({
         {scriptTag}
         <script
           dangerouslySetInnerHTML={{
-            __html: `window.__remixContext.streamController.close();`,
+            __html: `window.__remixContext.streamControllers[${identifier}].close();`,
           }}
         />
       </>

packages/remix-dev/config.ts

@@ -16,6 +16,7 @@ interface FutureConfig {
   v3_fetcherPersist: boolean;
   v3_relativeSplatPath: boolean;
   v3_throwAbortReason: boolean;
+  unstable_serverComponents: boolean;
   unstable_singleFetch: boolean;
 }
 
@@ -80,6 +81,11 @@ export interface RemixConfig {
    */
   entryServerFilePath: string;
 
+  /**
+   * The absolute path to the entry.react-server file.
+   */
+  entryReactServerFilePath: string;
+
   /**
    * An object of all available routes, keyed by route id.
    */
@@ -120,9 +126,15 @@ export async function resolveConfig(
 
   let userEntryClientFile = findEntry(appDirectory, "entry.client");
   let userEntryServerFile = findEntry(appDirectory, "entry.server");
+  let userEntryReactServerFile = findEntry(appDirectory, "entry.react-server");
 
   let entryServerFile: string;
-  let entryClientFile = userEntryClientFile || "entry.client.tsx";
+  let entryClientFile =
+    userEntryClientFile ||
+    (appConfig.future?.unstable_serverComponents
+      ? "entry.client-rsc.tsx"
+      : "entry.client.tsx");
+  let entryReactServerFile;
 
   let pkgJson = await PackageJson.load(rootDirectory);
   let deps = pkgJson.content.dependencies ?? {};
@@ -185,6 +197,34 @@ export async function resolveConfig(
     entryServerFile = `entry.server.${serverRuntime}.tsx`;
   }
 
+  if (userEntryReactServerFile) {
+    entryReactServerFile = userEntryReactServerFile;
+  } 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);
+      throw new Error(
+        `Could not determine server runtime. Please install one of the following: ${formattedList}`
+      );
+    }
+
+    entryReactServerFile = `entry.react-server.${
+      serverRuntime === "node" ? "node" : "web"
+    }.tsx`;
+  }
+
   let entryClientFilePath = userEntryClientFile
     ? path.resolve(appDirectory, userEntryClientFile)
     : path.resolve(defaultsDirectory, entryClientFile);
@@ -193,6 +233,10 @@ export async function resolveConfig(
     ? path.resolve(appDirectory, userEntryServerFile)
     : path.resolve(defaultsDirectory, entryServerFile);
 
+  let entryReactServerFilePath = userEntryReactServerFile
+    ? path.resolve(appDirectory, userEntryReactServerFile)
+    : path.resolve(defaultsDirectory, entryReactServerFile);
+
   let rootRouteFile = findEntry(appDirectory, "root");
   if (!rootRouteFile) {
     throw new Error(`Missing "root" route file in ${appDirectory}`);
@@ -215,17 +259,23 @@ export async function resolveConfig(
     }
   }
 
+  let unstable_serverComponents =
+    appConfig.future?.unstable_serverComponents === true;
   let future: FutureConfig = {
     v3_fetcherPersist: appConfig.future?.v3_fetcherPersist === true,
     v3_relativeSplatPath: appConfig.future?.v3_relativeSplatPath === true,
     v3_throwAbortReason: appConfig.future?.v3_throwAbortReason === true,
-    unstable_singleFetch: appConfig.future?.unstable_singleFetch === true,
+    unstable_singleFetch:
+      appConfig.future?.unstable_singleFetch === true ||
+      unstable_serverComponents,
+    unstable_serverComponents,
   };
 
   return {
     appDirectory,
     entryClientFilePath,
     entryServerFilePath,
+    entryReactServerFilePath,
     routes,
     serverModuleFormat,
     future,

packages/remix-dev/config/defaults/entry.client-rsc.tsx

@@ -0,0 +1,19 @@
+import { RouterProvider } from "react-router-dom";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import RSD from "react-server-dom-diy/client";
+
+export default function start() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RouterProvider />
+      </StrictMode>
+    );
+  });
+}
+
+export function createFromReadableStream(body: ReadableStream<Uint8Array>) {
+  return RSD.createFromReadableStream(body);
+}

packages/remix-dev/config/defaults/entry.react-server.node.tsx

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

packages/remix-dev/config/defaults/entry.react-server.web.tsx

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

packages/remix-dev/package.json

@@ -50,6 +50,7 @@
     "set-cookie-parser": "^2.6.0"
   },
   "devDependencies": {
+    "react-server-dom-diy": "0.0.0-experimental-15a3a5622-202404158",
     "@react-router/serve": "workspace:*",
     "@types/babel__core": "^7.20.5",
     "@types/babel__generator": "^7.6.8",
@@ -76,12 +77,16 @@
   },
   "peerDependencies": {
     "react-router-dom": "workspace:^",
+    "react-server-dom-diy": "*",
     "@react-router/serve": "workspace:^",
     "typescript": "^5.1.0",
     "vite": "^5.1.0",
     "wrangler": "^3.28.2"
   },
   "peerDependenciesMeta": {
+    "react-server-dom-diy": {
+      "optional": true
+    },
     "@react-router/serve": {
       "optional": true
     },

packages/remix-dev/tsconfig.json

@@ -11,6 +11,7 @@
     "strict": true,
     "skipLibCheck": true,
     "declaration": true,
+    "declarationMap": true,
     "emitDeclarationOnly": true,
     "rootDir": ".",
     "outDir": "./dist"

packages/remix-dev/vite/build.ts

@@ -317,6 +317,36 @@ export async function build(
     })
   );
 
+  // Then run Vite React Server builds in parallel
+  if (reactRouterConfig.future.unstable_serverComponents) {
+    process.env.REACT_SERVER = "1";
+    let {} = await getServerBuilds(ctx);
+    await Promise.all(serverBuilds.map(viteBuild));
+
+    let _viteManifestPaths = getViteManifestPaths(ctx, serverBuilds);
+    await Promise.all(
+      viteManifestPaths.map(async ({ srcPath, destPath }) => {
+        let manifestExists = await fse.pathExists(srcPath);
+        if (!manifestExists) return;
+
+        // Move/delete original Vite manifest file
+        if (ctx.viteManifestEnabled) {
+          await fse.ensureDir(path.dirname(destPath));
+          await fse.move(srcPath, destPath);
+        } else {
+          await fse.remove(srcPath);
+        }
+
+        // Remove .vite dir if it's now empty
+        let viteDir = path.dirname(srcPath);
+        let viteDirFiles = await fse.readdir(viteDir);
+        if (viteDirFiles.length === 0) {
+          await fse.remove(viteDir);
+        }
+      })
+    );
+  }
+
   if (ctx.reactRouterConfig.manifest) {
     await fse.ensureDir(
       path.join(ctx.reactRouterConfig.buildDirectory, ".react-router")