react-router 0.0.0-experimental-35fa15e5 → 0.0.0-experimental-8bb3ffdf

package/dist/lib/components.d.ts

@@ -3,12 +3,13 @@ import { Action as NavigationType } from "@remix-run/router";
 import * as React from "react";
 import type { IndexRouteObject, Navigator, NonIndexRouteObject, RouteMatch, RouteObject } from "./context";
 export interface FutureConfig {
+    v7_relativeSplatPath: boolean;
     v7_startTransition: boolean;
 }
 export interface RouterProviderProps {
     fallbackElement?: React.ReactNode;
     router: RemixRouter;
-    future?: Partial<FutureConfig>;
+    future?: Partial<Pick<FutureConfig, "v7_startTransition">>;
 }
 /**
  * Given a Remix Router instance, render the appropriate UI
@@ -106,6 +107,7 @@ export interface RouterProps {
     navigationType?: NavigationType;
     navigator: Navigator;
     static?: boolean;
+    future?: Partial<Pick<FutureConfig, "v7_relativeSplatPath">>;
 }
 /**
  * Provides location context for the rest of the app.
@@ -116,7 +118,7 @@ export interface RouterProps {
  *
  * @see https://reactrouter.com/router-components/router
  */
-export declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, }: RouterProps): React.ReactElement | null;
+export declare function Router({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, future, }: RouterProps): React.ReactElement | null;
 export interface RoutesProps {
     children?: React.ReactNode;
     location?: Partial<Location> | string;

package/dist/lib/context.d.ts

@@ -47,7 +47,7 @@ export interface RouteMatch<ParamKey extends string = string, RouteObjectType ex
 }
 export interface DataRouteMatch extends RouteMatch<string, DataRouteObject> {
 }
