@remix-run/router 1.13.1 → 1.14.0-pre.0

package/dist/utils.d.ts

@@ -135,9 +135,11 @@ type DataFunctionValue = Response | NonNullable<unknown> | null;
 /**
  * Route loader function signature
  */
-export interface LoaderFunction<Context = any> {
+export type LoaderFunction<Context = any> = {
     (args: LoaderFunctionArgs<Context>): Promise<DataFunctionValue> | DataFunctionValue;
-}
+} & {
+    hydrate?: boolean;
+};
 /**
  * Route action function signature
  */
@@ -399,6 +401,7 @@ export declare function resolvePath(to: To, fromPathname?: string): Path;
  *   </Route>
  */
 export declare function getPathContributingMatches<T extends AgnosticRouteMatch = AgnosticRouteMatch>(matches: T[]): T[];
+export declare function getResolveToMatches<T extends AgnosticRouteMatch = AgnosticRouteMatch>(matches: T[], v7_relativeSplatPath: boolean): string[];
 /**
  * @private
  */

package/index.ts

@@ -87,7 +87,7 @@ export {
   ErrorResponseImpl as UNSAFE_ErrorResponseImpl,
   convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes,
   convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch,
-  getPathContributingMatches as UNSAFE_getPathContributingMatches,
+  getResolveToMatches as UNSAFE_getResolveToMatches,
 } from "./utils";
 
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/router",
-  "version": "1.13.1",
+  "version": "1.14.0-pre.0",
   "description": "Nested/Data-driven/Framework-agnostic Routing",
   "keywords": [
     "remix",

package/router.ts

@@ -40,6 +40,7 @@ import {
   convertRouteMatchToUiMatch,
   convertRoutesToDataRoutes,
   getPathContributingMatches,
+  getResolveToMatches,
   immutableRouteKeys,
   isRouteErrorResponse,
   joinPaths,
@@ -64,6 +65,14 @@ export interface Router {
    */
   get basename(): RouterInit["basename"];
 
+  /**
+   * @internal
+   * PRIVATE - DO NOT USE
+   *
+   * Return the future config for the router
+   */
+  get future(): FutureConfig;
+
   /**
    * @internal
    * PRIVATE - DO NOT USE
@@ -345,7 +354,9 @@ export type HydrationState = Partial<
 export interface FutureConfig {
   v7_fetcherPersist: boolean;
   v7_normalizeFormMethod: boolean;
+  v7_partialHydration: boolean;
   v7_prependBasename: boolean;
+  v7_relativeSplatPath: boolean;
 }
 
 /**
@@ -769,7 +780,9 @@ export function createRouter(init: RouterInit): Router {
   let future: FutureConfig = {
     v7_fetcherPersist: false,
     v7_normalizeFormMethod: false,
+    v7_partialHydration: false,
     v7_prependBasename: false,
+    v7_relativeSplatPath: false,
     ...init.future,
   };
   // Cleanup function for history
@@ -804,12 +817,19 @@ export function createRouter(init: RouterInit): Router {
     initialErrors = { [route.id]: error };
   }
 
+  // "Initialized" here really means "Can `RouterProvider` render my route tree?"
+  // Prior to `route.HydrateFallback`, we only had a root `fallbackElement` so we used
+  // `state.initialized` to render that instead of `<DataRoutes>`.  Now that we
+  // support route level fallbacks we can always render and we'll just render
+  // as deep as we have data for and detect the nearest ancestor HydrateFallback
   let initialized =
+    future.v7_partialHydration ||
     // All initialMatches need to be loaded before we're ready.  If we have lazy
     // functions around still then we'll need to run them in initialize()
-    !initialMatches.some((m) => m.route.lazy) &&
-    // And we have to either have no loaders or have been provided hydrationData
-    (!initialMatches.some((m) => m.route.loader) || init.hydrationData != null);
+    (!initialMatches.some((m) => m.route.lazy) &&
+      // And we have to either have no loaders or have been provided hydrationData
+      (!initialMatches.some((m) => m.route.loader) ||
+        init.hydrationData != null));
 
   let router: Router;
   let state: RouterState = {
@@ -990,8 +1010,14 @@ export function createRouter(init: RouterInit): Router {
     // in the normal navigation flow.  For SSR it's expected that lazy modules are
     // resolved prior to router creation since we can't go into a fallbackElement
     // UI for SSR'd apps
-    if (!state.initialized) {
-      startNavigation(HistoryAction.Pop, state.location);
+    if (
+      !state.initialized ||
+      (future.v7_partialHydration &&
+        state.matches.some((m) => isUnhydratedRoute(state, m.route)))
+    ) {
+      startNavigation(HistoryAction.Pop, state.location, {
+        initialHydration: true,
+      });
     }
 
     return router;
@@ -1231,6 +1257,7 @@ export function createRouter(init: RouterInit): Router {
       basename,
       future.v7_prependBasename,
       to,
+      future.v7_relativeSplatPath,
       opts?.fromRouteId,
       opts?.relative
     );
@@ -1363,6 +1390,7 @@ export function createRouter(init: RouterInit): Router {
     historyAction: HistoryAction,
     location: Location,
     opts?: {
+      initialHydration?: boolean;
       submission?: Submission;
       fetcherSubmission?: Submission;
       overrideNavigation?: Navigation;
@@ -1487,6 +1515,7 @@ export function createRouter(init: RouterInit): Router {
       opts && opts.submission,
       opts && opts.fetcherSubmission,
       opts && opts.replace,
+      opts && opts.initialHydration === true,
       flushSync,
       pendingActionData,
       pendingError
@@ -1545,7 +1574,8 @@ export function createRouter(init: RouterInit): Router {
         matches,
         manifest,
         mapRouteProperties,
-        basename
+        basename,
+        future.v7_relativeSplatPath
       );
 
       if (request.signal.aborted) {
@@ -1607,6 +1637,7 @@ export function createRouter(init: RouterInit): Router {
     submission?: Submission,
     fetcherSubmission?: Submission,
     replace?: boolean,
+    initialHydration?: boolean,
     flushSync?: boolean,
     pendingActionData?: RouteData,
     pendingError?: RouteData
@@ -1629,6 +1660,7 @@ export function createRouter(init: RouterInit): Router {
       matches,
       activeSubmission,
       location,
+      future.v7_partialHydration && initialHydration === true,
       isRevalidationRequired,
       cancelledDeferredRoutes,
       cancelledFetcherLoads,
@@ -1674,7 +1706,12 @@ export function createRouter(init: RouterInit): Router {
     // state.  If not, we need to switch to our loading state and load data,
     // preserving any new action data or existing action data (in the case of
     // a revalidation interrupting an actionReload)
-    if (!isUninterruptedRevalidation) {
+    // If we have partialHydration enabled, then don't update the state for the
+    // initial data load since iot's not a "navigation"
+    if (
+      !isUninterruptedRevalidation &&
+      (!future.v7_partialHydration || !initialHydration)
+    ) {
       revalidatingFetchers.forEach((rf) => {
         let fetcher = state.fetchers.get(rf.key);
         let revalidatingFetcher = getLoadingFetcher(
@@ -1824,6 +1861,7 @@ export function createRouter(init: RouterInit): Router {
       basename,
       future.v7_prependBasename,
       href,
+      future.v7_relativeSplatPath,
       routeId,
       opts?.relative
     );
@@ -1930,7 +1968,8 @@ export function createRouter(init: RouterInit): Router {
       requestMatches,
       manifest,
       mapRouteProperties,
-      basename
+      basename,
+      future.v7_relativeSplatPath
     );
 
     if (fetchRequest.signal.aborted) {
@@ -2003,6 +2042,7 @@ export function createRouter(init: RouterInit): Router {
       matches,
       submission,
       nextLocation,
+      false,
       isRevalidationRequired,
       cancelledDeferredRoutes,
       cancelledFetcherLoads,
@@ -2173,7 +2213,8 @@ export function createRouter(init: RouterInit): Router {
       matches,
       manifest,
       mapRouteProperties,
-      basename
+      basename,
+      future.v7_relativeSplatPath
     );
 
     // Deferred isn't supported for fetcher loads, await everything and treat it
@@ -2369,7 +2410,8 @@ export function createRouter(init: RouterInit): Router {
           matches,
           manifest,
           mapRouteProperties,
-          basename
+          basename,
+          future.v7_relativeSplatPath
         )
       ),
       ...fetchersToLoad.map((f) => {
@@ -2381,7 +2423,8 @@ export function createRouter(init: RouterInit): Router {
             f.matches,
             manifest,
             mapRouteProperties,
-            basename
+            basename,
+            future.v7_relativeSplatPath
           );
         } else {
           let error: ErrorResult = {
@@ -2723,6 +2766,9 @@ export function createRouter(init: RouterInit): Router {
     get basename() {
       return basename;
     },
+    get future() {
+      return future;
+    },
     get state() {
       return state;
     },
@@ -2764,6 +2810,13 @@ export function createRouter(init: RouterInit): Router {
 
 export const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
 
+/**
+ * Future flags to toggle new feature behavior
+ */
+export interface StaticHandlerFutureConfig {
+  v7_relativeSplatPath: boolean;
+}
+
 export interface CreateStaticHandlerOptions {
   basename?: string;
   /**
@@ -2771,6 +2824,7 @@ export interface CreateStaticHandlerOptions {
    */
   detectErrorBoundary?: DetectErrorBoundaryFunction;
   mapRouteProperties?: MapRoutePropertiesFunction;
+  future?: Partial<StaticHandlerFutureConfig>;
 }
 
 export function createStaticHandler(
@@ -2796,6 +2850,11 @@ export function createStaticHandler(
   } else {
     mapRouteProperties = defaultMapRouteProperties;
   }
+  // Config driven behavior flags
+  let future: StaticHandlerFutureConfig = {
+    v7_relativeSplatPath: false,
+    ...(opts ? opts.future : null),
+  };
 
   let dataRoutes = convertRoutesToDataRoutes(
     routes,
@@ -3058,6 +3117,7 @@ export function createStaticHandler(
         manifest,
         mapRouteProperties,
         basename,
+        future.v7_relativeSplatPath,
         { isStaticRequest: true, isRouteRequest, requestContext }
       );
 
@@ -3226,6 +3286,7 @@ export function createStaticHandler(
           manifest,
           mapRouteProperties,
           basename,
+          future.v7_relativeSplatPath,
           { isStaticRequest: true, isRouteRequest, requestContext }
         )
       ),
@@ -3316,6 +3377,7 @@ function normalizeTo(
   basename: string,
   prependBasename: boolean,
   to: To | null,
+  v7_relativeSplatPath: boolean,
   fromRouteId?: string,
   relative?: RelativeRoutingType
 ) {
@@ -3340,7 +3402,7 @@ function normalizeTo(
   // Resolve the relative path
   let path = resolveTo(
     to ? to : ".",
-    getPathContributingMatches(contextualMatches).map((m) => m.pathnameBase),
+    getResolveToMatches(contextualMatches, v7_relativeSplatPath),
     stripBasename(location.pathname, basename) || location.pathname,
     relative === "path"
   );
@@ -3548,6 +3610,7 @@ function getMatchesToLoad(
   matches: AgnosticDataRouteMatch[],
   submission: Submission | undefined,
   location: Location,
+  isInitialLoad: boolean,
   isRevalidationRequired: boolean,
   cancelledDeferredRoutes: string[],
   cancelledFetcherLoads: string[],
@@ -3573,10 +3636,17 @@ function getMatchesToLoad(
   let boundaryMatches = getLoaderMatchesUntilBoundary(matches, boundaryId);
 
   let navigationMatches = boundaryMatches.filter((match, index) => {
+    if (isInitialLoad) {
+      // On initial hydration we don't do any shouldRevalidate stuff - we just
+      // call the unhydrated loaders
+      return isUnhydratedRoute(state, match.route);
+    }
+
     if (match.route.lazy) {
       // We haven't loaded this route yet so we don't know if it's got a loader!
       return true;
     }
+
     if (match.route.loader == null) {
       return false;
     }
@@ -3618,8 +3688,13 @@ function getMatchesToLoad(
   // Pick fetcher.loads that need to be revalidated
   let revalidatingFetchers: RevalidatingFetcher[] = [];
   fetchLoadMatches.forEach((f, key) => {
-    // Don't revalidate if fetcher won't be present in the subsequent render
+    // Don't revalidate:
+    //  - on initial load (shouldn't be any fetchers then anyway)
+    //  - if fetcher won't be present in the subsequent render
+    //    - no longer matches the URL (v7_fetcherPersist=false)
+    //    - was unmounted but persisted due to v7_fetcherPersist=true
     if (
+      isInitialLoad ||
       !matches.some((m) => m.route.id === f.routeId) ||
       deletedFetchers.has(key)
     ) {
@@ -3695,6 +3770,23 @@ function getMatchesToLoad(
   return [navigationMatches, revalidatingFetchers];
 }
 
+// Is this route unhydrated (when v7_partialHydration=true) such that we need
+// to call it's loader on the initial router creation
+function isUnhydratedRoute(state: RouterState, route: AgnosticDataRouteObject) {
+  if (!route.loader) {
+    return false;
+  }
+  if (route.loader.hydrate) {
+    return true;
+  }
+  return (
+    state.loaderData[route.id] === undefined &&
+    (!state.errors ||
+      // Loader ran but errored - don't re-run
+      state.errors[route.id] === undefined)
+  );
+}
+
 function isNewLoader(
   currentLoaderData: RouteData,
   currentMatch: AgnosticDataRouteMatch,
@@ -3830,6 +3922,7 @@ async function callLoaderOrAction(
   manifest: RouteManifest,
   mapRouteProperties: MapRoutePropertiesFunction,
   basename: string,
+  v7_relativeSplatPath: boolean,
   opts: {
     isStaticRequest?: boolean;
     isRouteRequest?: boolean;
@@ -3943,7 +4036,8 @@ async function callLoaderOrAction(
           matches.slice(0, matches.indexOf(match) + 1),
           basename,
           true,
-          location
+          location,
+          v7_relativeSplatPath
         );
       } else if (!opts.isStaticRequest) {
         // Strip off the protocol+origin for same-origin + same-basename absolute
@@ -3990,13 +4084,18 @@ async function callLoaderOrAction(
     }
 
     let data: any;
-    let contentType = result.headers.get("Content-Type");
-    // Check between word boundaries instead of startsWith() due to the last
-    // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
-    if (contentType && /\bapplication\/json\b/.test(contentType)) {
-      data = await result.json();
-    } else {
-      data = await result.text();
+
+    try {
+      let contentType = result.headers.get("Content-Type");
+      // Check between word boundaries instead of startsWith() due to the last
+      // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
+      if (contentType && /\bapplication\/json\b/.test(contentType)) {
+        data = await result.json();
+      } else {
+        data = await result.text();
+      }
+    } catch (e) {
+      return { type: ResultType.error, error: e };
     }
 
     if (resultType === ResultType.error) {

package/utils.ts

@@ -169,11 +169,11 @@ type DataFunctionValue = Response | NonNullable<unknown> | null;
 /**
  * Route loader function signature
  */
-export interface LoaderFunction<Context = any> {
+export type LoaderFunction<Context = any> = {
   (args: LoaderFunctionArgs<Context>):
     | Promise<DataFunctionValue>
     | DataFunctionValue;
-}
+} & { hydrate?: boolean };
 
 /**
  * Route action function signature
@@ -1145,6 +1145,25 @@ export function getPathContributingMatches<
   );
 }
 
+// Return the array of pathnames for the current route matches - used to
+// generate the routePathnames input for resolveTo()
+export function getResolveToMatches<
+  T extends AgnosticRouteMatch = AgnosticRouteMatch
+>(matches: T[], v7_relativeSplatPath: boolean) {
+  let pathMatches = getPathContributingMatches(matches);
+
+  // When v7_relativeSplatPath is enabled, use the full pathname for the leaf
+  // match so we include splat values for "." links.  See:
+  // https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
+  if (v7_relativeSplatPath) {
+    return pathMatches.map((match, idx) =>
+      idx === matches.length - 1 ? match.pathname : match.pathnameBase
+    );
+  }
+
+  return pathMatches.map((match) => match.pathnameBase);
+}
+
 /**
  * @private
  */
@@ -1191,9 +1210,12 @@ export function resolveTo(
   if (toPathname == null) {
     from = locationPathname;
   } else if (isPathRelative) {
-    let fromSegments = routePathnames[routePathnames.length - 1]
-      .replace(/^\//, "")
-      .split("/");
+    let fromSegments =
+      routePathnames.length === 0
+        ? []
+        : routePathnames[routePathnames.length - 1]
+            .replace(/^\//, "")
+            .split("/");
 
     if (toPathname.startsWith("..")) {
       let toSegments = toPathname.split("/");