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

package/build/types/index.d.ts

@@ -14,7 +14,7 @@ import { Store } from '@tanstack/react-store';
 
 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;
@@ -201,7 +201,6 @@ interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends Record<
         route: AnyRoute;
         router: AnyRouter;
     }) => void;
-    onRouteChange?: () => void;
     context?: TRouteTree['types']['routerContext'];
     Wrap?: React.ComponentType<{
         children: React.ReactNode;
@@ -222,7 +221,7 @@ interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
     resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>;
     lastUpdated: number;
 }
-type ListenerFn = () => void;
+type ListenerFn<TEvent extends RouterEvent> = (event: TEvent) => void;
 interface BuildNextOptions {
     to?: string | number | null;
     params?: true | Updater<unknown>;
@@ -254,6 +253,25 @@ interface DehydratedRouter {
 }
 type RouterConstructorOptions<TRouteTree extends AnyRoute, TDehydrated extends Record<string, any>> = Omit<RouterOptions<TRouteTree, TDehydrated>, 'context'> & RouterContextOptions<TRouteTree>;
 declare const componentTypes: readonly ["component", "errorComponent", "pendingComponent"];
+type RouterEvents = {
+    onBeforeLoad: {
+        type: 'onBeforeLoad';
+        from: ParsedLocation;
+        to: ParsedLocation;
+        pathChanged: boolean;
+    };
+    onLoad: {
+        type: 'onLoad';
+        from: ParsedLocation;
+        to: ParsedLocation;
+        pathChanged: boolean;
+    };
+};
+type RouterEvent = RouterEvents[keyof RouterEvents];
+type RouterListener<TRouterEvent extends RouterEvent> = {
+    eventType: TRouterEvent['type'];
+    fn: ListenerFn<TRouterEvent>;
+};
 declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated extends Record<string, any> = Record<string, any>> {
     #private;
     types: {
@@ -273,6 +291,8 @@ declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated extends
     state: RouterState<TRouteTree>;
     dehydratedData?: TDehydrated;
     constructor(options: RouterConstructorOptions<TRouteTree, TDehydrated>);
+    subscribers: Set<RouterListener<RouterEvent>>;
+    subscribe: <TType extends keyof RouterEvents>(eventType: TType, fn: ListenerFn<RouterEvents[TType]>) => () => void;
     reset: () => void;
     mount: () => void;
     update: (opts?: RouterOptions<any, any>) => this;
@@ -437,10 +457,6 @@ type UpdatableRouteOptions<TLoader, TSearchSchema extends AnySearchSchema, TFull
     maxAge?: number;
     gcMaxAge?: number;
     beforeLoad?: (opts: LoaderContext<TSearchSchema, TFullSearchSchema, TAllParams, NoInfer<TRouteContext>, TContext>) => Promise<void> | void;
-    onBeforeLoadError?: (err: any) => void;
-    onValidateSearchError?: (err: any) => void;
-    onParseParamsError?: (err: any) => void;
-    onLoadError?: (err: any) => void;
     onError?: (err: any) => void;
     onLoaded?: (matchContext: {
         params: TAllParams;
@@ -615,10 +631,6 @@ declare class FileRoute<TFilePath extends keyof FileRoutesByPath, TParentRoute e
         maxAge?: number | undefined;
         gcMaxAge?: number | undefined;
         beforeLoad?: ((opts: LoaderContext<TSearchSchema, TFullSearchSchema, TAllParams, NoInfer<TRouteContext>, TContext>) => void | Promise<void>) | undefined;
-        onBeforeLoadError?: ((err: any) => void) | undefined;
-        onValidateSearchError?: ((err: any) => void) | undefined;
-        onParseParamsError?: ((err: any) => void) | undefined;
-        onLoadError?: ((err: any) => void) | undefined;
         onError?: ((err: any) => void) | undefined;
         onLoaded?: ((matchContext: {
             params: TAllParams;
@@ -743,4 +755,10 @@ declare const defaultStringifySearch: (search: Record<string, any>) => string;
 declare function parseSearchWith(parser: (str: string) => any): (searchStr: string) => AnySearchSchema;
 declare function stringifySearchWith(stringify: (search: any) => string, parser?: (str: string) => any): (search: Record<string, any>) => string;
 
-export { ActiveOptions, AllParams, AnyContext, AnyPathParams, AnyRedirect, AnyRootRoute, AnyRoute, AnyRouteMatch, AnyRouteProps, AnyRouter, AnySearchSchema, BaseRouteOptions, BuildNextOptions, CheckId, CheckIdError, CheckPath, CheckPathError, CheckRelativePath, CleanPath, ComponentFromRoute, ComponentPropsFromRoute, DeepAwaited, DefinedPathParamWarning, DehydratedRouter, DehydratedRouterState, Expand, FileRoute, FileRoutePath, FileRoutesByPath, FromLocation, FullSearchSchema, GetKeyFn, HydrationCtx, InferFullSearchSchema, IsAny, IsAnyBoolean, IsKnown, Join, Last, LinkInfo, LinkOptions, ListenerFn, LoaderContext, LoaderFn, LocationState, MatchLocation, MatchRouteOptions, MergeParamsFromParent, MergeUnion, MetaOptions, NavigateOptions, NoInfer, ParamsFallback, ParentParams, ParseParamsFn, ParseParamsObj, ParseParamsOption, ParsePathParams, ParseRoute, ParseRouteChildren, ParsedLocation, ParsedPath, PathParamError, PathParamMask, PathParamOptions, PickAsPartial, PickAsRequired, PickExclude, PickExtra, PickExtract, PickRequired, PickUnsafe, PreloadableObj, Redirect, Register, RegisterRouteComponent, RegisterRouteErrorComponent, RegisteredRouteComponent, RegisteredRouteErrorComponent, RegisteredRouter, RelativeToPathAutoComplete, RemoveUnderScores, ResolveFilePath, ResolveFullPath, ResolveFullSearchSchema, ResolveId, ResolveRelativePath, RootRoute, RootRouteId, Route, RouteById, RouteByPath, RouteConstraints, RouteContext, RouteIds, RouteLoaderFromRoute, RouteMatch, RouteMeta, RouteOptions, RoutePathOptions, RoutePathOptionsIntersection, RoutePaths, RouteProps, Router, RouterConstructorOptions, RouterContext, RouterContextOptions, RouterHistory, RouterLocation, RouterOptions, RouterState, RoutesById, RoutesByPath, SearchFilter, SearchParamError, SearchParamOptions, SearchParser, SearchSchemaValidator, SearchSchemaValidatorFn, SearchSchemaValidatorObj, SearchSerializer, Segment, Split, StreamedPromise, Timeout, ToIdOption, ToOptions, ToPathOption, Trim, TrimLeft, TrimPath, TrimPathLeft, TrimPathRight, TrimRight, UnionToIntersection, UnloaderFn, UpdatableRouteOptions, Updater, UseLoaderResult, UseLoaderResultPromise, ValueKeys, Values, cleanPath, componentTypes, createBrowserHistory, createHashHistory, createMemoryHistory, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, isPlainObject, isRedirect, joinPaths, last, lazyFn, matchByPath, matchPathname, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, stringifySearchWith, trimPath, trimPathLeft, trimPathRight };
+type ScrollRestorationOptions = {
+    getKey?: (location: ParsedLocation) => string;
+};
+declare function watchScrollPositions(router: AnyRouter, opts?: ScrollRestorationOptions): () => void;
+declare function restoreScrollPositions(router: AnyRouter, opts?: ScrollRestorationOptions): void;
+
+export { ActiveOptions, AllParams, AnyContext, AnyPathParams, AnyRedirect, AnyRootRoute, AnyRoute, AnyRouteMatch, AnyRouteProps, AnyRouter, AnySearchSchema, BaseRouteOptions, BuildNextOptions, CheckId, CheckIdError, CheckPath, CheckPathError, CheckRelativePath, CleanPath, ComponentFromRoute, ComponentPropsFromRoute, DeepAwaited, DefinedPathParamWarning, DehydratedRouter, DehydratedRouterState, Expand, FileRoute, FileRoutePath, FileRoutesByPath, FromLocation, FullSearchSchema, GetKeyFn, HydrationCtx, InferFullSearchSchema, IsAny, IsAnyBoolean, IsKnown, Join, Last, LinkInfo, LinkOptions, ListenerFn, LoaderContext, LoaderFn, LocationState, MatchLocation, MatchRouteOptions, MergeParamsFromParent, MergeUnion, MetaOptions, NavigateOptions, NoInfer, ParamsFallback, ParentParams, ParseParamsFn, ParseParamsObj, ParseParamsOption, ParsePathParams, ParseRoute, ParseRouteChildren, ParsedLocation, ParsedPath, PathParamError, PathParamMask, PathParamOptions, PickAsPartial, PickAsRequired, PickExclude, PickExtra, PickExtract, PickRequired, PickUnsafe, PreloadableObj, Redirect, Register, RegisterRouteComponent, RegisterRouteErrorComponent, RegisteredRouteComponent, RegisteredRouteErrorComponent, RegisteredRouter, RelativeToPathAutoComplete, RemoveUnderScores, ResolveFilePath, ResolveFullPath, ResolveFullSearchSchema, ResolveId, ResolveRelativePath, RootRoute, RootRouteId, Route, RouteById, RouteByPath, RouteConstraints, RouteContext, RouteIds, RouteLoaderFromRoute, RouteMatch, RouteMeta, RouteOptions, RoutePathOptions, RoutePathOptionsIntersection, RoutePaths, RouteProps, Router, RouterConstructorOptions, RouterContext, RouterContextOptions, RouterEvent, RouterEvents, RouterHistory, RouterListener, RouterLocation, RouterOptions, RouterState, RoutesById, RoutesByPath, ScrollRestorationOptions, SearchFilter, SearchParamError, SearchParamOptions, SearchParser, SearchSchemaValidator, SearchSchemaValidatorFn, SearchSchemaValidatorObj, SearchSerializer, Segment, Split, StreamedPromise, Timeout, ToIdOption, ToOptions, ToPathOption, Trim, TrimLeft, TrimPath, TrimPathLeft, TrimPathRight, TrimRight, UnionToIntersection, UnloaderFn, UpdatableRouteOptions, Updater, UseLoaderResult, UseLoaderResultPromise, ValueKeys, Values, cleanPath, componentTypes, createBrowserHistory, createHashHistory, createMemoryHistory, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, isPlainObject, isRedirect, joinPaths, last, lazyFn, matchByPath, matchPathname, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, restoreScrollPositions, rootRouteId, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, watchScrollPositions };

package/build/umd/index.development.js

@@ -62,7 +62,7 @@
     function createHistory(opts) {
       let location = opts.getLocation();
       let unsub = () => {};
-      let listeners = new Set();
+      let subscribers = new Set();
       let blockers = [];
       let queue = [];
       const tryFlush = () => {
@@ -76,7 +76,7 @@
         while (queue.length) {
           queue.shift()?.();
         }
-        if (!opts.listener) {
+        if (!opts.subscriber) {
           onUpdate();
         }
       };
@@ -86,20 +86,20 @@
       };
       const onUpdate = () => {
         location = opts.getLocation();
-        listeners.forEach(listener => listener());
+        subscribers.forEach(subscriber => subscriber());
       };
       return {
         get location() {
           return location;
         },
-        listen: cb => {
-          if (listeners.size === 0) {
-            unsub = typeof opts.listener === 'function' ? opts.listener(onUpdate) : () => {};
+        subscribe: cb => {
+          if (subscribers.size === 0) {
+            unsub = 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();
             }
           };
@@ -152,7 +152,7 @@
       const getLocation = () => parseLocation(getHref(), history.state);
       return createHistory({
         getLocation,
-        listener: onUpdate => {
+        subscriber: onUpdate => {
           window.addEventListener(pushStateEvent, onUpdate);
           window.addEventListener(popStateEvent, onUpdate);
           var pushState = window.history.pushState;
@@ -207,7 +207,7 @@
       const getLocation = () => parseLocation(entries[index], currentState);
       return createHistory({
         getLocation,
-        listener: false,
+        subscriber: false,
         pushState: (path, state) => {
           currentState = {
             ...state,
@@ -848,6 +848,24 @@
           });
         }
       }
+      subscribers = new Set();
+      subscribe = (eventType, fn) => {
+        const listener = {
+          eventType,
+          fn
+        };
+        this.subscribers.add(listener);
+        return () => {
+          this.subscribers.delete(listener);
+        };
+      };
+      #emit = routerEvent => {
+        this.subscribers.forEach(listener => {
+          if (listener.eventType === routerEvent.type) {
+            listener.fn(routerEvent);
+          }
+        });
+      };
       reset = () => {
         this.__store.setState(s => Object.assign(s, getInitialRouterState()));
       };
@@ -878,7 +896,7 @@
             resolvedLocation: parsedLocation,
             location: parsedLocation
           }));
-          this.#unsubHistory = this.history.listen(() => {
+          this.#unsubHistory = this.history.subscribe(() => {
             this.safeLoad({
               next: this.#parseLocation(this.state.location)
             });
@@ -920,6 +938,8 @@
       latestLoadPromise = Promise.resolve();
       load = async opts => {
         const promise = new Promise(async (resolve, reject) => {
+          const prevLocation = this.state.resolvedLocation;
+          const pathDidChange = !!(opts?.next && prevLocation.href !== opts.next.href);
           let latestPromise;
           const checkLatest = () => {
             return this.latestLoadPromise !== promise ? this.latestLoadPromise : undefined;
@@ -929,6 +949,12 @@
           // this.cancelMatches()
 
           let pendingMatches;
+          this.#emit({
+            type: 'onBeforeLoad',
+            from: prevLocation,
+            to: opts?.next ?? this.state.location,
+            pathChanged: pathDidChange
+          });
           this.__store.batch(() => {
             if (opts?.next) {
               // Ingest the new location
@@ -963,7 +989,6 @@
             if (latestPromise = checkLatest()) {
               return latestPromise;
             }
-            const prevLocation = this.state.resolvedLocation;
             this.__store.setState(s => ({
               ...s,
               status: 'idle',
@@ -971,9 +996,12 @@
               matchIds: s.pendingMatchIds,
               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) {
             // Only apply the latest transition
@@ -1223,14 +1251,14 @@
         try {
           for (const [index, match] of resolvedMatches.entries()) {
             const route = this.getRoute(match.routeId);
-            const handleError = (err, handler) => {
+            const handleError = (err, code) => {
+              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;
                 if (isRedirect(errorHandlerErr)) {
@@ -1245,10 +1273,10 @@
               }));
             };
             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;
             try {
@@ -1257,7 +1285,7 @@
                 preload: !!opts?.preload
               });
             } catch (err) {
-              handleError(err, route.options.onBeforeLoadError);
+              handleError(err, 'BEFORE_LOAD');
               didError = true;
             }
 
@@ -1315,28 +1343,18 @@
                 const [_, loader] = await Promise.all([componentsPromise, loaderPromise]);
                 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 ((!route.options.onLoadError || latestError !== loaderError) && route.options.onError) {
-                  try {
-                    route.options.onError(latestError);
-                  } catch (onErrorError) {
-                    if (handleIfRedirect(onErrorError)) return;
-                  }
+                if (handleIfRedirect(error)) 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()
@@ -1893,6 +1911,125 @@
       };
     }
 
+    const windowKey = 'window';
+    const delimiter = '___';
+    let weakScrolledElementsByRestoreKey = {};
+    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 {
+        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 = () => {
+        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) {
+          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);
+        }
+      }
+    }
+
     exports.FileRoute = FileRoute;
     exports.PathParamError = PathParamError;
     exports.RootRoute = RootRoute;
@@ -1926,12 +2063,14 @@
     exports.redirect = redirect;
     exports.replaceEqualDeep = replaceEqualDeep;
     exports.resolvePath = resolvePath;
+    exports.restoreScrollPositions = restoreScrollPositions;
     exports.rootRouteId = rootRouteId;
     exports.stringifySearchWith = stringifySearchWith;
     exports.trimPath = trimPath;
     exports.trimPathLeft = trimPathLeft;
     exports.trimPathRight = trimPathRight;
     exports.warning = warning;
+    exports.watchScrollPositions = watchScrollPositions;
 
     Object.defineProperty(exports, '__esModule', { value: true });