@tanstack/react-router 0.0.1-beta.230 → 0.0.1-beta.231

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

@@ -4,3 +4,15 @@ export type ScrollRestorationOptions = {
 };
 export declare function useScrollRestoration(options?: ScrollRestorationOptions): void;
 export declare function ScrollRestoration(props: ScrollRestorationOptions): null;
+export declare function useElementScrollRestoration(options: ({
+    id: string;
+    getElement?: () => Element | undefined | null;
+} | {
+    id?: string;
+    getElement: () => Element | undefined | null;
+}) & {
+    getKey?: (location: ParsedLocation) => string;
+}): {
+    scrollX: number;
+    scrollY: number;
+} | undefined;

package/build/umd/index.development.js

@@ -976,7 +976,10 @@
     const match = matches[0];
     const routeId = match?.routeId;
     const route = routesById[routeId];
-    const locationKey = useRouterState().location.state?.key;
+    const router = useRouter();
+    const locationKey = router.latestLocation.state?.key;
+    // const locationKey = useRouterState().location.state?.key
+
     const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent;
     const pendingElement = PendingComponent ? /*#__PURE__*/React__namespace.createElement(PendingComponent, {
       useMatch: route.useMatch,
@@ -1147,9 +1150,10 @@
     });
     const [preState, setState] = React__namespace.useState(() => router.state);
     const [isTransitioning, startReactTransition] = React__namespace.useTransition();
+    const isAnyTransitioning = isTransitioning || preState.matches.some(d => d.status === 'pending');
     const state = React__namespace.useMemo(() => ({
       ...preState,
-      status: isTransitioning ? 'pending' : 'idle',
+      status: isAnyTransitioning ? 'pending' : 'idle',
       location: isTransitioning ? router.latestLocation : preState.location,
       pendingMatches: router.pendingMatches
     }), [preState, isTransitioning]);
@@ -1264,7 +1268,7 @@
       promise.__deferredState = state;
     }
     if (state.status === 'pending') {
-      throw promise;
+      throw new Promise(r => setTimeout(r, 1)).then(() => promise);
     }
     if (state.status === 'error') {
       throw state.error;
@@ -2230,6 +2234,7 @@
             // forcefully show the pending component
             if (pendingPromise) {
               pendingPromise.then(() => {
+                if (latestPromise = checkLatest()) return;
                 didShowPending = true;
                 matches[index] = match = {
                   ...match,
@@ -2249,6 +2254,7 @@
               if (didShowPending && pendingMinMs) {
                 await new Promise(r => setTimeout(r, pendingMinMs));
               }
+              if (latestPromise = checkLatest()) return await latestPromise;
               matches[index] = match = {
                 ...match,
                 error: undefined,
@@ -2317,7 +2323,7 @@
         // Ingest the new matches
         this.setState(s => ({
           ...s,
-          status: 'pending',
+          // status: 'pending',
           location: next,
           matches
         }));
@@ -2628,31 +2634,26 @@
   const windowKey = 'window';
   const delimiter = '___';
   let weakScrolledElements = new WeakSet();
-  let cache;
   const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
+  let cache = sessionsStorage ? (() => {
+    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));
+      }
+    };
+  })() : undefined;
   const defaultGetKey = location => location.state.key;
   function useScrollRestoration(options) {
     const router = 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;
@@ -2662,7 +2663,17 @@
       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);
+        let elementSelector = '';
+        if (event.target === document || event.target === window) {
+          elementSelector = windowKey;
+        } else {
+          const attrId = event.target.getAttribute('data-scroll-restoration-id');
+          if (attrId) {
+            elementSelector = `[data-scroll-restoration-id="${attrId}"]`;
+          } else {
+            elementSelector = getCssSelector(event.target);
+          }
+        }
         if (!cache.state.next[elementSelector]) {
           cache.set(c => ({
             ...c,
@@ -2676,15 +2687,6 @@
           }));
         }
       };
-      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);
       }
@@ -2764,6 +2766,32 @@
     useScrollRestoration(props);
     return null;
   }
+  function useElementScrollRestoration(options) {
+    const router = useRouter();
+    const getKey = options?.getKey || defaultGetKey;
+    let elementSelector = '';
+    if (options.id) {
+      elementSelector = `[data-scroll-restoration-id="${options.id}"]`;
+    } else {
+      const element = options.getElement?.();
+      if (!element) {
+        return;
+      }
+      elementSelector = getCssSelector(element);
+    }
+    const restoreKey = getKey(router.latestLocation);
+    const cacheKey = [restoreKey, elementSelector].join(delimiter);
+    return cache.state.cached[cacheKey];
+  }
+  function 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();
+  }
 
   function useBlocker(message, condition = true) {
     const {
@@ -2889,6 +2917,7 @@
   exports.typedNavigate = typedNavigate;
   exports.useAwaited = useAwaited;
   exports.useBlocker = useBlocker;
+  exports.useElementScrollRestoration = useElementScrollRestoration;
   exports.useLayoutEffect = useLayoutEffect$1;
   exports.useLinkProps = useLinkProps;
   exports.useLoaderData = useLoaderData;