@remix-run/react - npm Package Compare versions

Comparing version 0.0.0-experimental-935642c5 to 0.0.0-experimental-9e5da5b0

_virtual/_rollupPluginBabelHelpers.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -39,2 +39,4 @@ * Copyright (c) Remix Software Inc.
 
+// TODO: We eventually might not want to import anything directly from `history`
+
 /**
@@ -41,0 +43,0 @@ * The entry point for a Remix app when it is rendered in the browser (in

components.d.ts

@@ -7,7 +7,27 @@ import type { Action, Location } from "history";
 import type { AppData, FormEncType, FormMethod } from "./data";
-import type { EntryContext } from "./entry";
+import type { EntryContext, AssetsManifest } from "./entry";
+import type { AppState } from "./errors";
 import type { PrefetchPageDescriptor } from "./links";
+import type { ClientRoute } from "./routes";
 import type { RouteData } from "./routeData";
+import type { RouteMatch } from "./routeMatching";
+import type { RouteModules } from "./routeModules";
+import { createTransitionManager } from "./transition";
 import type { Transition, Fetcher } from "./transition";
-export declare function RemixEntry({ context: entryContext, action, location: historyLocation, navigator: _navigator, static: staticProp }: {
+interface RemixEntryContextType {
+    manifest: AssetsManifest;
+    matches: RouteMatch<ClientRoute>[];
+    routeData: {
+        [routeId: string]: RouteData;
+    };
+    actionData?: RouteData;
+    pendingLocation?: Location;
+    appState: AppState;
+    routeModules: RouteModules;
+    serverHandoffString?: string;
+    clientRoutes: ClientRoute[];
+    transitionManager: ReturnType<typeof createTransitionManager>;
+}
+export declare const RemixEntryContext: React.Context<RemixEntryContextType | undefined>;
+export declare function RemixEntry({ context: entryContext, action, location: historyLocation, navigator: _navigator, static: staticProp, }: {
     context: EntryContext;
@@ -25,3 +45,3 @@ action: Action;
  *
- * - "intent": Default, fetched when the user focuses or hovers the link
+ * - "intent": Fetched when the user focuses or hovers the link
  * - "render": Fetched when the link is rendered
@@ -37,12 +57,38 @@ * - "none": Never fetched
 }
-export declare let NavLink: React.ForwardRefExoticComponent<RemixNavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export declare let Link: React.ForwardRefExoticComponent<RemixLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * A special kind of `<Link>` that knows whether or not it is "active".
+ *
+ * @see https://remix.run/api/remix#navlink
+ */
+declare let NavLink: React.ForwardRefExoticComponent<RemixNavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { NavLink };
+/**
+ * This component renders an anchor tag and is the primary way the user will
+ * navigate around your website.
+ *
+ * @see https://remix.run/api/remix#link
+ */
+declare let Link: React.ForwardRefExoticComponent<RemixLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { Link };
 export declare function composeEventHandlers<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;
 /**
  * Renders the `<link>` tags for the current routes.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
 export declare function Links(): JSX.Element;
+/**
+ * This component renders all of the `<link rel="prefetch">` and
+ * `<link rel="modulepreload"/>` tags for all the assets (data, modules, css) of
+ * a given page.
+ *
+ * @param props
+ * @param props.page
+ * @see https://remix.run/api/remix#prefetchpagelinks-
+ */
 export declare function PrefetchPageLinks({ page, ...dataLinkProps }: PrefetchPageDescriptor): JSX.Element | null;
 /**
  * Renders the `<title>` and `<meta>` tags for the current routes.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -58,2 +104,4 @@ export declare function Meta(): JSX.Element;
  * property if provided.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -77,4 +125,4 @@ export declare function Scripts(props: ScriptProps): JSX.Element;
      *
-     * Note: Remix only supports `application/x-www-form-urlencoded` right now
-     * but will soon support `multipart/form-data` as well.
+     * Note: Remix defaults to `application/x-www-form-urlencoded` and also
+     * supports `multipart/form-data`.
      */
@@ -103,10 +151,16 @@ encType?: FormEncType;
  * submitted and returns with data.
+ *
+ * @see https://remix.run/api/remix#form
  */
-export declare let Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+declare let Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+export { Form };
 interface FormImplProps extends FormProps {
     fetchKey?: string;
 }
-export declare let FormImpl: React.ForwardRefExoticComponent<FormImplProps & React.RefAttributes<HTMLFormElement>>;
+declare let FormImpl: React.ForwardRefExoticComponent<FormImplProps & React.RefAttributes<HTMLFormElement>>;
+export { FormImpl };
 /**
  * Resolves a `<form action>` path relative to the current route.
+ *
+ * @see https://remix.run/api/remix#useformaction
  */
@@ -165,2 +219,4 @@ export declare function useFormAction(action?: string, method?: FormMethod): string;
  * some arbitrary data) to the server.
+ *
+ * @see https://remix.run/api/remix#usesubmit
  */
@@ -177,4 +233,12 @@ export declare function useSubmit(): SubmitFunction;
  * `React.useCallback()`.
+ *
+ * @see https://remix.run/api/remix#usebeforeunload
  */
 export declare function useBeforeUnload(callback: () => any): void;
+/**
+ * Returns the current route matches on the page. This is useful for creating
+ * layout abstractions with your current routes.
+ *
+ * @see https://remix.run/api/remix#usematches
+ */
 export declare function useMatches(): {
@@ -188,6 +252,19 @@ id: string;
 /**
- * Returns the data from the current route's `loader`.
+ * Returns the JSON parsed data from the current route's `loader`.
+ *
+ * @see https://remix.run/api/remix#useloaderdata
  */
 export declare function useLoaderData<T = AppData>(): T;
+/**
+ * Returns the JSON parsed data from the current route's `action`.
+ *
+ * @see https://remix.run/api/remix#useactiondata
+ */
 export declare function useActionData<T = AppData>(): T | undefined;
+/**
+ * Returns everything you need to know about a page transition to build pending
+ * navigation indicators and optimistic UI on data mutations.
+ *
+ * @see https://remix.run/api/remix#usetransition
+ */
 export declare function useTransition(): Transition;
@@ -203,2 +280,4 @@ declare function createFetcherForm(fetchKey: string): React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
  * for any interaction that stays on the same page.
+ *
+ * @see https://remix.run/api/remix#usefetcher
  */
@@ -209,7 +288,8 @@ export declare function useFetcher<TData = any>(): FetcherWithComponents<TData>;
  * routes that need to provide pending/optimistic UI regarding the fetch.
+ *
+ * @see https://remix.run/api/remix#usefetchers
  */
 export declare function useFetchers(): Fetcher[];
-export declare function LiveReload({ port }: {
-    port?: number;
-}): JSX.Element | null;
-export {};
+export declare const LiveReload: (() => null) | (({ port, }: {
+    port?: number | undefined;
+}) => JSX.Element);

components.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -296,3 +296,3 @@ * Copyright (c) Remix Software Inc.
  *
- * - "intent": Default, fetched when the user focuses or hovers the link
+ * - "intent": Fetched when the user focuses or hovers the link
  * - "render": Fetched when the link is rendered
@@ -348,3 +348,9 @@ * - "none": Never fetched
 }
+/**
+ * A special kind of `<Link>` that knows whether or not it is "active".
+ *
+ * @see https://remix.run/api/remix#navlink
+ */
 
+
 let NavLink = /*#__PURE__*/React__namespace.forwardRef(({
@@ -360,6 +366,14 @@ to,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React__namespace.createElement(PrefetchPageLinks, {
+  }, props, prefetchHandlers)), shouldPrefetch ? /*#__PURE__*/React__namespace.createElement(PrefetchPageLinks, {
     page: href
   }) : null);
 });
