@tanstack/react-router 0.0.1-beta.80 → 0.0.1-beta.82

package/build/stats-react.json

@@ -7,7 +7,7 @@
         "name": "index.production.js",
         "children": [
           {
-            "uid": "5504-109",
+            "uid": "ea8f-113",
             "name": "\u0000rollupPluginBabelHelpers.js"
           },
           {
@@ -15,11 +15,11 @@
             "children": [
               {
                 "name": "tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
-                "uid": "5504-111"
+                "uid": "ea8f-115"
               },
               {
                 "name": "tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
-                "uid": "5504-113"
+                "uid": "ea8f-117"
               }
             ]
           },
@@ -28,19 +28,19 @@
             "children": [
               {
                 "name": "store/build/esm/index.js",
-                "uid": "5504-115"
+                "uid": "ea8f-119"
               },
               {
                 "name": "router/build/esm/index.js",
-                "uid": "5504-117"
+                "uid": "ea8f-121"
               },
               {
                 "name": "react-store/build/esm/index.js",
-                "uid": "5504-119"
+                "uid": "ea8f-123"
               },
               {
                 "name": "react-router/src/index.tsx",
-                "uid": "5504-121"
+                "uid": "ea8f-125"
               }
             ]
           }
@@ -50,176 +50,182 @@
     "isRoot": true
   },
   "nodeParts": {
-    "5504-109": {
+    "ea8f-113": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "5504-108"
+      "mainUid": "ea8f-112"
     },
-    "5504-111": {
+    "ea8f-115": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "5504-110"
+      "mainUid": "ea8f-114"
     },
-    "5504-113": {
+    "ea8f-117": {
       "renderedLength": 44,
       "gzipLength": 62,
       "brotliLength": 0,
-      "mainUid": "5504-112"
+      "mainUid": "ea8f-116"
     },
-    "5504-115": {
-      "renderedLength": 1288,
-      "gzipLength": 497,
+    "ea8f-119": {
+      "renderedLength": 2382,
+      "gzipLength": 809,
       "brotliLength": 0,
-      "mainUid": "5504-114"
+      "mainUid": "ea8f-118"
     },
-    "5504-117": {
-      "renderedLength": 49433,
-      "gzipLength": 11720,
+    "ea8f-121": {
+      "renderedLength": 51237,
+      "gzipLength": 11956,
       "brotliLength": 0,
-      "mainUid": "5504-116"
+      "mainUid": "ea8f-120"
     },
-    "5504-119": {
-      "renderedLength": 1571,
-      "gzipLength": 594,
+    "ea8f-123": {
+      "renderedLength": 477,
+      "gzipLength": 284,
       "brotliLength": 0,
-      "mainUid": "5504-118"
+      "mainUid": "ea8f-122"
     },
-    "5504-121": {
-      "renderedLength": 12297,
-      "gzipLength": 3115,
+    "ea8f-125": {
+      "renderedLength": 12276,
+      "gzipLength": 3105,
       "brotliLength": 0,
-      "mainUid": "5504-120"
+      "mainUid": "ea8f-124"
     }
   },
   "nodeMetas": {
-    "5504-108": {
+    "ea8f-112": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "5504-109"
+        "index.production.js": "ea8f-113"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "5504-120"
+          "uid": "ea8f-124"
         }
       ]
     },
-    "5504-110": {
+    "ea8f-114": {
       "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
       "moduleParts": {
-        "index.production.js": "5504-111"
+        "index.production.js": "ea8f-115"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "5504-116"
+          "uid": "ea8f-120"
         }
       ]
     },
-    "5504-112": {
+    "ea8f-116": {
       "id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
       "moduleParts": {
-        "index.production.js": "5504-113"
+        "index.production.js": "ea8f-117"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "5504-116"
+          "uid": "ea8f-120"
         }
       ]
     },
-    "5504-114": {
+    "ea8f-118": {
       "id": "/packages/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "5504-115"
+        "index.production.js": "ea8f-119"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "5504-116"
+          "uid": "ea8f-120"
+        },
+        {
+          "uid": "ea8f-122"
         }
       ]
     },
-    "5504-116": {
+    "ea8f-120": {
       "id": "/packages/router/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "5504-117"
+        "index.production.js": "ea8f-121"
       },
       "imported": [
         {
-          "uid": "5504-110"
+          "uid": "ea8f-114"
         },
         {
-          "uid": "5504-112"
+          "uid": "ea8f-116"
         },
         {
-          "uid": "5504-114"
+          "uid": "ea8f-118"
         }
       ],
       "importedBy": [
         {
-          "uid": "5504-120"
+          "uid": "ea8f-124"
         }
       ]
     },
-    "5504-118": {
+    "ea8f-122": {
       "id": "/packages/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "5504-119"
+        "index.production.js": "ea8f-123"
       },
       "imported": [
         {
-          "uid": "5504-123"
+          "uid": "ea8f-118"
+        },
+        {
+          "uid": "ea8f-127"
         }
       ],
       "importedBy": [
         {
-          "uid": "5504-120"
+          "uid": "ea8f-124"
         }
       ]
     },
-    "5504-120": {
+    "ea8f-124": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "5504-121"
+        "index.production.js": "ea8f-125"
       },
       "imported": [
         {
-          "uid": "5504-108"
+          "uid": "ea8f-112"
         },
         {
-          "uid": "5504-122"
+          "uid": "ea8f-126"
         },
         {
-          "uid": "5504-116"
+          "uid": "ea8f-120"
         },
         {
-          "uid": "5504-118"
+          "uid": "ea8f-122"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "5504-122": {
+    "ea8f-126": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "5504-120"
+          "uid": "ea8f-124"
         }
       ],
       "isExternal": true
     },
-    "5504-123": {
+    "ea8f-127": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "5504-118"
+          "uid": "ea8f-122"
         }
       ],
       "isExternal": true

package/build/umd/index.development.js

@@ -125,6 +125,47 @@
       this.#flush();
     };
   }
