@tanstack/react-router 0.0.1-beta.211 → 0.0.1-beta.213

package/build/types/RouterProvider.d.ts

@@ -38,6 +38,8 @@ export type RouterContext<TRouteTree extends AnyRoute> = {
     history: RouterHistory;
     load: LoadFn;
     buildLocation: BuildLocationFn<TRouteTree>;
+    subscribe: Router<TRouteTree>['subscribe'];
+    resetNextScrollRef: React.MutableRefObject<boolean>;
 };
 export declare const routerContext: React.Context<RouterContext<any>>;
 export declare class SearchParamError extends Error {

package/build/types/index.d.ts

@@ -16,6 +16,7 @@ export * from './route';
 export * from './routeInfo';
 export * from './router';
 export * from './RouterProvider';
+export * from './scroll-restoration';
 export * from './searchParams';
 export * from './useBlocker';
 export * from './useNavigate';

package/build/types/router.d.ts

@@ -58,7 +58,7 @@ export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
     matches: RouteMatch<TRouteTree>[];
     pendingMatches: RouteMatch<TRouteTree>[];
     location: ParsedLocation<FullSearchSchema<TRouteTree>>;
-    resolvedLocation: undefined | ParsedLocation<FullSearchSchema<TRouteTree>>;
+    resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>;
     lastUpdated: number;
 }
 export type ListenerFn<TEvent extends RouterEvent> = (event: TEvent) => void;
@@ -90,14 +90,20 @@ export declare const componentTypes: readonly ["component", "errorComponent", "p
 export type RouterEvents = {
     onBeforeLoad: {
         type: 'onBeforeLoad';
-        from: undefined | ParsedLocation;
-        to: ParsedLocation;
+        fromLocation: ParsedLocation;
+        toLocation: ParsedLocation;
         pathChanged: boolean;
     };
     onLoad: {
         type: 'onLoad';
-        from: undefined | ParsedLocation;
-        to: ParsedLocation;
+        fromLocation: ParsedLocation;
+        toLocation: ParsedLocation;
+        pathChanged: boolean;
+    };
+    onResolved: {
+        type: 'onResolved';
+        fromLocation: ParsedLocation;
+        toLocation: ParsedLocation;
         pathChanged: boolean;
     };
 };

package/build/types/scroll-restoration.d.ts

@@ -0,0 +1,6 @@
+import { ParsedLocation } from './location';
+export type ScrollRestorationOptions = {
+    getKey?: (location: ParsedLocation) => string;
+};
+export declare function useScrollRestoration(options?: ScrollRestorationOptions): void;
+export declare function ScrollRestoration(props: ScrollRestorationOptions): null;

package/build/umd/index.development.js

@@ -147,8 +147,10 @@
     if (!state) {
       state = {};
     }
-    state.key = createRandomKey();
-    return state;
+    return {
+      ...state,
+      key: createRandomKey()
+    };
   }
 
   /**
@@ -600,7 +602,7 @@
       select: match => opts?.select ? opts.select(match.context) : match.context
     });
   }
-  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  const useLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 
   function joinPaths(paths) {
     return cleanPath(paths.filter(Boolean).join('/'));
@@ -1102,8 +1104,8 @@
   function getInitialRouterState(location) {
     return {
       status: 'idle',
-      resolvedLocation: undefined,
-      location: location,
+      resolvedLocation: location,
+      location,
       matches: [],
       pendingMatches: [],
       lastUpdated: Date.now()
@@ -1123,7 +1125,7 @@
     };
     const history = React__namespace.useState(() => options.history ?? createBrowserHistory())[0];
     const tempLocationKeyRef = React__namespace.useRef(`${Math.round(Math.random() * 10000000)}`);
-    const resetNextScrollRef = React__namespace.useRef(false);
+    const resetNextScrollRef = React__namespace.useRef(true);
     const navigateTimeoutRef = React__namespace.useRef(null);
     const latestLoadPromiseRef = React__namespace.useRef(Promise.resolve());
     const checkLatest = promise => {
@@ -1163,14 +1165,22 @@
       }
       return location;
     });
-    const [preState, setState] = React__namespace.useState(() => getInitialRouterState(parseLocation()));
+    const latestLocationRef = React__namespace.useRef(parseLocation());
+    const [preState, setState] = React__namespace.useState(() => getInitialRouterState(latestLocationRef.current));
     const [isTransitioning, startReactTransition] = React__namespace.useTransition();
     const state = React__namespace.useMemo(() => ({
       ...preState,
-      status: isTransitioning ? 'pending' : 'idle'
+      status: isTransitioning ? 'pending' : 'idle',
+      location: isTransitioning ? latestLocationRef.current : preState.location
     }), [preState, isTransitioning]);
     React__namespace.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
@@ -1742,16 +1752,16 @@
     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
         });
 
@@ -1759,10 +1769,13 @@
         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 {
@@ -1781,17 +1794,9 @@
           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,
@@ -1799,23 +1804,17 @@
           //   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();
@@ -1948,20 +1947,17 @@
         disabled
       };
     });
-    const latestLocationRef = React__namespace.useRef(state.location);
     React__namespace.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({
@@ -2029,7 +2025,9 @@
       options,
       history,
       load,
-      buildLocation
+      buildLocation,
+      subscribe: router.subscribe,
+      resetNextScrollRef
     };
     return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: routerContextValue
@@ -2415,6 +2413,7 @@
       preloadDelay,
       replace,
       startTransition,
+      resetScroll,
       // element props
       style,
       className,
@@ -2494,6 +2493,151 @@
     }));
   });
 
+  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.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
@@ -2544,7 +2688,7 @@
     const match = useMatch({
       strict: false
     });
-    useLayoutEffect(() => {
+    useLayoutEffect$1(() => {
       navigate({
         from: props.to ? match.pathname : undefined,
         ...props
@@ -2569,6 +2713,7 @@
   exports.Route = Route;
   exports.Router = Router;
   exports.RouterProvider = RouterProvider;
+  exports.ScrollRestoration = ScrollRestoration;
   exports.SearchParamError = SearchParamError;
   exports.cleanPath = cleanPath;
   exports.componentTypes = componentTypes;
@@ -2612,7 +2757,7 @@
   exports.trimPathRight = trimPathRight;
   exports.typedNavigate = typedNavigate;
   exports.useBlocker = useBlocker;
-  exports.useLayoutEffect = useLayoutEffect;
+  exports.useLayoutEffect = useLayoutEffect$1;
   exports.useLinkProps = useLinkProps;
   exports.useMatch = useMatch;
   exports.useMatchRoute = useMatchRoute;
@@ -2622,6 +2767,7 @@
   exports.useRouteContext = useRouteContext;
   exports.useRouter = useRouter;
   exports.useRouterState = useRouterState;
+  exports.useScrollRestoration = useScrollRestoration;
   exports.useSearch = useSearch;
   exports.useStableCallback = useStableCallback;
   exports.warning = warning;