@tanstack/react-router 0.0.1-beta.209 → 0.0.1-beta.210

package/build/cjs/RouterProvider.js

@@ -12,14 +12,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var history = require('@tanstack/history');
 var React = require('react');
-var router = require('./router.js');
+var invariant = require('tiny-invariant');
+var warning = require('tiny-warning');
+var Matches = require('./Matches.js');
+var path = require('./path.js');
 var redirects = require('./redirects.js');
+var router = require('./router.js');
 var utils = require('./utils.js');
-var react = require('./react.js');
-var path = require('./path.js');
-var invariant = require('tiny-invariant');
-var history = require('@tanstack/history');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,17 +44,22 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
+var warning__default = /*#__PURE__*/_interopDefaultLegacy(warning);
 
-const preloadWarning = 'Error preloading route! ☝️';
 const routerContext = /*#__PURE__*/React__namespace.createContext(null);
 if (typeof document !== 'undefined') {
   window.__TSR_ROUTER_CONTEXT__ = routerContext;
 }
+const preloadWarning = 'Error preloading route! ☝️';
+function isCtrlEvent(e) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+}
+class SearchParamError extends Error {}
+class PathParamError extends Error {}
 function getInitialRouterState(location) {
   return {
     status: 'idle',
-    isFetching: false,
-    resolvedLocation: location,
+    resolvedLocation: undefined,
     location: location,
     matches: [],
     pendingMatches: [],
@@ -114,7 +120,20 @@ function RouterProvider({
     }
     return location;
   });
-  const [state, setState] = React__namespace.useState(() => getInitialRouterState(parseLocation()));
+  const [preState, setState] = React__namespace.useState(() => getInitialRouterState(parseLocation()));
+  const [isTransitioning, startReactTransition] = React__namespace.useTransition();
+  const state = React__namespace.useMemo(() => ({
+    ...preState,
+    status: isTransitioning ? 'pending' : 'idle'
+  }), [preState, isTransitioning]);
+  React__namespace.useLayoutEffect(() => {
+    if (!isTransitioning && state.resolvedLocation !== state.location) {
+      setState(s => ({
+        ...s,
+        resolvedLocation: s.location
+      }));
+    }
+  });
   const basepath = `/${path.trimPath(options.basepath ?? '') ?? ''}`;
   const resolvePathWithBase = utils.useStableCallback((from, path$1) => {
     return path.resolvePath(basepath, from, path.cleanPath(path$1));
@@ -333,7 +352,7 @@ function RouterProvider({
       cancelMatch(match.id);
     });
   });
-  const buildLocation = utils.useStableCallback((opts = {}) => {
+  const buildLocation = utils.useStableCallback(opts => {
     const build = (dest = {}, matches) => {
       const from = latestLocationRef.current;
       const fromPathname = dest.from ?? from.pathname;
@@ -426,7 +445,10 @@ function RouterProvider({
     }
     return buildWithMatches(opts);
   });
-  const commitLocation = utils.useStableCallback(async next => {
+  const commitLocation = utils.useStableCallback(async ({
+    startTransition,
+    ...next
+  }) => {
     if (navigateTimeoutRef.current) clearTimeout(navigateTimeoutRef.current);
     const isSameUrl = latestLocationRef.current.href === next.href;
 
@@ -459,7 +481,14 @@ function RouterProvider({
           nextHistory.state.__tempKey = tempLocationKeyRef.current;
         }
       }
-      history$1[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+      const apply = () => {
+        history$1[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+      };
+      if (startTransition ?? true) {
+        startReactTransition(apply);
+      } else {
+        apply();
+      }
     }
     resetNextScrollRef.current = next.resetScroll ?? true;
     return latestLoadPromiseRef.current;
@@ -467,11 +496,13 @@ function RouterProvider({
   const buildAndCommitLocation = utils.useStableCallback(({
     replace,
     resetScroll,
+    startTransition,
     ...rest
   } = {}) => {
     const location = buildLocation(rest);
     return commitLocation({
       ...location,
+      startTransition,
       replace,
       resetScroll
     });
@@ -553,7 +584,8 @@ function RouterProvider({
             navigate: opts => navigate({
               ...opts,
               from: match.pathname
-            })
+            }),
+            buildLocation
           })) ?? {};
           const context = {
             ...parentContext,
@@ -614,7 +646,7 @@ function RouterProvider({
                 from: match.pathname
               })
             });
-            await Promise.all([componentsPromise, loaderPromise]);
+            const [_, loaderContext] = await Promise.all([componentsPromise, loaderPromise]);
             if (latestPromise = checkLatest()) return await latestPromise;
             matches[index] = match = {
               ...match,
@@ -668,7 +700,7 @@ function RouterProvider({
   const load = utils.useStableCallback(async () => {
     const promise = new Promise(async (resolve, reject) => {
       const next = latestLocationRef.current;
-      const prevLocation = state.resolvedLocation;
+      const prevLocation = state.resolvedLocation || state.location;
       const pathDidChange = !!(next && prevLocation.href !== next.href);
       let latestPromise;
 
@@ -681,19 +713,14 @@ function RouterProvider({
         pathChanged: pathDidChange
       });
 
-      // Ingest the new location
-      setState(s => ({
-        ...s,
-        location: next
-      }));
-
       // Match the routes
       let matches = matchRoutes(next.pathname, next.search, {
         debug: true
       });
+
+      // Ingest the new matches
       setState(s => ({
         ...s,
-        status: 'pending',
         matches
       }));
       try {
@@ -724,11 +751,11 @@ function RouterProvider({
         //   state.pendingMatches.includes(id),
         // )
 
-        setState(s => ({
-          ...s,
-          status: 'idle',
-          resolvedLocation: s.location
-        }));
+        // setState((s) => ({
+        //   ...s,
+        //   status: 'idle',
+        //   resolvedLocation: s.location,
+        // }))
 
         // TODO:
         // ;(
@@ -773,7 +800,7 @@ function RouterProvider({
     });
     return [utils.last(matches), matches];
   });
-  const buildLink = utils.useStableCallback((state, dest) => {
+  const buildLink = utils.useStableCallback(dest => {
     // If this link simply reloads the current route,
     // make sure it has a new key so it will trigger a data refresh
 
@@ -788,7 +815,8 @@ function RouterProvider({
       disabled,
       target,
       replace,
-      resetScroll
+      resetScroll,
+      startTransition
     } = dest;
     try {
       new URL(`${to}`);
@@ -823,7 +851,8 @@ function RouterProvider({
         commitLocation({
           ...next,
           replace,
-          resetScroll
+          resetScroll,
+          startTransition
         });
       }
     };
@@ -881,15 +910,17 @@ function RouterProvider({
   React__namespace.useLayoutEffect(() => {
     const unsub = history$1.subscribe(() => {
       latestLocationRef.current = parseLocation(latestLocationRef.current);
-      React__namespace.startTransition(() => {
-        if (state.location !== latestLocationRef.current) {
-          try {
-            load();
-          } catch (err) {
-            console.error(err);
-          }
+      setState(s => ({
+        ...s,
+        status: 'pending'
+      }));
+      if (state.location !== latestLocationRef.current) {
+        try {
+          load();
+        } catch (err) {
+          console.error(err);
         }
-      });
+      }
     });
     const nextLocation = buildLocation({
       search: true,
@@ -910,14 +941,15 @@ function RouterProvider({
   const initialLoad = React__namespace.useRef(true);
   if (initialLoad.current) {
     initialLoad.current = false;
-    try {
-      load();
-    } catch (err) {
-      console.error(err);
-    }
+    startReactTransition(() => {
+      try {
+        load();
+      } catch (err) {
+        console.error(err);
+      }
+    });
   }
-  React__namespace.useMemo(() => [...state.matches, ...state.pendingMatches].some(d => d.isFetching), [state.matches, state.pendingMatches]);
-  const matchRoute = utils.useStableCallback((state, location, opts) => {
+  const matchRoute = utils.useStableCallback((location, opts) => {
     location = {
       ...location,
       to: location.to ? resolvePathWithBase(location.from || '', location.to) : undefined
@@ -927,6 +959,9 @@ function RouterProvider({
       return false;
     }
     const baseLocation = opts?.pending ? latestLocationRef.current : state.resolvedLocation;
+
+    // const baseLocation = state.resolvedLocation
+
     if (!baseLocation) {
       return false;
     }
@@ -937,7 +972,7 @@ function RouterProvider({
     if (!match) {
       return false;
     }
-    if (opts?.includeSearch ?? true) {
+    if (match && (opts?.includeSearch ?? true)) {
       return utils.partialDeepEqual(baseLocation.search, next.search) ? match : false;
     }
     return match;
@@ -951,20 +986,29 @@ function RouterProvider({
     routesById,
     options,
     history: history$1,
-    load
+    load,
+    buildLocation
   };
   return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
     value: routerContextValue
-  }, /*#__PURE__*/React__namespace.createElement(react.Matches, null));
+  }, /*#__PURE__*/React__namespace.createElement(Matches.Matches, null));
 }
-function isCtrlEvent(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-}
-class SearchParamError extends Error {}
-class PathParamError extends Error {}
 function getRouteMatch(state, 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;
+}
+function useRouter() {
+  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
+  const value = React__namespace.useContext(resolvedContext);
+  warning__default["default"](value, 'useRouter must be used inside a <RouterProvider> component!');
+  return value;
+}
 
 exports.PathParamError = PathParamError;
 exports.RouterProvider = RouterProvider;
@@ -972,4 +1016,6 @@ exports.SearchParamError = SearchParamError;
 exports.getInitialRouterState = getInitialRouterState;
 exports.getRouteMatch = getRouteMatch;
 exports.routerContext = routerContext;
+exports.useRouter = useRouter;
+exports.useRouterState = useRouterState;
 //# sourceMappingURL=RouterProvider.js.map