react-router 7.15.1 → 8.3.0

package/dist/development/lib/rsc/errorBoundaries.js

@@ -0,0 +1,90 @@
+/**
+ * react-router v8.3.0
+ *
+ * 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
+ */
+import { isRouteErrorResponse } from "../router/utils.js";
+import { useRouteError } from "../hooks.js";
+import React from "react";
+//#region lib/rsc/errorBoundaries.tsx
+var RSCRouterGlobalErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			error: null,
+			location: props.location
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	static getDerivedStateFromProps(props, state) {
+		if (state.location !== props.location) return {
+			error: null,
+			location: props.location
+		};
+		return {
+			error: state.error,
+			location: state.location
+		};
+	}
+	render() {
+		if (this.state.error) return /* @__PURE__ */ React.createElement(RSCDefaultRootErrorBoundaryImpl, {
+			error: this.state.error,
+			renderAppShell: true
+		});
+		else return this.props.children;
+	}
+};
+function ErrorWrapper({ renderAppShell, title, children }) {
+	if (!renderAppShell) return children;
+	return /* @__PURE__ */ React.createElement("html", { lang: "en" }, /* @__PURE__ */ React.createElement("head", null, /* @__PURE__ */ React.createElement("meta", { charSet: "utf-8" }), /* @__PURE__ */ React.createElement("meta", {
+		name: "viewport",
+		content: "width=device-width,initial-scale=1,viewport-fit=cover"
+	}), /* @__PURE__ */ React.createElement("title", null, title)), /* @__PURE__ */ React.createElement("body", null, /* @__PURE__ */ React.createElement("main", { style: {
+		fontFamily: "system-ui, sans-serif",
+		padding: "2rem"
+	} }, children)));
+}
+function RSCDefaultRootErrorBoundaryImpl({ error, renderAppShell }) {
+	console.error(error);
+	let heyDeveloper = /* @__PURE__ */ React.createElement("script", { dangerouslySetInnerHTML: { __html: `
+        console.log(
+          "💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out https://reactrouter.com/how-to/error-boundary for more information."
+        );
+      ` } });
+	if (isRouteErrorResponse(error)) return /* @__PURE__ */ React.createElement(ErrorWrapper, {
+		renderAppShell,
+		title: "Unhandled Thrown Response!"
+	}, /* @__PURE__ */ React.createElement("h1", { style: { fontSize: "24px" } }, error.status, " ", error.statusText), heyDeveloper);
+	let errorInstance;
+	if (error instanceof Error) errorInstance = error;
+	else {
+		let errorString = error == null ? "Unknown Error" : typeof error === "object" && "toString" in error ? error.toString() : JSON.stringify(error);
+		errorInstance = new Error(errorString);
+	}
+	return /* @__PURE__ */ React.createElement(ErrorWrapper, {
+		renderAppShell,
+		title: "Application Error!"
+	}, /* @__PURE__ */ React.createElement("h1", { style: { fontSize: "24px" } }, "Application Error"), /* @__PURE__ */ React.createElement("pre", { style: {
+		padding: "2rem",
+		background: "hsla(10, 50%, 50%, 0.1)",
+		color: "red",
+		overflow: "auto"
+	} }, errorInstance.stack), heyDeveloper);
+}
+function RSCDefaultRootErrorBoundary({ hasRootLayout }) {
+	let error = useRouteError();
+	if (hasRootLayout === void 0) throw new Error("Missing 'hasRootLayout' prop");
+	return /* @__PURE__ */ React.createElement(RSCDefaultRootErrorBoundaryImpl, {
+		renderAppShell: !hasRootLayout,
+		error
+	});
+}
+//#endregion
+export { RSCDefaultRootErrorBoundary, RSCRouterGlobalErrorBoundary };

package/dist/development/lib/rsc/html-stream/browser.d.ts

@@ -0,0 +1,48 @@
+
+//#region lib/rsc/html-stream/browser.d.ts
+declare global {
+  interface Window {
+    __FLIGHT_DATA: any[];
+  }
+}
+/**
+ * Get the prerendered [RSC](https://react.dev/reference/rsc/server-components)
+ * stream for hydration. Usually passed directly to your
+ * `react-server-dom-xyz/client`'s `createFromReadableStream`.
+ *
+ * @example
+ * import { startTransition, StrictMode } from "react";
+ * import { hydrateRoot } from "react-dom/client";
+ * import {
+ *   unstable_getRSCStream as getRSCStream,
+ *   unstable_RSCHydratedRouter as RSCHydratedRouter,
+ * } from "react-router";
+ * import type { unstable_RSCPayload as RSCPayload } from "react-router";
+ *
+ * createFromReadableStream(getRSCStream()).then(
+ *   (payload: RSCServerPayload) => {
+ *     startTransition(async () => {
+ *       hydrateRoot(
+ *         document,
+ *         <StrictMode>
+ *           <RSCHydratedRouter {...props} />
+ *         </StrictMode>,
+ *         {
+ *           // Options
+ *         }
+ *       );
+ *     });
+ *   }
+ * );
+ *
+ * @name unstable_getRSCStream
+ * @public
+ * @category RSC
+ * @mode data
+ * @returns A [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
+ * that contains the [RSC](https://react.dev/reference/rsc/server-components)
+ * data for hydration.
+ */
+declare function getRSCStream(): ReadableStream;
+//#endregion
+export { getRSCStream };

package/dist/development/lib/rsc/html-stream/browser.js

@@ -0,0 +1,74 @@
+/**
+ * react-router v8.3.0
+ *
+ * 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
+ */
+//#region lib/rsc/html-stream/browser.ts
+/**
+* Get the prerendered [RSC](https://react.dev/reference/rsc/server-components)
+* stream for hydration. Usually passed directly to your
+* `react-server-dom-xyz/client`'s `createFromReadableStream`.
+*
+* @example
+* import { startTransition, StrictMode } from "react";
+* import { hydrateRoot } from "react-dom/client";
+* import {
+*   unstable_getRSCStream as getRSCStream,
+*   unstable_RSCHydratedRouter as RSCHydratedRouter,
+* } from "react-router";
+* import type { unstable_RSCPayload as RSCPayload } from "react-router";
+*
+* createFromReadableStream(getRSCStream()).then(
+*   (payload: RSCServerPayload) => {
+*     startTransition(async () => {
+*       hydrateRoot(
+*         document,
+*         <StrictMode>
+*           <RSCHydratedRouter {...props} />
+*         </StrictMode>,
+*         {
+*           // Options
+*         }
+*       );
+*     });
+*   }
+* );
+*
+* @name unstable_getRSCStream
+* @public
+* @category RSC
+* @mode data
+* @returns A [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
+* that contains the [RSC](https://react.dev/reference/rsc/server-components)
+* data for hydration.
+*/
+function getRSCStream() {
+	let encoder = new TextEncoder();
+	let streamController = null;
+	let rscStream = new ReadableStream({ start(controller) {
+		if (typeof window === "undefined") return;
+		let handleChunk = (chunk) => {
+			if (typeof chunk === "string") controller.enqueue(encoder.encode(chunk));
+			else controller.enqueue(chunk);
+		};
+		window.__FLIGHT_DATA ||= [];
+		window.__FLIGHT_DATA.forEach(handleChunk);
+		window.__FLIGHT_DATA.push = (chunk) => {
+			handleChunk(chunk);
+			return 0;
+		};
+		streamController = controller;
+	} });
+	if (typeof document !== "undefined" && document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => {
+		streamController?.close();
+	});
+	else streamController?.close();
+	return rscStream;
+}
+//#endregion
+export { getRSCStream };

package/dist/development/lib/rsc/html-stream/server.js

