New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-router-dom

Package Overview
Dependencies
Maintainers
3
Versions
587
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-router-dom - npm Package Compare versions

Comparing version 0.0.0-experimental-dc8656c8 to 0.0.0-experimental-e0f088aa

232

CHANGELOG.md
# `react-router-dom`
## 6.17.0
### Minor Changes
- Add experimental support for the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) via `document.startViewTransition` to enable CSS animated transitions on SPA navigations in your application. ([#10916](https://github.com/remix-run/react-router/pull/10916))
The simplest approach to enabling a View Transition in your React Router app is via the new `<Link unstable_viewTransition>` prop. This will cause the navigation DOM update to be wrapped in `document.startViewTransition` which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.
If you need to apply more fine-grained styles for your animations, you can leverage the `unstable_useViewTransitionState` hook which will tell you when a transition is in progress and you can use that to apply classes or styles:
```jsx
function ImageLink(to, src, alt) {
let isTransitioning = unstable_useViewTransitionState(to);
return (
<Link to={to} unstable_viewTransition>
<img
src={src}
alt={alt}
style={{
viewTransitionName: isTransitioning ? "image-expand" : "",
}}
/>
</Link>
);
}
```
You can also use the `<NavLink unstable_viewTransition>` shorthand which will manage the hook usage for you and automatically add a `transitioning` class to the `<a>` during the transition:
```css
a.transitioning img {
view-transition-name: "image-expand";
}
```
```jsx
<NavLink to={to} unstable_viewTransition>
<img src={src} alt={alt} />
</NavLink>
```
For an example usage of View Transitions with React Router, check out [our fork](https://github.com/brophdawg11/react-router-records) of the [Astro Records](https://github.com/Charca/astro-records) demo.
For more information on using the View Transitions API, please refer to the [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) guide from the Google Chrome team.
Please note, that because the `ViewTransition` API is a DOM API, we now export a specific `RouterProvider` from `react-router-dom` with this functionality. If you are importing `RouterProvider` from `react-router`, then it will not support view transitions. ([#10928](https://github.com/remix-run/react-router/pull/10928)
### Patch Changes
- Log a warning and fail gracefully in `ScrollRestoration` when `sessionStorage` is unavailable ([#10848](https://github.com/remix-run/react-router/pull/10848))
- Updated dependencies:
- `@remix-run/router@1.10.0`
- `react-router@6.17.0`
## 6.16.0
### Minor Changes
- Updated dependencies:
- `@remix-run/router@1.9.0`
- `react-router@6.16.0`
### Patch Changes
- Properly encode rendered URIs in server rendering to avoid hydration errors ([#10769](https://github.com/remix-run/react-router/pull/10769))
## 6.15.0
### Minor Changes
- Add's a new `redirectDocument()` function which allows users to specify that a redirect from a `loader`/`action` should trigger a document reload (via `window.location`) instead of attempting to navigate to the redirected location via React Router ([#10705](https://github.com/remix-run/react-router/pull/10705))
### Patch Changes
- Fixes an edge-case affecting web extensions in Firefox that use `URLSearchParams` and the `useSearchParams` hook. ([#10620](https://github.com/remix-run/react-router/pull/10620))
- Do not include hash in `useFormAction()` for unspecified actions since it cannot be determined on the server and causes hydration issues ([#10758](https://github.com/remix-run/react-router/pull/10758))
- Reorder effects in `unstable_usePrompt` to avoid throwing an exception if the prompt is unblocked and a navigation is performed synchronously ([#10687](https://github.com/remix-run/react-router/pull/10687), [#10718](https://github.com/remix-run/react-router/pull/10718))
- Updated dependencies:
- `@remix-run/router@1.8.0`
- `react-router@6.15.0`
## 6.14.2
### Patch Changes
- Properly decode element id when emulating hash scrolling via `<ScrollRestoration>` ([#10682](https://github.com/remix-run/react-router/pull/10682))
- Add missing `<Form state>` prop to populate `history.state` on submission navigations ([#10630](https://github.com/remix-run/react-router/pull/10630))
- Support proper hydration of `Error` subclasses such as `ReferenceError`/`TypeError` ([#10633](https://github.com/remix-run/react-router/pull/10633))
- Updated dependencies:
- `@remix-run/router@1.7.2`
- `react-router@6.14.2`
## 6.14.1
### Patch Changes
- Updated dependencies:
- `react-router@6.14.1`
- `@remix-run/router@1.7.1`
## 6.14.0
### Minor Changes
- Add support for `application/json` and `text/plain` encodings for `useSubmit`/`fetcher.submit`. To reflect these additional types, `useNavigation`/`useFetcher` now also contain `navigation.json`/`navigation.text` and `fetcher.json`/`fetcher.text` which include the json/text submission if applicable ([#10413](https://github.com/remix-run/react-router/pull/10413))
```jsx
// The default behavior will still serialize as FormData
function Component() {
let navigation = useNavigation();
let submit = useSubmit();
submit({ key: "value" }, { method: "post" });
// navigation.formEncType => "application/x-www-form-urlencoded"
// navigation.formData => FormData instance
}
async function action({ request }) {
// request.headers.get("Content-Type") => "application/x-www-form-urlencoded"
// await request.formData() => FormData instance
}
```
```js
// Opt-into JSON encoding with `encType: "application/json"`
function Component() {
let navigation = useNavigation();
let submit = useSubmit();
submit({ key: "value" }, { method: "post", encType: "application/json" });
// navigation.formEncType => "application/json"
// navigation.json => { key: "value" }
}
async function action({ request }) {
// request.headers.get("Content-Type") => "application/json"
// await request.json() => { key: "value" }
}
```
```js
// Opt-into text encoding with `encType: "text/plain"`
function Component() {
let navigation = useNavigation();
let submit = useSubmit();
submit("Text submission", { method: "post", encType: "text/plain" });
// navigation.formEncType => "text/plain"
// navigation.text => "Text submission"
}
async function action({ request }) {
// request.headers.get("Content-Type") => "text/plain"
// await request.text() => "Text submission"
}
```
### Patch Changes
- When submitting a form from a `submitter` element, prefer the built-in `new FormData(form, submitter)` instead of the previous manual approach in modern browsers (those that support the new `submitter` parameter) ([#9865](https://github.com/remix-run/react-router/pull/9865), [#10627](https://github.com/remix-run/react-router/pull/10627))
- For browsers that don't support it, we continue to just append the submit button's entry to the end, and we also add rudimentary support for `type="image"` buttons
- If developers want full spec-compliant support for legacy browsers, they can use the `formdata-submitter-polyfill`
- Call `window.history.pushState/replaceState` before updating React Router state (instead of after) so that `window.location` matches `useLocation` during synchronous React 17 rendering ([#10448](https://github.com/remix-run/react-router/pull/10448))
- ⚠️ However, generally apps should not be relying on `window.location` and should always reference `useLocation` when possible, as `window.location` will not be in sync 100% of the time (due to `popstate` events, concurrent mode, etc.)
- Fix `tsc --skipLibCheck:false` issues on React 17 ([#10622](https://github.com/remix-run/react-router/pull/10622))
- Upgrade `typescript` to 5.1 ([#10581](https://github.com/remix-run/react-router/pull/10581))
- Updated dependencies:
- `react-router@6.14.0`
- `@remix-run/router@1.7.0`
## 6.13.0
### Minor Changes
- Move [`React.startTransition`](https://react.dev/reference/react/startTransition) usage behind a [future flag](https://reactrouter.com/en/main/guides/api-development-strategy) to avoid issues with existing incompatible `Suspense` usages. We recommend folks adopting this flag to be better compatible with React concurrent mode, but if you run into issues you can continue without the use of `startTransition` until v7. Issues usually boils down to creating net-new promises during the render cycle, so if you run into issues you should either lift your promise creation out of the render cycle or put it behind a `useMemo`. ([#10596](https://github.com/remix-run/react-router/pull/10596))
Existing behavior will no longer include `React.startTransition`:
```jsx
<BrowserRouter>
<Routes>{/*...*/}</Routes>
</BrowserRouter>
<RouterProvider router={router} />
```
If you wish to enable `React.startTransition`, pass the future flag to your component:
```jsx
<BrowserRouter future={{ v7_startTransition: true }}>
<Routes>{/*...*/}</Routes>
</BrowserRouter>
<RouterProvider router={router} future={{ v7_startTransition: true }}/>
```
### Patch Changes
- Work around webpack/terser `React.startTransition` minification bug in production mode ([#10588](https://github.com/remix-run/react-router/pull/10588))
- Updated dependencies:
- `react-router@6.13.0`
## 6.12.1
> **Warning**
> Please use version `6.13.0` or later instead of `6.12.1`. This version suffers from a `webpack`/`terser` minification issue resulting in invalid minified code in your resulting production bundles which can cause issues in your application. See [#10579](https://github.com/remix-run/react-router/issues/10579) for more details.
### Patch Changes
- Adjust feature detection of `React.startTransition` to fix webpack + react 17 compilation error ([#10569](https://github.com/remix-run/react-router/pull/10569))
- Updated dependencies:
- `react-router@6.12.1`
## 6.12.0
### Minor Changes
- Wrap internal router state updates with `React.startTransition` if it exists ([#10438](https://github.com/remix-run/react-router/pull/10438))
### Patch Changes
- Re-throw `DOMException` (`DataCloneError`) when attempting to perform a `PUSH` navigation with non-serializable state. ([#10427](https://github.com/remix-run/react-router/pull/10427))
- Updated dependencies:
- `@remix-run/router@1.6.3`
- `react-router@6.12.0`
## 6.11.2
### Patch Changes
- Export `SetURLSearchParams` type ([#10444](https://github.com/remix-run/react-router/pull/10444))
- Updated dependencies:
- `react-router@6.11.2`
- `@remix-run/router@1.6.2`
## 6.11.1

@@ -4,0 +236,0 @@

40

dist/dom.d.ts

@@ -7,6 +7,6 @@ import type { FormEncType, HTMLFormMethod, RelativeRoutingType } from "@remix-run/router";

export declare function isInputElement(object: any): object is HTMLInputElement;
declare type LimitedMouseEvent = Pick<MouseEvent, "button" | "metaKey" | "altKey" | "ctrlKey" | "shiftKey">;
type LimitedMouseEvent = Pick<MouseEvent, "button" | "metaKey" | "altKey" | "ctrlKey" | "shiftKey">;
export declare function shouldProcessLinkClick(event: LimitedMouseEvent, target?: string): boolean;
export declare type ParamKeyValuePair = [string, string];
export declare type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
export type ParamKeyValuePair = [string, string];
export type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
/**

@@ -35,2 +35,11 @@ * Creates a URLSearchParams object using the given initializer.

export declare function getSearchParamsForLocation(locationSearch: string, defaultSearchParams: URLSearchParams | null): URLSearchParams;
type JsonObject = {
[Key in string]: JsonValue;
} & {
[Key in string]?: JsonValue | undefined;
};
type JsonArray = JsonValue[] | readonly JsonValue[];
type JsonPrimitive = string | number | boolean | null;
type JsonValue = JsonPrimitive | JsonObject | JsonArray;
export type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | JsonValue | null;
export interface SubmitOptions {

@@ -48,3 +57,3 @@ /**

/**
* The action URL used to submit the form. Overrides `<form encType>`.
* The encoding used to submit the form. Overrides `<form encType>`.
* Defaults to "application/x-www-form-urlencoded".

@@ -54,2 +63,10 @@ */

/**
* Indicate a specific fetcherKey to use when using navigate=false
*/
fetcherKey?: string;
/**
* navigate=false will use a fetcher instead of a navigation
*/
navigate?: boolean;
/**
* Set `true` to replace the current entry in the browser's history stack

@@ -61,2 +78,6 @@ * instead of creating a new one (i.e. stay on "the same page"). Defaults

/**
* State object to add to the history stack entry for this navigation
*/
state?: any;
/**
* Determines whether the form action is relative to the route hierarchy or

@@ -72,11 +93,14 @@ * the pathname. Use this if you want to opt out of navigating the route

preventScrollReset?: boolean;
/**
* Enable view transitions on this submission navigation
*/
unstable_viewTransition?: boolean;
}
export declare function getFormSubmissionInfo(target: HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
[name: string]: string;
} | null, options: SubmitOptions, basename: string): {
export declare function getFormSubmissionInfo(target: SubmitTarget, basename: string): {
action: string | null;
method: string;
encType: string;
formData: FormData;
formData: FormData | undefined;
body: any;
};
export {};

158

dist/index.d.ts

@@ -6,10 +6,10 @@ /**

import * as React from "react";
import type { NavigateOptions, RelativeRoutingType, RouteObject, To } from "react-router";
import type { Fetcher, FormEncType, FormMethod, FutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit } from "./dom";
import type { FutureConfig, Location, NavigateOptions, RelativeRoutingType, RouteObject, RouterProviderProps, To } from "react-router";
import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit, SubmitTarget } from "./dom";
import { createSearchParams } from "./dom";
export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
export { createSearchParams };
export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To, } from "react-router";
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, ErrorResponse, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch, } from "react-router";
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
/** @internal */

@@ -19,6 +19,9 @@ export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, } from "react-router";

var __staticRouterHydrationData: HydrationState | undefined;
interface Document {
startViewTransition(cb: () => Promise<void> | void): ViewTransition;
}
}
interface DOMRouterOpts {
basename?: string;
future?: Partial<Omit<FutureConfig, "v7_prependBasename">>;
future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
hydrationData?: HydrationState;

@@ -29,5 +32,32 @@ window?: Window;

export declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): RemixRouter;
type ViewTransitionContextObject = {
isTransitioning: false;
} | {
isTransitioning: true;
currentLocation: Location;
nextLocation: Location;
};
declare const ViewTransitionContext: React.Context<ViewTransitionContextObject>;
export { ViewTransitionContext as UNSAFE_ViewTransitionContext };
type FetchersContextObject = {
data: Map<string, any>;
register: (key: string) => void;
unregister: (key: string) => void;
};
declare const FetchersContext: React.Context<FetchersContextObject | null>;
export { FetchersContext as UNSAFE_FetchersContext };
interface ViewTransition {
finished: Promise<void>;
ready: Promise<void>;
updateCallbackDone: Promise<void>;
skipTransition(): void;
}
/**
* Given a Remix Router instance, render the appropriate UI
*/
export declare function RouterProvider({ fallbackElement, router, future, }: RouterProviderProps): React.ReactElement;
export interface BrowserRouterProps {
basename?: string;
children?: React.ReactNode;
future?: FutureConfig;
window?: Window;

@@ -38,6 +68,7 @@ }

*/
export declare function BrowserRouter({ basename, children, window, }: BrowserRouterProps): JSX.Element;
export declare function BrowserRouter({ basename, children, future, window, }: BrowserRouterProps): React.JSX.Element;
export interface HashRouterProps {
basename?: string;
children?: React.ReactNode;
future?: FutureConfig;
window?: Window;

@@ -49,6 +80,7 @@ }

*/
export declare function HashRouter({ basename, children, window }: HashRouterProps): JSX.Element;
export declare function HashRouter({ basename, children, future, window, }: HashRouterProps): React.JSX.Element;
export interface HistoryRouterProps {
basename?: string;
children?: React.ReactNode;
future?: FutureConfig;
history: History;

@@ -62,3 +94,3 @@ }

*/
declare function HistoryRouter({ basename, children, history }: HistoryRouterProps): JSX.Element;
declare function HistoryRouter({ basename, children, future, history, }: HistoryRouterProps): React.JSX.Element;
declare namespace HistoryRouter {

@@ -75,28 +107,26 @@ var displayName: string;

to: To;
unstable_viewTransition?: boolean;
}
/**
* The public API for rendering a history-aware <a>.
* The public API for rendering a history-aware `<a>`.
*/
export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
type NavLinkRenderProps = {
isActive: boolean;
isPending: boolean;
isTransitioning: boolean;
};
export interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children"> {
children?: React.ReactNode | ((props: {
isActive: boolean;
isPending: boolean;
}) => React.ReactNode);
children?: React.ReactNode | ((props: NavLinkRenderProps) => React.ReactNode);
caseSensitive?: boolean;
className?: string | ((props: {
isActive: boolean;
isPending: boolean;
}) => string | undefined);
className?: string | ((props: NavLinkRenderProps) => string | undefined);
end?: boolean;
style?: React.CSSProperties | ((props: {
isActive: boolean;
isPending: boolean;
}) => React.CSSProperties | undefined);
style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties | undefined);
unstable_viewTransition?: boolean;
}
/**
* A <Link> wrapper that knows if it's "active" or not.
* A `<Link>` wrapper that knows if it's "active" or not.
*/
export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
export interface FetcherFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
/**

@@ -108,2 +138,7 @@ * The HTTP verb to use when the form is submit. Supports "get", "post",

/**
* `<form encType>` - enhancing beyond the normal string type and limiting
* to the built-in browser supported values
*/
encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
/**
* Normal `<form action>` but supports React Router's relative paths.

@@ -113,12 +148,2 @@ */

/**
* Forces a full document navigation instead of a fetch.
*/
reloadDocument?: boolean;
/**
* Replaces the current entry in the browser history stack when the form
* navigates. Use this if you don't want the user to be able to click "back"
* to the page with the form on it.
*/
replace?: boolean;
/**
* Determines whether the form action is relative to the route hierarchy or

@@ -140,2 +165,30 @@ * the pathname. Use this if you want to opt out of navigating the route

}
export interface FormProps extends FetcherFormProps {
/**
* Indicate a specific fetcherKey to use when using navigate=false
*/
fetcherKey?: string;
/**
* navigate=false will use a fetcher instead of a navigation
*/
navigate?: boolean;
/**
* Forces a full document navigation instead of a fetch.
*/
reloadDocument?: boolean;
/**
* Replaces the current entry in the browser history stack when the form
* navigates. Use this if you don't want the user to be able to click "back"
* to the page with the form on it.
*/
replace?: boolean;
/**
* State object to add to the history stack entry for this navigation
*/
state?: any;
/**
* Enable view transitions on this Form navigation
*/
unstable_viewTransition?: boolean;
}
/**

@@ -165,3 +218,3 @@ * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except

*/
export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, preventScrollReset, relative, }?: {
export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, preventScrollReset, relative, unstable_viewTransition, }?: {
target?: React.HTMLAttributeAnchorTarget;

@@ -172,2 +225,3 @@ replace?: boolean;

relative?: RelativeRoutingType;
unstable_viewTransition?: boolean;
}): (event: React.MouseEvent<E, MouseEvent>) => void;

@@ -179,6 +233,3 @@ /**

export declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
export declare type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
declare type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
[name: string]: string;
} | null;
export type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
/**

@@ -205,2 +256,8 @@ * Submits a HTML `<form>` to the server without reloading the page.

/**
* Submits a fetcher `<form>` to the server without reloading the page.
*/
export interface FetcherSubmitFunction {
(target: SubmitTarget, options?: Omit<SubmitOptions, "replace" | "state">): void;
}
/**
* Returns a function that may be used to programmatically submit a form (or

@@ -213,6 +270,5 @@ * some arbitrary data) to the server.

}): string;
declare function createFetcherForm(fetcherKey: string, routeId: string): React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
export declare type FetcherWithComponents<TData> = Fetcher<TData> & {
Form: ReturnType<typeof createFetcherForm>;
submit: (target: SubmitTarget, options?: Omit<SubmitOptions, "replace" | "preventScrollReset">) => void;
export type FetcherWithComponents<TData> = Fetcher<TData> & {
Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
submit: FetcherSubmitFunction;
load: (href: string) => void;

@@ -224,3 +280,5 @@ };

*/
export declare function useFetcher<TData = any>(): FetcherWithComponents<TData>;
export declare function useFetcher<TData = any>({ key, }?: {
key?: string;
}): FetcherWithComponents<TData>;
/**

@@ -263,1 +321,13 @@ * Provides all fetchers currently on the page. Useful for layouts and parent

export { usePrompt as unstable_usePrompt };
/**
* Return a boolean indicating if there is an active view transition to the
* given href. You can use this value to render CSS classes or viewTransitionName
* styles onto your elements
*
* @param href The destination href
* @param [opts.relative] Relative routing type ("route" | "path")
*/
declare function useViewTransitionState(to: To, opts?: {
relative?: RelativeRoutingType;
}): boolean;
export { useViewTransitionState as unstable_useViewTransitionState };

1059

dist/index.js
/**
* React Router DOM v0.0.0-experimental-dc8656c8
* React Router DOM v0.0.0-experimental-e0f088aa
*

@@ -12,5 +12,5 @@ * Copyright (c) Remix Software Inc.

import * as React from 'react';
import { UNSAFE_mapRouteProperties, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext } from 'react-router';
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
import { stripBasename, createRouter, createBrowserHistory, createHashHistory, ErrorResponse, UNSAFE_warning, UNSAFE_invariant, joinPaths } from '@remix-run/router';
import { UNSAFE_mapRouteProperties, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker } from 'react-router';
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, IDLE_FETCHER, matchPath } from '@remix-run/router';

@@ -21,3 +21,2 @@ function _extends() {

var source = arguments[i];
for (var key in source) {

@@ -29,3 +28,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {

}
return target;

@@ -35,3 +33,2 @@ };

}
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -42,3 +39,2 @@ if (source == null) return {};

var key, i;
for (i = 0; i < sourceKeys.length; i++) {

@@ -49,3 +45,2 @@ key = sourceKeys[i];

}
return target;

@@ -68,10 +63,10 @@ }

}
function isModifiedEvent(event) {
return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
}
function shouldProcessLinkClick(event, target) {
return event.button === 0 && ( // Ignore everything but left clicks
!target || target === "_self") && // Let browser handle "target=_blank" etc.
return event.button === 0 && (
// Ignore everything but left clicks
!target || target === "_self") &&
// Let browser handle "target=_blank" etc.
!isModifiedEvent(event) // Ignore clicks with modifier keys

@@ -101,3 +96,2 @@ ;

*/
function createSearchParams(init) {

@@ -107,3 +101,2 @@ if (init === void 0) {

}
return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo, key) => {

@@ -116,5 +109,9 @@ let value = init[key];

let searchParams = createSearchParams(locationSearch);
if (defaultSearchParams) {
for (let key of defaultSearchParams.keys()) {
// Use `defaultSearchParams.forEach(...)` here instead of iterating of
// `defaultSearchParams.keys()` to work-around a bug in Firefox related to
// web extensions. Relevant Bugzilla tickets:
// https://bugzilla.mozilla.org/show_bug.cgi?id=1414602
// https://bugzilla.mozilla.org/show_bug.cgi?id=1023984
defaultSearchParams.forEach((_, key) => {
if (!searchParams.has(key)) {

@@ -125,58 +122,76 @@ defaultSearchParams.getAll(key).forEach(value => {

}
}
});
}
return searchParams;
}
function getFormSubmissionInfo(target, options, basename) {
// One-time check for submitter support
let _formDataSupportsSubmitter = null;
function isFormDataSubmitterSupported() {
if (_formDataSupportsSubmitter === null) {
try {
new FormData(document.createElement("form"),
// @ts-expect-error if FormData supports the submitter parameter, this will throw
0);
_formDataSupportsSubmitter = false;
} catch (e) {
_formDataSupportsSubmitter = true;
}
}
return _formDataSupportsSubmitter;
}
const supportedFormEncTypes = new Set(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
function getFormEncType(encType) {
if (encType != null && !supportedFormEncTypes.has(encType)) {
process.env.NODE_ENV !== "production" ? UNSAFE_warning(false, "\"" + encType + "\" is not a valid `encType` for `<Form>`/`<fetcher.Form>` " + ("and will default to \"" + defaultEncType + "\"")) : void 0;
return null;
}
return encType;
}
function getFormSubmissionInfo(target, basename) {
let method;
let action = null;
let action;
let encType;
let formData;
let body;
if (isFormElement(target)) {
let submissionTrigger = options.submissionTrigger;
if (options.action) {
action = options.action;
} else {
// When grabbing the action from the element, it will have had the basename
// prefixed to ensure non-JS scenarios work, so strip it since we'll
// re-prefix in the router
let attr = target.getAttribute("action");
action = attr ? stripBasename(attr, basename) : null;
}
method = options.method || target.getAttribute("method") || defaultMethod;
encType = options.encType || target.getAttribute("enctype") || defaultEncType;
// When grabbing the action from the element, it will have had the basename
// prefixed to ensure non-JS scenarios work, so strip it since we'll
// re-prefix in the router
let attr = target.getAttribute("action");
action = attr ? stripBasename(attr, basename) : null;
method = target.getAttribute("method") || defaultMethod;
encType = getFormEncType(target.getAttribute("enctype")) || defaultEncType;
formData = new FormData(target);
if (submissionTrigger && submissionTrigger.name) {
formData.append(submissionTrigger.name, submissionTrigger.value);
}
} else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
let form = target.form;
if (form == null) {
throw new Error("Cannot submit a <button> or <input type=\"submit\"> without a <form>");
} // <button>/<input type="submit"> may override attributes of <form>
if (options.action) {
action = options.action;
} else {
// When grabbing the action from the element, it will have had the basename
// prefixed to ensure non-JS scenarios work, so strip it since we'll
// re-prefix in the router
let attr = target.getAttribute("formaction") || form.getAttribute("action");
action = attr ? stripBasename(attr, basename) : null;
}
method = options.method || target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
encType = options.encType || target.getAttribute("formenctype") || form.getAttribute("enctype") || defaultEncType;
formData = new FormData(form); // Include name + value from a <button>, appending in case the button name
// matches an existing input name
if (target.name) {
formData.append(target.name, target.value);
// <button>/<input type="submit"> may override attributes of <form>
// When grabbing the action from the element, it will have had the basename
// prefixed to ensure non-JS scenarios work, so strip it since we'll
// re-prefix in the router
let attr = target.getAttribute("formaction") || form.getAttribute("action");
action = attr ? stripBasename(attr, basename) : null;
method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
encType = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
// Build a FormData object populated from a form and submitter
formData = new FormData(form, target);
// If this browser doesn't support the `FormData(el, submitter)` format,
// then tack on the submitter value at the end. This is a lightweight
// solution that is not 100% spec compliant. For complete support in older
// browsers, consider using the `formdata-submitter-polyfill` package
if (!isFormDataSubmitterSupported()) {
let {
name,
type,
value
} = target;
if (type === "image") {
let prefix = name ? name + "." : "";
formData.append(prefix + "x", "0");
formData.append(prefix + "y", "0");
} else if (name) {
formData.append(name, value);
}
}

@@ -186,23 +201,12 @@ } else if (isHtmlElement(target)) {

} else {
method = options.method || defaultMethod;
action = options.action || null;
encType = options.encType || defaultEncType;
if (target instanceof FormData) {
formData = target;
} else {
formData = new FormData();
if (target instanceof URLSearchParams) {
for (let [name, value] of target) {
formData.append(name, value);
}
} else if (target != null) {
for (let name of Object.keys(target)) {
formData.append(name, target[name]);
}
}
}
method = defaultMethod;
action = null;
encType = defaultEncType;
body = target;
}
// Send body for <Form encType="text/plain" so we encode it into text
if (formData && encType === "text/plain") {
body = formData;
formData = undefined;
}
return {

@@ -212,9 +216,10 @@ action,

encType,
formData
formData,
body
};
}
const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset"],
_excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
_excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "fetcherKey", "routeId", "relative", "preventScrollReset"];
const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset", "unstable_viewTransition"],
_excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "unstable_viewTransition", "children"],
_excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "submit", "relative", "preventScrollReset", "unstable_viewTransition"];
function createBrowserRouter(routes, opts) {

@@ -231,3 +236,4 @@ return createRouter({

routes,
mapRouteProperties: UNSAFE_mapRouteProperties
mapRouteProperties: UNSAFE_mapRouteProperties,
window: opts == null ? void 0 : opts.window
}).initialize();

@@ -246,11 +252,9 @@ }

routes,
mapRouteProperties: UNSAFE_mapRouteProperties
mapRouteProperties: UNSAFE_mapRouteProperties,
window: opts == null ? void 0 : opts.window
}).initialize();
}
function parseHydrationData() {
var _window;
let state = (_window = window) == null ? void 0 : _window.__staticRouterHydrationData;
if (state && state.errors) {

@@ -261,6 +265,4 @@ state = _extends({}, state, {

}
return state;
}
function deserializeErrors(errors) {

@@ -270,3 +272,2 @@ if (!errors) return null;

let serialized = {};
for (let [key, val] of entries) {

@@ -276,9 +277,27 @@ // Hey you! If you change this, please change the corresponding logic in

if (val && val.__type === "RouteErrorResponse") {
serialized[key] = new ErrorResponse(val.status, val.statusText, val.data, val.internal === true);
serialized[key] = new UNSAFE_ErrorResponseImpl(val.status, val.statusText, val.data, val.internal === true);
} else if (val && val.__type === "Error") {
let error = new Error(val.message); // Wipe away the client-side stack trace. Nothing to fill it in with
// because we don't serialize SSR stack traces for security reasons
error.stack = "";
serialized[key] = error;
// Attempt to reconstruct the right type of Error (i.e., ReferenceError)
if (val.__subType) {
let ErrorConstructor = window[val.__subType];
if (typeof ErrorConstructor === "function") {
try {
// @ts-expect-error
let error = new ErrorConstructor(val.message);
// Wipe away the client-side stack trace. Nothing to fill it in with
// because we don't serialize SSR stack traces for security reasons
error.stack = "";
serialized[key] = error;
} catch (e) {
// no-op - fall through and create a normal Error
}
}
}
if (serialized[key] == null) {
let error = new Error(val.message);
// Wipe away the client-side stack trace. Nothing to fill it in with
// because we don't serialize SSR stack traces for security reasons
error.stack = "";
serialized[key] = error;
}
} else {

@@ -288,18 +307,269 @@ serialized[key] = val;

}
return serialized;
}
const ViewTransitionContext = /*#__PURE__*/React.createContext({
isTransitioning: false
});
if (process.env.NODE_ENV !== "production") {
ViewTransitionContext.displayName = "ViewTransition";
}
const FetchersContext = /*#__PURE__*/React.createContext(null);
if (process.env.NODE_ENV !== "production") {
FetchersContext.displayName = "Fetchers";
}
//#endregion
////////////////////////////////////////////////////////////////////////////////
//#region Components
////////////////////////////////////////////////////////////////////////////////
/**
* A `<Router>` for use in web browsers. Provides the cleanest URLs.
*/
Webpack + React 17 fails to compile on any of the following because webpack
complains that `startTransition` doesn't exist in `React`:
* import { startTransition } from "react"
* import * as React from from "react";
"startTransition" in React ? React.startTransition(() => setState()) : setState()
* import * as React from from "react";
"startTransition" in React ? React["startTransition"](() => setState()) : setState()
Moving it to a constant such as the following solves the Webpack/React 17 issue:
* import * as React from from "react";
const START_TRANSITION = "startTransition";
START_TRANSITION in React ? React[START_TRANSITION](() => setState()) : setState()
function BrowserRouter(_ref) {
However, that introduces webpack/terser minification issues in production builds
in React 18 where minification/obfuscation ends up removing the call of
React.startTransition entirely from the first half of the ternary. Grabbing
this exported reference once up front resolves that issue.
See https://github.com/remix-run/react-router/issues/10579
*/
const START_TRANSITION = "startTransition";
const startTransitionImpl = React[START_TRANSITION];
function startTransitionSafe(cb) {
if (startTransitionImpl) {
startTransitionImpl(cb);
} else {
cb();
}
}
class Deferred {
constructor() {
this.status = "pending";
this.promise = new Promise((resolve, reject) => {
this.resolve = value => {
if (this.status === "pending") {
this.status = "resolved";
resolve(value);
}
};
this.reject = reason => {
if (this.status === "pending") {
this.status = "rejected";
reject(reason);
}
};
});
}
}
/**
* Given a Remix Router instance, render the appropriate UI
*/
function RouterProvider(_ref) {
let {
fallbackElement,
router,
future
} = _ref;
let [state, setStateImpl] = React.useState(router.state);
let [pendingState, setPendingState] = React.useState();
let [vtContext, setVtContext] = React.useState({
isTransitioning: false
});
let [renderDfd, setRenderDfd] = React.useState();
let [transition, setTransition] = React.useState();
let [interruption, setInterruption] = React.useState();
let fetcherRefs = React.useRef(new Map());
let fetcherData = React.useRef(new Map());
let registerFetcher = React.useCallback(key => {
let count = fetcherRefs.current.get(key);
if (count == null) {
fetcherRefs.current.set(key, 1);
} else {
fetcherRefs.current.set(key, count + 1);
}
}, []);
let unregisterFetcher = React.useCallback(key => {
let count = fetcherRefs.current.get(key);
if (count == null || count <= 1) {
fetcherRefs.current.delete(key);
fetcherData.current.delete(key);
} else {
fetcherRefs.current.set(key, count - 1);
}
}, [fetcherData]);
let fetcherContext = React.useMemo(() => ({
data: fetcherData.current,
register: registerFetcher,
unregister: unregisterFetcher
}), [registerFetcher, unregisterFetcher]);
// console.log("fetcherRefs", fetcherRefs.current);
// console.log("fetcherData", fetcherData.current);
let {
v7_startTransition
} = future || {};
let optInStartTransition = React.useCallback(cb => {
if (v7_startTransition) {
startTransitionSafe(cb);
} else {
cb();
}
}, [v7_startTransition]);
let setState = React.useCallback((newState, _ref2) => {
let {
unstable_viewTransitionOpts: viewTransitionOpts
} = _ref2;
newState.fetchers.forEach((fetcher, key) => {
if (fetcher.data !== undefined) {
fetcherData.current.set(key, fetcher.data);
}
});
if (!viewTransitionOpts || router.window == null || typeof router.window.document.startViewTransition !== "function") {
// Mid-navigation state update, or startViewTransition isn't available
optInStartTransition(() => setStateImpl(newState));
} else if (transition && renderDfd) {
// Interrupting an in-progress transition, cancel and let everything flush
// out, and then kick off a new transition from the interruption state
renderDfd.resolve();
transition.skipTransition();
setInterruption({
state: newState,
currentLocation: viewTransitionOpts.currentLocation,
nextLocation: viewTransitionOpts.nextLocation
});
} else {
// Completed navigation update with opted-in view transitions, let 'er rip
setPendingState(newState);
setVtContext({
isTransitioning: true,
currentLocation: viewTransitionOpts.currentLocation,
nextLocation: viewTransitionOpts.nextLocation
});
}
}, [optInStartTransition, transition, renderDfd, router.window]);
// Need to use a layout effect here so we are subscribed early enough to
// pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
// When we start a view transition, create a Deferred we can use for the
// eventual "completed" render
React.useEffect(() => {
if (vtContext.isTransitioning) {
setRenderDfd(new Deferred());
}
}, [vtContext.isTransitioning]);
// Once the deferred is created, kick off startViewTransition() to update the
// DOM and then wait on the Deferred to resolve (indicating the DOM update has
// happened)
React.useEffect(() => {
if (renderDfd && pendingState && router.window) {
let newState = pendingState;
let renderPromise = renderDfd.promise;
let transition = router.window.document.startViewTransition(async () => {
optInStartTransition(() => setStateImpl(newState));
await renderPromise;
});
transition.finished.finally(() => {
setRenderDfd(undefined);
setTransition(undefined);
setPendingState(undefined);
setVtContext({
isTransitioning: false
});
});
setTransition(transition);
}
}, [optInStartTransition, pendingState, renderDfd, router.window]);
// When the new location finally renders and is committed to the DOM, this
// effect will run to resolve the transition
React.useEffect(() => {
if (renderDfd && pendingState && state.location.key === pendingState.location.key) {
renderDfd.resolve();
}
}, [renderDfd, transition, state.location, pendingState]);
// If we get interrupted with a new navigation during a transition, we skip
// the active transition, let it cleanup, then kick it off again here
React.useEffect(() => {
if (!vtContext.isTransitioning && interruption) {
setPendingState(interruption.state);
setVtContext({
isTransitioning: true,
currentLocation: interruption.currentLocation,
nextLocation: interruption.nextLocation
});
setInterruption(undefined);
}
}, [vtContext.isTransitioning, interruption]);
let navigator = React.useMemo(() => {
return {
createHref: router.createHref,
encodeLocation: router.encodeLocation,
go: n => router.navigate(n),
push: (to, state, opts) => router.navigate(to, {
state,
preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
}),
replace: (to, state, opts) => router.navigate(to, {
replace: true,
state,
preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
})
};
}, [router]);
let basename = router.basename || "/";
let dataRouterContext = React.useMemo(() => ({
router,
navigator,
static: false,
basename
}), [router, navigator, basename]);
// The fragment and {null} here are important! We need them to keep React 18's
// useId happy when we are server-rendering since we may have a <script> here
// containing the hydrated server-side staticContext (from StaticRouterProvider).
// useId relies on the component tree structure to generate deterministic id's
// so we need to ensure it remains the same on the client even though
// we don't need the <script> tag
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UNSAFE_DataRouterContext.Provider, {
value: dataRouterContext
}, /*#__PURE__*/React.createElement(UNSAFE_DataRouterStateContext.Provider, {
value: state
}, /*#__PURE__*/React.createElement(FetchersContext.Provider, {
value: fetcherContext
}, /*#__PURE__*/React.createElement(ViewTransitionContext.Provider, {
value: vtContext
}, /*#__PURE__*/React.createElement(Router, {
basename: basename,
location: state.location,
navigationType: state.historyAction,
navigator: navigator
}, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
routes: router.routes,
state: state
}) : fallbackElement))))), null);
}
function DataRoutes(_ref3) {
let {
routes,
state
} = _ref3;
return UNSAFE_useRoutesImpl(routes, undefined, state);
}
/**
* A `<Router>` for use in web browsers. Provides the cleanest URLs.
*/
function BrowserRouter(_ref4) {
let {
basename,
children,
future,
window
} = _ref;
} = _ref4;
let historyRef = React.useRef();
if (historyRef.current == null) {

@@ -311,9 +581,14 @@ historyRef.current = createBrowserHistory({

}
let history = historyRef.current;
let [state, setState] = React.useState({
let [state, setStateImpl] = React.useState({
action: history.action,
location: history.location
});
React.useLayoutEffect(() => history.listen(setState), [history]);
let {
v7_startTransition
} = future || {};
let setState = React.useCallback(newState => {
v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
}, [setStateImpl, v7_startTransition]);
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /*#__PURE__*/React.createElement(Router, {

@@ -331,11 +606,10 @@ basename: basename,

*/
function HashRouter(_ref2) {
function HashRouter(_ref5) {
let {
basename,
children,
future,
window
} = _ref2;
} = _ref5;
let historyRef = React.useRef();
if (historyRef.current == null) {

@@ -347,9 +621,14 @@ historyRef.current = createHashHistory({

}
let history = historyRef.current;
let [state, setState] = React.useState({
let [state, setStateImpl] = React.useState({
action: history.action,
location: history.location
});
React.useLayoutEffect(() => history.listen(setState), [history]);
let {
v7_startTransition
} = future || {};
let setState = React.useCallback(newState => {
v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
}, [setStateImpl, v7_startTransition]);
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /*#__PURE__*/React.createElement(Router, {

@@ -369,14 +648,20 @@ basename: basename,

*/
function HistoryRouter(_ref3) {
function HistoryRouter(_ref6) {
let {
basename,
children,
future,
history
} = _ref3;
const [state, setState] = React.useState({
} = _ref6;
let [state, setStateImpl] = React.useState({
action: history.action,
location: history.location
});
React.useLayoutEffect(() => history.listen(setState), [history]);
let {
v7_startTransition
} = future || {};
let setState = React.useCallback(newState => {
v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
}, [setStateImpl, v7_startTransition]);
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /*#__PURE__*/React.createElement(Router, {

@@ -390,3 +675,2 @@ basename: basename,

}
if (process.env.NODE_ENV !== "production") {

@@ -398,29 +682,27 @@ HistoryRouter.displayName = "unstable_HistoryRouter";

/**
* The public API for rendering a history-aware <a>.
* The public API for rendering a history-aware `<a>`.
*/
const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref4, ref) {
const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref7, ref) {
let {
onClick,
relative,
reloadDocument,
replace,
state,
target,
to,
preventScrollReset
} = _ref4,
rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
onClick,
relative,
reloadDocument,
replace,
state,
target,
to,
preventScrollReset,
unstable_viewTransition
} = _ref7,
rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
let {
basename
} = React.useContext(UNSAFE_NavigationContext); // Rendered into <a href> for absolute URLs
} = React.useContext(UNSAFE_NavigationContext);
// Rendered into <a href> for absolute URLs
let absoluteHref;
let isExternal = false;
if (typeof to === "string" && ABSOLUTE_URL_REGEX.test(to)) {
// Render the absolute href server- and client-side
absoluteHref = to; // Only check for external origins client-side
absoluteHref = to;
// Only check for external origins client-side
if (isBrowser) {

@@ -431,3 +713,2 @@ try {

let path = stripBasename(targetUrl.pathname, basename);
if (targetUrl.origin === currentUrl.origin && path != null) {

@@ -444,5 +725,4 @@ // Strip the protocol/origin/basename for same-origin absolute URLs

}
} // Rendered into <a href> for relative URLs
}
// Rendered into <a href> for relative URLs
let href = useHref(to, {

@@ -456,8 +736,7 @@ relative

preventScrollReset,
relative
relative,
unstable_viewTransition
});
function handleClick(event) {
if (onClick) onClick(event);
if (!event.defaultPrevented) {

@@ -467,3 +746,2 @@ internalOnClick(event);

}
return (

@@ -480,3 +758,2 @@ /*#__PURE__*/

});
if (process.env.NODE_ENV !== "production") {

@@ -486,18 +763,16 @@ Link.displayName = "Link";

/**
* A <Link> wrapper that knows if it's "active" or not.
* A `<Link>` wrapper that knows if it's "active" or not.
*/
const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref5, ref) {
const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref8, ref) {
let {
"aria-current": ariaCurrentProp = "page",
caseSensitive = false,
className: classNameProp = "",
end = false,
style: styleProp,
to,
children
} = _ref5,
rest = _objectWithoutPropertiesLoose(_ref5, _excluded2);
"aria-current": ariaCurrentProp = "page",
caseSensitive = false,
className: classNameProp = "",
end = false,
style: styleProp,
to,
unstable_viewTransition,
children
} = _ref8,
rest = _objectWithoutPropertiesLoose(_ref8, _excluded2);
let path = useResolvedPath(to, {

@@ -511,6 +786,9 @@ relative: rest.relative

} = React.useContext(UNSAFE_NavigationContext);
let isTransitioning = routerState != null &&
// Conditional usage is OK here because the usage of a data router is static
// eslint-disable-next-line react-hooks/rules-of-hooks
useViewTransitionState(path) && unstable_viewTransition === true;
let toPathname = navigator.encodeLocation ? navigator.encodeLocation(path).pathname : path.pathname;
let locationPathname = location.pathname;
let nextLocationPathname = routerState && routerState.navigation && routerState.navigation.location ? routerState.navigation.location.pathname : null;
if (!caseSensitive) {

@@ -521,13 +799,13 @@ locationPathname = locationPathname.toLowerCase();

}
let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === "/";
let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
let renderProps = {
isActive,
isPending,
isTransitioning
};
let ariaCurrent = isActive ? ariaCurrentProp : undefined;
let className;
if (typeof classNameProp === "function") {
className = classNameProp({
isActive,
isPending
});
className = classNameProp(renderProps);
} else {

@@ -539,9 +817,5 @@ // If the className prop is not a function, we use a default `active`

// simple styling rules working as they currently do.
className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null].filter(Boolean).join(" ");
className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null, isTransitioning ? "transitioning" : null].filter(Boolean).join(" ");
}
let style = typeof styleProp === "function" ? styleProp({
isActive,
isPending
}) : styleProp;
let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {

@@ -552,9 +826,6 @@ "aria-current": ariaCurrent,

style: style,
to: to
}), typeof children === "function" ? children({
isActive,
isPending
}) : children);
to: to,
unstable_viewTransition: unstable_viewTransition
}), typeof children === "function" ? children(renderProps) : children);
});
if (process.env.NODE_ENV !== "production") {

@@ -569,29 +840,28 @@ NavLink.displayName = "NavLink";

*/
const Form = /*#__PURE__*/React.forwardRef((props, ref) => {
let submit = useSubmit();
return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
submit: submit,
ref: ref
}));
});
if (process.env.NODE_ENV !== "production") {
Form.displayName = "Form";
}
const FormImpl = /*#__PURE__*/React.forwardRef((_ref6, forwardedRef) => {
const FormImpl = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
let {
reloadDocument,
replace,
method = defaultMethod,
action,
onSubmit,
fetcherKey,
routeId,
relative,
preventScrollReset
} = _ref6,
props = _objectWithoutPropertiesLoose(_ref6, _excluded3);
let submit = useSubmitImpl(fetcherKey, routeId);
fetcherKey,
navigate,
reloadDocument,
replace,
state,
method = defaultMethod,
action,
onSubmit,
submit,
relative,
preventScrollReset,
unstable_viewTransition
} = _ref9,
props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
let formMethod = method.toLowerCase() === "get" ? "get" : "post";

@@ -601,3 +871,2 @@ let formAction = useFormAction(action, {

});
let submitHandler = event => {

@@ -610,9 +879,12 @@ onSubmit && onSubmit(event);

submit(submitter || event.currentTarget, {
fetcherKey,
method: submitMethod,
navigate,
replace,
state,
relative,
preventScrollReset
preventScrollReset,
unstable_viewTransition
});
};
return /*#__PURE__*/React.createElement("form", _extends({

@@ -625,3 +897,2 @@ ref: forwardedRef,

});
if (process.env.NODE_ENV !== "production") {

@@ -634,9 +905,7 @@ FormImpl.displayName = "FormImpl";

*/
function ScrollRestoration(_ref7) {
function ScrollRestoration(_ref10) {
let {
getKey,
storageKey
} = _ref7;
} = _ref10;
useScrollRestoration({

@@ -648,30 +917,26 @@ getKey,

}
if (process.env.NODE_ENV !== "production") {
ScrollRestoration.displayName = "ScrollRestoration";
} //#endregion
}
//#endregion
////////////////////////////////////////////////////////////////////////////////
//#region Hooks
////////////////////////////////////////////////////////////////////////////////
var DataRouterHook;
(function (DataRouterHook) {
DataRouterHook["UseScrollRestoration"] = "useScrollRestoration";
DataRouterHook["UseSubmitImpl"] = "useSubmitImpl";
DataRouterHook["UseSubmit"] = "useSubmit";
DataRouterHook["UseSubmitFetcher"] = "useSubmitFetcher";
DataRouterHook["UseFetcher"] = "useFetcher";
DataRouterHook["useViewTransitionState"] = "useViewTransitionState";
})(DataRouterHook || (DataRouterHook = {}));
var DataRouterStateHook;
(function (DataRouterStateHook) {
DataRouterStateHook["UseFetcher"] = "useFetcher";
DataRouterStateHook["UseFetchers"] = "useFetchers";
DataRouterStateHook["UseScrollRestoration"] = "useScrollRestoration";
})(DataRouterStateHook || (DataRouterStateHook = {}));
function getDataRouterConsoleError(hookName) {
return hookName + " must be used within a data router. See https://reactrouter.com/routers/picking-a-router.";
}
function useDataRouterContext(hookName) {

@@ -682,3 +947,2 @@ let ctx = React.useContext(UNSAFE_DataRouterContext);

}
function useDataRouterState(hookName) {

@@ -694,4 +958,2 @@ let state = React.useContext(UNSAFE_DataRouterStateContext);

*/
function useLinkClickHandler(to, _temp) {

@@ -703,3 +965,4 @@ let {

preventScrollReset,
relative
relative,
unstable_viewTransition
} = _temp === void 0 ? {} : _temp;

@@ -713,5 +976,5 @@ let navigate = useNavigate();

if (shouldProcessLinkClick(event, target)) {
event.preventDefault(); // If the URL hasn't changed, a regular <a> will do a replace instead of
event.preventDefault();
// If the URL hasn't changed, a regular <a> will do a replace instead of
// a push, so do the same here unless the replace prop is explicitly set
let replace = replaceProp !== undefined ? replaceProp : createPath(location) === createPath(path);

@@ -722,6 +985,7 @@ navigate(to, {

preventScrollReset,
relative
relative,
unstable_viewTransition
});
}
}, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative]);
}, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative, unstable_viewTransition]);
}

@@ -732,3 +996,2 @@ /**

*/
function useSearchParams(defaultInit) {

@@ -739,3 +1002,4 @@ process.env.NODE_ENV !== "production" ? UNSAFE_warning(typeof URLSearchParams !== "undefined", "You cannot use the `useSearchParams` hook in a browser that does not " + "support the URLSearchParams API. If you need to support Internet " + "Explorer 11, we recommend you load a polyfill such as " + "https://github.com/ungap/url-search-params\n\n" + "If you're unsure how to load polyfills, we recommend you check out " + "https://polyfill.io/v3/ which provides some recommendations about how " + "to load polyfills only for users that need them, instead of for every " + "user.") : void 0;

let location = useLocation();
let searchParams = React.useMemo(() => // Only merge in the defaults if we haven't yet called setSearchParams.
let searchParams = React.useMemo(() =>
// Only merge in the defaults if we haven't yet called setSearchParams.
// Once we call that we want those to take precedence, otherwise you can't

@@ -752,2 +1016,9 @@ // remove a param with setSearchParams({}) if it has an initial value

}
function validateClientSideSubmission() {
if (typeof document === "undefined") {
throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
}
}
let fetcherId = 0;
let getUniqueFetcherId = () => "__" + String(++fetcherId) + "__";
/**

@@ -757,11 +1028,6 @@ * Returns a function that may be used to programmatically submit a form (or

*/
function useSubmit() {
return useSubmitImpl();
}
function useSubmitImpl(fetcherKey, fetcherRouteId) {
let {
router
} = useDataRouterContext(DataRouterHook.UseSubmitImpl);
} = useDataRouterContext(DataRouterHook.UseSubmit);
let {

@@ -775,7 +1041,3 @@ basename

}
if (typeof document === "undefined") {
throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
}
validateClientSideSubmission();
let {

@@ -785,26 +1047,31 @@ action,

encType,
formData
} = getFormSubmissionInfo(target, options, basename); // Base options shared between fetch() and navigate()
let opts = {
preventScrollReset: options.preventScrollReset,
formData,
formMethod: method,
formEncType: encType
};
if (fetcherKey) {
!(fetcherRouteId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : UNSAFE_invariant(false) : void 0;
router.fetch(fetcherKey, fetcherRouteId, action, opts);
body
} = getFormSubmissionInfo(target, basename);
if (options.navigate === false) {
let key = options.fetcherKey || getUniqueFetcherId();
router.fetch(key, currentRouteId, options.action || action, {
preventScrollReset: options.preventScrollReset,
formData,
body,
formMethod: options.method || method,
formEncType: options.encType || encType
});
} else {
router.navigate(action, _extends({}, opts, {
router.navigate(options.action || action, {
preventScrollReset: options.preventScrollReset,
formData,
body,
formMethod: options.method || method,
formEncType: options.encType || encType,
replace: options.replace,
fromRouteId: currentRouteId
}));
state: options.state,
fromRouteId: currentRouteId,
unstable_viewTransition: options.unstable_viewTransition
});
}
}, [router, basename, fetcherKey, fetcherRouteId, currentRouteId]);
} // v7: Eventually we should deprecate this entirely in favor of using the
}, [router, basename, currentRouteId]);
}
// v7: Eventually we should deprecate this entirely in favor of using the
// router method directly?
function useFormAction(action, _temp2) {

@@ -819,25 +1086,19 @@ let {

!routeContext ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFormAction must be used inside a RouteContext") : UNSAFE_invariant(false) : void 0;
let [match] = routeContext.matches.slice(-1); // Shallow clone path so we can modify it below, otherwise we modify the
let location = useLocation();
let [match] = routeContext.matches.slice(-1);
// Shallow clone path so we can modify it below, otherwise we modify the
// object referenced by useMemo inside useResolvedPath
let path = _extends({}, useResolvedPath(action ? action : ".", {
let path = _extends({}, useResolvedPath(action != null ? action : location.pathname, {
relative
})); // Previously we set the default action to ".". The problem with this is that
// `useResolvedPath(".")` excludes search params and the hash of the resolved
// URL. This is the intended behavior of when "." is specifically provided as
// the form action, but inconsistent w/ browsers when the action is omitted.
}));
// If no action was specified, browsers will persist current search params
// when determining the path, so match that behavior
// https://github.com/remix-run/remix/issues/927
let location = useLocation();
if (action == null) {
// Safe to write to these directly here since if action was undefined, we
// Safe to write to this directly here since if action was undefined, we
// would have called useResolvedPath(".") which will never include a search
// or hash
path.search = location.search;
path.hash = location.hash; // When grabbing search params from the URL, remove the automatically
// When grabbing search params from the URL, remove the automatically
// inserted ?index param so we match the useResolvedPath search behavior
// which would not include ?index
if (match.route.index) {

@@ -849,35 +1110,15 @@ let params = new URLSearchParams(path.search);

}
if ((!action || action === ".") && match.route.index) {
path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
} // If we're operating within a basename, prepend it to the pathname prior
}
// If we're operating within a basename, prepend it to the pathname prior
// to creating the form action. If this is a root navigation, then just use
// the raw basename which allows the basename to have full control over the
// presence of a trailing slash on root actions
if (basename !== "/") {
path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
}
return createPath(path);
}
function createFetcherForm(fetcherKey, routeId) {
let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
ref: ref,
fetcherKey: fetcherKey,
routeId: routeId
}));
});
if (process.env.NODE_ENV !== "production") {
FetcherForm.displayName = "fetcher.Form";
}
return FetcherForm;
}
let fetcherId = 0;
// TODO: (v7) Change the useFetcher generic default from `any` to `unknown`
/**

@@ -887,44 +1128,69 @@ * Interacts with route loaders and actions without causing a navigation. Great

*/
function useFetcher() {
function useFetcher(_temp3) {
var _route$matches;
let {
key
} = _temp3 === void 0 ? {} : _temp3;
let {
router
} = useDataRouterContext(DataRouterHook.UseFetcher);
let state = useDataRouterState(DataRouterStateHook.UseFetcher);
let fetchersCtx = React.useContext(FetchersContext);
let route = React.useContext(UNSAFE_RouteContext);
let routeId = (_route$matches = route.matches[route.matches.length - 1]) == null ? void 0 : _route$matches.route.id;
let [fetcherKey, setFetcherKey] = React.useState(key || "");
if (!fetcherKey) {
setFetcherKey(getUniqueFetcherId());
}
!fetchersCtx ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a FetchersContext") : UNSAFE_invariant(false) : void 0;
!route ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a RouteContext") : UNSAFE_invariant(false) : void 0;
let routeId = (_route$matches = route.matches[route.matches.length - 1]) == null ? void 0 : _route$matches.route.id;
!(routeId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher can only be used on routes that contain a unique \"id\"") : UNSAFE_invariant(false) : void 0;
let [fetcherKey] = React.useState(() => String(++fetcherId));
let [Form] = React.useState(() => {
!routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.Form()") : UNSAFE_invariant(false) : void 0;
return createFetcherForm(fetcherKey, routeId);
});
let [load] = React.useState(() => href => {
!router ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No router available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
!routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
let {
data,
register,
unregister
} = fetchersCtx;
// Register/deregister with FetchersContext
React.useEffect(() => {
register(fetcherKey);
return () => unregister(fetcherKey);
}, [fetcherKey, register, unregister]);
// Fetcher additions
let load = React.useCallback(href => {
!routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "fetcher.load routeId unavailable") : UNSAFE_invariant(false) : void 0;
router.fetch(fetcherKey, routeId, href);
});
let submit = useSubmitImpl(fetcherKey, routeId);
let fetcher = router.getFetcher(fetcherKey);
let fetcherWithComponents = React.useMemo(() => _extends({
Form,
submit,
load
}, fetcher), [fetcher, Form, submit, load]);
React.useEffect(() => {
// Is this busted when the React team gets real weird and calls effects
// twice on mount? We really just need to garbage collect here when this
// fetcher is no longer around.
return () => {
if (!router) {
console.warn("No router available to clean up from useFetcher()");
return;
}
router.deleteFetcher(fetcherKey);
};
}, [router, fetcherKey]);
return fetcherWithComponents;
}, [fetcherKey, routeId, router]);
let submitImpl = useSubmit();
let submit = React.useCallback((target, opts) => {
submitImpl(target, _extends({}, opts, {
navigate: false,
fetcherKey
}));
}, [fetcherKey, submitImpl]);
let Form = React.useMemo(() => {
let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
navigate: false,
fetcherKey: fetcherKey,
ref: ref,
submit: submit
}));
});
if (process.env.NODE_ENV !== "production") {
FetcherForm.displayName = "fetcher.Form";
}
return FetcherForm;
}, [fetcherKey, submit]);
return React.useMemo(() => {
// Prefer the fetcher from `state` not `router.state` since DataRouterContext
// is memoized so this ensures we update on fetcher state updates
let fetcher = fetcherKey ? state.fetchers.get(fetcherKey) || IDLE_FETCHER : IDLE_FETCHER;
return _extends({
Form,
submit,
load
}, fetcher, {
data: data.get(fetcherKey)
});
}, [Form, data, fetcherKey, load, state.fetchers, submit]);
}

@@ -935,3 +1201,2 @@ /**

*/
function useFetchers() {

@@ -946,8 +1211,7 @@ let state = useDataRouterState(DataRouterStateHook.UseFetchers);

*/
function useScrollRestoration(_temp3) {
function useScrollRestoration(_temp4) {
let {
getKey,
storageKey
} = _temp3 === void 0 ? {} : _temp3;
} = _temp4 === void 0 ? {} : _temp4;
let {

@@ -960,6 +1224,9 @@ router

} = useDataRouterState(DataRouterStateHook.UseScrollRestoration);
let {
basename
} = React.useContext(UNSAFE_NavigationContext);
let location = useLocation();
let matches = useMatches();
let navigation = useNavigation(); // Trigger manual scroll restoration while we're active
let navigation = useNavigation();
// Trigger manual scroll restoration while we're active
React.useEffect(() => {

@@ -970,4 +1237,4 @@ window.history.scrollRestoration = "manual";

};
}, []); // Save positions on pagehide
}, []);
// Save positions on pagehide
usePageHide(React.useCallback(() => {

@@ -978,7 +1245,10 @@ if (navigation.state === "idle") {

}
sessionStorage.setItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY, JSON.stringify(savedScrollPositions));
try {
sessionStorage.setItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY, JSON.stringify(savedScrollPositions));
} catch (error) {
process.env.NODE_ENV !== "production" ? UNSAFE_warning(false, "Failed to save scroll positions in sessionStorage, <ScrollRestoration /> will not work properly (" + error + ").") : void 0;
}
window.history.scrollRestoration = "auto";
}, [storageKey, getKey, navigation.state, location, matches])); // Read in any saved scroll locations
}, [storageKey, getKey, navigation.state, location, matches]));
// Read in any saved scroll locations
if (typeof document !== "undefined") {

@@ -989,17 +1259,21 @@ // eslint-disable-next-line react-hooks/rules-of-hooks

let sessionPositions = sessionStorage.getItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY);
if (sessionPositions) {
savedScrollPositions = JSON.parse(sessionPositions);
}
} catch (e) {// no-op, use default empty object
} catch (e) {
// no-op, use default empty object
}
}, [storageKey]); // Enable scroll restoration in the router
}, [storageKey]);
// Enable scroll restoration in the router
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useLayoutEffect(() => {
let disableScrollRestoration = router == null ? void 0 : router.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKey);
let getKeyWithoutBasename = getKey && basename !== "/" ? (location, matches) => getKey( // Strip the basename to match useLocation()
_extends({}, location, {
pathname: stripBasename(location.pathname, basename) || location.pathname
}), matches) : getKey;
let disableScrollRestoration = router == null ? void 0 : router.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKeyWithoutBasename);
return () => disableScrollRestoration && disableScrollRestoration();
}, [router, getKey]); // Restore scrolling when state.restoreScrollPosition changes
}, [router, basename, getKey]);
// Restore scrolling when state.restoreScrollPosition changes
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useLayoutEffect(() => {

@@ -1009,14 +1283,11 @@ // Explicit false means don't do anything (used for submissions)

return;
} // been here before, scroll to it
}
// been here before, scroll to it
if (typeof restoreScrollPosition === "number") {
window.scrollTo(0, restoreScrollPosition);
return;
} // try to scroll to the hash
}
// try to scroll to the hash
if (location.hash) {
let el = document.getElementById(location.hash.slice(1));
let el = document.getElementById(decodeURIComponent(location.hash.slice(1)));
if (el) {

@@ -1026,10 +1297,8 @@ el.scrollIntoView();

}
} // Don't reset if this navigation opted out
}
// Don't reset if this navigation opted out
if (preventScrollReset === true) {
return;
} // otherwise go to the top on new locations
}
// otherwise go to the top on new locations
window.scrollTo(0, 0);

@@ -1047,3 +1316,2 @@ }, [location, restoreScrollPosition, preventScrollReset]);

*/
function useBeforeUnload(callback, options) {

@@ -1071,3 +1339,2 @@ let {

*/
function usePageHide(callback, options) {

@@ -1095,20 +1362,15 @@ let {

*/
function usePrompt(_ref8) {
function usePrompt(_ref11) {
let {
when,
message
} = _ref8;
} = _ref11;
let blocker = unstable_useBlocker(when);
React.useEffect(() => {
if (blocker.state === "blocked" && !when) {
blocker.reset();
}
}, [blocker, when]);
React.useEffect(() => {
if (blocker.state === "blocked") {
let proceed = window.confirm(message);
if (proceed) {
// This timeout is needed to avoid a weird "race" on POP navigations
// between the `window.history` revert navigation and the result of
// `window.confirm`
setTimeout(blocker.proceed, 0);

@@ -1120,6 +1382,51 @@ } else {

}, [blocker, message]);
React.useEffect(() => {
if (blocker.state === "blocked" && !when) {
blocker.reset();
}
}, [blocker, when]);
}
//#endregion
/**
* Return a boolean indicating if there is an active view transition to the
* given href. You can use this value to render CSS classes or viewTransitionName
* styles onto your elements
*
* @param href The destination href
* @param [opts.relative] Relative routing type ("route" | "path")
*/
function useViewTransitionState(to, opts) {
if (opts === void 0) {
opts = {};
}
let vtContext = React.useContext(ViewTransitionContext);
!(vtContext != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "`unstable_useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`. " + "Did you accidentally import `RouterProvider` from `react-router`?") : UNSAFE_invariant(false) : void 0;
let {
basename
} = useDataRouterContext(DataRouterHook.useViewTransitionState);
let path = useResolvedPath(to, {
relative: opts.relative
});
if (!vtContext.isTransitioning) {
return false;
}
let currentPath = stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
let nextPath = stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
// Transition is active if we're going to or coming from the indicated
// destination. This ensures that other PUSH navigations that reverse
// an indicated transition apply. I.e., on the list view you have:
//
// <NavLink to="/details/1" unstable_viewTransition>
//
// If you click the breadcrumb back to the list view:
//
// <NavLink to="/list" unstable_viewTransition>
//
// We should apply the transition because it's indicated as active going
// from /list -> /details/1 and therefore should be active on the reverse
// (even though this isn't strictly a POP reverse)
return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
}
//#endregion
export { BrowserRouter, Form, HashRouter, Link, NavLink, ScrollRestoration, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
export { BrowserRouter, Form, HashRouter, Link, NavLink, RouterProvider, ScrollRestoration, FetchersContext as UNSAFE_FetchersContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useViewTransitionState as unstable_useViewTransitionState, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
//# sourceMappingURL=index.js.map

2

dist/main.js
/**
* React Router DOM v0.0.0-experimental-dc8656c8
* React Router DOM v0.0.0-experimental-e0f088aa
*

@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

1009

dist/react-router-dom.development.js
/**
* React Router DOM v0.0.0-experimental-dc8656c8
* React Router DOM v0.0.0-experimental-e0f088aa
*

@@ -12,5 +12,5 @@ * Copyright (c) Remix Software Inc.

import * as React from 'react';
import { UNSAFE_mapRouteProperties, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext } from 'react-router';
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
import { stripBasename, createRouter, createBrowserHistory, createHashHistory, ErrorResponse, UNSAFE_warning, UNSAFE_invariant, joinPaths } from '@remix-run/router';
import { UNSAFE_mapRouteProperties, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker } from 'react-router';
export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, IDLE_FETCHER, matchPath } from '@remix-run/router';

@@ -31,10 +31,10 @@ const defaultMethod = "get";

}
function isModifiedEvent(event) {
return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
}
function shouldProcessLinkClick(event, target) {
return event.button === 0 && ( // Ignore everything but left clicks
!target || target === "_self") && // Let browser handle "target=_blank" etc.
return event.button === 0 && (
// Ignore everything but left clicks
!target || target === "_self") &&
// Let browser handle "target=_blank" etc.
!isModifiedEvent(event) // Ignore clicks with modifier keys

@@ -73,5 +73,9 @@ ;

let searchParams = createSearchParams(locationSearch);
if (defaultSearchParams) {
for (let key of defaultSearchParams.keys()) {
// Use `defaultSearchParams.forEach(...)` here instead of iterating of
// `defaultSearchParams.keys()` to work-around a bug in Firefox related to
// web extensions. Relevant Bugzilla tickets:
// https://bugzilla.mozilla.org/show_bug.cgi?id=1414602
// https://bugzilla.mozilla.org/show_bug.cgi?id=1023984
defaultSearchParams.forEach((_, key) => {
if (!searchParams.has(key)) {

@@ -82,58 +86,83 @@ defaultSearchParams.getAll(key).forEach(value => {

}
}
});
}
return searchParams;
}
function getFormSubmissionInfo(target, options, basename) {
// Thanks https://github.com/sindresorhus/type-fest!
// One-time check for submitter support
let _formDataSupportsSubmitter = null;
function isFormDataSubmitterSupported() {
if (_formDataSupportsSubmitter === null) {
try {
new FormData(document.createElement("form"),
// @ts-expect-error if FormData supports the submitter parameter, this will throw
0);
_formDataSupportsSubmitter = false;
} catch (e) {
_formDataSupportsSubmitter = true;
}
}
return _formDataSupportsSubmitter;
}
const supportedFormEncTypes = new Set(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
function getFormEncType(encType) {
if (encType != null && !supportedFormEncTypes.has(encType)) {
UNSAFE_warning(false, `"${encType}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` ` + `and will default to "${defaultEncType}"`) ;
return null;
}
return encType;
}
function getFormSubmissionInfo(target, basename) {
let method;
let action = null;
let action;
let encType;
let formData;
let body;
if (isFormElement(target)) {
let submissionTrigger = options.submissionTrigger;
if (options.action) {
action = options.action;
} else {
// When grabbing the action from the element, it will have had the basename
// prefixed to ensure non-JS scenarios work, so strip it since we'll
// re-prefix in the router
let attr = target.getAttribute("action");
action = attr ? stripBasename(attr, basename) : null;
}
method = options.method || target.getAttribute("method") || defaultMethod;
encType = options.encType || target.getAttribute("enctype") || defaultEncType;
// When grabbing the action from the element, it will have had the basename
// prefixed to ensure non-JS scenarios work, so strip it since we'll
// re-prefix in the router
let attr = target.getAttribute("action");
action = attr ? stripBasename(attr, basename) : null;
method = target.getAttribute("method") || defaultMethod;
encType = getFormEncType(target.getAttribute("enctype")) || defaultEncType;
formData = new FormData(target);
if (submissionTrigger && submissionTrigger.name) {
formData.append(submissionTrigger.name, submissionTrigger.value);
}
} else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
let form = target.form;
if (form == null) {
throw new Error(`Cannot submit a <button> or <input type="submit"> without a <form>`);
} // <button>/<input type="submit"> may override attributes of <form>
}
// <button>/<input type="submit"> may override attributes of <form>
if (options.action) {
action = options.action;
} else {
// When grabbing the action from the element, it will have had the basename
// prefixed to ensure non-JS scenarios work, so strip it since we'll
// re-prefix in the router
let attr = target.getAttribute("formaction") || form.getAttribute("action");
action = attr ? stripBasename(attr, basename) : null;
}
// When grabbing the action from the element, it will have had the basename
// prefixed to ensure non-JS scenarios work, so strip it since we'll
// re-prefix in the router
let attr = target.getAttribute("formaction") || form.getAttribute("action");
action = attr ? stripBasename(attr, basename) : null;
method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
encType = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
method = options.method || target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
encType = options.encType || target.getAttribute("formenctype") || form.getAttribute("enctype") || defaultEncType;
formData = new FormData(form); // Include name + value from a <button>, appending in case the button name
// matches an existing input name
// Build a FormData object populated from a form and submitter
formData = new FormData(form, target);
if (target.name) {
formData.append(target.name, target.value);
// If this browser doesn't support the `FormData(el, submitter)` format,
// then tack on the submitter value at the end. This is a lightweight
// solution that is not 100% spec compliant. For complete support in older
// browsers, consider using the `formdata-submitter-polyfill` package
if (!isFormDataSubmitterSupported()) {
let {
name,
type,
value
} = target;
if (type === "image") {
let prefix = name ? `${name}.` : "";
formData.append(`${prefix}x`, "0");
formData.append(`${prefix}y`, "0");
} else if (name) {
formData.append(name, value);
}
}

@@ -143,23 +172,13 @@ } else if (isHtmlElement(target)) {

} else {
method = options.method || defaultMethod;
action = options.action || null;
encType = options.encType || defaultEncType;
method = defaultMethod;
action = null;
encType = defaultEncType;
body = target;
}
if (target instanceof FormData) {
formData = target;
} else {
formData = new FormData();
if (target instanceof URLSearchParams) {
for (let [name, value] of target) {
formData.append(name, value);
}
} else if (target != null) {
for (let name of Object.keys(target)) {
formData.append(name, target[name]);
}
}
}
// Send body for <Form encType="text/plain" so we encode it into text
if (formData && encType === "text/plain") {
body = formData;
formData = undefined;
}
return {

@@ -169,3 +188,4 @@ action,

encType,
formData
formData,
body
};

@@ -178,7 +198,12 @@ }

*/
//#endregion
////////////////////////////////////////////////////////////////////////////////
//#region Routers
////////////////////////////////////////////////////////////////////////////////
function createBrowserRouter(routes, opts) {
return createRouter({
basename: opts?.basename,
future: { ...opts?.future,
future: {
...opts?.future,
v7_prependBasename: true

@@ -191,3 +216,4 @@ },

routes,
mapRouteProperties: UNSAFE_mapRouteProperties
mapRouteProperties: UNSAFE_mapRouteProperties,
window: opts?.window
}).initialize();

@@ -198,3 +224,4 @@ }

basename: opts?.basename,
future: { ...opts?.future,
future: {
...opts?.future,
v7_prependBasename: true

@@ -207,18 +234,16 @@ },

routes,
mapRouteProperties: UNSAFE_mapRouteProperties
mapRouteProperties: UNSAFE_mapRouteProperties,
window: opts?.window
}).initialize();
}
function parseHydrationData() {
let state = window?.__staticRouterHydrationData;
if (state && state.errors) {
state = { ...state,
state = {
...state,
errors: deserializeErrors(state.errors)
};
}
return state;
}
function deserializeErrors(errors) {

@@ -228,3 +253,2 @@ if (!errors) return null;

let serialized = {};
for (let [key, val] of entries) {

@@ -234,9 +258,27 @@ // Hey you! If you change this, please change the corresponding logic in

if (val && val.__type === "RouteErrorResponse") {
serialized[key] = new ErrorResponse(val.status, val.statusText, val.data, val.internal === true);
serialized[key] = new UNSAFE_ErrorResponseImpl(val.status, val.statusText, val.data, val.internal === true);
} else if (val && val.__type === "Error") {
let error = new Error(val.message); // Wipe away the client-side stack trace. Nothing to fill it in with
// because we don't serialize SSR stack traces for security reasons
error.stack = "";
serialized[key] = error;
// Attempt to reconstruct the right type of Error (i.e., ReferenceError)
if (val.__subType) {
let ErrorConstructor = window[val.__subType];
if (typeof ErrorConstructor === "function") {
try {
// @ts-expect-error
let error = new ErrorConstructor(val.message);
// Wipe away the client-side stack trace. Nothing to fill it in with
// because we don't serialize SSR stack traces for security reasons
error.stack = "";
serialized[key] = error;
} catch (e) {
// no-op - fall through and create a normal Error
}
}
}
if (serialized[key] == null) {
let error = new Error(val.message);
// Wipe away the client-side stack trace. Nothing to fill it in with
// because we don't serialize SSR stack traces for security reasons
error.stack = "";
serialized[key] = error;
}
} else {

@@ -246,11 +288,282 @@ serialized[key] = val;

}
return serialized;
}
return serialized;
} //#endregion
//#endregion
////////////////////////////////////////////////////////////////////////////////
//#region Contexts
////////////////////////////////////////////////////////////////////////////////
const ViewTransitionContext = /*#__PURE__*/React.createContext({
isTransitioning: false
});
{
ViewTransitionContext.displayName = "ViewTransition";
}
// TODO: (v7) Change the useFetcher data from `any` to `unknown`
const FetchersContext = /*#__PURE__*/React.createContext(null);
{
FetchersContext.displayName = "Fetchers";
}
//#endregion
////////////////////////////////////////////////////////////////////////////////
//#region Components
////////////////////////////////////////////////////////////////////////////////
/**
Webpack + React 17 fails to compile on any of the following because webpack
complains that `startTransition` doesn't exist in `React`:
* import { startTransition } from "react"
* import * as React from from "react";
"startTransition" in React ? React.startTransition(() => setState()) : setState()
* import * as React from from "react";
"startTransition" in React ? React["startTransition"](() => setState()) : setState()
Moving it to a constant such as the following solves the Webpack/React 17 issue:
* import * as React from from "react";
const START_TRANSITION = "startTransition";
START_TRANSITION in React ? React[START_TRANSITION](() => setState()) : setState()
However, that introduces webpack/terser minification issues in production builds
in React 18 where minification/obfuscation ends up removing the call of
React.startTransition entirely from the first half of the ternary. Grabbing
this exported reference once up front resolves that issue.
See https://github.com/remix-run/react-router/issues/10579
*/
const START_TRANSITION = "startTransition";
const startTransitionImpl = React[START_TRANSITION];
function startTransitionSafe(cb) {
if (startTransitionImpl) {
startTransitionImpl(cb);
} else {
cb();
}
}
class Deferred {
status = "pending";
// @ts-expect-error - no initializer
// @ts-expect-error - no initializer
constructor() {
this.promise = new Promise((resolve, reject) => {
this.resolve = value => {
if (this.status === "pending") {
this.status = "resolved";
resolve(value);
}
};
this.reject = reason => {
if (this.status === "pending") {
this.status = "rejected";
reject(reason);
}
};
});
}
}
/**
* Given a Remix Router instance, render the appropriate UI
*/
function RouterProvider({
fallbackElement,
router,
future
}) {
let [state, setStateImpl] = React.useState(router.state);
let [pendingState, setPendingState] = React.useState();
let [vtContext, setVtContext] = React.useState({
isTransitioning: false
});
let [renderDfd, setRenderDfd] = React.useState();
let [transition, setTransition] = React.useState();
let [interruption, setInterruption] = React.useState();
let fetcherRefs = React.useRef(new Map());
let fetcherData = React.useRef(new Map());
let registerFetcher = React.useCallback(key => {
let count = fetcherRefs.current.get(key);
if (count == null) {
fetcherRefs.current.set(key, 1);
} else {
fetcherRefs.current.set(key, count + 1);
}
}, []);
let unregisterFetcher = React.useCallback(key => {
let count = fetcherRefs.current.get(key);
if (count == null || count <= 1) {
fetcherRefs.current.delete(key);
fetcherData.current.delete(key);
} else {
fetcherRefs.current.set(key, count - 1);
}
}, [fetcherData]);
let fetcherContext = React.useMemo(() => ({
data: fetcherData.current,
register: registerFetcher,
unregister: unregisterFetcher
}), [registerFetcher, unregisterFetcher]);
// console.log("fetcherRefs", fetcherRefs.current);
// console.log("fetcherData", fetcherData.current);
let {
v7_startTransition
} = future || {};
let optInStartTransition = React.useCallback(cb => {
if (v7_startTransition) {
startTransitionSafe(cb);
} else {
cb();
}
}, [v7_startTransition]);
let setState = React.useCallback((newState, {
unstable_viewTransitionOpts: viewTransitionOpts
}) => {
newState.fetchers.forEach((fetcher, key) => {
if (fetcher.data !== undefined) {
fetcherData.current.set(key, fetcher.data);
}
});
if (!viewTransitionOpts || router.window == null || typeof router.window.document.startViewTransition !== "function") {
// Mid-navigation state update, or startViewTransition isn't available
optInStartTransition(() => setStateImpl(newState));
} else if (transition && renderDfd) {
// Interrupting an in-progress transition, cancel and let everything flush
// out, and then kick off a new transition from the interruption state
renderDfd.resolve();
transition.skipTransition();
setInterruption({
state: newState,
currentLocation: viewTransitionOpts.currentLocation,
nextLocation: viewTransitionOpts.nextLocation
});
} else {
// Completed navigation update with opted-in view transitions, let 'er rip
setPendingState(newState);
setVtContext({
isTransitioning: true,
currentLocation: viewTransitionOpts.currentLocation,
nextLocation: viewTransitionOpts.nextLocation
});
}
}, [optInStartTransition, transition, renderDfd, router.window]);
// Need to use a layout effect here so we are subscribed early enough to
// pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
// When we start a view transition, create a Deferred we can use for the
// eventual "completed" render
React.useEffect(() => {
if (vtContext.isTransitioning) {
setRenderDfd(new Deferred());
}
}, [vtContext.isTransitioning]);
// Once the deferred is created, kick off startViewTransition() to update the
// DOM and then wait on the Deferred to resolve (indicating the DOM update has
// happened)
React.useEffect(() => {
if (renderDfd && pendingState && router.window) {
let newState = pendingState;
let renderPromise = renderDfd.promise;
let transition = router.window.document.startViewTransition(async () => {
optInStartTransition(() => setStateImpl(newState));
await renderPromise;
});
transition.finished.finally(() => {
setRenderDfd(undefined);
setTransition(undefined);
setPendingState(undefined);
setVtContext({
isTransitioning: false
});
});
setTransition(transition);
}
}, [optInStartTransition, pendingState, renderDfd, router.window]);
// When the new location finally renders and is committed to the DOM, this
// effect will run to resolve the transition
React.useEffect(() => {
if (renderDfd && pendingState && state.location.key === pendingState.location.key) {
renderDfd.resolve();
}
}, [renderDfd, transition, state.location, pendingState]);
// If we get interrupted with a new navigation during a transition, we skip
// the active transition, let it cleanup, then kick it off again here
React.useEffect(() => {
if (!vtContext.isTransitioning && interruption) {
setPendingState(interruption.state);
setVtContext({
isTransitioning: true,
currentLocation: interruption.currentLocation,
nextLocation: interruption.nextLocation
});
setInterruption(undefined);
}
}, [vtContext.isTransitioning, interruption]);
let navigator = React.useMemo(() => {
return {
createHref: router.createHref,
encodeLocation: router.encodeLocation,
go: n => router.navigate(n),
push: (to, state, opts) => router.navigate(to, {
state,
preventScrollReset: opts?.preventScrollReset
}),
replace: (to, state, opts) => router.navigate(to, {
replace: true,
state,
preventScrollReset: opts?.preventScrollReset
})
};
}, [router]);
let basename = router.basename || "/";
let dataRouterContext = React.useMemo(() => ({
router,
navigator,
static: false,
basename
}), [router, navigator, basename]);
// The fragment and {null} here are important! We need them to keep React 18's
// useId happy when we are server-rendering since we may have a <script> here
// containing the hydrated server-side staticContext (from StaticRouterProvider).
// useId relies on the component tree structure to generate deterministic id's
// so we need to ensure it remains the same on the client even though
// we don't need the <script> tag
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UNSAFE_DataRouterContext.Provider, {
value: dataRouterContext
}, /*#__PURE__*/React.createElement(UNSAFE_DataRouterStateContext.Provider, {
value: state
}, /*#__PURE__*/React.createElement(FetchersContext.Provider, {
value: fetcherContext
}, /*#__PURE__*/React.createElement(ViewTransitionContext.Provider, {
value: vtContext
}, /*#__PURE__*/React.createElement(Router, {
basename: basename,
location: state.location,
navigationType: state.historyAction,
navigator: navigator
}, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
routes: router.routes,
state: state
}) : fallbackElement))))), null);
}
function DataRoutes({
routes,
state
}) {
return UNSAFE_useRoutesImpl(routes, undefined, state);
}
/**
* A `<Router>` for use in web browsers. Provides the cleanest URLs.

@@ -261,6 +574,6 @@ */

children,
future,
window
}) {
let historyRef = React.useRef();
if (historyRef.current == null) {

@@ -272,9 +585,14 @@ historyRef.current = createBrowserHistory({

}
let history = historyRef.current;
let [state, setState] = React.useState({
let [state, setStateImpl] = React.useState({
action: history.action,
location: history.location
});
React.useLayoutEffect(() => history.listen(setState), [history]);
let {
v7_startTransition
} = future || {};
let setState = React.useCallback(newState => {
v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
}, [setStateImpl, v7_startTransition]);
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /*#__PURE__*/React.createElement(Router, {

@@ -288,3 +606,2 @@ basename: basename,

}
/**

@@ -297,6 +614,6 @@ * A `<Router>` for use in web browsers. Stores the location in the hash

children,
future,
window
}) {
let historyRef = React.useRef();
if (historyRef.current == null) {

@@ -308,9 +625,14 @@ historyRef.current = createHashHistory({

}
let history = historyRef.current;
let [state, setState] = React.useState({
let [state, setStateImpl] = React.useState({
action: history.action,
location: history.location
});
React.useLayoutEffect(() => history.listen(setState), [history]);
let {
v7_startTransition
} = future || {};
let setState = React.useCallback(newState => {
v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
}, [setStateImpl, v7_startTransition]);
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /*#__PURE__*/React.createElement(Router, {

@@ -324,3 +646,2 @@ basename: basename,

}
/**

@@ -335,9 +656,16 @@ * A `<Router>` that accepts a pre-instantiated history object. It's important

children,
future,
history
}) {
const [state, setState] = React.useState({
let [state, setStateImpl] = React.useState({
action: history.action,
location: history.location
});
React.useLayoutEffect(() => history.listen(setState), [history]);
let {
v7_startTransition
} = future || {};
let setState = React.useCallback(newState => {
v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
}, [setStateImpl, v7_startTransition]);
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /*#__PURE__*/React.createElement(Router, {

@@ -351,3 +679,2 @@ basename: basename,

}
{

@@ -358,6 +685,6 @@ HistoryRouter.displayName = "unstable_HistoryRouter";

const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
/**
* The public API for rendering a history-aware <a>.
* The public API for rendering a history-aware `<a>`.
*/
const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef({

@@ -372,2 +699,3 @@ onClick,

preventScrollReset,
unstable_viewTransition,
...rest

@@ -377,11 +705,12 @@ }, ref) {

basename
} = React.useContext(UNSAFE_NavigationContext); // Rendered into <a href> for absolute URLs
} = React.useContext(UNSAFE_NavigationContext);
// Rendered into <a href> for absolute URLs
let absoluteHref;
let isExternal = false;
if (typeof to === "string" && ABSOLUTE_URL_REGEX.test(to)) {
// Render the absolute href server- and client-side
absoluteHref = to; // Only check for external origins client-side
absoluteHref = to;
// Only check for external origins client-side
if (isBrowser) {

@@ -392,3 +721,2 @@ try {

let path = stripBasename(targetUrl.pathname, basename);
if (targetUrl.origin === currentUrl.origin && path != null) {

@@ -405,5 +733,5 @@ // Strip the protocol/origin/basename for same-origin absolute URLs

}
} // Rendered into <a href> for relative URLs
}
// Rendered into <a href> for relative URLs
let href = useHref(to, {

@@ -417,8 +745,7 @@ relative

preventScrollReset,
relative
relative,
unstable_viewTransition
});
function handleClick(event) {
if (onClick) onClick(event);
if (!event.defaultPrevented) {

@@ -428,3 +755,2 @@ internalOnClick(event);

}
return (

@@ -441,9 +767,7 @@ /*#__PURE__*/

});
{
Link.displayName = "Link";
}
/**
* A <Link> wrapper that knows if it's "active" or not.
* A `<Link>` wrapper that knows if it's "active" or not.
*/

@@ -457,2 +781,3 @@ const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef({

to,
unstable_viewTransition,
children,

@@ -469,6 +794,9 @@ ...rest

} = React.useContext(UNSAFE_NavigationContext);
let isTransitioning = routerState != null &&
// Conditional usage is OK here because the usage of a data router is static
// eslint-disable-next-line react-hooks/rules-of-hooks
useViewTransitionState(path) && unstable_viewTransition === true;
let toPathname = navigator.encodeLocation ? navigator.encodeLocation(path).pathname : path.pathname;
let locationPathname = location.pathname;
let nextLocationPathname = routerState && routerState.navigation && routerState.navigation.location ? routerState.navigation.location.pathname : null;
if (!caseSensitive) {

@@ -479,13 +807,13 @@ locationPathname = locationPathname.toLowerCase();

}
let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === "/";
let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
let renderProps = {
isActive,
isPending,
isTransitioning
};
let ariaCurrent = isActive ? ariaCurrentProp : undefined;
let className;
if (typeof classNameProp === "function") {
className = classNameProp({
isActive,
isPending
});
className = classNameProp(renderProps);
} else {

@@ -497,9 +825,5 @@ // If the className prop is not a function, we use a default `active`

// simple styling rules working as they currently do.
className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null].filter(Boolean).join(" ");
className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null, isTransitioning ? "transitioning" : null].filter(Boolean).join(" ");
}
let style = typeof styleProp === "function" ? styleProp({
isActive,
isPending
}) : styleProp;
let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
return /*#__PURE__*/React.createElement(Link, Object.assign({}, rest, {

@@ -510,13 +834,9 @@ "aria-current": ariaCurrent,

style: style,
to: to
}), typeof children === "function" ? children({
isActive,
isPending
}) : children);
to: to,
unstable_viewTransition: unstable_viewTransition
}), typeof children === "function" ? children(renderProps) : children);
});
{
NavLink.displayName = "NavLink";
}
/**

@@ -529,24 +849,26 @@ * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except

const Form = /*#__PURE__*/React.forwardRef((props, ref) => {
let submit = useSubmit();
return /*#__PURE__*/React.createElement(FormImpl, Object.assign({}, props, {
submit: submit,
ref: ref
}));
});
{
Form.displayName = "Form";
}
const FormImpl = /*#__PURE__*/React.forwardRef(({
fetcherKey,
navigate,
reloadDocument,
replace,
state,
method: _method = defaultMethod,
action,
onSubmit,
fetcherKey,
routeId,
submit,
relative,
preventScrollReset,
unstable_viewTransition,
...props
}, forwardedRef) => {
let submit = useSubmitImpl(fetcherKey, routeId);
let formMethod = _method.toLowerCase() === "get" ? "get" : "post";

@@ -556,3 +878,2 @@ let formAction = useFormAction(action, {

});
let submitHandler = event => {

@@ -563,13 +884,14 @@ onSubmit && onSubmit(event);

let submitter = event.nativeEvent.submitter;
let submitMethod = submitter?.getAttribute("formmethod") || _method;
submit(submitter || event.currentTarget, {
fetcherKey,
method: submitMethod,
navigate,
replace,
state,
relative,
preventScrollReset
preventScrollReset,
unstable_viewTransition
});
};
return /*#__PURE__*/React.createElement("form", Object.assign({

@@ -582,7 +904,5 @@ ref: forwardedRef,

});
{
FormImpl.displayName = "FormImpl";
}
/**

@@ -602,30 +922,27 @@ * This component will emulate the browser's scroll restoration on location

}
{
ScrollRestoration.displayName = "ScrollRestoration";
} //#endregion
}
//#endregion
////////////////////////////////////////////////////////////////////////////////
//#region Hooks
////////////////////////////////////////////////////////////////////////////////
var DataRouterHook;
(function (DataRouterHook) {
var DataRouterHook = /*#__PURE__*/function (DataRouterHook) {
DataRouterHook["UseScrollRestoration"] = "useScrollRestoration";
DataRouterHook["UseSubmitImpl"] = "useSubmitImpl";
DataRouterHook["UseSubmit"] = "useSubmit";
DataRouterHook["UseSubmitFetcher"] = "useSubmitFetcher";
DataRouterHook["UseFetcher"] = "useFetcher";
})(DataRouterHook || (DataRouterHook = {}));
var DataRouterStateHook;
(function (DataRouterStateHook) {
DataRouterHook["useViewTransitionState"] = "useViewTransitionState";
return DataRouterHook;
}(DataRouterHook || {});
var DataRouterStateHook = /*#__PURE__*/function (DataRouterStateHook) {
DataRouterStateHook["UseFetcher"] = "useFetcher";
DataRouterStateHook["UseFetchers"] = "useFetchers";
DataRouterStateHook["UseScrollRestoration"] = "useScrollRestoration";
})(DataRouterStateHook || (DataRouterStateHook = {}));
return DataRouterStateHook;
}(DataRouterStateHook || {});
function getDataRouterConsoleError(hookName) {
return `${hookName} must be used within a data router. See https://reactrouter.com/routers/picking-a-router.`;
}
function useDataRouterContext(hookName) {

@@ -636,3 +953,2 @@ let ctx = React.useContext(UNSAFE_DataRouterContext);

}
function useDataRouterState(hookName) {

@@ -643,2 +959,3 @@ let state = React.useContext(UNSAFE_DataRouterStateContext);

}
/**

@@ -649,4 +966,2 @@ * Handles the click behavior for router `<Link>` components. This is useful if

*/
function useLinkClickHandler(to, {

@@ -657,3 +972,4 @@ target,

preventScrollReset,
relative
relative,
unstable_viewTransition
} = {}) {

@@ -667,5 +983,6 @@ let navigate = useNavigate();

if (shouldProcessLinkClick(event, target)) {
event.preventDefault(); // If the URL hasn't changed, a regular <a> will do a replace instead of
event.preventDefault();
// If the URL hasn't changed, a regular <a> will do a replace instead of
// a push, so do the same here unless the replace prop is explicitly set
let replace = replaceProp !== undefined ? replaceProp : createPath(location) === createPath(path);

@@ -676,7 +993,9 @@ navigate(to, {

preventScrollReset,
relative
relative,
unstable_viewTransition
});
}
}, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative]);
}, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative, unstable_viewTransition]);
}
/**

@@ -686,3 +1005,2 @@ * A convenient wrapper for reading and writing search parameters via the

*/
function useSearchParams(defaultInit) {

@@ -693,3 +1011,4 @@ UNSAFE_warning(typeof URLSearchParams !== "undefined", `You cannot use the \`useSearchParams\` hook in a browser that does not ` + `support the URLSearchParams API. If you need to support Internet ` + `Explorer 11, we recommend you load a polyfill such as ` + `https://github.com/ungap/url-search-params\n\n` + `If you're unsure how to load polyfills, we recommend you check out ` + `https://polyfill.io/v3/ which provides some recommendations about how ` + `to load polyfills only for users that need them, instead of for every ` + `user.`) ;

let location = useLocation();
let searchParams = React.useMemo(() => // Only merge in the defaults if we haven't yet called setSearchParams.
let searchParams = React.useMemo(() =>
// Only merge in the defaults if we haven't yet called setSearchParams.
// Once we call that we want those to take precedence, otherwise you can't

@@ -708,2 +1027,18 @@ // remove a param with setSearchParams({}) if it has an initial value

/**
* Submits a HTML `<form>` to the server without reloading the page.
*/
/**
* Submits a fetcher `<form>` to the server without reloading the page.
*/
function validateClientSideSubmission() {
if (typeof document === "undefined") {
throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
}
}
let fetcherId = 0;
let getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
/**
* Returns a function that may be used to programmatically submit a form (or

@@ -713,9 +1048,5 @@ * some arbitrary data) to the server.

function useSubmit() {
return useSubmitImpl();
}
function useSubmitImpl(fetcherKey, fetcherRouteId) {
let {
router
} = useDataRouterContext(DataRouterHook.UseSubmitImpl);
} = useDataRouterContext(DataRouterHook.UseSubmit);
let {

@@ -726,6 +1057,3 @@ basename

return React.useCallback((target, options = {}) => {
if (typeof document === "undefined") {
throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
}
validateClientSideSubmission();
let {

@@ -735,26 +1063,32 @@ action,

encType,
formData
} = getFormSubmissionInfo(target, options, basename); // Base options shared between fetch() and navigate()
let opts = {
preventScrollReset: options.preventScrollReset,
formData,
formMethod: method,
formEncType: encType
};
if (fetcherKey) {
!(fetcherRouteId != null) ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : void 0;
router.fetch(fetcherKey, fetcherRouteId, action, opts);
body
} = getFormSubmissionInfo(target, basename);
if (options.navigate === false) {
let key = options.fetcherKey || getUniqueFetcherId();
router.fetch(key, currentRouteId, options.action || action, {
preventScrollReset: options.preventScrollReset,
formData,
body,
formMethod: options.method || method,
formEncType: options.encType || encType
});
} else {
router.navigate(action, { ...opts,
router.navigate(options.action || action, {
preventScrollReset: options.preventScrollReset,
formData,
body,
formMethod: options.method || method,
formEncType: options.encType || encType,
replace: options.replace,
fromRouteId: currentRouteId
state: options.state,
fromRouteId: currentRouteId,
unstable_viewTransition: options.unstable_viewTransition
});
}
}, [router, basename, fetcherKey, fetcherRouteId, currentRouteId]);
} // v7: Eventually we should deprecate this entirely in favor of using the
}, [router, basename, currentRouteId]);
}
// v7: Eventually we should deprecate this entirely in favor of using the
// router method directly?
function useFormAction(action, {

@@ -768,25 +1102,23 @@ relative

!routeContext ? UNSAFE_invariant(false, "useFormAction must be used inside a RouteContext") : void 0;
let [match] = routeContext.matches.slice(-1); // Shallow clone path so we can modify it below, otherwise we modify the
let location = useLocation();
let [match] = routeContext.matches.slice(-1);
// Shallow clone path so we can modify it below, otherwise we modify the
// object referenced by useMemo inside useResolvedPath
let path = { ...useResolvedPath(action ? action : ".", {
let path = {
...useResolvedPath(action != null ? action : location.pathname, {
relative
})
}; // Previously we set the default action to ".". The problem with this is that
// `useResolvedPath(".")` excludes search params and the hash of the resolved
// URL. This is the intended behavior of when "." is specifically provided as
// the form action, but inconsistent w/ browsers when the action is omitted.
};
// If no action was specified, browsers will persist current search params
// when determining the path, so match that behavior
// https://github.com/remix-run/remix/issues/927
let location = useLocation();
if (action == null) {
// Safe to write to these directly here since if action was undefined, we
// Safe to write to this directly here since if action was undefined, we
// would have called useResolvedPath(".") which will never include a search
// or hash
path.search = location.search;
path.hash = location.hash; // When grabbing search params from the URL, remove the automatically
// When grabbing search params from the URL, remove the automatically
// inserted ?index param so we match the useResolvedPath search behavior
// which would not include ?index
if (match.route.index) {

@@ -798,36 +1130,16 @@ let params = new URLSearchParams(path.search);

}
if ((!action || action === ".") && match.route.index) {
path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
} // If we're operating within a basename, prepend it to the pathname prior
}
// If we're operating within a basename, prepend it to the pathname prior
// to creating the form action. If this is a root navigation, then just use
// the raw basename which allows the basename to have full control over the
// presence of a trailing slash on root actions
if (basename !== "/") {
path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
}
return createPath(path);
}
function createFetcherForm(fetcherKey, routeId) {
let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(FormImpl, Object.assign({}, props, {
ref: ref,
fetcherKey: fetcherKey,
routeId: routeId
}));
});
{
FetcherForm.displayName = "fetcher.Form";
}
return FetcherForm;
}
let fetcherId = 0;
// TODO: (v7) Change the useFetcher generic default from `any` to `unknown`
/**

@@ -837,43 +1149,72 @@ * Interacts with route loaders and actions without causing a navigation. Great

*/
function useFetcher() {
function useFetcher({
key
} = {}) {
let {
router
} = useDataRouterContext(DataRouterHook.UseFetcher);
let state = useDataRouterState(DataRouterStateHook.UseFetcher);
let fetchersCtx = React.useContext(FetchersContext);
let route = React.useContext(UNSAFE_RouteContext);
let routeId = route.matches[route.matches.length - 1]?.route.id;
let [fetcherKey, setFetcherKey] = React.useState(key || "");
if (!fetcherKey) {
setFetcherKey(getUniqueFetcherId());
}
!fetchersCtx ? UNSAFE_invariant(false, `useFetcher must be used inside a FetchersContext`) : void 0;
!route ? UNSAFE_invariant(false, `useFetcher must be used inside a RouteContext`) : void 0;
let routeId = route.matches[route.matches.length - 1]?.route.id;
!(routeId != null) ? UNSAFE_invariant(false, `useFetcher can only be used on routes that contain a unique "id"`) : void 0;
let [fetcherKey] = React.useState(() => String(++fetcherId));
let [Form] = React.useState(() => {
!routeId ? UNSAFE_invariant(false, `No routeId available for fetcher.Form()`) : void 0;
return createFetcherForm(fetcherKey, routeId);
});
let [load] = React.useState(() => href => {
!router ? UNSAFE_invariant(false, "No router available for fetcher.load()") : void 0;
!routeId ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : void 0;
router.fetch(fetcherKey, routeId, href);
});
let submit = useSubmitImpl(fetcherKey, routeId);
let fetcher = router.getFetcher(fetcherKey);
let fetcherWithComponents = React.useMemo(() => ({
Form,
submit,
load,
...fetcher
}), [fetcher, Form, submit, load]);
let {
data,
register,
unregister
} = fetchersCtx;
// Register/deregister with FetchersContext
React.useEffect(() => {
// Is this busted when the React team gets real weird and calls effects
// twice on mount? We really just need to garbage collect here when this
// fetcher is no longer around.
return () => {
if (!router) {
console.warn(`No router available to clean up from useFetcher()`);
return;
}
register(fetcherKey);
return () => unregister(fetcherKey);
}, [fetcherKey, register, unregister]);
router.deleteFetcher(fetcherKey);
// Fetcher additions
let load = React.useCallback(href => {
!routeId ? UNSAFE_invariant(false, `fetcher.load routeId unavailable`) : void 0;
router.fetch(fetcherKey, routeId, href);
}, [fetcherKey, routeId, router]);
let submitImpl = useSubmit();
let submit = React.useCallback((target, opts) => {
submitImpl(target, {
...opts,
navigate: false,
fetcherKey
});
}, [fetcherKey, submitImpl]);
let Form = React.useMemo(() => {
let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(FormImpl, Object.assign({}, props, {
navigate: false,
fetcherKey: fetcherKey,
ref: ref,
submit: submit
}));
});
{
FetcherForm.displayName = "fetcher.Form";
}
return FetcherForm;
}, [fetcherKey, submit]);
return React.useMemo(() => {
// Prefer the fetcher from `state` not `router.state` since DataRouterContext
// is memoized so this ensures we update on fetcher state updates
let fetcher = fetcherKey ? state.fetchers.get(fetcherKey) || IDLE_FETCHER : IDLE_FETCHER;
return {
Form,
submit,
load,
...fetcher,
data: data.get(fetcherKey)
};
}, [router, fetcherKey]);
return fetcherWithComponents;
}, [Form, data, fetcherKey, load, state.fetchers, submit]);
}
/**

@@ -883,3 +1224,2 @@ * Provides all fetchers currently on the page. Useful for layouts and parent

*/
function useFetchers() {

@@ -891,6 +1231,6 @@ let state = useDataRouterState(DataRouterStateHook.UseFetchers);

let savedScrollPositions = {};
/**
* When rendered inside a RouterProvider, will restore scroll positions on navigations
*/
function useScrollRestoration({

@@ -907,6 +1247,10 @@ getKey,

} = useDataRouterState(DataRouterStateHook.UseScrollRestoration);
let {
basename
} = React.useContext(UNSAFE_NavigationContext);
let location = useLocation();
let matches = useMatches();
let navigation = useNavigation(); // Trigger manual scroll restoration while we're active
let navigation = useNavigation();
// Trigger manual scroll restoration while we're active
React.useEffect(() => {

@@ -917,4 +1261,5 @@ window.history.scrollRestoration = "manual";

};
}, []); // Save positions on pagehide
}, []);
// Save positions on pagehide
usePageHide(React.useCallback(() => {

@@ -925,7 +1270,11 @@ if (navigation.state === "idle") {

}
sessionStorage.setItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY, JSON.stringify(savedScrollPositions));
try {
sessionStorage.setItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY, JSON.stringify(savedScrollPositions));
} catch (error) {
UNSAFE_warning(false, `Failed to save scroll positions in sessionStorage, <ScrollRestoration /> will not work properly (${error}).`) ;
}
window.history.scrollRestoration = "auto";
}, [storageKey, getKey, navigation.state, location, matches])); // Read in any saved scroll locations
}, [storageKey, getKey, navigation.state, location, matches]));
// Read in any saved scroll locations
if (typeof document !== "undefined") {

@@ -936,17 +1285,25 @@ // eslint-disable-next-line react-hooks/rules-of-hooks

let sessionPositions = sessionStorage.getItem(storageKey || SCROLL_RESTORATION_STORAGE_KEY);
if (sessionPositions) {
savedScrollPositions = JSON.parse(sessionPositions);
}
} catch (e) {// no-op, use default empty object
} catch (e) {
// no-op, use default empty object
}
}, [storageKey]); // Enable scroll restoration in the router
}, [storageKey]);
// Enable scroll restoration in the router
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useLayoutEffect(() => {
let disableScrollRestoration = router?.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKey);
let getKeyWithoutBasename = getKey && basename !== "/" ? (location, matches) => getKey(
// Strip the basename to match useLocation()
{
...location,
pathname: stripBasename(location.pathname, basename) || location.pathname
}, matches) : getKey;
let disableScrollRestoration = router?.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKeyWithoutBasename);
return () => disableScrollRestoration && disableScrollRestoration();
}, [router, getKey]); // Restore scrolling when state.restoreScrollPosition changes
}, [router, basename, getKey]);
// Restore scrolling when state.restoreScrollPosition changes
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useLayoutEffect(() => {

@@ -956,14 +1313,13 @@ // Explicit false means don't do anything (used for submissions)

return;
} // been here before, scroll to it
}
// been here before, scroll to it
if (typeof restoreScrollPosition === "number") {
window.scrollTo(0, restoreScrollPosition);
return;
} // try to scroll to the hash
}
// try to scroll to the hash
if (location.hash) {
let el = document.getElementById(location.hash.slice(1));
let el = document.getElementById(decodeURIComponent(location.hash.slice(1)));
if (el) {

@@ -973,10 +1329,10 @@ el.scrollIntoView();

}
} // Don't reset if this navigation opted out
}
// Don't reset if this navigation opted out
if (preventScrollReset === true) {
return;
} // otherwise go to the top on new locations
}
// otherwise go to the top on new locations
window.scrollTo(0, 0);

