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

package/build/esm/index.js

@@ -275,7 +275,7 @@ function useRouteContext(opts) {
     select: match => opts?.select ? opts.select(match.context) : match.context
   });
 }
-const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 function joinPaths(paths) {
   return cleanPath(paths.filter(Boolean).join('/'));
@@ -777,8 +777,8 @@ class PathParamError extends Error {}
 function getInitialRouterState(location) {
   return {
     status: 'idle',
-    resolvedLocation: undefined,
-    location: location,
+    resolvedLocation: location,
+    location,
     matches: [],
     pendingMatches: [],
     lastUpdated: Date.now()
@@ -798,7 +798,7 @@ function RouterProvider({
   };
   const history = React.useState(() => options.history ?? createBrowserHistory())[0];
   const tempLocationKeyRef = React.useRef(`${Math.round(Math.random() * 10000000)}`);
-  const resetNextScrollRef = React.useRef(false);
+  const resetNextScrollRef = React.useRef(true);
   const navigateTimeoutRef = React.useRef(null);
   const latestLoadPromiseRef = React.useRef(Promise.resolve());
   const checkLatest = promise => {
@@ -838,14 +838,22 @@ function RouterProvider({
     }
     return location;
   });
-  const [preState, setState] = React.useState(() => getInitialRouterState(parseLocation()));
+  const latestLocationRef = React.useRef(parseLocation());
+  const [preState, setState] = React.useState(() => getInitialRouterState(latestLocationRef.current));
   const [isTransitioning, startReactTransition] = React.useTransition();
   const state = React.useMemo(() => ({
     ...preState,
-    status: isTransitioning ? 'pending' : 'idle'
+    status: isTransitioning ? 'pending' : 'idle',
+    location: isTransitioning ? latestLocationRef.current : preState.location
   }), [preState, isTransitioning]);
   React.useLayoutEffect(() => {
     if (!isTransitioning && state.resolvedLocation !== state.location) {
+      router.emit({
+        type: 'onResolved',
+        fromLocation: state.resolvedLocation,
+        toLocation: state.location,
+        pathChanged: state.location.href !== state.resolvedLocation?.href
+      });
       setState(s => ({
         ...s,
         resolvedLocation: s.location
@@ -1298,7 +1306,6 @@ function RouterProvider({
             preload: !!preload,
             context: parentContext,
             location: state.location,
-            // TODO: This might need to be latestLocationRef.current...?
             navigate: opts => navigate({
               ...opts,
               from: match.pathname
@@ -1418,16 +1425,16 @@ function RouterProvider({
   const load = useStableCallback(async () => {
     const promise = new Promise(async (resolve, reject) => {
       const next = latestLocationRef.current;
-      const prevLocation = state.resolvedLocation || state.location;
-      const pathDidChange = !!(next && prevLocation.href !== next.href);
+      const prevLocation = state.resolvedLocation;
+      const pathDidChange = prevLocation.href !== next.href;
       let latestPromise;
 
       // Cancel any pending matches
       cancelMatches(state);
       router.emit({
         type: 'onBeforeLoad',
-        from: prevLocation,
-        to: next ?? state.location,
+        fromLocation: prevLocation,
+        toLocation: next,
         pathChanged: pathDidChange
       });
 
@@ -1435,10 +1442,13 @@ function RouterProvider({
       let matches = matchRoutes(next.pathname, next.search, {
         debug: true
       });
+      const previousMatches = state.matches;
 
       // Ingest the new matches
       setState(s => ({
         ...s,
+        status: 'pending',
+        location: next,
         matches
       }));
       try {
@@ -1457,17 +1467,9 @@ function RouterProvider({
         if (latestPromise = checkLatest(promise)) {
           return latestPromise;
         }
-
-        // TODO:
-        // const exitingMatchIds = previousMatches.filter(
-        //   (id) => !state.pendingMatches.includes(id),
-        // )
-        // const enteringMatchIds = state.pendingMatches.filter(
-        //   (id) => !previousMatches.includes(id),
-        // )
-        // const stayingMatchIds = previousMatches.filter((id) =>
-        //   state.pendingMatches.includes(id),
-        // )
+        const exitingMatchIds = previousMatches.filter(id => !state.pendingMatches.includes(id));
+        const enteringMatchIds = state.pendingMatches.filter(id => !previousMatches.includes(id));
+        const stayingMatchIds = previousMatches.filter(id => state.pendingMatches.includes(id))
 
         // setState((s) => ({
         //   ...s,
@@ -1475,23 +1477,17 @@ function RouterProvider({
         //   resolvedLocation: s.location,
         // }))
 
-        // TODO:
-        // ;(
-        //   [
-        //     [exitingMatchIds, 'onLeave'],
-        //     [enteringMatchIds, 'onEnter'],
-        //     [stayingMatchIds, 'onTransition'],
-        //   ] as const
-        // ).forEach(([matches, hook]) => {
-        //   matches.forEach((match) => {
-        //     const route = this.getRoute(match.routeId)
-        //     route.options[hook]?.(match)
-        //   })
-        // })
+        //
+        ;
+        [[exitingMatchIds, 'onLeave'], [enteringMatchIds, 'onEnter'], [stayingMatchIds, 'onTransition']].forEach(([matches, hook]) => {
+          matches.forEach(match => {
+            looseRoutesById[match.routeId].options[hook]?.(match);
+          });
+        });
         router.emit({
           type: 'onLoad',
-          from: prevLocation,
-          to: next,
+          fromLocation: prevLocation,
+          toLocation: next,
           pathChanged: pathDidChange
         });
         resolve();
@@ -1624,20 +1620,17 @@ function RouterProvider({
       disabled
     };
   });
-  const latestLocationRef = React.useRef(state.location);
   React.useLayoutEffect(() => {
     const unsub = history.subscribe(() => {
       latestLocationRef.current = parseLocation(latestLocationRef.current);
-      setState(s => ({
-        ...s,
-        status: 'pending'
-      }));
       if (state.location !== latestLocationRef.current) {
-        try {
-          load();
-        } catch (err) {
-          console.error(err);
-        }
+        startReactTransition(() => {
+          try {
+            load();
+          } catch (err) {
+            console.error(err);
+          }
+        });
       }
     });
     const nextLocation = buildLocation({
@@ -1705,7 +1698,9 @@ function RouterProvider({
     options,
     history,
     load,
-    buildLocation
+    buildLocation,
+    subscribe: router.subscribe,
+    resetNextScrollRef
   };
   return /*#__PURE__*/React.createElement(routerContext.Provider, {
     value: routerContextValue
@@ -2091,6 +2086,7 @@ function useLinkProps(options) {
     preloadDelay,
     replace,
     startTransition,
+    resetScroll,
     // element props
     style,
     className,
@@ -2170,6 +2166,151 @@ const Link = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 
+const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const windowKey = 'window';
+const delimiter = '___';
+let weakScrolledElements = new WeakSet();
+let cache;
+const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
+const defaultGetKey = location => location.state.key;
+function useScrollRestoration(options) {
+  const {
+    state,
+    subscribe,
+    resetNextScrollRef
+  } = useRouter();
+  useLayoutEffect(() => {
+    const getKey = options?.getKey || defaultGetKey;
+    if (sessionsStorage) {
+      if (!cache) {
+        cache = (() => {
+          const storageKey = 'tsr-scroll-restoration-v2';
+          const state = JSON.parse(window.sessionStorage.getItem(storageKey) || 'null') || {
+            cached: {},
+            next: {}
+          };
+          return {
+            state,
+            set: updater => {
+              cache.state = functionalUpdate(updater, cache.state);
+              window.sessionStorage.setItem(storageKey, JSON.stringify(cache.state));
+            }
+          };
+        })();
+      }
+    }
+    const {
+      history
+    } = window;
+    if (history.scrollRestoration) {
+      history.scrollRestoration = 'manual';
+    }
+    const onScroll = event => {
+      if (weakScrolledElements.has(event.target)) return;
+      weakScrolledElements.add(event.target);
+      const elementSelector = event.target === document || event.target === window ? windowKey : getCssSelector(event.target);
+      if (!cache.state.next[elementSelector]) {
+        cache.set(c => ({
+          ...c,
+          next: {
+            ...c.next,
+            [elementSelector]: {
+              scrollX: NaN,
+              scrollY: NaN
+            }
+          }
+        }));
+      }
+    };
+    const getCssSelector = el => {
+      let path = [],
+        parent;
+      while (parent = el.parentNode) {
+        path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
+        el = parent;
+      }
+      return `${path.join(' > ')}`.toLowerCase();
+    };
+    if (typeof document !== 'undefined') {
+      document.addEventListener('scroll', onScroll, true);
+    }
+    const unsubOnBeforeLoad = subscribe('onBeforeLoad', event => {
+      if (event.pathChanged) {
+        const restoreKey = getKey(event.fromLocation);
+        for (const elementSelector in cache.state.next) {
+          const entry = cache.state.next[elementSelector];
+          if (elementSelector === windowKey) {
+            entry.scrollX = window.scrollX || 0;
+            entry.scrollY = window.scrollY || 0;
+          } else if (elementSelector) {
+            const element = document.querySelector(elementSelector);
+            entry.scrollX = element?.scrollLeft || 0;
+            entry.scrollY = element?.scrollTop || 0;
+          }
+          cache.set(c => {
+            const next = {
+              ...c.next
+            };
+            delete next[elementSelector];
+            return {
+              ...c,
+              next,
+              cached: {
+                ...c.cached,
+                [[restoreKey, elementSelector].join(delimiter)]: entry
+              }
+            };
+          });
+        }
+      }
+    });
+    const unsubOnResolved = subscribe('onResolved', event => {
+      if (event.pathChanged) {
+        if (!resetNextScrollRef.current) {
+          return;
+        }
+        resetNextScrollRef.current = true;
+        const getKey = options?.getKey || defaultGetKey;
+        const restoreKey = getKey(event.toLocation);
+        let windowRestored = false;
+        for (const cacheKey in cache.state.cached) {
+          const entry = cache.state.cached[cacheKey];
+          const [key, elementSelector] = cacheKey.split(delimiter);
+          if (key === restoreKey) {
+            if (elementSelector === windowKey) {
+              windowRestored = true;
+              window.scrollTo(entry.scrollX, entry.scrollY);
+            } else if (elementSelector) {
+              const element = document.querySelector(elementSelector);
+              if (element) {
+                element.scrollLeft = entry.scrollX;
+                element.scrollTop = entry.scrollY;
+              }
+            }
+          }
+        }
+        if (!windowRestored) {
+          window.scrollTo(0, 0);
+        }
+        cache.set(c => ({
+          ...c,
+          next: {}
+        }));
+        weakScrolledElements = new WeakSet();
+      }
+    });
+    return () => {
+      document.removeEventListener('scroll', onScroll);
+      unsubOnBeforeLoad();
+      unsubOnResolved();
+    };
+  }, []);
+}
+function ScrollRestoration(props) {
+  useScrollRestoration(props);
+  return null;
+}
+
 function useBlocker(message, condition = true) {
   const {
     history
@@ -2220,7 +2361,7 @@ function Navigate(props) {
   const match = useMatch({
     strict: false
   });
-  useLayoutEffect(() => {
+  useLayoutEffect$1(() => {
     navigate({
       from: props.to ? match.pathname : undefined,
       ...props
@@ -2229,5 +2370,5 @@ function Navigate(props) {
   return null;
 }
 
-export { Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterProvider, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useBlocker, useLayoutEffect, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useSearch, useStableCallback };
+export { Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useBlocker, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map