@tanstack/react-router 0.0.1-beta.234 → 0.0.1-beta.236

package/build/esm/index.js

@@ -15,6 +15,8 @@ export { default as invariant } from 'tiny-invariant';
 import warning from 'tiny-warning';
 export { default as warning } from 'tiny-warning';
 import * as React from 'react';
+import { useStore } from '@tanstack/react-store';
+import { Store } from '@tanstack/store';
 
 function CatchBoundary(props) {
   const errorComponent = props.errorComponent ?? ErrorComponent;
@@ -608,12 +610,10 @@ function createRouteMask(opts) {
 
 function Matches() {
   const {
-    routesById,
-    state
+    routesById
   } = useRouter();
-  const {
-    matches
-  } = state;
+  const routerState = useRouterState();
+  const matches = routerState.pendingMatches?.some(d => d.showPending) ? routerState.pendingMatches : routerState.matches;
   const locationKey = useRouterState().location.state.key;
   const route = routesById[rootRouteId];
   const errorComponent = React.useCallback(props => {
@@ -759,7 +759,8 @@ function useMatch(opts) {
   const nearestMatchRouteId = nearestMatch?.routeId;
   const matchRouteId = useRouterState({
     select: state => {
-      const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+      const matches = state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+      const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatch.id);
       return match.routeId;
     }
   });
@@ -768,7 +769,8 @@ function useMatch(opts) {
   }
   const matchSelection = useRouterState({
     select: state => {
-      const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+      const matches = state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+      const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatch.id);
       invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
       return opts?.select ? opts.select(match) : match;
     }
@@ -780,7 +782,8 @@ function useMatches(opts) {
   const contextMatches = React.useContext(matchesContext);
   return useRouterState({
     select: state => {
-      const matches = state.matches.slice(state.matches.findIndex(d => d.id === contextMatches[0]?.id));
+      let matches = state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+      matches = matches.slice(matches.findIndex(d => d.id === contextMatches[0]?.id));
       return opts?.select ? opts.select(matches) : matches;
     }
   });
@@ -821,31 +824,29 @@ function RouterProvider({
 function RouterProviderInner({
   router
 }) {
-  const [preState, setState] = React.useState(() => router.state);
   const [isTransitioning, startReactTransition] = React.useTransition();
-  const isAnyTransitioning = isTransitioning || preState.matches.some(d => d.status === 'pending');
-  const state = React.useMemo(() => ({
-    ...preState,
-    status: isAnyTransitioning ? 'pending' : 'idle',
-    location: isTransitioning ? router.latestLocation : preState.location,
-    pendingMatches: router.pendingMatches
-  }), [preState, isTransitioning]);
-  router.setState = setState;
-  router.state = state;
   router.startReactTransition = startReactTransition;
+  React.useEffect(() => {
+    if (isTransitioning) {
+      router.__store.setState(s => ({
+        ...s,
+        isTransitioning
+      }));
+    }
+  }, [isTransitioning]);
   const tryLoad = () => {
-    startReactTransition(() => {
-      try {
-        router.load();
-      } catch (err) {
-        console.error(err);
-      }
-    });
+    // startReactTransition(() => {
+    try {
+      router.load();
+    } catch (err) {
+      console.error(err);
+    }
+    // })
   };
   useLayoutEffect$1(() => {
     const unsub = router.history.subscribe(() => {
       router.latestLocation = router.parseLocation(router.latestLocation);
-      if (state.location !== router.latestLocation) {
+      if (router.state.location !== router.latestLocation) {
         tryLoad();
       }
     });
@@ -855,7 +856,7 @@ function RouterProviderInner({
       hash: true,
       state: true
     });
-    if (state.location.href !== nextLocation.href) {
+    if (router.state.location.href !== nextLocation.href) {
       router.commitLocation({
         ...nextLocation,
         replace: true
@@ -866,20 +867,21 @@ function RouterProviderInner({
     };
   }, [router.history]);
   useLayoutEffect$1(() => {
-    if (!isTransitioning && state.resolvedLocation !== state.location) {
+    if (!isTransitioning && router.state.resolvedLocation !== router.state.location) {
       router.emit({
         type: 'onResolved',
-        fromLocation: state.resolvedLocation,
-        toLocation: state.location,
-        pathChanged: state.location.href !== state.resolvedLocation?.href
+        fromLocation: router.state.resolvedLocation,
+        toLocation: router.state.location,
+        pathChanged: router.state.location.href !== router.state.resolvedLocation?.href
       });
       router.pendingMatches = [];
-      setState(s => ({
+      router.__store.setState(s => ({
         ...s,
+        isTransitioning: false,
         resolvedLocation: s.location
       }));
     }
-  });
+  }, [isTransitioning]);
   useLayoutEffect$1(() => {
     if (!window.__TSR_DEHYDRATED__) {
       tryLoad();
@@ -890,14 +892,11 @@ function RouterProviderInner({
   }, /*#__PURE__*/React.createElement(Matches, null));
 }
 function getRouteMatch(state, id) {
-  return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
+  return [...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
 }
 function useRouterState(opts) {
-  const {
-    state
-  } = useRouter();
-  // return useStore(router.__store, opts?.select as any)
-  return opts?.select ? opts.select(state) : state;
+  const router = useRouter();
+  return useStore(router.__store, opts?.select);
 }
 function useRouter() {
   const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
@@ -1260,9 +1259,6 @@ class Router {
   // by the router provider once rendered. We provide these so that the
   // router can be used in a non-react environment if necessary
   startReactTransition = fn => fn();
-  setState = updater => {
-    this.state = functionalUpdate(updater, this.state);
-  };
   update = newOptions => {
     this.options = {
       ...this.options,
@@ -1277,10 +1273,20 @@ class Router {
       this.routeTree = this.options.routeTree;
       this.buildRouteTree();
     }
-    if (!this.state) {
-      this.state = getInitialRouterState(this.latestLocation);
+    if (!this.__store) {
+      this.__store = new Store(getInitialRouterState(this.latestLocation), {
+        onUpdate: () => {
+          this.__store.state = {
+            ...this.state,
+            status: this.state.isTransitioning || this.state.isLoading ? 'pending' : 'idle'
+          };
+        }
+      });
     }
   };
+  get state() {
+    return this.__store.state;
+  }
   buildRouteTree = () => {
     this.routesById = {};
     this.routesByPath = {};
@@ -1552,7 +1558,7 @@ class Router {
     getRouteMatch(this.state, id)?.abortController?.abort();
   };
   cancelMatches = () => {
-    this.state.matches.forEach(match => {
+    this.state.pendingMatches?.forEach(match => {
       this.cancelMatch(match.id);
     });
   };
@@ -1743,6 +1749,12 @@ class Router {
   }) => {
     let latestPromise;
     let firstBadMatchIndex;
+    const updatePendingMatch = match => {
+      this.__store.setState(s => ({
+        ...s,
+        pendingMatches: s.pendingMatches?.map(d => d.id === match.id ? match : d)
+      }));
+    };
 
     // Check each match middleware to see if the route can be accessed
     try {
@@ -1899,12 +1911,10 @@ class Router {
           loadPromise
         };
         if (!preload) {
-          this.setState(s => ({
-            ...s,
-            matches: s.matches.map(d => d.id === match.id ? match : d)
-          }));
+          updatePendingMatch(match);
         }
         let didShowPending = false;
+        const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
         await new Promise(async resolve => {
           // If the route has a pending component and a pendingMs option,
           // forcefully show the pending component
@@ -1916,17 +1926,13 @@ class Router {
                 ...match,
                 showPending: true
               };
-              this.setState(s => ({
-                ...s,
-                matches: s.matches.map(d => d.id === match.id ? match : d)
-              }));
+              updatePendingMatch(match);
               resolve();
             });
           }
           try {
             const loaderData = await loadPromise;
             if (latestPromise = checkLatest()) return await latestPromise;
-            const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
             if (didShowPending && pendingMinMs) {
               await new Promise(r => setTimeout(r, pendingMinMs));
             }
@@ -1956,12 +1962,19 @@ class Router {
               isFetching: false,
               updatedAt: Date.now()
             };
+          } finally {
+            // If we showed the pending component, that means
+            // we already moved the pendingMatches to the matches
+            // state, so we need to update that specific match
+            if (didShowPending && pendingMinMs && match.showPending) {
+              this.__store.setState(s => ({
+                ...s,
+                matches: s.matches?.map(d => d.id === match.id ? match : d)
+              }));
+            }
           }
           if (!preload) {
-            this.setState(s => ({
-              ...s,
-              matches: s.matches.map(d => d.id === match.id ? match : d)
-            }));
+            updatePendingMatch(match);
           }
           resolve();
         });
@@ -1990,24 +2003,23 @@ class Router {
       });
 
       // Match the routes
-      let matches = this.matchRoutes(next.pathname, next.search, {
+      let pendingMatches = this.matchRoutes(next.pathname, next.search, {
         debug: true
       });
-      this.pendingMatches = matches;
       const previousMatches = this.state.matches;
 
       // Ingest the new matches
-      this.setState(s => ({
+      this.__store.setState(s => ({
         ...s,
-        // status: 'pending',
+        isLoading: true,
         location: next,
-        matches
+        pendingMatches
       }));
       try {
         try {
           // Load the matches
           await this.loadMatches({
-            matches,
+            matches: pendingMatches,
             checkLatest: () => this.checkLatest(promise),
             invalidate: opts?.invalidate
           });
@@ -2022,14 +2034,13 @@ class Router {
         }
         const exitingMatchIds = previousMatches.filter(id => !this.pendingMatches.includes(id));
         const enteringMatchIds = this.pendingMatches.filter(id => !previousMatches.includes(id));
-        const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id))
-
-        // setState((s) => ({
-        //   ...s,
-        //   status: 'idle',
-        //   resolvedLocation: s.location,
-        //   matches,
-        // }))
+        const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id));
+        this.__store.setState(s => ({
+          ...s,
+          isLoading: false,
+          matches: pendingMatches,
+          pendingMatches: undefined
+        }))
 
         //
         ;
@@ -2184,9 +2195,6 @@ class Router {
       return false;
     }
     const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
-
-    // const baseLocation = state.resolvedLocation
-
     if (!baseLocation) {
       return false;
     }
@@ -2258,7 +2266,7 @@ class Router {
       }
       return match;
     });
-    this.setState(s => {
+    this.__store.setState(s => {
       return {
         ...s,
         matches: matches
@@ -2289,6 +2297,8 @@ class SearchParamError extends Error {}
 class PathParamError extends Error {}
 function getInitialRouterState(location) {
   return {
+    isLoading: false,
+    isTransitioning: false,
     status: 'idle',
     resolvedLocation: location,
     location,