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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.230",
+  "version": "0.0.1-beta.231",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -42,7 +42,7 @@
     "@babel/runtime": "^7.16.7",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.230"
+    "@tanstack/history": "0.0.1-beta.231"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -94,7 +94,9 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
   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) as any

package/src/RouterProvider.tsx

@@ -109,11 +109,13 @@ export function RouterProvider<
 
   const [preState, setState] = React.useState(() => router.state)
   const [isTransitioning, startReactTransition] = React.useTransition()
+  const isAnyTransitioning =
+    isTransitioning || preState.matches.some((d) => d.status === 'pending')
 
   const state = React.useMemo<RouterState<TRouteTree>>(
     () => ({
       ...preState,
-      status: isTransitioning ? 'pending' : 'idle',
+      status: isAnyTransitioning ? 'pending' : 'idle',
       location: isTransitioning ? router.latestLocation : preState.location,
       pendingMatches: router.pendingMatches,
     }),

package/src/awaited.tsx

@@ -18,7 +18,7 @@ export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
   }
 
   if (state.status === 'pending') {
-    throw promise
+    throw new Promise((r) => setTimeout(r, 1)).then(() => promise)
   }
 
   if (state.status === 'error') {

package/src/router.ts

@@ -1168,6 +1168,8 @@ export class Router<
             // forcefully show the pending component
             if (pendingPromise) {
               pendingPromise.then(() => {
+                if ((latestPromise = checkLatest())) return
+
                 didShowPending = true
                 matches[index] = match = {
                   ...match,
@@ -1195,6 +1197,8 @@ export class Router<
                 await new Promise((r) => setTimeout(r, pendingMinMs))
               }
 
+              if ((latestPromise = checkLatest())) return await latestPromise
+
               matches[index] = match = {
                 ...match,
                 error: undefined,
@@ -1279,7 +1283,7 @@ export class Router<
       // Ingest the new matches
       this.setState((s) => ({
         ...s,
-        status: 'pending',
+        // status: 'pending',
         location: next,
         matches,
       }))

package/src/scroll-restoration.tsx

@@ -23,10 +23,26 @@ type Cache = {
   set: (updater: NonNullableUpdater<CacheState>) => void
 }
 
-let cache: Cache
-
 const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage
 
+let cache: Cache = sessionsStorage
+  ? (() => {
+      const storageKey = 'tsr-scroll-restoration-v2'
+
+      const state: CacheState = 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 as any)
+
 export type ScrollRestorationOptions = {
   getKey?: (location: ParsedLocation) => string
 }
@@ -39,29 +55,6 @@ export function useScrollRestoration(options?: ScrollRestorationOptions) {
   useLayoutEffect(() => {
     const getKey = options?.getKey || defaultGetKey
 
-    if (sessionsStorage) {
-      if (!cache) {
-        cache = (() => {
-          const storageKey = 'tsr-scroll-restoration-v2'
-
-          const state: CacheState = 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'
@@ -71,10 +64,21 @@ export function useScrollRestoration(options?: ScrollRestorationOptions) {
       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 as Element).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) => ({
@@ -90,20 +94,6 @@ export function useScrollRestoration(options?: ScrollRestorationOptions) {
       }
     }
 
-    const getCssSelector = (el: any): string => {
-      let path = [],
-        parent
-      while ((parent = el.parentNode)) {
-        path.unshift(
-          `${el.tagName}:nth-child(${
-            ([].indexOf as any).call(parent.children, el) + 1
-          })`,
-        )
-        el = parent
-      }
-      return `${path.join(' > ')}`.toLowerCase()
-    }
-
     if (typeof document !== 'undefined') {
       document.addEventListener('scroll', onScroll, true)
     }
@@ -190,3 +180,51 @@ export function ScrollRestoration(props: ScrollRestorationOptions) {
   useScrollRestoration(props)
   return null
 }
+
+export function useElementScrollRestoration(
+  options: (
+    | {
+        id: string
+        getElement?: () => Element | undefined | null
+      }
+    | {
+        id?: string
+        getElement: () => Element | undefined | null
+      }
+  ) & {
+    getKey?: (location: ParsedLocation) => string
+  },
+) {
+  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: any): string {
+  let path = [],
+    parent
+  while ((parent = el.parentNode)) {
+    path.unshift(
+      `${el.tagName}:nth-child(${
+        ([].indexOf as any).call(parent.children, el) + 1
+      })`,
+    )
+    el = parent
+  }
+  return `${path.join(' > ')}`.toLowerCase()
+}