@tanstack/react-router 0.0.1-beta.194 → 0.0.1-beta.195

package/build/umd/index.development.js

@@ -238,13 +238,13 @@
       push: (path, state) => {
         assignKey(state);
         queueTask(() => {
-          opts.pushState(path, state);
+          opts.pushState(path, state, onUpdate);
         });
       },
       replace: (path, state) => {
         assignKey(state);
         queueTask(() => {
-          opts.replaceState(path, state);
+          opts.replaceState(path, state, onUpdate);
         });
       },
       go: index => {
@@ -276,7 +276,8 @@
             stopBlocking();
           }
         };
-      }
+      },
+      flush: () => opts.flush?.()
     };
   }
   function assignKey(state) {
@@ -289,25 +290,100 @@
     // }
   }
 
+  /**
+   * Creates a history object that can be used to interact with the browser's
+   * navigation. This is a lightweight API wrapping the browser's native methods.
+   * It is designed to work with TanStack Router, but could be used as a standalone API as well.
+   * IMPORTANT: This API implements history throttling via a microtask to prevent
+   * excessive calls to the history API. In some browsers, calling history.pushState or
+   * history.replaceState in quick succession can cause the browser to ignore subsequent
+   * calls. This API smooths out those differences and ensures that your application
+   * state will *eventually* match the browser state. In most cases, this is not a problem,
+   * but if you need to ensure that the browser state is up to date, you can use the
+   * `history.flush` method to immediately flush all pending state changes to the browser URL.
+   * @param opts
+   * @param opts.getHref A function that returns the current href (path + search + hash)
+   * @param opts.createHref A function that takes a path and returns a href (path + search + hash)
+   * @returns A history instance
+   */
   function createBrowserHistory(opts) {
     const getHref = opts?.getHref ?? (() => `${window.location.pathname}${window.location.search}${window.location.hash}`);
     const createHref = opts?.createHref ?? (path => path);
-    const getLocation = () => parseLocation(getHref(), window.history.state);
+    let currentLocation = parseLocation(getHref(), window.history.state);
+    const getLocation = () => currentLocation;
+    let next;
+
+    // Because we are proactively updating the location
+    // in memory before actually updating the browser history,
+    // we need to track when we are doing this so we don't
+    // notify subscribers twice on the last update.
+    let tracking = true;
+
+    // We need to track the current scheduled update to prevent
+    // multiple updates from being scheduled at the same time.
+    let scheduled;
+
+    // This function is a wrapper to prevent any of the callback's
+    // side effects from causing a subscriber notification
+    const untrack = fn => {
+      tracking = false;
+      fn();
+      tracking = true;
+    };
+
+    // This function flushes the next update to the browser history
+    const flush = () => {
+      // Do not notify subscribers about this push/replace call
+      untrack(() => {
+        if (!next) return;
+        window.history[next.isPush ? 'pushState' : 'replaceState'](next.state, '', next.href);
+        // Reset the nextIsPush flag and clear the scheduled update
+        next = undefined;
+        scheduled = undefined;
+      });
+    };
+
+    // This function queues up a call to update the browser history
+    const queueHistoryAction = (type, path, state, onUpdate) => {
+      const href = createHref(path);
+
+      // Update the location in memory
+      currentLocation = parseLocation(href, state);
+
+      // Keep track of the next location we need to flush to the URL
+      next = {
+        href,
+        state,
+        isPush: next?.isPush || type === 'push'
+      };
+      // Notify subscribers
+      onUpdate();
+      if (!scheduled) {
+        // Schedule an update to the browser history
+        scheduled = Promise.resolve().then(() => flush());
+      }
+    };
     return createHistory({
       getLocation,
       subscriber: onUpdate => {
-        window.addEventListener(pushStateEvent, onUpdate);
-        window.addEventListener(popStateEvent, onUpdate);
+        window.addEventListener(pushStateEvent, () => {
+          currentLocation = parseLocation(getHref(), window.history.state);
+          onUpdate();
+        });
+        window.addEventListener(popStateEvent, () => {
+          currentLocation = parseLocation(getHref(), window.history.state);
+          onUpdate();
+        });
         var pushState = window.history.pushState;
         window.history.pushState = function () {
           let res = pushState.apply(history, arguments);
-          onUpdate();
+          if (tracking) onUpdate();
           return res;
         };
         var replaceState = window.history.replaceState;
         window.history.replaceState = function () {
           let res = replaceState.apply(history, arguments);
-          onUpdate();
+          if (tracking) onUpdate();
           return res;
         };
         return () => {
@@ -317,16 +393,13 @@
           window.removeEventListener(popStateEvent, onUpdate);
         };
       },
-      pushState: (path, state) => {
-        window.history.pushState(state, '', createHref(path));
-      },
-      replaceState: (path, state) => {
-        window.history.replaceState(state, '', createHref(path));
-      },
+      pushState: (path, state, onUpdate) => queueHistoryAction('push', path, state, onUpdate),
+      replaceState: (path, state, onUpdate) => queueHistoryAction('replace', path, state, onUpdate),
       back: () => window.history.back(),
       forward: () => window.history.forward(),
       go: n => window.history.go(n),
-      createHref: path => createHref(path)
+      createHref: path => createHref(path),
+      flush
     });
   }
   function createHashHistory() {
@@ -383,6 +456,8 @@
     return (Math.random() + 1).toString(36).substring(7);
   }
 
+  // export type Expand<T> = T
+
   // type Compute<T> = { [K in keyof T]: T[K] } | never
 
   // type AllKeys<T> = T extends any ? keyof T : never
@@ -2287,6 +2362,7 @@
     return _extends.apply(this, arguments);
   }
 
+  const useLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   Route.__onInit = route => {
     Object.assign(route, {
       useMatch: (opts = {}) => {
@@ -2452,7 +2528,7 @@
   });
   function Navigate(props) {
     const router = useRouter();
-    React__namespace.useLayoutEffect(() => {
+    useLayoutEffect$1(() => {
       router.navigate(props);
     }, []);
     return null;