react-router 0.0.0-experimental-e192105b → 0.0.0-experimental-178bc9ee

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

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-e192105b
+ * React Router v0.0.0-experimental-178bc9ee
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -234,7 +234,7 @@
     let {
       pathname: locationPathname
     } = useLocation();
-    let routePathnamesJson = JSON.stringify(router.UNSAFE_getPathContributingMatches(matches).map(match => match.pathnameBase));
+    let routePathnamesJson = JSON.stringify(router.UNSAFE_getResolveToMatches(matches));
     let activeRef = React__namespace.useRef(false);
     useIsomorphicLayoutEffect(() => {
       activeRef.current = true;
@@ -323,10 +323,7 @@
     let {
       pathname: locationPathname
     } = useLocation();
-
-    // Use the full pathname for the leaf match so we include splat values
-    // for "." links
-    let routePathnamesJson = JSON.stringify(router.UNSAFE_getPathContributingMatches(matches).map((match, idx) => idx === matches.length - 1 ? match.pathname : match.pathnameBase));
+    let routePathnamesJson = JSON.stringify(router.UNSAFE_getResolveToMatches(matches));
     return React__namespace.useMemo(() => router.resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, relative === "path"), [to, routePathnamesJson, locationPathname, relative]);
   }
 
@@ -343,7 +340,7 @@
   }
 
   // Internal implementation with accept optional param for RouterProvider usage
-  function useRoutesImpl(routes, locationArg, dataRouterState) {
+  function useRoutesImpl(routes, locationArg, dataRouterState, future) {
     !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.
     "useRoutes() may be used only in the context of a <Router> component.")  : void 0;
@@ -409,7 +406,7 @@
       pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : router.joinPaths([parentPathnameBase,
       // Re-encode pathnames that were decoded inside matchRoutes
       navigator.encodeLocation ? navigator.encodeLocation(match.pathnameBase).pathname : match.pathnameBase])
-    })), parentMatches, dataRouterState);
+    })), parentMatches, dataRouterState, future);
 
     // When a user passes in a `locationArg`, the associated routes need to
     // be wrapped in a new `LocationContext.Provider` in order for `useLocation`
@@ -531,7 +528,7 @@
       value: routeContext
     }, children);
   }
