@remix-run/react - npm Package Compare versions

Comparing version 0.0.0-experimental-ea0e0959 to 0.0.0-experimental-f7570678

_virtual/_rollupPluginBabelHelpers.js

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

browser.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -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;
@@ -54,3 +70,3 @@ entryContext.manifest = window.__remixManifest;
   entryContext.appState.trackCatchBoundaries = false;
-  return /*#__PURE__*/React__default["default"].createElement(components.RemixEntry, {
+  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";
@@ -5,0 +5,0 @@ import type { LinkProps, NavLinkProps } from "react-router-dom";

components.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -26,10 +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);
 
-const RemixEntryContext = /*#__PURE__*/React__default["default"].createContext(undefined);
+const RemixEntryContext = /*#__PURE__*/React__namespace.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,5 +70,5 @@ return context;
   } = 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({
@@ -81,3 +97,3 @@ routes: clientRoutes,
 
-  let navigator = React__default["default"].useMemo(() => {
+  let navigator = React__namespace.useMemo(() => {
     let push = (to, state) => {
@@ -98,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 {
@@ -116,3 +132,3 @@ 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: {
@@ -129,11 +145,11 @@ matches,
     }
-  }, /*#__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,
@@ -143,3 +159,3 @@ location: location,
     static: staticProp
-  }, /*#__PURE__*/React__default["default"].createElement(Routes, null)))));
+  }, /*#__PURE__*/React__namespace.createElement(Routes, null)))));
 }
@@ -166,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");
@@ -196,3 +212,3 @@ return context;
   } = 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
@@ -228,3 +244,3 @@ });
     };
