@tanstack/router-core 0.0.1-beta.162 → 0.0.1-beta.164

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.162",
+  "version": "0.0.1-beta.164",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -43,7 +43,7 @@
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
     "@gisatcz/cross-package-react-context": "^0.2.0",
-    "@tanstack/react-store": "0.0.1-beta.162"
+    "@tanstack/react-store": "0.0.1-beta.164"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js",

package/src/history.ts

@@ -4,7 +4,7 @@
 
 export interface RouterHistory {
   location: RouterLocation
-  listen: (cb: () => void) => () => void
+  subscribe: (cb: () => void) => () => void
   push: (path: string, state?: any) => void
   replace: (path: string, state?: any) => void
   go: (index: number) => void
@@ -45,7 +45,7 @@ const stopBlocking = () => {
 
 function createHistory(opts: {
   getLocation: () => RouterLocation
-  listener: false | ((onUpdate: () => void) => () => void)
+  subscriber: false | ((onUpdate: () => void) => () => void)
   pushState: (path: string, state: any) => void
   replaceState: (path: string, state: any) => void
   go: (n: number) => void
@@ -55,7 +55,7 @@ function createHistory(opts: {
 }): RouterHistory {
   let location = opts.getLocation()
   let unsub = () => {}
-  let listeners = new Set<() => void>()
+  let subscribers = new Set<() => void>()
   let blockers: BlockerFn[] = []
   let queue: (() => void)[] = []
 
@@ -72,7 +72,7 @@ function createHistory(opts: {
       queue.shift()?.()
     }
 
-    if (!opts.listener) {
+    if (!opts.subscriber) {
       onUpdate()
     }
   }
@@ -84,25 +84,25 @@ function createHistory(opts: {
 
   const onUpdate = () => {
     location = opts.getLocation()
-    listeners.forEach((listener) => listener())
+    subscribers.forEach((subscriber) => subscriber())
   }
 
   return {
     get location() {
       return location
     },
-    listen: (cb: () => void) => {
-      if (listeners.size === 0) {
+    subscribe: (cb: () => void) => {
+      if (subscribers.size === 0) {
         unsub =
-          typeof opts.listener === 'function'
-            ? opts.listener(onUpdate)
+          typeof opts.subscriber === 'function'
+            ? opts.subscriber(onUpdate)
             : () => {}
       }
-      listeners.add(cb)
+      subscribers.add(cb)
 
       return () => {
-        listeners.delete(cb)
-        if (listeners.size === 0) {
+        subscribers.delete(cb)
+        if (subscribers.size === 0) {
           unsub()
         }
       }
@@ -166,7 +166,7 @@ export function createBrowserHistory(opts?: {
 
   return createHistory({
     getLocation,
-    listener: (onUpdate) => {
+    subscriber: (onUpdate) => {
       window.addEventListener(pushStateEvent, onUpdate)
       window.addEventListener(popStateEvent, onUpdate)
 
@@ -234,7 +234,7 @@ export function createMemoryHistory(
 
   return createHistory({
     getLocation,
-    listener: false,
+    subscriber: false,
     pushState: (path, state) => {
       currentState = {
         ...state,

package/src/index.ts

@@ -10,3 +10,4 @@ export * from './routeInfo'
 export * from './router'
 export * from './searchParams'
 export * from './utils'
+export * from './scroll-restoration'

package/src/route.ts

@@ -312,7 +312,7 @@ export type UpdatableRouteOptions<
   gcMaxAge?: number
   // This async function is called before a route is loaded.
   // If an error is thrown here, the route's loader will not be called.
-  // If thrown during a navigation, the navigation will be cancelled and the error will be passed to the `onLoadError` function.
+  // If thrown during a navigation, the navigation will be cancelled and the error will be passed to the `onError` function.
   // If thrown during a preload event, the error will be logged to the console.
   beforeLoad?: (
     opts: LoaderContext<
@@ -323,15 +323,6 @@ export type UpdatableRouteOptions<
       TContext
     >,
   ) => Promise<void> | void
-  // This function will be called if the route's loader throws an error **during an attempted navigation**.
-  // If you want to redirect due to an error, call `router.navigate()` from within this function.
-  onBeforeLoadError?: (err: any) => void
-  // This function will be called if the route's validateSearch option throws an error **during an attempted validation**.
-  // If you want to redirect due to an error, call `router.navigate()` from within this function.
-  // If you want to display the errorComponent, rethrow the error
-  onValidateSearchError?: (err: any) => void
-  onParseParamsError?: (err: any) => void
-  onLoadError?: (err: any) => void
   onError?: (err: any) => void
   // This function is called
   // when moving from an inactive state to an active one. Likewise, when moving from

package/src/router.ts

@@ -171,7 +171,6 @@ export interface RouterOptions<
   routeTree?: TRouteTree
   basepath?: string
   createRoute?: (opts: { route: AnyRoute; router: AnyRouter }) => void
-  onRouteChange?: () => void
   context?: TRouteTree['types']['routerContext']
   Wrap?: React.ComponentType<{
     children: React.ReactNode
@@ -197,7 +196,7 @@ export interface RouterState<
   lastUpdated: number
 }
 
-export type ListenerFn = () => void
+export type ListenerFn<TEvent extends RouterEvent> = (event: TEvent) => void
 
 export interface BuildNextOptions {
   to?: string | number | null
@@ -249,6 +248,28 @@ export const componentTypes = [
   'pendingComponent',
 ] as const
 
+export type RouterEvents = {
+  onBeforeLoad: {
+    type: 'onBeforeLoad'
+    from: ParsedLocation
+    to: ParsedLocation
+    pathChanged: boolean
+  }
+  onLoad: {
+    type: 'onLoad'
+    from: ParsedLocation
+    to: ParsedLocation
+    pathChanged: boolean
+  }
+}
+
+export type RouterEvent = RouterEvents[keyof RouterEvents]
+
+export type RouterListener<TRouterEvent extends RouterEvent> = {
+  eventType: TRouterEvent['type']
+  fn: ListenerFn<TRouterEvent>
+}
+
 export class Router<
   TRouteTree extends AnyRoute = AnyRoute,
   TDehydrated extends Record<string, any> = Record<string, any>,
@@ -343,6 +364,32 @@ export class Router<
     }
   }
 
+  subscribers = new Set<RouterListener<RouterEvent>>()
+
+  subscribe = <TType extends keyof RouterEvents>(
+    eventType: TType,
+    fn: ListenerFn<RouterEvents[TType]>,
+  ) => {
+    const listener: RouterListener<any> = {
+      eventType,
+      fn,
+    }
+
+    this.subscribers.add(listener)
+
+    return () => {
+      this.subscribers.delete(listener)
+    }
+  }
+
+  #emit = (routerEvent: RouterEvent) => {
+    this.subscribers.forEach((listener) => {
+      if (listener.eventType === routerEvent.type) {
+        listener.fn(routerEvent)
+      }
+    })
+  }
+
   reset = () => {
     this.__store.setState((s) => Object.assign(s, getInitialRouterState()))
   }
@@ -384,7 +431,7 @@ export class Router<
         location: parsedLocation as any,
       }))
 
-      this.#unsubHistory = this.history.listen(() => {
+      this.#unsubHistory = this.history.subscribe(() => {
         this.safeLoad({
           next: this.#parseLocation(this.state.location),
         })
@@ -435,6 +482,11 @@ export class Router<
 
   load = async (opts?: { next?: ParsedLocation; throwOnError?: boolean }) => {
     const promise = new Promise<void>(async (resolve, reject) => {
+      const prevLocation = this.state.resolvedLocation
+      const pathDidChange = !!(
+        opts?.next && prevLocation!.href !== opts.next.href
+      )
+
       let latestPromise: Promise<void> | undefined | null
 
       const checkLatest = (): undefined | Promise<void> | null => {
@@ -448,6 +500,13 @@ export class Router<
 
       let pendingMatches!: RouteMatch<any, any>[]
 
+      this.#emit({
+        type: 'onBeforeLoad',
+        from: prevLocation,
+        to: opts?.next ?? this.state.location,
+        pathChanged: pathDidChange,
+      })
+
       this.__store.batch(() => {
         if (opts?.next) {
           // Ingest the new location
@@ -489,8 +548,6 @@ export class Router<
           return latestPromise
         }
 
-        const prevLocation = this.state.resolvedLocation
-
         this.__store.setState((s) => ({
           ...s,
           status: 'idle',
@@ -499,9 +556,12 @@ export class Router<
           pendingMatchIds: [],
         }))
 
-        if (prevLocation!.href !== this.state.location.href) {
-          this.options.onRouteChange?.()
-        }
+        this.#emit({
+          type: 'onLoad',
+          from: prevLocation,
+          to: this.state.location,
+          pathChanged: pathDidChange,
+        })
 
         resolve()
       } catch (err) {
@@ -844,19 +904,16 @@ export class Router<
       for (const [index, match] of resolvedMatches.entries()) {
         const route = this.getRoute(match.routeId)
 
-        const handleError = (
-          err: any,
-          handler: undefined | ((err: any) => void),
-        ) => {
+        const handleError = (err: any, code: string) => {
+          err.routerCode = code
           firstBadMatchIndex = firstBadMatchIndex ?? index
-          handler = handler || route.options.onError
 
           if (isRedirect(err)) {
             throw err
           }
 
           try {
-            handler?.(err)
+            route.options.onError?.(err)
           } catch (errorHandlerErr) {
             err = errorHandlerErr
 
@@ -874,11 +931,11 @@ export class Router<
         }
 
         if (match.paramsError) {
-          handleError(match.paramsError, route.options.onParseParamsError)
+          handleError(match.paramsError, 'PARSE_PARAMS')
         }
 
         if (match.searchError) {
-          handleError(match.searchError, route.options.onValidateSearchError)
+          handleError(match.searchError, 'VALIDATE_SEARCH')
         }
 
         let didError = false
@@ -889,7 +946,7 @@ export class Router<
             preload: !!opts?.preload,
           })
         } catch (err) {
-          handleError(err, route.options.onBeforeLoadError)
+          handleError(err, 'BEFORE_LOAD')
           didError = true
         }
 
@@ -968,34 +1025,20 @@ export class Router<
               if ((latestPromise = checkLatest())) return await latestPromise
 
               this.setRouteMatchData(match.id, () => loader, opts)
-            } catch (loaderError) {
-              let latestError = loaderError
+            } catch (error) {
               if ((latestPromise = checkLatest())) return await latestPromise
-              if (handleIfRedirect(loaderError)) return
-
-              if (route.options.onLoadError) {
-                try {
-                  route.options.onLoadError(loaderError)
-                } catch (onLoadError) {
-                  latestError = onLoadError
-                  if (handleIfRedirect(onLoadError)) return
-                }
-              }
+              if (handleIfRedirect(error)) return
 
-              if (
-                (!route.options.onLoadError || latestError !== loaderError) &&
-                route.options.onError
-              ) {
-                try {
-                  route.options.onError(latestError)
-                } catch (onErrorError) {
-                  if (handleIfRedirect(onErrorError)) return
-                }
+              try {
+                route.options.onError?.(error)
+              } catch (onErrorError) {
+                error = onErrorError
+                if (handleIfRedirect(onErrorError)) return
               }
 
               this.setRouteMatch(match.id, (s) => ({
                 ...s,
-                error: loaderError,
+                error,
                 status: 'error',
                 isFetching: false,
                 updatedAt: Date.now(),

package/src/scroll-restoration.ts

@@ -0,0 +1,175 @@
+import { AnyRouter, ParsedLocation } from './router'
+
+const windowKey = 'window'
+const delimiter = '___'
+
+let weakScrolledElementsByRestoreKey: Record<string, WeakSet<any>> = {}
+
+type CacheValue = Record<string, { scrollX: number; scrollY: number }>
+
+type Cache = {
+  current: CacheValue
+  set: (key: string, value: any) => void
+}
+
+let cache: Cache
+
+let pathDidChange = false
+
+const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage
+
+export type ScrollRestorationOptions = {
+  getKey?: (location: ParsedLocation) => string
+}
+
+const defaultGetKey = (location: ParsedLocation) => location.key!
+
+export function watchScrollPositions(
+  router: AnyRouter,
+  opts?: ScrollRestorationOptions,
+) {
+  const getKey = opts?.getKey || defaultGetKey
+
+  if (sessionsStorage) {
+    if (!cache) {
+      cache = (() => {
+        const storageKey = 'tsr-scroll-restoration-v1'
+
+        const current: CacheValue = JSON.parse(
+          window.sessionStorage.getItem(storageKey) || '{}',
+        )
+
+        return {
+          current,
+          set: (key: string, value: any) => {
+            current[key] = value
+            window.sessionStorage.setItem(storageKey, JSON.stringify(cache))
+          },
+        }
+      })()
+    }
+  }
+
+  const { history } = window
+  if (history.scrollRestoration) {
+    history.scrollRestoration = 'manual'
+  }
+
+  const onScroll = (event: 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: 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()
+  }
+
+  const onPathWillChange = (from: ParsedLocation) => {
+    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()
+  }
+}
+
+export function restoreScrollPositions(
+  router: AnyRouter,
+  opts?: ScrollRestorationOptions,
+) {
+  if (pathDidChange) {
+    const getKey = opts?.getKey || defaultGetKey
+
+    pathDidChange = false
+
+    const restoreKey = getKey(router.state.location)
+    let windowRestored = false
+
+    for (const cacheKey in cache.current) {
+      const entry = cache.current[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)
+    }
+  }
+}