+  function shallow(objA, objB) {
+    if (Object.is(objA, objB)) {
+      return true;
+    }
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+      return false;
+    }
+
+    // if (objA instanceof Map && objB instanceof Map) {
+    //   if (objA.size !== objB.size) return false
+
+    //   for (const [key, value] of objA) {
+    //     if (!Object.is(value, objB.get(key))) {
+    //       return false
+    //     }
+    //   }
+    //   return true
+    // }
+
+    // if (objA instanceof Set && objB instanceof Set) {
+    //   if (objA.size !== objB.size) return false
+
+    //   for (const value of objA) {
+    //     if (!objB.has(value)) {
+    //       return false
+    //     }
+    //   }
+    //   return true
+    // }
+
+    const keysA = Object.keys(objA);
+    if (keysA.length !== Object.keys(objB).length) {
+      return false;
+    }
+    for (let i = 0; i < keysA.length; i++) {
+      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+        return false;
+      }
+    }
+    return true;
+  }
 
   /**
    * router
@@ -1129,23 +1170,57 @@
       return matches;
     };
     loadMatches = async (resolvedMatches, location, opts) => {
+      let firstBadMatchIndex;
+
       // Check each match middleware to see if the route can be accessed
-      await Promise.all(resolvedMatches.map(async match => {
-        try {
-          await match.route.options.beforeLoad?.({
-            router: this,
-            match
-          });
-        } catch (err) {
+      try {
+        await Promise.all(resolvedMatches.map(async (match, index) => {
+          try {
+            await match.route.options.beforeLoad?.({
+              router: this,
+              match
+            });
+          } catch (err) {
+            if (isRedirect(err)) {
+              throw err;
+            }
+            firstBadMatchIndex = firstBadMatchIndex ?? index;
+            const errorHandler = match.route.options.onBeforeLoadError ?? match.route.options.onError;
+            try {
+              errorHandler?.(err);
+            } catch (errorHandlerErr) {
+              if (isRedirect(errorHandlerErr)) {
+                throw errorHandlerErr;
+              }
+              match.__store.setState(s => ({
+                ...s,
+                error: errorHandlerErr,
+                status: 'error',
+                updatedAt: Date.now()
+              }));
+              return;
+            }
+            match.__store.setState(s => ({
+              ...s,
+              error: err,
+              status: 'error',
+              updatedAt: Date.now()
+            }));
+          }
+        }));
+      } catch (err) {
+        if (isRedirect(err)) {
           if (!opts?.preload) {
-            match.route.options.onBeforeLoadError?.(err);
+            this.navigate(err);
           }
-          match.route.options.onError?.(err);
-          throw err;
+          return;
         }
-      }));
-      const matchPromises = resolvedMatches.map(async (match, index) => {
-        const parentMatch = resolvedMatches[index - 1];
+        throw err; // we should never end up here
+      }
+
+      const validResolvedMatches = resolvedMatches.slice(0, firstBadMatchIndex);
+      const matchPromises = validResolvedMatches.map(async (match, index) => {
+        const parentMatch = validResolvedMatches[index - 1];
         match.__load({
           preload: opts?.preload,
           location,
@@ -1621,7 +1696,8 @@
         if (isRedirect(err)) {
           throw err;
         }
-        this.route.options.onValidateSearchError?.(err);
+        const errorHandler = this.route.options.onValidateSearchError ?? this.route.options.onError;
+        errorHandler?.(err);
         const error = new Error('Invalid search params found', {
           cause: err
         });
@@ -1634,22 +1710,27 @@
         search,
         routeSearch
       } = this.#resolveSearchInfo(opts);
-      const routeContext = this.route.options.getContext?.({
-        parentContext: this.parentMatch?.routeContext ?? {},
-        context: this.parentMatch?.context ?? this.router?.options.context ?? {},
-        params: this.params,
-        search
-      }) || {};
-      const context = {
-        ...(this.parentMatch?.context ?? this.router?.options.context),
-        ...routeContext
-      };
-      return {
-        routeSearch,
-        search,
-        context,
-        routeContext
-      };
+      try {
+        const routeContext = this.route.options.getContext?.({
+          parentContext: this.parentMatch?.routeContext ?? {},
+          context: this.parentMatch?.context ?? this.router?.options.context ?? {},
+          params: this.params,
+          search
+        }) || {};
+        const context = {
+          ...(this.parentMatch?.context ?? this.router?.options.context),
+          ...routeContext
+        };
+        return {
+          routeSearch,
+          search,
+          context,
+          routeContext
+        };
+      } catch (err) {
+        this.route.options.onError?.(err);
+        throw err;
+      }
     };
     __load = async opts => {
       this.parentMatch = opts.parentMatch;
@@ -1658,10 +1739,11 @@
         info = this.#resolveInfo(opts);
       } catch (err) {
         if (isRedirect(err)) {
-          this.router.navigate(err);
+          if (!opts?.preload) {
+            this.router.navigate(err);
+          }
           return;
         }
-        this.route.options.onError?.(err);
         this.__store.setState(s => ({
           ...s,
           status: 'error',
@@ -1737,11 +1819,29 @@
           }));
         } catch (err) {
           if (isRedirect(err)) {
-            this.router.navigate(err);
+            if (!opts?.preload) {
+              this.router.navigate(err);
+            }
+            return;
+          }
+          const errorHandler = this.route.options.onLoadError ?? this.route.options.onError;
+          try {
+            errorHandler?.(err);
+          } catch (errorHandlerErr) {
+            if (isRedirect(errorHandlerErr)) {
+              if (!opts?.preload) {
+                this.router.navigate(errorHandlerErr);
+              }
+              return;
+            }
+            this.__store.setState(s => ({
+              ...s,
+              error: errorHandlerErr,
+              status: 'error',
+              updatedAt: Date.now()
+            }));
             return;
           }
-          this.route.options.onLoadError?.(err);
-          this.route.options.onError?.(err);
           this.__store.setState(s => ({
             ...s,
             error: err,
@@ -1772,47 +1872,6 @@
     const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, compareShallow ? shallow : undefined);
     return slice;
   }
-  function shallow(objA, objB) {
-    if (Object.is(objA, objB)) {
-      return true;
-    }
-    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-      return false;
-    }
-
-    // if (objA instanceof Map && objB instanceof Map) {
-    //   if (objA.size !== objB.size) return false
-
-    //   for (const [key, value] of objA) {
-    //     if (!Object.is(value, objB.get(key))) {
-    //       return false
-    //     }
-    //   }
-    //   return true
-    // }
-
-    // if (objA instanceof Set && objB instanceof Set) {
-    //   if (objA.size !== objB.size) return false
-
-    //   for (const value of objA) {
-    //     if (!objB.has(value)) {
-    //       return false
-    //     }
-    //   }
-    //   return true
-    // }
-
-    const keysA = Object.keys(objA);
-    if (keysA.length !== Object.keys(objB).length) {
-      return false;
-    }
-    for (let i = 0; i < keysA.length; i++) {
-      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-        return false;
-      }
-    }
-    return true;
-  }
 
   //
 
@@ -2076,18 +2135,6 @@
     const router = useRouterContext();
     useStore(match.__store, store => [store.status, store.error], true);
     const defaultPending = React__namespace.useCallback(() => null, []);
-    const Inner = React__namespace.useCallback(props => {
-      if (props.match.state.status === 'error') {
-        throw props.match.state.error;
-      }
-      if (props.match.state.status === 'success') {
-        return /*#__PURE__*/React__namespace.createElement(props.match.component ?? router.options.defaultComponent ?? Outlet);
-      }
-      if (props.match.state.status === 'pending') {
-        throw props.match.__loadPromise;
-      }
-      invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
-    }, []);
     const PendingComponent = match.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
     const errorComponent = match.errorComponent ?? router.options.defaultErrorComponent;
     const ResolvedSuspenseBoundary = match.route.options.wrapInSuspense ?? true ? React__namespace.Suspense : SafeFragment;
@@ -2106,6 +2153,19 @@
       match: match
     }))));
   }
+  function Inner(props) {
+    const router = useRouterContext();
+    if (props.match.state.status === 'error') {
+      throw props.match.state.error;
+    }
+    if (props.match.state.status === 'success') {
+      return /*#__PURE__*/React__namespace.createElement(props.match.component ?? router.options.defaultComponent ?? Outlet);
+    }
+    if (props.match.state.status === 'pending') {
+      throw props.match.__loadPromise;
+    }
+    invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+  }
   function SafeFragment(props) {
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
   }