+NavLink.displayName = "NavLink";
+/**
+ * This component renders an anchor tag and is the primary way the user will
+ * navigate around your website.
+ *
+ * @see https://remix.run/api/remix#link
+ */
+
 let Link = /*#__PURE__*/React__namespace.forwardRef(({
@@ -375,6 +389,7 @@ to,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React__namespace.createElement(PrefetchPageLinks, {
+  }, props, prefetchHandlers)), shouldPrefetch ? /*#__PURE__*/React__namespace.createElement(PrefetchPageLinks, {
     page: href
   }) : null);
 });
+Link.displayName = "Link";
 function composeEventHandlers(theirHandler, ourHandler) {
@@ -391,2 +406,4 @@ return event => {
  * Renders the `<link>` tags for the current routes.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -407,2 +424,12 @@
 }
+/**
+ * This component renders all of the `<link rel="prefetch">` and
+ * `<link rel="modulepreload"/>` tags for all the assets (data, modules, css) of
+ * a given page.
+ *
+ * @param props
+ * @param props.page
+ * @see https://remix.run/api/remix#prefetchpagelinks-
+ */
+
 function PrefetchPageLinks({
@@ -481,2 +508,4 @@ page,
  * Renders the `<title>` and `<meta>` tags for the current routes.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -553,2 +582,4 @@
  * property if provided.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -619,2 +650,4 @@ function Scripts(props) {
  * submitted and returns with data.
+ *
+ * @see https://remix.run/api/remix#form
  */
@@ -626,2 +659,3 @@ let Form = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
 });
+Form.displayName = "Form";
 let FormImpl = /*#__PURE__*/React__namespace.forwardRef(({
@@ -663,6 +697,6 @@ reloadDocument = false,
     function handleClick(event) {
-      if (!(event.target instanceof HTMLElement)) return;
+      if (!(event.target instanceof Element)) return;
       let submitButton = event.target.closest("button,input[type=submit]");
 
-      if (submitButton && submitButton.type === "submit") {
+      if (submitButton && submitButton.form === form && submitButton.type === "submit") {
         clickedButtonRef.current = submitButton;
@@ -672,5 +706,5 @@ }
 
-    form.addEventListener("click", handleClick);
+    window.addEventListener("click", handleClick);
     return () => {
-      form && form.removeEventListener("click", handleClick);
+      window.removeEventListener("click", handleClick);
     };
@@ -695,2 +729,3 @@ }, []);
 });
+FormImpl.displayName = "FormImpl";
 
@@ -703,2 +738,4 @@ function isActionRequestMethod(method) {
  * Resolves a `<form action>` path relative to the current route.
+ *
+ * @see https://remix.run/api/remix#useformaction
  */
@@ -725,2 +762,4 @@
  * some arbitrary data) to the server.
+ *
+ * @see https://remix.run/api/remix#usesubmit
  */
@@ -730,2 +769,4 @@ function useSubmit() {
 }
+let defaultMethod = "get";
+let defaultEncType = "application/x-www-form-urlencoded";
 function useSubmitImpl(key) {
@@ -745,5 +786,5 @@ let navigate = reactRouterDom.useNavigate();
       let submissionTrigger = options.submissionTrigger;
-      method = options.method || target.method;
-      action = options.action || target.action;
-      encType = options.encType || target.enctype;
+      method = options.method || target.getAttribute("method") || defaultMethod;
+      action = options.action || target.getAttribute("action") || defaultAction;
+      encType = options.encType || target.getAttribute("enctype") || defaultEncType;
       formData = new FormData(target);
@@ -762,5 +803,5 @@
 
-      method = options.method || target.getAttribute("formmethod") || form.method;
-      action = options.action || target.getAttribute("formaction") || form.action;
-      encType = options.encType || target.getAttribute("formenctype") || form.enctype;
+      method = options.method || target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
+      action = options.action || target.getAttribute("formaction") || form.getAttribute("action") || defaultAction;
+      encType = options.encType || target.getAttribute("formenctype") || form.getAttribute("enctype") || defaultEncType;
       formData = new FormData(form); // Include name + value from a <button>
@@ -797,2 +838,6 @@
 
+    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 {
@@ -872,2 +917,4 @@ protocol,
  * `React.useCallback()`.
+ *
+ * @see https://remix.run/api/remix#usebeforeunload
  */
@@ -884,2 +931,9 @@
 }
+/**
+ * Returns the current route matches on the page. This is useful for creating
+ * layout abstractions with your current routes.
+ *
+ * @see https://remix.run/api/remix#usematches
+ */
+
 function useMatches() {
@@ -891,3 +945,3 @@ let {
   } = useRemixEntryContext();
-  return matches.map(match => {
+  return React__namespace.useMemo(() => matches.map(match => {
     var _routeModules$match$r;
@@ -908,6 +962,8 @@
     };
-  });
+  }), [matches, routeData, routeModules]);
 }
 /**
- * Returns the data from the current route's `loader`.
+ * Returns the JSON parsed data from the current route's `loader`.
+ *
+ * @see https://remix.run/api/remix#useloaderdata
  */
@@ -918,2 +974,8 @@
 }
+/**
+ * Returns the JSON parsed data from the current route's `action`.
+ *
+ * @see https://remix.run/api/remix#useactiondata
+ */
+
 function useActionData() {
@@ -931,2 +993,9 @@ let {
 }
+/**
+ * Returns everything you need to know about a page transition to build pending
+ * navigation indicators and optimistic UI on data mutations.
+ *
+ * @see https://remix.run/api/remix#usetransition
+ */
+
 function useTransition() {
@@ -940,3 +1009,3 @@ let {
 function createFetcherForm(fetchKey) {
-  return /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+  let FetcherForm = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     // TODO: make ANOTHER form w/o a fetchKey prop
@@ -948,2 +1017,4 @@ return /*#__PURE__*/React__namespace.createElement(FormImpl, _rollupPluginBabelHelpers["extends"]({}, props, {
   });
+  FetcherForm.displayName = "fetcher.Form";
+  return FetcherForm;
 }
@@ -956,2 +1027,4 @@
  * for any interaction that stays on the same page.
+ *
+ * @see https://remix.run/api/remix#usefetcher
  */
@@ -990,2 +1063,4 @@ function useFetcher() {
  * routes that need to provide pending/optimistic UI regarding the fetch.
+ *
+ * @see https://remix.run/api/remix#usefetchers
  */
@@ -1001,29 +1076,40 @@
   return [...fetchers.values()];
-}
-function LiveReload({
-  port = 8002
+} // Dead Code Elimination magic for production builds.
+// This way devs don't have to worry about doing the NODE_ENV check themselves.
+
+const LiveReload = process.env.NODE_ENV !== "development" ? () => null : function LiveReload({
+  port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002)
 }) {
-  if (process.env.NODE_ENV !== "development") return null;
+  let setupLiveReload = (port => {
+    let protocol = location.protocol === "https:" ? "wss:" : "ws:";
+    let host = location.hostname;
+    let socketPath = `${protocol}//${host}:${port}/socket`;
+    let ws = new WebSocket(socketPath);
+
+    ws.onmessage = message => {
+      let event = JSON.parse(message.data);
+
+      if (event.type === "LOG") {
+        console.log(event.message);
+      }
+
+      if (event.type === "RELOAD") {
+        console.log("💿 Reloading window ...");
+        window.location.reload();
+      }
+    };
+
+    ws.onerror = error => {
+      console.log("Remix dev asset server web socket error:");
+      console.error(error);
+    };
+  }).toString();
+
   return /*#__PURE__*/React__namespace.createElement("script", {
+    suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
-      __html: `
-          let ws = new WebSocket("ws://localhost:${port}/socket");
-          ws.onmessage = message => {
-            let event = JSON.parse(message.data);
-            if (event.type === "LOG") {
-              console.log(event.message);
-            }
-            if (event.type === "RELOAD") {
-              console.log("💿 Reloading window ...");
-              window.location.reload();
-            }
-          };
-          ws.onerror = error => {
-            console.log("Remix dev asset server web socket error:");
-            console.error(error);
-          };
-      `
+      __html: `(${setupLiveReload})(${JSON.stringify(port)})`
     }
   });
-}
+};
 
@@ -1056,2 +1142,3 @@ function useComposedRefs(...refs) {
 exports.RemixEntry = RemixEntry;
+exports.RemixEntryContext = RemixEntryContext;
 exports.RemixRoute = RemixRoute;
@@ -1058,0 +1145,0 @@ exports.Scripts = Scripts;

data.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -28,4 +28,2 @@ * Copyright (c) Remix Software Inc.
   url.searchParams.set("_data", routeId);
-  url.searchParams.sort(); // Improves caching
-
   let init = submission ? getActionInit(submission, signal) : {
@@ -32,0 +30,0 @@ credentials: "same-origin",

errorBoundaries.d.ts

@@ -31,2 +31,7 @@ import type { Location } from "history";
 }): JSX.Element;
+/**
+ * Returns the status code and thrown response data.
+ *
+ * @see https://remix.run/api/conventions#catchboundary
+ */
 export declare function useCatch<Result extends ThrownResponse = ThrownResponse>(): Result;
@@ -38,3 +43,3 @@ declare type RemixCatchBoundaryProps = React.PropsWithChildren<{
 }>;
-export declare function RemixCatchBoundary({ catch: catchVal, component: Component, children }: RemixCatchBoundaryProps): JSX.Element;
+export declare function RemixCatchBoundary({ catch: catchVal, component: Component, children, }: RemixCatchBoundaryProps): JSX.Element;
 /**
@@ -41,0 +46,0 @@ * When app's don't provide a root level CatchBoundary, we default to this.

errorBoundaries.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -21,2 +21,3 @@ * Copyright (c) Remix Software Inc.
 
+// TODO: We eventually might not want to import anything directly from `history`
 class RemixErrorBoundary extends React__default["default"].Component {
@@ -110,3 +111,3 @@ constructor(props) {
               console.log(
-                "💿 Hey developer👋. You can provide a way better UX when your app throws errors than this. Check out https://remix.run/guides/errors for more information."
+                "💿 Hey developer👋. You can provide a way better UX than this when your app throws errors. Check out https://remix.run/guides/errors for more information."
               );
@@ -118,2 +119,8 @@ `
 let RemixCatchContext = /*#__PURE__*/React__default["default"].createContext(undefined);
+/**
+ * Returns the status code and thrown response data.
+ *
+ * @see https://remix.run/api/conventions#catchboundary
+ */
+
 function useCatch() {
@@ -157,3 +164,3 @@ return React.useContext(RemixCatchContext);
               console.log(
-                "💿 Hey developer👋. You can provide a way better UX when your app throws 404s (and other responses) than this. Check out https://remix.run/guides/not-found for more information."
+                "💿 Hey developer👋. You can provide a way better UX than this when your app throws 404s (and other responses). Check out https://remix.run/guides/not-found for more information."
               );
@@ -160,0 +167,0 @@ `

esm/_virtual/_rollupPluginBabelHelpers.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

esm/browser.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -15,2 +15,4 @@ * Copyright (c) Remix Software Inc.
 
+// TODO: We eventually might not want to import anything directly from `history`
+
 /**
@@ -17,0 +19,0 @@ * The entry point for a Remix app when it is rendered in the browser (in

esm/components.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -272,3 +272,3 @@ * Copyright (c) Remix Software Inc.
  *
- * - "intent": Default, fetched when the user focuses or hovers the link
+ * - "intent": Fetched when the user focuses or hovers the link
  * - "render": Fetched when the link is rendered
@@ -324,3 +324,9 @@ * - "none": Never fetched
 }
+/**
+ * A special kind of `<Link>` that knows whether or not it is "active".
+ *
+ * @see https://remix.run/api/remix#navlink
+ */
 
+
 let NavLink = /*#__PURE__*/React.forwardRef(({
@@ -336,6 +342,14 @@ to,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React.createElement(PrefetchPageLinks, {
+  }, props, prefetchHandlers)), shouldPrefetch ? /*#__PURE__*/React.createElement(PrefetchPageLinks, {
     page: href
   }) : null);
 });
+NavLink.displayName = "NavLink";
+/**
+ * This component renders an anchor tag and is the primary way the user will
+ * navigate around your website.
+ *
+ * @see https://remix.run/api/remix#link
+ */
+
 let Link = /*#__PURE__*/React.forwardRef(({
@@ -351,6 +365,7 @@ to,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React.createElement(PrefetchPageLinks, {
+  }, props, prefetchHandlers)), shouldPrefetch ? /*#__PURE__*/React.createElement(PrefetchPageLinks, {
     page: href
   }) : null);
 });
+Link.displayName = "Link";
 function composeEventHandlers(theirHandler, ourHandler) {
@@ -367,2 +382,4 @@ return event => {
  * Renders the `<link>` tags for the current routes.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -383,2 +400,12 @@
 }
+/**
+ * This component renders all of the `<link rel="prefetch">` and
+ * `<link rel="modulepreload"/>` tags for all the assets (data, modules, css) of
+ * a given page.
+ *
+ * @param props
+ * @param props.page
+ * @see https://remix.run/api/remix#prefetchpagelinks-
+ */
+
 function PrefetchPageLinks({
@@ -457,2 +484,4 @@ page,
  * Renders the `<title>` and `<meta>` tags for the current routes.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -529,2 +558,4 @@
  * property if provided.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -595,2 +626,4 @@ function Scripts(props) {
  * submitted and returns with data.
+ *
+ * @see https://remix.run/api/remix#form
  */
@@ -602,2 +635,3 @@ let Form = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
+Form.displayName = "Form";
 let FormImpl = /*#__PURE__*/React.forwardRef(({
@@ -639,6 +673,6 @@ reloadDocument = false,
     function handleClick(event) {
-      if (!(event.target instanceof HTMLElement)) return;
+      if (!(event.target instanceof Element)) return;
       let submitButton = event.target.closest("button,input[type=submit]");
 
-      if (submitButton && submitButton.type === "submit") {
+      if (submitButton && submitButton.form === form && submitButton.type === "submit") {
         clickedButtonRef.current = submitButton;
@@ -648,5 +682,5 @@ }
 
-    form.addEventListener("click", handleClick);
+    window.addEventListener("click", handleClick);
     return () => {
-      form && form.removeEventListener("click", handleClick);
+      window.removeEventListener("click", handleClick);
     };
@@ -671,2 +705,3 @@ }, []);
 });
+FormImpl.displayName = "FormImpl";
 
@@ -679,2 +714,4 @@ function isActionRequestMethod(method) {
  * Resolves a `<form action>` path relative to the current route.
+ *
+ * @see https://remix.run/api/remix#useformaction
  */
@@ -701,2 +738,4 @@
  * some arbitrary data) to the server.
+ *
+ * @see https://remix.run/api/remix#usesubmit
  */
@@ -706,2 +745,4 @@ function useSubmit() {
 }
+let defaultMethod = "get";
+let defaultEncType = "application/x-www-form-urlencoded";
 function useSubmitImpl(key) {
@@ -721,5 +762,5 @@ let navigate = useNavigate();
       let submissionTrigger = options.submissionTrigger;
-      method = options.method || target.method;
-      action = options.action || target.action;
-      encType = options.encType || target.enctype;
+      method = options.method || target.getAttribute("method") || defaultMethod;
+      action = options.action || target.getAttribute("action") || defaultAction;
+      encType = options.encType || target.getAttribute("enctype") || defaultEncType;
       formData = new FormData(target);
@@ -738,5 +779,5 @@
 
-      method = options.method || target.getAttribute("formmethod") || form.method;
-      action = options.action || target.getAttribute("formaction") || form.action;
-      encType = options.encType || target.getAttribute("formenctype") || form.enctype;
+      method = options.method || target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
+      action = options.action || target.getAttribute("formaction") || form.getAttribute("action") || defaultAction;
+      encType = options.encType || target.getAttribute("formenctype") || form.getAttribute("enctype") || defaultEncType;
       formData = new FormData(form); // Include name + value from a <button>
@@ -773,2 +814,6 @@
 
+    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 {
@@ -848,2 +893,4 @@ protocol,
  * `React.useCallback()`.
+ *
+ * @see https://remix.run/api/remix#usebeforeunload
  */
@@ -860,2 +907,9 @@
 }
+/**
+ * Returns the current route matches on the page. This is useful for creating
+ * layout abstractions with your current routes.
+ *
+ * @see https://remix.run/api/remix#usematches
+ */
+
 function useMatches() {
@@ -867,3 +921,3 @@ let {
   } = useRemixEntryContext();
-  return matches.map(match => {
+  return React.useMemo(() => matches.map(match => {
     var _routeModules$match$r;
@@ -884,6 +938,8 @@
     };
-  });
+  }), [matches, routeData, routeModules]);
 }
 /**
- * Returns the data from the current route's `loader`.
+ * Returns the JSON parsed data from the current route's `loader`.
+ *
+ * @see https://remix.run/api/remix#useloaderdata
  */
@@ -894,2 +950,8 @@
 }
+/**
+ * Returns the JSON parsed data from the current route's `action`.
+ *
+ * @see https://remix.run/api/remix#useactiondata
+ */
+
 function useActionData() {
@@ -907,2 +969,9 @@ let {
 }
+/**
+ * Returns everything you need to know about a page transition to build pending
+ * navigation indicators and optimistic UI on data mutations.
+ *
+ * @see https://remix.run/api/remix#usetransition
+ */
+
 function useTransition() {
@@ -916,3 +985,3 @@ let {
 function createFetcherForm(fetchKey) {
-  return /*#__PURE__*/React.forwardRef((props, ref) => {
+  let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
     // TODO: make ANOTHER form w/o a fetchKey prop
@@ -924,2 +993,4 @@ return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
   });
+  FetcherForm.displayName = "fetcher.Form";
+  return FetcherForm;
 }
@@ -932,2 +1003,4 @@
  * for any interaction that stays on the same page.
+ *
+ * @see https://remix.run/api/remix#usefetcher
  */
@@ -966,2 +1039,4 @@ function useFetcher() {
  * routes that need to provide pending/optimistic UI regarding the fetch.
+ *
+ * @see https://remix.run/api/remix#usefetchers
  */
@@ -977,29 +1052,40 @@
   return [...fetchers.values()];
-}
-function LiveReload({
-  port = 8002
+} // Dead Code Elimination magic for production builds.
+// This way devs don't have to worry about doing the NODE_ENV check themselves.
+
+const LiveReload = process.env.NODE_ENV !== "development" ? () => null : function LiveReload({
+  port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002)
 }) {
-  if (process.env.NODE_ENV !== "development") return null;
+  let setupLiveReload = (port => {
+    let protocol = location.protocol === "https:" ? "wss:" : "ws:";
+    let host = location.hostname;
+    let socketPath = `${protocol}//${host}:${port}/socket`;
+    let ws = new WebSocket(socketPath);
+
+    ws.onmessage = message => {
+      let event = JSON.parse(message.data);
+
+      if (event.type === "LOG") {
+        console.log(event.message);
+      }
+
+      if (event.type === "RELOAD") {
+        console.log("💿 Reloading window ...");
+        window.location.reload();
+      }
+    };
+
+    ws.onerror = error => {
+      console.log("Remix dev asset server web socket error:");
+      console.error(error);
+    };
+  }).toString();
+
   return /*#__PURE__*/React.createElement("script", {
+    suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
-      __html: `
-          let ws = new WebSocket("ws://localhost:${port}/socket");
-          ws.onmessage = message => {
-            let event = JSON.parse(message.data);
-            if (event.type === "LOG") {
-              console.log(event.message);
-            }
-            if (event.type === "RELOAD") {
-              console.log("💿 Reloading window ...");
-              window.location.reload();
-            }
-          };
-          ws.onerror = error => {
-            console.log("Remix dev asset server web socket error:");
-            console.error(error);
-          };
-      `
+      __html: `(${setupLiveReload})(${JSON.stringify(port)})`
     }
   });
-}
+};
 
