@remix-run/react - npm Package Compare versions

Comparing version 0.0.0-experimental-ab9dac4f to 0.0.0-experimental-b33ac4ef

_virtual/_rollupPluginBabelHelpers.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

browser.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -19,5 +19,21 @@ * Copyright (c) Remix Software Inc.
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
@@ -30,3 +46,3 @@ /**
 function RemixBrowser(_props) {
-  let historyRef = React__default["default"].useRef();
+  let historyRef = React__namespace.useRef();
 
@@ -40,7 +56,7 @@ if (historyRef.current == null) {
   let history$1 = historyRef.current;
-  let [state, dispatch] = React__default["default"].useReducer((_, update) => update, {
+  let [state, dispatch] = React__namespace.useReducer((_, update) => update, {
     action: history$1.action,
     location: history$1.location
   });
-  React__default["default"].useLayoutEffect(() => history$1.listen(dispatch), [history$1]);
+  React__namespace.useLayoutEffect(() => history$1.listen(dispatch), [history$1]);
   let entryContext = window.__remixContext;
@@ -52,5 +68,5 @@ entryContext.manifest = window.__remixManifest;
 
-  entryContext.componentDidCatchEmulator.trackBoundaries = false;
-  entryContext.componentDidCatchEmulator.trackCatchBoundaries = false;
-  return /*#__PURE__*/React__default["default"].createElement(components.RemixEntry, {
+  entryContext.appState.trackBoundaries = false;
+  entryContext.appState.trackCatchBoundaries = false;
+  return /*#__PURE__*/React__namespace.createElement(components.RemixEntry, {
     context: entryContext,
@@ -57,0 +73,0 @@ action: state.action,

components.d.ts

 import type { Action, Location } from "history";
 import type { FormHTMLAttributes } from "react";
-import React from "react";
+import * as React from "react";
 import type { Navigator } from "react-router";
 import type { LinkProps, NavLinkProps } from "react-router-dom";
-import type { AppData } from "./data";
-import type { FormEncType, FormMethod } from "./data";
+import type { AppData, FormEncType, FormMethod } from "./data";
 import type { EntryContext } from "./entry";
@@ -12,3 +11,2 @@ import type { PrefetchPageDescriptor } from "./links";
 import type { Transition, Fetcher } from "./transition";
-export { ScrollRestoration } from "./scroll-restoration";
 export declare function RemixEntry({ context: entryContext, action, location: historyLocation, navigator: _navigator, static: staticProp }: {
@@ -176,2 +174,3 @@ context: EntryContext;
 export declare function useMatches(): {
+    id: string;
     pathname: string;
@@ -207,1 +206,2 @@ params: import("react-router").Params<string>;
 }): JSX.Element | null;
+export {};

components.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -26,12 +26,26 @@ * Copyright (c) Remix Software Inc.
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// RemixEntry
+const RemixEntryContext = /*#__PURE__*/React__namespace.createContext(undefined);
 
-const RemixEntryContext = /*#__PURE__*/React__default["default"].createContext(undefined);
-
 function useRemixEntryContext() {
-  let context = React__default["default"].useContext(RemixEntryContext);
+  let context = React__namespace.useContext(RemixEntryContext);
   invariant(context, "You must render this element inside a <Remix> element");
@@ -54,7 +68,7 @@ return context;
     serverHandoffString,
-    componentDidCatchEmulator: entryComponentDidCatchEmulator
+    appState: entryComponentDidCatchEmulator
   } = entryContext;
-  let clientRoutes = React__default["default"].useMemo(() => routes.createClientRoutes(manifest.routes, routeModules, RemixRoute), [manifest, routeModules]);
-  let [clientState, setClientState] = React__default["default"].useState(entryComponentDidCatchEmulator);
-  let [transitionManager] = React__default["default"].useState(() => {
+  let clientRoutes = React__namespace.useMemo(() => routes.createClientRoutes(manifest.routes, routeModules, RemixRoute), [manifest, routeModules]);
+  let [clientState, setClientState] = React__namespace.useState(entryComponentDidCatchEmulator);
+  let [transitionManager] = React__namespace.useState(() => {
     return transition.createTransitionManager({
@@ -83,3 +97,3 @@ routes: clientRoutes,
 
-  let navigator = React__default["default"].useMemo(() => {
+  let navigator = React__namespace.useMemo(() => {
     let push = (to, state) => {
@@ -100,3 +114,3 @@ return transitionManager.getState().transition.state !== "idle" ? _navigator.replace(to, state) : _navigator.push(to, state);
 
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     let {
@@ -118,7 +132,7 @@ location
   let ssrCatchBeforeRoutesRendered = clientState.catch && clientState.catchBoundaryRouteId === null ? clientState.catch : undefined;
-  return /*#__PURE__*/React__default["default"].createElement(RemixEntryContext.Provider, {
+  return /*#__PURE__*/React__namespace.createElement(RemixEntryContext.Provider, {
     value: {
       matches,
       manifest,
-      componentDidCatchEmulator: clientState,
+      appState: clientState,
       routeModules,
@@ -131,11 +145,11 @@ serverHandoffString,
     }
-  }, /*#__PURE__*/React__default["default"].createElement(errorBoundaries.RemixErrorBoundary, {
+  }, /*#__PURE__*/React__namespace.createElement(errorBoundaries.RemixErrorBoundary, {
     location: location,
     component: errorBoundaries.RemixRootDefaultErrorBoundary,
     error: ssrErrorBeforeRoutesRendered
-  }, /*#__PURE__*/React__default["default"].createElement(errorBoundaries.RemixCatchBoundary, {
+  }, /*#__PURE__*/React__namespace.createElement(errorBoundaries.RemixCatchBoundary, {
     location: location,
     component: errorBoundaries.RemixRootDefaultCatchBoundary,
     catch: ssrCatchBeforeRoutesRendered
-  }, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Router, {
+  }, /*#__PURE__*/React__namespace.createElement(reactRouterDom.Router, {
     navigationType: action,
@@ -145,3 +159,3 @@ location: location,
     static: staticProp
-  }, /*#__PURE__*/React__default["default"].createElement(Routes, null)))));
+  }, /*#__PURE__*/React__namespace.createElement(Routes, null)))));
 }
@@ -168,6 +182,6 @@
 
-const RemixRouteContext = /*#__PURE__*/React__default["default"].createContext(undefined);
+const RemixRouteContext = /*#__PURE__*/React__namespace.createContext(undefined);
 
 function useRemixRouteContext() {
-  let context = React__default["default"].useContext(RemixRouteContext);
+  let context = React__namespace.useContext(RemixRouteContext);
   invariant(context, "You must render this element in a remix route element");
@@ -190,3 +204,3 @@ return context;
     routeModules,
-    componentDidCatchEmulator
+    appState
   } = useRemixEntryContext();
@@ -199,3 +213,3 @@ let data = routeData[id];
   } = routeModules[id];
-  let element = Component ? /*#__PURE__*/React__default["default"].createElement(Component, null) : /*#__PURE__*/React__default["default"].createElement(DefaultRouteComponent, {
+  let element = Component ? /*#__PURE__*/React__namespace.createElement(Component, null) : /*#__PURE__*/React__namespace.createElement(DefaultRouteComponent, {
     id: id
@@ -211,8 +225,8 @@ });
     // and pass it to the ErrorBoundary to emulate `componentDidCatch`
-    let maybeServerCaught = componentDidCatchEmulator.catch && componentDidCatchEmulator.catchBoundaryRouteId === id ? componentDidCatchEmulator.catch : undefined; // This needs to run after we check for the error from a previous render,
+    let maybeServerCaught = appState.catch && appState.catchBoundaryRouteId === id ? appState.catch : undefined; // This needs to run after we check for the error from a previous render,
     // otherwise we will incorrectly render this boundary for a loader error
     // deeper in the tree.
 
-    if (componentDidCatchEmulator.trackCatchBoundaries) {
-      componentDidCatchEmulator.catchBoundaryRouteId = id;
+    if (appState.trackCatchBoundaries) {
+      appState.catchBoundaryRouteId = id;
     }
@@ -232,3 +246,3 @@
     };
-    element = /*#__PURE__*/React__default["default"].createElement(errorBoundaries.RemixCatchBoundary, {
+    element = /*#__PURE__*/React__namespace.createElement(errorBoundaries.RemixCatchBoundary, {
       location: location,
@@ -256,8 +270,8 @@ component: CatchBoundary,
     // and pass it to the ErrorBoundary to emulate `componentDidCatch`
-    let maybeServerRenderError = componentDidCatchEmulator.error && (componentDidCatchEmulator.renderBoundaryRouteId === id || componentDidCatchEmulator.loaderBoundaryRouteId === id) ? deserializeError(componentDidCatchEmulator.error) : undefined; // This needs to run after we check for the error from a previous render,
+    let maybeServerRenderError = appState.error && (appState.renderBoundaryRouteId === id || appState.loaderBoundaryRouteId === id) ? deserializeError(appState.error) : undefined; // This needs to run after we check for the error from a previous render,
     // otherwise we will incorrectly render this boundary for a loader error
     // deeper in the tree.
 
-    if (componentDidCatchEmulator.trackBoundaries) {
-      componentDidCatchEmulator.renderBoundaryRouteId = id;
+    if (appState.trackBoundaries) {
+      appState.renderBoundaryRouteId = id;
     }
@@ -277,3 +291,3 @@
     };
-    element = /*#__PURE__*/React__default["default"].createElement(errorBoundaries.RemixErrorBoundary, {
+    element = /*#__PURE__*/React__namespace.createElement(errorBoundaries.RemixErrorBoundary, {
       location: location,
@@ -287,3 +301,3 @@ component: ErrorBoundary,
 
-  return /*#__PURE__*/React__default["default"].createElement(RemixRouteContext.Provider, {
+  return /*#__PURE__*/React__namespace.createElement(RemixRouteContext.Provider, {
     value: context
@@ -303,4 +317,4 @@ }, element);
 function usePrefetchBehavior(prefetch, theirElementProps) {
-  let [maybePrefetch, setMaybePrefetch] = React__default["default"].useState(false);
-  let [shouldPrefetch, setShouldPrefetch] = React__default["default"].useState(false);
+  let [maybePrefetch, setMaybePrefetch] = React__namespace.useState(false);
+  let [shouldPrefetch, setShouldPrefetch] = React__namespace.useState(false);
   let {
@@ -313,3 +327,3 @@ onFocus,
   } = theirElementProps;
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     if (prefetch === "render") {
@@ -332,3 +346,3 @@ setShouldPrefetch(true);
 
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     if (maybePrefetch) {
@@ -352,3 +366,3 @@ let id = setTimeout(() => {
 
-let NavLink = /*#__PURE__*/React__default["default"].forwardRef(({
+let NavLink = /*#__PURE__*/React__namespace.forwardRef(({
   to,
@@ -360,10 +374,10 @@ prefetch = "none",
   let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(prefetch, props);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.NavLink, _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(reactRouterDom.NavLink, _rollupPluginBabelHelpers["extends"]({
     ref: forwardedRef,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React__default["default"].createElement(PrefetchPageLinks, {
+  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React__namespace.createElement(PrefetchPageLinks, {
     page: href
   }) : null);
 });
-let Link = /*#__PURE__*/React__default["default"].forwardRef(({
+let Link = /*#__PURE__*/React__namespace.forwardRef(({
   to,
@@ -375,6 +389,6 @@ prefetch = "none",
   let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(prefetch, props);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(reactRouterDom.Link, _rollupPluginBabelHelpers["extends"]({
     ref: forwardedRef,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React__default["default"].createElement(PrefetchPageLinks, {
+  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React__namespace.createElement(PrefetchPageLinks, {
     page: href
@@ -402,6 +416,6 @@ }) : null);
   } = useRemixEntryContext();
-  let links$1 = React__default["default"].useMemo(() => links.getLinksForMatches(matches, routeModules, manifest), [matches, routeModules, manifest]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, links$1.map(link => links.isPageLinkDescriptor(link) ? /*#__PURE__*/React__default["default"].createElement(PrefetchPageLinks, _rollupPluginBabelHelpers["extends"]({
+  let links$1 = React__namespace.useMemo(() => links.getLinksForMatches(matches, routeModules, manifest), [matches, routeModules, manifest]);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, links$1.map(link => links.isPageLinkDescriptor(link) ? /*#__PURE__*/React__namespace.createElement(PrefetchPageLinks, _rollupPluginBabelHelpers["extends"]({
     key: link.page
-  }, link)) : /*#__PURE__*/React__default["default"].createElement("link", _rollupPluginBabelHelpers["extends"]({
+  }, link)) : /*#__PURE__*/React__namespace.createElement("link", _rollupPluginBabelHelpers["extends"]({
     key: link.rel + link.href
@@ -417,3 +431,3 @@ }, link))));
   } = useRemixEntryContext();
-  let matches = React__default["default"].useMemo(() => routeMatching.matchClientRoutes(clientRoutes, page), [clientRoutes, page]);
+  let matches = React__namespace.useMemo(() => routeMatching.matchClientRoutes(clientRoutes, page), [clientRoutes, page]);
 
@@ -425,3 +439,3 @@ if (!matches) {
 
-  return /*#__PURE__*/React__default["default"].createElement(PrefetchPageLinksImpl, _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement(PrefetchPageLinksImpl, _rollupPluginBabelHelpers["extends"]({
     page: page,
@@ -436,4 +450,4 @@ matches: matches
   } = useRemixEntryContext();
-  let [styleLinks, setStyleLinks] = React__default["default"].useState([]);
-  React__default["default"].useEffect(() => {
+  let [styleLinks, setStyleLinks] = React__namespace.useState([]);
+  React__namespace.useEffect(() => {
     let interrupted = false;
@@ -460,10 +474,10 @@ links.getStylesheetPrefetchLinks(matches, routeModules).then(links => {
   } = useRemixEntryContext();
-  let newMatchesForData = React__default["default"].useMemo(() => links.getNewMatchesForLinks(page, nextMatches, matches, location, "data"), [page, nextMatches, matches, location]);
-  let newMatchesForAssets = React__default["default"].useMemo(() => links.getNewMatchesForLinks(page, nextMatches, matches, location, "assets"), [page, nextMatches, matches, location]);
-  let dataHrefs = React__default["default"].useMemo(() => links.getDataLinkHrefs(page, newMatchesForData, manifest), [newMatchesForData, page, manifest]);
-  let moduleHrefs = React__default["default"].useMemo(() => links.getModuleLinkHrefs(newMatchesForAssets, manifest), [newMatchesForAssets, manifest]); // needs to be a hook with async behavior because we need the modules, not
+  let newMatchesForData = React__namespace.useMemo(() => links.getNewMatchesForLinks(page, nextMatches, matches, location, "data"), [page, nextMatches, matches, location]);
+  let newMatchesForAssets = React__namespace.useMemo(() => links.getNewMatchesForLinks(page, nextMatches, matches, location, "assets"), [page, nextMatches, matches, location]);
+  let dataHrefs = React__namespace.useMemo(() => links.getDataLinkHrefs(page, newMatchesForData, manifest), [newMatchesForData, page, manifest]);
+  let moduleHrefs = React__namespace.useMemo(() => links.getModuleLinkHrefs(newMatchesForAssets, manifest), [newMatchesForAssets, manifest]); // needs to be a hook with async behavior because we need the modules, not
   // just the manifest like the other links in here.
 
   let styleLinks = usePrefetchedStylesheets(newMatchesForAssets);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dataHrefs.map(href => /*#__PURE__*/React__default["default"].createElement("link", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, dataHrefs.map(href => /*#__PURE__*/React__namespace.createElement("link", _rollupPluginBabelHelpers["extends"]({
     key: href,
@@ -473,3 +487,3 @@ rel: "prefetch",
     href: href
-  }, linkProps))), moduleHrefs.map(href => /*#__PURE__*/React__default["default"].createElement("link", _rollupPluginBabelHelpers["extends"]({
+  }, linkProps))), moduleHrefs.map(href => /*#__PURE__*/React__namespace.createElement("link", _rollupPluginBabelHelpers["extends"]({
     key: href,
@@ -482,3 +496,3 @@ rel: "modulepreload",
   // already with their own props
-  React__default["default"].createElement("link", _rollupPluginBabelHelpers["extends"]({
+  React__namespace.createElement("link", _rollupPluginBabelHelpers["extends"]({
     key: link.href
@@ -521,22 +535,21 @@ }, link))));
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Object.keys(meta).map(name => {
-    let value = meta[name]; // Open Graph tags use the `property` attribute, while other meta tags
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, Object.entries(meta).map(([name, value]) => {
+    // Open Graph tags use the `property` attribute, while other meta tags
     // use `name`. See https://ogp.me/
-
     let isOpenGraphTag = name.startsWith("og:");
-    return name === "title" ? /*#__PURE__*/React__default["default"].createElement("title", {
+    return name === "title" ? /*#__PURE__*/React__namespace.createElement("title", {
       key: "title"
-    }, meta[name]) : Array.isArray(value) ? value.map(content => isOpenGraphTag ? /*#__PURE__*/React__default["default"].createElement("meta", {
+    }, value) : Array.isArray(value) ? value.map(content => isOpenGraphTag ? /*#__PURE__*/React__namespace.createElement("meta", {
       key: name + content,
       property: name,
       content: content
-    }) : /*#__PURE__*/React__default["default"].createElement("meta", {
+    }) : /*#__PURE__*/React__namespace.createElement("meta", {
       key: name + content,
       name: name,
       content: content
-    })) : isOpenGraphTag ? /*#__PURE__*/React__default["default"].createElement("meta", {
+    })) : isOpenGraphTag ? /*#__PURE__*/React__namespace.createElement("meta", {
       key: name,
       property: name,
       content: value
-    }) : /*#__PURE__*/React__default["default"].createElement("meta", {
+    }) : /*#__PURE__*/React__namespace.createElement("meta", {
       key: name,
@@ -548,3 +561,9 @@ name: name,
 }
+/**
+ * Tracks whether Remix has finished hydrating or not, so scripts can be skipped
+ * during client-side updates.
+ */
 
+let isHydrated = false;
+
 /**
@@ -566,15 +585,18 @@ * Renders the `<script>` tags needed for the initial render. Bundles for
   } = useRemixEntryContext();
-  let initialScripts = React__default["default"].useMemo(() => {
+  React__namespace.useEffect(() => {
+    isHydrated = true;
+  }, []);
+  let initialScripts = React__namespace.useMemo(() => {
     let contextScript = serverHandoffString ? `window.__remixContext = ${serverHandoffString};` : "";
     let routeModulesScript = `${matches.map((match, index) => `import * as route${index} from ${JSON.stringify(manifest.routes[match.route.id].module)};`).join("\n")}
 window.__remixRouteModules = {${matches.map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`).join(",")}};`;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("script", _rollupPluginBabelHelpers["extends"]({}, props, {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("script", _rollupPluginBabelHelpers["extends"]({}, props, {
       suppressHydrationWarning: true,
       dangerouslySetInnerHTML: markup.createHtml(contextScript)
-    })), /*#__PURE__*/React__default["default"].createElement("script", _rollupPluginBabelHelpers["extends"]({}, props, {
+    })), /*#__PURE__*/React__namespace.createElement("script", _rollupPluginBabelHelpers["extends"]({}, props, {
       src: manifest.url
-    })), /*#__PURE__*/React__default["default"].createElement("script", _rollupPluginBabelHelpers["extends"]({}, props, {
+    })), /*#__PURE__*/React__namespace.createElement("script", _rollupPluginBabelHelpers["extends"]({}, props, {
       dangerouslySetInnerHTML: markup.createHtml(routeModulesScript),
       type: "module"
-    })), /*#__PURE__*/React__default["default"].createElement("script", _rollupPluginBabelHelpers["extends"]({}, props, {
+    })), /*#__PURE__*/React__namespace.createElement("script", _rollupPluginBabelHelpers["extends"]({}, props, {
       src: manifest.entry.module,
@@ -588,3 +610,3 @@ type: "module"
 
-  let nextMatches = React__default["default"].useMemo(() => {
+  let nextMatches = React__namespace.useMemo(() => {
     if (pendingLocation) {
@@ -604,3 +626,3 @@ // FIXME: can probably use transitionManager `nextMatches`
   let preloads = manifest.entry.imports.concat(routePreloads);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dedupe(preloads).map(path => /*#__PURE__*/React__default["default"].createElement("link", {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, dedupe(preloads).map(path => /*#__PURE__*/React__namespace.createElement("link", {
     key: path,
@@ -610,3 +632,3 @@ rel: "modulepreload",
     crossOrigin: props.crossOrigin
-  })), initialScripts);
+  })), isHydrated ? null : initialScripts);
 }
@@ -624,8 +646,8 @@
  */
-let Form = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default["default"].createElement(FormImpl, _rollupPluginBabelHelpers["extends"]({}, props, {
+let Form = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(FormImpl, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref
   }));
 });
-let FormImpl = /*#__PURE__*/React__default["default"].forwardRef(({
+let FormImpl = /*#__PURE__*/React__namespace.forwardRef(({
   reloadDocument = false,
@@ -643,3 +665,3 @@ replace = false,
   let formAction = useFormAction(action, formMethod);
-  let formRef = React__default["default"].useRef();
+  let formRef = React__namespace.useRef();
   let ref = useComposedRefs(forwardedRef, formRef); // When calling `submit` on the form element itself, we don't get data from
@@ -661,4 +683,4 @@ // the button that submitted the event. For example:
 
-  let clickedButtonRef = React__default["default"].useRef();
-  React__default["default"].useEffect(() => {
+  let clickedButtonRef = React__namespace.useRef();
+  React__namespace.useEffect(() => {
     let form = formRef.current;
@@ -681,3 +703,3 @@ if (!form) return;
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement("form", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
@@ -737,3 +759,3 @@ method: formMethod,
   } = useRemixEntryContext();
-  return React__default["default"].useCallback((target, options = {}) => {
+  return React__namespace.useCallback((target, options = {}) => {
     let method;
@@ -786,7 +808,7 @@ let action;
           for (let [name, value] of target) {
-            formData.set(name, value);
+            formData.append(name, value);
           }
         } else if (target != null) {
           for (let name of Object.keys(target)) {
-            formData.set(name, target[name]);
+            formData.append(name, target[name]);
           }
@@ -806,3 +828,3 @@ }
         if (typeof value === "string") {
-          url.searchParams.set(name, value);
+          url.searchParams.append(name, value);
         } else {
@@ -876,3 +898,3 @@ throw new Error(`Cannot submit binary form data using GET`);
 function useBeforeUnload(callback) {
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     window.addEventListener("beforeunload", callback);
@@ -891,2 +913,4 @@ return () => {
   return matches.map(match => {
+    var _routeModules$match$r;
+
     let {
@@ -897,6 +921,9 @@ pathname,
     return {
+      id: match.route.id,
       pathname,
       params,
       data: routeData[match.route.id],
-      handle: routeModules[match.route.id].handle
+      // if the module fails to load or an error/response is thrown, the module
+      // won't be defined.
+      handle: (_routeModules$match$r = routeModules[match.route.id]) === null || _routeModules$match$r === void 0 ? void 0 : _routeModules$match$r.handle
     };
@@ -932,5 +959,5 @@ });
 function createFetcherForm(fetchKey) {
-  return /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
+  return /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     // TODO: make ANOTHER form w/o a fetchKey prop
-    return /*#__PURE__*/React__default["default"].createElement(FormImpl, _rollupPluginBabelHelpers["extends"]({}, props, {
+    return /*#__PURE__*/React__namespace.createElement(FormImpl, _rollupPluginBabelHelpers["extends"]({}, props, {
       ref: ref,
@@ -952,5 +979,5 @@ fetchKey: fetchKey
   } = useRemixEntryContext();
-  let [key] = React__default["default"].useState(() => String(++fetcherId));
-  let [Form] = React__default["default"].useState(() => createFetcherForm(key));
-  let [load] = React__default["default"].useState(() => href => {
+  let [key] = React__namespace.useState(() => String(++fetcherId));
+  let [Form] = React__namespace.useState(() => createFetcherForm(key));
+  let [load] = React__namespace.useState(() => href => {
     transitionManager.send({
@@ -964,3 +991,3 @@ type: "fetcher",
   let fetcher = transitionManager.getFetcher(key);
-  let fetcherWithComponents = React__default["default"].useMemo(() => ({
+  let fetcherWithComponents = React__namespace.useMemo(() => ({
     Form,
@@ -971,3 +998,3 @@ submit,
   }), [fetcher, Form, submit, load]);
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     // Is this busted when the React team gets real weird and calls effects
@@ -998,3 +1025,3 @@ // twice on mount?  We really just need to garbage collect here when this
   if (process.env.NODE_ENV !== "development") return null;
-  return /*#__PURE__*/React__default["default"].createElement("script", {
+  return /*#__PURE__*/React__namespace.createElement("script", {
     dangerouslySetInnerHTML: {
@@ -1023,3 +1050,3 @@ __html: `
 function useComposedRefs(...refs) {
-  return React__default["default"].useCallback(node => {
+  return React__namespace.useCallback(node => {
     for (let ref of refs) {
@@ -1026,0 +1053,0 @@ if (ref == null) continue;

data.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -63,12 +63,16 @@ * Copyright (c) Remix Software Inc.
   } = submission;
+  let headers = undefined;
+  let body = formData;
 
-  if (encType !== "application/x-www-form-urlencoded") {
-    throw new Error(`Only "application/x-www-form-urlencoded" forms are supported right now.`);
-  }
+  if (encType === "application/x-www-form-urlencoded") {
+    body = new URLSearchParams();
 
-  let body = new URLSearchParams();
+    for (let [key, value] of formData) {
+      invariant(typeof value === "string", `File inputs are not supported with encType "application/x-www-form-urlencoded", please use "multipart/form-data" instead.`);
+      body.append(key, value);
+    }
 
-  for (let [key, value] of formData) {
-    invariant(typeof value === "string", "File inputs are not supported right now");
-    body.append(key, value);
+    headers = {
+      "Content-Type": encType
+    };
   }
@@ -78,8 +82,6 @@
     method,
-    body: body.toString(),
+    body,
     signal,
     credentials: "same-origin",
-    headers: {
-      "Content-Type": encType
-    }
+    headers
   };
@@ -86,0 +88,0 @@ }

entry.d.ts

@@ -1,2 +0,2 @@
-import type { ComponentDidCatchEmulator } from "./errors";
+import type { AppState } from "./errors";
 import type { RouteManifest, EntryRoute } from "./routes";
@@ -7,3 +7,3 @@ import type { RouteData } from "./routeData";
 export interface EntryContext {
-    componentDidCatchEmulator: ComponentDidCatchEmulator;
+    appState: AppState;
     manifest: AssetsManifest;
@@ -10,0 +10,0 @@ matches: RouteMatch<EntryRoute>[];

errorBoundaries.d.ts

@@ -19,3 +19,6 @@ import type { Location } from "history";
     };
-    static getDerivedStateFromProps(props: RemixErrorBoundaryProps, state: RemixErrorBoundaryState): RemixErrorBoundaryState;
+    static getDerivedStateFromProps(props: RemixErrorBoundaryProps, state: RemixErrorBoundaryState): {
+        error: Error | null;
+        location: Location;
+    };
     render(): React.ReactNode;
@@ -37,5 +40,5 @@ }
 /**
- * When app's don't provide a root level ErrorBoundary, we default to this.
+ * When app's don't provide a root level CatchBoundary, we default to this.
  */
 export declare function RemixRootDefaultCatchBoundary(): JSX.Element;
 export {};

errorBoundaries.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -51,5 +51,12 @@ * Copyright (c) Remix Software Inc.
       };
-    }
+    } // If we're not changing locations, preserve the location but still surface
+    // any new errors that may come through. We retain the existing error, we do
+    // this because the error provided from the app state may be cleared without
+    // the location changing.
 
-    return state;
+
+    return {
+      error: props.error || state.error,
+      location: state.location
+    };
   }
@@ -80,19 +87,30 @@
     charSet: "utf-8"
-  }), /*#__PURE__*/React__default["default"].createElement("title", null, "Uncaught Exception!")), /*#__PURE__*/React__default["default"].createElement("body", null, /*#__PURE__*/React__default["default"].createElement("main", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
+    name: "viewport",
+    content: "width=device-width,initial-scale=1,viewport-fit=cover"
+  }), /*#__PURE__*/React__default["default"].createElement("title", null, "Application Error!")), /*#__PURE__*/React__default["default"].createElement("body", null, /*#__PURE__*/React__default["default"].createElement("main", {
     style: {
-      border: "solid 2px hsl(10, 50%, 50%)",
+      fontFamily: "system-ui, sans-serif",
       padding: "2rem"
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h1", null, "Uncaught Exception!"), /*#__PURE__*/React__default["default"].createElement("p", null, "If you are not the developer, please click back in your browser and try again."), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("h1", {
     style: {
-      fontFamily: `"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace`,
-      padding: "1rem",
-      margin: "1rem 0",
-      border: "solid 4px"
+      fontSize: "24px"
     }
-  }, error.message), /*#__PURE__*/React__default["default"].createElement("p", null, "There was an uncaught exception in your application. Check the browser console and/or server console to inspect the error."), /*#__PURE__*/React__default["default"].createElement("p", null, "If you are the developer, consider adding your own error boundary so users don't see this page when unexpected errors happen in production!"), /*#__PURE__*/React__default["default"].createElement("p", null, "Read more about", " ", /*#__PURE__*/React__default["default"].createElement("a", {
-    target: "_blank",
-    rel: "noreferrer",
-    href: "https://remix.run/guides/errors"
-  }, "Error Handling in Remix"), ".")))));
+  }, "Application Error"), /*#__PURE__*/React__default["default"].createElement("pre", {
+    style: {
+      padding: "2rem",
+      background: "hsla(10, 50%, 50%, 0.1)",
+      color: "red",
+      overflow: "auto"
+    }
+  }, error.stack)), /*#__PURE__*/React__default["default"].createElement("script", {
+    dangerouslySetInnerHTML: {
+      __html: `
+              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."
+              );
+            `
+    }
+  })));
 }
@@ -117,6 +135,7 @@ let RemixCatchContext = /*#__PURE__*/React__default["default"].createContext(undefined);
 /**
- * When app's don't provide a root level ErrorBoundary, we default to this.
+ * When app's don't provide a root level CatchBoundary, we default to this.
  */
 
 function RemixRootDefaultCatchBoundary() {
+  let caught = useCatch();
   return /*#__PURE__*/React__default["default"].createElement("html", {
@@ -126,12 +145,19 @@ lang: "en"
     charSet: "utf-8"
-  }), /*#__PURE__*/React__default["default"].createElement("title", null, "Unhandled Thrown Response!")), /*#__PURE__*/React__default["default"].createElement("body", null, /*#__PURE__*/React__default["default"].createElement("main", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
+    name: "viewport",
+    content: "width=device-width,initial-scale=1,viewport-fit=cover"
+  }), /*#__PURE__*/React__default["default"].createElement("title", null, "Unhandled Thrown Response!")), /*#__PURE__*/React__default["default"].createElement("body", null, /*#__PURE__*/React__default["default"].createElement("h1", {
     style: {
-      border: "solid 2px hsl(10, 50%, 50%)",
+      fontFamily: "system-ui, sans-serif",
       padding: "2rem"
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h1", null, "Unhandled Thrown Response!"), /*#__PURE__*/React__default["default"].createElement("p", null, "If you are not the developer, please click back in your browser and try again."), /*#__PURE__*/React__default["default"].createElement("p", null, "There was an unhandled thrown response in your application."), /*#__PURE__*/React__default["default"].createElement("p", null, "If you are the developer, consider adding your own catch boundary so users don't see this page when unhandled thrown response happen in production!"), /*#__PURE__*/React__default["default"].createElement("p", null, "Read more about", " ", /*#__PURE__*/React__default["default"].createElement("a", {
-    target: "_blank",
-    rel: "noreferrer",
-    href: "https://remix.run/guides/errors"
-  }, "Throwing Responses in Remix"), ".")))));
+  }, caught.status, " ", caught.statusText), /*#__PURE__*/React__default["default"].createElement("script", {
+    dangerouslySetInnerHTML: {
+      __html: `
+              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."
+              );
+            `
+    }
+  })));
 }
@@ -138,0 +164,0 @@

errors.d.ts

 import type { AppData } from "./data";
-export interface ComponentDidCatchEmulator {
+export interface AppState {
     error?: SerializedError;
@@ -4,0 +4,0 @@ catch?: ThrownResponse;

index.d.ts

 export type { RemixBrowserProps } from "./browser";
 export { RemixBrowser } from "./browser";
-export { Outlet, useHref, useLocation, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useSearchParams } from "react-router-dom";
+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, ScrollRestoration, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useLoaderData, useActionData, useBeforeUnload, useMatches } 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";
@@ -11,3 +11,4 @@ export type { ThrownResponse } from "./errors";
 export type { ShouldReloadFunction, HtmlMetaDescriptor } from "./routeModules";
+export { ScrollRestoration } from "./scroll-restoration";
 export type { RemixServerProps } from "./server";
 export { RemixServer } from "./server";

index.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -19,4 +19,4 @@ * Copyright (c) Remix Software Inc.
 var errorBoundaries = require('./errorBoundaries.js');
+var scrollRestoration = require('./scroll-restoration.js');
 var server = require('./server.js');
-var scrollRestoration = require('./scroll-restoration.js');
 
@@ -50,2 +50,6 @@
 });
+Object.defineProperty(exports, 'useOutletContext', {
+  enumerable: true,
+  get: function () { return reactRouterDom.useOutletContext; }
+});
 Object.defineProperty(exports, 'useParams', {
@@ -81,3 +85,3 @@ enumerable: true,
 exports.useCatch = errorBoundaries.useCatch;
+exports.ScrollRestoration = scrollRestoration.ScrollRestoration;
 exports.RemixServer = server.RemixServer;
-exports.ScrollRestoration = scrollRestoration.ScrollRestoration;

invariant.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

links.d.ts

@@ -129,4 +129,7 @@ import type { Location } from "history";
     imagesizes?: string | undefined;
-    as: string;
     /**
+     * Potential destination for a preload request (for rel="preload" and rel="modulepreload")
+     */
+    as?: string | undefined;
+    /**
      * Color to use when customizing a site's icon (for rel="mask-icon")
@@ -133,0 +136,0 @@ */

links.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -33,4 +33,6 @@ * Copyright (c) Remix Software Inc.
   let descriptors = matches.map(match => {
+    var _module$links;
+
     let module = routeModules[match.route.id];
-    return module.links && module.links() || [];
+    return ((_module$links = module.links) === null || _module$links === void 0 ? void 0 : _module$links.call(module)) || [];
   }).flat(1);
@@ -100,10 +102,19 @@ let preloads = getCurrentPageModulePreloadHrefs(matches, manifest);
   }));
-  return links.flat(1).filter(isHtmlLinkDescriptor).filter(link => link.rel === "stylesheet").map(({
+  return links.flat(1).filter(isHtmlLinkDescriptor).filter(link => link.rel === "stylesheet" || link.rel === "preload").map(({
     rel,
     ...attrs
-  }) => ({
-    rel: "prefetch",
-    as: "style",
-    ...attrs
-  }));
+  }) => {
+    if (rel === "preload") {
+      return {
+        rel: "prefetch",
+        ...attrs
+      };
+    }
+
+    return {
+      rel: "prefetch",
+      as: "style",
+      ...attrs
+    };
+  });
 } // This is ridiculously identical to transition.ts `filterMatchesToLoad`
@@ -110,0 +121,0 @@

magicExports/client.d.ts

 export type { RemixBrowserProps, FormProps, SubmitOptions, SubmitFunction, FormMethod, FormEncType, RemixServerProps, ShouldReloadFunction, ThrownResponse, LinkProps, NavLinkProps } from "@remix-run/react";
 export { RemixBrowser, Meta, Links, Scripts, Link, NavLink, Form, PrefetchPageLinks, ScrollRestoration, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useCatch, useLoaderData, useActionData, useBeforeUnload, useMatches, RemixServer } from "@remix-run/react";
-export { Outlet, useHref, useLocation, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useSearchParams } from "@remix-run/react";
+export { Outlet, useHref, useLocation, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useSearchParams, useOutletContext } from "@remix-run/react";

magicExports/client.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -119,2 +119,6 @@ * Copyright (c) Remix Software Inc.
 });
+Object.defineProperty(exports, 'useOutletContext', {
+  enumerable: true,
+  get: function () { return react.useOutletContext; }
+});
 Object.defineProperty(exports, 'useParams', {
@@ -121,0 +125,0 @@ enumerable: true,

markup.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -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-ab9dac4f",
+  "version": "0.0.0-experimental-b33ac4ef",
   "license": "MIT",
@@ -15,5 +15,5 @@ "repository": {
   "main": "index.js",
-  "browser": "browser/index.js",
+  "module": "esm/index.js",
   "dependencies": {
-    "react-router-dom": "^6.0.2"
+    "react-router-dom": "^6.2.1"
   },
@@ -20,0 +20,0 @@ "peerDependencies": {

routeMatching.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

routeModules.d.ts

@@ -49,3 +49,3 @@ import type { Location } from "history";
         location: Location;
-    }): HtmlMetaDescriptor;
+    }): HtmlMetaDescriptor | undefined;
 }
@@ -69,3 +69,3 @@ /**
  * about to reload the route. A common case is a root loader with nothing but
- * enviornment variables: after form submissions the root probably doesn't need
+ * environment variables: after form submissions the root probably doesn't need
  * to be reloaded.
@@ -72,0 +72,0 @@ */

routeModules.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -69,3 +69,3 @@ * Copyright (c) Remix Software Inc.
  * about to reload the route. A common case is a root loader with nothing but
- * enviornment variables: after form submissions the root probably doesn't need
+ * environment variables: after form submissions the root probably doesn't need
  * to be reloaded.
@@ -72,0 +72,0 @@ */

routes.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -22,5 +22,21 @@ * Copyright (c) Remix Software Inc.
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
@@ -30,3 +46,3 @@ function createClientRoute(entryRoute, routeModulesCache, Component) {
     caseSensitive: !!entryRoute.caseSensitive,
-    element: /*#__PURE__*/React__default["default"].createElement(Component, {
+    element: /*#__PURE__*/React__namespace.createElement(Component, {
       id: entryRoute.id
@@ -92,4 +108,3 @@ }),
 
-      let data$1 = await data.extractData(result);
-      return data$1;
+      return data.extractData(result);
     } else {
@@ -117,2 +132,5 @@ await loadRouteModuleWithBlockingLinks(route, routeModules);
 
+    let redirect = await checkRedirect(result);
+    if (redirect) return redirect;
+
     if (data.isCatchResponse(result)) {
@@ -122,4 +140,2 @@ throw new transition.CatchValue(result.status, result.statusText, await data.extractData(result.clone()));
 
-    let redirect = await checkRedirect(result);
-    if (redirect) return redirect;
     return data.extractData(result);
@@ -126,0 +142,0 @@ };

scroll-restoration.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -42,3 +42,3 @@ * Copyright (c) Remix Software Inc.
 
-if (typeof window !== "undefined") {
+if (typeof document !== "undefined") {
   let sessionPositions = sessionStorage.getItem(STORAGE_KEY);
@@ -102,3 +102,3 @@
 
-  if (typeof window !== "undefined") {
+  if (typeof document !== "undefined") {
     // eslint-disable-next-line
@@ -105,0 +105,0 @@ React__namespace.useLayoutEffect(() => {

server.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -19,5 +19,21 @@ * Copyright (c) Remix Software Inc.
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
@@ -74,3 +90,3 @@ /**
   };
-  return /*#__PURE__*/React__default["default"].createElement(components.RemixEntry, {
+  return /*#__PURE__*/React__namespace.createElement(components.RemixEntry, {
     context: context,
@@ -77,0 +93,0 @@ action: history.Action.Pop,

transition.d.ts

@@ -186,3 +186,3 @@ import { Action } from "history";
         submission: LoaderSubmission;
-        data: undefined;
+        data: TData | undefined;
     };
@@ -199,3 +199,3 @@ ReloadingAction: {
         submission: undefined;
-        data: undefined;
+        data: TData | undefined;
     };
@@ -202,0 +202,0 @@ Done: {

transition.js

 /**
- * @remix-run/react v0.0.0-experimental-ab9dac4f
+ * @remix-run/react v0.0.0-experimental-b33ac4ef
  *
@@ -219,2 +219,3 @@ * Copyright (c) Remix Software Inc.
   async function handleActionFetchSubmission(key, submission, match) {
+    let currentFetcher = state.fetchers.get(key);
     let fetcher = {
@@ -224,3 +225,3 @@ state: "submitting",
       submission,
-      data: undefined
+      data: (currentFetcher === null || currentFetcher === void 0 ? void 0 : currentFetcher.data) || undefined
     };
@@ -272,3 +273,3 @@ state.fetchers.set(key, fetcher);
     let hrefToLoad = createHref(state.transition.location || state.location);
-    let results = await callLoaders(state, createUrl(hrefToLoad), matchesToLoad, controller.signal, maybeActionErrorResult, maybeActionCatchResult, submission, loadFetcher);
+    let results = await callLoaders(state, createUrl(hrefToLoad), matchesToLoad, controller.signal, maybeActionErrorResult, maybeActionCatchResult, submission, match.route.id, loadFetcher);
 
@@ -381,2 +382,3 @@ if (controller.signal.aborted) {
   async function handleLoaderFetchSubmission(href, key, submission, match) {
+    let currentFetcher = state.fetchers.get(key);
     let fetcher = {
@@ -386,3 +388,3 @@ state: "submitting",
       submission,
-      data: undefined
+      data: (currentFetcher === null || currentFetcher === void 0 ? void 0 : currentFetcher.data) || undefined
     };
@@ -432,2 +434,3 @@ state.fetchers.set(key, fetcher);
   async function handleLoaderFetch(href, key, match) {
+    let currentFetcher = state.fetchers.get(key);
     let fetcher = {
@@ -437,3 +440,3 @@ state: "loading",
       submission: undefined,
-      data: undefined
+      data: (currentFetcher === null || currentFetcher === void 0 ? void 0 : currentFetcher.data) || undefined
     };
@@ -602,3 +605,3 @@ state.fetchers.set(key, fetcher);
     });
-    await loadPageData(location, matches, submission, result);
+    await loadPageData(location, matches, submission, leafMatch.route.id, result);
   }
@@ -733,3 +736,3 @@
 
-  async function loadPageData(location, matches, submission, actionResult) {
+  async function loadPageData(location, matches, submission, submissionRouteId, actionResult) {
     let maybeActionErrorResult = actionResult && isErrorResult(actionResult) ? actionResult : undefined;
@@ -740,3 +743,3 @@ let maybeActionCatchResult = actionResult && isCatchResult(actionResult) ? actionResult : undefined;
     navigationLoadId = ++incrementingLoadId;
-    let results = await callLoaders(state, createUrl(createHref(location)), matches, controller.signal, maybeActionErrorResult, maybeActionCatchResult, submission);
+    let results = await callLoaders(state, createUrl(createHref(location)), matches, controller.signal, maybeActionErrorResult, maybeActionCatchResult, submission, submissionRouteId);
 
@@ -838,4 +841,4 @@ if (controller.signal.aborted) {
 
-async function callLoaders(state, url, matches, signal, actionErrorResult, actionCatchResult, submission, fetcher) {
-  let matchesToLoad = filterMatchesToLoad(state, url, matches, actionErrorResult, actionCatchResult, submission, fetcher);
+async function callLoaders(state, url, matches, signal, actionErrorResult, actionCatchResult, submission, submissionRouteId, fetcher) {
+  let matchesToLoad = filterMatchesToLoad(state, url, matches, actionErrorResult, actionCatchResult, submission, submissionRouteId, fetcher);
   return Promise.all(matchesToLoad.map(match => callLoader(match, url, signal)));
@@ -892,3 +895,21 @@ }
 
-function filterMatchesToLoad(state, url, matches, actionErrorResult, actionCatchResult, submission, fetcher) {
+function filterMatchesToLoad(state, url, matches, actionErrorResult, actionCatchResult, submission, submissionRouteId, fetcher) {
+  // Filter out all routes below the problematic route as they aren't going
+  // to render so we don't need to load them.
+  if (submissionRouteId && (actionCatchResult || actionErrorResult)) {
+    let foundProblematicRoute = false;
+    matches = matches.filter(match => {
+      if (foundProblematicRoute) {
+        return false;
+      }
+
+      if (match.route.id === submissionRouteId) {
+        foundProblematicRoute = true;
+        return false;
+      }
+
+      return true;
+    });
+  }
+
   let isNew = (match, index) => {
@@ -895,0 +916,0 @@ // [a] -> [a, b]

No alert changes

Improved metrics

Total package byte prevSize

238015

increased by1.02%

Lines of code

6796

increased by2.97%

Dependency changes

• Updatedreact-router-dom@^6.2.1