-export interface DataRouterContextObject extends NavigationContextObject {
+export interface DataRouterContextObject extends Omit<NavigationContextObject, "future"> {
     router: Router;
     staticContext?: StaticHandlerContext;
 }
@@ -82,6 +82,9 @@ interface NavigationContextObject {
     basename: string;
     navigator: Navigator;
     static: boolean;
+    future: {
+        v7_relativeSplatPath: boolean;
+    };
 }
 export declare const NavigationContext: React.Context<NavigationContextObject>;
 interface LocationContextObject {

package/dist/main.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-35fa15e5
+ * React Router v0.0.0-experimental-8bb3ffdf
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/react-router.development.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-35fa15e5
+ * React Router v0.0.0-experimental-8bb3ffdf
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -167,6 +167,7 @@ function useNavigateUnstable() {
   let dataRouterContext = React.useContext(DataRouterContext);
   let {
     basename,
+    future,
     navigator
   } = React.useContext(NavigationContext);
   let {
@@ -175,7 +176,7 @@ function useNavigateUnstable() {
   let {
     pathname: locationPathname
   } = useLocation();
-  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches));
+  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches, future.v7_relativeSplatPath));
   let activeRef = React.useRef(false);
   useIsomorphicLayoutEffect(() => {
     activeRef.current = true;
@@ -248,13 +249,16 @@ function useParams() {
 function useResolvedPath(to, {
   relative
 } = {}) {
+  let {
+    future
+  } = React.useContext(NavigationContext);
   let {
     matches
   } = React.useContext(RouteContext);
   let {
     pathname: locationPathname
   } = useLocation();
-  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches));
+  let routePathnamesJson = JSON.stringify(UNSAFE_getResolveToMatches(matches, future.v7_relativeSplatPath));
   return React.useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, relative === "path"), [to, routePathnamesJson, locationPathname, relative]);
 }
 /**
@@ -325,7 +329,7 @@ function useRoutesImpl(routes, locationArg, dataRouterState, future) {
   });
   {
     UNSAFE_warning(parentRoute || matches != null, `No routes matched location "${location.pathname}${location.search}${location.hash}" `) ;
-    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.`) ;
+    UNSAFE_warning(matches == null || matches[matches.length - 1].route.element !== undefined || matches[matches.length - 1].route.Component !== undefined || matches[matches.length - 1].route.lazy !== 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, {
     params: Object.assign({}, parentParams, match.params),
@@ -422,7 +426,7 @@ class RenderErrorBoundary extends React.Component {
     // this because the error provided from the app state may be cleared without
     // the location changing.
     return {
-      error: props.error || state.error,
+      error: props.error !== undefined ? props.error : state.error,
       location: state.location,
       revalidation: props.revalidation || state.revalidation
     };
@@ -431,7 +435,7 @@ class RenderErrorBoundary extends React.Component {
     console.error("React Router caught the following error during render", error, errorInfo);
   }
   render() {
-    return this.state.error ? /*#__PURE__*/React.createElement(RouteContext.Provider, {
+    return this.state.error !== undefined ? /*#__PURE__*/React.createElement(RouteContext.Provider, {
       value: this.props.routeContext
     }, /*#__PURE__*/React.createElement(RouteErrorContext.Provider, {
       value: this.state.error,
@@ -483,17 +487,24 @@ function _renderMatches(matches, parentMatches = [], dataRouterState = null, fut
       if (match.route.HydrateFallback || match.route.hydrateFallbackElement) {
         fallbackIndex = i;
       }
-      if (match.route.loader && match.route.id && dataRouterState.loaderData[match.route.id] === undefined && (!dataRouterState.errors || dataRouterState.errors[match.route.id] === undefined)) {
-        // We found the first route without data/errors which means it's loader
-        // still needs to run.  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]];
+      if (match.route.id) {
+        let {
+          loaderData,
+          errors: _errors
+        } = dataRouterState;
+        let needsToRunLoader = match.route.loader && loaderData[match.route.id] === undefined && (!_errors || _errors[match.route.id] === undefined);
+        if (match.route.lazy || needsToRunLoader) {
+          // We found the first route that's not ready to render (waiting on
+          // lazy, or has a loader that hasn't run yet).  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;
         }
-        break;
       }
     }
   }
@@ -504,7 +515,7 @@ function _renderMatches(matches, parentMatches = [], dataRouterState = null, fut
     let errorElement = null;
     let hydrateFallbackElement = null;
     if (dataRouterState) {
-      error = errors && match.route.id ? errors[match.route.id] : null;
+      error = errors && match.route.id ? errors[match.route.id] : undefined;
       errorElement = match.route.errorElement || defaultErrorElement;
       if (renderFallback) {
         if (fallbackIndex < 0 && index === 0) {
@@ -683,7 +694,7 @@ function useRouteError() {
   let routeId = useCurrentRouteId(DataRouterStateHook.UseRouteError);
   // If this was a render error, we put it in a RouteError context inside
   // of RenderErrorBoundary
-  if (error) {
+  if (error !== undefined) {
     return error;
   }
   // Otherwise look for errors from our data router state
@@ -847,7 +858,7 @@ function RouterProvider({
   // 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`") ;
+    UNSAFE_warning(fallbackElement == null || !router.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using " + "`v7_partialHydration`, use a `HydrateFallback` component instead") ;
     // Only log this once on initial mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -888,8 +899,11 @@ function RouterProvider({
     basename: basename,
     location: state.location,
     navigationType: state.historyAction,
-    navigator: navigator
-  }, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
+    navigator: navigator,
+    future: {
+      v7_relativeSplatPath: router.future.v7_relativeSplatPath
+    }
+  }, state.initialized || router.future.v7_partialHydration ? /*#__PURE__*/React.createElement(DataRoutes, {
     routes: router.routes,
     future: router.future,
     state: state
@@ -939,7 +953,8 @@ function MemoryRouter({
     children: children,
     location: state.location,
     navigationType: state.action,
-    navigator: history
+    navigator: history,
+    future: future
   });
 }
 /**
@@ -961,7 +976,11 @@ function Navigate({
   // 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;
-  UNSAFE_warning(!React.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 {
+    future,
+    static: isStatic
+  } = React.useContext(NavigationContext);
+  UNSAFE_warning(!isStatic, `<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 {
     matches
   } = React.useContext(RouteContext);
@@ -971,7 +990,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_getResolveToMatches(matches), locationPathname, relative === "path");
+  let path = resolveTo(to, UNSAFE_getResolveToMatches(matches, future.v7_relativeSplatPath), locationPathname, relative === "path");
   let jsonPath = JSON.stringify(path);
   React.useEffect(() => navigate(JSON.parse(jsonPath), {
     replace,
@@ -1011,7 +1030,8 @@ function Router({
   location: locationProp,
   navigationType = Action.Pop,
   navigator,
-  static: staticProp = false
+  static: staticProp = false,
+  future
 }) {
   !!useInRouterContext() ? 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
@@ -1020,8 +1040,12 @@ function Router({
   let navigationContext = React.useMemo(() => ({
     basename,
     navigator,
-    static: staticProp
-  }), [basename, navigator, staticProp]);
+    static: staticProp,
+    future: {
+      v7_relativeSplatPath: false,
+      ...future
+    }
+  }), [basename, future, navigator, staticProp]);
   if (typeof locationProp === "string") {
     locationProp = parsePath(locationProp);
   }