react-router 7.18.0 → 8.0.0-pre.1

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

@@ -0,0 +1,138 @@
+
+import { Location } from "../router/history.js";
+import { DataRouteObject, RouteBranch, RouteObject } from "../router/utils.js";
+import { FutureConfig, Router, StaticHandlerContext } from "../router/router.js";
+import * as React$1 from "react";
+
+//#region lib/dom/server.d.ts
+/**
+ * @category Types
+ */
+interface StaticRouterProps {
+  /**
+   * The base URL for the static router (default: `/`)
+   */
+  basename?: string;
+  /**
+   * The child elements to render inside the static router
+   */
+  children?: React$1.ReactNode;
+  /**
+   * The {@link Location} to render the static router at (default: `/`)
+   */
+  location: Partial<Location> | string;
+}
+/**
+ * A {@link Router | `<Router>`} that may not navigate to any other {@link Location}.
+ * This is useful on the server where there is no stateful UI.
+ *
+ * @public
+ * @category Declarative Routers
+ * @mode declarative
+ * @param props Props
+ * @param {StaticRouterProps.basename} props.basename n/a
+ * @param {StaticRouterProps.children} props.children n/a
+ * @param {StaticRouterProps.location} props.location n/a
+ * @returns A React element that renders the static {@link Router | `<Router>`}
+ */
+declare function StaticRouter({
+  basename,
+  children,
+  location: locationProp
+}: StaticRouterProps): React$1.JSX.Element;
+/**
+ * @category Types
+ */
+interface StaticRouterProviderProps {
+  /**
+   * The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
+   * `query`
+   */
+  context: StaticHandlerContext;
+  /**
+   * The static {@link DataRouter} from {@link createStaticRouter}
+   */
+  router: Router;
+  /**
+   * Whether to hydrate the router on the client (default `true`)
+   */
+  hydrate?: boolean;
+  /**
+   * The [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
+   * to use for the hydration [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+   * tag
+   */
+  nonce?: string;
+}
+/**
+ * A {@link DataRouter} that may not navigate to any other {@link Location}.
+ * This is useful on the server where there is no stateful UI.
+ *
+ * @example
+ * export async function handleRequest(request: Request) {
+ *   let { query, dataRoutes } = createStaticHandler(routes);
+ *   let context = await query(request));
+ *
+ *   if (context instanceof Response) {
+ *     return context;
+ *   }
+ *
+ *   let router = createStaticRouter(dataRoutes, context);
+ *   return new Response(
+ *     ReactDOMServer.renderToString(<StaticRouterProvider ... />),
+ *     { headers: { "Content-Type": "text/html" } }
+ *   );
+ * }
+ *
+ * @public
+ * @category Data Routers
+ * @mode data
+ * @param props Props
+ * @param {StaticRouterProviderProps.context} props.context n/a
+ * @param {StaticRouterProviderProps.hydrate} props.hydrate n/a
+ * @param {StaticRouterProviderProps.nonce} props.nonce n/a
+ * @param {StaticRouterProviderProps.router} props.router n/a
+ * @returns A React element that renders the static router provider
+ */
+declare function StaticRouterProvider({
+  context,
+  router,
+  hydrate,
+  nonce
+}: StaticRouterProviderProps): React$1.JSX.Element;
+/**
+ * Create a static {@link DataRouter} for server-side rendering
+ *
+ * @example
+ * export async function handleRequest(request: Request) {
+ *   let { query, dataRoutes } = createStaticHandler(routes);
+ *   let context = await query(request);
+ *
+ *   if (context instanceof Response) {
+ *     return context;
+ *   }
+ *
+ *   let router = createStaticRouter(dataRoutes, context);
+ *   return new Response(
+ *     ReactDOMServer.renderToString(<StaticRouterProvider ... />),
+ *     { headers: { "Content-Type": "text/html" } }
+ *   );
+ * }
+ *
+ * @public
+ * @category Data Routers
+ * @mode data
+ * @param routes The route objects to create a static {@link DataRouter} for
+ * @param context The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
+ * `query`
+ * @param opts Options
+ * @param opts.future Future flags for the static {@link DataRouter}
+ * @param opts.branches Optional pre-computed route branches
+ * @returns A static {@link DataRouter} that can be used to render the provided routes
+ */
+declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext, opts?: {
+  branches?: RouteBranch<DataRouteObject>[];
+  future?: Partial<FutureConfig>;
+}): Router;
+//#endregion
+export { StaticRouter, StaticRouterProps, StaticRouterProvider, StaticRouterProviderProps, createStaticRouter };