-    element = /*#__PURE__*/React__default["default"].createElement(errorBoundaries.RemixCatchBoundary, {
+    element = /*#__PURE__*/React__namespace.createElement(errorBoundaries.RemixCatchBoundary, {
       location: location,
@@ -272,3 +288,3 @@ component: CatchBoundary,
     };
-    element = /*#__PURE__*/React__default["default"].createElement(errorBoundaries.RemixErrorBoundary, {
+    element = /*#__PURE__*/React__namespace.createElement(errorBoundaries.RemixErrorBoundary, {
       location: location,
@@ -282,3 +298,3 @@ component: ErrorBoundary,
 
-  return /*#__PURE__*/React__default["default"].createElement(RemixRouteContext.Provider, {
+  return /*#__PURE__*/React__namespace.createElement(RemixRouteContext.Provider, {
     value: context
@@ -298,4 +314,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 {
@@ -308,3 +324,3 @@ onFocus,
   } = theirElementProps;
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     if (prefetch === "render") {
@@ -327,3 +343,3 @@ setShouldPrefetch(true);
 
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     if (maybePrefetch) {
@@ -347,3 +363,3 @@ let id = setTimeout(() => {
 
-let NavLink = /*#__PURE__*/React__default["default"].forwardRef(({
+let NavLink = /*#__PURE__*/React__namespace.forwardRef(({
   to,
@@ -355,10 +371,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,
@@ -370,6 +386,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
@@ -397,6 +413,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
@@ -412,3 +428,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]);
 
@@ -420,3 +436,3 @@ if (!matches) {
 
-  return /*#__PURE__*/React__default["default"].createElement(PrefetchPageLinksImpl, _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement(PrefetchPageLinksImpl, _rollupPluginBabelHelpers["extends"]({
     page: page,
@@ -431,4 +447,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;
@@ -455,10 +471,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,
@@ -468,3 +484,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,
@@ -477,3 +493,3 @@ rel: "modulepreload",
   // already with their own props
-  React__default["default"].createElement("link", _rollupPluginBabelHelpers["extends"]({
+  React__namespace.createElement("link", _rollupPluginBabelHelpers["extends"]({
     key: link.href
@@ -516,22 +532,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,
@@ -566,18 +581,18 @@ name: name,
   } = useRemixEntryContext();
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     isHydrated = true;
   }, []);
-  let initialScripts = React__default["default"].useMemo(() => {
+  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,
@@ -591,3 +606,3 @@ type: "module"
 
-  let nextMatches = React__default["default"].useMemo(() => {
+  let nextMatches = React__namespace.useMemo(() => {
     if (pendingLocation) {
@@ -607,3 +622,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,
@@ -626,8 +641,8 @@ rel: "modulepreload",
  */
-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,
@@ -645,3 +660,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
@@ -663,4 +678,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;
@@ -683,3 +698,3 @@ if (!form) return;
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement("form", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
@@ -739,3 +754,3 @@ method: formMethod,
   } = useRemixEntryContext();
-  return React__default["default"].useCallback((target, options = {}) => {
+  return React__namespace.useCallback((target, options = {}) => {
     let method;
@@ -876,3 +891,3 @@ let action;
 function useBeforeUnload(callback) {
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     window.addEventListener("beforeunload", callback);
@@ -930,5 +945,5 @@ return () => {
 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,
@@ -950,5 +965,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({
@@ -962,3 +977,3 @@ type: "fetcher",
   let fetcher = transitionManager.getFetcher(key);
-  let fetcherWithComponents = React__default["default"].useMemo(() => ({
+  let fetcherWithComponents = React__namespace.useMemo(() => ({
     Form,
@@ -969,3 +984,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
@@ -996,3 +1011,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: {
@@ -1021,3 +1036,3 @@ __html: `
 function useComposedRefs(...refs) {
-  return React__default["default"].useCallback(node => {
+  return React__namespace.useCallback(node => {
     for (let ref of refs) {
@@ -1024,0 +1039,0 @@ if (ref == null) continue;

data.js

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

errorBoundaries.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -86,19 +86,30 @@ * Copyright (c) Remix Software Inc.
     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."
+              );
+            `
+    }
+  })));
 }
@@ -127,2 +138,3 @@ let RemixCatchContext = /*#__PURE__*/React__default["default"].createContext(undefined);
 function RemixRootDefaultCatchBoundary() {
+  let caught = useCatch();
   return /*#__PURE__*/React__default["default"].createElement("html", {
@@ -132,12 +144,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."
+              );
+            `
+    }
+  })));
 }
@@ -144,0 +163,0 @@

esm/_virtual/_rollupPluginBabelHelpers.js

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

esm/browser.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -12,3 +12,3 @@ * Copyright (c) Remix Software Inc.
 import { createBrowserHistory } from 'history';
-import React__default from 'react';
+import * as React from 'react';
 import { RemixEntry } from './components.js';
@@ -22,3 +22,3 @@
 function RemixBrowser(_props) {
-  let historyRef = React__default.useRef();
+  let historyRef = React.useRef();
 
@@ -32,7 +32,7 @@ if (historyRef.current == null) {
   let history = historyRef.current;
-  let [state, dispatch] = React__default.useReducer((_, update) => update, {
+  let [state, dispatch] = React.useReducer((_, update) => update, {
     action: history.action,
     location: history.location
   });
-  React__default.useLayoutEffect(() => history.listen(dispatch), [history]);
+  React.useLayoutEffect(() => history.listen(dispatch), [history]);
   let entryContext = window.__remixContext;
@@ -46,3 +46,3 @@ entryContext.manifest = window.__remixManifest;
   entryContext.appState.trackCatchBoundaries = false;
-  return /*#__PURE__*/React__default.createElement(RemixEntry, {
+  return /*#__PURE__*/React.createElement(RemixEntry, {
     context: entryContext,
@@ -49,0 +49,0 @@ action: state.action,

esm/components.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -12,3 +12,3 @@ * Copyright (c) Remix Software Inc.
 import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import * as React from 'react';
 import { useHref, NavLink as NavLink$1, Link as Link$1, useLocation, useResolvedPath, useNavigate, Router, useRoutes } from 'react-router-dom';
@@ -23,6 +23,6 @@ import { RemixErrorBoundary, RemixRootDefaultErrorBoundary, RemixCatchBoundary, RemixRootDefaultCatchBoundary } from './errorBoundaries.js';
 
-const RemixEntryContext = /*#__PURE__*/React__default.createContext(undefined);
+const RemixEntryContext = /*#__PURE__*/React.createContext(undefined);
 
 function useRemixEntryContext() {
-  let context = React__default.useContext(RemixEntryContext);
+  let context = React.useContext(RemixEntryContext);
   invariant(context, "You must render this element inside a <Remix> element");
@@ -47,5 +47,5 @@ return context;
   } = entryContext;
-  let clientRoutes = React__default.useMemo(() => createClientRoutes(manifest.routes, routeModules, RemixRoute), [manifest, routeModules]);
-  let [clientState, setClientState] = React__default.useState(entryComponentDidCatchEmulator);
-  let [transitionManager] = React__default.useState(() => {
+  let clientRoutes = React.useMemo(() => createClientRoutes(manifest.routes, routeModules, RemixRoute), [manifest, routeModules]);
+  let [clientState, setClientState] = React.useState(entryComponentDidCatchEmulator);
+  let [transitionManager] = React.useState(() => {
     return createTransitionManager({
@@ -74,3 +74,3 @@ routes: clientRoutes,
 
-  let navigator = React__default.useMemo(() => {
+  let navigator = React.useMemo(() => {
     let push = (to, state) => {
@@ -91,3 +91,3 @@ return transitionManager.getState().transition.state !== "idle" ? _navigator.replace(to, state) : _navigator.push(to, state);
 
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     let {
@@ -109,3 +109,3 @@ location
   let ssrCatchBeforeRoutesRendered = clientState.catch && clientState.catchBoundaryRouteId === null ? clientState.catch : undefined;
-  return /*#__PURE__*/React__default.createElement(RemixEntryContext.Provider, {
+  return /*#__PURE__*/React.createElement(RemixEntryContext.Provider, {
     value: {
@@ -122,11 +122,11 @@ matches,
     }
-  }, /*#__PURE__*/React__default.createElement(RemixErrorBoundary, {
+  }, /*#__PURE__*/React.createElement(RemixErrorBoundary, {
     location: location,
     component: RemixRootDefaultErrorBoundary,
     error: ssrErrorBeforeRoutesRendered
-  }, /*#__PURE__*/React__default.createElement(RemixCatchBoundary, {
+  }, /*#__PURE__*/React.createElement(RemixCatchBoundary, {
     location: location,
     component: RemixRootDefaultCatchBoundary,
     catch: ssrCatchBeforeRoutesRendered
-  }, /*#__PURE__*/React__default.createElement(Router, {
+  }, /*#__PURE__*/React.createElement(Router, {
     navigationType: action,
@@ -136,3 +136,3 @@ location: location,
     static: staticProp
-  }, /*#__PURE__*/React__default.createElement(Routes, null)))));
+  }, /*#__PURE__*/React.createElement(Routes, null)))));
 }
@@ -159,6 +159,6 @@
 
-const RemixRouteContext = /*#__PURE__*/React__default.createContext(undefined);
+const RemixRouteContext = /*#__PURE__*/React.createContext(undefined);
 
 function useRemixRouteContext() {
-  let context = React__default.useContext(RemixRouteContext);
+  let context = React.useContext(RemixRouteContext);
   invariant(context, "You must render this element in a remix route element");
@@ -189,3 +189,3 @@ return context;
   } = routeModules[id];
-  let element = Component ? /*#__PURE__*/React__default.createElement(Component, null) : /*#__PURE__*/React__default.createElement(DefaultRouteComponent, {
+  let element = Component ? /*#__PURE__*/React.createElement(Component, null) : /*#__PURE__*/React.createElement(DefaultRouteComponent, {
     id: id
@@ -221,3 +221,3 @@ });
     };
-    element = /*#__PURE__*/React__default.createElement(RemixCatchBoundary, {
+    element = /*#__PURE__*/React.createElement(RemixCatchBoundary, {
       location: location,
@@ -265,3 +265,3 @@ component: CatchBoundary,
     };
-    element = /*#__PURE__*/React__default.createElement(RemixErrorBoundary, {
+    element = /*#__PURE__*/React.createElement(RemixErrorBoundary, {
       location: location,
@@ -275,3 +275,3 @@ component: ErrorBoundary,
 
-  return /*#__PURE__*/React__default.createElement(RemixRouteContext.Provider, {
+  return /*#__PURE__*/React.createElement(RemixRouteContext.Provider, {
     value: context
@@ -291,4 +291,4 @@ }, element);
 function usePrefetchBehavior(prefetch, theirElementProps) {
-  let [maybePrefetch, setMaybePrefetch] = React__default.useState(false);
-  let [shouldPrefetch, setShouldPrefetch] = React__default.useState(false);
+  let [maybePrefetch, setMaybePrefetch] = React.useState(false);
+  let [shouldPrefetch, setShouldPrefetch] = React.useState(false);
   let {
@@ -301,3 +301,3 @@ onFocus,
   } = theirElementProps;
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (prefetch === "render") {
@@ -320,3 +320,3 @@ setShouldPrefetch(true);
 
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     if (maybePrefetch) {
@@ -340,3 +340,3 @@ let id = setTimeout(() => {
 
-let NavLink = /*#__PURE__*/React__default.forwardRef(({
+let NavLink = /*#__PURE__*/React.forwardRef(({
   to,
@@ -348,10 +348,10 @@ prefetch = "none",
   let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(prefetch, props);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(NavLink$1, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavLink$1, _extends({
     ref: forwardedRef,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React__default.createElement(PrefetchPageLinks, {
+  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React.createElement(PrefetchPageLinks, {
     page: href
   }) : null);
 });
-let Link = /*#__PURE__*/React__default.forwardRef(({
+let Link = /*#__PURE__*/React.forwardRef(({
   to,
@@ -363,6 +363,6 @@ prefetch = "none",
   let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(prefetch, props);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Link$1, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Link$1, _extends({
     ref: forwardedRef,
     to: to
-  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React__default.createElement(PrefetchPageLinks, {
+  }, prefetchHandlers, props)), shouldPrefetch ? /*#__PURE__*/React.createElement(PrefetchPageLinks, {
     page: href
@@ -390,6 +390,6 @@ }) : null);
   } = useRemixEntryContext();
-  let links = React__default.useMemo(() => getLinksForMatches(matches, routeModules, manifest), [matches, routeModules, manifest]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, links.map(link => isPageLinkDescriptor(link) ? /*#__PURE__*/React__default.createElement(PrefetchPageLinks, _extends({
+  let links = React.useMemo(() => getLinksForMatches(matches, routeModules, manifest), [matches, routeModules, manifest]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, links.map(link => isPageLinkDescriptor(link) ? /*#__PURE__*/React.createElement(PrefetchPageLinks, _extends({
     key: link.page
-  }, link)) : /*#__PURE__*/React__default.createElement("link", _extends({
+  }, link)) : /*#__PURE__*/React.createElement("link", _extends({
     key: link.rel + link.href
@@ -405,3 +405,3 @@ }, link))));
   } = useRemixEntryContext();
-  let matches = React__default.useMemo(() => matchClientRoutes(clientRoutes, page), [clientRoutes, page]);
+  let matches = React.useMemo(() => matchClientRoutes(clientRoutes, page), [clientRoutes, page]);
 
@@ -413,3 +413,3 @@ if (!matches) {
 
-  return /*#__PURE__*/React__default.createElement(PrefetchPageLinksImpl, _extends({
+  return /*#__PURE__*/React.createElement(PrefetchPageLinksImpl, _extends({
     page: page,
@@ -424,4 +424,4 @@ matches: matches
   } = useRemixEntryContext();
-  let [styleLinks, setStyleLinks] = React__default.useState([]);
-  React__default.useEffect(() => {
+  let [styleLinks, setStyleLinks] = React.useState([]);
+  React.useEffect(() => {
     let interrupted = false;
@@ -448,10 +448,10 @@ getStylesheetPrefetchLinks(matches, routeModules).then(links => {
   } = useRemixEntryContext();
-  let newMatchesForData = React__default.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, location, "data"), [page, nextMatches, matches, location]);
-  let newMatchesForAssets = React__default.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, location, "assets"), [page, nextMatches, matches, location]);
-  let dataHrefs = React__default.useMemo(() => getDataLinkHrefs(page, newMatchesForData, manifest), [newMatchesForData, page, manifest]);
-  let moduleHrefs = React__default.useMemo(() => getModuleLinkHrefs(newMatchesForAssets, manifest), [newMatchesForAssets, manifest]); // needs to be a hook with async behavior because we need the modules, not
+  let newMatchesForData = React.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, location, "data"), [page, nextMatches, matches, location]);
+  let newMatchesForAssets = React.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, location, "assets"), [page, nextMatches, matches, location]);
+  let dataHrefs = React.useMemo(() => getDataLinkHrefs(page, newMatchesForData, manifest), [newMatchesForData, page, manifest]);
+  let moduleHrefs = React.useMemo(() => 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.createElement(React__default.Fragment, null, dataHrefs.map(href => /*#__PURE__*/React__default.createElement("link", _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, dataHrefs.map(href => /*#__PURE__*/React.createElement("link", _extends({
     key: href,
@@ -461,3 +461,3 @@ rel: "prefetch",
     href: href
-  }, linkProps))), moduleHrefs.map(href => /*#__PURE__*/React__default.createElement("link", _extends({
+  }, linkProps))), moduleHrefs.map(href => /*#__PURE__*/React.createElement("link", _extends({
     key: href,
@@ -470,3 +470,3 @@ rel: "modulepreload",
   // already with their own props
-  React__default.createElement("link", _extends({
+  React.createElement("link", _extends({
     key: link.href
@@ -509,22 +509,21 @@ }, link))));
 
-  return /*#__PURE__*/React__default.createElement(React__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.createElement(React.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.createElement("title", {
+    return name === "title" ? /*#__PURE__*/React.createElement("title", {
       key: "title"
-    }, meta[name]) : Array.isArray(value) ? value.map(content => isOpenGraphTag ? /*#__PURE__*/React__default.createElement("meta", {
+    }, value) : Array.isArray(value) ? value.map(content => isOpenGraphTag ? /*#__PURE__*/React.createElement("meta", {
       key: name + content,
       property: name,
       content: content
-    }) : /*#__PURE__*/React__default.createElement("meta", {
+    }) : /*#__PURE__*/React.createElement("meta", {
       key: name + content,
       name: name,
       content: content
-    })) : isOpenGraphTag ? /*#__PURE__*/React__default.createElement("meta", {
+    })) : isOpenGraphTag ? /*#__PURE__*/React.createElement("meta", {
       key: name,
       property: name,
       content: value
-    }) : /*#__PURE__*/React__default.createElement("meta", {
+    }) : /*#__PURE__*/React.createElement("meta", {
       key: name,
@@ -559,18 +558,18 @@ name: name,
   } = useRemixEntryContext();
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     isHydrated = true;
   }, []);
-  let initialScripts = React__default.useMemo(() => {
+  let initialScripts = React.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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("script", _extends({}, props, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("script", _extends({}, props, {
       suppressHydrationWarning: true,
       dangerouslySetInnerHTML: createHtml(contextScript)
-    })), /*#__PURE__*/React__default.createElement("script", _extends({}, props, {
+    })), /*#__PURE__*/React.createElement("script", _extends({}, props, {
       src: manifest.url
-    })), /*#__PURE__*/React__default.createElement("script", _extends({}, props, {
+    })), /*#__PURE__*/React.createElement("script", _extends({}, props, {
       dangerouslySetInnerHTML: createHtml(routeModulesScript),
       type: "module"
-    })), /*#__PURE__*/React__default.createElement("script", _extends({}, props, {
+    })), /*#__PURE__*/React.createElement("script", _extends({}, props, {
       src: manifest.entry.module,
@@ -584,3 +583,3 @@ type: "module"
 
-  let nextMatches = React__default.useMemo(() => {
+  let nextMatches = React.useMemo(() => {
     if (pendingLocation) {
@@ -600,3 +599,3 @@ // FIXME: can probably use transitionManager `nextMatches`
   let preloads = manifest.entry.imports.concat(routePreloads);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dedupe(preloads).map(path => /*#__PURE__*/React__default.createElement("link", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, dedupe(preloads).map(path => /*#__PURE__*/React.createElement("link", {
     key: path,
@@ -619,8 +618,8 @@ rel: "modulepreload",
  */
-let Form = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(FormImpl, _extends({}, props, {
+let Form = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
     ref: ref
   }));
 });
-let FormImpl = /*#__PURE__*/React__default.forwardRef(({
+let FormImpl = /*#__PURE__*/React.forwardRef(({
   reloadDocument = false,
@@ -638,3 +637,3 @@ replace = false,
   let formAction = useFormAction(action, formMethod);
-  let formRef = React__default.useRef();
+  let formRef = React.useRef();
   let ref = useComposedRefs(forwardedRef, formRef); // When calling `submit` on the form element itself, we don't get data from
@@ -656,4 +655,4 @@ // the button that submitted the event. For example:
 
-  let clickedButtonRef = React__default.useRef();
-  React__default.useEffect(() => {
+  let clickedButtonRef = React.useRef();
+  React.useEffect(() => {
     let form = formRef.current;
@@ -676,3 +675,3 @@ if (!form) return;
   }, []);
-  return /*#__PURE__*/React__default.createElement("form", _extends({
+  return /*#__PURE__*/React.createElement("form", _extends({
     ref: ref,
@@ -732,3 +731,3 @@ method: formMethod,
   } = useRemixEntryContext();
-  return React__default.useCallback((target, options = {}) => {
+  return React.useCallback((target, options = {}) => {
     let method;
@@ -869,3 +868,3 @@ let action;
 function useBeforeUnload(callback) {
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     window.addEventListener("beforeunload", callback);
@@ -923,5 +922,5 @@ return () => {
 function createFetcherForm(fetchKey) {
-  return /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.forwardRef((props, ref) => {
     // TODO: make ANOTHER form w/o a fetchKey prop
-    return /*#__PURE__*/React__default.createElement(FormImpl, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
       ref: ref,
@@ -943,5 +942,5 @@ fetchKey: fetchKey
   } = useRemixEntryContext();
-  let [key] = React__default.useState(() => String(++fetcherId));
-  let [Form] = React__default.useState(() => createFetcherForm(key));
-  let [load] = React__default.useState(() => href => {
+  let [key] = React.useState(() => String(++fetcherId));
+  let [Form] = React.useState(() => createFetcherForm(key));
+  let [load] = React.useState(() => href => {
     transitionManager.send({
@@ -955,3 +954,3 @@ type: "fetcher",
   let fetcher = transitionManager.getFetcher(key);
-  let fetcherWithComponents = React__default.useMemo(() => ({
+  let fetcherWithComponents = React.useMemo(() => ({
     Form,
@@ -962,3 +961,3 @@ submit,
   }), [fetcher, Form, submit, load]);
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     // Is this busted when the React team gets real weird and calls effects
@@ -989,3 +988,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.createElement("script", {
+  return /*#__PURE__*/React.createElement("script", {
     dangerouslySetInnerHTML: {
@@ -1014,3 +1013,3 @@ __html: `
 function useComposedRefs(...refs) {
-  return React__default.useCallback(node => {
+  return React.useCallback(node => {
     for (let ref of refs) {
@@ -1017,0 +1016,0 @@ if (ref == null) continue;

esm/data.js

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

esm/errorBoundaries.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -78,19 +78,30 @@ * Copyright (c) Remix Software Inc.
     charSet: "utf-8"
-  }), /*#__PURE__*/React__default.createElement("title", null, "Uncaught Exception!")), /*#__PURE__*/React__default.createElement("body", null, /*#__PURE__*/React__default.createElement("main", {
+  }), /*#__PURE__*/React__default.createElement("meta", {
+    name: "viewport",
+    content: "width=device-width,initial-scale=1,viewport-fit=cover"
+  }), /*#__PURE__*/React__default.createElement("title", null, "Application Error!")), /*#__PURE__*/React__default.createElement("body", null, /*#__PURE__*/React__default.createElement("main", {
     style: {
-      border: "solid 2px hsl(10, 50%, 50%)",
+      fontFamily: "system-ui, sans-serif",
       padding: "2rem"
     }
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h1", null, "Uncaught Exception!"), /*#__PURE__*/React__default.createElement("p", null, "If you are not the developer, please click back in your browser and try again."), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__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.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.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.createElement("p", null, "Read more about", " ", /*#__PURE__*/React__default.createElement("a", {
-    target: "_blank",
-    rel: "noreferrer",
-    href: "https://remix.run/guides/errors"
-  }, "Error Handling in Remix"), ".")))));
+  }, "Application Error"), /*#__PURE__*/React__default.createElement("pre", {
+    style: {
+      padding: "2rem",
+      background: "hsla(10, 50%, 50%, 0.1)",
+      color: "red",
+      overflow: "auto"
+    }
+  }, error.stack)), /*#__PURE__*/React__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."
+              );
+            `
+    }
+  })));
 }
@@ -119,2 +130,3 @@ let RemixCatchContext = /*#__PURE__*/React__default.createContext(undefined);
 function RemixRootDefaultCatchBoundary() {
+  let caught = useCatch();
   return /*#__PURE__*/React__default.createElement("html", {
@@ -124,14 +136,21 @@ lang: "en"
     charSet: "utf-8"
-  }), /*#__PURE__*/React__default.createElement("title", null, "Unhandled Thrown Response!")), /*#__PURE__*/React__default.createElement("body", null, /*#__PURE__*/React__default.createElement("main", {
+  }), /*#__PURE__*/React__default.createElement("meta", {
+    name: "viewport",
+    content: "width=device-width,initial-scale=1,viewport-fit=cover"
+  }), /*#__PURE__*/React__default.createElement("title", null, "Unhandled Thrown Response!")), /*#__PURE__*/React__default.createElement("body", null, /*#__PURE__*/React__default.createElement("h1", {
     style: {
-      border: "solid 2px hsl(10, 50%, 50%)",
+      fontFamily: "system-ui, sans-serif",
       padding: "2rem"
     }
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h1", null, "Unhandled Thrown Response!"), /*#__PURE__*/React__default.createElement("p", null, "If you are not the developer, please click back in your browser and try again."), /*#__PURE__*/React__default.createElement("p", null, "There was an unhandled thrown response in your application."), /*#__PURE__*/React__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.createElement("p", null, "Read more about", " ", /*#__PURE__*/React__default.createElement("a", {
-    target: "_blank",
-    rel: "noreferrer",
-    href: "https://remix.run/guides/errors"
-  }, "Throwing Responses in Remix"), ".")))));
+  }, caught.status, " ", caught.statusText), /*#__PURE__*/React__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."
+              );
+            `
+    }
+  })));
 }
 
 export { RemixCatchBoundary, RemixErrorBoundary, RemixRootDefaultCatchBoundary, RemixRootDefaultErrorBoundary, useCatch };

esm/index.js

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

esm/invariant.js

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

esm/links.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -29,4 +29,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);
@@ -33,0 +35,0 @@ let preloads = getCurrentPageModulePreloadHrefs(matches, manifest);

esm/markup.js

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

esm/routeMatching.js

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

esm/routeModules.js

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

esm/routes.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -11,3 +11,3 @@ * Copyright (c) Remix Software Inc.
  */
-import React__default from 'react';
+import * as React from 'react';
 import { loadRouteModule } from './routeModules.js';
@@ -22,3 +22,3 @@ import { fetchData, isCatchResponse, extractData, isRedirectResponse } from './data.js';
     caseSensitive: !!entryRoute.caseSensitive,
-    element: /*#__PURE__*/React__default.createElement(Component, {
+    element: /*#__PURE__*/React.createElement(Component, {
       id: entryRoute.id
@@ -25,0 +25,0 @@ }),

esm/scroll-restoration.js

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

esm/server.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -12,3 +12,3 @@ * Copyright (c) Remix Software Inc.
 import { Action, createPath } from 'history';
-import React__default from 'react';
+import * as React from 'react';
 import { RemixEntry } from './components.js';
@@ -66,3 +66,3 @@
   };
-  return /*#__PURE__*/React__default.createElement(RemixEntry, {
+  return /*#__PURE__*/React.createElement(RemixEntry, {
     context: context,
@@ -69,0 +69,0 @@ action: Action.Pop,

esm/transition.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -215,2 +215,3 @@ * Copyright (c) Remix Software Inc.
   async function handleActionFetchSubmission(key, submission, match) {
+    let currentFetcher = state.fetchers.get(key);
     let fetcher = {
@@ -220,3 +221,3 @@ state: "submitting",
       submission,
-      data: undefined
+      data: (currentFetcher === null || currentFetcher === void 0 ? void 0 : currentFetcher.data) || undefined
     };
@@ -376,2 +377,3 @@ state.fetchers.set(key, fetcher);
   async function handleLoaderFetchSubmission(href, key, submission, match) {
+    let currentFetcher = state.fetchers.get(key);
     let fetcher = {
@@ -381,3 +383,3 @@ state: "submitting",
       submission,
-      data: undefined
+      data: (currentFetcher === null || currentFetcher === void 0 ? void 0 : currentFetcher.data) || undefined
     };
@@ -427,2 +429,3 @@ state.fetchers.set(key, fetcher);
   async function handleLoaderFetch(href, key, match) {
+    let currentFetcher = state.fetchers.get(key);
     let fetcher = {
@@ -432,3 +435,3 @@ state: "loading",
       submission: undefined,
-      data: undefined
+      data: (currentFetcher === null || currentFetcher === void 0 ? void 0 : currentFetcher.data) || undefined
     };
@@ -435,0 +438,0 @@ state.fetchers.set(key, fetcher);

index.js

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

invariant.js

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

links.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -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);
@@ -37,0 +39,0 @@ let preloads = getCurrentPageModulePreloadHrefs(matches, manifest);

magicExports/client.js

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

magicExports/esm/client.js

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

markup.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -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-ea0e0959",
+  "version": "0.0.0-experimental-f7570678",
   "license": "MIT",
@@ -17,3 +17,3 @@ "repository": {
   "dependencies": {
-    "react-router-dom": "^6.1.1"
+    "react-router-dom": "^6.2.1"
   },
@@ -20,0 +20,0 @@ "peerDependencies": {

routeMatching.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -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;
 }
@@ -52,0 +52,0 @@ /**

routeModules.js

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

routes.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -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
@@ -33,0 +49,0 @@ }),

scroll-restoration.js

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

server.js

 /**
- * @remix-run/react v0.0.0-experimental-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -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-ea0e0959
+ * @remix-run/react v0.0.0-experimental-f7570678
  *
@@ -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
     };
@@ -380,2 +381,3 @@ state.fetchers.set(key, fetcher);
   async function handleLoaderFetchSubmission(href, key, submission, match) {
+    let currentFetcher = state.fetchers.get(key);
     let fetcher = {
@@ -385,3 +387,3 @@ state: "submitting",
       submission,
-      data: undefined
+      data: (currentFetcher === null || currentFetcher === void 0 ? void 0 : currentFetcher.data) || undefined
     };
@@ -431,2 +433,3 @@ state.fetchers.set(key, fetcher);
   async function handleLoaderFetch(href, key, match) {
+    let currentFetcher = state.fetchers.get(key);
     let fetcher = {
@@ -436,3 +439,3 @@ state: "loading",
       submission: undefined,
-      data: undefined
+      data: (currentFetcher === null || currentFetcher === void 0 ? void 0 : currentFetcher.data) || undefined
     };
@@ -439,0 +442,0 @@ state.fetchers.set(key, fetcher);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

6787

increased by1.51%

Worsened metrics

Total package byte prevSize

237461

decreased by-0.3%

Dependency changes

• Updatedreact-router-dom@^6.2.1