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

package/dist/lib/components.d.ts

@@ -65,8 +65,10 @@ export interface PathRouteProps {
     index?: false;
     children?: React.ReactNode;
     element?: React.ReactNode | null;
+    fallbackElement?: React.ReactNode | null;
     errorElement?: React.ReactNode | null;
     Component?: React.ComponentType | null;
+    Fallback?: React.ComponentType | null;
     ErrorBoundary?: React.ComponentType | null;
 }
 export interface LayoutRouteProps extends PathRouteProps {
@@ -84,8 +86,10 @@ export interface IndexRouteProps {
     index: true;
     children?: undefined;
     element?: React.ReactNode | null;
+    fallbackElement?: React.ReactNode | null;
     errorElement?: React.ReactNode | null;
     Component?: React.ComponentType | null;
+    Fallback?: React.ComponentType | null;
     ErrorBoundary?: React.ComponentType | null;
 }
 export type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;

package/dist/lib/context.d.ts

@@ -12,8 +12,10 @@ export interface IndexRouteObject {
     index: true;
     children?: undefined;
     element?: React.ReactNode | null;
+    fallbackElement?: React.ReactNode | null;
     errorElement?: React.ReactNode | null;
     Component?: React.ComponentType | null;
+    Fallback?: React.ComponentType | null;
     ErrorBoundary?: React.ComponentType | null;
     lazy?: LazyRouteFunction<RouteObject>;
 }
@@ -29,8 +31,10 @@ export interface NonIndexRouteObject {
     index?: false;
     children?: RouteObject[];
     element?: React.ReactNode | null;
+    fallbackElement?: React.ReactNode | null;
     errorElement?: React.ReactNode | null;
     Component?: React.ComponentType | null;
+    Fallback?: React.ComponentType | null;
     ErrorBoundary?: React.ComponentType | null;
     lazy?: LazyRouteFunction<RouteObject>;
 }

package/dist/lib/hooks.d.ts

@@ -96,7 +96,7 @@ export declare function useResolvedPath(to: To, { relative }?: {
  * @see https://reactrouter.com/hooks/use-routes
  */
 export declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;
-export declare function useRoutesImpl(routes: RouteObject[], locationArg?: Partial<Location> | string, dataRouterState?: RemixRouter["state"]): React.ReactElement | null;
+export declare function useRoutesImpl(routes: RouteObject[], locationArg?: Partial<Location> | string, dataRouterState?: RemixRouter["state"], future?: RemixRouter["future"]): React.ReactElement | null;
 type RenderErrorBoundaryProps = React.PropsWithChildren<{
     location: Location;
     revalidation: RevalidationState;
@@ -122,7 +122,7 @@ export declare class RenderErrorBoundary extends React.Component<RenderErrorBoun
     componentDidCatch(error: any, errorInfo: any): void;
     render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 }
-export declare function _renderMatches(matches: RouteMatch[] | null, parentMatches?: RouteMatch[], dataRouterState?: RemixRouter["state"] | null): React.ReactElement | null;
+export declare function _renderMatches(matches: RouteMatch[] | null, parentMatches?: RouteMatch[], dataRouterState?: RemixRouter["state"] | null, future?: RemixRouter["future"] | null): React.ReactElement | null;
 /**
  * Returns the ID for the nearest contextual route
  */

package/dist/main.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-e192105b
+ * React Router v0.0.0-experimental-178bc9ee
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/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.
  *
@@ -9,7 +9,7 @@
  * @license MIT
  */
 import * as React from 'react';
-import { UNSAFE_invariant, joinPaths, matchPath, UNSAFE_getPathContributingMatches, UNSAFE_warning, resolveTo, parsePath, matchRoutes, Action, UNSAFE_convertRouteMatchToUiMatch, stripBasename, IDLE_BLOCKER, isRouteErrorResponse, createMemoryHistory, AbortedDeferredError, createRouter } from '@remix-run/router';
+import { UNSAFE_invariant, joinPaths, matchPath, UNSAFE_getResolveToMatches, UNSAFE_warning, resolveTo, parsePath, matchRoutes, Action, UNSAFE_convertRouteMatchToUiMatch, stripBasename, IDLE_BLOCKER, isRouteErrorResponse, createMemoryHistory, AbortedDeferredError, createRouter } from '@remix-run/router';
 export { AbortedDeferredError, Action as NavigationType, createPath, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, resolvePath } from '@remix-run/router';
 
 const DataRouterContext = /*#__PURE__*/React.createContext(null);
@@ -175,7 +175,7 @@ function useNavigateUnstable() {
   let {
     pathname: locationPathname
   } = useLocation();
-  let routePathnamesJson = JSON.stringify(UNSAFE_getPathContributingMatches(matches).map(match => match.pathnameBase));
+  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches));
   let activeRef = React.useRef(false);
   useIsomorphicLayoutEffect(() => {
     activeRef.current = true;
@@ -254,9 +254,7 @@ function useResolvedPath(to, {
   let {
     pathname: locationPathname
   } = useLocation();
-  // Use the full pathname for the leaf match so we include splat values
-  // for "." links
-  let routePathnamesJson = JSON.stringify(UNSAFE_getPathContributingMatches(matches).map((match, idx) => idx === matches.length - 1 ? match.pathname : match.pathnameBase));
+  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches));
   return React.useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, relative === "path"), [to, routePathnamesJson, locationPathname, relative]);
 }
 /**
@@ -271,7 +269,7 @@ function useRoutes(routes, locationArg) {
   return useRoutesImpl(routes, locationArg);
 }
 // Internal implementation with accept optional param for RouterProvider usage
-function useRoutesImpl(routes, locationArg, dataRouterState) {
+function useRoutesImpl(routes, locationArg, dataRouterState, future) {
   !useInRouterContext() ? 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.
@@ -337,7 +335,7 @@ function useRoutesImpl(routes, locationArg, dataRouterState) {
     pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : 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`
   // to use the scoped location instead of the global location.
@@ -456,7 +454,7 @@ function RenderedRoute({
     value: routeContext
   }, children);
 }
-function _renderMatches(matches, parentMatches = [], dataRouterState = null) {
+function _renderMatches(matches, parentMatches = [], dataRouterState = null, future = null) {
   if (matches == null) {
     if (dataRouterState?.errors) {
       // Don't bail if we have data router errors so we can render them in the
@@ -474,18 +472,57 @@ function _renderMatches(matches, parentMatches = [], dataRouterState = null) {
     !(errorIndex >= 0) ? 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?.[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
@@ -631,9 +668,8 @@ function useRouteLoaderData(routeId) {
  */
 function useActionData() {
   let state = useDataRouterState(DataRouterStateHook.UseActionData);
-  let route = React.useContext(RouteContext);
-  !route ? UNSAFE_invariant(false, `useActionData must be used inside a RouteContext`)  : void 0;
-  return Object.values(state?.actionData || {})[0];
+  let routeId = useCurrentRouteId(DataRouterStateHook.UseLoaderData);
+  return state.actionData ? state.actionData[routeId] : undefined;
 }
 /**
  * Returns the nearest ancestor Route error, which could be a loader/action
@@ -809,6 +845,11 @@ function RouterProvider({
   // 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.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
+  React.useEffect(() => {
+    UNSAFE_warning(fallbackElement == null || !router.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.useMemo(() => {
     return {
       createHref: router.createHref,
@@ -849,14 +890,16 @@ function RouterProvider({
     navigator: navigator
   }, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
     routes: router.routes,
+    future: router.future,
     state: state
   }) : fallbackElement))), null);
 }
 function DataRoutes({
   routes,
+  future,
   state
 }) {
-  return useRoutesImpl(routes, undefined, state);
+  return useRoutesImpl(routes, undefined, state, future);
 }
 /**
  * A `<Router>` that stores all entries in memory.
@@ -927,7 +970,7 @@ function Navigate({
   let navigate = useNavigate();
   // Resolve the path outside of the effect so that when effects run twice in
   // StrictMode they navigate to the same place
-  let path = resolveTo(to, UNSAFE_getPathContributingMatches(matches).map(match => match.pathnameBase), locationPathname, relative === "path");
+  let path = resolveTo(to, UNSAFE_getResolveToMatches(matches), locationPathname, relative === "path");
   let jsonPath = JSON.stringify(path);
   React.useEffect(() => navigate(JSON.parse(jsonPath), {
     replace,
@@ -1218,6 +1261,17 @@ function mapRouteProperties(route) {
       Component: undefined
     });
   }
+  if (route.Fallback) {
+    {
+      if (route.fallbackElement) {
+        UNSAFE_warning(false, "You should not include both `Fallback` and `fallbackElement` on your route - " + "`Fallback` will be used.") ;
+      }
+    }
+    Object.assign(updates, {
+      fallbackElement: /*#__PURE__*/React.createElement(route.Fallback),
+      Fallback: undefined
+    });
+  }
   if (route.ErrorBoundary) {
     {
       if (route.errorElement) {