@@ -986,2 +1342,3 @@ }, [location, restoreScrollPosition, preventScrollReset]);

}
/**

@@ -995,3 +1352,2 @@ * Setup a callback to be fired on the window's `beforeunload` event. This is

*/
function useBeforeUnload(callback, options) {

@@ -1011,2 +1367,3 @@ let {

}
/**

@@ -1020,3 +1377,2 @@ * Setup a callback to be fired on the window's `pagehide` event. This is

*/
function usePageHide(callback, options) {

@@ -1036,2 +1392,3 @@ let {

}
/**

@@ -1045,4 +1402,2 @@ * Wrapper around useBlocker to show a window.confirm prompt to users instead

*/
function usePrompt({

@@ -1054,11 +1409,8 @@ when,

React.useEffect(() => {
if (blocker.state === "blocked" && !when) {
blocker.reset();
}
}, [blocker, when]);
React.useEffect(() => {
if (blocker.state === "blocked") {
let proceed = window.confirm(message);
if (proceed) {
// This timeout is needed to avoid a weird "race" on POP navigations
// between the `window.history` revert navigation and the result of
// `window.confirm`
setTimeout(blocker.proceed, 0);

@@ -1070,6 +1422,51 @@ } else {

}, [blocker, message]);
React.useEffect(() => {
if (blocker.state === "blocked" && !when) {
blocker.reset();
}
}, [blocker, when]);
}
//#endregion
export { BrowserRouter, Form, HashRouter, Link, NavLink, ScrollRestoration, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
/**
* Return a boolean indicating if there is an active view transition to the
* given href. You can use this value to render CSS classes or viewTransitionName
* styles onto your elements
*
* @param href The destination href
* @param [opts.relative] Relative routing type ("route" | "path")
*/
function useViewTransitionState(to, opts = {}) {
let vtContext = React.useContext(ViewTransitionContext);
!(vtContext != null) ? UNSAFE_invariant(false, "`unstable_useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`. " + "Did you accidentally import `RouterProvider` from `react-router`?") : void 0;
let {
basename
} = useDataRouterContext(DataRouterHook.useViewTransitionState);
let path = useResolvedPath(to, {
relative: opts.relative
});
if (!vtContext.isTransitioning) {
return false;
}
let currentPath = stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
let nextPath = stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
// Transition is active if we're going to or coming from the indicated
// destination. This ensures that other PUSH navigations that reverse
// an indicated transition apply. I.e., on the list view you have:
//
// <NavLink to="/details/1" unstable_viewTransition>
//
// If you click the breadcrumb back to the list view:
//
// <NavLink to="/list" unstable_viewTransition>
//
// We should apply the transition because it's indicated as active going
// from /list -> /details/1 and therefore should be active on the reverse
// (even though this isn't strictly a POP reverse)
return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
}
//#endregion
export { BrowserRouter, Form, HashRouter, Link, NavLink, RouterProvider, ScrollRestoration, FetchersContext as UNSAFE_FetchersContext, ViewTransitionContext as UNSAFE_ViewTransitionContext, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useViewTransitionState as unstable_useViewTransitionState, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
//# sourceMappingURL=react-router-dom.development.js.map

4

dist/react-router-dom.production.min.js
/**
* React Router DOM v0.0.0-experimental-dc8656c8
* React Router DOM v0.0.0-experimental-e0f088aa
*

@@ -11,3 +11,3 @@ * Copyright (c) Remix Software Inc.

*/
import*as e from"react";import{UNSAFE_mapRouteProperties as t,Router as r,UNSAFE_NavigationContext as n,useHref as o,useResolvedPath as a,useLocation as i,UNSAFE_DataRouterStateContext as s,useNavigate as u,createPath as l,UNSAFE_useRouteId as c,UNSAFE_RouteContext as f,useMatches as m,useNavigation as d,unstable_useBlocker as h,UNSAFE_DataRouterContext as p}from"react-router";export{AbortedDeferredError,Await,MemoryRouter,Navigate,NavigationType,Outlet,Route,Router,RouterProvider,Routes,UNSAFE_DataRouterContext,UNSAFE_DataRouterStateContext,UNSAFE_LocationContext,UNSAFE_NavigationContext,UNSAFE_RouteContext,UNSAFE_useRouteId,createMemoryRouter,createPath,createRoutesFromChildren,createRoutesFromElements,defer,generatePath,isRouteErrorResponse,json,matchPath,matchRoutes,parsePath,redirect,renderMatches,resolvePath,unstable_useBlocker,useActionData,useAsyncError,useAsyncValue,useHref,useInRouterContext,useLoaderData,useLocation,useMatch,useMatches,useNavigate,useNavigation,useNavigationType,useOutlet,useOutletContext,useParams,useResolvedPath,useRevalidator,useRouteError,useRouteLoaderData,useRoutes}from"react-router";import{stripBasename as g,createRouter as w,createBrowserHistory as y,createHashHistory as v,ErrorResponse as b,UNSAFE_invariant as R,joinPaths as S}from"@remix-run/router";const E="application/x-www-form-urlencoded";function C(e){return null!=e&&"string"==typeof e.tagName}function A(e=""){return new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,r)=>{let n=e[r];return t.concat(Array.isArray(n)?n.map((e=>[r,e])):[[r,n]])}),[]))}function L(e,t,r){let n,o,a,i=null;if(C(s=e)&&"form"===s.tagName.toLowerCase()){let s=t.submissionTrigger;if(t.action)i=t.action;else{let t=e.getAttribute("action");i=t?g(t,r):null}n=t.method||e.getAttribute("method")||"get",o=t.encType||e.getAttribute("enctype")||E,a=new FormData(e),s&&s.name&&a.append(s.name,s.value)}else if(function(e){return C(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return C(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let s=e.form;if(null==s)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');if(t.action)i=t.action;else{let t=e.getAttribute("formaction")||s.getAttribute("action");i=t?g(t,r):null}n=t.method||e.getAttribute("formmethod")||s.getAttribute("method")||"get",o=t.encType||e.getAttribute("formenctype")||s.getAttribute("enctype")||E,a=new FormData(s),e.name&&a.append(e.name,e.value)}else{if(C(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');if(n=t.method||"get",i=t.action||null,o=t.encType||E,e instanceof FormData)a=e;else if(a=new FormData,e instanceof URLSearchParams)for(let[t,r]of e)a.append(t,r);else if(null!=e)for(let t of Object.keys(e))a.append(t,e[t])}var s;return{action:i,method:n.toLowerCase(),encType:o,formData:a}}function x(e,r){return w({basename:r?.basename,future:{...r?.future,v7_prependBasename:!0},history:y({window:r?.window}),hydrationData:r?.hydrationData||F(),routes:e,mapRouteProperties:t}).initialize()}function U(e,r){return w({basename:r?.basename,future:{...r?.future,v7_prependBasename:!0},history:v({window:r?.window}),hydrationData:r?.hydrationData||F(),routes:e,mapRouteProperties:t}).initialize()}function F(){let e=window?.__staticRouterHydrationData;return e&&e.errors&&(e={...e,errors:D(e.errors)}),e}function D(e){if(!e)return null;let t=Object.entries(e),r={};for(let[n,o]of t)if(o&&"RouteErrorResponse"===o.__type)r[n]=new b(o.status,o.statusText,o.data,!0===o.internal);else if(o&&"Error"===o.__type){let e=new Error(o.message);e.stack="",r[n]=e}else r[n]=o;return r}function N({basename:t,children:n,window:o}){let a=e.useRef();null==a.current&&(a.current=y({window:o,v5Compat:!0}));let i=a.current,[s,u]=e.useState({action:i.action,location:i.location});return e.useLayoutEffect((()=>i.listen(u)),[i]),e.createElement(r,{basename:t,children:n,location:s.location,navigationType:s.action,navigator:i})}function P({basename:t,children:n,window:o}){let a=e.useRef();null==a.current&&(a.current=v({window:o,v5Compat:!0}));let i=a.current,[s,u]=e.useState({action:i.action,location:i.location});return e.useLayoutEffect((()=>i.listen(u)),[i]),e.createElement(r,{basename:t,children:n,location:s.location,navigationType:s.action,navigator:i})}function _({basename:t,children:n,history:o}){const[a,i]=e.useState({action:o.action,location:o.location});return e.useLayoutEffect((()=>o.listen(i)),[o]),e.createElement(r,{basename:t,children:n,location:a.location,navigationType:a.action,navigator:o})}const T="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,k=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,O=e.forwardRef((function({onClick:t,relative:r,reloadDocument:a,replace:i,state:s,target:u,to:l,preventScrollReset:c,...f},m){let d,{basename:h}=e.useContext(n),p=!1;if("string"==typeof l&&k.test(l)&&(d=l,T))try{let e=new URL(window.location.href),t=l.startsWith("//")?new URL(e.protocol+l):new URL(l),r=g(t.pathname,h);t.origin===e.origin&&null!=r?l=r+t.search+t.hash:p=!0}catch(v){}let w=o(l,{relative:r}),y=Y(l,{replace:i,state:s,target:u,preventScrollReset:c,relative:r});return e.createElement("a",Object.assign({},f,{href:d||w,onClick:p||a?t:function(e){t&&t(e),e.defaultPrevented||y(e)},ref:m,target:u}))})),I=e.forwardRef((function({"aria-current":t="page",caseSensitive:r=!1,className:o="",end:u=!1,style:l,to:c,children:f,...m},d){let h=a(c,{relative:m.relative}),p=i(),g=e.useContext(s),{navigator:w}=e.useContext(n),y=w.encodeLocation?w.encodeLocation(h).pathname:h.pathname,v=p.pathname,b=g&&g.navigation&&g.navigation.location?g.navigation.location.pathname:null;r||(v=v.toLowerCase(),b=b?b.toLowerCase():null,y=y.toLowerCase());let R,S=v===y||!u&&v.startsWith(y)&&"/"===v.charAt(y.length),E=null!=b&&(b===y||!u&&b.startsWith(y)&&"/"===b.charAt(y.length)),C=S?t:void 0;R="function"==typeof o?o({isActive:S,isPending:E}):[o,S?"active":null,E?"pending":null].filter(Boolean).join(" ");let A="function"==typeof l?l({isActive:S,isPending:E}):l;return e.createElement(O,Object.assign({},m,{"aria-current":C,className:R,ref:d,style:A,to:c}),"function"==typeof f?f({isActive:S,isPending:E}):f)})),K=e.forwardRef(((t,r)=>e.createElement(j,Object.assign({},t,{ref:r})))),j=e.forwardRef((({reloadDocument:t,replace:r,method:n="get",action:o,onSubmit:a,fetcherKey:i,routeId:s,relative:u,preventScrollReset:l,...c},f)=>{let m=$(i,s),d="get"===n.toLowerCase()?"get":"post",h=q(o,{relative:u});return e.createElement("form",Object.assign({ref:f,method:d,action:h,onSubmit:t?a:e=>{if(a&&a(e),e.defaultPrevented)return;e.preventDefault();let t=e.nativeEvent.submitter,o=t?.getAttribute("formmethod")||n;m(t||e.currentTarget,{method:o,replace:r,relative:u,preventScrollReset:l})}},c))}));function M({getKey:e,storageKey:t}){return ee({getKey:e,storageKey:t}),null}var B,z;function H(t){let r=e.useContext(p);return r||R(!1),r}function W(t){let r=e.useContext(s);return r||R(!1),r}function Y(t,{target:r,replace:n,state:o,preventScrollReset:s,relative:c}={}){let f=u(),m=i(),d=a(t,{relative:c});return e.useCallback((e=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(e,r)){e.preventDefault();let r=void 0!==n?n:l(m)===l(d);f(t,{replace:r,state:o,preventScrollReset:s,relative:c})}}),[m,f,d,n,o,r,t,s,c])}function J(t){let r=e.useRef(A(t)),n=e.useRef(!1),o=i(),a=e.useMemo((()=>function(e,t){let r=A(e);if(t)for(let n of t.keys())r.has(n)||t.getAll(n).forEach((e=>{r.append(n,e)}));return r}(o.search,n.current?null:r.current)),[o.search]),s=u(),l=e.useCallback(((e,t)=>{const r=A("function"==typeof e?e(a):e);n.current=!0,s("?"+r,t)}),[s,a]);return[a,l]}function V(){return $()}function $(t,r){let{router:o}=H(B.UseSubmitImpl),{basename:a}=e.useContext(n),i=c();return e.useCallback(((e,n={})=>{if("undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.");let{action:s,method:u,encType:l,formData:c}=L(e,n,a),f={preventScrollReset:n.preventScrollReset,formData:c,formMethod:u,formEncType:l};t?(null==r&&R(!1),o.fetch(t,r,s,f)):o.navigate(s,{...f,replace:n.replace,fromRouteId:i})}),[o,a,t,r,i])}function q(t,{relative:r}={}){let{basename:o}=e.useContext(n),s=e.useContext(f);s||R(!1);let[u]=s.matches.slice(-1),c={...a(t||".",{relative:r})},m=i();if(null==t&&(c.search=m.search,c.hash=m.hash,u.route.index)){let e=new URLSearchParams(c.search);e.delete("index"),c.search=e.toString()?`?${e.toString()}`:""}return t&&"."!==t||!u.route.index||(c.search=c.search?c.search.replace(/^\?/,"?index&"):"?index"),"/"!==o&&(c.pathname="/"===c.pathname?o:S([o,c.pathname])),l(c)}!function(e){e.UseScrollRestoration="useScrollRestoration",e.UseSubmitImpl="useSubmitImpl",e.UseFetcher="useFetcher"}(B||(B={})),function(e){e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration"}(z||(z={}));let G=0;function Q(){let{router:t}=H(B.UseFetcher),r=e.useContext(f);r||R(!1);let n=r.matches[r.matches.length-1]?.route.id;null==n&&R(!1);let[o]=e.useState((()=>String(++G))),[a]=e.useState((()=>(n||R(!1),function(t,r){return e.forwardRef(((n,o)=>e.createElement(j,Object.assign({},n,{ref:o,fetcherKey:t,routeId:r}))))}(o,n)))),[i]=e.useState((()=>e=>{t||R(!1),n||R(!1),t.fetch(o,n,e)})),s=$(o,n),u=t.getFetcher(o),l=e.useMemo((()=>({Form:a,submit:s,load:i,...u})),[u,a,s,i]);return e.useEffect((()=>()=>{t?t.deleteFetcher(o):console.warn("No router available to clean up from useFetcher()")}),[t,o]),l}function X(){return[...W(z.UseFetchers).fetchers.values()]}let Z={};function ee({getKey:t,storageKey:r}={}){let{router:n}=H(B.UseScrollRestoration),{restoreScrollPosition:o,preventScrollReset:a}=W(z.UseScrollRestoration),s=i(),u=m(),l=d();e.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(t,r){let{capture:n}=r||{};e.useEffect((()=>{let e=null!=n?{capture:n}:void 0;return window.addEventListener("pagehide",t,e),()=>{window.removeEventListener("pagehide",t,e)}}),[t,n])}(e.useCallback((()=>{if("idle"===l.state){let e=(t?t(s,u):null)||s.key;Z[e]=window.scrollY}sessionStorage.setItem(r||"react-router-scroll-positions",JSON.stringify(Z)),window.history.scrollRestoration="auto"}),[r,t,l.state,s,u])),"undefined"!=typeof document&&(e.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(r||"react-router-scroll-positions");e&&(Z=JSON.parse(e))}catch(e){}}),[r]),e.useLayoutEffect((()=>{let e=n?.enableScrollRestoration(Z,(()=>window.scrollY),t);return()=>e&&e()}),[n,t]),e.useLayoutEffect((()=>{if(!1!==o)if("number"!=typeof o){if(s.hash){let e=document.getElementById(s.hash.slice(1));if(e)return void e.scrollIntoView()}!0!==a&&window.scrollTo(0,0)}else window.scrollTo(0,o)}),[s,o,a]))}function te(t,r){let{capture:n}=r||{};e.useEffect((()=>{let e=null!=n?{capture:n}:void 0;return window.addEventListener("beforeunload",t,e),()=>{window.removeEventListener("beforeunload",t,e)}}),[t,n])}function re({when:t,message:r}){let n=h(t);e.useEffect((()=>{"blocked"!==n.state||t||n.reset()}),[n,t]),e.useEffect((()=>{if("blocked"===n.state){window.confirm(r)?setTimeout(n.proceed,0):n.reset()}}),[n,r])}export{N as BrowserRouter,K as Form,P as HashRouter,O as Link,I as NavLink,M as ScrollRestoration,ee as UNSAFE_useScrollRestoration,x as createBrowserRouter,U as createHashRouter,A as createSearchParams,_ as unstable_HistoryRouter,re as unstable_usePrompt,te as useBeforeUnload,Q as useFetcher,X as useFetchers,q as useFormAction,Y as useLinkClickHandler,J as useSearchParams,V as useSubmit};
import*as e from"react";import{UNSAFE_mapRouteProperties as t,UNSAFE_DataRouterContext as n,UNSAFE_DataRouterStateContext as r,Router as a,UNSAFE_useRoutesImpl as o,UNSAFE_NavigationContext as i,useHref as s,useResolvedPath as u,useLocation as l,useNavigate as c,createPath as f,UNSAFE_useRouteId as m,UNSAFE_RouteContext as d,useMatches as h,useNavigation as p,unstable_useBlocker as w}from"react-router";export{AbortedDeferredError,Await,MemoryRouter,Navigate,NavigationType,Outlet,Route,Router,Routes,UNSAFE_DataRouterContext,UNSAFE_DataRouterStateContext,UNSAFE_LocationContext,UNSAFE_NavigationContext,UNSAFE_RouteContext,UNSAFE_useRouteId,createMemoryRouter,createPath,createRoutesFromChildren,createRoutesFromElements,defer,generatePath,isRouteErrorResponse,json,matchPath,matchRoutes,parsePath,redirect,redirectDocument,renderMatches,resolvePath,unstable_useBlocker,useActionData,useAsyncError,useAsyncValue,useHref,useInRouterContext,useLoaderData,useLocation,useMatch,useMatches,useNavigate,useNavigation,useNavigationType,useOutlet,useOutletContext,useParams,useResolvedPath,useRevalidator,useRouteError,useRouteLoaderData,useRoutes}from"react-router";import{stripBasename as v,createRouter as g,createBrowserHistory as b,createHashHistory as y,UNSAFE_ErrorResponseImpl as R,UNSAFE_invariant as E,joinPaths as S,IDLE_FETCHER as T,matchPath as C}from"@remix-run/router";const L="application/x-www-form-urlencoded";function x(e){return null!=e&&"string"==typeof e.tagName}function _(e=""){return new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,n)=>{let r=e[n];return t.concat(Array.isArray(r)?r.map((e=>[n,e])):[[n,r]])}),[]))}let A=null;const U=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function k(e){return null==e||U.has(e)?e:null}function F(e,t){let n,r,a,o,i;if(x(s=e)&&"form"===s.tagName.toLowerCase()){let i=e.getAttribute("action");r=i?v(i,t):null,n=e.getAttribute("method")||"get",a=k(e.getAttribute("enctype"))||L,o=new FormData(e)}else if(function(e){return x(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return x(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let i=e.form;if(null==i)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let s=e.getAttribute("formaction")||i.getAttribute("action");if(r=s?v(s,t):null,n=e.getAttribute("formmethod")||i.getAttribute("method")||"get",a=k(e.getAttribute("formenctype"))||k(i.getAttribute("enctype"))||L,o=new FormData(i,e),!function(){if(null===A)try{new FormData(document.createElement("form"),0),A=!1}catch(e){A=!0}return A}()){let{name:t,type:n,value:r}=e;if("image"===n){let e=t?`${t}.`:"";o.append(`${e}x`,"0"),o.append(`${e}y`,"0")}else t&&o.append(t,r)}}else{if(x(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');n="get",r=null,a=L,i=e}var s;return o&&"text/plain"===a&&(i=o,o=void 0),{action:r,method:n.toLowerCase(),encType:a,formData:o,body:i}}function D(e,n){return g({basename:n?.basename,future:{...n?.future,v7_prependBasename:!0},history:b({window:n?.window}),hydrationData:n?.hydrationData||P(),routes:e,mapRouteProperties:t,window:n?.window}).initialize()}function N(e,n){return g({basename:n?.basename,future:{...n?.future,v7_prependBasename:!0},history:y({window:n?.window}),hydrationData:n?.hydrationData||P(),routes:e,mapRouteProperties:t,window:n?.window}).initialize()}function P(){let e=window?.__staticRouterHydrationData;return e&&e.errors&&(e={...e,errors:K(e.errors)}),e}function K(e){if(!e)return null;let t=Object.entries(e),n={};for(let[a,o]of t)if(o&&"RouteErrorResponse"===o.__type)n[a]=new R(o.status,o.statusText,o.data,!0===o.internal);else if(o&&"Error"===o.__type){if(o.__subType){let e=window[o.__subType];if("function"==typeof e)try{let t=new e(o.message);t.stack="",n[a]=t}catch(r){}}if(null==n[a]){let e=new Error(o.message);e.stack="",n[a]=e}}else n[a]=o;return n}const M=e.createContext({isTransitioning:!1}),O=e.createContext(null),j=e.startTransition;class V{status="pending";constructor(){this.promise=new Promise(((e,t)=>{this.resolve=t=>{"pending"===this.status&&(this.status="resolved",e(t))},this.reject=e=>{"pending"===this.status&&(this.status="rejected",t(e))}}))}}function I({fallbackElement:t,router:o,future:i}){let[s,u]=e.useState(o.state),[l,c]=e.useState(),[f,m]=e.useState({isTransitioning:!1}),[d,h]=e.useState(),[p,w]=e.useState(),[v,g]=e.useState(),b=e.useRef(new Map),y=e.useRef(new Map),R=e.useCallback((e=>{let t=b.current.get(e);null==t?b.current.set(e,1):b.current.set(e,t+1)}),[]),E=e.useCallback((e=>{let t=b.current.get(e);null==t||t<=1?(b.current.delete(e),y.current.delete(e)):b.current.set(e,t-1)}),[y]),S=e.useMemo((()=>({data:y.current,register:R,unregister:E})),[R,E]),{v7_startTransition:T}=i||{},C=e.useCallback((e=>{T?function(e){j?j(e):e()}(e):e()}),[T]),L=e.useCallback(((e,{unstable_viewTransitionOpts:t})=>{e.fetchers.forEach(((e,t)=>{void 0!==e.data&&y.current.set(t,e.data)})),t&&null!=o.window&&"function"==typeof o.window.document.startViewTransition?p&&d?(d.resolve(),p.skipTransition(),g({state:e,currentLocation:t.currentLocation,nextLocation:t.nextLocation})):(c(e),m({isTransitioning:!0,currentLocation:t.currentLocation,nextLocation:t.nextLocation})):C((()=>u(e)))}),[C,p,d,o.window]);e.useLayoutEffect((()=>o.subscribe(L)),[o,L]),e.useEffect((()=>{f.isTransitioning&&h(new V)}),[f.isTransitioning]),e.useEffect((()=>{if(d&&l&&o.window){let e=l,t=d.promise,n=o.window.document.startViewTransition((async()=>{C((()=>u(e))),await t}));n.finished.finally((()=>{h(void 0),w(void 0),c(void 0),m({isTransitioning:!1})})),w(n)}}),[C,l,d,o.window]),e.useEffect((()=>{d&&l&&s.location.key===l.location.key&&d.resolve()}),[d,p,s.location,l]),e.useEffect((()=>{!f.isTransitioning&&v&&(c(v.state),m({isTransitioning:!0,currentLocation:v.currentLocation,nextLocation:v.nextLocation}),g(void 0))}),[f.isTransitioning,v]);let x=e.useMemo((()=>({createHref:o.createHref,encodeLocation:o.encodeLocation,go:e=>o.navigate(e),push:(e,t,n)=>o.navigate(e,{state:t,preventScrollReset:n?.preventScrollReset}),replace:(e,t,n)=>o.navigate(e,{replace:!0,state:t,preventScrollReset:n?.preventScrollReset})})),[o]),_=o.basename||"/",A=e.useMemo((()=>({router:o,navigator:x,static:!1,basename:_})),[o,x,_]);return e.createElement(e.Fragment,null,e.createElement(n.Provider,{value:A},e.createElement(r.Provider,{value:s},e.createElement(O.Provider,{value:S},e.createElement(M.Provider,{value:f},e.createElement(a,{basename:_,location:s.location,navigationType:s.historyAction,navigator:x},s.initialized?e.createElement(z,{routes:o.routes,state:s}):t))))),null)}function z({routes:e,state:t}){return o(e,void 0,t)}function B({basename:t,children:n,future:r,window:o}){let i=e.useRef();null==i.current&&(i.current=b({window:o,v5Compat:!0}));let s=i.current,[u,l]=e.useState({action:s.action,location:s.location}),{v7_startTransition:c}=r||{},f=e.useCallback((e=>{c&&j?j((()=>l(e))):l(e)}),[l,c]);return e.useLayoutEffect((()=>s.listen(f)),[s,f]),e.createElement(a,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:s})}function H({basename:t,children:n,future:r,window:o}){let i=e.useRef();null==i.current&&(i.current=y({window:o,v5Compat:!0}));let s=i.current,[u,l]=e.useState({action:s.action,location:s.location}),{v7_startTransition:c}=r||{},f=e.useCallback((e=>{c&&j?j((()=>l(e))):l(e)}),[l,c]);return e.useLayoutEffect((()=>s.listen(f)),[s,f]),e.createElement(a,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:s})}function $({basename:t,children:n,future:r,history:o}){let[i,s]=e.useState({action:o.action,location:o.location}),{v7_startTransition:u}=r||{},l=e.useCallback((e=>{u&&j?j((()=>s(e))):s(e)}),[s,u]);return e.useLayoutEffect((()=>o.listen(l)),[o,l]),e.createElement(a,{basename:t,children:n,location:i.location,navigationType:i.action,navigator:o})}const W="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,Y=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,J=e.forwardRef((function({onClick:t,relative:n,reloadDocument:r,replace:a,state:o,target:u,to:l,preventScrollReset:c,unstable_viewTransition:f,...m},d){let h,{basename:p}=e.useContext(i),w=!1;if("string"==typeof l&&Y.test(l)&&(h=l,W))try{let e=new URL(window.location.href),t=l.startsWith("//")?new URL(e.protocol+l):new URL(l),n=v(t.pathname,p);t.origin===e.origin&&null!=n?l=n+t.search+t.hash:w=!0}catch(y){}let g=s(l,{relative:n}),b=re(l,{replace:a,state:o,target:u,preventScrollReset:c,relative:n,unstable_viewTransition:f});return e.createElement("a",Object.assign({},m,{href:h||g,onClick:w||r?t:function(e){t&&t(e),e.defaultPrevented||b(e)},ref:d,target:u}))})),q=e.forwardRef((function({"aria-current":t="page",caseSensitive:n=!1,className:a="",end:o=!1,style:s,to:c,unstable_viewTransition:f,children:m,...d},h){let p=u(c,{relative:d.relative}),w=l(),v=e.useContext(r),{navigator:g}=e.useContext(i),b=null!=v&&pe(p)&&!0===f,y=g.encodeLocation?g.encodeLocation(p).pathname:p.pathname,R=w.pathname,E=v&&v.navigation&&v.navigation.location?v.navigation.location.pathname:null;n||(R=R.toLowerCase(),E=E?E.toLowerCase():null,y=y.toLowerCase());let S,T=R===y||!o&&R.startsWith(y)&&"/"===R.charAt(y.length),C=null!=E&&(E===y||!o&&E.startsWith(y)&&"/"===E.charAt(y.length)),L={isActive:T,isPending:C,isTransitioning:b},x=T?t:void 0;S="function"==typeof a?a(L):[a,T?"active":null,C?"pending":null,b?"transitioning":null].filter(Boolean).join(" ");let _="function"==typeof s?s(L):s;return e.createElement(J,Object.assign({},d,{"aria-current":x,className:S,ref:h,style:_,to:c,unstable_viewTransition:f}),"function"==typeof m?m(L):m)})),G=e.forwardRef(((t,n)=>{let r=se();return e.createElement(Q,Object.assign({},t,{submit:r,ref:n}))})),Q=e.forwardRef((({fetcherKey:t,navigate:n,reloadDocument:r,replace:a,state:o,method:i="get",action:s,onSubmit:u,submit:l,relative:c,preventScrollReset:f,unstable_viewTransition:m,...d},h)=>{let p="get"===i.toLowerCase()?"get":"post",w=ue(s,{relative:c});return e.createElement("form",Object.assign({ref:h,method:p,action:w,onSubmit:r?u:e=>{if(u&&u(e),e.defaultPrevented)return;e.preventDefault();let r=e.nativeEvent.submitter,s=r?.getAttribute("formmethod")||i;l(r||e.currentTarget,{fetcherKey:t,method:s,navigate:n,replace:a,state:o,relative:c,preventScrollReset:f,unstable_viewTransition:m})}},d))}));function X({getKey:e,storageKey:t}){return me({getKey:e,storageKey:t}),null}var Z=function(e){return e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState",e}(Z||{}),ee=function(e){return e.UseFetcher="useFetcher",e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration",e}(ee||{});function te(t){let r=e.useContext(n);return r||E(!1),r}function ne(t){let n=e.useContext(r);return n||E(!1),n}function re(t,{target:n,replace:r,state:a,preventScrollReset:o,relative:i,unstable_viewTransition:s}={}){let m=c(),d=l(),h=u(t,{relative:i});return e.useCallback((e=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(e,n)){e.preventDefault();let n=void 0!==r?r:f(d)===f(h);m(t,{replace:n,state:a,preventScrollReset:o,relative:i,unstable_viewTransition:s})}}),[d,m,h,r,a,n,t,o,i,s])}function ae(t){let n=e.useRef(_(t)),r=e.useRef(!1),a=l(),o=e.useMemo((()=>function(e,t){let n=_(e);return t&&t.forEach(((e,r)=>{n.has(r)||t.getAll(r).forEach((e=>{n.append(r,e)}))})),n}(a.search,r.current?null:n.current)),[a.search]),i=c(),s=e.useCallback(((e,t)=>{const n=_("function"==typeof e?e(o):e);r.current=!0,i("?"+n,t)}),[i,o]);return[o,s]}let oe=0,ie=()=>`__${String(++oe)}__`;function se(){let{router:t}=te(Z.UseSubmit),{basename:n}=e.useContext(i),r=m();return e.useCallback(((e,a={})=>{!function(){if("undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}();let{action:o,method:i,encType:s,formData:u,body:l}=F(e,n);if(!1===a.navigate){let e=a.fetcherKey||ie();t.fetch(e,r,a.action||o,{preventScrollReset:a.preventScrollReset,formData:u,body:l,formMethod:a.method||i,formEncType:a.encType||s})}else t.navigate(a.action||o,{preventScrollReset:a.preventScrollReset,formData:u,body:l,formMethod:a.method||i,formEncType:a.encType||s,replace:a.replace,state:a.state,fromRouteId:r,unstable_viewTransition:a.unstable_viewTransition})}),[t,n,r])}function ue(t,{relative:n}={}){let{basename:r}=e.useContext(i),a=e.useContext(d);a||E(!1);let o=l(),[s]=a.matches.slice(-1),c={...u(null!=t?t:o.pathname,{relative:n})};if(null==t&&(c.search=o.search,s.route.index)){let e=new URLSearchParams(c.search);e.delete("index"),c.search=e.toString()?`?${e.toString()}`:""}return t&&"."!==t||!s.route.index||(c.search=c.search?c.search.replace(/^\?/,"?index&"):"?index"),"/"!==r&&(c.pathname="/"===c.pathname?r:S([r,c.pathname])),f(c)}function le({key:t}={}){let{router:n}=te(Z.UseFetcher),r=ne(ee.UseFetcher),a=e.useContext(O),o=e.useContext(d),i=o.matches[o.matches.length-1]?.route.id,[s,u]=e.useState(t||"");s||u(ie()),a||E(!1),o||E(!1),null==i&&E(!1);let{data:l,register:c,unregister:f}=a;e.useEffect((()=>(c(s),()=>f(s))),[s,c,f]);let m=e.useCallback((e=>{i||E(!1),n.fetch(s,i,e)}),[s,i,n]),h=se(),p=e.useCallback(((e,t)=>{h(e,{...t,navigate:!1,fetcherKey:s})}),[s,h]),w=e.useMemo((()=>e.forwardRef(((t,n)=>e.createElement(Q,Object.assign({},t,{navigate:!1,fetcherKey:s,ref:n,submit:p}))))),[s,p]);return e.useMemo((()=>{let e=s&&r.fetchers.get(s)||T;return{Form:w,submit:p,load:m,...e,data:l.get(s)}}),[w,l,s,m,r.fetchers,p])}function ce(){return[...ne(ee.UseFetchers).fetchers.values()]}let fe={};function me({getKey:t,storageKey:n}={}){let{router:r}=te(Z.UseScrollRestoration),{restoreScrollPosition:a,preventScrollReset:o}=ne(ee.UseScrollRestoration),{basename:s}=e.useContext(i),u=l(),c=h(),f=p();e.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(t,n){let{capture:r}=n||{};e.useEffect((()=>{let e=null!=r?{capture:r}:void 0;return window.addEventListener("pagehide",t,e),()=>{window.removeEventListener("pagehide",t,e)}}),[t,r])}(e.useCallback((()=>{if("idle"===f.state){let e=(t?t(u,c):null)||u.key;fe[e]=window.scrollY}try{sessionStorage.setItem(n||"react-router-scroll-positions",JSON.stringify(fe))}catch(e){}window.history.scrollRestoration="auto"}),[n,t,f.state,u,c])),"undefined"!=typeof document&&(e.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(n||"react-router-scroll-positions");e&&(fe=JSON.parse(e))}catch(e){}}),[n]),e.useLayoutEffect((()=>{let e=t&&"/"!==s?(e,n)=>t({...e,pathname:v(e.pathname,s)||e.pathname},n):t,n=r?.enableScrollRestoration(fe,(()=>window.scrollY),e);return()=>n&&n()}),[r,s,t]),e.useLayoutEffect((()=>{if(!1!==a)if("number"!=typeof a){if(u.hash){let e=document.getElementById(decodeURIComponent(u.hash.slice(1)));if(e)return void e.scrollIntoView()}!0!==o&&window.scrollTo(0,0)}else window.scrollTo(0,a)}),[u,a,o]))}function de(t,n){let{capture:r}=n||{};e.useEffect((()=>{let e=null!=r?{capture:r}:void 0;return window.addEventListener("beforeunload",t,e),()=>{window.removeEventListener("beforeunload",t,e)}}),[t,r])}function he({when:t,message:n}){let r=w(t);e.useEffect((()=>{if("blocked"===r.state){window.confirm(n)?setTimeout(r.proceed,0):r.reset()}}),[r,n]),e.useEffect((()=>{"blocked"!==r.state||t||r.reset()}),[r,t])}function pe(t,n={}){let r=e.useContext(M);null==r&&E(!1);let{basename:a}=te(Z.useViewTransitionState),o=u(t,{relative:n.relative});if(!r.isTransitioning)return!1;let i=v(r.currentLocation.pathname,a)||r.currentLocation.pathname,s=v(r.nextLocation.pathname,a)||r.nextLocation.pathname;return null!=C(o.pathname,s)||null!=C(o.pathname,i)}export{B as BrowserRouter,G as Form,H as HashRouter,J as Link,q as NavLink,I as RouterProvider,X as ScrollRestoration,O as UNSAFE_FetchersContext,M as UNSAFE_ViewTransitionContext,me as UNSAFE_useScrollRestoration,D as createBrowserRouter,N as createHashRouter,_ as createSearchParams,$ as unstable_HistoryRouter,he as unstable_usePrompt,pe as unstable_useViewTransitionState,de as useBeforeUnload,le as useFetcher,ce as useFetchers,ue as useFormAction,re as useLinkClickHandler,ae as useSearchParams,se as useSubmit};
//# sourceMappingURL=react-router-dom.production.min.js.map

8

dist/server.d.ts

@@ -10,6 +10,6 @@ import * as React from "react";

/**
* A <Router> that may not navigate to any other location. This is useful
* A `<Router>` that may not navigate to any other location. This is useful
* on the server where there is no stateful UI.
*/
export declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): JSX.Element;
export declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): React.JSX.Element;
export { StaticHandlerContext };

@@ -26,5 +26,5 @@ export interface StaticRouterProviderProps {

*/
export declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): JSX.Element;
declare type CreateStaticHandlerOptions = Omit<RouterCreateStaticHandlerOptions, "detectErrorBoundary" | "mapRouteProperties">;
export declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): React.JSX.Element;
type CreateStaticHandlerOptions = Omit<RouterCreateStaticHandlerOptions, "detectErrorBoundary" | "mapRouteProperties">;
export declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): import("@remix-run/router").StaticHandler;
export declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext): RemixRouter;

93

dist/server.js

@@ -31,6 +31,5 @@ 'use strict';

/**
* A <Router> that may not navigate to any other location. This is useful
* A `<Router>` that may not navigate to any other location. This is useful
* on the server where there is no stateful UI.
*/
function StaticRouter({

@@ -44,3 +43,2 @@ basename,

}
let action = router.Action.Pop;

@@ -68,3 +66,2 @@ let location = {

*/
function StaticRouterProvider({

@@ -85,3 +82,2 @@ context,

let hydrateScript = "";
if (hydrate !== false) {

@@ -92,11 +88,10 @@ let data = {

errors: serializeErrors(context.errors)
}; // Use JSON.parse here instead of embedding a raw JS object here to speed
};
// Use JSON.parse here instead of embedding a raw JS object here to speed
// up parsing on the client. Dual-stringify is needed to ensure all quotes
// are properly escaped in the resulting string. See:
// https://v8.dev/blog/cost-of-javascript-2019#json
let json = htmlEscape(JSON.stringify(JSON.stringify(data)));
hydrateScript = `window.__staticRouterHydrationData = JSON.parse(${json});`;
}
let {

@@ -109,2 +104,6 @@ state

value: state
}, /*#__PURE__*/React__namespace.createElement(reactRouterDom.UNSAFE_ViewTransitionContext.Provider, {
value: {
isTransitioning: false
}
}, /*#__PURE__*/React__namespace.createElement(reactRouterDom.Router, {

@@ -119,3 +118,3 @@ basename: dataRouterContext.basename,

state: state
})))), hydrateScript ? /*#__PURE__*/React__namespace.createElement("script", {
}))))), hydrateScript ? /*#__PURE__*/React__namespace.createElement("script", {
suppressHydrationWarning: true,

@@ -128,3 +127,2 @@ nonce: nonce,

}
function DataRoutes({

@@ -136,3 +134,2 @@ routes,

}
function serializeErrors(errors) {

@@ -142,3 +139,2 @@ if (!errors) return null;

let serialized = {};
for (let [key, val] of entries) {

@@ -148,3 +144,4 @@ // Hey you! If you change this, please change the corresponding logic in

if (router.isRouteErrorResponse(val)) {
serialized[key] = { ...val,
serialized[key] = {
...val,
__type: "RouteErrorResponse"

@@ -156,3 +153,8 @@ };

message: val.message,
__type: "Error"
__type: "Error",
// If this is a subclass (i.e., ReferenceError), send up the type so we
// can re-create the same type during hydration.
...(val.name !== "Error" ? {
__subType: val.name
} : {})
};

@@ -163,6 +165,4 @@ } else {

}
return serialized;
}
function getStatelessNavigator() {

@@ -172,28 +172,22 @@ return {

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.`);
}
};
}
function createStaticHandler(routes, opts) {
return router.createStaticHandler(routes, { ...opts,
return router.createStaticHandler(routes, {
...opts,
mapRouteProperties: reactRouter.UNSAFE_mapRouteProperties

@@ -204,15 +198,14 @@ });

let manifest = {};
let dataRoutes = router.UNSAFE_convertRoutesToDataRoutes(routes, reactRouter.UNSAFE_mapRouteProperties, undefined, manifest); // Because our context matches may be from a framework-agnostic set of
let dataRoutes = router.UNSAFE_convertRoutesToDataRoutes(routes, reactRouter.UNSAFE_mapRouteProperties, undefined, manifest);
// Because our context matches may be from a framework-agnostic set of
// routes passed to createStaticHandler(), we update them here with our
// newly created/enhanced data routes
let matches = context.matches.map(match => {
let route = manifest[match.route.id] || match.route;
return { ...match,
return {
...match,
route
};
});
let msg = method => `You cannot use router.${method}() on the server because it is a stateless environment`;
return {

@@ -222,3 +215,2 @@ get basename() {

},
get state() {

@@ -241,80 +233,62 @@ return {

},
get routes() {
return dataRoutes;
},
get window() {
return undefined;
},
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 router.IDLE_FETCHER;
},
deleteFetcher() {
throw msg("deleteFetcher");
},
dispose() {
throw msg("dispose");
},
getBlocker() {
return router.IDLE_BLOCKER;
},
deleteBlocker() {
throw msg("deleteBlocker");
},
_internalFetchControllers: new Map(),
_internalActiveDeferreds: new Map(),
_internalSetRoutes() {
throw msg("_internalSetRoutes");
}
};
}
function createHref(to) {
return typeof to === "string" ? to : reactRouterDom.createPath(to);
}
function encodeLocation(to) {
// Locations should already be encoded on the server, so just return as-is
let path = typeof to === "string" ? reactRouterDom.parsePath(to) : to;
let href = typeof to === "string" ? to : reactRouterDom.createPath(to);
let encoded = ABSOLUTE_URL_REGEX.test(href) ? new URL(href) : new URL(href, "http://localhost");
return {
pathname: path.pathname || "",
search: path.search || "",
hash: path.hash || ""
pathname: encoded.pathname,
search: encoded.search,
hash: encoded.hash
};
} // This utility is based on https://github.com/zertosh/htmlescape
}
const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
// This utility is based on https://github.com/zertosh/htmlescape
// License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
const ESCAPE_LOOKUP = {

@@ -328,3 +302,2 @@ "&": "\\u0026",

const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
function htmlEscape(str) {

@@ -331,0 +304,0 @@ return str.replace(ESCAPE_REGEX, match => ESCAPE_LOOKUP[match]);

4

dist/umd/react-router-dom.production.min.js
/**
* React Router DOM v0.0.0-experimental-dc8656c8
* React Router DOM v0.0.0-experimental-e0f088aa
*

@@ -11,3 +11,3 @@ * Copyright (c) Remix Software Inc.

*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-router"),require("@remix-run/router")):"function"==typeof define&&define.amd?define(["exports","react","react-router","@remix-run/router"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactRouterDOM={},e.React,e.ReactRouter,e.RemixRouter)}(this,(function(e,t,r,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=o(t);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function i(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}const c="get",s="application/x-www-form-urlencoded";function l(e){return null!=e&&"string"==typeof e.tagName}function f(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,r)=>{let n=e[r];return t.concat(Array.isArray(n)?n.map((e=>[r,e])):[[r,n]])}),[]))}function d(e,t,r){let o,a,u,i=null;if(l(f=e)&&"form"===f.tagName.toLowerCase()){let l=t.submissionTrigger;if(t.action)i=t.action;else{let t=e.getAttribute("action");i=t?n.stripBasename(t,r):null}o=t.method||e.getAttribute("method")||c,a=t.encType||e.getAttribute("enctype")||s,u=new FormData(e),l&&l.name&&u.append(l.name,l.value)}else if(function(e){return l(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return l(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let l=e.form;if(null==l)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');if(t.action)i=t.action;else{let t=e.getAttribute("formaction")||l.getAttribute("action");i=t?n.stripBasename(t,r):null}o=t.method||e.getAttribute("formmethod")||l.getAttribute("method")||c,a=t.encType||e.getAttribute("formenctype")||l.getAttribute("enctype")||s,u=new FormData(l),e.name&&u.append(e.name,e.value)}else{if(l(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');if(o=t.method||c,i=t.action||null,a=t.encType||s,e instanceof FormData)u=e;else if(u=new FormData,e instanceof URLSearchParams)for(let[t,r]of e)u.append(t,r);else if(null!=e)for(let t of Object.keys(e))u.append(t,e[t])}var f;return{action:i,method:o.toLowerCase(),encType:a,formData:u}}const m=["onClick","relative","reloadDocument","replace","state","target","to","preventScrollReset"],p=["aria-current","caseSensitive","className","end","style","to","children"],b=["reloadDocument","replace","method","action","onSubmit","fetcherKey","routeId","relative","preventScrollReset"];function g(){var e;let t=null==(e=window)?void 0:e.__staticRouterHydrationData;return t&&t.errors&&(t=u({},t,{errors:h(t.errors)})),t}function h(e){if(!e)return null;let t=Object.entries(e),r={};for(let[e,o]of t)if(o&&"RouteErrorResponse"===o.__type)r[e]=new n.ErrorResponse(o.status,o.statusText,o.data,!0===o.internal);else if(o&&"Error"===o.__type){let t=new Error(o.message);t.stack="",r[e]=t}else r[e]=o;return r}const y="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,v=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,R=a.forwardRef((function(e,t){let o,{onClick:c,relative:s,reloadDocument:l,replace:f,state:d,target:p,to:b,preventScrollReset:g}=e,h=i(e,m),{basename:R}=a.useContext(r.UNSAFE_NavigationContext),w=!1;if("string"==typeof b&&v.test(b)&&(o=b,y))try{let e=new URL(window.location.href),t=b.startsWith("//")?new URL(e.protocol+b):new URL(b),r=n.stripBasename(t.pathname,R);t.origin===e.origin&&null!=r?b=r+t.search+t.hash:w=!0}catch(e){}let P=r.useHref(b,{relative:s}),S=N(b,{replace:f,state:d,target:p,preventScrollReset:g,relative:s});return a.createElement("a",u({},h,{href:o||P,onClick:w||l?c:function(e){c&&c(e),e.defaultPrevented||S(e)},ref:t,target:p}))})),w=a.forwardRef((function(e,t){let{"aria-current":n="page",caseSensitive:o=!1,className:c="",end:s=!1,style:l,to:f,children:d}=e,m=i(e,p),b=r.useResolvedPath(f,{relative:m.relative}),g=r.useLocation(),h=a.useContext(r.UNSAFE_DataRouterStateContext),{navigator:y}=a.useContext(r.UNSAFE_NavigationContext),v=y.encodeLocation?y.encodeLocation(b).pathname:b.pathname,w=g.pathname,P=h&&h.navigation&&h.navigation.location?h.navigation.location.pathname:null;o||(w=w.toLowerCase(),P=P?P.toLowerCase():null,v=v.toLowerCase());let S,E=w===v||!s&&w.startsWith(v)&&"/"===w.charAt(v.length),O=null!=P&&(P===v||!s&&P.startsWith(v)&&"/"===P.charAt(v.length)),j=E?n:void 0;S="function"==typeof c?c({isActive:E,isPending:O}):[c,E?"active":null,O?"pending":null].filter(Boolean).join(" ");let A="function"==typeof l?l({isActive:E,isPending:O}):l;return a.createElement(R,u({},m,{"aria-current":j,className:S,ref:t,style:A,to:f}),"function"==typeof d?d({isActive:E,isPending:O}):d)})),P=a.forwardRef(((e,t)=>a.createElement(S,u({},e,{ref:t})))),S=a.forwardRef(((e,t)=>{let{reloadDocument:r,replace:n,method:o=c,action:s,onSubmit:l,fetcherKey:f,routeId:d,relative:m,preventScrollReset:p}=e,g=i(e,b),h=F(f,d),y="get"===o.toLowerCase()?"get":"post",v=C(s,{relative:m});return a.createElement("form",u({ref:t,method:y,action:v,onSubmit:r?l:e=>{if(l&&l(e),e.defaultPrevented)return;e.preventDefault();let t=e.nativeEvent.submitter,r=(null==t?void 0:t.getAttribute("formmethod"))||o;h(t||e.currentTarget,{method:r,replace:n,relative:m,preventScrollReset:p})}},g))}));var E,O;function j(e){let t=a.useContext(r.UNSAFE_DataRouterContext);return t||n.UNSAFE_invariant(!1),t}function A(e){let t=a.useContext(r.UNSAFE_DataRouterStateContext);return t||n.UNSAFE_invariant(!1),t}function N(e,t){let{target:n,replace:o,state:u,preventScrollReset:i,relative:c}=void 0===t?{}:t,s=r.useNavigate(),l=r.useLocation(),f=r.useResolvedPath(e,{relative:c});return a.useCallback((t=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(t,n)){t.preventDefault();let n=void 0!==o?o:r.createPath(l)===r.createPath(f);s(e,{replace:n,state:u,preventScrollReset:i,relative:c})}}),[l,s,f,o,u,n,e,i,c])}function F(e,t){let{router:o}=j(E.UseSubmitImpl),{basename:i}=a.useContext(r.UNSAFE_NavigationContext),c=r.UNSAFE_useRouteId();return a.useCallback((function(r,a){if(void 0===a&&(a={}),"undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.");let{action:s,method:l,encType:f,formData:m}=d(r,a,i),p={preventScrollReset:a.preventScrollReset,formData:m,formMethod:l,formEncType:f};e?(null==t&&n.UNSAFE_invariant(!1),o.fetch(e,t,s,p)):o.navigate(s,u({},p,{replace:a.replace,fromRouteId:c}))}),[o,i,e,t,c])}function C(e,t){let{relative:o}=void 0===t?{}:t,{basename:i}=a.useContext(r.UNSAFE_NavigationContext),c=a.useContext(r.UNSAFE_RouteContext);c||n.UNSAFE_invariant(!1);let[s]=c.matches.slice(-1),l=u({},r.useResolvedPath(e||".",{relative:o})),f=r.useLocation();if(null==e&&(l.search=f.search,l.hash=f.hash,s.route.index)){let e=new URLSearchParams(l.search);e.delete("index"),l.search=e.toString()?"?"+e.toString():""}return e&&"."!==e||!s.route.index||(l.search=l.search?l.search.replace(/^\?/,"?index&"):"?index"),"/"!==i&&(l.pathname="/"===l.pathname?i:n.joinPaths([i,l.pathname])),r.createPath(l)}!function(e){e.UseScrollRestoration="useScrollRestoration",e.UseSubmitImpl="useSubmitImpl",e.UseFetcher="useFetcher"}(E||(E={})),function(e){e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration"}(O||(O={}));let U=0;const _="react-router-scroll-positions";let x={};function L(e){let{getKey:t,storageKey:n}=void 0===e?{}:e,{router:o}=j(E.UseScrollRestoration),{restoreScrollPosition:u,preventScrollReset:i}=A(O.UseScrollRestoration),c=r.useLocation(),s=r.useMatches(),l=r.useNavigation();a.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(e,t){let{capture:r}=t||{};a.useEffect((()=>{let t=null!=r?{capture:r}:void 0;return window.addEventListener("pagehide",e,t),()=>{window.removeEventListener("pagehide",e,t)}}),[e,r])}(a.useCallback((()=>{if("idle"===l.state){let e=(t?t(c,s):null)||c.key;x[e]=window.scrollY}sessionStorage.setItem(n||_,JSON.stringify(x)),window.history.scrollRestoration="auto"}),[n,t,l.state,c,s])),"undefined"!=typeof document&&(a.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(n||_);e&&(x=JSON.parse(e))}catch(e){}}),[n]),a.useLayoutEffect((()=>{let e=null==o?void 0:o.enableScrollRestoration(x,(()=>window.scrollY),t);return()=>e&&e()}),[o,t]),a.useLayoutEffect((()=>{if(!1!==u)if("number"!=typeof u){if(c.hash){let e=document.getElementById(c.hash.slice(1));if(e)return void e.scrollIntoView()}!0!==i&&window.scrollTo(0,0)}else window.scrollTo(0,u)}),[c,u,i]))}Object.defineProperty(e,"AbortedDeferredError",{enumerable:!0,get:function(){return r.AbortedDeferredError}}),Object.defineProperty(e,"Await",{enumerable:!0,get:function(){return r.Await}}),Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return r.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return r.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return r.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return r.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return r.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return r.Router}}),Object.defineProperty(e,"RouterProvider",{enumerable:!0,get:function(){return r.RouterProvider}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return r.Routes}}),Object.defineProperty(e,"UNSAFE_DataRouterContext",{enumerable:!0,get:function(){return r.UNSAFE_DataRouterContext}}),Object.defineProperty(e,"UNSAFE_DataRouterStateContext",{enumerable:!0,get:function(){return r.UNSAFE_DataRouterStateContext}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return r.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return r.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return r.UNSAFE_RouteContext}}),Object.defineProperty(e,"UNSAFE_useRouteId",{enumerable:!0,get:function(){return r.UNSAFE_useRouteId}}),Object.defineProperty(e,"createMemoryRouter",{enumerable:!0,get:function(){return r.createMemoryRouter}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return r.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return r.createRoutesFromChildren}}),Object.defineProperty(e,"createRoutesFromElements",{enumerable:!0,get:function(){return r.createRoutesFromElements}}),Object.defineProperty(e,"defer",{enumerable:!0,get:function(){return r.defer}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return r.generatePath}}),Object.defineProperty(e,"isRouteErrorResponse",{enumerable:!0,get:function(){return r.isRouteErrorResponse}}),Object.defineProperty(e,"json",{enumerable:!0,get:function(){return r.json}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return r.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return r.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return r.parsePath}}),Object.defineProperty(e,"redirect",{enumerable:!0,get:function(){return r.redirect}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return r.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return r.resolvePath}}),Object.defineProperty(e,"unstable_useBlocker",{enumerable:!0,get:function(){return r.unstable_useBlocker}}),Object.defineProperty(e,"useActionData",{enumerable:!0,get:function(){return r.useActionData}}),Object.defineProperty(e,"useAsyncError",{enumerable:!0,get:function(){return r.useAsyncError}}),Object.defineProperty(e,"useAsyncValue",{enumerable:!0,get:function(){return r.useAsyncValue}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return r.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return r.useInRouterContext}}),Object.defineProperty(e,"useLoaderData",{enumerable:!0,get:function(){return r.useLoaderData}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return r.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return r.useMatch}}),Object.defineProperty(e,"useMatches",{enumerable:!0,get:function(){return r.useMatches}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return r.useNavigate}}),Object.defineProperty(e,"useNavigation",{enumerable:!0,get:function(){return r.useNavigation}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return r.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return r.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return r.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return r.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return r.useResolvedPath}}),Object.defineProperty(e,"useRevalidator",{enumerable:!0,get:function(){return r.useRevalidator}}),Object.defineProperty(e,"useRouteError",{enumerable:!0,get:function(){return r.useRouteError}}),Object.defineProperty(e,"useRouteLoaderData",{enumerable:!0,get:function(){return r.useRouteLoaderData}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return r.useRoutes}}),e.BrowserRouter=function(e){let{basename:t,children:o,window:u}=e,i=a.useRef();null==i.current&&(i.current=n.createBrowserHistory({window:u,v5Compat:!0}));let c=i.current,[s,l]=a.useState({action:c.action,location:c.location});return a.useLayoutEffect((()=>c.listen(l)),[c]),a.createElement(r.Router,{basename:t,children:o,location:s.location,navigationType:s.action,navigator:c})},e.Form=P,e.HashRouter=function(e){let{basename:t,children:o,window:u}=e,i=a.useRef();null==i.current&&(i.current=n.createHashHistory({window:u,v5Compat:!0}));let c=i.current,[s,l]=a.useState({action:c.action,location:c.location});return a.useLayoutEffect((()=>c.listen(l)),[c]),a.createElement(r.Router,{basename:t,children:o,location:s.location,navigationType:s.action,navigator:c})},e.Link=R,e.NavLink=w,e.ScrollRestoration=function(e){let{getKey:t,storageKey:r}=e;return L({getKey:t,storageKey:r}),null},e.UNSAFE_useScrollRestoration=L,e.createBrowserRouter=function(e,t){return n.createRouter({basename:null==t?void 0:t.basename,future:u({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:n.createBrowserHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||g(),routes:e,mapRouteProperties:r.UNSAFE_mapRouteProperties}).initialize()},e.createHashRouter=function(e,t){return n.createRouter({basename:null==t?void 0:t.basename,future:u({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:n.createHashHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||g(),routes:e,mapRouteProperties:r.UNSAFE_mapRouteProperties}).initialize()},e.createSearchParams=f,e.unstable_HistoryRouter=function(e){let{basename:t,children:n,history:o}=e;const[u,i]=a.useState({action:o.action,location:o.location});return a.useLayoutEffect((()=>o.listen(i)),[o]),a.createElement(r.Router,{basename:t,children:n,location:u.location,navigationType:u.action,navigator:o})},e.unstable_usePrompt=function(e){let{when:t,message:n}=e,o=r.unstable_useBlocker(t);a.useEffect((()=>{"blocked"!==o.state||t||o.reset()}),[o,t]),a.useEffect((()=>{if("blocked"===o.state){window.confirm(n)?setTimeout(o.proceed,0):o.reset()}}),[o,n])},e.useBeforeUnload=function(e,t){let{capture:r}=t||{};a.useEffect((()=>{let t=null!=r?{capture:r}:void 0;return window.addEventListener("beforeunload",e,t),()=>{window.removeEventListener("beforeunload",e,t)}}),[e,r])},e.useFetcher=function(){var e;let{router:t}=j(E.UseFetcher),o=a.useContext(r.UNSAFE_RouteContext);o||n.UNSAFE_invariant(!1);let i=null==(e=o.matches[o.matches.length-1])?void 0:e.route.id;null==i&&n.UNSAFE_invariant(!1);let[c]=a.useState((()=>String(++U))),[s]=a.useState((()=>(i||n.UNSAFE_invariant(!1),function(e,t){return a.forwardRef(((r,n)=>a.createElement(S,u({},r,{ref:n,fetcherKey:e,routeId:t}))))}(c,i)))),[l]=a.useState((()=>e=>{t||n.UNSAFE_invariant(!1),i||n.UNSAFE_invariant(!1),t.fetch(c,i,e)})),f=F(c,i),d=t.getFetcher(c),m=a.useMemo((()=>u({Form:s,submit:f,load:l},d)),[d,s,f,l]);return a.useEffect((()=>()=>{t?t.deleteFetcher(c):console.warn("No router available to clean up from useFetcher()")}),[t,c]),m},e.useFetchers=function(){return[...A(O.UseFetchers).fetchers.values()]},e.useFormAction=C,e.useLinkClickHandler=N,e.useSearchParams=function(e){let t=a.useRef(f(e)),n=a.useRef(!1),o=r.useLocation(),u=a.useMemo((()=>function(e,t){let r=f(e);if(t)for(let e of t.keys())r.has(e)||t.getAll(e).forEach((t=>{r.append(e,t)}));return r}(o.search,n.current?null:t.current)),[o.search]),i=r.useNavigate(),c=a.useCallback(((e,t)=>{const r=f("function"==typeof e?e(u):e);n.current=!0,i("?"+r,t)}),[i,u]);return[u,c]},e.useSubmit=function(){return F()},Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-router"),require("@remix-run/router")):"function"==typeof define&&define.amd?define(["exports","react","react-router","@remix-run/router"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactRouterDOM={},e.React,e.ReactRouter,e.RemixRouter)}(this,(function(e,t,n,r){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=o(t);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}function u(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}const s="get",c="application/x-www-form-urlencoded";function l(e){return null!=e&&"string"==typeof e.tagName}function f(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,n)=>{let r=e[n];return t.concat(Array.isArray(r)?r.map((e=>[n,e])):[[n,r]])}),[]))}let d=null;const m=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function p(e){return null==e||m.has(e)?e:null}function b(e,t){let n,o,a,i,u;if(l(f=e)&&"form"===f.tagName.toLowerCase()){let u=e.getAttribute("action");o=u?r.stripBasename(u,t):null,n=e.getAttribute("method")||s,a=p(e.getAttribute("enctype"))||c,i=new FormData(e)}else if(function(e){return l(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return l(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let u=e.form;if(null==u)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let l=e.getAttribute("formaction")||u.getAttribute("action");if(o=l?r.stripBasename(l,t):null,n=e.getAttribute("formmethod")||u.getAttribute("method")||s,a=p(e.getAttribute("formenctype"))||p(u.getAttribute("enctype"))||c,i=new FormData(u,e),!function(){if(null===d)try{new FormData(document.createElement("form"),0),d=!1}catch(e){d=!0}return d}()){let{name:t,type:n,value:r}=e;if("image"===n){let e=t?t+".":"";i.append(e+"x","0"),i.append(e+"y","0")}else t&&i.append(t,r)}}else{if(l(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');n=s,o=null,a=c,u=e}var f;return i&&"text/plain"===a&&(u=i,i=void 0),{action:o,method:n.toLowerCase(),encType:a,formData:i,body:u}}const v=["onClick","relative","reloadDocument","replace","state","target","to","preventScrollReset","unstable_viewTransition"],h=["aria-current","caseSensitive","className","end","style","to","unstable_viewTransition","children"],g=["fetcherKey","navigate","reloadDocument","replace","state","method","action","onSubmit","submit","relative","preventScrollReset","unstable_viewTransition"];function y(){var e;let t=null==(e=window)?void 0:e.__staticRouterHydrationData;return t&&t.errors&&(t=i({},t,{errors:w(t.errors)})),t}function w(e){if(!e)return null;let t=Object.entries(e),n={};for(let[e,o]of t)if(o&&"RouteErrorResponse"===o.__type)n[e]=new r.UNSAFE_ErrorResponseImpl(o.status,o.statusText,o.data,!0===o.internal);else if(o&&"Error"===o.__type){if(o.__subType){let t=window[o.__subType];if("function"==typeof t)try{let r=new t(o.message);r.stack="",n[e]=r}catch(e){}}if(null==n[e]){let t=new Error(o.message);t.stack="",n[e]=t}}else n[e]=o;return n}const R=a.createContext({isTransitioning:!1}),S=a.createContext(null),E=a.startTransition;class P{constructor(){this.status="pending",this.promise=new Promise(((e,t)=>{this.resolve=t=>{"pending"===this.status&&(this.status="resolved",e(t))},this.reject=e=>{"pending"===this.status&&(this.status="rejected",t(e))}}))}}function _(e){let{routes:t,state:r}=e;return n.UNSAFE_useRoutesImpl(t,void 0,r)}const O="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,C=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,j=a.forwardRef((function(e,t){let o,{onClick:s,relative:c,reloadDocument:l,replace:f,state:d,target:m,to:p,preventScrollReset:b,unstable_viewTransition:h}=e,g=u(e,v),{basename:y}=a.useContext(n.UNSAFE_NavigationContext),w=!1;if("string"==typeof p&&C.test(p)&&(o=p,O))try{let e=new URL(window.location.href),t=p.startsWith("//")?new URL(e.protocol+p):new URL(p),n=r.stripBasename(t.pathname,y);t.origin===e.origin&&null!=n?p=n+t.search+t.hash:w=!0}catch(e){}let R=n.useHref(p,{relative:c}),S=D(p,{replace:f,state:d,target:m,preventScrollReset:b,relative:c,unstable_viewTransition:h});return a.createElement("a",i({},g,{href:o||R,onClick:w||l?s:function(e){s&&s(e),e.defaultPrevented||S(e)},ref:t,target:m}))})),A=a.forwardRef((function(e,t){let{"aria-current":r="page",caseSensitive:o=!1,className:s="",end:c=!1,style:l,to:f,unstable_viewTransition:d,children:m}=e,p=u(e,h),b=n.useResolvedPath(f,{relative:p.relative}),v=n.useLocation(),g=a.useContext(n.UNSAFE_DataRouterStateContext),{navigator:y}=a.useContext(n.UNSAFE_NavigationContext),w=null!=g&&z(b)&&!0===d,R=y.encodeLocation?y.encodeLocation(b).pathname:b.pathname,S=v.pathname,E=g&&g.navigation&&g.navigation.location?g.navigation.location.pathname:null;o||(S=S.toLowerCase(),E=E?E.toLowerCase():null,R=R.toLowerCase());let P,_=S===R||!c&&S.startsWith(R)&&"/"===S.charAt(R.length),O=null!=E&&(E===R||!c&&E.startsWith(R)&&"/"===E.charAt(R.length)),C={isActive:_,isPending:O,isTransitioning:w},A=_?r:void 0;P="function"==typeof s?s(C):[s,_?"active":null,O?"pending":null,w?"transitioning":null].filter(Boolean).join(" ");let N="function"==typeof l?l(C):l;return a.createElement(j,i({},p,{"aria-current":A,className:P,ref:t,style:N,to:f,unstable_viewTransition:d}),"function"==typeof m?m(C):m)})),N=a.forwardRef(((e,t)=>{let n=B();return a.createElement(x,i({},e,{submit:n,ref:t}))})),x=a.forwardRef(((e,t)=>{let{fetcherKey:n,navigate:r,reloadDocument:o,replace:c,state:l,method:f=s,action:d,onSubmit:m,submit:p,relative:b,preventScrollReset:v,unstable_viewTransition:h}=e,y=u(e,g),w="get"===f.toLowerCase()?"get":"post",R=H(d,{relative:b});return a.createElement("form",i({ref:t,method:w,action:R,onSubmit:o?m:e=>{if(m&&m(e),e.defaultPrevented)return;e.preventDefault();let t=e.nativeEvent.submitter,o=(null==t?void 0:t.getAttribute("formmethod"))||f;p(t||e.currentTarget,{fetcherKey:n,method:o,navigate:r,replace:c,state:l,relative:b,preventScrollReset:v,unstable_viewTransition:h})}},y))}));var F=function(e){return e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState",e}(F||{}),T=function(e){return e.UseFetcher="useFetcher",e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration",e}(T||{});function L(e){let t=a.useContext(n.UNSAFE_DataRouterContext);return t||r.UNSAFE_invariant(!1),t}function U(e){let t=a.useContext(n.UNSAFE_DataRouterStateContext);return t||r.UNSAFE_invariant(!1),t}function D(e,t){let{target:r,replace:o,state:i,preventScrollReset:u,relative:s,unstable_viewTransition:c}=void 0===t?{}:t,l=n.useNavigate(),f=n.useLocation(),d=n.useResolvedPath(e,{relative:s});return a.useCallback((t=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(t,r)){t.preventDefault();let r=void 0!==o?o:n.createPath(f)===n.createPath(d);l(e,{replace:r,state:i,preventScrollReset:u,relative:s,unstable_viewTransition:c})}}),[f,l,d,o,i,r,e,u,s,c])}let k=0,M=()=>"__"+String(++k)+"__";function B(){let{router:e}=L(F.UseSubmit),{basename:t}=a.useContext(n.UNSAFE_NavigationContext),r=n.UNSAFE_useRouteId();return a.useCallback((function(n,o){void 0===o&&(o={}),function(){if("undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}();let{action:a,method:i,encType:u,formData:s,body:c}=b(n,t);if(!1===o.navigate){let t=o.fetcherKey||M();e.fetch(t,r,o.action||a,{preventScrollReset:o.preventScrollReset,formData:s,body:c,formMethod:o.method||i,formEncType:o.encType||u})}else e.navigate(o.action||a,{preventScrollReset:o.preventScrollReset,formData:s,body:c,formMethod:o.method||i,formEncType:o.encType||u,replace:o.replace,state:o.state,fromRouteId:r,unstable_viewTransition:o.unstable_viewTransition})}),[e,t,r])}function H(e,t){let{relative:o}=void 0===t?{}:t,{basename:u}=a.useContext(n.UNSAFE_NavigationContext),s=a.useContext(n.UNSAFE_RouteContext);s||r.UNSAFE_invariant(!1);let c=n.useLocation(),[l]=s.matches.slice(-1),f=i({},n.useResolvedPath(null!=e?e:c.pathname,{relative:o}));if(null==e&&(f.search=c.search,l.route.index)){let e=new URLSearchParams(f.search);e.delete("index"),f.search=e.toString()?"?"+e.toString():""}return e&&"."!==e||!l.route.index||(f.search=f.search?f.search.replace(/^\?/,"?index&"):"?index"),"/"!==u&&(f.pathname="/"===f.pathname?u:r.joinPaths([u,f.pathname])),n.createPath(f)}const K="react-router-scroll-positions";let I={};function V(e){let{getKey:t,storageKey:o}=void 0===e?{}:e,{router:u}=L(F.UseScrollRestoration),{restoreScrollPosition:s,preventScrollReset:c}=U(T.UseScrollRestoration),{basename:l}=a.useContext(n.UNSAFE_NavigationContext),f=n.useLocation(),d=n.useMatches(),m=n.useNavigation();a.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(e,t){let{capture:n}=t||{};a.useEffect((()=>{let t=null!=n?{capture:n}:void 0;return window.addEventListener("pagehide",e,t),()=>{window.removeEventListener("pagehide",e,t)}}),[e,n])}(a.useCallback((()=>{if("idle"===m.state){let e=(t?t(f,d):null)||f.key;I[e]=window.scrollY}try{sessionStorage.setItem(o||K,JSON.stringify(I))}catch(e){}window.history.scrollRestoration="auto"}),[o,t,m.state,f,d])),"undefined"!=typeof document&&(a.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(o||K);e&&(I=JSON.parse(e))}catch(e){}}),[o]),a.useLayoutEffect((()=>{let e=t&&"/"!==l?(e,n)=>t(i({},e,{pathname:r.stripBasename(e.pathname,l)||e.pathname}),n):t,n=null==u?void 0:u.enableScrollRestoration(I,(()=>window.scrollY),e);return()=>n&&n()}),[u,l,t]),a.useLayoutEffect((()=>{if(!1!==s)if("number"!=typeof s){if(f.hash){let e=document.getElementById(decodeURIComponent(f.hash.slice(1)));if(e)return void e.scrollIntoView()}!0!==c&&window.scrollTo(0,0)}else window.scrollTo(0,s)}),[f,s,c]))}function z(e,t){void 0===t&&(t={});let o=a.useContext(R);null==o&&r.UNSAFE_invariant(!1);let{basename:i}=L(F.useViewTransitionState),u=n.useResolvedPath(e,{relative:t.relative});if(!o.isTransitioning)return!1;let s=r.stripBasename(o.currentLocation.pathname,i)||o.currentLocation.pathname,c=r.stripBasename(o.nextLocation.pathname,i)||o.nextLocation.pathname;return null!=r.matchPath(u.pathname,c)||null!=r.matchPath(u.pathname,s)}Object.defineProperty(e,"AbortedDeferredError",{enumerable:!0,get:function(){return n.AbortedDeferredError}}),Object.defineProperty(e,"Await",{enumerable:!0,get:function(){return n.Await}}),Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return n.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return n.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return n.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return n.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return n.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return n.Router}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return n.Routes}}),Object.defineProperty(e,"UNSAFE_DataRouterContext",{enumerable:!0,get:function(){return n.UNSAFE_DataRouterContext}}),Object.defineProperty(e,"UNSAFE_DataRouterStateContext",{enumerable:!0,get:function(){return n.UNSAFE_DataRouterStateContext}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return n.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return n.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return n.UNSAFE_RouteContext}}),Object.defineProperty(e,"UNSAFE_useRouteId",{enumerable:!0,get:function(){return n.UNSAFE_useRouteId}}),Object.defineProperty(e,"createMemoryRouter",{enumerable:!0,get:function(){return n.createMemoryRouter}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return n.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return n.createRoutesFromChildren}}),Object.defineProperty(e,"createRoutesFromElements",{enumerable:!0,get:function(){return n.createRoutesFromElements}}),Object.defineProperty(e,"defer",{enumerable:!0,get:function(){return n.defer}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return n.generatePath}}),Object.defineProperty(e,"isRouteErrorResponse",{enumerable:!0,get:function(){return n.isRouteErrorResponse}}),Object.defineProperty(e,"json",{enumerable:!0,get:function(){return n.json}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return n.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return n.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return n.parsePath}}),Object.defineProperty(e,"redirect",{enumerable:!0,get:function(){return n.redirect}}),Object.defineProperty(e,"redirectDocument",{enumerable:!0,get:function(){return n.redirectDocument}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return n.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return n.resolvePath}}),Object.defineProperty(e,"unstable_useBlocker",{enumerable:!0,get:function(){return n.unstable_useBlocker}}),Object.defineProperty(e,"useActionData",{enumerable:!0,get:function(){return n.useActionData}}),Object.defineProperty(e,"useAsyncError",{enumerable:!0,get:function(){return n.useAsyncError}}),Object.defineProperty(e,"useAsyncValue",{enumerable:!0,get:function(){return n.useAsyncValue}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return n.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return n.useInRouterContext}}),Object.defineProperty(e,"useLoaderData",{enumerable:!0,get:function(){return n.useLoaderData}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return n.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return n.useMatch}}),Object.defineProperty(e,"useMatches",{enumerable:!0,get:function(){return n.useMatches}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return n.useNavigate}}),Object.defineProperty(e,"useNavigation",{enumerable:!0,get:function(){return n.useNavigation}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return n.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return n.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return n.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return n.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return n.useResolvedPath}}),Object.defineProperty(e,"useRevalidator",{enumerable:!0,get:function(){return n.useRevalidator}}),Object.defineProperty(e,"useRouteError",{enumerable:!0,get:function(){return n.useRouteError}}),Object.defineProperty(e,"useRouteLoaderData",{enumerable:!0,get:function(){return n.useRouteLoaderData}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return n.useRoutes}}),e.BrowserRouter=function(e){let{basename:t,children:o,future:i,window:u}=e,s=a.useRef();null==s.current&&(s.current=r.createBrowserHistory({window:u,v5Compat:!0}));let c=s.current,[l,f]=a.useState({action:c.action,location:c.location}),{v7_startTransition:d}=i||{},m=a.useCallback((e=>{d&&E?E((()=>f(e))):f(e)}),[f,d]);return a.useLayoutEffect((()=>c.listen(m)),[c,m]),a.createElement(n.Router,{basename:t,children:o,location:l.location,navigationType:l.action,navigator:c})},e.Form=N,e.HashRouter=function(e){let{basename:t,children:o,future:i,window:u}=e,s=a.useRef();null==s.current&&(s.current=r.createHashHistory({window:u,v5Compat:!0}));let c=s.current,[l,f]=a.useState({action:c.action,location:c.location}),{v7_startTransition:d}=i||{},m=a.useCallback((e=>{d&&E?E((()=>f(e))):f(e)}),[f,d]);return a.useLayoutEffect((()=>c.listen(m)),[c,m]),a.createElement(n.Router,{basename:t,children:o,location:l.location,navigationType:l.action,navigator:c})},e.Link=j,e.NavLink=A,e.RouterProvider=function(e){let{fallbackElement:t,router:r,future:o}=e,[i,u]=a.useState(r.state),[s,c]=a.useState(),[l,f]=a.useState({isTransitioning:!1}),[d,m]=a.useState(),[p,b]=a.useState(),[v,h]=a.useState(),g=a.useRef(new Map),y=a.useRef(new Map),w=a.useCallback((e=>{let t=g.current.get(e);null==t?g.current.set(e,1):g.current.set(e,t+1)}),[]),O=a.useCallback((e=>{let t=g.current.get(e);null==t||t<=1?(g.current.delete(e),y.current.delete(e)):g.current.set(e,t-1)}),[y]),C=a.useMemo((()=>({data:y.current,register:w,unregister:O})),[w,O]),{v7_startTransition:j}=o||{},A=a.useCallback((e=>{j?function(e){E?E(e):e()}(e):e()}),[j]),N=a.useCallback(((e,t)=>{let{unstable_viewTransitionOpts:n}=t;e.fetchers.forEach(((e,t)=>{void 0!==e.data&&y.current.set(t,e.data)})),n&&null!=r.window&&"function"==typeof r.window.document.startViewTransition?p&&d?(d.resolve(),p.skipTransition(),h({state:e,currentLocation:n.currentLocation,nextLocation:n.nextLocation})):(c(e),f({isTransitioning:!0,currentLocation:n.currentLocation,nextLocation:n.nextLocation})):A((()=>u(e)))}),[A,p,d,r.window]);a.useLayoutEffect((()=>r.subscribe(N)),[r,N]),a.useEffect((()=>{l.isTransitioning&&m(new P)}),[l.isTransitioning]),a.useEffect((()=>{if(d&&s&&r.window){let e=s,t=d.promise,n=r.window.document.startViewTransition((async()=>{A((()=>u(e))),await t}));n.finished.finally((()=>{m(void 0),b(void 0),c(void 0),f({isTransitioning:!1})})),b(n)}}),[A,s,d,r.window]),a.useEffect((()=>{d&&s&&i.location.key===s.location.key&&d.resolve()}),[d,p,i.location,s]),a.useEffect((()=>{!l.isTransitioning&&v&&(c(v.state),f({isTransitioning:!0,currentLocation:v.currentLocation,nextLocation:v.nextLocation}),h(void 0))}),[l.isTransitioning,v]);let x=a.useMemo((()=>({createHref:r.createHref,encodeLocation:r.encodeLocation,go:e=>r.navigate(e),push:(e,t,n)=>r.navigate(e,{state:t,preventScrollReset:null==n?void 0:n.preventScrollReset}),replace:(e,t,n)=>r.navigate(e,{replace:!0,state:t,preventScrollReset:null==n?void 0:n.preventScrollReset})})),[r]),F=r.basename||"/",T=a.useMemo((()=>({router:r,navigator:x,static:!1,basename:F})),[r,x,F]);return a.createElement(a.Fragment,null,a.createElement(n.UNSAFE_DataRouterContext.Provider,{value:T},a.createElement(n.UNSAFE_DataRouterStateContext.Provider,{value:i},a.createElement(S.Provider,{value:C},a.createElement(R.Provider,{value:l},a.createElement(n.Router,{basename:F,location:i.location,navigationType:i.historyAction,navigator:x},i.initialized?a.createElement(_,{routes:r.routes,state:i}):t))))),null)},e.ScrollRestoration=function(e){let{getKey:t,storageKey:n}=e;return V({getKey:t,storageKey:n}),null},e.UNSAFE_FetchersContext=S,e.UNSAFE_ViewTransitionContext=R,e.UNSAFE_useScrollRestoration=V,e.createBrowserRouter=function(e,t){return r.createRouter({basename:null==t?void 0:t.basename,future:i({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:r.createBrowserHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||y(),routes:e,mapRouteProperties:n.UNSAFE_mapRouteProperties,window:null==t?void 0:t.window}).initialize()},e.createHashRouter=function(e,t){return r.createRouter({basename:null==t?void 0:t.basename,future:i({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:r.createHashHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||y(),routes:e,mapRouteProperties:n.UNSAFE_mapRouteProperties,window:null==t?void 0:t.window}).initialize()},e.createSearchParams=f,e.unstable_HistoryRouter=function(e){let{basename:t,children:r,future:o,history:i}=e,[u,s]=a.useState({action:i.action,location:i.location}),{v7_startTransition:c}=o||{},l=a.useCallback((e=>{c&&E?E((()=>s(e))):s(e)}),[s,c]);return a.useLayoutEffect((()=>i.listen(l)),[i,l]),a.createElement(n.Router,{basename:t,children:r,location:u.location,navigationType:u.action,navigator:i})},e.unstable_usePrompt=function(e){let{when:t,message:r}=e,o=n.unstable_useBlocker(t);a.useEffect((()=>{if("blocked"===o.state){window.confirm(r)?setTimeout(o.proceed,0):o.reset()}}),[o,r]),a.useEffect((()=>{"blocked"!==o.state||t||o.reset()}),[o,t])},e.unstable_useViewTransitionState=z,e.useBeforeUnload=function(e,t){let{capture:n}=t||{};a.useEffect((()=>{let t=null!=n?{capture:n}:void 0;return window.addEventListener("beforeunload",e,t),()=>{window.removeEventListener("beforeunload",e,t)}}),[e,n])},e.useFetcher=function(e){var t;let{key:o}=void 0===e?{}:e,{router:u}=L(F.UseFetcher),s=U(T.UseFetcher),c=a.useContext(S),l=a.useContext(n.UNSAFE_RouteContext),f=null==(t=l.matches[l.matches.length-1])?void 0:t.route.id,[d,m]=a.useState(o||"");d||m(M()),c||r.UNSAFE_invariant(!1),l||r.UNSAFE_invariant(!1),null==f&&r.UNSAFE_invariant(!1);let{data:p,register:b,unregister:v}=c;a.useEffect((()=>(b(d),()=>v(d))),[d,b,v]);let h=a.useCallback((e=>{f||r.UNSAFE_invariant(!1),u.fetch(d,f,e)}),[d,f,u]),g=B(),y=a.useCallback(((e,t)=>{g(e,i({},t,{navigate:!1,fetcherKey:d}))}),[d,g]),w=a.useMemo((()=>a.forwardRef(((e,t)=>a.createElement(x,i({},e,{navigate:!1,fetcherKey:d,ref:t,submit:y}))))),[d,y]);return a.useMemo((()=>{let e=d&&s.fetchers.get(d)||r.IDLE_FETCHER;return i({Form:w,submit:y,load:h},e,{data:p.get(d)})}),[w,p,d,h,s.fetchers,y])},e.useFetchers=function(){return[...U(T.UseFetchers).fetchers.values()]},e.useFormAction=H,e.useLinkClickHandler=D,e.useSearchParams=function(e){let t=a.useRef(f(e)),r=a.useRef(!1),o=n.useLocation(),i=a.useMemo((()=>function(e,t){let n=f(e);return t&&t.forEach(((e,r)=>{n.has(r)||t.getAll(r).forEach((e=>{n.append(r,e)}))})),n}(o.search,r.current?null:t.current)),[o.search]),u=n.useNavigate(),s=a.useCallback(((e,t)=>{const n=f("function"==typeof e?e(i):e);r.current=!0,u("?"+n,t)}),[u,i]);return[i,s]},e.useSubmit=B,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=react-router-dom.production.min.js.map

8

package.json
{
"name": "react-router-dom",
"version": "0.0.0-experimental-dc8656c8",
"version": "0.0.0-experimental-e0f088aa",
"description": "Declarative routing for React web applications",

@@ -26,4 +26,4 @@ "keywords": [

"dependencies": {
"@remix-run/router": "0.0.0-experimental-dc8656c8",
"react-router": "0.0.0-experimental-dc8656c8"
"@remix-run/router": "0.0.0-experimental-e0f088aa",
"react-router": "0.0.0-experimental-e0f088aa"
},

@@ -48,4 +48,4 @@ "devDependencies": {

"engines": {
"node": ">=14"
"node": ">=14.0.0"
}
}

8

server.d.ts

@@ -10,6 +10,6 @@ import * as React from "react";

/**
* A <Router> that may not navigate to any other location. This is useful
* A `<Router>` that may not navigate to any other location. This is useful
* on the server where there is no stateful UI.
*/
export declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): JSX.Element;
export declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): React.JSX.Element;
export { StaticHandlerContext };

@@ -26,5 +26,5 @@ export interface StaticRouterProviderProps {

*/
export declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): JSX.Element;
declare type CreateStaticHandlerOptions = Omit<RouterCreateStaticHandlerOptions, "detectErrorBoundary" | "mapRouteProperties">;
export declare function StaticRouterProvider({ context, router, hydrate, nonce, }: StaticRouterProviderProps): React.JSX.Element;
type CreateStaticHandlerOptions = Omit<RouterCreateStaticHandlerOptions, "detectErrorBoundary" | "mapRouteProperties">;
export declare function createStaticHandler(routes: RouteObject[], opts?: CreateStaticHandlerOptions): import("@remix-run/router").StaticHandler;
export declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext): RemixRouter;

93

server.js

@@ -31,6 +31,5 @@ 'use strict';

/**
* A <Router> that may not navigate to any other location. This is useful
* A `<Router>` that may not navigate to any other location. This is useful
* on the server where there is no stateful UI.
*/
function StaticRouter({

@@ -44,3 +43,2 @@ basename,

}
let action = router.Action.Pop;

@@ -68,3 +66,2 @@ let location = {

*/
function StaticRouterProvider({

@@ -85,3 +82,2 @@ context,

let hydrateScript = "";
if (hydrate !== false) {

@@ -92,11 +88,10 @@ let data = {

errors: serializeErrors(context.errors)
}; // Use JSON.parse here instead of embedding a raw JS object here to speed
};
// Use JSON.parse here instead of embedding a raw JS object here to speed
// up parsing on the client. Dual-stringify is needed to ensure all quotes
// are properly escaped in the resulting string. See:
// https://v8.dev/blog/cost-of-javascript-2019#json
let json = htmlEscape(JSON.stringify(JSON.stringify(data)));
hydrateScript = `window.__staticRouterHydrationData = JSON.parse(${json});`;
}
let {

@@ -109,2 +104,6 @@ state

value: state
}, /*#__PURE__*/React__namespace.createElement(reactRouterDom.UNSAFE_ViewTransitionContext.Provider, {
value: {
isTransitioning: false
}
}, /*#__PURE__*/React__namespace.createElement(reactRouterDom.Router, {

@@ -119,3 +118,3 @@ basename: dataRouterContext.basename,

state: state
})))), hydrateScript ? /*#__PURE__*/React__namespace.createElement("script", {
}))))), hydrateScript ? /*#__PURE__*/React__namespace.createElement("script", {
suppressHydrationWarning: true,

@@ -128,3 +127,2 @@ nonce: nonce,

}
function DataRoutes({

@@ -136,3 +134,2 @@ routes,

}
function serializeErrors(errors) {

@@ -142,3 +139,2 @@ if (!errors) return null;

let serialized = {};
for (let [key, val] of entries) {

@@ -148,3 +144,4 @@ // Hey you! If you change this, please change the corresponding logic in

if (router.isRouteErrorResponse(val)) {
serialized[key] = { ...val,
serialized[key] = {
...val,
__type: "RouteErrorResponse"

@@ -156,3 +153,8 @@ };

message: val.message,
__type: "Error"
__type: "Error",
// If this is a subclass (i.e., ReferenceError), send up the type so we
// can re-create the same type during hydration.
...(val.name !== "Error" ? {
__subType: val.name
} : {})
};

@@ -163,6 +165,4 @@ } else {

}
return serialized;
}
function getStatelessNavigator() {

@@ -172,28 +172,22 @@ return {

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.`);
}
};
}
function createStaticHandler(routes, opts) {
return router.createStaticHandler(routes, { ...opts,
return router.createStaticHandler(routes, {
...opts,
mapRouteProperties: reactRouter.UNSAFE_mapRouteProperties

@@ -204,15 +198,14 @@ });

let manifest = {};
let dataRoutes = router.UNSAFE_convertRoutesToDataRoutes(routes, reactRouter.UNSAFE_mapRouteProperties, undefined, manifest); // Because our context matches may be from a framework-agnostic set of
let dataRoutes = router.UNSAFE_convertRoutesToDataRoutes(routes, reactRouter.UNSAFE_mapRouteProperties, undefined, manifest);
// Because our context matches may be from a framework-agnostic set of
// routes passed to createStaticHandler(), we update them here with our
// newly created/enhanced data routes
let matches = context.matches.map(match => {
let route = manifest[match.route.id] || match.route;
return { ...match,
return {
...match,
route
};
});
let msg = method => `You cannot use router.${method}() on the server because it is a stateless environment`;
return {

@@ -222,3 +215,2 @@ get basename() {

},
get state() {

@@ -241,80 +233,62 @@ return {

},
get routes() {
return dataRoutes;
},
get window() {
return undefined;
},
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 router.IDLE_FETCHER;
},
deleteFetcher() {
throw msg("deleteFetcher");
},
dispose() {
throw msg("dispose");
},
getBlocker() {
return router.IDLE_BLOCKER;
},
deleteBlocker() {
throw msg("deleteBlocker");
},
_internalFetchControllers: new Map(),
_internalActiveDeferreds: new Map(),
_internalSetRoutes() {
throw msg("_internalSetRoutes");
}
};
}
function createHref(to) {
return typeof to === "string" ? to : reactRouterDom.createPath(to);
}
function encodeLocation(to) {
// Locations should already be encoded on the server, so just return as-is
let path = typeof to === "string" ? reactRouterDom.parsePath(to) : to;
let href = typeof to === "string" ? to : reactRouterDom.createPath(to);
let encoded = ABSOLUTE_URL_REGEX.test(href) ? new URL(href) : new URL(href, "http://localhost");
return {
pathname: path.pathname || "",
search: path.search || "",
hash: path.hash || ""
pathname: encoded.pathname,
search: encoded.search,
hash: encoded.hash
};
} // This utility is based on https://github.com/zertosh/htmlescape
}
const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
// This utility is based on https://github.com/zertosh/htmlescape
// License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
const ESCAPE_LOOKUP = {

@@ -328,3 +302,2 @@ "&": "\\u0026",

const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
function htmlEscape(str) {

@@ -331,0 +304,0 @@ return str.replace(ESCAPE_REGEX, match => ESCAPE_LOOKUP[match]);

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/react-router-dom.development.js.map

Sorry, the diff of this file is not supported yet

dist/react-router-dom.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/server.mjs

Sorry, the diff of this file is not supported yet

dist/umd/react-router-dom.development.js

Sorry, the diff of this file is too big to display

dist/umd/react-router-dom.development.js.map

Sorry, the diff of this file is not supported yet

dist/umd/react-router-dom.production.min.js.map

Sorry, the diff of this file is not supported yet

server.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc