@tanstack/react-router 0.0.1-beta.72 → 0.0.1-beta.75

package/build/stats-react.json

@@ -7,7 +7,7 @@
         "name": "index.production.js",
         "children": [
           {
-            "uid": "7ba6-109",
+            "uid": "37ac-109",
             "name": "\u0000rollupPluginBabelHelpers.js"
           },
           {
@@ -15,11 +15,11 @@
             "children": [
               {
                 "name": "tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
-                "uid": "7ba6-111"
+                "uid": "37ac-111"
               },
               {
                 "name": "tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
-                "uid": "7ba6-113"
+                "uid": "37ac-113"
               }
             ]
           },
@@ -28,19 +28,19 @@
             "children": [
               {
                 "name": "store/build/esm/index.js",
-                "uid": "7ba6-115"
+                "uid": "37ac-115"
               },
               {
                 "name": "router/build/esm/index.js",
-                "uid": "7ba6-117"
+                "uid": "37ac-117"
               },
               {
                 "name": "react-store/build/esm/index.js",
-                "uid": "7ba6-119"
+                "uid": "37ac-119"
               },
               {
                 "name": "react-router/src/index.tsx",
-                "uid": "7ba6-121"
+                "uid": "37ac-121"
               }
             ]
           }
@@ -50,176 +50,176 @@
     "isRoot": true
   },
   "nodeParts": {
-    "7ba6-109": {
+    "37ac-109": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "7ba6-108"
+      "mainUid": "37ac-108"
     },
-    "7ba6-111": {
+    "37ac-111": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "7ba6-110"
+      "mainUid": "37ac-110"
     },
-    "7ba6-113": {
+    "37ac-113": {
       "renderedLength": 44,
       "gzipLength": 62,
       "brotliLength": 0,
-      "mainUid": "7ba6-112"
+      "mainUid": "37ac-112"
     },
-    "7ba6-115": {
+    "37ac-115": {
       "renderedLength": 1288,
       "gzipLength": 497,
       "brotliLength": 0,
-      "mainUid": "7ba6-114"
+      "mainUid": "37ac-114"
     },
-    "7ba6-117": {
-      "renderedLength": 46930,
-      "gzipLength": 11106,
+    "37ac-117": {
+      "renderedLength": 46913,
+      "gzipLength": 11093,
       "brotliLength": 0,
-      "mainUid": "7ba6-116"
+      "mainUid": "37ac-116"
     },
-    "7ba6-119": {
+    "37ac-119": {
       "renderedLength": 1571,
       "gzipLength": 594,
       "brotliLength": 0,
-      "mainUid": "7ba6-118"
+      "mainUid": "37ac-118"
     },
-    "7ba6-121": {
-      "renderedLength": 12514,
-      "gzipLength": 3242,
+    "37ac-121": {
+      "renderedLength": 12591,
+      "gzipLength": 3262,
       "brotliLength": 0,
-      "mainUid": "7ba6-120"
+      "mainUid": "37ac-120"
     }
   },
   "nodeMetas": {
-    "7ba6-108": {
+    "37ac-108": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "7ba6-109"
+        "index.production.js": "37ac-109"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "7ba6-120"
+          "uid": "37ac-120"
         }
       ]
     },
-    "7ba6-110": {
+    "37ac-110": {
       "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
       "moduleParts": {
-        "index.production.js": "7ba6-111"
+        "index.production.js": "37ac-111"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "7ba6-116"
+          "uid": "37ac-116"
         }
       ]
     },
-    "7ba6-112": {
+    "37ac-112": {
       "id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
       "moduleParts": {
-        "index.production.js": "7ba6-113"
+        "index.production.js": "37ac-113"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "7ba6-116"
+          "uid": "37ac-116"
         }
       ]
     },
-    "7ba6-114": {
+    "37ac-114": {
       "id": "/packages/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "7ba6-115"
+        "index.production.js": "37ac-115"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "7ba6-116"
+          "uid": "37ac-116"
         }
       ]
     },
-    "7ba6-116": {
+    "37ac-116": {
       "id": "/packages/router/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "7ba6-117"
+        "index.production.js": "37ac-117"
       },
       "imported": [
         {
-          "uid": "7ba6-110"
+          "uid": "37ac-110"
         },
         {
-          "uid": "7ba6-112"
+          "uid": "37ac-112"
         },
         {
-          "uid": "7ba6-114"
+          "uid": "37ac-114"
         }
       ],
       "importedBy": [
         {
-          "uid": "7ba6-120"
+          "uid": "37ac-120"
         }
       ]
     },
-    "7ba6-118": {
+    "37ac-118": {
       "id": "/packages/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "7ba6-119"
+        "index.production.js": "37ac-119"
       },
       "imported": [
         {
-          "uid": "7ba6-123"
+          "uid": "37ac-123"
         }
       ],
       "importedBy": [
         {
-          "uid": "7ba6-120"
+          "uid": "37ac-120"
         }
       ]
     },
-    "7ba6-120": {
+    "37ac-120": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "7ba6-121"
+        "index.production.js": "37ac-121"
       },
       "imported": [
         {
-          "uid": "7ba6-108"
+          "uid": "37ac-108"
         },
         {
-          "uid": "7ba6-122"
+          "uid": "37ac-122"
         },
         {
-          "uid": "7ba6-116"
+          "uid": "37ac-116"
         },
         {
-          "uid": "7ba6-118"
+          "uid": "37ac-118"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "7ba6-122": {
+    "37ac-122": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "7ba6-120"
+          "uid": "37ac-120"
         }
       ],
       "isExternal": true
     },
-    "7ba6-123": {
+    "37ac-123": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "7ba6-118"
+          "uid": "37ac-118"
         }
       ],
       "isExternal": true

package/build/types/index.d.ts

@@ -79,7 +79,7 @@ type RouterProps<TRouteConfig extends AnyRootRoute = RootRoute, TRoutesInfo exte
 };
 declare function RouterProvider<TRouteConfig extends AnyRootRoute = RootRoute, TRoutesInfo extends AnyRoutesInfo = DefaultRoutesInfo>({ router, ...rest }: RouterProps<TRouteConfig, TRoutesInfo>): JSX.Element;
 declare function useRouterContext(): RegisteredRouter;
-declare function useRouter<T = RouterStore>(track?: (state: Router['store']) => T, shallow?: boolean): RegisteredRouter;
+declare function useRouter<T = RouterStore>(track?: (state: Router['__store']) => T, shallow?: boolean): RegisteredRouter;
 declare function useMatches(): RouteMatch[];
 declare function useMatch<TFrom extends keyof RegisteredRoutesInfo['routesById'], TStrict extends boolean = true, TRouteMatch = RouteMatch<RegisteredRoutesInfo, RegisteredRoutesInfo['routesById'][TFrom]>>(opts?: {
     from: TFrom;

package/build/umd/index.development.js

@@ -783,12 +783,12 @@
         parseSearch: options?.parseSearch ?? defaultParseSearch,
         fetchServerDataFn: options?.fetchServerDataFn ?? defaultFetchServerDataFn
       };
-      this.store = new Store(getInitialRouterState(), {
+      this.__store = new Store(getInitialRouterState(), {
         onUpdate: state => {
           this.state = state;
         }
       });
-      this.state = this.store.state;
+      this.state = this.__store.state;
       this.basepath = '';
       this.update(options);
 
@@ -808,7 +808,7 @@
       }
     }
     reset = () => {
-      this.store.setState(s => Object.assign(s, getInitialRouterState()));
+      this.__store.setState(s => Object.assign(s, getInitialRouterState()));
     };
     mount = () => {
       // Mount only does anything on the client
@@ -828,7 +828,7 @@
         }
         this.history = this.options.history ?? (isServer ? createMemoryHistory() : createBrowserHistory());
         const parsedLocation = this.#parseLocation();
-        this.store.setState(s => ({
+        this.__store.setState(s => ({
           ...s,
           latestLocation: parsedLocation,
           currentLocation: parsedLocation
@@ -852,13 +852,10 @@
     };
     buildNext = opts => {
       const next = this.#buildLocation(opts);
-      const matches = this.matchRoutes(next.pathname);
-      const __preSearchFilters = matches.map(match => match.route.options.preSearchFilters ?? []).flat().filter(Boolean);
-      const __postSearchFilters = matches.map(match => match.route.options.postSearchFilters ?? []).flat().filter(Boolean);
+      const __matches = this.matchRoutes(next.pathname);
       return this.#buildLocation({
         ...opts,
-        __preSearchFilters,
-        __postSearchFilters
+        __matches
       });
     };
     cancelMatches = () => {
@@ -880,10 +877,10 @@
       // Cancel any pending matches
       this.cancelMatches();
       let matches;
-      this.store.batch(() => {
+      this.__store.batch(() => {
         if (opts?.next) {
           // Ingest the new location
-          this.store.setState(s => ({
+          this.__store.setState(s => ({
             ...s,
             latestLocation: opts.next
           }));
@@ -893,7 +890,7 @@
         matches = this.matchRoutes(this.state.latestLocation.pathname, {
           strictParseParams: true
         });
-        this.store.setState(s => ({
+        this.__store.setState(s => ({
           ...s,
           status: 'pending',
           pendingMatches: matches,
@@ -932,7 +929,7 @@
 
         // Clear non-loading error states when match leaves
         if (d.state.status === 'error') {
-          this.store.setState(s => ({
+          this.__store.setState(s => ({
             ...s,
             status: 'idle',
             error: undefined
@@ -952,7 +949,7 @@
         });
       });
       const prevLocation = this.state.currentLocation;
-      this.store.setState(s => ({
+      this.__store.setState(s => ({
         ...s,
         status: 'idle',
         currentLocation: this.state.latestLocation,
@@ -1273,7 +1270,7 @@
       };
     };
     hydrate = dehydratedRouter => {
-      this.store.setState(s => {
+      this.__store.setState(s => {
         // Match the routes
         const currentMatches = this.matchRoutes(dehydratedRouter.state.latestLocation.pathname, {
           strictParseParams: true
@@ -1281,7 +1278,7 @@
         currentMatches.forEach((match, index) => {
           const dehydratedMatch = dehydratedRouter.state.currentMatches[index];
           invariant(dehydratedMatch && dehydratedMatch.id === match.id, 'Oh no! There was a hydration mismatch when attempting to hydrate the state of the router! 😬');
-          match.store.setState(s => ({
+          match.__store.setState(s => ({
             ...s,
             ...dehydratedMatch.state
           }));
@@ -1373,29 +1370,33 @@
       const fromMatches = this.matchRoutes(this.state.latestLocation.pathname, {
         strictParseParams: true
       });
-      const toMatches = this.matchRoutes(pathname);
       const prevParams = {
         ...last(fromMatches)?.params
       };
       let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
       if (nextParams) {
-        toMatches.map(d => d.route.options.stringifyParams).filter(Boolean).forEach(fn => {
-          Object.assign({}, nextParams, fn(nextParams));
+        dest.__matches?.map(d => d.route.options.stringifyParams).filter(Boolean).forEach(fn => {
+          nextParams = {
+            ...nextParams,
+            ...fn(nextParams)
+          };
         });
       }
       pathname = interpolatePath(pathname, nextParams ?? {});
+      const preSearchFilters = dest.__matches?.map(match => match.route.options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+      const postSearchFilters = dest.__matches?.map(match => match.route.options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
 
       // Pre filters first
-      const preFilteredSearch = dest.__preSearchFilters?.length ? dest.__preSearchFilters?.reduce((prev, next) => next(prev), this.state.latestLocation.search) : this.state.latestLocation.search;
+      const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), this.state.latestLocation.search) : this.state.latestLocation.search;
 
       // Then the link/navigate function
       const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
       : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-      : dest.__preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
+      : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
       : {};
 
       // Then post filters
-      const postFilteredSearch = dest.__postSearchFilters?.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+      const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
       const search = replaceEqualDeep(this.state.latestLocation.search, postFilteredSearch);
       const searchStr = this.options.stringifySearch(search);
       let hash = dest.hash === true ? this.state.latestLocation.hash : functionalUpdate(dest.hash, this.state.latestLocation.hash);
@@ -1471,7 +1472,7 @@
         id: opts.id,
         pathname: opts.pathname,
         params: opts.params,
-        store: new Store({
+        __store: new Store({
           updatedAt: 0,
           routeSearch: {},
           search: {},
@@ -1482,7 +1483,7 @@
           }
         })
       });
-      this.state = this.store.state;
+      this.state = this.__store.state;
       componentTypes.map(async type => {
         const component = this.route.options[type];
         if (typeof this[type] !== 'function') {
@@ -1490,7 +1491,7 @@
         }
       });
       if (this.state.status === 'idle' && !this.#hasLoaders()) {
-        this.store.setState(s => ({
+        this.__store.setState(s => ({
           ...s,
           status: 'success'
         }));
@@ -1510,7 +1511,7 @@
       });
       this.context = context;
       this.routeContext = routeContext;
-      this.store.setState(s => ({
+      this.__store.setState(s => ({
         ...s,
         routeSearch: replaceEqualDeep(s.routeSearch, routeSearch),
         search: replaceEqualDeep(s.search, search)
@@ -1581,7 +1582,7 @@
           return;
         }
         this.route.options.onError?.(err);
-        this.store.setState(s => ({
+        this.__store.setState(s => ({
           ...s,
           status: 'error',
           error: err
@@ -1615,7 +1616,7 @@
         // to a loading state again. Otherwise, keep it
         // as loading or resolved
         if (this.state.status === 'idle') {
-          this.store.setState(s => ({
+          this.__store.setState(s => ({
             ...s,
             status: 'pending'
           }));
@@ -1648,7 +1649,7 @@
         try {
           await Promise.all([componentsPromise, dataPromise]);
           if (latestPromise = checkLatest()) return await latestPromise;
-          this.store.setState(s => ({
+          this.__store.setState(s => ({
             ...s,
             error: undefined,
             status: 'success',
@@ -1661,7 +1662,7 @@
           }
           this.route.options.onLoadError?.(err);
           this.route.options.onError?.(err);
-          this.store.setState(s => ({
+          this.__store.setState(s => ({
             ...s,
             error: err,
             status: 'error',
@@ -1880,7 +1881,7 @@
     ...rest
   }) {
     router.update(rest);
-    const currentMatches = useStore(router.store, s => s.currentMatches);
+    const currentMatches = useStore(router.__store, s => s.currentMatches);
     React__namespace.useEffect(router.mount, [router]);
     return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: {
@@ -1898,12 +1899,12 @@
   function useRouterContext() {
     const value = React__namespace.useContext(routerContext);
     warning(value, 'useRouter must be used inside a <Router> component!');
-    useStore(value.router.store);
+    useStore(value.router.__store);
     return value.router;
   }
   function useRouter(track, shallow) {
     const router = useRouterContext();
-    useStore(router.store, track, shallow);
+    useStore(router.__store, track, shallow);
     return router;
   }
   function useMatches() {
@@ -1917,7 +1918,7 @@
     if (opts?.strict ?? true) {
       invariant(nearestMatch.route.id == match?.route.id, `useMatch("${match?.route.id}") is being called in a component that is meant to render the '${nearestMatch.route.id}' route. Did you mean to 'useMatch("${match?.route.id}", { strict: false })' or 'useRoute("${match?.route.id}")' instead?`);
     }
-    useStore(match.store, d => opts?.track?.(match) ?? match, opts?.shallow);
+    useStore(match.__store, d => opts?.track?.(match) ?? match, opts?.shallow);
     return match;
   }
   function useRoute(routeId) {
@@ -1927,13 +1928,17 @@
     return resolvedRoute;
   }
   function useSearch(opts) {
-    const match = useMatch(opts);
-    useStore(match.store, d => opts?.track?.(d.search) ?? d.search, true);
+    const {
+      track,
+      ...matchOpts
+    } = opts;
+    const match = useMatch(matchOpts);
+    useStore(match.__store, d => opts?.track?.(d.search) ?? d.search, true);
     return match.state.search;
   }
   function useParams(opts) {
     const router = useRouterContext();
-    useStore(router.store, d => {
+    useStore(router.__store, d => {
       const params = last(d.currentMatches)?.params;
       return opts?.track?.(params) ?? params;
     }, true);
@@ -1989,7 +1994,7 @@
     match
   }) {
     const router = useRouterContext();
-    useStore(match.store, store => [store.status, store.error], true);
+    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') {