@@ -1023,2 +1109,2 @@ function useComposedRefs(...refs) {
 
-export { Form, FormImpl, Link, Links, LiveReload, Meta, NavLink, PrefetchPageLinks, RemixEntry, RemixRoute, Scripts, composeEventHandlers, useActionData, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, useSubmit, useSubmitImpl, useTransition };
+export { Form, FormImpl, Link, Links, LiveReload, Meta, NavLink, PrefetchPageLinks, RemixEntry, RemixEntryContext, RemixRoute, Scripts, composeEventHandlers, useActionData, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, useSubmit, useSubmitImpl, useTransition };

esm/data.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -24,4 +24,2 @@ * Copyright (c) Remix Software Inc.
   url.searchParams.set("_data", routeId);
-  url.searchParams.sort(); // Improves caching
-
   let init = submission ? getActionInit(submission, signal) : {
@@ -28,0 +26,0 @@ credentials: "same-origin",

esm/errorBoundaries.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -13,2 +13,3 @@ * Copyright (c) Remix Software Inc.
 
+// TODO: We eventually might not want to import anything directly from `history`
 class RemixErrorBoundary extends React__default.Component {
@@ -102,3 +103,3 @@ constructor(props) {
               console.log(
-                "💿 Hey developer👋. You can provide a way better UX when your app throws errors than this. Check out https://remix.run/guides/errors for more information."
+                "💿 Hey developer👋. You can provide a way better UX than this when your app throws errors. Check out https://remix.run/guides/errors for more information."
               );
@@ -110,2 +111,8 @@ `
 let RemixCatchContext = /*#__PURE__*/React__default.createContext(undefined);
+/**
+ * Returns the status code and thrown response data.
+ *
+ * @see https://remix.run/api/conventions#catchboundary
+ */
+
 function useCatch() {
@@ -149,3 +156,3 @@ return useContext(RemixCatchContext);
               console.log(
-                "💿 Hey developer👋. You can provide a way better UX when your app throws 404s (and other responses) than this. Check out https://remix.run/guides/not-found for more information."
+                "💿 Hey developer👋. You can provide a way better UX than this when your app throws 404s (and other responses). Check out https://remix.run/guides/not-found for more information."
               );
@@ -152,0 +159,0 @@ `

esm/index.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

esm/invariant.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

esm/links.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -14,9 +14,3 @@ * Copyright (c) Remix Software Inc.
 
-// import type { Location } from "history";
-/**
- * Represents a `<link>` element.
- *
- * WHATWG Specification: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
- */
-
+// TODO: We eventually might not want to import anything directly from `history`
 ////////////////////////////////////////////////////////////////////////////////
@@ -101,15 +95,9 @@
     ...attrs
-  }) => {
-    if (rel === "preload") {
-      return {
-        rel: "prefetch",
-        ...attrs
-      };
-    }
-
-    return {
-      rel: "prefetch",
-      as: "style",
-      ...attrs
-    };
+  }) => rel === "preload" ? {
+    rel: "prefetch",
+    ...attrs
+  } : {
+    rel: "prefetch",
+    as: "style",
+    ...attrs
   });
