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

package/build/umd/index.development.js

@@ -208,7 +208,7 @@
   function createHistory(opts) {
     let location = opts.getLocation();
     let unsub = () => {};
-    let listeners = new Set();
+    let subscribers = new Set();
     let blockers = [];
     let queue = [];
     const tryFlush = () => {
@@ -222,7 +222,7 @@
       while (queue.length) {
         queue.shift()?.();
       }
-      if (!opts.listener) {
+      if (!opts.subscriber) {
         onUpdate();
       }
     };
@@ -232,20 +232,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();
           }
         };
@@ -298,7 +298,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;
@@ -353,7 +353,7 @@
     const getLocation = () => parseLocation(entries[index], currentState);
     return createHistory({
       getLocation,
-      listener: false,
+      subscriber: false,
       pushState: (path, state) => {
         currentState = {
           ...state,
@@ -928,6 +928,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()));
     };
@@ -958,7 +976,7 @@
           resolvedLocation: parsedLocation,
           location: parsedLocation
         }));
-        this.#unsubHistory = this.history.listen(() => {
+        this.#unsubHistory = this.history.subscribe(() => {
           this.safeLoad({
             next: this.#parseLocation(this.state.location)
           });
@@ -1000,6 +1018,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;
@@ -1009,6 +1029,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
@@ -1043,7 +1069,6 @@
           if (latestPromise = checkLatest()) {
             return latestPromise;
           }
-          const prevLocation = this.state.resolvedLocation;
           this.__store.setState(s => ({
             ...s,
             status: 'idle',
@@ -1051,9 +1076,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
@@ -1303,14 +1331,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)) {
@@ -1325,10 +1353,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 {
@@ -1337,7 +1365,7 @@
               preload: !!opts?.preload
             });
           } catch (err) {
-            handleError(err, route.options.onBeforeLoadError);
+            handleError(err, 'BEFORE_LOAD');
             didError = true;
           }
 
@@ -1395,28 +1423,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()
@@ -1973,6 +1991,140 @@
     };
   }
 
+  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);
+      }
+    }
+  }
+
+  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  function useScrollRestoration(options) {
+    const router = useRouter();
+    useLayoutEffect(() => {
+      return watchScrollPositions(router, options);
+    }, []);
+    useLayoutEffect(() => {
+      restoreScrollPositions(router, options);
+    });
+  }
+  function ScrollRestoration(props) {
+    useScrollRestoration(props);
+    return null;
+  }
+
   Route.__onInit = route => {
     Object.assign(route, {
       useMatch: (opts = {}) => {
@@ -2551,6 +2703,7 @@
   exports.Router = Router;
   exports.RouterContext = RouterContext;
   exports.RouterProvider = RouterProvider;
+  exports.ScrollRestoration = ScrollRestoration;
   exports.SearchParamError = SearchParamError;
   exports.cleanPath = cleanPath;
   exports.componentTypes = componentTypes;
@@ -2580,6 +2733,7 @@
   exports.redirect = redirect;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;
+  exports.restoreScrollPositions = restoreScrollPositions;
   exports.rootRouteId = rootRouteId;
   exports.routerContext = routerContext;
   exports.shallow = shallow;
@@ -2602,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 });