@tanstack/react-router 0.0.1-beta.163 → 0.0.1-beta.165

package/build/stats-react.json

@@ -7,7 +7,7 @@
         "name": "index.production.js",
         "children": [
           {
-            "uid": "830a-169",
+            "uid": "06a4-173",
             "name": "\u0000rollupPluginBabelHelpers.js"
           },
           {
@@ -15,25 +15,25 @@
             "children": [
               {
                 "name": "store/build/esm/index.js",
-                "uid": "830a-171"
+                "uid": "06a4-175"
               },
               {
                 "name": "react-store/build/esm/index.js",
-                "uid": "830a-173"
+                "uid": "06a4-177"
               },
               {
                 "name": "router-core/build/esm/index.js",
-                "uid": "830a-179"
+                "uid": "06a4-183"
               },
               {
                 "name": "react-router/src",
                 "children": [
                   {
-                    "uid": "830a-181",
+                    "uid": "06a4-185",
                     "name": "scroll-restoration.tsx"
                   },
                   {
-                    "uid": "830a-183",
+                    "uid": "06a4-187",
                     "name": "index.tsx"
                   }
                 ]
@@ -45,11 +45,11 @@
             "children": [
               {
                 "name": "tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
-                "uid": "830a-175"
+                "uid": "06a4-179"
               },
               {
                 "name": "tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
-                "uid": "830a-177"
+                "uid": "06a4-181"
               }
             ]
           }
@@ -59,229 +59,235 @@
     "isRoot": true
   },
   "nodeParts": {
-    "830a-169": {
+    "06a4-173": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "830a-168"
+      "mainUid": "06a4-172"
     },
-    "830a-171": {
+    "06a4-175": {
       "renderedLength": 1843,
       "gzipLength": 644,
       "brotliLength": 0,
-      "mainUid": "830a-170"
+      "mainUid": "06a4-174"
     },
-    "830a-173": {
+    "06a4-177": {
       "renderedLength": 1006,
       "gzipLength": 479,
       "brotliLength": 0,
-      "mainUid": "830a-172"
+      "mainUid": "06a4-176"
     },
-    "830a-175": {
+    "06a4-179": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "830a-174"
+      "mainUid": "06a4-178"
     },
-    "830a-177": {
+    "06a4-181": {
       "renderedLength": 44,
       "gzipLength": 62,
       "brotliLength": 0,
-      "mainUid": "830a-176"
+      "mainUid": "06a4-180"
     },
-    "830a-179": {
-      "renderedLength": 57185,
-      "gzipLength": 13483,
+    "06a4-183": {
+      "renderedLength": 61314,
+      "gzipLength": 14436,
       "brotliLength": 0,
-      "mainUid": "830a-178"
+      "mainUid": "06a4-182"
     },
-    "830a-181": {
-      "renderedLength": 4385,
-      "gzipLength": 1261,
+    "06a4-185": {
+      "renderedLength": 466,
+      "gzipLength": 228,
       "brotliLength": 0,
-      "mainUid": "830a-180"
+      "mainUid": "06a4-184"
     },
-    "830a-183": {
+    "06a4-187": {
       "renderedLength": 17058,
       "gzipLength": 3802,
       "brotliLength": 0,
-      "mainUid": "830a-182"
+      "mainUid": "06a4-186"
     }
   },
   "nodeMetas": {
-    "830a-168": {
+    "06a4-172": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "830a-169"
+        "index.production.js": "06a4-173"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "830a-182"
+          "uid": "06a4-186"
         }
       ]
     },
-    "830a-170": {
+    "06a4-174": {
       "id": "/packages/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "830a-171"
+        "index.production.js": "06a4-175"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "830a-172"
+          "uid": "06a4-176"
         }
       ]
     },
-    "830a-172": {
+    "06a4-176": {
       "id": "/packages/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "830a-173"
+        "index.production.js": "06a4-177"
       },
       "imported": [
         {
-          "uid": "830a-185"
+          "uid": "06a4-189"
         },
         {
-          "uid": "830a-170"
+          "uid": "06a4-174"
         }
       ],
       "importedBy": [
         {
-          "uid": "830a-182"
+          "uid": "06a4-186"
         },
         {
-          "uid": "830a-178"
+          "uid": "06a4-182"
         }
       ]
     },
-    "830a-174": {
+    "06a4-178": {
       "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
       "moduleParts": {
-        "index.production.js": "830a-175"
+        "index.production.js": "06a4-179"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "830a-182"
+          "uid": "06a4-186"
         },
         {
-          "uid": "830a-178"
+          "uid": "06a4-182"
         }
       ]
     },
-    "830a-176": {
+    "06a4-180": {
       "id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
       "moduleParts": {
-        "index.production.js": "830a-177"
+        "index.production.js": "06a4-181"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "830a-182"
+          "uid": "06a4-186"
         },
         {
-          "uid": "830a-178"
+          "uid": "06a4-182"
         }
       ]
     },
-    "830a-178": {
+    "06a4-182": {
       "id": "/packages/router-core/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "830a-179"
+        "index.production.js": "06a4-183"
       },
       "imported": [
         {
-          "uid": "830a-174"
+          "uid": "06a4-178"
         },
         {
-          "uid": "830a-176"
+          "uid": "06a4-180"
         },
         {
-          "uid": "830a-172"
+          "uid": "06a4-176"
         }
       ],
       "importedBy": [
         {
-          "uid": "830a-182"
+          "uid": "06a4-186"
+        },
+        {
+          "uid": "06a4-184"
         }
       ]
     },
-    "830a-180": {
+    "06a4-184": {
       "id": "/packages/react-router/src/scroll-restoration.tsx",
       "moduleParts": {
-        "index.production.js": "830a-181"
+        "index.production.js": "06a4-185"
       },
       "imported": [
         {
-          "uid": "830a-184"
+          "uid": "06a4-188"
+        },
+        {
+          "uid": "06a4-182"
         },
         {
-          "uid": "830a-182"
+          "uid": "06a4-186"
         }
       ],
       "importedBy": [
         {
-          "uid": "830a-182"
+          "uid": "06a4-186"
         }
       ]
     },
-    "830a-182": {
+    "06a4-186": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "830a-183"
+        "index.production.js": "06a4-187"
       },
       "imported": [
         {
-          "uid": "830a-168"
+          "uid": "06a4-172"
         },
         {
-          "uid": "830a-184"
+          "uid": "06a4-188"
         },
         {
-          "uid": "830a-172"
+          "uid": "06a4-176"
         },
         {
-          "uid": "830a-174"
+          "uid": "06a4-178"
         },
         {
-          "uid": "830a-176"
+          "uid": "06a4-180"
         },
         {
-          "uid": "830a-178"
+          "uid": "06a4-182"
         },
         {
-          "uid": "830a-180"
+          "uid": "06a4-184"
         }
       ],
       "importedBy": [
         {
-          "uid": "830a-180"
+          "uid": "06a4-184"
         }
       ],
       "isEntry": true
     },
-    "830a-184": {
+    "06a4-188": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "830a-182"
+          "uid": "06a4-186"
         },
         {
-          "uid": "830a-180"
+          "uid": "06a4-184"
         }
       ],
       "isExternal": true
     },
-    "830a-185": {
+    "06a4-189": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "830a-172"
+          "uid": "06a4-176"
         }
       ],
       "isExternal": true

package/build/types/index.d.ts

@@ -9,13 +9,14 @@
  * @license MIT
  */
 import * as _tanstack_router_core from '@tanstack/router-core';
-import { RouteConstraints, AnyRoute, ResolveFullPath, ResolveId, ResolveFullSearchSchema, ParsePathParams, MergeParamsFromParent, RouteContext, AnyContext, UseLoaderResult, AnyRouteProps, RoutePaths, RegisteredRouter, LinkOptions, ToOptions, MatchRouteOptions, RouteByPath, ResolveRelativePath, NavigateOptions, RouterOptions, Router, RouteMatch, RouteIds, RouteById, ParseRoute, RoutesById, AllParams } from '@tanstack/router-core';
+import { ScrollRestorationOptions, RouteConstraints, AnyRoute, ResolveFullPath, ResolveId, ResolveFullSearchSchema, ParsePathParams, MergeParamsFromParent, RouteContext, AnyContext, UseLoaderResult, AnyRouteProps, RoutePaths, RegisteredRouter, LinkOptions, ToOptions, MatchRouteOptions, RouteByPath, ResolveRelativePath, NavigateOptions, RouterOptions, Router, RouteMatch, RouteIds, RouteById, ParseRoute, RoutesById, AllParams } from '@tanstack/router-core';
 export * from '@tanstack/router-core';
 import * as React from 'react';
 import { NoInfer } from '@tanstack/react-store';
 export { useStore } from '@tanstack/react-store';
 
-declare function ScrollRestoration(): null;
+declare function useScrollRestoration(options?: ScrollRestorationOptions): void;
+declare function ScrollRestoration(props: ScrollRestorationOptions): null;
 
 declare module '@tanstack/router-core' {
     interface RegisterRouteComponent<TProps extends Record<string, any>> {
@@ -152,4 +153,4 @@ declare function useBlocker(message: string, condition?: boolean | any): void;
 declare function Block({ message, condition, children }: PromptProps): any;
 declare function shallow<T>(objA: T, objB: T): boolean;
 
-export { AnyRouteComponent, AsyncRouteComponent, Block, ErrorComponent, Link, LinkComponent, LinkPropsOptions, MakeLinkOptions, MakeLinkPropsOptions, MakeMatchRouteOptions, MakeUseMatchRouteOptions, MatchRoute, Navigate, Outlet, PromptProps, RouteComponent, RouteErrorComponent, RouteErrorComponentProps, RouteFromIdOrRoute, RouterProps, RouterProvider, ScrollRestoration, SyncRouteComponent, lazyRouteComponent, matchIdsContext, routerContext, shallow, useBlocker, useDehydrate, useHydrate, useInjectHtml, useLinkProps, useLoader, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterContext, useRouterState, useSearch };
+export { AnyRouteComponent, AsyncRouteComponent, Block, ErrorComponent, Link, LinkComponent, LinkPropsOptions, MakeLinkOptions, MakeLinkPropsOptions, MakeMatchRouteOptions, MakeUseMatchRouteOptions, MatchRoute, Navigate, Outlet, PromptProps, RouteComponent, RouteErrorComponent, RouteErrorComponentProps, RouteFromIdOrRoute, RouterProps, RouterProvider, ScrollRestoration, SyncRouteComponent, lazyRouteComponent, matchIdsContext, routerContext, shallow, useBlocker, useDehydrate, useHydrate, useInjectHtml, useLinkProps, useLoader, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterContext, useRouterState, useScrollRestoration, useSearch };

package/build/umd/index.development.js

@@ -1991,32 +1991,101 @@
     };
   }
 
-  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   const windowKey = 'window';
   const delimiter = '___';
   let weakScrolledElementsByRestoreKey = {};
-  const cache = (() => {
-    if (typeof window === 'undefined') {
-      return {
-        set: () => {},
-        get: () => {}
-      };
+  let cache;
+  let pathDidChange = false;
+  const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
+  const defaultGetKey = location => location.key;
+  function watchScrollPositions(router, opts) {
+    const getKey = opts?.getKey || defaultGetKey;
+    if (sessionsStorage) {
+      if (!cache) {
+        cache = (() => {
+          const storageKey = 'tsr-scroll-restoration-v1';
+          const current = JSON.parse(window.sessionStorage.getItem(storageKey) || '{}');
+          return {
+            current,
+            set: (key, value) => {
+              current[key] = value;
+              window.sessionStorage.setItem(storageKey, JSON.stringify(cache));
+            }
+          };
+        })();
+      }
     }
-    const storageKey = 'tsr-scroll-restoration-v1';
-    let cache = JSON.parse(window.sessionStorage.getItem(storageKey) || '{}');
-    return {
-      current: cache,
-      set: (key, value) => {
-        cache[key] = value;
-        window.sessionStorage.setItem(storageKey, JSON.stringify(cache));
+    const {
+      history
+    } = window;
+    if (history.scrollRestoration) {
+      history.scrollRestoration = 'manual';
+    }
+    const onScroll = event => {
+      const restoreKey = getKey(router.state.resolvedLocation);
+      if (!weakScrolledElementsByRestoreKey[restoreKey]) {
+        weakScrolledElementsByRestoreKey[restoreKey] = new WeakSet();
+      }
+      const set = weakScrolledElementsByRestoreKey[restoreKey];
+      if (set.has(event.target)) return;
+      set.add(event.target);
+      const cacheKey = [restoreKey, event.target === document || event.target === window ? windowKey : getCssSelector(event.target)].join(delimiter);
+      if (!cache.current[cacheKey]) {
+        cache.set(cacheKey, {
+          scrollX: NaN,
+          scrollY: NaN
+        });
       }
     };
-  })();
-  function ScrollRestoration() {
-    const router = useRouter();
-    const getKey = location => location.key;
-    const pathDidChangeRef = React__namespace.useRef(false);
-    const restoreScrollPositions = () => {
+    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();
+    };
+    const onPathWillChange = from => {
+      const restoreKey = getKey(from);
+      for (const cacheKey in cache.current) {
+        const entry = cache.current[cacheKey];
+        const [key, elementSelector] = cacheKey.split(delimiter);
+        if (restoreKey === key) {
+          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(cacheKey, entry);
+        }
+      }
+    };
+    const onPathChange = () => {
+      pathDidChange = true;
+    };
+    if (typeof document !== 'undefined') {
+      document.addEventListener('scroll', onScroll, true);
+    }
+    const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', event => {
+      if (event.pathChanged) onPathWillChange(event.from);
+    });
+    const unsubOnLoad = router.subscribe('onLoad', event => {
+      if (event.pathChanged) onPathChange();
+    });
+    return () => {
+      document.removeEventListener('scroll', onScroll);
+      unsubOnBeforeLoad();
+      unsubOnLoad();
+    };
+  }
+  function restoreScrollPositions(router, opts) {
+    if (pathDidChange) {
+      const getKey = opts?.getKey || defaultGetKey;
+      pathDidChange = false;
       const restoreKey = getKey(router.state.location);
       let windowRestored = false;
       for (const cacheKey in cache.current) {
@@ -2038,81 +2107,21 @@
       if (!windowRestored) {
         window.scrollTo(0, 0);
       }
-    };
+    }
+  }
+
+  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  function useScrollRestoration(options) {
+    const router = useRouter();
     useLayoutEffect(() => {
-      const {
-        history
-      } = window;
-      if (history.scrollRestoration) {
-        history.scrollRestoration = 'manual';
-      }
-      const onScroll = event => {
-        const restoreKey = getKey(router.state.resolvedLocation);
-        if (!weakScrolledElementsByRestoreKey[restoreKey]) {
-          weakScrolledElementsByRestoreKey[restoreKey] = new WeakSet();
-        }
-        const set = weakScrolledElementsByRestoreKey[restoreKey];
-        if (set.has(event.target)) return;
-        set.add(event.target);
-        const cacheKey = [restoreKey, event.target === document || event.target === window ? windowKey : getCssSelector(event.target)].join(delimiter);
-        if (!cache.current[cacheKey]) {
-          cache.set(cacheKey, {
-            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();
-      };
-      const onPathWillChange = from => {
-        const restoreKey = getKey(from);
-        for (const cacheKey in cache.current) {
-          const entry = cache.current[cacheKey];
-          const [key, elementSelector] = cacheKey.split(delimiter);
-          if (restoreKey === key) {
-            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(cacheKey, entry);
-          }
-        }
-      };
-      const onPathChange = () => {
-        pathDidChangeRef.current = true;
-      };
-      if (typeof document !== 'undefined') {
-        document.addEventListener('scroll', onScroll, true);
-      }
-      const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', event => {
-        if (event.pathChanged) onPathWillChange(event.from);
-      });
-      const unsubOnLoad = router.subscribe('onLoad', event => {
-        if (event.pathChanged) onPathChange();
-      });
-      return () => {
-        document.removeEventListener('scroll', onScroll);
-        unsubOnBeforeLoad();
-        unsubOnLoad();
-      };
+      return watchScrollPositions(router, options);
     }, []);
     useLayoutEffect(() => {
-      if (pathDidChangeRef.current) {
-        pathDidChangeRef.current = false;
-        restoreScrollPositions();
-      }
+      restoreScrollPositions(router, options);
     });
+  }
+  function ScrollRestoration(props) {
+    useScrollRestoration(props);
     return null;
   }
 
@@ -2724,6 +2733,7 @@
   exports.redirect = redirect;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;
+  exports.restoreScrollPositions = restoreScrollPositions;
   exports.rootRouteId = rootRouteId;
   exports.routerContext = routerContext;
   exports.shallow = shallow;
@@ -2746,9 +2756,11 @@
   exports.useRouter = useRouter;
   exports.useRouterContext = useRouterContext;
   exports.useRouterState = useRouterState;
+  exports.useScrollRestoration = useScrollRestoration;
   exports.useSearch = useSearch;
   exports.useStore = useStore;
   exports.warning = warning;
+  exports.watchScrollPositions = watchScrollPositions;
 
   Object.defineProperty(exports, '__esModule', { value: true });