@@ -130,3 +118,5 @@ } // This is ridiculously identical to transition.ts `filterMatchesToLoad`
     return (// param change, /users/123 -> /users/456
-      currentMatches[index].pathname !== match.pathname || ((_currentMatches$index = currentMatches[index].route.path) === null || _currentMatches$index === void 0 ? void 0 : _currentMatches$index.endsWith("*")) && currentMatches[index].params["*"] !== match.params["*"]
+      currentMatches[index].pathname !== match.pathname || // splat param changed, which is not present in match.path
+      // e.g. /files/images/avatar.jpg -> files/finances.xls
+      ((_currentMatches$index = currentMatches[index].route.path) === null || _currentMatches$index === void 0 ? void 0 : _currentMatches$index.endsWith("*")) && currentMatches[index].params["*"] !== match.params["*"]
     );
@@ -158,3 +148,3 @@ }; // NOTE: keep this mostly up-to-date w/ the transition data diff, but this
   }) : nextMatches.filter((match, index) => {
-    return match.route.hasLoader && (isNew(match, index) || matchPathChanged(match, index));
+    return (mode === "assets" || match.route.hasLoader) && (isNew(match, index) || matchPathChanged(match, index));
   });
@@ -171,3 +161,3 @@ return newMatches;
     let searchParams = new URLSearchParams(search);
