react-router 6.4.0-pre.8 → 6.4.0-pre.9

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # react-router
 
+## 6.4.0-pre.9
+
+### Patch Changes
+
+- Feat: adds `deferred` support to data routers (#9002)
+
+  Returning a `deferred` from a `loader` allows you to separate _critical_ loader data that you want to wait for prior to rendering the destination page from _non-critical_ data that you are OK to show a spinner for until it loads.
+
+  ```jsx
+  // In your route loader, return a deferred() and choose per-key whether to
+  // await the promise or not.  As soon as the awaited promises resolve, the
+  // page will be rendered.
+  function loader() {
+    return deferred({
+      critical: await getCriticalData(),
+      lazy1: getLazyData(),
+    });
+  };
+
+  // In your route element, grab the values from useLoaderData and render them
+  // with <Deferred>
+  function DeferredPage() {
+    let data = useLoaderData();
+    return (
+      <>
+        <p>Critical Data: {data.critical}</p>
+        <Deferred
+          value={data.lazy}
+          fallback={<p>Loading...</p>}
+          errorElement={<RenderDeferredError />}>
+          <RenderDeferredData />
+        </Deferred>
+      </>
+    );
+  }
+
+  // Use separate components to render the data once it resolves, and access it
+  // via the useDeferredData hook
+  function RenderDeferredData() {
+    let data = useDeferredData();
+    return <p>Lazy: {data}</p>;
+  }
+
+  function RenderDeferredError() {
+    let data = useRouteError();
+    return <p>Error! {data.message} {data.stack}</p>;
+  }
+  ```
+
+  If you want to skip the separate components, you can use the Render Props
+  pattern and handle the rendering of the deferred data inline:
+
+  ```jsx
+  function DeferredPage() {
+    let data = useLoaderData();
+    return (
+      <>
+        <p>Critical Data: {data.critical}</p>
+        <Deferred value={data.lazy} fallback={<p>Loading...</p>}>
+          {(data) => <p>{data}</p>}
+        </Deferred>
+      </>
+    );
+  }
+  ```
+
+- feat: add basename support for data routers (#9026)
+- fix: Fix trailing slash behavior on pathless routing when using a basename (#9045)
+- Updated dependencies
+  - @remix-run/router@0.2.0-pre.4
+
 ## 6.4.0-pre.8
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,15 +1,15 @@
 import type { ActionFunction, ActionFunctionArgs, DataRouteMatch, Fetcher, JsonFunction, LoaderFunction, LoaderFunctionArgs, Location, Navigation, Params, ParamParseKey, Path, PathMatch, PathPattern, RedirectFunction, RouteMatch, RouteObject, ShouldRevalidateFunction, To } from "@remix-run/router";
-import { Action as NavigationType, createPath, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from "@remix-run/router";
-import type { DataMemoryRouterProps, MemoryRouterProps, NavigateProps, OutletProps, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, RoutesProps } from "./lib/components";
-import { createRoutesFromChildren, renderMatches, MemoryRouter, DataMemoryRouter, Navigate, Outlet, Route, Router, Routes, useRenderDataRouter } from "./lib/components";
+import { Action as NavigationType, createPath, deferred, generatePath, isDeferredError, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from "@remix-run/router";
+import type { DataMemoryRouterProps, DeferredProps, MemoryRouterProps, NavigateProps, OutletProps, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, RoutesProps } from "./lib/components";
+import { createRoutesFromChildren, renderMatches, DataMemoryRouter, Deferred, MemoryRouter, Navigate, Outlet, Route, Router, Routes, useRenderDataRouter } from "./lib/components";
 import type { Navigator, NavigateOptions } from "./lib/context";
 import { DataRouterContext, DataRouterStateContext, LocationContext, NavigationContext, RouteContext } from "./lib/context";
-import type { NavigateFunction } from "./lib/hooks";
-import { useHref, useInRouterContext, useLocation, useMatch, useNavigationType, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useActionData, useLoaderData, useMatches, useRouteLoaderData, useRouteError, useNavigation, useRevalidator } from "./lib/hooks";
+import type { Deferrable, NavigateFunction } from "./lib/hooks";
+import { useHref, useInRouterContext, useLocation, useMatch, useNavigationType, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useActionData, useDeferredData, useLoaderData, useMatches, useRouteLoaderData, useRouteError, useNavigation, useRevalidator } from "./lib/hooks";
 declare type Hash = string;
 declare type Pathname = string;
 declare type Search = string;
-export type { ActionFunction, ActionFunctionArgs, DataMemoryRouterProps, DataRouteMatch, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, };
-export { DataMemoryRouter, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, };
+export type { ActionFunction, ActionFunctionArgs, DataMemoryRouterProps, DataRouteMatch, Deferrable, DeferredProps, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, };
+export { DataMemoryRouter, Deferred, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, deferred, isDeferredError, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useDeferredData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, };
 /** @internal */
 export { NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, useRenderDataRouter, };

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.4.0-pre.8
+ * React Router v6.4.0-pre.9
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,8 +8,8 @@
  *
  * @license MIT
  */
-import { invariant, resolveTo, getToPathname, joinPaths, matchPath, warning, parsePath, matchRoutes, isRouteErrorResponse, createMemoryHistory, Action, stripBasename, createMemoryRouter } from '@remix-run/router';
-export { Action as NavigationType, createPath, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from '@remix-run/router';
+import { invariant, resolveTo, joinPaths, matchPath, warning, parsePath, matchRoutes, isDeferredError, isRouteErrorResponse, createMemoryHistory, Action, stripBasename, createMemoryRouter } from '@remix-run/router';
+export { Action as NavigationType, createPath, deferred, generatePath, isDeferredError, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from '@remix-run/router';
 import * as React from 'react';
 
 /**
@@ -204,6 +204,12 @@ if (process.env.NODE_ENV !== "production") {
   DataRouterStateContext.displayName = "DataRouterState";
 }
 
+const DeferredContext = /*#__PURE__*/React.createContext(null);
+
+if (process.env.NODE_ENV !== "production") {
+  DeferredContext.displayName = "Deferred";
+}
+
 const NavigationContext = /*#__PURE__*/React.createContext(null);
 
 if (process.env.NODE_ENV !== "production") {
@@ -251,22 +257,13 @@ function useHref(to) {
     pathname,
     search
   } = useResolvedPath(to);
-  let joinedPathname = pathname;
+  let joinedPathname = pathname; // If we're operating within a basename, prepend it to the pathname prior
+  // to creating the href.  If this is a root navigation, then just use the raw
+  // basename which allows the basename to have full control over the presence
+  // of a trailing slash on root links
 
   if (basename !== "/") {
-    let toPathname = getToPathname(to); // Only append a trailing slash to the raw basename if the basename doesn't
-    // already have one and this wasn't specifically a route to "".  This
-    // allows folks to control the trailing slash behavior when using a basename
-
-    let appendSlash = !basename.endsWith("/") && to !== "" && (to == null ? void 0 : to.pathname) !== "" && toPathname != null && toPathname.endsWith("/");
-
-    if (pathname !== "/") {
-      joinedPathname = joinPaths([basename, pathname]);
-    } else if (appendSlash) {
-      joinedPathname = basename + "/";
-    } else {
-      joinedPathname = basename;
-    }
+    joinedPathname = pathname === "/" ? basename : joinPaths([basename, pathname]);
   }
 
   return navigator.createHref({
@@ -396,14 +393,13 @@ function useNavigate() {
       return;
     }
 
-    let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname);
+    let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname); // If we're operating within a basename, prepend it to the pathname prior
+    // to handing off to history.  If this is a root navigation, then we
+    // navigate to the raw basename which allows the basename to have full
+    // control over the presence of a trailing slash on root links
 
     if (basename !== "/") {
-      // If this was a blank path, just use the basename directly, this gives
-      // the user control over trailing slash behavior
-      let toPath = typeof to === "string" ? parsePath(to) : to;
-      let isBlankPath = toPath.pathname == null || toPath.pathname === "";
-      path.pathname = isBlankPath ? basename : joinPaths([basename, path.pathname]);
+      path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
     }
 
     (!!options.replace ? navigator.replace : navigator.push)(path, options.state, options);
@@ -781,9 +777,15 @@ function useRouteError() {
   let error = React.useContext(RouteErrorContext);
   let state = useDataRouterState(DataRouterHook.UseRouteError);
   let route = React.useContext(RouteContext);
-  let thisRoute = route.matches[route.matches.length - 1]; // If this was a render error, we put it in a RouteError context inside
+  let thisRoute = route.matches[route.matches.length - 1];
+  let deferredValue = React.useContext(DeferredContext); // Return deferred errors if we're inside a Deferred errorElement
+
+  if (deferredValue && isDeferredError(deferredValue)) {
+    return deferredValue;
+  } // If this was a render error, we put it in a RouteError context inside
   // of RenderErrorBoundary
 
+
   if (error) {
     return error;
   }
@@ -793,6 +795,14 @@ function useRouteError() {
 
   return (_state$errors = state.errors) == null ? void 0 : _state$errors[thisRoute.route.id];
 }
+
+/**
+ * Returns the happy-path data from the nearest ancestor <Deferred /> value
+ */
+function useDeferredData() {
+  let value = React.useContext(DeferredContext);
+  return value;
+}
 const alreadyWarned = {};
 
 function warningOnce(key, cond, message) {
@@ -813,6 +823,7 @@ let routerSingleton;
 
 function useRenderDataRouter(_ref) {
   let {
+    basename,
     children,
     fallbackElement,
     routes,
@@ -851,6 +862,7 @@ function useRenderDataRouter(_ref) {
   }, /*#__PURE__*/React.createElement(DataRouterStateContext.Provider, {
     value: state
   }, /*#__PURE__*/React.createElement(Router, {
+    basename: basename,
     location: state.location,
     navigationType: state.historyAction,
     navigator: navigator
@@ -861,6 +873,7 @@ function useRenderDataRouter(_ref) {
 }
 function DataMemoryRouter(_ref2) {
   let {
+    basename,
     children,
     initialEntries,
     initialIndex,
@@ -869,10 +882,12 @@ function DataMemoryRouter(_ref2) {
     routes
   } = _ref2;
   return useRenderDataRouter({
+    basename,
     children,
     fallbackElement,
     routes,
     createRouter: routes => createMemoryRouter({
+      basename,
       initialEntries,
       initialIndex,
       routes,
@@ -1063,6 +1078,68 @@ function DataRoutes(_ref7) {
     routes
   } = _ref7;
   return useRoutes(routes || createRoutesFromChildren(children), location);
+}
+
+/**
+ * Component to use for rendering lazily loaded data from returning deferred()
+ * in a loader function
+ */
+function Deferred(_ref8) {
+  let {
+    children,
+    value,
+    fallback,
+    errorElement
+  } = _ref8;
+  return /*#__PURE__*/React.createElement(DeferredContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: fallback
+  }, /*#__PURE__*/React.createElement(DeferredWrapper, {
+    errorElement: errorElement
+  }, typeof children === "function" ? /*#__PURE__*/React.createElement(ResolveDeferred, {
+    children: children
+  }) : children)));
+}
+
+/**
+ * @private
+ * Internal wrapper to handle re-throwing the promise to trigger the Suspense
+ * fallback, or rendering the children/errorElement once the promise resolves
+ * or rejects
+ */
+function DeferredWrapper(_ref9) {
+  let {
+    children,
+    errorElement
+  } = _ref9;
+  let value = React.useContext(DeferredContext);
+
+  if (value instanceof Promise) {
+    // throw to the suspense boundary
+    throw value;
+  }
+
+  if (isDeferredError(value)) {
+    if (errorElement) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, errorElement);
+    } else {
+      // Throw to the nearest route-level error boundary
+      throw value;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
+/**
+ * @private
+ */
+function ResolveDeferred(_ref10) {
+  let {
+    children
+  } = _ref10;
+  return children(useDeferredData());
 } ///////////////////////////////////////////////////////////////////////////////
 // UTILS
 ///////////////////////////////////////////////////////////////////////////////
@@ -1075,7 +1152,6 @@ function DataRoutes(_ref7) {
  * @see https://reactrouter.com/docs/en/v6/utils/create-routes-from-children
  */
 
-
 function createRoutesFromChildren(children, parentPath) {
   if (parentPath === void 0) {
     parentPath = [];
@@ -1126,5 +1202,5 @@ function renderMatches(matches) {
   return _renderMatches(matches);
 }
 
-export { DataMemoryRouter, MemoryRouter, Navigate, Outlet, Route, Router, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, createRoutesFromChildren, renderMatches, useActionData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useRenderDataRouter, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
+export { DataMemoryRouter, Deferred, MemoryRouter, Navigate, Outlet, Route, Router, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, createRoutesFromChildren, renderMatches, useActionData, useDeferredData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useRenderDataRouter, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
 //# sourceMappingURL=index.js.map