@remix-run/router 1.3.2 → 1.3.3-pre.0

package/index.ts

@@ -63,7 +63,6 @@ export {
   createPath,
   createHashHistory,
   createMemoryHistory,
-  invariant,
   parsePath,
 } from "./history";
 
@@ -82,3 +81,5 @@ export {
   convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes,
   getPathContributingMatches as UNSAFE_getPathContributingMatches,
 } from "./utils";
+
+export { invariant as UNSAFE_invariant } from "./history";

package/package.json

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

package/router.ts

@@ -211,6 +211,15 @@ export interface Router {
    */
   deleteBlocker(key: string): void;
 
+  /**
+   * @internal
+   * PRIVATE - DO NOT USE
+   *
+   * HMR needs to pass in-flight route updates to React Router
+   * TODO: Replace this with granular route update APIs (addRoute, updateRoute, deleteRoute)
+   */
+  _internalSetRoutes(routes: AgnosticRouteObject[]): void;
+
   /**
    * @internal
    * PRIVATE - DO NOT USE
@@ -556,8 +565,6 @@ interface HandleLoadersResult extends ShortCircuitable {
 interface FetchLoadMatch {
   routeId: string;
   path: string;
-  match: AgnosticDataRouteMatch;
-  matches: AgnosticDataRouteMatch[];
 }
 
 /**
@@ -565,6 +572,8 @@ interface FetchLoadMatch {
  */
 interface RevalidatingFetcher extends FetchLoadMatch {
   key: string;
+  match: AgnosticDataRouteMatch | null;
+  matches: AgnosticDataRouteMatch[] | null;
 }
 
 /**
@@ -644,6 +653,7 @@ export function createRouter(init: RouterInit): Router {
   );
 
   let dataRoutes = convertRoutesToDataRoutes(init.routes);
+  let inFlightDataRoutes: AgnosticDataRouteObject[] | undefined;
   // Cleanup function for history
   let unlistenHistory: (() => void) | null = null;
   // Externally-provided functions to call on all state changes
@@ -921,6 +931,11 @@ export function createRouter(init: RouterInit): Router {
         isMutationMethod(state.navigation.formMethod) &&
         location.state?._isRedirect !== true);
 
+    if (inFlightDataRoutes) {
+      dataRoutes = inFlightDataRoutes;
+      inFlightDataRoutes = undefined;
+    }
+
     updateState({
       ...newState, // matches, errors, fetchers go through as-is
       actionData,
@@ -1108,14 +1123,15 @@ export function createRouter(init: RouterInit): Router {
     saveScrollPosition(state.location, state.matches);
     pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
 
+    let routesToUse = inFlightDataRoutes || dataRoutes;
     let loadingNavigation = opts && opts.overrideNavigation;
-    let matches = matchRoutes(dataRoutes, location, init.basename);
+    let matches = matchRoutes(routesToUse, location, init.basename);
 
     // Short circuit with a 404 on the root error boundary if we match nothing
     if (!matches) {
       let error = getInternalRouterError(404, { pathname: location.pathname });
       let { matches: notFoundMatches, route } =
-        getShortCircuitMatches(dataRoutes);
+        getShortCircuitMatches(routesToUse);
       // Cancel all pending deferred on 404s since we don't keep any routes
       cancelActiveDeferreds();
       completeNavigation(location, {
@@ -1352,6 +1368,7 @@ export function createRouter(init: RouterInit): Router {
         }
       : undefined;
 
+    let routesToUse = inFlightDataRoutes || dataRoutes;
     let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(
       init.history,
       state,
@@ -1361,9 +1378,11 @@ export function createRouter(init: RouterInit): Router {
       isRevalidationRequired,
       cancelledDeferredRoutes,
       cancelledFetcherLoads,
+      fetchLoadMatches,
+      routesToUse,
+      init.basename,
       pendingActionData,
-      pendingError,
-      fetchLoadMatches
+      pendingError
     );
 
     // Cancel pending deferreds for no-longer-matched routes or routes we're
@@ -1506,7 +1525,8 @@ export function createRouter(init: RouterInit): Router {
 
     if (fetchControllers.has(key)) abortFetcher(key);
 
-    let matches = matchRoutes(dataRoutes, href, init.basename);
+    let routesToUse = inFlightDataRoutes || dataRoutes;
+    let matches = matchRoutes(routesToUse, href, init.basename);
     if (!matches) {
       setFetcherError(
         key,
@@ -1528,7 +1548,7 @@ export function createRouter(init: RouterInit): Router {
 
     // Store off the match so we can call it's shouldRevalidate on subsequent
     // revalidations
-    fetchLoadMatches.set(key, { routeId, path, match, matches });
+    fetchLoadMatches.set(key, { routeId, path });
     handleFetcherLoader(key, routeId, path, match, matches, submission);
   }
 
@@ -1629,9 +1649,10 @@ export function createRouter(init: RouterInit): Router {
       nextLocation,
       abortController.signal
     );
+    let routesToUse = inFlightDataRoutes || dataRoutes;
     let matches =
       state.navigation.state !== "idle"
-        ? matchRoutes(dataRoutes, state.navigation.location, init.basename)
+        ? matchRoutes(routesToUse, state.navigation.location, init.basename)
         : state.matches;
 
     invariant(matches, "Didn't find any matches after fetcher action");
@@ -1656,9 +1677,11 @@ export function createRouter(init: RouterInit): Router {
       isRevalidationRequired,
       cancelledDeferredRoutes,
       cancelledFetcherLoads,
+      fetchLoadMatches,
+      routesToUse,
+      init.basename,
       { [match.route.id]: actionResult.data },
-      undefined, // No need to send through errors since we short circuit above
-      fetchLoadMatches
+      undefined // No need to send through errors since we short circuit above
     );
 
     // Put all revalidating fetchers into the loading state, except for the
@@ -1997,15 +2020,23 @@ export function createRouter(init: RouterInit): Router {
       ...matchesToLoad.map((match) =>
         callLoaderOrAction("loader", request, match, matches, router.basename)
       ),
-      ...fetchersToLoad.map((f) =>
-        callLoaderOrAction(
-          "loader",
-          createClientSideRequest(init.history, f.path, request.signal),
-          f.match,
-          f.matches,
-          router.basename
-        )
-      ),
+      ...fetchersToLoad.map((f) => {
+        if (f.matches && f.match) {
+          return callLoaderOrAction(
+            "loader",
+            createClientSideRequest(init.history, f.path, request.signal),
+            f.match,
+            f.matches,
+            router.basename
+          );
+        } else {
+          let error: ErrorResult = {
+            type: ResultType.error,
+            error: getInternalRouterError(404, { pathname: f.path }),
+          };
+          return error;
+        }
+      }),
     ]);
     let loaderResults = results.slice(0, matchesToLoad.length);
     let fetcherResults = results.slice(matchesToLoad.length);
@@ -2266,6 +2297,10 @@ export function createRouter(init: RouterInit): Router {
     return null;
   }
 
+  function _internalSetRoutes(newRoutes: AgnosticDataRouteObject[]) {
+    inFlightDataRoutes = newRoutes;
+  }
+
   router = {
     get basename() {
       return init.basename;
@@ -2293,6 +2328,9 @@ export function createRouter(init: RouterInit): Router {
     deleteBlocker,
     _internalFetchControllers: fetchControllers,
     _internalActiveDeferreds: activeDeferreds,
+    // TODO: Remove setRoutes, it's temporary to avoid dealing with
+    // updating the tree while validating the update algorithm.
+    _internalSetRoutes,
   };
 
   return router;
@@ -2891,9 +2929,11 @@ function getMatchesToLoad(
   isRevalidationRequired: boolean,
   cancelledDeferredRoutes: string[],
   cancelledFetcherLoads: string[],
+  fetchLoadMatches: Map<string, FetchLoadMatch>,
+  routesToUse: AgnosticDataRouteObject[],
+  basename: string | undefined,
   pendingActionData?: RouteData,
-  pendingError?: RouteData,
-  fetchLoadMatches?: Map<string, FetchLoadMatch>
+  pendingError?: RouteData
 ): [AgnosticDataRouteMatch[], RevalidatingFetcher[]] {
   let actionResult = pendingError
     ? Object.values(pendingError)[0]
@@ -2951,34 +2991,55 @@ function getMatchesToLoad(
 
   // Pick fetcher.loads that need to be revalidated
   let revalidatingFetchers: RevalidatingFetcher[] = [];
-  fetchLoadMatches &&
-    fetchLoadMatches.forEach((f, key) => {
-      if (!matches.some((m) => m.route.id === f.routeId)) {
-        // This fetcher is not going to be present in the subsequent render so
-        // there's no need to revalidate it
-        return;
-      } else if (cancelledFetcherLoads.includes(key)) {
-        // This fetcher was cancelled from a prior action submission - force reload
-        revalidatingFetchers.push({ key, ...f });
-      } else {
-        // Revalidating fetchers are decoupled from the route matches since they
-        // hit a static href, so they _always_ check shouldRevalidate and the
-        // default is strictly if a revalidation is explicitly required (action
-        // submissions, useRevalidator, X-Remix-Revalidate).
-        let shouldRevalidate = shouldRevalidateLoader(f.match, {
-          currentUrl,
-          currentParams: state.matches[state.matches.length - 1].params,
-          nextUrl,
-          nextParams: matches[matches.length - 1].params,
-          ...submission,
-          actionResult,
-          defaultShouldRevalidate,
-        });
-        if (shouldRevalidate) {
-          revalidatingFetchers.push({ key, ...f });
-        }
-      }
+  fetchLoadMatches.forEach((f, key) => {
+    // Don't revalidate if fetcher won't be present in the subsequent render
+    if (!matches.some((m) => m.route.id === f.routeId)) {
+      return;
+    }
+
+    let fetcherMatches = matchRoutes(routesToUse, f.path, basename);
+
+    // If the fetcher path no longer matches, push it in with null matches so
+    // we can trigger a 404 in callLoadersAndMaybeResolveData
+    if (!fetcherMatches) {
+      revalidatingFetchers.push({ key, ...f, matches: null, match: null });
+      return;
+    }
+
+    let fetcherMatch = getTargetMatch(fetcherMatches, f.path);
+
+    if (cancelledFetcherLoads.includes(key)) {
+      revalidatingFetchers.push({
+        key,
+        matches: fetcherMatches,
+        match: fetcherMatch,
+        ...f,
+      });
+      return;
+    }
+
+    // Revalidating fetchers are decoupled from the route matches since they
+    // hit a static href, so they _always_ check shouldRevalidate and the
+    // default is strictly if a revalidation is explicitly required (action
+    // submissions, useRevalidator, X-Remix-Revalidate).
+    let shouldRevalidate = shouldRevalidateLoader(fetcherMatch, {
+      currentUrl,
+      currentParams: state.matches[state.matches.length - 1].params,
+      nextUrl,
+      nextParams: matches[matches.length - 1].params,
+      ...submission,
+      actionResult,
+      defaultShouldRevalidate,
     });
+    if (shouldRevalidate) {
+      revalidatingFetchers.push({
+        key,
+        matches: fetcherMatches,
+        match: fetcherMatch,
+        ...f,
+      });
+    }
+  });
 
   return [navigationMatches, revalidatingFetchers];
 }
@@ -3183,7 +3244,12 @@ async function callLoaderOrAction(
   }
 
   if (result instanceof DeferredData) {
-    return { type: ResultType.deferred, deferredData: result };
+    return {
+      type: ResultType.deferred,
+      deferredData: result,
+      statusCode: result.init?.status,
+      headers: result.init?.headers && new Headers(result.init.headers),
+    };
   }
 
   return { type: ResultType.data, data: result };
@@ -3356,7 +3422,7 @@ function processLoaderData(
 
     // Process fetcher non-redirect errors
     if (isErrorResult(result)) {
-      let boundaryMatch = findNearestBoundary(state.matches, match.route.id);
+      let boundaryMatch = findNearestBoundary(state.matches, match?.route.id);
       if (!(errors && errors[boundaryMatch.route.id])) {
         errors = {
           ...errors,
@@ -3406,7 +3472,9 @@ function mergeLoaderData(
         // incoming object with an undefined value, which is how we unset a prior
         // loaderData if we encounter a loader error
       }
-    } else if (loaderData[id] !== undefined) {
+    } else if (loaderData[id] !== undefined && match.route.loader) {
+      // Preserve existing keys not included in newLoaderData and where a loader
+      // wasn't removed by HMR
       mergedLoaderData[id] = loaderData[id];
     }
 
@@ -3580,7 +3648,7 @@ function isMutationMethod(method?: string): method is MutationFormMethod {
 
 async function resolveDeferredResults(
   currentMatches: AgnosticDataRouteMatch[],
-  matchesToLoad: AgnosticDataRouteMatch[],
+  matchesToLoad: (AgnosticDataRouteMatch | null)[],
   results: DataResult[],
   signal: AbortSignal,
   isFetcher: boolean,
@@ -3589,8 +3657,15 @@ async function resolveDeferredResults(
   for (let index = 0; index < results.length; index++) {
     let result = results[index];
     let match = matchesToLoad[index];
+    // If we don't have a match, then we can have a deferred result to do
+    // anything with.  This is for revalidating fetchers where the route was
+    // removed during HMR
+    if (!match) {
+      continue;
+    }
+
     let currentMatch = currentMatches.find(
-      (m) => m.route.id === match.route.id
+      (m) => m.route.id === match!.route.id
     );
     let isRevalidatingLoader =
       currentMatch != null &&