-    searchParams.append("_data", match.route.id);
+    searchParams.set("_data", match.route.id);
     return `${pathname}?${searchParams}`;
@@ -174,0 +164,0 @@ }));

esm/markup.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

esm/routeMatching.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -13,3 +13,3 @@ * Copyright (c) Remix Software Inc.
 
-// TODO: export/import from react-router-dom
+// TODO: We eventually might not want to import anything directly from `history`
 function matchClientRoutes(routes, location) {
@@ -16,0 +16,0 @@ let matches = matchRoutes(routes, location);

esm/routeModules.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -11,2 +11,4 @@ * Copyright (c) Remix Software Inc.
  */
+// TODO: We eventually might not want to import anything directly from `history`
+// and leverage `react-router` here instead
 // TODO: import/export from react-router-dom
@@ -16,2 +18,4 @@
  * A React component that is rendered when the server throws a Response.
+ *
+ * @see https://remix.run/api/conventions#catchboundary
  */
@@ -21,2 +25,4 @@
  * A React component that is rendered when there is an error on a route.
+ *
+ * @see https://remix.run/api/conventions#errorboundary
  */
@@ -27,2 +33,4 @@
  * the document on route transitions.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -34,2 +42,4 @@
  * precedence over) tags from parent routes.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -54,2 +64,4 @@
  * to be reloaded.
+ *
+ * @see https://remix.run/api/conventions#unstable_shouldreload
  */
@@ -63,2 +75,4 @@
  * An arbitrary object that is associated with a route.
+ *
+ * @see https://remix.run/api/conventions#handle
  */
@@ -65,0 +79,0 @@ async function loadRouteModule(route, routeModulesCache) {

esm/routes.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

esm/scroll-restoration.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -25,3 +25,10 @@ * Copyright (c) Remix Software Inc.
 }
+/**
+ * This component will emulate the browser's scroll restoration on location
+ * changes.
+ *
+ * @see https://remix.run/api/remix#scrollrestoration
+ */
 
+
 function ScrollRestoration() {
@@ -37,20 +44,28 @@ useScrollRestoration(); // wait for the browser to restore it on its own
   }, []));
+
+  let restoreScroll = (STORAGE_KEY => {
+    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(STORAGE_KEY) || "{}");
+      let storedY = positions[window.history.state.key];
+
+      if (typeof storedY === "number") {
+        window.scrollTo(0, storedY);
+      }
+    } catch (error) {
+      console.error(error);
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  }).toString();
+
   return /*#__PURE__*/React.createElement("script", {
+    suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
-      __html: `
-          let STORAGE_KEY = ${JSON.stringify(STORAGE_KEY)};
-          if (!window.history.state || !window.history.state.key) {
-            window.history.replaceState({ key: Math.random().toString(32).slice(2) }, null);
-          }
-          try {
-            let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) ?? '{}')
-            let storedY = positions[window.history.state.key];
-            if (typeof storedY === 'number') {
-              window.scrollTo(0, storedY)
-            }
-          } catch(error) {
-            console.error(error)
-            sessionStorage.removeItem(STORAGE_KEY)
-          }
-        `
+      __html: `(${restoreScroll})(${JSON.stringify(STORAGE_KEY)})`
     }
@@ -91,3 +106,3 @@ });
 
