react-router
Version:
Declarative routing for React
1,437 lines (1,380 loc) • 65.9 kB
JavaScript
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }/**
* react-router v7.7.0
*
* Copyright (c) Remix Software Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
var _chunkV6PEDDZIjs = require('./chunk-V6PEDDZI.js');
// lib/components.tsx
var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react);
function mapRouteProperties(route) {
let updates = {
// Note: this check also occurs in createRoutesFromChildren so update
// there if you change this -- please and thank you!
hasErrorBoundary: route.hasErrorBoundary || route.ErrorBoundary != null || route.errorElement != null
};
if (route.Component) {
if (_chunkV6PEDDZIjs.ENABLE_DEV_WARNINGS) {
if (route.element) {
_chunkV6PEDDZIjs.warning.call(void 0,
false,
"You should not include both `Component` and `element` on your route - `Component` will be used."
);
}
}
Object.assign(updates, {
element: React.createElement(route.Component),
Component: void 0
});
}
if (route.HydrateFallback) {
if (_chunkV6PEDDZIjs.ENABLE_DEV_WARNINGS) {
if (route.hydrateFallbackElement) {
_chunkV6PEDDZIjs.warning.call(void 0,
false,
"You should not include both `HydrateFallback` and `hydrateFallbackElement` on your route - `HydrateFallback` will be used."
);
}
}
Object.assign(updates, {
hydrateFallbackElement: React.createElement(route.HydrateFallback),
HydrateFallback: void 0
});
}
if (route.ErrorBoundary) {
if (_chunkV6PEDDZIjs.ENABLE_DEV_WARNINGS) {
if (route.errorElement) {
_chunkV6PEDDZIjs.warning.call(void 0,
false,
"You should not include both `ErrorBoundary` and `errorElement` on your route - `ErrorBoundary` will be used."
);
}
}
Object.assign(updates, {
errorElement: React.createElement(route.ErrorBoundary),
ErrorBoundary: void 0
});
}
return updates;
}
var hydrationRouteProperties = [
"HydrateFallback",
"hydrateFallbackElement"
];
function createMemoryRouter(routes, opts) {
return _chunkV6PEDDZIjs.createRouter.call(void 0, {
basename: _optionalChain([opts, 'optionalAccess', _2 => _2.basename]),
unstable_getContext: _optionalChain([opts, 'optionalAccess', _3 => _3.unstable_getContext]),
future: _optionalChain([opts, 'optionalAccess', _4 => _4.future]),
history: _chunkV6PEDDZIjs.createMemoryHistory.call(void 0, {
initialEntries: _optionalChain([opts, 'optionalAccess', _5 => _5.initialEntries]),
initialIndex: _optionalChain([opts, 'optionalAccess', _6 => _6.initialIndex])
}),
hydrationData: _optionalChain([opts, 'optionalAccess', _7 => _7.hydrationData]),
routes,
hydrationRouteProperties,
mapRouteProperties,
dataStrategy: _optionalChain([opts, 'optionalAccess', _8 => _8.dataStrategy]),
patchRoutesOnNavigation: _optionalChain([opts, 'optionalAccess', _9 => _9.patchRoutesOnNavigation])
}).initialize();
}
var Deferred = class {
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);
}
};
});
}
};
function RouterProvider({
router,
flushSync: reactDomFlushSyncImpl
}) {
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 fetcherData = React.useRef(/* @__PURE__ */ new Map());
let setState = React.useCallback(
(newState, { deletedFetchers, flushSync, viewTransitionOpts }) => {
newState.fetchers.forEach((fetcher, key) => {
if (fetcher.data !== void 0) {
fetcherData.current.set(key, fetcher.data);
}
});
deletedFetchers.forEach((key) => fetcherData.current.delete(key));
_chunkV6PEDDZIjs.warnOnce.call(void 0,
flushSync === false || reactDomFlushSyncImpl != null,
'You provided the `flushSync` option to a router update, but you are not using the `<RouterProvider>` from `react-router/dom` so `ReactDOM.flushSync()` is unavailable. Please update your app to `import { RouterProvider } from "react-router/dom"` and ensure you have `react-dom` installed as a dependency to use the `flushSync` option.'
);
let isViewTransitionAvailable = router.window != null && router.window.document != null && typeof router.window.document.startViewTransition === "function";
_chunkV6PEDDZIjs.warnOnce.call(void 0,
viewTransitionOpts == null || isViewTransitionAvailable,
"You provided the `viewTransition` option to a router update, but you do not appear to be running in a DOM environment as `window.startViewTransition` is not available."
);
if (!viewTransitionOpts || !isViewTransitionAvailable) {
if (reactDomFlushSyncImpl && flushSync) {
reactDomFlushSyncImpl(() => setStateImpl(newState));
} else {
React.startTransition(() => setStateImpl(newState));
}
return;
}
if (reactDomFlushSyncImpl && flushSync) {
reactDomFlushSyncImpl(() => {
if (transition) {
renderDfd && renderDfd.resolve();
transition.skipTransition();
}
setVtContext({
isTransitioning: true,
flushSync: true,
currentLocation: viewTransitionOpts.currentLocation,
nextLocation: viewTransitionOpts.nextLocation
});
});
let t = router.window.document.startViewTransition(() => {
reactDomFlushSyncImpl(() => setStateImpl(newState));
});
t.finished.finally(() => {
reactDomFlushSyncImpl(() => {
setRenderDfd(void 0);
setTransition(void 0);
setPendingState(void 0);
setVtContext({ isTransitioning: false });
});
});
reactDomFlushSyncImpl(() => setTransition(t));
return;
}
if (transition) {
renderDfd && renderDfd.resolve();
transition.skipTransition();
setInterruption({
state: newState,
currentLocation: viewTransitionOpts.currentLocation,
nextLocation: viewTransitionOpts.nextLocation
});
} else {
setPendingState(newState);
setVtContext({
isTransitioning: true,
flushSync: false,
currentLocation: viewTransitionOpts.currentLocation,
nextLocation: viewTransitionOpts.nextLocation
});
}
},
[router.window, reactDomFlushSyncImpl, transition, renderDfd]
);
React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
React.useEffect(() => {
if (vtContext.isTransitioning && !vtContext.flushSync) {
setRenderDfd(new Deferred());
}
}, [vtContext]);
React.useEffect(() => {
if (renderDfd && pendingState && router.window) {
let newState = pendingState;
let renderPromise = renderDfd.promise;
let transition2 = router.window.document.startViewTransition(async () => {
React.startTransition(() => setStateImpl(newState));
await renderPromise;
});
transition2.finished.finally(() => {
setRenderDfd(void 0);
setTransition(void 0);
setPendingState(void 0);
setVtContext({ isTransitioning: false });
});
setTransition(transition2);
}
}, [pendingState, renderDfd, router.window]);
React.useEffect(() => {
if (renderDfd && pendingState && state.location.key === pendingState.location.key) {
renderDfd.resolve();
}
}, [renderDfd, transition, state.location, pendingState]);
React.useEffect(() => {
if (!vtContext.isTransitioning && interruption) {
setPendingState(interruption.state);
setVtContext({
isTransitioning: true,
flushSync: false,
currentLocation: interruption.currentLocation,
nextLocation: interruption.nextLocation
});
setInterruption(void 0);
}
}, [vtContext.isTransitioning, interruption]);
let navigator = React.useMemo(() => {
return {
createHref: router.createHref,
encodeLocation: router.encodeLocation,
go: (n) => router.navigate(n),
push: (to, state2, opts) => router.navigate(to, {
state: state2,
preventScrollReset: _optionalChain([opts, 'optionalAccess', _10 => _10.preventScrollReset])
}),
replace: (to, state2, opts) => router.navigate(to, {
replace: true,
state: state2,
preventScrollReset: _optionalChain([opts, 'optionalAccess', _11 => _11.preventScrollReset])
})
};
}, [router]);
let basename = router.basename || "/";
let dataRouterContext = React.useMemo(
() => ({
router,
navigator,
static: false,
basename
}),
[router, navigator, basename]
);
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(_chunkV6PEDDZIjs.DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React.createElement(_chunkV6PEDDZIjs.DataRouterStateContext.Provider, { value: state }, /* @__PURE__ */ React.createElement(_chunkV6PEDDZIjs.FetchersContext.Provider, { value: fetcherData.current }, /* @__PURE__ */ React.createElement(_chunkV6PEDDZIjs.ViewTransitionContext.Provider, { value: vtContext }, /* @__PURE__ */ React.createElement(
Router,
{
basename,
location: state.location,
navigationType: state.historyAction,
navigator
},
/* @__PURE__ */ React.createElement(
MemoizedDataRoutes,
{
routes: router.routes,
future: router.future,
state
}
)
))))), null);
}
var MemoizedDataRoutes = React.memo(DataRoutes);
function DataRoutes({
routes,
future,
state
}) {
return _chunkV6PEDDZIjs.useRoutesImpl.call(void 0, routes, void 0, state, future);
}
function MemoryRouter({
basename,
children,
initialEntries,
initialIndex
}) {
let historyRef = React.useRef();
if (historyRef.current == null) {
historyRef.current = _chunkV6PEDDZIjs.createMemoryHistory.call(void 0, {
initialEntries,
initialIndex,
v5Compat: true
});
}
let history = historyRef.current;
let [state, setStateImpl] = React.useState({
action: history.action,
location: history.location
});
let setState = React.useCallback(
(newState) => {
React.startTransition(() => setStateImpl(newState));
},
[setStateImpl]
);
React.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /* @__PURE__ */ React.createElement(
Router,
{
basename,
children,
location: state.location,
navigationType: state.action,
navigator: history
}
);
}
function Navigate({
to,
replace,
state,
relative
}) {
_chunkV6PEDDZIjs.invariant.call(void 0,
_chunkV6PEDDZIjs.useInRouterContext.call(void 0, ),
// TODO: This error is probably because they somehow have 2 versions of
// the router loaded. We can help them understand how to avoid that.
`<Navigate> may be used only in the context of a <Router> component.`
);
let { static: isStatic } = React.useContext(_chunkV6PEDDZIjs.NavigationContext);
_chunkV6PEDDZIjs.warning.call(void 0,
!isStatic,
`<Navigate> must not be used on the initial render in a <StaticRouter>. This is a no-op, but you should modify your code so the <Navigate> is only ever rendered in response to some user interaction or state change.`
);
let { matches } = React.useContext(_chunkV6PEDDZIjs.RouteContext);
let { pathname: locationPathname } = _chunkV6PEDDZIjs.useLocation.call(void 0, );
let navigate = _chunkV6PEDDZIjs.useNavigate.call(void 0, );
let path = _chunkV6PEDDZIjs.resolveTo.call(void 0,
to,
_chunkV6PEDDZIjs.getResolveToMatches.call(void 0, matches),
locationPathname,
relative === "path"
);
let jsonPath = JSON.stringify(path);
React.useEffect(() => {
navigate(JSON.parse(jsonPath), { replace, state, relative });
}, [navigate, jsonPath, relative, replace, state]);
return null;
}
function Outlet(props) {
return _chunkV6PEDDZIjs.useOutlet.call(void 0, props.context);
}
function Route(_props) {
_chunkV6PEDDZIjs.invariant.call(void 0,
false,
`A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.`
);
}
function Router({
basename: basenameProp = "/",
children = null,
location: locationProp,
navigationType = "POP" /* Pop */,
navigator,
static: staticProp = false
}) {
_chunkV6PEDDZIjs.invariant.call(void 0,
!_chunkV6PEDDZIjs.useInRouterContext.call(void 0, ),
`You cannot render a <Router> inside another <Router>. You should never have more than one in your app.`
);
let basename = basenameProp.replace(/^\/*/, "/");
let navigationContext = React.useMemo(
() => ({
basename,
navigator,
static: staticProp,
future: {}
}),
[basename, navigator, staticProp]
);
if (typeof locationProp === "string") {
locationProp = _chunkV6PEDDZIjs.parsePath.call(void 0, locationProp);
}
let {
pathname = "/",
search = "",
hash = "",
state = null,
key = "default"
} = locationProp;
let locationContext = React.useMemo(() => {
let trailingPathname = _chunkV6PEDDZIjs.stripBasename.call(void 0, pathname, basename);
if (trailingPathname == null) {
return null;
}
return {
location: {
pathname: trailingPathname,
search,
hash,
state,
key
},
navigationType
};
}, [basename, pathname, search, hash, state, key, navigationType]);
_chunkV6PEDDZIjs.warning.call(void 0,
locationContext != null,
`<Router basename="${basename}"> is not able to match the URL "${pathname}${search}${hash}" because it does not start with the basename, so the <Router> won't render anything.`
);
if (locationContext == null) {
return null;
}
return /* @__PURE__ */ React.createElement(_chunkV6PEDDZIjs.NavigationContext.Provider, { value: navigationContext }, /* @__PURE__ */ React.createElement(_chunkV6PEDDZIjs.LocationContext.Provider, { children, value: locationContext }));
}
function Routes({
children,
location
}) {
return _chunkV6PEDDZIjs.useRoutes.call(void 0, createRoutesFromChildren(children), location);
}
function Await({
children,
errorElement,
resolve
}) {
return /* @__PURE__ */ React.createElement(AwaitErrorBoundary, { resolve, errorElement }, /* @__PURE__ */ React.createElement(ResolveAwait, null, children));
}
var AwaitErrorBoundary = class extends React.Component {
constructor(props) {
super(props);
this.state = { error: null };
}
static getDerivedStateFromError(error) {
return { error };
}
componentDidCatch(error, errorInfo) {
console.error(
"<Await> caught the following error during render",
error,
errorInfo
);
}
render() {
let { children, errorElement, resolve } = this.props;
let promise = null;
let status = 0 /* pending */;
if (!(resolve instanceof Promise)) {
status = 1 /* success */;
promise = Promise.resolve();
Object.defineProperty(promise, "_tracked", { get: () => true });
Object.defineProperty(promise, "_data", { get: () => resolve });
} else if (this.state.error) {
status = 2 /* error */;
let renderError = this.state.error;
promise = Promise.reject().catch(() => {
});
Object.defineProperty(promise, "_tracked", { get: () => true });
Object.defineProperty(promise, "_error", { get: () => renderError });
} else if (resolve._tracked) {
promise = resolve;
status = "_error" in promise ? 2 /* error */ : "_data" in promise ? 1 /* success */ : 0 /* pending */;
} else {
status = 0 /* pending */;
Object.defineProperty(resolve, "_tracked", { get: () => true });
promise = resolve.then(
(data) => Object.defineProperty(resolve, "_data", { get: () => data }),
(error) => Object.defineProperty(resolve, "_error", { get: () => error })
);
}
if (status === 2 /* error */ && !errorElement) {
throw promise._error;
}
if (status === 2 /* error */) {
return /* @__PURE__ */ React.createElement(_chunkV6PEDDZIjs.AwaitContext.Provider, { value: promise, children: errorElement });
}
if (status === 1 /* success */) {
return /* @__PURE__ */ React.createElement(_chunkV6PEDDZIjs.AwaitContext.Provider, { value: promise, children });
}
throw promise;
}
};
function ResolveAwait({
children
}) {
let data = _chunkV6PEDDZIjs.useAsyncValue.call(void 0, );
let toRender = typeof children === "function" ? children(data) : children;
return /* @__PURE__ */ React.createElement(React.Fragment, null, toRender);
}
function createRoutesFromChildren(children, parentPath = []) {
let routes = [];
React.Children.forEach(children, (element, index) => {
if (!React.isValidElement(element)) {
return;
}
let treePath = [...parentPath, index];
if (element.type === React.Fragment) {
routes.push.apply(
routes,
createRoutesFromChildren(element.props.children, treePath)
);
return;
}
_chunkV6PEDDZIjs.invariant.call(void 0,
element.type === Route,
`[${typeof element.type === "string" ? element.type : element.type.name}] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>`
);
_chunkV6PEDDZIjs.invariant.call(void 0,
!element.props.index || !element.props.children,
"An index route cannot have child routes."
);
let route = {
id: element.props.id || treePath.join("-"),
caseSensitive: element.props.caseSensitive,
element: element.props.element,
Component: element.props.Component,
index: element.props.index,
path: element.props.path,
loader: element.props.loader,
action: element.props.action,
hydrateFallbackElement: element.props.hydrateFallbackElement,
HydrateFallback: element.props.HydrateFallback,
errorElement: element.props.errorElement,
ErrorBoundary: element.props.ErrorBoundary,
hasErrorBoundary: element.props.hasErrorBoundary === true || element.props.ErrorBoundary != null || element.props.errorElement != null,
shouldRevalidate: element.props.shouldRevalidate,
handle: element.props.handle,
lazy: element.props.lazy
};
if (element.props.children) {
route.children = createRoutesFromChildren(
element.props.children,
treePath
);
}
routes.push(route);
});
return routes;
}
var createRoutesFromElements = createRoutesFromChildren;
function renderMatches(matches) {
return _chunkV6PEDDZIjs._renderMatches.call(void 0, matches);
}
function useRouteComponentProps() {
return {
params: _chunkV6PEDDZIjs.useParams.call(void 0, ),
loaderData: _chunkV6PEDDZIjs.useLoaderData.call(void 0, ),
actionData: _chunkV6PEDDZIjs.useActionData.call(void 0, ),
matches: _chunkV6PEDDZIjs.useMatches.call(void 0, )
};
}
function WithComponentProps({
children
}) {
const props = useRouteComponentProps();
return React.cloneElement(children, props);
}
function withComponentProps(Component2) {
return function WithComponentProps2() {
const props = useRouteComponentProps();
return React.createElement(Component2, props);
};
}
function useHydrateFallbackProps() {
return {
params: _chunkV6PEDDZIjs.useParams.call(void 0, ),
loaderData: _chunkV6PEDDZIjs.useLoaderData.call(void 0, ),
actionData: _chunkV6PEDDZIjs.useActionData.call(void 0, )
};
}
function WithHydrateFallbackProps({
children
}) {
const props = useHydrateFallbackProps();
return React.cloneElement(children, props);
}
function withHydrateFallbackProps(HydrateFallback) {
return function WithHydrateFallbackProps2() {
const props = useHydrateFallbackProps();
return React.createElement(HydrateFallback, props);
};
}
function useErrorBoundaryProps() {
return {
params: _chunkV6PEDDZIjs.useParams.call(void 0, ),
loaderData: _chunkV6PEDDZIjs.useLoaderData.call(void 0, ),
actionData: _chunkV6PEDDZIjs.useActionData.call(void 0, ),
error: _chunkV6PEDDZIjs.useRouteError.call(void 0, )
};
}
function WithErrorBoundaryProps({
children
}) {
const props = useErrorBoundaryProps();
return React.cloneElement(children, props);
}
function withErrorBoundaryProps(ErrorBoundary) {
return function WithErrorBoundaryProps2() {
const props = useErrorBoundaryProps();
return React.createElement(ErrorBoundary, props);
};
}
// lib/dom/dom.ts
var defaultMethod = "get";
var defaultEncType = "application/x-www-form-urlencoded";
function isHtmlElement(object) {
return object != null && typeof object.tagName === "string";
}
function isButtonElement(object) {
return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
}
function isFormElement(object) {
return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
}
function isInputElement(object) {
return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
}
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.
!isModifiedEvent(event);
}
function createSearchParams(init = "") {
return new URLSearchParams(
typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo2, key) => {
let value = init[key];
return memo2.concat(
Array.isArray(value) ? value.map((v) => [key, v]) : [[key, value]]
);
}, [])
);
}
function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
let searchParams = createSearchParams(locationSearch);
if (defaultSearchParams) {
defaultSearchParams.forEach((_, key) => {
if (!searchParams.has(key)) {
defaultSearchParams.getAll(key).forEach((value) => {
searchParams.append(key, value);
});
}
});
}
return searchParams;
}
var _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;
}
var supportedFormEncTypes = /* @__PURE__ */ new Set([
"application/x-www-form-urlencoded",
"multipart/form-data",
"text/plain"
]);
function getFormEncType(encType) {
if (encType != null && !supportedFormEncTypes.has(encType)) {
_chunkV6PEDDZIjs.warning.call(void 0,
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;
let encType;
let formData;
let body;
if (isFormElement(target)) {
let attr = target.getAttribute("action");
action = attr ? _chunkV6PEDDZIjs.stripBasename.call(void 0, attr, basename) : null;
method = target.getAttribute("method") || defaultMethod;
encType = getFormEncType(target.getAttribute("enctype")) || defaultEncType;
formData = new FormData(target);
} 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>`
);
}
let attr = target.getAttribute("formaction") || form.getAttribute("action");
action = attr ? _chunkV6PEDDZIjs.stripBasename.call(void 0, attr, basename) : null;
method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
encType = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
formData = new FormData(form, target);
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);
}
}
} else if (isHtmlElement(target)) {
throw new Error(
`Cannot submit element that is not <form>, <button>, or <input type="submit|image">`
);
} else {
method = defaultMethod;
action = null;
encType = defaultEncType;
body = target;
}
if (formData && encType === "text/plain") {
body = formData;
formData = void 0;
}
return { action, method: method.toLowerCase(), encType, formData, body };
}
// lib/dom/lib.tsx
var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
try {
if (isBrowser) {
window.__reactRouterVersion = // @ts-expect-error
"7.7.0";
}
} catch (e) {
}
function createBrowserRouter(routes, opts) {
return _chunkV6PEDDZIjs.createRouter.call(void 0, {
basename: _optionalChain([opts, 'optionalAccess', _12 => _12.basename]),
unstable_getContext: _optionalChain([opts, 'optionalAccess', _13 => _13.unstable_getContext]),
future: _optionalChain([opts, 'optionalAccess', _14 => _14.future]),
history: _chunkV6PEDDZIjs.createBrowserHistory.call(void 0, { window: _optionalChain([opts, 'optionalAccess', _15 => _15.window]) }),
hydrationData: _optionalChain([opts, 'optionalAccess', _16 => _16.hydrationData]) || parseHydrationData(),
routes,
mapRouteProperties,
hydrationRouteProperties,
dataStrategy: _optionalChain([opts, 'optionalAccess', _17 => _17.dataStrategy]),
patchRoutesOnNavigation: _optionalChain([opts, 'optionalAccess', _18 => _18.patchRoutesOnNavigation]),
window: _optionalChain([opts, 'optionalAccess', _19 => _19.window])
}).initialize();
}
function createHashRouter(routes, opts) {
return _chunkV6PEDDZIjs.createRouter.call(void 0, {
basename: _optionalChain([opts, 'optionalAccess', _20 => _20.basename]),
unstable_getContext: _optionalChain([opts, 'optionalAccess', _21 => _21.unstable_getContext]),
future: _optionalChain([opts, 'optionalAccess', _22 => _22.future]),
history: _chunkV6PEDDZIjs.createHashHistory.call(void 0, { window: _optionalChain([opts, 'optionalAccess', _23 => _23.window]) }),
hydrationData: _optionalChain([opts, 'optionalAccess', _24 => _24.hydrationData]) || parseHydrationData(),
routes,
mapRouteProperties,
hydrationRouteProperties,
dataStrategy: _optionalChain([opts, 'optionalAccess', _25 => _25.dataStrategy]),
patchRoutesOnNavigation: _optionalChain([opts, 'optionalAccess', _26 => _26.patchRoutesOnNavigation]),
window: _optionalChain([opts, 'optionalAccess', _27 => _27.window])
}).initialize();
}
function parseHydrationData() {
let state = _optionalChain([window, 'optionalAccess', _28 => _28.__staticRouterHydrationData]);
if (state && state.errors) {
state = {
...state,
errors: deserializeErrors(state.errors)
};
}
return state;
}
function deserializeErrors(errors) {
if (!errors) return null;
let entries = Object.entries(errors);
let serialized = {};
for (let [key, val] of entries) {
if (val && val.__type === "RouteErrorResponse") {
serialized[key] = new (0, _chunkV6PEDDZIjs.ErrorResponseImpl)(
val.status,
val.statusText,
val.data,
val.internal === true
);
} else if (val && val.__type === "Error") {
if (val.__subType) {
let ErrorConstructor = window[val.__subType];
if (typeof ErrorConstructor === "function") {
try {
let error = new ErrorConstructor(val.message);
error.stack = "";
serialized[key] = error;
} catch (e) {
}
}
}
if (serialized[key] == null) {
let error = new Error(val.message);
error.stack = "";
serialized[key] = error;
}
} else {
serialized[key] = val;
}
}
return serialized;
}
function BrowserRouter({
basename,
children,
window: window2
}) {
let historyRef = React2.useRef();
if (historyRef.current == null) {
historyRef.current = _chunkV6PEDDZIjs.createBrowserHistory.call(void 0, { window: window2, v5Compat: true });
}
let history = historyRef.current;
let [state, setStateImpl] = React2.useState({
action: history.action,
location: history.location
});
let setState = React2.useCallback(
(newState) => {
React2.startTransition(() => setStateImpl(newState));
},
[setStateImpl]
);
React2.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /* @__PURE__ */ React2.createElement(
Router,
{
basename,
children,
location: state.location,
navigationType: state.action,
navigator: history
}
);
}
function HashRouter({ basename, children, window: window2 }) {
let historyRef = React2.useRef();
if (historyRef.current == null) {
historyRef.current = _chunkV6PEDDZIjs.createHashHistory.call(void 0, { window: window2, v5Compat: true });
}
let history = historyRef.current;
let [state, setStateImpl] = React2.useState({
action: history.action,
location: history.location
});
let setState = React2.useCallback(
(newState) => {
React2.startTransition(() => setStateImpl(newState));
},
[setStateImpl]
);
React2.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /* @__PURE__ */ React2.createElement(
Router,
{
basename,
children,
location: state.location,
navigationType: state.action,
navigator: history
}
);
}
function HistoryRouter({
basename,
children,
history
}) {
let [state, setStateImpl] = React2.useState({
action: history.action,
location: history.location
});
let setState = React2.useCallback(
(newState) => {
React2.startTransition(() => setStateImpl(newState));
},
[setStateImpl]
);
React2.useLayoutEffect(() => history.listen(setState), [history, setState]);
return /* @__PURE__ */ React2.createElement(
Router,
{
basename,
children,
location: state.location,
navigationType: state.action,
navigator: history
}
);
}
HistoryRouter.displayName = "unstable_HistoryRouter";
var ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
var Link = React2.forwardRef(
function LinkWithRef({
onClick,
discover = "render",
prefetch = "none",
relative,
reloadDocument,
replace,
state,
target,
to,
preventScrollReset,
viewTransition,
...rest
}, forwardedRef) {
let { basename } = React2.useContext(_chunkV6PEDDZIjs.NavigationContext);
let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
let absoluteHref;
let isExternal = false;
if (typeof to === "string" && isAbsolute) {
absoluteHref = to;
if (isBrowser) {
try {
let currentUrl = new URL(window.location.href);
let targetUrl = to.startsWith("//") ? new URL(currentUrl.protocol + to) : new URL(to);
let path = _chunkV6PEDDZIjs.stripBasename.call(void 0, targetUrl.pathname, basename);
if (targetUrl.origin === currentUrl.origin && path != null) {
to = path + targetUrl.search + targetUrl.hash;
} else {
isExternal = true;
}
} catch (e) {
_chunkV6PEDDZIjs.warning.call(void 0,
false,
`<Link to="${to}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`
);
}
}
}
let href = _chunkV6PEDDZIjs.useHref.call(void 0, to, { relative });
let [shouldPrefetch, prefetchRef, prefetchHandlers] = _chunkV6PEDDZIjs.usePrefetchBehavior.call(void 0,
prefetch,
rest
);
let internalOnClick = useLinkClickHandler(to, {
replace,
state,
target,
preventScrollReset,
relative,
viewTransition
});
function handleClick(event) {
if (onClick) onClick(event);
if (!event.defaultPrevented) {
internalOnClick(event);
}
}
let link = (
// eslint-disable-next-line jsx-a11y/anchor-has-content
/* @__PURE__ */ React2.createElement(
"a",
{
...rest,
...prefetchHandlers,
href: absoluteHref || href,
onClick: isExternal || reloadDocument ? onClick : handleClick,
ref: _chunkV6PEDDZIjs.mergeRefs.call(void 0, forwardedRef, prefetchRef),
target,
"data-discover": !isAbsolute && discover === "render" ? "true" : void 0
}
)
);
return shouldPrefetch && !isAbsolute ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, link, /* @__PURE__ */ React2.createElement(_chunkV6PEDDZIjs.PrefetchPageLinks, { page: href })) : link;
}
);
Link.displayName = "Link";
var NavLink = React2.forwardRef(
function NavLinkWithRef({
"aria-current": ariaCurrentProp = "page",
caseSensitive = false,
className: classNameProp = "",
end = false,
style: styleProp,
to,
viewTransition,
children,
...rest
}, ref) {
let path = _chunkV6PEDDZIjs.useResolvedPath.call(void 0, to, { relative: rest.relative });
let location = _chunkV6PEDDZIjs.useLocation.call(void 0, );
let routerState = React2.useContext(_chunkV6PEDDZIjs.DataRouterStateContext);
let { navigator, basename } = React2.useContext(_chunkV6PEDDZIjs.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) && 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) {
locationPathname = locationPathname.toLowerCase();
nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
toPathname = toPathname.toLowerCase();
}
if (nextLocationPathname && basename) {
nextLocationPathname = _chunkV6PEDDZIjs.stripBasename.call(void 0, nextLocationPathname, basename) || nextLocationPathname;
}
const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
let renderProps = {
isActive,
isPending,
isTransitioning
};
let ariaCurrent = isActive ? ariaCurrentProp : void 0;
let className;
if (typeof classNameProp === "function") {
className = classNameProp(renderProps);
} else {
className = [
classNameProp,
isActive ? "active" : null,
isPending ? "pending" : null,
isTransitioning ? "transitioning" : null
].filter(Boolean).join(" ");
}
let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
return /* @__PURE__ */ React2.createElement(
Link,
{
...rest,
"aria-current": ariaCurrent,
className,
ref,
style,
to,
viewTransition
},
typeof children === "function" ? children(renderProps) : children
);
}
);
NavLink.displayName = "NavLink";
var Form = React2.forwardRef(
({
discover = "render",
fetcherKey,
navigate,
reloadDocument,
replace,
state,
method = defaultMethod,
action,
onSubmit,
relative,
preventScrollReset,
viewTransition,
...props
}, forwardedRef) => {
let submit = useSubmit();
let formAction = useFormAction(action, { relative });
let formMethod = method.toLowerCase() === "get" ? "get" : "post";
let isAbsolute = typeof action === "string" && ABSOLUTE_URL_REGEX.test(action);
let submitHandler = (event) => {
onSubmit && onSubmit(event);
if (event.defaultPrevented) return;
event.preventDefault();
let submitter = event.nativeEvent.submitter;
let submitMethod = _optionalChain([submitter, 'optionalAccess', _29 => _29.getAttribute, 'call', _30 => _30("formmethod")]) || method;
submit(submitter || event.currentTarget, {
fetcherKey,
method: submitMethod,
navigate,
replace,
state,
relative,
preventScrollReset,
viewTransition
});
};
return /* @__PURE__ */ React2.createElement(
"form",
{
ref: forwardedRef,
method: formMethod,
action: formAction,
onSubmit: reloadDocument ? onSubmit : submitHandler,
...props,
"data-discover": !isAbsolute && discover === "render" ? "true" : void 0
}
);
}
);
Form.displayName = "Form";
function ScrollRestoration({
getKey,
storageKey,
...props
}) {
let remixContext = React2.useContext(_chunkV6PEDDZIjs.FrameworkContext);
let { basename } = React2.useContext(_chunkV6PEDDZIjs.NavigationContext);
let location = _chunkV6PEDDZIjs.useLocation.call(void 0, );
let matches = _chunkV6PEDDZIjs.useMatches.call(void 0, );
useScrollRestoration({ getKey, storageKey });
let ssrKey = React2.useMemo(
() => {
if (!remixContext || !getKey) return null;
let userKey = getScrollRestorationKey(
location,
matches,
basename,
getKey
);
return userKey !== location.key ? userKey : null;
},
// Nah, we only need this the first time for the SSR render
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
if (!remixContext || remixContext.isSpaMode) {
return null;
}
let restoreScroll = ((storageKey2, restoreKey) => {
if (!window.history.state || !window.history.state.key) {
let key = Math.random().toString(32).slice(2);
window.history.replaceState({ key }, "");
}
try {
let positions = JSON.parse(sessionStorage.getItem(storageKey2) || "{}");
let storedY = positions[restoreKey || window.history.state.key];
if (typeof storedY === "number") {
window.scrollTo(0, storedY);
}
} catch (error) {
console.error(error);
sessionStorage.removeItem(storageKey2);
}
}).toString();
return /* @__PURE__ */ React2.createElement(
"script",
{
...props,
suppressHydrationWarning: true,
dangerouslySetInnerHTML: {
__html: `(${restoreScroll})(${JSON.stringify(
storageKey || SCROLL_RESTORATION_STORAGE_KEY
)}, ${JSON.stringify(ssrKey)})`
}
}
);
}
ScrollRestoration.displayName = "ScrollRestoration";
function getDataRouterConsoleError(hookName) {
return `${hookName} must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router.`;
}
function useDataRouterContext(hookName) {
let ctx = React2.useContext(_chunkV6PEDDZIjs.DataRouterContext);
_chunkV6PEDDZIjs.invariant.call(void 0, ctx, getDataRouterConsoleError(hookName));
return ctx;
}
function useDataRouterState(hookName) {
let state = React2.useContext(_chunkV6PEDDZIjs.DataRouterStateContext);
_chunkV6PEDDZIjs.invariant.call(void 0, state, getDataRouterConsoleError(hookName));
return state;
}
function useLinkClickHandler(to, {
target,
replace: replaceProp,
state,
preventScrollReset,
relative,
viewTransition
} = {}) {
let navigate = _chunkV6PEDDZIjs.useNavigate.call(void 0, );
let location = _chunkV6PEDDZIjs.useLocation.call(void 0, );
let path = _chunkV6PEDDZIjs.useResolvedPath.call(void 0, to, { relative });
return React2.useCallback(
(event) => {
if (shouldProcessLinkClick(event, target)) {
event.preventDefault();
let replace = replaceProp !== void 0 ? replaceProp : _chunkV6PEDDZIjs.createPath.call(void 0, location) === _chunkV6PEDDZIjs.createPath.call(void 0, path);
navigate(to, {
replace,
state,
preventScrollReset,
relative,
viewTransition
});
}
},
[
location,
navigate,
path,
replaceProp,
state,
target,
to,
preventScrollReset,
relative,
viewTransition
]
);
}
function useSearchParams(defaultInit) {
_chunkV6PEDDZIjs.warning.call(void 0,
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.`
);
let defaultSearchParamsRef = React2.useRef(createSearchParams(defaultInit));
let hasSetSearchParamsRef = React2.useRef(false);
let location = _chunkV6PEDDZIjs.useLocation.call(void 0, );
let searchParams = React2.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
// remove a param with setSearchParams({}) if it has an initial value
getSearchParamsForLocation(
location.search,
hasSetSearchParamsRef.current ? null : defaultSearchParamsRef.current
)
),
[location.search]
);
let navigate = _chunkV6PEDDZIjs.useNavigate.call(void 0, );
let setSearchParams = React2.useCallback(
(nextInit, navigateOptions) => {
const newSearchParams = createSearchParams(
typeof nextInit === "function" ? nextInit(new URLSearchParams(searchParams)) : nextInit
);
hasSetSearchParamsRef.current = true;
navigate("?" + newSearchParams, navigateOptions);
},
[navigate, searchParams]
);
return [searchParams, setSearchParams];
}
var fetcherId = 0;
var getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
function useSubmit() {
let { router } = useDataRouterContext("useSubmit" /* UseSubmit */);
let { basename } = React2.useContext(_chunkV6PEDDZIjs.NavigationContext);
let currentRouteId = _chunkV6PEDDZIjs.useRouteId.call(void 0, );
return React2.useCallback(
async (target, options = {}) => {
let { action, method, encType, formData, body } = getFormSubmissionInfo(
target,
basename
);
if (options.navigate === false) {
let key = options.fetcherKey || getUniqueFetcherId();
await router.fetch(key, currentRouteId, options.action || action, {
preventScrollReset: options.preventScrollReset,
formData,
body,
formMethod: options.method || method,
formEncType: options.encType || encType,
flushSync: options.flushSync
});
} else {
await router.navigate(options.action || action, {
preventScrollReset: options.preventScrollReset,
formData,
body,
formMethod: options.method || method,
formEncType: options.encType || encType,
replace: options.replace,
state: options.state,
fromRouteId: currentRouteId,
flushSync: options.flushSync,
viewTransition: options.viewTransition
});
}
},
[router, basename, currentRouteId]
);
}
function useFormAction(action, { relative } = {}) {
let { basename } = React2.useContext(_chunkV6PEDDZIjs.NavigationContext);
let routeContext = React2.useContext(_chunkV6PEDDZIjs.RouteContext);
_chunkV6PEDDZIjs.invariant.call(void 0, routeContext, "useFormAction must be used inside a RouteContext");
let [match] = routeContext.matches.slice(-1);
let path = { ..._chunkV6PEDDZIjs.useResolvedPath.call(void 0, action ? action : ".", { relative }) };
let location = _chunkV6PEDDZIjs.useLocation.call(void 0, );
if (action == null) {
path.search = location.search;
let params = new URLSearchParams(path.search);
let indexValues = params.getAll("index");
let hasNakedIndexParam = indexValues.some((v) => v === "");
if (hasNakedIndexParam) {
params.delete("index");
indexValues.filter((v) => v).forEach((v) => params.append("index", v));
let qs = params.toString();
path.search = qs ? `?${qs}` : "";
}
}
if ((!action || action === ".") && match.route.index) {
path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
}
if (basename !== "/") {
path.pathname = path.pathname === "/" ? basename : _chunkV6PEDDZIjs.joinPaths.call(void 0, [basename, path.pathname]);
}
return _chunkV6PEDDZIjs.createPath.call(void 0, path);
}
function useFetcher({
key
} = {}) {
let { router } = useDataRouterContext("useFetcher" /* UseFetcher */);
let state = useDataRouterState("useFetcher" /* UseFetcher */);
let fetcherData = React2.useContext(_chunkV6PEDDZIjs.FetchersContext);
let route = React2.useContext(_chunkV6PEDDZIjs.RouteContext);
let routeId = _optionalChain([route, 'access', _31 => _31.matches, 'access', _32 => _32[route.matches.length - 1], 'optionalAccess', _33 => _33.route, 'access', _34 => _34.id]);
_chunkV6PEDDZIjs.invariant.call(void 0, fetcherData, `useFetcher must be used inside a FetchersContext`);
_chunkV6PEDDZIjs.invariant.call(void 0, route, `useFetcher must be used inside a RouteContext`);
_chunkV6PEDDZIjs.invariant.call(void 0,
routeId != null,
`useFetcher can only be used on routes that contain a unique "id"`
);
let defaultKey = React2.useId();
let [fetcherKey, setFetcherKey] = React2.useState(key || defaultKey);
if (key && key !== fetcherKey) {
setFetcherKey(key);
}
React2.useEffect(() => {
router.getFetcher(fetcherKey);
return () => router.deleteFetcher(fetcherKey);
}, [router, fetcherKey]);
let load = React2.useCallback(
async (href, opts) => {
_chunkV6PEDDZIjs.invariant.call(void 0, routeId, "No routeId available for fetcher.load()");
await router.fetch(fetcherKey, routeId, href, opts);
},
[fetcherKey, routeId, router]
);
let submitImpl = useSubmit();
let submit = React2.useCallback(
async (target, opts) => {
await submitImpl(target, {
...opts,
navigate: false,
fetcherKey
});
},
[fetcherKey, submitImpl]
);
let FetcherForm = React2.useMemo(() => {
let FetcherForm2 = React2.forwardRef(
(props, ref) => {
return /* @__PURE__ */ React2.createElement(Form, { ...props, navigate: false, fetcherKey, ref });
}
);
FetcherForm2.displayName = "fetcher.Form";
return FetcherForm2;
}, [fetcherKey]);
let fetcher = state.fetchers.get(fetcherKey) || _chunkV6PEDDZIjs.IDLE_FETCHER;
let data = fetcherData.get(fetcherKey);
let fetcherWithComponents = React2.useMemo(
() => ({
Form: FetcherForm,
submit,
load,
...fetcher,
data
}),
[FetcherForm, submit, load, fetcher, data]
);
return fetcherWithComponents;
}
function useFetchers() {
let state = useDataRouterState("useFetchers" /* UseFetchers */);
return Array.from(state.fetchers.entries()).map(([key, fetcher]) => ({
...fetcher,
key
}));
}
var SCROLL_RESTORATION_STORAGE_KEY = "react-router-scroll-positions";
var savedScrollPositions =