@@ -0,0 +1,97 @@
+/**
+ * react-router v8.3.0
+ *
+ * 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
+ */
+//#region lib/rsc/html-stream/server.ts
+const encoder = new TextEncoder();
+const trailer = "</body></html>";
+function injectRSCPayload(rscStream, { nonce } = {}) {
+	let decoder = new TextDecoder();
+	let resolveFlightDataPromise;
+	let flightDataPromise = new Promise((resolve) => resolveFlightDataPromise = resolve);
+	let startedRSC = false;
+	let cancelled = false;
+	let rscReader = null;
+	let buffered = [];
+	let timeout = null;
+	function flushBufferedChunks(controller) {
+		for (let chunk of buffered) {
+			let buf = decoder.decode(chunk, { stream: true });
+			if (buf.endsWith(trailer)) buf = buf.slice(0, -14);
+			controller.enqueue(encoder.encode(buf));
+		}
+		buffered.length = 0;
+		timeout = null;
+	}
+	return new TransformStream({
+		transform(chunk, controller) {
+			buffered.push(chunk);
+			if (timeout) return;
+			timeout = setTimeout(async () => {
+				if (cancelled) return;
+				flushBufferedChunks(controller);
+				if (!startedRSC) {
+					startedRSC = true;
+					rscReader = rscStream.getReader();
+					writeRSCStream(rscReader, controller, () => cancelled, nonce).catch((err) => controller.error(err)).then(resolveFlightDataPromise);
+				}
+			}, 0);
+		},
+		async flush(controller) {
+			await flightDataPromise;
+			if (timeout) {
+				clearTimeout(timeout);
+				flushBufferedChunks(controller);
+			}
+			controller.enqueue(encoder.encode("</body></html>"));
+		},
+		async cancel(reason) {
+			cancelled = true;
+			if (timeout) {
+				clearTimeout(timeout);
+				timeout = null;
+			}
+			buffered.length = 0;
+			if (rscReader) await rscReader.cancel(reason).catch(() => {});
+			else await rscStream.cancel(reason).catch(() => {});
+			resolveFlightDataPromise();
+		}
+	});
+}
+async function writeRSCStream(reader, controller, isCancelled, nonce) {
+	let decoder = new TextDecoder("utf-8", { fatal: true });
+	try {
+		let read;
+		while ((read = await reader.read()) && !read.done) {
+			if (isCancelled()) return;
+			const chunk = read.value;
+			try {
+				writeChunk(JSON.stringify(decoder.decode(chunk, { stream: true })), controller, nonce);
+			} catch (e) {
+				writeChunk(`Uint8Array.from(atob(${JSON.stringify(btoa(String.fromCodePoint(...chunk)))}), m => m.codePointAt(0))`, controller, nonce);
+			}
+		}
+	} finally {
+		reader.releaseLock();
+	}
+	let remaining = decoder.decode();
+	if (remaining.length && !isCancelled()) writeChunk(JSON.stringify(remaining), controller, nonce);
+}
+function writeChunk(chunk, controller, nonce) {
+	let nonceAttr = nonce == null ? "" : ` nonce="${escapeAttribute(nonce)}"`;
+	controller.enqueue(encoder.encode(`<script${nonceAttr}>${escapeScript(`(self.__FLIGHT_DATA||=[]).push(${chunk})`)}<\/script>`));
+}
+function escapeAttribute(value) {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeScript(script) {
+	return script.replace(/<!--/g, "<\\!--").replace(/<\/(script)/gi, "</\\$1");
+}
+//#endregion
+export { injectRSCPayload };

package/dist/development/lib/rsc/route-modules.js

@@ -0,0 +1,27 @@
+/**
+ * react-router v8.3.0
+ *
+ * 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
+ */
+//#region lib/rsc/route-modules.ts
+function createRSCRouteModules(payload) {
+	const routeModules = {};
+	for (const match of payload.matches) populateRSCRouteModules(routeModules, match);
+	return routeModules;
+}
+function populateRSCRouteModules(routeModules, matches) {
+	matches = Array.isArray(matches) ? matches : [matches];
+	for (const match of matches) routeModules[match.id] = {
+		links: match.links,
+		meta: match.meta,
+		default: noopComponent
+	};
+}
+const noopComponent = () => null;
+//#endregion
+export { createRSCRouteModules, populateRSCRouteModules };

package/dist/development/lib/rsc/server.rsc.d.ts

@@ -0,0 +1,224 @@
+
+import { Location } from "../router/history.js";
+import { ActionFunction, LoaderFunction, Params, RouterContextProvider, ShouldRevalidateFunction } from "../router/utils.js";
+import { ClientActionFunction, ClientLoaderFunction, HeadersFunction, LinksFunction, MetaFunction } from "../dom/ssr/routeModules.js";
+import * as React$1 from "react";
+import { ReactFormState } from "react-dom/client";
+
+//#region lib/rsc/server.rsc.d.ts
+declare function getRequest(): Request;
+type RSCRouteConfigEntryBase = {
+  action?: ActionFunction;
+  clientAction?: ClientActionFunction;
+  clientLoader?: ClientLoaderFunction;
+  ErrorBoundary?: React$1.ComponentType<any>;
+  handle?: any;
+  headers?: HeadersFunction;
+  HydrateFallback?: React$1.ComponentType<any>;
+  Layout?: React$1.ComponentType<any>;
+  links?: LinksFunction;
+  loader?: LoaderFunction;
+  meta?: MetaFunction;
+  shouldRevalidate?: ShouldRevalidateFunction;
+};
+type RSCRouteConfigEntry = RSCRouteConfigEntryBase & {
+  id: string;
+  path?: string;
+  Component?: React$1.ComponentType<any>;
+  lazy?: () => Promise<RSCRouteConfigEntryBase & ({
+    default?: React$1.ComponentType<any>;
+    Component?: never;
+  } | {
+    default?: never;
+    Component?: React$1.ComponentType<any>;
+  })>;
+} & ({
+  index: true;
+} | {
+  children?: RSCRouteConfigEntry[];
+});
+type RSCRouteConfig = Array<RSCRouteConfigEntry>;
+type RSCRouteManifest = {
+  clientAction?: ClientActionFunction;
+  clientLoader?: ClientLoaderFunction;
+  element?: React$1.ReactElement | false;
+  errorElement?: React$1.ReactElement;
+  handle?: any;
+  hasAction: boolean;
+  hasComponent: boolean;
+  hasLoader: boolean;
+  hydrateFallbackElement?: React$1.ReactElement;
+  id: string;
+  index?: boolean;
+  links?: LinksFunction;
+  meta?: MetaFunction;
+  parentId?: string;
+  path?: string;
+  shouldRevalidate?: ShouldRevalidateFunction;
+};
+type RSCRouteMatch = RSCRouteManifest & {
+  params: Params;
+  pathname: string;
+  pathnameBase: string;
+};
+type RSCRenderPayload = {
+  type: "render";
+  actionData: Record<string, any> | null;
+  basename: string | undefined;
+  clientVersion?: string;
+  errors: Record<string, any> | null;
+  loaderData: Record<string, any>;
+  location: Location;
+  routeDiscovery: RouteDiscovery;
+  matches: RSCRouteMatch[];
+  patches?: Promise<RSCRouteManifest[]>;
+  formState?: ReactFormState;
+};
+type RSCManifestPayload = {
+  type: "manifest";
+  patches: Promise<RSCRouteManifest[]>;
+};
+type RSCActionPayload = {
+  type: "action";
+  actionResult: Promise<unknown>;
+  rerender?: Promise<RSCRenderPayload | RSCRedirectPayload>;
+};
+type RSCRedirectPayload = {
+  type: "redirect";
+  status: number;
+  location: string;
+  replace: boolean;
+  reload: boolean;
+  actionResult?: Promise<unknown>;
+};
+type RSCPayload = RSCRenderPayload | RSCManifestPayload | RSCActionPayload | RSCRedirectPayload;
+type RSCMatch = {
+  statusCode: number;
+  headers: Headers;
+  payload: RSCPayload;
+};
+type DecodeActionFunction = (formData: FormData) => Promise<() => Promise<unknown>>;
+type DecodeFormStateFunction = (result: unknown, formData: FormData) => Promise<ReactFormState | undefined>;
+type DecodeReplyFunction = (reply: FormData | string, options: {
+  temporaryReferences: unknown;
+}) => Promise<unknown[]>;
+type LoadServerActionFunction = (id: string) => Promise<Function>;
+type RouteDiscovery = {
+  mode: "lazy";
+  manifestPath?: string | undefined;
+} | {
+  mode: "initial";
+};
+/**
+ * Matches the given routes to a [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
+ * and returns an [RSC](https://react.dev/reference/rsc/server-components)
+ * [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
+ * encoding an {@link unstable_RSCPayload} for consumption by an [RSC](https://react.dev/reference/rsc/server-components)
+ * enabled client router.
+ *
+ * @example
+ * import {
+ *   createTemporaryReferenceSet,
+ *   decodeAction,
+ *   decodeReply,
+ *   loadServerAction,
+ *   renderToReadableStream,
+ * } from "@vitejs/plugin-rsc/rsc";
+ * import { unstable_matchRSCServerRequest as matchRSCServerRequest } from "react-router";
+ *
+ * matchRSCServerRequest({
+ *   createTemporaryReferenceSet,
+ *   decodeAction,
+ *   decodeFormState,
+ *   decodeReply,
+ *   loadServerAction,
+ *   request,
+ *   routes: routes(),
+ *   generateResponse(match) {
+ *     return new Response(
+ *       renderToReadableStream(match.payload),
+ *       {
+ *         status: match.statusCode,
+ *         headers: match.headers,
+ *       }
+ *     );
+ *   },
+ * });
+ *
+ * @name unstable_matchRSCServerRequest
+ * @public
+ * @category RSC
+ * @mode data
+ * @param opts Options
+ * @param opts.allowedActionOrigins Origin patterns that are allowed to execute actions.
+ * @param opts.basename The basename to use when matching the request.
+ * @param opts.createTemporaryReferenceSet A function that returns a temporary
+ * reference set for the request, used to track temporary references in the [RSC](https://react.dev/reference/rsc/server-components)
+ * stream.
+ * @param opts.decodeAction Your `react-server-dom-xyz/server`'s `decodeAction`
+ * function, responsible for loading a server action.
+ * @param opts.decodeFormState A function responsible for decoding form state for
+ * progressively enhanceable forms with React's [`useActionState`](https://react.dev/reference/react/useActionState)
+ * using your `react-server-dom-xyz/server`'s `decodeFormState`.
+ * @param opts.decodeReply Your `react-server-dom-xyz/server`'s `decodeReply`
+ * function, used to decode the server function's arguments and bind them to the
+ * implementation for invocation by the router.
+ * @param opts.generateResponse A function responsible for using your
+ * `renderToReadableStream` to generate a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
+ * encoding the {@link unstable_RSCPayload}.
+ * @param opts.loadServerAction Your `react-server-dom-xyz/server`'s
+ * `loadServerAction` function, used to load a server action by ID.
+ * @param opts.clientVersion A version derived from the client build output used
+ * to detect stale clients during lazy route discovery.
+ * @param opts.onError An optional error handler that will be called with any
+ * errors that occur during the request processing.
+ * @param opts.request The [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
+ * to match against.
+ * @param opts.requestContext An instance of {@link RouterContextProvider}
+ * that should be created per request, to be passed to [`action`](../../start/data/route-object#action)s,
+ * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
+ * @param opts.routeDiscovery The route discovery configuration, used to determine how the router should discover new routes during navigations.
+ * @param opts.routes Your {@link unstable_RSCRouteConfigEntry | route definitions}.
+ * @returns A [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
+ * that contains the [RSC](https://react.dev/reference/rsc/server-components)
+ * data for hydration.
+ */
+declare function matchRSCServerRequest({
+  allowedActionOrigins,
+  createTemporaryReferenceSet,
+  basename,
+  decodeReply,
+  requestContext,
+  routeDiscovery,
+  loadServerAction,
+  decodeAction,
+  decodeFormState,
+  clientVersion,
+  onError,
+  request,
+  routes,
+  generateResponse
+}: {
+  allowedActionOrigins?: string[];
+  createTemporaryReferenceSet: () => unknown;
+  basename?: string;
+  decodeReply?: DecodeReplyFunction;
+  decodeAction?: DecodeActionFunction;
+  decodeFormState?: DecodeFormStateFunction;
+  requestContext?: RouterContextProvider;
+  loadServerAction?: LoadServerActionFunction;
+  clientVersion?: string;
+  onError?: (error: unknown) => void;
+  request: Request;
+  routes: RSCRouteConfigEntry[];
+  routeDiscovery?: RouteDiscovery;
+  generateResponse: (match: RSCMatch, {
+    onError,
+    temporaryReferences
+  }: {
+    onError(error: unknown): string | undefined;
+    temporaryReferences: unknown;
+  }) => Response;
+}): Promise<Response>;
+//#endregion
+export { DecodeActionFunction, DecodeFormStateFunction, DecodeReplyFunction, LoadServerActionFunction, RSCManifestPayload, RSCMatch, RSCPayload, RSCRenderPayload, RSCRouteConfig, RSCRouteConfigEntry, RSCRouteManifest, RSCRouteMatch, getRequest, matchRSCServerRequest };