-  function _renderMatches(matches, parentMatches, dataRouterState) {
+  function _renderMatches(matches, parentMatches, dataRouterState, future) {
     var _dataRouterState2;
     if (parentMatches === void 0) {
       parentMatches = [];
@@ -539,6 +536,9 @@
     if (dataRouterState === void 0) {
       dataRouterState = null;
     }
+    if (future === void 0) {
+      future = null;
+    }
     if (matches == null) {
       var _dataRouterState;
       if ((_dataRouterState = dataRouterState) != null && _dataRouterState.errors) {
@@ -558,18 +558,58 @@
       !(errorIndex >= 0) ? router.UNSAFE_invariant(false, "Could not find a matching route for errors on route IDs: " + Object.keys(errors).join(","))  : void 0;
       renderedMatches = renderedMatches.slice(0, Math.min(renderedMatches.length, errorIndex + 1));
     }
+
+    // If we're in a partial hydration mode, detect if we need to render down to
+    // a given Fallback while we load the rest of the hydration data
+    let renderFallback = false;
+    let fallbackIndex = -1;
+    if (dataRouterState && future && future.v7_partialHydration) {
+      for (let i = 0; i < renderedMatches.length; i++) {
+        let match = renderedMatches[i];
+        // Track the deepest fallback up until the first route without data
+        if (match.route.Fallback || match.route.fallbackElement) {
+          fallbackIndex = i;
+        }
+        if (match.route.loader && match.route.id && dataRouterState.loaderData[match.route.id] === undefined) {
+          // We found the first route without data, flag that we need to render
+          // a fallback and render up until the appropriate fallback
+          renderFallback = true;
+          if (fallbackIndex >= 0) {
+            renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
+          } else {
+            renderedMatches = [renderedMatches[0]];
+          }
+          break;
+        }
+      }
+    }
     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
+      // Only data routers handle errors/fallbacks
+      let error;
+      let fallback = false;
       let errorElement = null;
+      let fallbackElement = null;
       if (dataRouterState) {
+        error = errors && match.route.id ? errors[match.route.id] : null;
         errorElement = match.route.errorElement || defaultErrorElement;
+        if (renderFallback) {
+          if (fallbackIndex < 0 && index === 0) {
+            warningOnce("route-fallback", false, "No `Fallback` element provided to render during initial hydration");
+            fallback = true;
+            fallbackElement = null;
+          } else if (fallbackIndex === index) {
+            fallback = true;
+            fallbackElement = match.route.fallbackElement || null;
+          }
+        }
       }
       let matches = parentMatches.concat(renderedMatches.slice(0, index + 1));
       let getChildren = () => {
         let children;
         if (error) {
           children = errorElement;
+        } else if (fallback) {
+          children = fallbackElement;
         } else if (match.route.Component) {
           // Note: This is a de-optimized path since React won't re-use the
           // ReactElement since it's identity changes with each new
@@ -723,9 +763,8 @@
    */
   function useActionData() {
     let state = useDataRouterState(DataRouterStateHook.UseActionData);
-    let route = React__namespace.useContext(RouteContext);
-    !route ? router.UNSAFE_invariant(false, "useActionData must be used inside a RouteContext")  : void 0;
-    return Object.values((state == null ? void 0 : state.actionData) || {})[0];
+    let routeId = useCurrentRouteId(DataRouterStateHook.UseLoaderData);
+    return state.actionData ? state.actionData[routeId] : undefined;
   }
 
   /**
@@ -899,10 +938,10 @@
   function RouterProvider(_ref) {
     let {
       fallbackElement,
-      router,
+      router: router$1,
       future
     } = _ref;
-    let [state, setStateImpl] = React__namespace.useState(router.state);
+    let [state, setStateImpl] = React__namespace.useState(router$1.state);
     let {
       v7_startTransition
     } = future || {};
@@ -916,30 +955,35 @@
 
     // Need to use a layout effect here so we are subscribed early enough to
     // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
-    React__namespace.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
+    React__namespace.useLayoutEffect(() => router$1.subscribe(setState), [router$1, setState]);
+    React__namespace.useEffect(() => {
+      router.UNSAFE_warning(fallbackElement == null || !router$1.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using `v7_partialHydration`") ;
+      // Only log this once on initial mount
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     let navigator = React__namespace.useMemo(() => {
       return {
-        createHref: router.createHref,
-        encodeLocation: router.encodeLocation,
-        go: n => router.navigate(n),
-        push: (to, state, opts) => router.navigate(to, {
+        createHref: router$1.createHref,
+        encodeLocation: router$1.encodeLocation,
+        go: n => router$1.navigate(n),
+        push: (to, state, opts) => router$1.navigate(to, {
           state,
           preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
         }),
-        replace: (to, state, opts) => router.navigate(to, {
+        replace: (to, state, opts) => router$1.navigate(to, {
           replace: true,
           state,
           preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
         })
       };
-    }, [router]);
-    let basename = router.basename || "/";
+    }, [router$1]);
+    let basename = router$1.basename || "/";
     let dataRouterContext = React__namespace.useMemo(() => ({
-      router,
+      router: router$1,
       navigator,
       static: false,
       basename
-    }), [router, navigator, basename]);
+    }), [router$1, 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
@@ -957,16 +1001,18 @@
       navigationType: state.historyAction,
       navigator: navigator
     }, state.initialized ? /*#__PURE__*/React__namespace.createElement(DataRoutes, {
-      routes: router.routes,
+      routes: router$1.routes,
+      future: router$1.future,
       state: state
     }) : fallbackElement))), null);
   }
   function DataRoutes(_ref2) {
     let {
       routes,
+      future,
       state
     } = _ref2;
-    return useRoutesImpl(routes, undefined, state);
+    return useRoutesImpl(routes, undefined, state, future);
   }
   /**
    * A `<Router>` that stores all entries in memory.
@@ -1039,7 +1085,7 @@
 
     // Resolve the path outside of the effect so that when effects run twice in
     // StrictMode they navigate to the same place
-    let path = router.resolveTo(to, router.UNSAFE_getPathContributingMatches(matches).map(match => match.pathnameBase), locationPathname, relative === "path");
+    let path = router.resolveTo(to, router.UNSAFE_getResolveToMatches(matches), locationPathname, relative === "path");
     let jsonPath = JSON.stringify(path);
     React__namespace.useEffect(() => navigate(JSON.parse(jsonPath), {
       replace,
@@ -1343,6 +1389,17 @@
         Component: undefined
       });
     }
+    if (route.Fallback) {
+      {
+        if (route.fallbackElement) {
+          router.UNSAFE_warning(false, "You should not include both `Fallback` and `fallbackElement` on your route - " + "`Fallback` will be used.") ;
+        }
+      }
+      Object.assign(updates, {
+        fallbackElement: /*#__PURE__*/React__namespace.createElement(route.Fallback),
+        Fallback: undefined
+      });
+    }
     if (route.ErrorBoundary) {
       {
         if (route.errorElement) {