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

package/build/umd/index.development.js

@@ -134,36 +134,8 @@
     return true;
   }
 
-  var prefix = 'Invariant failed';
-  function invariant(condition, message) {
-      if (condition) {
-          return;
-      }
-      var provided = typeof message === 'function' ? message() : message;
-      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-      throw new Error(value);
-  }
-
-  function warning(condition, message) {
-    {
-      if (condition) {
-        return;
-      }
-
-      var text = "Warning: " + message;
-
-      if (typeof console !== 'undefined') {
-        console.warn(text);
-      }
-
-      try {
-        throw Error(text);
-      } catch (x) {}
-    }
-  }
-
   /**
-   * @tanstack/router-core/src/index.ts
+   * @tanstack/history/src/index.ts
    *
    * Copyright (c) TanStack
    *
@@ -172,7 +144,6 @@
    *
    * @license MIT
    */
-
   // While the public API was clearly inspired by the "history" npm package,
   // This implementation attempts to be more lightweight by
   // making assumptions about the way TanStack Router works
@@ -236,15 +207,15 @@
         };
       },
       push: (path, state) => {
-        assignKey(state);
+        state = assignKey(state);
         queueTask(() => {
-          opts.pushState(path, state);
+          opts.pushState(path, state, onUpdate);
         });
       },
       replace: (path, state) => {
-        assignKey(state);
+        state = assignKey(state);
         queueTask(() => {
-          opts.replaceState(path, state);
+          opts.replaceState(path, state, onUpdate);
         });
       },
       go: index => {
@@ -276,38 +247,112 @@
             stopBlocking();
           }
         };
-      }
+      },
+      flush: () => opts.flush?.()
     };
   }
   function assignKey(state) {
+    if (!state) {
+      state = {};
+    }
     state.key = createRandomKey();
-    // if (state.__actualLocation) {
-    //   state.__actualLocation.state = {
-    //     ...state.__actualLocation.state,
-    //     key,
-    //   }
-    // }
+    return state;
   }
 
+  /**
+   * 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 +362,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 +425,47 @@
     return (Math.random() + 1).toString(36).substring(7);
   }
 
+  var prefix = 'Invariant failed';
+  function invariant(condition, message) {
+      if (condition) {
+          return;
+      }
+      var provided = typeof message === 'function' ? message() : message;
+      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+      throw new Error(value);
+  }
+
+  function warning(condition, message) {
+    {
+      if (condition) {
+        return;
+      }
+
+      var text = "Warning: " + message;
+
+      if (typeof console !== 'undefined') {
+        console.warn(text);
+      }
+
+      try {
+        throw Error(text);
+      } catch (x) {}
+    }
+  }
+
+  /**
+   * @tanstack/router-core/src/index.ts
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
+  // 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 +2370,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 +2536,7 @@
   });
   function Navigate(props) {
     const router = useRouter();
-    React__namespace.useLayoutEffect(() => {
+    useLayoutEffect$1(() => {
       router.navigate(props);
     }, []);
     return null;