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

package/build/umd/index.development.js

@@ -1199,13 +1199,11 @@
   //
 
   function Matches() {
-    const {
-      routesById
-    } = useRouter();
+    const router = useRouter();
     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 locationKey = router.latestLocation.state.key;
+    const route = router.routesById[rootRouteId];
     const errorComponent = React__namespace.useCallback(props => {
       return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
         ...props,
@@ -1403,17 +1401,19 @@
         ...rest?.context
       }
     });
-    const inner = /*#__PURE__*/React__namespace.createElement(RouterProviderInner, {
-      router: router
-    });
+    const inner = /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
+      value: router
+    }, /*#__PURE__*/React__namespace.createElement(Matches, null), /*#__PURE__*/React__namespace.createElement(Transitioner, null));
     if (router.options.Wrap) {
       return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, inner);
     }
     return inner;
   }
-  function RouterProviderInner({
-    router
-  }) {
+  function Transitioner() {
+    const router = useRouter();
+    const routerState = useRouterState({
+      select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
+    });
     const [isTransitioning, startReactTransition] = React__namespace.useTransition();
     router.startReactTransition = startReactTransition;
     React__namespace.useEffect(() => {
@@ -1425,18 +1425,25 @@
       }
     }, [isTransitioning]);
     const tryLoad = () => {
-      // startReactTransition(() => {
-      try {
-        router.load();
-      } catch (err) {
-        console.error(err);
-      }
-      // })
+      const apply = cb => {
+        if (!routerState.isTransitioning) {
+          startReactTransition(() => cb());
+        } else {
+          cb();
+        }
+      };
+      apply(() => {
+        try {
+          router.load();
+        } catch (err) {
+          console.error(err);
+        }
+      });
     };
     useLayoutEffect$1(() => {
       const unsub = router.history.subscribe(() => {
         router.latestLocation = router.parseLocation(router.latestLocation);
-        if (router.state.location !== router.latestLocation) {
+        if (routerState.location !== router.latestLocation) {
           tryLoad();
         }
       });
@@ -1446,7 +1453,7 @@
         hash: true,
         state: true
       });
-      if (router.state.location.href !== nextLocation.href) {
+      if (routerState.location.href !== nextLocation.href) {
         router.commitLocation({
           ...nextLocation,
           replace: true
@@ -1457,12 +1464,13 @@
       };
     }, [router.history]);
     useLayoutEffect$1(() => {
-      if (!isTransitioning && router.state.resolvedLocation !== router.state.location) {
+      if (!isTransitioning && !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
+        console.log('onResolved', routerState.location);
         router.emit({
           type: 'onResolved',
-          fromLocation: router.state.resolvedLocation,
-          toLocation: router.state.location,
-          pathChanged: router.state.location.href !== router.state.resolvedLocation?.href
+          fromLocation: routerState.resolvedLocation,
+          toLocation: routerState.location,
+          pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
         });
         router.pendingMatches = [];
         router.__store.setState(s => ({
@@ -1471,15 +1479,13 @@
           resolvedLocation: s.location
         }));
       }
-    }, [isTransitioning]);
+    }, [isTransitioning, routerState.isLoading]);
     useLayoutEffect$1(() => {
       if (!window.__TSR_DEHYDRATED__) {
         tryLoad();
       }
     }, []);
-    return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
-      value: router
-    }, /*#__PURE__*/React__namespace.createElement(Matches, null));
+    return null;
   }
   function getRouteMatch(state, id) {
     return [...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);