package/dist/development/lib/dom/server.js

@@ -0,0 +1,301 @@
+/**
+ * react-router v8.0.0-pre.1
+ *
+ * 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 { ABSOLUTE_URL_REGEX } from "../router/url.js";
+import { createPath, invariant, parsePath } from "../router/history.js";
+import { convertRoutesToDataRoutes, isRouteErrorResponse } from "../router/utils.js";
+import { IDLE_BLOCKER, IDLE_FETCHER, IDLE_NAVIGATION } from "../router/router.js";
+import { DataRouterContext, DataRouterStateContext, FetchersContext, ViewTransitionContext } from "../context.js";
+import { DataRoutes, Router } from "../components.js";
+import { escapeHtml } from "./ssr/markup.js";
+import * as React$1 from "react";
+//#region lib/dom/server.tsx
+/**
+* A {@link Router | `<Router>`} that may not navigate to any other {@link Location}.
+* This is useful on the server where there is no stateful UI.
+*
+* @public
+* @category Declarative Routers
+* @mode declarative
+* @param props Props
+* @param {StaticRouterProps.basename} props.basename n/a
+* @param {StaticRouterProps.children} props.children n/a
+* @param {StaticRouterProps.location} props.location n/a
+* @returns A React element that renders the static {@link Router | `<Router>`}
+*/
+function StaticRouter({ basename, children, location: locationProp = "/" }) {
+	if (typeof locationProp === "string") locationProp = parsePath(locationProp);
+	let action = "POP";
+	let location = {
+		pathname: locationProp.pathname || "/",
+		search: locationProp.search || "",
+		hash: locationProp.hash || "",
+		state: locationProp.state != null ? locationProp.state : null,
+		key: locationProp.key || "default",
+		mask: void 0
+	};
+	let staticNavigator = getStatelessNavigator();
+	return /* @__PURE__ */ React$1.createElement(Router, {
+		basename,
+		children,
+		location,
+		navigationType: action,
+		navigator: staticNavigator,
+		static: true,
+		useTransitions: false
+	});
+}
+/**
+* A {@link DataRouter} that may not navigate to any other {@link Location}.
+* This is useful on the server where there is no stateful UI.
+*
+* @example
+* export async function handleRequest(request: Request) {
+*   let { query, dataRoutes } = createStaticHandler(routes);
+*   let context = await query(request));
+*
+*   if (context instanceof Response) {
+*     return context;
+*   }
+*
+*   let router = createStaticRouter(dataRoutes, context);
+*   return new Response(
+*     ReactDOMServer.renderToString(<StaticRouterProvider ... />),
+*     { headers: { "Content-Type": "text/html" } }
+*   );
+* }
+*
+* @public
+* @category Data Routers
+* @mode data
+* @param props Props
+* @param {StaticRouterProviderProps.context} props.context n/a
+* @param {StaticRouterProviderProps.hydrate} props.hydrate n/a
+* @param {StaticRouterProviderProps.nonce} props.nonce n/a
+* @param {StaticRouterProviderProps.router} props.router n/a
+* @returns A React element that renders the static router provider
+*/
+function StaticRouterProvider({ context, router, hydrate = true, nonce }) {
+	invariant(router && context, "You must provide `router` and `context` to <StaticRouterProvider>");
+	let dataRouterContext = {
+		router,
+		navigator: getStatelessNavigator(),
+		static: true,
+		staticContext: context,
+		basename: context.basename || "/"
+	};
+	let fetchersContext = /* @__PURE__ */ new Map();
+	let hydrateScript = "";
+	if (hydrate !== false) {
+		let data = {
+			loaderData: context.loaderData,
+			actionData: context.actionData,
+			errors: serializeErrors(context.errors)
+		};
+		hydrateScript = `window.__staticRouterHydrationData = JSON.parse(${escapeHtml(JSON.stringify(JSON.stringify(data)))});`;
+	}
+	let { state } = dataRouterContext.router;
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React$1.createElement(DataRouterStateContext.Provider, { value: state }, /* @__PURE__ */ React$1.createElement(FetchersContext.Provider, { value: fetchersContext }, /* @__PURE__ */ React$1.createElement(ViewTransitionContext.Provider, { value: { isTransitioning: false } }, /* @__PURE__ */ React$1.createElement(Router, {
+		basename: dataRouterContext.basename,
+		location: state.location,
+		navigationType: state.historyAction,
+		navigator: dataRouterContext.navigator,
+		static: dataRouterContext.static,
+		useTransitions: false
+	}, /* @__PURE__ */ React$1.createElement(DataRoutes, {
+		manifest: router.manifest,
+		routes: router.routes,
+		future: router.future,
+		state,
+		isStatic: true
+	})))))), hydrateScript ? /* @__PURE__ */ React$1.createElement("script", {
+		suppressHydrationWarning: true,
+		nonce,
+		dangerouslySetInnerHTML: { __html: hydrateScript }
+	}) : null);
+}
+function serializeErrors(errors) {
+	if (!errors) return null;
+	let entries = Object.entries(errors);
+	let serialized = {};
+	for (let [key, val] of entries) if (isRouteErrorResponse(val)) serialized[key] = {
+		...val,
+		__type: "RouteErrorResponse"
+	};
+	else if (val instanceof Error) serialized[key] = {
+		message: val.message,
+		__type: "Error",
+		...val.name !== "Error" ? { __subType: val.name } : {}
+	};
+	else serialized[key] = val;
+	return serialized;
+}
+function getStatelessNavigator() {
+	return {
+		createHref,
+		encodeLocation,
+		push(to) {
+			throw new Error(`You cannot use navigator.push() on the server because it is a stateless environment. This error was probably triggered when you did a \`navigate(${JSON.stringify(to)})\` somewhere in your app.`);
+		},
+		replace(to) {
+			throw new Error(`You cannot use navigator.replace() on the server because it is a stateless environment. This error was probably triggered when you did a \`navigate(${JSON.stringify(to)}, { replace: true })\` somewhere in your app.`);
+		},
+		go(delta) {
+			throw new Error(`You cannot use navigator.go() on the server because it is a stateless environment. This error was probably triggered when you did a \`navigate(${delta})\` somewhere in your app.`);
+		},
+		back() {
+			throw new Error("You cannot use navigator.back() on the server because it is a stateless environment.");
+		},
+		forward() {
+			throw new Error("You cannot use navigator.forward() on the server because it is a stateless environment.");
+		}
+	};
+}
+/**
+* Create a static {@link DataRouter} for server-side rendering
+*
+* @example
+* export async function handleRequest(request: Request) {
+*   let { query, dataRoutes } = createStaticHandler(routes);
+*   let context = await query(request);
+*
+*   if (context instanceof Response) {
+*     return context;
+*   }
+*
+*   let router = createStaticRouter(dataRoutes, context);
+*   return new Response(
+*     ReactDOMServer.renderToString(<StaticRouterProvider ... />),
+*     { headers: { "Content-Type": "text/html" } }
+*   );
+* }
+*
+* @public
+* @category Data Routers
+* @mode data
+* @param routes The route objects to create a static {@link DataRouter} for
+* @param context The {@link StaticHandlerContext} returned from {@link StaticHandler}'s
+* `query`
+* @param opts Options
+* @param opts.future Future flags for the static {@link DataRouter}
+* @param opts.branches Optional pre-computed route branches
+* @returns A static {@link DataRouter} that can be used to render the provided routes
+*/
+function createStaticRouter(routes, context, opts = {}) {
+	let manifest = {};
+	let dataRoutes = convertRoutesToDataRoutes(routes, void 0, void 0, manifest);
+	let matches = context.matches.map((match) => {
+		let route = manifest[match.route.id] || match.route;
+		return {
+			...match,
+			route
+		};
+	});
+	let msg = (method) => `You cannot use router.${method}() on the server because it is a stateless environment`;
+	return {
+		get basename() {
+			return context.basename;
+		},
+		get future() {
+			return { ...opts?.future };
+		},
+		get state() {
+			return {
+				historyAction: "POP",
+				location: context.location,
+				matches,
+				loaderData: context.loaderData,
+				actionData: context.actionData,
+				errors: context.errors,
+				initialized: true,
+				renderFallback: false,
+				navigation: IDLE_NAVIGATION,
+				restoreScrollPosition: null,
+				preventScrollReset: false,
+				revalidation: "idle",
+				fetchers: /* @__PURE__ */ new Map(),
+				blockers: /* @__PURE__ */ new Map()
+			};
+		},
+		get routes() {
+			return dataRoutes;
+		},
+		get branches() {
+			return opts.branches;
+		},
+		get manifest() {
+			return manifest;
+		},
+		get window() {},
+		initialize() {
+			throw msg("initialize");
+		},
+		subscribe() {
+			throw msg("subscribe");
+		},
+		enableScrollRestoration() {
+			throw msg("enableScrollRestoration");
+		},
+		navigate() {
+			throw msg("navigate");
+		},
+		fetch() {
+			throw msg("fetch");
+		},
+		revalidate() {
+			throw msg("revalidate");
+		},
+		createHref,
+		encodeLocation,
+		getFetcher() {
+			return IDLE_FETCHER;
+		},
+		deleteFetcher() {
+			throw msg("deleteFetcher");
+		},
+		resetFetcher() {
+			throw msg("resetFetcher");
+		},
+		dispose() {
+			throw msg("dispose");
+		},
+		getBlocker() {
+			return IDLE_BLOCKER;
+		},
+		deleteBlocker() {
+			throw msg("deleteBlocker");
+		},
+		patchRoutes() {
+			throw msg("patchRoutes");
+		},
+		_internalFetchControllers: /* @__PURE__ */ new Map(),
+		_internalSetRoutes() {
+			throw msg("_internalSetRoutes");
+		},
+		_internalSetStateDoNotUseOrYouWillBreakYourApp() {
+			throw msg("_internalSetStateDoNotUseOrYouWillBreakYourApp");
+		}
+	};
+}
+function createHref(to) {
+	return typeof to === "string" ? to : createPath(to);
+}
+function encodeLocation(to) {
+	let href = typeof to === "string" ? to : createPath(to);
+	href = href.replace(/ $/, "%20");
+	let encoded = ABSOLUTE_URL_REGEX.test(href) ? new URL(href) : new URL(href, "http://localhost");
+	return {
+		pathname: encoded.pathname,
+		search: encoded.search,
+		hash: encoded.hash
+	};
+}
+//#endregion
+export { StaticRouter, StaticRouterProvider, createStaticRouter };

