@react-router/dev 0.0.0-experimental-13d6d438f → 0.0.0-experimental-9aebdc522

package/dist/cli/commands.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli/detectPackageManager.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli/index.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli/run.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli/useJavascript.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/cli.js

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

package/dist/colors.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

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

@@ -0,0 +1,119 @@
+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.__diy_client_manifest__.callServer = async (id, args) => {
+  const href = window.location.href;
+  const headers = new Headers({
+    Accept: "text/x-component",
+    "rsc-action": id,
+  });
+  const responsePromise = fetch(href, {
+    method: "POST",
+    headers,
+    body: await ReactServerDOM.encodeReply(args),
+  });
+
+  const result = await ReactServerDOM.createFromFetch(
+    responsePromise,
+    window.__diy_client_manifest__
+  );
+
+  window.__remixRouter.revalidate();
+
+  return result;
+};
+
+window.createFromReadableStream = function createFromReadableStream(
+  body: ReadableStream<Uint8Array>
+) {
+  return ReactServerDOM.createFromReadableStream(
+    body,
+    window.__diy_client_manifest__
+  );
+};
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>
+  );
+});
+
+if (import.meta.hot) {
+  console.log("ACCEPTING HMR");
+  import.meta.hot.on("react-router:hmr", () => {
+    window.__remixRouter.revalidate();
+  });
+}

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

@@ -0,0 +1,19 @@
+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);
+}
+
+export const decodeAction = ReactServerDOM.decodeAction;
+export const decodeFormState = ReactServerDOM.decodeFormState;
+export const decodeReply = ReactServerDOM.decodeReply;

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

@@ -0,0 +1,13 @@
+// @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__
+  );
+}
+
+export const decodeAction = ReactServerDOM.decodeAction;
+export const decodeFormState = ReactServerDOM.decodeFormState;
+export const decodeReply = ReactServerDOM.decodeReply;

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-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/config/flatRoutes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/config/format.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/config/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * 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: {
@@ -87,11 +88,6 @@ export type VitePluginConfig = {
      * A function that is called after the full React Router build is complete.
      */
     buildEnd?: BuildEndHook;
-    /**
-     * Whether to write a `"manifest.json"` file to the build directory.`
-     * Defaults to `false`.
-     */
-    manifest?: boolean;
     /**
      * An array of URLs to prerender to HTML files at build time.  Can also be a
      * function returning an array to dynamically generate URLs.
@@ -143,19 +139,10 @@ export type ResolvedVitePluginConfig = Readonly<{
      * Enabled future flags
      */
     future: FutureConfig;
-    /**
-     * Whether to write a `"manifest.json"` file to the build directory.`
-     * Defaults to `false`.
-     */
-    manifest: boolean;
     /**
      * An array of URLs to prerender to HTML files at build time.
      */
     prerender: Array<string> | null;
-    /**
-     * Derived from Vite's `base` config
-     * */
-    publicPath: string;
     /**
      * An object of all available routes, keyed by route id.
      */
@@ -184,6 +171,7 @@ export type ResolvedVitePluginConfig = Readonly<{
      */
     ssr: boolean;
 }>;
+export declare function resolvePublicPath(viteUserConfig: Vite.UserConfig): string;
 export declare function resolveReactRouterConfig({ rootDirectory, reactRouterUserConfig, viteUserConfig, viteCommand, }: {
     rootDirectory: string;
     reactRouterUserConfig: VitePluginConfig;
@@ -210,19 +198,10 @@ export declare function resolveReactRouterConfig({ rootDirectory, reactRouterUse
      * Enabled future flags
      */
     future: FutureConfig;
-    /**
-     * Whether to write a `"manifest.json"` file to the build directory.`
-     * Defaults to `false`.
-     */
-    manifest: boolean;
     /**
      * An array of URLs to prerender to HTML files at build time.
      */
     prerender: string[] | null;
-    /**
-     * Derived from Vite's `base` config
-     * */
-    publicPath: string;
     /**
      * An object of all available routes, keyed by route id.
      */
@@ -256,6 +235,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-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -86,6 +86,9 @@ let deepFreeze = o => {
   });
   return o;
 };
+function resolvePublicPath(viteUserConfig) {
+  return viteUserConfig.base ?? "/";
+}
 async function resolveReactRouterConfig({
   rootDirectory,
   reactRouterUserConfig,
@@ -110,7 +113,6 @@ async function resolveReactRouterConfig({
   let defaults = {
     basename: "/",
     buildDirectory: "build",
-    manifest: false,
     serverBuildFile: "index.js",
     serverModuleFormat: "esm",
     ssr: true
@@ -122,7 +124,6 @@ async function resolveReactRouterConfig({
     buildEnd,
     future: userFuture,
     ignoredRouteFiles,
-    manifest,
     routes: userRoutesFunction,
     prerender: prerenderConfig,
     serverBuildFile,
@@ -151,7 +152,7 @@ async function resolveReactRouterConfig({
   }
   let appDirectory = path__default["default"].resolve(rootDirectory, userAppDirectory || "app");
   let buildDirectory = path__default["default"].resolve(rootDirectory, userBuildDirectory);
-  let publicPath = viteUserConfig.base ?? "/";
+  let publicPath = resolvePublicPath(viteUserConfig);
   if (basename !== "/" && viteCommand === "serve" && !((_viteUserConfig$serve = viteUserConfig.server) !== null && _viteUserConfig$serve !== void 0 && _viteUserConfig$serve.middlewareMode) && !basename.startsWith(publicPath)) {
     throw new Error("When using the React Router `basename` and the Vite `base` config, " + "the `basename` config must begin with `base` for the default " + "Vite dev server.");
   }
@@ -187,7 +188,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,
@@ -195,9 +197,7 @@ async function resolveReactRouterConfig({
     buildDirectory,
     buildEnd,
     future,
-    manifest,
     prerender,
-    publicPath,
     routes: routes$1,
     serverBuildFile,
     serverBundles,
@@ -223,10 +223,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 +243,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 +263,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
   };
 }
@@ -285,4 +301,5 @@ let disjunctionListFormat = new Intl.ListFormat("en", {
 
 exports.configRouteToBranchRoute = configRouteToBranchRoute;
 exports.resolveEntryFiles = resolveEntryFiles;
+exports.resolvePublicPath = resolvePublicPath;
 exports.resolveReactRouterConfig = resolveReactRouterConfig;

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/invariant.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * 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-9aebdc522
+ *
+ * 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-13d6d438f
+ * @react-router/dev v0.0.0-experimental-9aebdc522
  *
  * Copyright (c) Remix Software Inc.
  *