-      if (y) {
+      if (y != undefined) {
         window.scrollTo(0, y);
@@ -99,3 +114,3 @@ return;
       if (location.hash) {
-        let el = document.querySelector(location.hash);
+        let el = document.getElementById(location.hash.slice(1));
 
@@ -102,0 +117,0 @@ if (el) {

esm/server.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -15,2 +15,4 @@ * Copyright (c) Remix Software Inc.
 
+// TODO: We eventually might not want to import anything directly from `history`
+
 /**
@@ -17,0 +19,0 @@ * The entry point for a Remix app when it is rendered on the server (in

esm/transition.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -15,2 +15,6 @@ * Copyright (c) Remix Software Inc.
 
+// TODO: We eventually might not want to import anything directly from `history`
+//#region Types and Utils
+////////////////////////////////////////////////////////////////////////////////
+
 class CatchValue {
@@ -25,3 +29,2 @@ constructor(status, statusText, data) {
 
-////////////////////////////////////////////////////////////////////////////////
 function isActionSubmission(submission) {
@@ -72,3 +75,7 @@ return ["POST", "PUT", "PATCH", "DELETE"].includes(submission.method);
   submission: undefined
-};
+}; //#endregion
+////////////////////////////////////////////////////////////////////////////////
+//#region createTransitionManager
+////////////////////////////////////////////////////////////////////////////////
+
 function createTransitionManager(init) {
@@ -83,2 +90,3 @@ let {
   let fetchReloadIds = new Map();
+  let fetchRedirectIds = new Set();
   let matches = matchClientRoutes(routes, init.location);
@@ -111,2 +119,8 @@
   function update(updates) {
+    if (updates.transition) {
+      if (updates.transition === IDLE_TRANSITION) {
+        pendingNavigationController = undefined;
+      }
+    }
+
     state = Object.assign({}, state, updates);
@@ -124,5 +138,10 @@ init.onChange(state);
 
+  function setFetcher(key, fetcher) {
+    state.fetchers.set(key, fetcher);
+  }
+
   function deleteFetcher(key) {
     if (fetchControllers.has(key)) abortFetcher(key);
     fetchReloadIds.delete(key);
+    fetchRedirectIds.delete(key);
     state.fetchers.delete(key);
@@ -228,3 +247,3 @@ }
     };
-    state.fetchers.set(key, fetcher);
+    setFetcher(key, fetcher);
     update({
@@ -246,3 +265,14 @@ fetchers: new Map(state.fetchers)
       };
+      fetchRedirectIds.add(key);
       init.onRedirect(result.value.location, locationState);
+      let loadingFetcher = {
+        state: "loading",
+        type: "actionRedirect",
+        submission,
+        data: undefined
+      };
+      setFetcher(key, loadingFetcher);
+      update({
+        fetchers: new Map(state.fetchers)
+      });
       return;
@@ -265,3 +295,3 @@ }
     };
-    state.fetchers.set(key, loadFetcher);
+    setFetcher(key, loadFetcher);
     update({
@@ -303,3 +333,3 @@ fetchers: new Map(state.fetchers)
     };
-    state.fetchers.set(key, doneFetcher);
+    setFetcher(key, doneFetcher);
     let abortedKeys = abortStaleFetchLoads(loadId);
@@ -361,3 +391,3 @@
       };
-      state.fetchers.set(key, doneFetcher);
+      setFetcher(key, doneFetcher);
     }
@@ -393,3 +423,3 @@ }
     };
-    state.fetchers.set(key, fetcher);
+    setFetcher(key, fetcher);
     update({
@@ -430,3 +460,3 @@ fetchers: new Map(state.fetchers)
     };
-    state.fetchers.set(key, doneFetcher);
+    setFetcher(key, doneFetcher);
     update({
@@ -438,2 +468,6 @@ fetchers: new Map(state.fetchers)
   async function handleLoaderFetch(href, key, match) {
+    if (typeof AbortController === "undefined") {
+      throw new Error("handleLoaderFetch was called during the server render, but it shouldn't be. " + "You are likely calling useFetcher.load() in the body of your component. " + "Try moving it to a useEffect or a callback.");
+    }
+
     let currentFetcher = state.fetchers.get(key);
@@ -446,3 +480,3 @@ let fetcher = {
     };
-    state.fetchers.set(key, fetcher);
+    setFetcher(key, fetcher);
     update({
@@ -480,3 +514,3 @@ fetchers: new Map(state.fetchers)
     };
-    state.fetchers.set(key, doneFetcher);
+    setFetcher(key, doneFetcher);
     update({
@@ -783,2 +817,3 @@ fetchers: new Map(state.fetchers)
     let [catchVal, catchBoundaryId] = await findCatchAndBoundaryId(results, matches, maybeActionErrorResult);
+    markFetchRedirectsDone();
     let abortedIds = abortStaleFetchLoads(navigationLoadId);
@@ -805,5 +840,5 @@
   function abortNormalNavigation() {
-    var _pendingNavigationCon;
-
-    (_pendingNavigationCon = pendingNavigationController) === null || _pendingNavigationCon === void 0 ? void 0 : _pendingNavigationCon.abort();
+    if (pendingNavigationController) {
+      pendingNavigationController.abort();
+    }
   }
@@ -818,2 +853,18 @@
 
+  function markFetchRedirectsDone() {
+    let doneKeys = [];
+
+    for (let key of fetchRedirectIds) {
+      let fetcher = state.fetchers.get(key);
+      invariant(fetcher, `Expected fetcher: ${key}`);
+
+      if (fetcher.type === "actionRedirect") {
+        fetchRedirectIds.delete(key);
+        doneKeys.push(key);
+      }
+    }
+
+    markFetchersDone(doneKeys);
+  }
+
   return {
@@ -831,3 +882,6 @@ send,
   };
-} ////////////////////////////////////////////////////////////////////////////////
+} //#endregion
+////////////////////////////////////////////////////////////////////////////////
+//#region createTransitionManager sub-functions
+////////////////////////////////////////////////////////////////////////////////
 
@@ -930,3 +984,5 @@ function isIndexRequestAction(action) {
     return (// param change, /users/123 -> /users/456
-      state.matches[index].pathname !== match.pathname || ((_state$matches$index$ = state.matches[index].route.path) === null || _state$matches$index$ === void 0 ? void 0 : _state$matches$index$.endsWith("*")) && state.matches[index].params["*"] !== match.params["*"]
+      state.matches[index].pathname !== match.pathname || // splat param changed, which is not present in match.path
+      // e.g. /files/images/avatar.jpg -> files/finances.xls
+      ((_state$matches$index$ = state.matches[index].route.path) === null || _state$matches$index$ === void 0 ? void 0 : _state$matches$index$.endsWith("*")) && state.matches[index].params["*"] !== match.params["*"]
     );
@@ -968,3 +1024,3 @@ };
   createHref(url) === createHref(state.location) || // search affects all loaders
-  url.searchParams.toString() !== state.location.search) {
+  url.searchParams.toString() !== state.location.search.substring(1)) {
     return matches.filter(filterByRouteProps);
@@ -1133,4 +1189,4 @@ }
   return new URL(href, window.location.origin);
-}
+} //#endregion
 
 export { CatchValue, IDLE_FETCHER, IDLE_TRANSITION, TransitionRedirect, createTransitionManager };

index.d.ts

 export type { RemixBrowserProps } from "./browser";
 export { RemixBrowser } from "./browser";
-export { useHref, useLocation, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useSearchParams, Outlet, useOutletContext } from "react-router-dom";
-export type { FormProps, SubmitOptions, SubmitFunction, RemixNavLinkProps as NavLinkProps, RemixLinkProps as LinkProps } from "./components";
-export { Meta, Links, Scripts, Link, NavLink, Form, PrefetchPageLinks, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useLoaderData, useActionData, useBeforeUnload, useMatches } from "./components";
+export { useHref, useLocation, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useSearchParams, Outlet, useOutletContext, } from "react-router-dom";
+export type { FormProps, SubmitOptions, SubmitFunction, RemixNavLinkProps as NavLinkProps, RemixLinkProps as LinkProps, } from "./components";
+export { Meta, Links, Scripts, Link, NavLink, Form, PrefetchPageLinks, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useLoaderData, useActionData, useBeforeUnload, useMatches, } from "./components";
 export type { FormMethod, FormEncType } from "./data";
@@ -7,0 +7,0 @@ export type { ThrownResponse } from "./errors";

index.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

invariant.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

links.d.ts

@@ -6,2 +6,4 @@ import type { Location } from "history";
 import type { RouteModules, RouteModule } from "./routeModules";
+declare type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+declare type LiteralUnion<LiteralType, BaseType extends Primitive> = LiteralType | (BaseType & Record<never, never>);
 /**
@@ -24,3 +26,3 @@ * Represents a `<link>` element.
      */
-    rel: "alternate" | "dns-prefetch" | "icon" | "manifest" | "modulepreload" | "next" | "pingback" | "preconnect" | "prefetch" | "preload" | "prerender" | "search" | "stylesheet" | string;
+    rel: LiteralUnion<"alternate" | "dns-prefetch" | "icon" | "manifest" | "modulepreload" | "next" | "pingback" | "preconnect" | "prefetch" | "preload" | "prerender" | "search" | "stylesheet", string>;
     /**
@@ -61,3 +63,3 @@ * Applicable media: "screen", "print", "(max-width: 764px)"
      */
-    as?: "audio" | "audioworklet" | "document" | "embed" | "fetch" | "font" | "frame" | "iframe" | "image" | "manifest" | "object" | "paintworklet" | "report" | "script" | "serviceworker" | "sharedworker" | "style" | "track" | "video" | "worker" | "xslt" | string;
+    as?: LiteralUnion<"audio" | "audioworklet" | "document" | "embed" | "fetch" | "font" | "frame" | "iframe" | "image" | "manifest" | "object" | "paintworklet" | "report" | "script" | "serviceworker" | "sharedworker" | "style" | "track" | "video" | "worker" | "xslt", string>;
     /**
@@ -135,3 +137,3 @@ * Color to use when customizing a site's icon (for rel="mask-icon")
      */
-    as?: string | undefined;
+    as?: LiteralUnion<"object" | "style" | "embed" | "font" | "audio" | "iframe" | "script" | "track" | "video" | "image" | "manifest" | "document" | "audioworklet" | "fetch" | "frame" | "paintworklet" | "report" | "serviceworker" | "sharedworker" | "worker" | "xslt", string> | undefined;
     /**
@@ -155,1 +157,2 @@ * Color to use when customizing a site's icon (for rel="mask-icon")
 export declare function dedupe(descriptors: LinkDescriptor[], preloads: string[]): LinkDescriptor[];
+export {};

links.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -18,9 +18,3 @@ * Copyright (c) Remix Software Inc.
 
-// import type { Location } from "history";
-/**
- * Represents a `<link>` element.
- *
- * WHATWG Specification: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
- */
-
+// TODO: We eventually might not want to import anything directly from `history`
 ////////////////////////////////////////////////////////////////////////////////
@@ -105,15 +99,9 @@
     ...attrs
-  }) => {
-    if (rel === "preload") {
-      return {
-        rel: "prefetch",
-        ...attrs
-      };
-    }
-
-    return {
-      rel: "prefetch",
-      as: "style",
-      ...attrs
-    };
+  }) => rel === "preload" ? {
+    rel: "prefetch",
+    ...attrs
+  } : {
+    rel: "prefetch",
+    as: "style",
+    ...attrs
   });
@@ -134,3 +122,5 @@ } // This is ridiculously identical to transition.ts `filterMatchesToLoad`
     return (// param change, /users/123 -> /users/456
-      currentMatches[index].pathname !== match.pathname || ((_currentMatches$index = currentMatches[index].route.path) === null || _currentMatches$index === void 0 ? void 0 : _currentMatches$index.endsWith("*")) && currentMatches[index].params["*"] !== match.params["*"]
+      currentMatches[index].pathname !== match.pathname || // splat param changed, which is not present in match.path
+      // e.g. /files/images/avatar.jpg -> files/finances.xls
+      ((_currentMatches$index = currentMatches[index].route.path) === null || _currentMatches$index === void 0 ? void 0 : _currentMatches$index.endsWith("*")) && currentMatches[index].params["*"] !== match.params["*"]
     );
@@ -162,3 +152,3 @@ }; // NOTE: keep this mostly up-to-date w/ the transition data diff, but this
   }) : nextMatches.filter((match, index) => {
-    return match.route.hasLoader && (isNew(match, index) || matchPathChanged(match, index));
+    return (mode === "assets" || match.route.hasLoader) && (isNew(match, index) || matchPathChanged(match, index));
   });
@@ -175,3 +165,3 @@ return newMatches;
     let searchParams = new URLSearchParams(search);
-    searchParams.append("_data", match.route.id);
+    searchParams.set("_data", match.route.id);
     return `${pathname}?${searchParams}`;
@@ -178,0 +168,0 @@ }));

markup.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