package/dist/development/lib/dom/ssr/components.d.ts

@@ -0,0 +1,198 @@
+
+import { PageLinkDescriptor } from "../../router/links.js";
+import { FrameworkContextObject } from "./entry.js";
+import * as React$1 from "react";
+
+//#region lib/dom/ssr/components.d.ts
+declare const FrameworkContext: React$1.Context<FrameworkContextObject | undefined>;
+/**
+ * Defines the [lazy route discovery](../../explanation/lazy-route-discovery)
+ * behavior of the link/form:
+ *
+ * - "render" - default, discover the route when the link renders
+ * - "none" - don't eagerly discover, only discover if the link is clicked
+ */
+type DiscoverBehavior = "render" | "none";
+/**
+ * Defines the prefetching behavior of the link:
+ *
+ * - "none": Never fetched
+ * - "intent": Fetched when the user focuses or hovers the link
+ * - "render": Fetched when the link is rendered
+ * - "viewport": Fetched when the link is in the viewport
+ */
+type PrefetchBehavior = "intent" | "render" | "none" | "viewport";
+/**
+ * Props for the {@link Links} component.
+ *
+ * @category Types
+ */
+interface LinksProps {
+  /**
+   * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
+   * attribute to render on the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+   * element. If not provided in Framework Mode, it will default to any
+   * {@link ServerRouter | `<ServerRouter nonce>`} prop.
+   */
+  nonce?: string | undefined;
+  /**
+   * A [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)
+   * attribute to render on the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+   * element
+   */
+  crossOrigin?: "anonymous" | "use-credentials";
+}
+/**
+ * Renders all the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+ * tags created by the route module's [`links`](../../start/framework/route-module#links)
+ * export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
+ * of your document.
+ *
+ * @example
+ * import { Links } from "react-router";
+ *
+ * export default function Root() {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <Links />
+ *       </head>
+ *       <body></body>
+ *     </html>
+ *   );
+ * }
+ *
+ * @public
+ * @category Components
+ * @mode framework
+ * @param props Props
+ * @param {LinksProps.nonce} props.nonce n/a
+ * @param {LinksProps.crossOrigin} props.crossOrigin n/a
+ * @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+ * tags
+ */
+declare function Links({
+  nonce,
+  crossOrigin
+}: LinksProps): React$1.JSX.Element;
+/**
+ * Renders [`<link rel=prefetch|modulepreload>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel)
+ * tags for modules and data of another page to enable an instant navigation to
+ * that page. [`<Link prefetch>`](./Link#prefetch) uses this internally, but you
+ * can render it to prefetch a page for any other reason.
+ *
+ * For example, you may render one of this as the user types into a search field
+ * to prefetch search results before they click through to their selection.
+ *
+ * @example
+ * import { PrefetchPageLinks } from "react-router";
+ *
+ * <PrefetchPageLinks page="/absolute/path" />
+ *
+ * @public
+ * @category Components
+ * @mode framework
+ * @param props Props
+ * @param {PageLinkDescriptor.page} props.page n/a
+ * @param props.linkProps Additional props to spread onto the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+ * tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/crossOrigin),
+ * [`integrity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/integrity),
+ * [`rel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel),
+ * etc.
+ * @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+ * tags
+ */
+declare function PrefetchPageLinks({
+  page,
+  ...linkProps
+}: PageLinkDescriptor): React$1.JSX.Element | null;
+/**
+ * Renders all the [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
+ * tags created by the route module's [`meta`](../../start/framework/route-module#meta)
+ * export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
+ * of your document.
+ *
+ * @example
+ * import { Meta } from "react-router";
+ *
+ * export default function Root() {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <Meta />
+ *       </head>
+ *     </html>
+ *   );
+ * }
+ *
+ * @public
+ * @category Components
+ * @mode framework
+ * @returns A collection of React elements for [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
+ * tags
+ */
+declare function Meta(): React$1.JSX.Element;
+/**
+ * A couple common attributes:
+ *
+ * - `<Scripts crossOrigin>` for hosting your static assets on a different
+ *   server than your app.
+ * - `<Scripts nonce>` to support a [content security policy for scripts](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src)
+ * with [nonce-sources](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources)
+ * for your [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+ * tags.
+ *
+ * You cannot pass through attributes such as [`async`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/async),
+ * [`defer`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/defer),
+ * [`noModule`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/noModule),
+ * [`src`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/src),
+ * or [`type`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/type),
+ * because they are managed by React Router internally.
+ *
+ * @category Types
+ */
+type ScriptsProps = Omit<React$1.HTMLProps<HTMLScriptElement>, "async" | "children" | "dangerouslySetInnerHTML" | "defer" | "noModule" | "src" | "suppressHydrationWarning" | "type"> & {
+  /**
+   * A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
+   * attribute to render on the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+   * element. If not provided in Framework Mode, it will default to any
+   * {@link ServerRouter | `<ServerRouter nonce>`} prop.
+   */
+  nonce?: string | undefined;
+};
+/**
+ * Renders the client runtime of your app. It should be rendered inside the
+ * [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
+ *  of the document.
+ *
+ * If server rendering, you can omit `<Scripts/>` and the app will work as a
+ * traditional web app without JavaScript, relying solely on HTML and browser
+ * behaviors.
+ *
+ * @example
+ * import { Scripts } from "react-router";
+ *
+ * export default function Root() {
+ *   return (
+ *     <html>
+ *       <head />
+ *       <body>
+ *         <Scripts />
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ *
+ * @public
+ * @category Components
+ * @mode framework
+ * @param scriptProps Additional props to spread onto the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+ * tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/crossOrigin),
+ * [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce),
+ * etc.
+ * @returns A collection of React elements for [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+ * tags
+ */
+declare function Scripts(scriptProps: ScriptsProps): React$1.JSX.Element | null;
+//#endregion
+export { DiscoverBehavior, FrameworkContext, Links, LinksProps, Meta, PrefetchBehavior, PrefetchPageLinks, Scripts, ScriptsProps };