react-router 0.0.0-experimental-e7e9ce6e → 0.0.0-experimental-91f2bf54

package/dist/umd/react-router.development.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-e7e9ce6e
+ * React Router v0.0.0-experimental-91f2bf54
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -34,23 +34,6 @@
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
   /**
    * Copyright (c) Facebook, Inc. and its affiliates.
    *
@@ -274,6 +257,23 @@
     RouteErrorContext.displayName = "RouteError";
   }
 
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
   /**
    * Returns the full href for the given "to" value. This is useful for building
    * custom links that are also accessible and preserve right-click behavior.
@@ -401,7 +401,7 @@
         options = {};
       }
 
-      router.warning(activeRef.current, "You should call navigate() in a React.useEffect(), not when " + "your component is first rendered.") ;
+      router.UNSAFE_warning(activeRef.current, "You should call navigate() in a React.useEffect(), not when " + "your component is first rendered.") ;
       if (!activeRef.current) return;
 
       if (typeof to === "number") {
@@ -554,8 +554,8 @@
     });
 
     {
-      router.warning(parentRoute || matches != null, "No routes matched location \"" + location.pathname + location.search + location.hash + "\" ") ;
-      router.warning(matches == null || matches[matches.length - 1].route.element !== undefined, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" does not have an element. " + "This means it will render an <Outlet /> with a null value by default resulting in an \"empty\" page.") ;
+      router.UNSAFE_warning(parentRoute || matches != null, "No routes matched location \"" + location.pathname + location.search + location.hash + "\" ") ;
+      router.UNSAFE_warning(matches == null || matches[matches.length - 1].route.element !== undefined || matches[matches.length - 1].route.Component !== undefined, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" " + "does not have an element or Component. This means it will render an <Outlet /> with a " + "null value by default resulting in an \"empty\" page.") ;
     }
 
     let renderedMatches = _renderMatches(matches && matches.map(match => Object.assign({}, match, {
@@ -587,7 +587,7 @@
     return renderedMatches;
   }
 
-  function DefaultErrorElement() {
+  function DefaultErrorComponent() {
     let error = useRouteError();
     let message = router.isRouteErrorResponse(error) ? error.status + " " + error.statusText : error instanceof Error ? error.message : JSON.stringify(error);
     let stack = error instanceof Error ? error.stack : null;
@@ -605,7 +605,7 @@
     {
       devInfo = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("p", null, "\uD83D\uDCBF Hey developer \uD83D\uDC4B"), /*#__PURE__*/React__namespace.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own\xA0", /*#__PURE__*/React__namespace.createElement("code", {
         style: codeStyles
-      }, "errorElement"), " props on\xA0", /*#__PURE__*/React__namespace.createElement("code", {
+      }, "ErrorBoundary"), " prop on\xA0", /*#__PURE__*/React__namespace.createElement("code", {
         style: codeStyles
       }, "<Route>")));
     }
@@ -684,7 +684,7 @@
     let dataRouterContext = React__namespace.useContext(DataRouterContext); // Track how deep we got in our render pass to emulate SSR componentDidCatch
     // in a DataStaticRouter
 
-    if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && match.route.errorElement) {
+    if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && (match.route.errorElement || match.route.ErrorBoundary)) {
       dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;
     }
 
