@tanstack/router-core 0.0.1-beta.161 → 0.0.1-beta.163

package/build/esm/index.js

@@ -33,7 +33,7 @@ const stopBlocking = () => {
 function createHistory(opts) {
   let location = opts.getLocation();
   let unsub = () => {};
-  let listeners = new Set();
+  let subscribers = new Set();
   let blockers = [];
   let queue = [];
   const tryFlush = () => {
@@ -47,7 +47,7 @@ function createHistory(opts) {
     while (queue.length) {
       queue.shift()?.();
     }
-    if (!opts.listener) {
+    if (!opts.subscriber) {
       onUpdate();
     }
   };
@@ -57,20 +57,20 @@ function createHistory(opts) {
   };
   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();
         }
       };
@@ -123,7 +123,7 @@ function createBrowserHistory(opts) {
   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;
@@ -178,7 +178,7 @@ function createMemoryHistory(opts = {
   const getLocation = () => parseLocation(entries[index], currentState);
   return createHistory({
     getLocation,
-    listener: false,
+    subscriber: false,
     pushState: (path, state) => {
       currentState = {
         ...state,
@@ -753,6 +753,24 @@ class Router {
       });
     }
   }
+  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()));
   };
@@ -783,7 +801,7 @@ class Router {
         resolvedLocation: parsedLocation,
         location: parsedLocation
       }));
-      this.#unsubHistory = this.history.listen(() => {
+      this.#unsubHistory = this.history.subscribe(() => {
         this.safeLoad({
           next: this.#parseLocation(this.state.location)
         });
@@ -825,6 +843,8 @@ class Router {
   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;
@@ -834,6 +854,12 @@ class Router {
       // 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
@@ -868,7 +894,6 @@ class Router {
         if (latestPromise = checkLatest()) {
           return latestPromise;
         }
-        const prevLocation = this.state.resolvedLocation;
         this.__store.setState(s => ({
           ...s,
           status: 'idle',
@@ -876,9 +901,12 @@ class Router {
           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
@@ -1128,14 +1156,14 @@ class Router {
     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)) {
@@ -1150,10 +1178,10 @@ 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;
         try {
@@ -1162,7 +1190,7 @@ class Router {
             preload: !!opts?.preload
           });
         } catch (err) {
-          handleError(err, route.options.onBeforeLoadError);
+          handleError(err, 'BEFORE_LOAD');
           didError = true;
         }
 
@@ -1220,28 +1248,18 @@ class Router {
             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()