@remix-run/react - npm Package Compare versions

Comparing version 0.0.0-experimental-b697c4f3 to 0.0.0-experimental-b9cc66cb

_virtual/_rollupPluginBabelHelpers.js

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

browser.js

 /**
- * @remix-run/react v0.0.0-experimental-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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";
 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";
@@ -174,2 +173,3 @@ import type { PrefetchPageDescriptor } from "./links";
 export declare function useMatches(): {
+    id: string;
     pathname: string;
@@ -205,6 +205,2 @@ params: import("react-router").Params<string>;
 }): JSX.Element | null;
-export declare function Outlet<ContextData>({ context }: {
-    context?: ContextData;
-}): JSX.Element;
-export declare function useOutletContext<ContextData>(): ContextData;
 export {};

components.js

 /**
- * @remix-run/react v0.0.0-experimental-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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,
@@ -543,3 +558,9 @@ name: name,
 }
+/**
+ * Tracks whether Remix has finished hydrating or not, so scripts can be skipped
+ * during client-side updates.
+ */
 
+let isHydrated = false;
+
 /**
@@ -561,15 +582,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,
@@ -583,3 +607,3 @@ type: "module"
 
-  let nextMatches = React__default["default"].useMemo(() => {
+  let nextMatches = React__namespace.useMemo(() => {
     if (pendingLocation) {
@@ -599,3 +623,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,
@@ -605,3 +629,3 @@ rel: "modulepreload",
     crossOrigin: props.crossOrigin
-  })), initialScripts);
+  })), isHydrated ? null : initialScripts);
 }
@@ -619,8 +643,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,
@@ -638,3 +662,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
@@ -656,4 +680,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;
@@ -676,3 +700,3 @@ if (!form) return;
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__namespace.createElement("form", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
@@ -732,3 +756,3 @@ method: formMethod,
   } = useRemixEntryContext();
-  return React__default["default"].useCallback((target, options = {}) => {
+  return React__namespace.useCallback((target, options = {}) => {
     let method;
@@ -869,3 +893,3 @@ let action;
 function useBeforeUnload(callback) {
-  React__default["default"].useEffect(() => {
+  React__namespace.useEffect(() => {
     window.addEventListener("beforeunload", callback);
@@ -884,2 +908,4 @@ return () => {
   return matches.map(match => {
+    var _routeModules$match$r;
+
     let {
@@ -890,6 +916,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
     };
@@ -925,5 +954,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,
@@ -945,5 +974,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({
@@ -957,3 +986,3 @@ type: "fetcher",
   let fetcher = transitionManager.getFetcher(key);
-  let fetcherWithComponents = React__default["default"].useMemo(() => ({
+  let fetcherWithComponents = React__namespace.useMemo(() => ({
     Form,
@@ -964,3 +993,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
@@ -991,3 +1020,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: {
@@ -1016,3 +1045,3 @@ __html: `
 function useComposedRefs(...refs) {
-  return React__default["default"].useCallback(node => {
+  return React__namespace.useCallback(node => {
     for (let ref of refs) {
@@ -1033,15 +1062,2 @@ if (ref == null) continue;
 
-let OutletContext = /*#__PURE__*/React__default["default"].createContext(null);
-function Outlet({
-  context
-}) {
-  return /*#__PURE__*/React__default["default"].createElement(OutletContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Outlet, null));
-}
-function useOutletContext() {
-  let context = React__default["default"].useContext(OutletContext);
-  return context;
-}
-
 exports.Form = Form;
@@ -1054,3 +1070,2 @@ exports.FormImpl = FormImpl;
 exports.NavLink = NavLink;
-exports.Outlet = Outlet;
 exports.PrefetchPageLinks = PrefetchPageLinks;
@@ -1068,5 +1083,4 @@ exports.RemixEntry = RemixEntry;
 exports.useMatches = useMatches;
-exports.useOutletContext = useOutletContext;
 exports.useSubmit = useSubmit;
 exports.useSubmitImpl = useSubmitImpl;
 exports.useTransition = useTransition;

data.js

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

errorBoundaries.js

 /**
- * @remix-run/react v0.0.0-experimental-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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 @@

index.d.ts

 export type { RemixBrowserProps } from "./browser";
 export { RemixBrowser } from "./browser";
-export { 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, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useLoaderData, useActionData, useBeforeUnload, useMatches, Outlet, useOutletContext } from "./components";
+export { Meta, Links, Scripts, Link, NavLink, Form, PrefetchPageLinks, LiveReload, useFormAction, useSubmit, useTransition, useFetcher, useFetchers, useLoaderData, useActionData, useBeforeUnload, useMatches } from "./components";
 export type { FormMethod, FormEncType } from "./data";
@@ -7,0 +7,0 @@ export type { ThrownResponse } from "./errors";

index.js

 /**
- * @remix-run/react v0.0.0-experimental-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -25,2 +25,6 @@ * Copyright (c) Remix Software Inc.
 exports.RemixBrowser = browser.RemixBrowser;
+Object.defineProperty(exports, 'Outlet', {
+  enumerable: true,
+  get: function () { return reactRouterDom.Outlet; }
+});
 Object.defineProperty(exports, 'useHref', {
@@ -46,2 +50,6 @@ enumerable: true,
 });
+Object.defineProperty(exports, 'useOutletContext', {
+  enumerable: true,
+  get: function () { return reactRouterDom.useOutletContext; }
+});
 Object.defineProperty(exports, 'useParams', {
@@ -65,3 +73,2 @@ enumerable: true,
 exports.NavLink = components.NavLink;
-exports.Outlet = components.Outlet;
 exports.PrefetchPageLinks = components.PrefetchPageLinks;
@@ -76,3 +83,2 @@ exports.Scripts = components.Scripts;
 exports.useMatches = components.useMatches;
-exports.useOutletContext = components.useOutletContext;
 exports.useSubmit = components.useSubmit;
@@ -79,0 +85,0 @@ exports.useTransition = components.useTransition;

invariant.js

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

links.js

 /**
- * @remix-run/react v0.0.0-experimental-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

markup.js

 /**
- * @remix-run/react v0.0.0-experimental-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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-b697c4f3",
+  "version": "0.0.0-experimental-b9cc66cb",
   "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-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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-b697c4f3
+ * @remix-run/react v0.0.0-experimental-b9cc66cb
  *
@@ -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

6796

increased by1.49%

Worsened metrics

Total package byte prevSize

238015

decreased by-0.27%

Dependency changes

• Updatedreact-router-dom@^6.2.1