package.json

 {
   "name": "@remix-run/react",
   "description": "React DOM bindings for Remix",
-  "version": "0.0.0-experimental-935642c5",
+  "version": "0.0.0-experimental-9e5da5b0",
   "license": "MIT",
@@ -17,3 +17,4 @@ "repository": {
   "dependencies": {
-    "react-router-dom": "^6.2.1"
+    "history": "^5.3.0",
+    "react-router-dom": "^6.2.2"
   },
@@ -25,2 +26,4 @@ "peerDependencies": {
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
     "abort-controller": "^3.0.0"
@@ -27,0 +30,0 @@ },

routeMatching.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -17,3 +17,3 @@ * Copyright (c) Remix Software Inc.
 
-// TODO: export/import from react-router-dom
+// TODO: We eventually might not want to import anything directly from `history`
 function matchClientRoutes(routes, location) {
@@ -20,0 +20,0 @@ let matches = reactRouterDom.matchRoutes(routes, location);

routeModules.d.ts

@@ -23,2 +23,4 @@ import type { Location } from "history";
  * A React component that is rendered when the server throws a Response.
+ *
+ * @see https://remix.run/api/conventions#catchboundary
  */
@@ -28,2 +30,4 @@ export declare type CatchBoundaryComponent = ComponentType<{}>;
  * A React component that is rendered when there is an error on a route.
+ *
+ * @see https://remix.run/api/conventions#errorboundary
  */
@@ -36,2 +40,4 @@ export declare type ErrorBoundaryComponent = ComponentType<{
  * the document on route transitions.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -45,2 +51,4 @@ export interface LinksFunction {
  * precedence over) tags from parent routes.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -74,2 +82,4 @@ export interface MetaFunction {
  * to be reloaded.
+ *
+ * @see https://remix.run/api/conventions#unstable_shouldreload
  */
@@ -90,4 +100,6 @@ export interface ShouldReloadFunction {
  * An arbitrary object that is associated with a route.
+ *
+ * @see https://remix.run/api/conventions#handle
  */
 export declare type RouteHandle = any;
 export declare function loadRouteModule(route: EntryRoute | ClientRoute, routeModulesCache: RouteModules): Promise<RouteModule>;

routeModules.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -33,2 +33,4 @@ * Copyright (c) Remix Software Inc.
 
+// TODO: We eventually might not want to import anything directly from `history`
+// and leverage `react-router` here instead
 // TODO: import/export from react-router-dom
@@ -38,2 +40,4 @@
  * A React component that is rendered when the server throws a Response.
+ *
+ * @see https://remix.run/api/conventions#catchboundary
  */
@@ -43,2 +47,4 @@
  * A React component that is rendered when there is an error on a route.
+ *
+ * @see https://remix.run/api/conventions#errorboundary
  */
@@ -49,2 +55,4 @@
  * the document on route transitions.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -56,2 +64,4 @@
  * precedence over) tags from parent routes.
+ *
+ * @see https://remix.run/api/remix#meta-links-scripts
  */
@@ -76,2 +86,4 @@
  * to be reloaded.
+ *
+ * @see https://remix.run/api/conventions#unstable_shouldreload
  */
@@ -85,2 +97,4 @@
  * An arbitrary object that is associated with a route.
+ *
+ * @see https://remix.run/api/conventions#handle
  */
@@ -87,0 +101,0 @@ async function loadRouteModule(route, routeModulesCache) {

routes.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

scroll-restoration.d.ts

 /// <reference types="react" />
+/**
+ * This component will emulate the browser's scroll restoration on location
+ * changes.
+ *
+ * @see https://remix.run/api/remix#scrollrestoration
+ */
 export declare function ScrollRestoration(): JSX.Element;

scroll-restoration.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -49,3 +49,10 @@ * Copyright (c) Remix Software Inc.
 }
+/**
+ * This component will emulate the browser's scroll restoration on location
+ * changes.
+ *
+ * @see https://remix.run/api/remix#scrollrestoration
+ */
 
+
 function ScrollRestoration() {
@@ -61,20 +68,28 @@ useScrollRestoration(); // wait for the browser to restore it on its own
   }, []));
+
+  let restoreScroll = (STORAGE_KEY => {
+    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(STORAGE_KEY) || "{}");
+      let storedY = positions[window.history.state.key];
+
+      if (typeof storedY === "number") {
+        window.scrollTo(0, storedY);
+      }
+    } catch (error) {
+      console.error(error);
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  }).toString();
+
   return /*#__PURE__*/React__namespace.createElement("script", {
+    suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
-      __html: `
-          let STORAGE_KEY = ${JSON.stringify(STORAGE_KEY)};
-          if (!window.history.state || !window.history.state.key) {
-            window.history.replaceState({ key: Math.random().toString(32).slice(2) }, null);
-          }
-          try {
-            let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) ?? '{}')
-            let storedY = positions[window.history.state.key];
-            if (typeof storedY === 'number') {
-              window.scrollTo(0, storedY)
-            }
-          } catch(error) {
-            console.error(error)
-            sessionStorage.removeItem(STORAGE_KEY)
-          }
-        `
+      __html: `(${restoreScroll})(${JSON.stringify(STORAGE_KEY)})`
     }
@@ -115,3 +130,3 @@ });
 
-      if (y) {
+      if (y != undefined) {
         window.scrollTo(0, y);
@@ -123,3 +138,3 @@ return;
       if (location.hash) {
-        let el = document.querySelector(location.hash);
+        let el = document.getElementById(location.hash.slice(1));
 
@@ -126,0 +141,0 @@ if (el) {

server.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -39,2 +39,4 @@ * Copyright (c) Remix Software Inc.
 
+// TODO: We eventually might not want to import anything directly from `history`
+
 /**
@@ -41,0 +43,0 @@ * The entry point for a Remix app when it is rendered on the server (in

transition.d.ts

@@ -194,2 +194,8 @@ import { Action } from "history";
     };
+    LoadingActionRedirect: {
+        state: "loading";
+        type: "actionRedirect";
+        submission: ActionSubmission;
+        data: undefined;
+    };
     Loading: {
@@ -196,0 +202,0 @@ state: "loading";

transition.js

 /**
- * @remix-run/react v0.0.0-experimental-935642c5
+ * @remix-run/react v0.0.0-experimental-9e5da5b0
  *
@@ -19,2 +19,6 @@ * Copyright (c) Remix Software Inc.
 
+// TODO: We eventually might not want to import anything directly from `history`
+//#region Types and Utils
+////////////////////////////////////////////////////////////////////////////////
+
 class CatchValue {
@@ -29,3 +33,2 @@ constructor(status, statusText, data) {
 
-////////////////////////////////////////////////////////////////////////////////
 function isActionSubmission(submission) {
@@ -76,3 +79,7 @@ return ["POST", "PUT", "PATCH", "DELETE"].includes(submission.method);
   submission: undefined
-};
+}; //#endregion
+////////////////////////////////////////////////////////////////////////////////
+//#region createTransitionManager
+////////////////////////////////////////////////////////////////////////////////
+
 function createTransitionManager(init) {
@@ -87,2 +94,3 @@ let {
   let fetchReloadIds = new Map();
+  let fetchRedirectIds = new Set();
   let matches = routeMatching.matchClientRoutes(routes, init.location);
@@ -115,2 +123,8 @@
   function update(updates) {
+    if (updates.transition) {
+      if (updates.transition === IDLE_TRANSITION) {
+        pendingNavigationController = undefined;
+      }
+    }
+
     state = Object.assign({}, state, updates);
@@ -128,5 +142,10 @@ init.onChange(state);
 
+  function setFetcher(key, fetcher) {
+    state.fetchers.set(key, fetcher);
+  }
+
   function deleteFetcher(key) {
     if (fetchControllers.has(key)) abortFetcher(key);
     fetchReloadIds.delete(key);
+    fetchRedirectIds.delete(key);
     state.fetchers.delete(key);
@@ -232,3 +251,3 @@ }
     };
-    state.fetchers.set(key, fetcher);
+    setFetcher(key, fetcher);
     update({
@@ -250,3 +269,14 @@ fetchers: new Map(state.fetchers)
       };
+      fetchRedirectIds.add(key);
       init.onRedirect(result.value.location, locationState);
+      let loadingFetcher = {
+        state: "loading",
+        type: "actionRedirect",
+        submission,
+        data: undefined
+      };
+      setFetcher(key, loadingFetcher);
+      update({
+        fetchers: new Map(state.fetchers)
+      });
       return;
@@ -269,3 +299,3 @@ }
     };
-    state.fetchers.set(key, loadFetcher);
+    setFetcher(key, loadFetcher);
     update({
@@ -307,3 +337,3 @@ fetchers: new Map(state.fetchers)
     };
-    state.fetchers.set(key, doneFetcher);
+    setFetcher(key, doneFetcher);
     let abortedKeys = abortStaleFetchLoads(loadId);
@@ -365,3 +395,3 @@
       };
-      state.fetchers.set(key, doneFetcher);
+      setFetcher(key, doneFetcher);
     }
@@ -397,3 +427,3 @@ }
     };
-    state.fetchers.set(key, fetcher);
+    setFetcher(key, fetcher);
     update({
@@ -434,3 +464,3 @@ fetchers: new Map(state.fetchers)
     };
-    state.fetchers.set(key, doneFetcher);
+    setFetcher(key, doneFetcher);
     update({
@@ -442,2 +472,6 @@ fetchers: new Map(state.fetchers)
   async function handleLoaderFetch(href, key, match) {
+    if (typeof AbortController === "undefined") {
+      throw new Error("handleLoaderFetch was called during the server render, but it shouldn't be. " + "You are likely calling useFetcher.load() in the body of your component. " + "Try moving it to a useEffect or a callback.");
+    }
+
     let currentFetcher = state.fetchers.get(key);
@@ -450,3 +484,3 @@ let fetcher = {
     };
-    state.fetchers.set(key, fetcher);
+    setFetcher(key, fetcher);
     update({
@@ -484,3 +518,3 @@ fetchers: new Map(state.fetchers)
     };
-    state.fetchers.set(key, doneFetcher);
+    setFetcher(key, doneFetcher);
     update({
@@ -787,2 +821,3 @@ fetchers: new Map(state.fetchers)
     let [catchVal, catchBoundaryId] = await findCatchAndBoundaryId(results, matches, maybeActionErrorResult);
+    markFetchRedirectsDone();
     let abortedIds = abortStaleFetchLoads(navigationLoadId);
@@ -809,5 +844,5 @@
   function abortNormalNavigation() {
-    var _pendingNavigationCon;
-
-    (_pendingNavigationCon = pendingNavigationController) === null || _pendingNavigationCon === void 0 ? void 0 : _pendingNavigationCon.abort();
+    if (pendingNavigationController) {
+      pendingNavigationController.abort();
+    }
   }
@@ -822,2 +857,18 @@
 
+  function markFetchRedirectsDone() {
+    let doneKeys = [];
+
+    for (let key of fetchRedirectIds) {
+      let fetcher = state.fetchers.get(key);
+      invariant(fetcher, `Expected fetcher: ${key}`);
+
+      if (fetcher.type === "actionRedirect") {
+        fetchRedirectIds.delete(key);
+        doneKeys.push(key);
+      }
+    }
+
+    markFetchersDone(doneKeys);
+  }
+
   return {
@@ -835,3 +886,6 @@ send,
   };
-} ////////////////////////////////////////////////////////////////////////////////
+} //#endregion
+////////////////////////////////////////////////////////////////////////////////
+//#region createTransitionManager sub-functions
+////////////////////////////////////////////////////////////////////////////////
 
@@ -934,3 +988,5 @@ function isIndexRequestAction(action) {
     return (// param change, /users/123 -> /users/456
-      state.matches[index].pathname !== match.pathname || ((_state$matches$index$ = state.matches[index].route.path) === null || _state$matches$index$ === void 0 ? void 0 : _state$matches$index$.endsWith("*")) && state.matches[index].params["*"] !== match.params["*"]
+      state.matches[index].pathname !== match.pathname || // splat param changed, which is not present in match.path
+      // e.g. /files/images/avatar.jpg -> files/finances.xls
+      ((_state$matches$index$ = state.matches[index].route.path) === null || _state$matches$index$ === void 0 ? void 0 : _state$matches$index$.endsWith("*")) && state.matches[index].params["*"] !== match.params["*"]
     );
@@ -972,3 +1028,3 @@ };
   createHref(url) === createHref(state.location) || // search affects all loaders
-  url.searchParams.toString() !== state.location.search) {
+  url.searchParams.toString() !== state.location.search.substring(1)) {
     return matches.filter(filterByRouteProps);
@@ -1137,3 +1193,3 @@ }
   return new URL(href, window.location.origin);
-}
+} //#endregion
 
@@ -1140,0 +1196,0 @@ exports.CatchValue = CatchValue;

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

252861

increased by6.24%

Lines of code

7198

increased by5.92%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

3

increased by200%

Number of low supply chain risk alerts

5

increased by66.67%

Dependency changes

• + Addedhistory@^5.3.0

• + Added@babel/runtime@7.26.9(transitive)

• + Addedhistory@5.3.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• Updatedreact-router-dom@^6.2.2