@@ -721,21 +721,45 @@
     return renderedMatches.reduceRight((outlet, match, index) => {
       let error = match.route.id ? errors == null ? void 0 : errors[match.route.id] : null; // Only data routers handle errors
 
-      let errorElement = dataRouterState ? match.route.errorElement || /*#__PURE__*/React__namespace.createElement(DefaultErrorElement, null) : null;
+      let errorElement = null;
+
+      if (dataRouterState) {
+        if (match.route.ErrorBoundary) {
+          errorElement = /*#__PURE__*/React__namespace.createElement(match.route.ErrorBoundary, null);
+        } else if (match.route.errorElement) {
+          errorElement = match.route.errorElement;
+        } else {
+          errorElement = /*#__PURE__*/React__namespace.createElement(DefaultErrorComponent, null);
+        }
+      }
+
       let matches = parentMatches.concat(renderedMatches.slice(0, index + 1));
 
-      let getChildren = () => /*#__PURE__*/React__namespace.createElement(RenderedRoute, {
-        match: match,
-        routeContext: {
-          outlet,
-          matches
+      let getChildren = () => {
+        let children = outlet;
+
+        if (error) {
+          children = errorElement;
+        } else if (match.route.Component) {
+          children = /*#__PURE__*/React__namespace.createElement(match.route.Component, null);
+        } else if (match.route.element) {
+          children = match.route.element;
         }
-      }, error ? errorElement : match.route.element !== undefined ? match.route.element : outlet); // Only wrap in an error boundary within data router usages when we have an
-      // errorElement on this route.  Otherwise let it bubble up to an ancestor
-      // errorElement
 
+        return /*#__PURE__*/React__namespace.createElement(RenderedRoute, {
+          match: match,
+          routeContext: {
+            outlet,
+            matches
+          },
+          children: children
+        });
+      }; // Only wrap in an error boundary within data router usages when we have an
+      // ErrorBoundary/errorElement on this route.  Otherwise let it bubble up to
+      // an ancestor ErrorBoundary/errorElement
 
-      return dataRouterState && (match.route.errorElement || index === 0) ? /*#__PURE__*/React__namespace.createElement(RenderErrorBoundary, {
+
+      return dataRouterState && (match.route.ErrorBoundary || match.route.errorElement || index === 0) ? /*#__PURE__*/React__namespace.createElement(RenderErrorBoundary, {
         location: dataRouterState.location,
         component: errorElement,
         error: error,
@@ -757,6 +781,7 @@
   var DataRouterStateHook;
 
   (function (DataRouterStateHook) {
+    DataRouterStateHook["UseBlocker"] = "useBlocker";
     DataRouterStateHook["UseLoaderData"] = "useLoaderData";
     DataRouterStateHook["UseActionData"] = "useActionData";
     DataRouterStateHook["UseRouteError"] = "useRouteError";
@@ -880,7 +905,7 @@
   /**
    * Returns the nearest ancestor Route error, which could be a loader/action
    * error or a render error.  This is intended to be called from your
-   * errorElement to display a proper error message.
+   * ErrorBoundary/errorElement to display a proper error message.
    */
 
   function useRouteError() {
@@ -926,21 +951,24 @@
     let {
       router
     } = useDataRouterContext(DataRouterHook.UseBlocker);
+    let state = useDataRouterState(DataRouterStateHook.UseBlocker);
     let [blockerKey] = React__namespace.useState(() => String(++blockerId));
     let blockerFunction = React__namespace.useCallback(args => {
       return typeof shouldBlock === "function" ? !!shouldBlock(args) : !!shouldBlock;
     }, [shouldBlock]);
     let blocker = router.getBlocker(blockerKey, blockerFunction); // Cleanup on unmount
 
-    React__namespace.useEffect(() => () => router.deleteBlocker(blockerKey), [router, blockerKey]);
-    return blocker;
+    React__namespace.useEffect(() => () => router.deleteBlocker(blockerKey), [router, blockerKey]); // Prefer the blocker from state since DataRouterContext is memoized so this
+    // ensures we update on blocker state updates
+
+    return state.blockers.get(blockerKey) || blocker;
   }
   const alreadyWarned = {};
 
   function warningOnce(key, cond, message) {
     if (!cond && !alreadyWarned[key]) {
       alreadyWarned[key] = true;
-      router.warning(false, message) ;
+      router.UNSAFE_warning(false, message) ;
     }
   }
 
@@ -952,11 +980,12 @@
       fallbackElement,
       router
     } = _ref;
-    // Sync router state to our component state to force re-renders
-    let state = useSyncExternalStore(router.subscribe, () => router.state, // We have to provide this so React@18 doesn't complain during hydration,
+    let getState = React__namespace.useCallback(() => router.state, [router]); // Sync router state to our component state to force re-renders
+
+    let state = useSyncExternalStore(router.subscribe, getState, // We have to provide this so React@18 doesn't complain during hydration,
     // but we pass our serialized hydration data into the router so state here
     // is already synced with what the server saw
-    () => router.state);
+    getState);
     let navigator = React__namespace.useMemo(() => {
       return {
         createHref: router.createHref,
@@ -973,7 +1002,13 @@
         })
       };
     }, [router]);
-    let basename = router.basename || "/"; // The fragment and {null} here are important!  We need them to keep React 18's
+    let basename = router.basename || "/";
+    let dataRouterContext = React__namespace.useMemo(() => ({
+      router,
+      navigator,
+      static: false,
+      basename
+    }), [router, navigator, basename]); // The fragment and {null} here are important!  We need them to keep React 18's
     // useId happy when we are server-rendering since we may have a <script> here
     // containing the hydrated server-side staticContext (from StaticRouterProvider).
     // useId relies on the component tree structure to generate deterministic id's
@@ -981,13 +1016,7 @@
     // we don't need the <script> tag
 
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(DataRouterContext.Provider, {
-      value: {
-        router,
-        navigator,
-        static: false,
-        // Do we need this?
-        basename
-      }
+      value: dataRouterContext
     }, /*#__PURE__*/React__namespace.createElement(DataRouterStateContext.Provider, {
       value: state
     }, /*#__PURE__*/React__namespace.createElement(Router, {
@@ -1054,7 +1083,7 @@
     !useInRouterContext() ? router.UNSAFE_invariant(false, // TODO: This error is probably because they somehow have 2 versions of
     // the router loaded. We can help them understand how to avoid that.
     "<Navigate> may be used only in the context of a <Router> component.")  : void 0;
-    router.warning(!React__namespace.useContext(NavigationContext).static, "<Navigate> must not be used on the initial render in a <StaticRouter>. " + "This is a no-op, but you should modify your code so the <Navigate> is " + "only ever rendered in response to some user interaction or state change.") ;
+    router.UNSAFE_warning(!React__namespace.useContext(NavigationContext).static, "<Navigate> must not be used on the initial render in a <StaticRouter>. " + "This is a no-op, but you should modify your code so the <Navigate> is " + "only ever rendered in response to some user interaction or state change.") ;
     let dataRouterState = React__namespace.useContext(DataRouterStateContext);
     let navigate = useNavigate();
     React__namespace.useEffect(() => {
@@ -1110,15 +1139,9 @@
       navigator,
       static: staticProp = false
     } = _ref4;
-    // Temporarily commented out for testing of <CompatRouter> nested in a
-    // <RouterProvider>
-    // invariant(
-    //   !useInRouterContext(),
-    //   `You cannot render a <Router> inside another <Router>.` +
-    //     ` You should never have more than one in your app.`
-    // );
-    // Preserve trailing slashes on basename, so we can let the user control
+    !!useInRouterContext() ? router.UNSAFE_invariant(false, "You cannot render a <Router> inside another <Router>." + " You should never have more than one in your app.")  : void 0; // Preserve trailing slashes on basename, so we can let the user control
     // the enforcement of trailing slashes throughout the app
+
     let basename = basenameProp.replace(/^\/*/, "/");
     let navigationContext = React__namespace.useMemo(() => ({
       basename,
@@ -1137,7 +1160,7 @@
       state = null,
       key = "default"
     } = locationProp;
-    let location = React__namespace.useMemo(() => {
+    let locationContext = React__namespace.useMemo(() => {
       let trailingPathname = router.stripBasename(pathname, basename);
 
       if (trailingPathname == null) {
@@ -1145,16 +1168,19 @@
       }
 
       return {
-        pathname: trailingPathname,
-        search,
-        hash,
-        state,
-        key
+        location: {
+          pathname: trailingPathname,
+          search,
+          hash,
+          state,
+          key
+        },
+        navigationType
       };
-    }, [basename, pathname, search, hash, state, key]);
-    router.warning(location != null, "<Router basename=\"" + basename + "\"> is not able to match the URL " + ("\"" + pathname + search + hash + "\" because it does not start with the ") + "basename, so the <Router> won't render anything.") ;
+    }, [basename, pathname, search, hash, state, key, navigationType]);
+    router.UNSAFE_warning(locationContext != null, "<Router basename=\"" + basename + "\"> is not able to match the URL " + ("\"" + pathname + search + hash + "\" because it does not start with the ") + "basename, so the <Router> won't render anything.") ;
 
-    if (location == null) {
+    if (locationContext == null) {
       return null;
     }
 
@@ -1162,10 +1188,7 @@
       value: navigationContext
     }, /*#__PURE__*/React__namespace.createElement(LocationContext.Provider, {
       children: children,
-      value: {
-        location,
-        navigationType
-      }
+      value: locationContext
     }));
   }
 
@@ -1362,14 +1385,17 @@
         id: element.props.id || treePath.join("-"),
         caseSensitive: element.props.caseSensitive,
         element: element.props.element,
+        Component: element.props.Component,
         index: element.props.index,
         path: element.props.path,
         loader: element.props.loader,
         action: element.props.action,
         errorElement: element.props.errorElement,
-        hasErrorBoundary: element.props.errorElement != null,
+        ErrorBoundary: element.props.ErrorBoundary,
+        hasErrorBoundary: element.props.ErrorBoundary != null || element.props.errorElement != null,
         shouldRevalidate: element.props.shouldRevalidate,
-        handle: element.props.handle
+        handle: element.props.handle,
+        lazy: element.props.lazy
       };
 
       if (element.props.children) {
@@ -1387,26 +1413,21 @@
   function renderMatches(matches) {
     return _renderMatches(matches);
   }
-  /**
-   * @private
-   * Walk the route tree and add hasErrorBoundary if it's not provided, so that
-   * users providing manual route arrays can just specify errorElement
-   */
-
-  function enhanceManualRouteObjects(routes) {
-    return routes.map(route => {
-      let routeClone = _extends({}, route);
 
-      if (routeClone.hasErrorBoundary == null) {
-        routeClone.hasErrorBoundary = routeClone.errorElement != null;
+  function detectErrorBoundary(route) {
+    {
+      if (route.Component && route.element) {
+        router.UNSAFE_warning(false, "You should not include both `Component` and `element` on your route - " + "`element` will be ignored.") ;
       }
 
-      if (routeClone.children) {
-        routeClone.children = enhanceManualRouteObjects(routeClone.children);
+      if (route.ErrorBoundary && route.errorElement) {
+        router.UNSAFE_warning(false, "You should not include both `ErrorBoundary` and `errorElement` on your route - " + "`errorElement` will be ignored.") ;
       }
+    } // Note: this check also occurs in createRoutesFromChildren so update
+    // there if you change this
 
-      return routeClone;
-    });
+
+    return Boolean(route.ErrorBoundary) || Boolean(route.errorElement);
   }
 
   function createMemoryRouter(routes, opts) {
@@ -1417,7 +1438,8 @@
         initialIndex: opts == null ? void 0 : opts.initialIndex
       }),
       hydrationData: opts == null ? void 0 : opts.hydrationData,
-      routes: enhanceManualRouteObjects(routes)
+      routes,
+      detectErrorBoundary
     }).initialize();
   } ///////////////////////////////////////////////////////////////////////////////
 
@@ -1482,7 +1504,7 @@
   exports.UNSAFE_LocationContext = LocationContext;
   exports.UNSAFE_NavigationContext = NavigationContext;
   exports.UNSAFE_RouteContext = RouteContext;
-  exports.UNSAFE_enhanceManualRouteObjects = enhanceManualRouteObjects;
+  exports.UNSAFE_detectErrorBoundary = detectErrorBoundary;
   exports.createMemoryRouter = createMemoryRouter;
   exports.createRoutesFromChildren = createRoutesFromChildren;
   exports.createRoutesFromElements = createRoutesFromChildren;