@tanstack/history 1.15.10 → 1.20.3-alpha.1

package/dist/cjs/index.d.cts

@@ -1,19 +1,36 @@
+export interface NavigateOptions {
+    ignoreBlocker?: boolean;
+}
+type SubscriberHistoryAction = {
+    type: Exclude<HistoryAction, 'GO'>;
+} | {
+    type: 'GO';
+    index: number;
+};
+type SubscriberArgs = {
+    location: HistoryLocation;
+    action: SubscriberHistoryAction;
+};
 export interface RouterHistory {
     location: HistoryLocation;
-    subscribe: (cb: () => void) => () => void;
-    push: (path: string, state?: any) => void;
-    replace: (path: string, state?: any) => void;
-    go: (index: number) => void;
-    back: () => void;
-    forward: () => void;
+    length: number;
+    subscribers: Set<(opts: SubscriberArgs) => void>;
+    subscribe: (cb: (opts: SubscriberArgs) => void) => () => void;
+    push: (path: string, state?: any, navigateOpts?: NavigateOptions) => void;
+    replace: (path: string, state?: any, navigateOpts?: NavigateOptions) => void;
+    go: (index: number, navigateOpts?: NavigateOptions) => void;
+    back: (navigateOpts?: NavigateOptions) => void;
+    forward: (navigateOpts?: NavigateOptions) => void;
+    canGoBack: () => boolean;
     createHref: (href: string) => string;
-    block: (blocker: BlockerFn) => () => void;
+    block: (blocker: NavigationBlocker) => () => void;
     flush: () => void;
     destroy: () => void;
-    notify: () => void;
+    notify: (action: SubscriberHistoryAction) => void;
+    _ignoreSubscribers?: boolean;
 }
 export interface HistoryLocation extends ParsedPath {
-    state: HistoryState;
+    state: ParsedHistoryState;
 }
 export interface ParsedPath {
     href: string;
@@ -22,21 +39,38 @@ export interface ParsedPath {
     hash: string;
 }
 export interface HistoryState {
-    key: string;
 }
+export type ParsedHistoryState = HistoryState & {
+    key?: string;
+    __TSR_index: number;
+};
 type ShouldAllowNavigation = any;
-export type BlockerFn = () => Promise<ShouldAllowNavigation> | ShouldAllowNavigation;
+export type HistoryAction = 'PUSH' | 'REPLACE' | 'FORWARD' | 'BACK' | 'GO';
+export type BlockerFnArgs = {
+    currentLocation: HistoryLocation;
+    nextLocation: HistoryLocation;
+    action: HistoryAction;
+};
+export type BlockerFn = (args: BlockerFnArgs) => Promise<ShouldAllowNavigation> | ShouldAllowNavigation;
+export type NavigationBlocker = {
+    blockerFn: BlockerFn;
+    enableBeforeUnload?: (() => boolean) | boolean;
+};
 export declare function createHistory(opts: {
     getLocation: () => HistoryLocation;
+    getLength: () => number;
     pushState: (path: string, state: any) => void;
     replaceState: (path: string, state: any) => void;
     go: (n: number) => void;
-    back: () => void;
-    forward: () => void;
+    back: (ignoreBlocker: boolean) => void;
+    forward: (ignoreBlocker: boolean) => void;
     createHref: (path: string) => string;
     flush?: () => void;
     destroy?: () => void;
-    onBlocked?: (onUpdate: () => void) => void;
+    onBlocked?: () => void;
+    getBlockers?: () => Array<NavigationBlocker>;
+    setBlockers?: (blockers: Array<NavigationBlocker>) => void;
+    notifyOnIndexChange?: boolean;
 }): RouterHistory;
 /**
  * Creates a history object that can be used to interact with the browser's
@@ -63,7 +97,8 @@ export declare function createHashHistory(opts?: {
     window?: any;
 }): RouterHistory;
 export declare function createMemoryHistory(opts?: {
-    initialEntries: string[];
+    initialEntries: Array<string>;
     initialIndex?: number;
 }): RouterHistory;
+export declare function parseHref(href: string, state: ParsedHistoryState | undefined): HistoryLocation;
 export {};

package/dist/esm/index.d.ts

@@ -1,19 +1,36 @@
+export interface NavigateOptions {
+    ignoreBlocker?: boolean;
+}
+type SubscriberHistoryAction = {
+    type: Exclude<HistoryAction, 'GO'>;
+} | {
+    type: 'GO';
+    index: number;
+};
+type SubscriberArgs = {
+    location: HistoryLocation;
+    action: SubscriberHistoryAction;
+};
 export interface RouterHistory {
     location: HistoryLocation;
-    subscribe: (cb: () => void) => () => void;
-    push: (path: string, state?: any) => void;
-    replace: (path: string, state?: any) => void;
-    go: (index: number) => void;
-    back: () => void;
-    forward: () => void;
+    length: number;
+    subscribers: Set<(opts: SubscriberArgs) => void>;
+    subscribe: (cb: (opts: SubscriberArgs) => void) => () => void;
+    push: (path: string, state?: any, navigateOpts?: NavigateOptions) => void;
+    replace: (path: string, state?: any, navigateOpts?: NavigateOptions) => void;
+    go: (index: number, navigateOpts?: NavigateOptions) => void;
+    back: (navigateOpts?: NavigateOptions) => void;
+    forward: (navigateOpts?: NavigateOptions) => void;
+    canGoBack: () => boolean;
     createHref: (href: string) => string;
-    block: (blocker: BlockerFn) => () => void;
+    block: (blocker: NavigationBlocker) => () => void;
     flush: () => void;
     destroy: () => void;
-    notify: () => void;
+    notify: (action: SubscriberHistoryAction) => void;
+    _ignoreSubscribers?: boolean;
 }
 export interface HistoryLocation extends ParsedPath {
-    state: HistoryState;
+    state: ParsedHistoryState;
 }
 export interface ParsedPath {
     href: string;
@@ -22,21 +39,38 @@ export interface ParsedPath {
     hash: string;
 }
 export interface HistoryState {
-    key: string;
 }
+export type ParsedHistoryState = HistoryState & {
+    key?: string;
+    __TSR_index: number;
+};
 type ShouldAllowNavigation = any;
-export type BlockerFn = () => Promise<ShouldAllowNavigation> | ShouldAllowNavigation;
+export type HistoryAction = 'PUSH' | 'REPLACE' | 'FORWARD' | 'BACK' | 'GO';
+export type BlockerFnArgs = {
+    currentLocation: HistoryLocation;
+    nextLocation: HistoryLocation;
+    action: HistoryAction;
+};
+export type BlockerFn = (args: BlockerFnArgs) => Promise<ShouldAllowNavigation> | ShouldAllowNavigation;
+export type NavigationBlocker = {
+    blockerFn: BlockerFn;
+    enableBeforeUnload?: (() => boolean) | boolean;
+};
 export declare function createHistory(opts: {
     getLocation: () => HistoryLocation;
+    getLength: () => number;
     pushState: (path: string, state: any) => void;
     replaceState: (path: string, state: any) => void;
     go: (n: number) => void;
-    back: () => void;
-    forward: () => void;
+    back: (ignoreBlocker: boolean) => void;
+    forward: (ignoreBlocker: boolean) => void;
     createHref: (path: string) => string;
     flush?: () => void;
     destroy?: () => void;
-    onBlocked?: (onUpdate: () => void) => void;
+    onBlocked?: () => void;
+    getBlockers?: () => Array<NavigationBlocker>;
+    setBlockers?: (blockers: Array<NavigationBlocker>) => void;
+    notifyOnIndexChange?: boolean;
 }): RouterHistory;
 /**
  * Creates a history object that can be used to interact with the browser's
@@ -63,7 +97,8 @@ export declare function createHashHistory(opts?: {
     window?: any;
 }): RouterHistory;
 export declare function createMemoryHistory(opts?: {
-    initialEntries: string[];
+    initialEntries: Array<string>;
     initialIndex?: number;
 }): RouterHistory;
+export declare function parseHref(href: string, state: ParsedHistoryState | undefined): HistoryLocation;
 export {};

package/dist/esm/index.js

@@ -1,30 +1,40 @@
-const pushStateEvent = "pushstate";
+const stateIndexKey = "__TSR_index";
 const popStateEvent = "popstate";
 const beforeUnloadEvent = "beforeunload";
-const beforeUnloadListener = (event) => {
-  event.preventDefault();
-  return event.returnValue = "";
-};
-const stopBlocking = () => {
-  removeEventListener(beforeUnloadEvent, beforeUnloadListener, {
-    capture: true
-  });
-};
 function createHistory(opts) {
   let location = opts.getLocation();
-  let subscribers = /* @__PURE__ */ new Set();
-  let blockers = [];
-  const onUpdate = () => {
+  const subscribers = /* @__PURE__ */ new Set();
+  const notify = (action) => {
     location = opts.getLocation();
-    subscribers.forEach((subscriber) => subscriber());
+    subscribers.forEach((subscriber) => subscriber({ location, action }));
+  };
+  const handleIndexChange = (action) => {
+    if (opts.notifyOnIndexChange ?? true) notify(action);
+    else location = opts.getLocation();
   };
-  const tryNavigation = async (task) => {
-    var _a;
-    if (typeof document !== "undefined" && blockers.length) {
-      for (let blocker of blockers) {
-        const allowed = await blocker();
-        if (!allowed) {
-          (_a = opts.onBlocked) == null ? void 0 : _a.call(opts, onUpdate);
+  const tryNavigation = async ({
+    task,
+    navigateOpts,
+    ...actionInfo
+  }) => {
+    var _a, _b;
+    const ignoreBlocker = (navigateOpts == null ? void 0 : navigateOpts.ignoreBlocker) ?? false;
+    if (ignoreBlocker) {
+      task();
+      return;
+    }
+    const blockers = ((_a = opts.getBlockers) == null ? void 0 : _a.call(opts)) ?? [];
+    const isPushOrReplace = actionInfo.type === "PUSH" || actionInfo.type === "REPLACE";
+    if (typeof document !== "undefined" && blockers.length && isPushOrReplace) {
+      for (const blocker of blockers) {
+        const nextLocation = parseHref(actionInfo.path, actionInfo.state);
+        const isBlocked = await blocker.blockerFn({
+          currentLocation: location,
+          nextLocation,
+          action: actionInfo.type
+        });
+        if (isBlocked) {
+          (_b = opts.onBlocked) == null ? void 0 : _b.call(opts);
           return;
         }
       }
@@ -35,54 +45,86 @@ function createHistory(opts) {
     get location() {
       return location;
     },
+    get length() {
+      return opts.getLength();
+    },
+    subscribers,
     subscribe: (cb) => {
       subscribers.add(cb);
       return () => {
         subscribers.delete(cb);
       };
     },
-    push: (path, state) => {
-      state = assignKey(state);
-      tryNavigation(() => {
-        opts.pushState(path, state);
-        onUpdate();
+    push: (path, state, navigateOpts) => {
+      const currentIndex = location.state[stateIndexKey];
+      state = assignKeyAndIndex(currentIndex + 1, state);
+      tryNavigation({
+        task: () => {
+          opts.pushState(path, state);
+          notify({ type: "PUSH" });
+        },
+        navigateOpts,
+        type: "PUSH",
+        path,
+        state
       });
     },
-    replace: (path, state) => {
-      state = assignKey(state);
-      tryNavigation(() => {
-        opts.replaceState(path, state);
-        onUpdate();
+    replace: (path, state, navigateOpts) => {
+      const currentIndex = location.state[stateIndexKey];
+      state = assignKeyAndIndex(currentIndex, state);
+      tryNavigation({
+        task: () => {
+          opts.replaceState(path, state);
+          notify({ type: "REPLACE" });
+        },
+        navigateOpts,
+        type: "REPLACE",
+        path,
+        state
       });
     },
-    go: (index) => {
-      tryNavigation(() => {
-        opts.go(index);
+    go: (index, navigateOpts) => {
+      tryNavigation({
+        task: () => {
+          opts.go(index);
+          handleIndexChange({ type: "GO", index });
+        },
+        navigateOpts,
+        type: "GO"
       });
     },
-    back: () => {
-      tryNavigation(() => {
-        opts.back();
+    back: (navigateOpts) => {
+      tryNavigation({
+        task: () => {
+          opts.back((navigateOpts == null ? void 0 : navigateOpts.ignoreBlocker) ?? false);
+          handleIndexChange({ type: "BACK" });
+        },
+        navigateOpts,
+        type: "BACK"
       });
     },
-    forward: () => {
-      tryNavigation(() => {
-        opts.forward();
+    forward: (navigateOpts) => {
+      tryNavigation({
+        task: () => {
+          opts.forward((navigateOpts == null ? void 0 : navigateOpts.ignoreBlocker) ?? false);
+          handleIndexChange({ type: "FORWARD" });
+        },
+        navigateOpts,
+        type: "FORWARD"
       });
     },
+    canGoBack: () => location.state[stateIndexKey] !== 0,
     createHref: (str) => opts.createHref(str),
     block: (blocker) => {
-      blockers.push(blocker);
-      if (blockers.length === 1) {
-        addEventListener(beforeUnloadEvent, beforeUnloadListener, {
-          capture: true
-        });
-      }
+      var _a;
+      if (!opts.setBlockers) return () => {
+      };
+      const blockers = ((_a = opts.getBlockers) == null ? void 0 : _a.call(opts)) ?? [];
+      opts.setBlockers([...blockers, blocker]);
       return () => {
-        blockers = blockers.filter((b) => b !== blocker);
-        if (!blockers.length) {
-          stopBlocking();
-        }
+        var _a2, _b;
+        const blockers2 = ((_a2 = opts.getBlockers) == null ? void 0 : _a2.call(opts)) ?? [];
+        (_b = opts.setBlockers) == null ? void 0 : _b.call(opts, blockers2.filter((b) => b !== blocker));
       };
     },
     flush: () => {
@@ -93,49 +135,64 @@ function createHistory(opts) {
       var _a;
       return (_a = opts.destroy) == null ? void 0 : _a.call(opts);
     },
-    notify: onUpdate
+    notify
   };
 }
-function assignKey(state) {
+function assignKeyAndIndex(index, state) {
   if (!state) {
     state = {};
   }
   return {
     ...state,
-    key: createRandomKey()
+    key: createRandomKey(),
+    [stateIndexKey]: index
   };
 }
 function createBrowserHistory(opts) {
+  var _a;
   const win = (opts == null ? void 0 : opts.window) ?? (typeof document !== "undefined" ? window : void 0);
+  const originalPushState = win.history.pushState;
+  const originalReplaceState = win.history.replaceState;
+  let blockers = [];
+  const _getBlockers = () => blockers;
+  const _setBlockers = (newBlockers) => blockers = newBlockers;
   const createHref = (opts == null ? void 0 : opts.createHref) ?? ((path) => path);
   const parseLocation = (opts == null ? void 0 : opts.parseLocation) ?? (() => parseHref(
     `${win.location.pathname}${win.location.search}${win.location.hash}`,
     win.history.state
   ));
+  if (!((_a = win.history.state) == null ? void 0 : _a.key)) {
+    win.history.replaceState(
+      {
+        [stateIndexKey]: 0,
+        key: createRandomKey()
+      },
+      ""
+    );
+  }
   let currentLocation = parseLocation();
   let rollbackLocation;
+  let nextPopIsGo = false;
+  let ignoreNextPop = false;
+  let skipBlockerNextPop = false;
+  let ignoreNextBeforeUnload = false;
   const getLocation = () => currentLocation;
   let next;
-  let tracking = true;
   let scheduled;
-  const untrack = (fn) => {
-    tracking = false;
-    fn();
-    tracking = true;
-  };
   const flush = () => {
-    untrack(() => {
-      if (!next)
-        return;
-      win.history[next.isPush ? "pushState" : "replaceState"](
-        next.state,
-        "",
-        next.href
-      );
-      next = void 0;
-      scheduled = void 0;
-      rollbackLocation = void 0;
-    });
+    if (!next) {
+      return;
+    }
+    history._ignoreSubscribers = true;
+    (next.isPush ? win.history.pushState : win.history.replaceState)(
+      next.state,
+      "",
+      next.href
+    );
+    history._ignoreSubscribers = false;
+    next = void 0;
+    scheduled = void 0;
+    rollbackLocation = void 0;
   };
   const queueHistoryAction = (type, destHref, state) => {
     const href = createHref(destHref);
@@ -152,46 +209,125 @@ function createBrowserHistory(opts) {
       scheduled = Promise.resolve().then(() => flush());
     }
   };
-  const onPushPop = () => {
+  const onPushPop = (type) => {
+    currentLocation = parseLocation();
+    history.notify({ type });
+  };
+  const onPushPopEvent = async () => {
+    if (ignoreNextPop) {
+      ignoreNextPop = false;
+      return;
+    }
+    const nextLocation = parseLocation();
+    const delta = nextLocation.state[stateIndexKey] - currentLocation.state[stateIndexKey];
+    const isForward = delta === 1;
+    const isBack = delta === -1;
+    const isGo = !isForward && !isBack || nextPopIsGo;
+    nextPopIsGo = false;
+    const action = isGo ? "GO" : isBack ? "BACK" : "FORWARD";
+    const notify = isGo ? {
+      type: "GO",
+      index: delta
+    } : {
+      type: isBack ? "BACK" : "FORWARD"
+    };
+    if (skipBlockerNextPop) {
+      skipBlockerNextPop = false;
+    } else {
+      const blockers2 = _getBlockers();
+      if (typeof document !== "undefined" && blockers2.length) {
+        for (const blocker of blockers2) {
+          const isBlocked = await blocker.blockerFn({
+            currentLocation,
+            nextLocation,
+            action
+          });
+          if (isBlocked) {
+            ignoreNextPop = true;
+            win.history.go(1);
+            history.notify(notify);
+            return;
+          }
+        }
+      }
+    }
     currentLocation = parseLocation();
-    history.notify();
+    history.notify(notify);
+  };
+  const onBeforeUnload = (e) => {
+    if (ignoreNextBeforeUnload) {
+      ignoreNextBeforeUnload = false;
+      return;
+    }
+    let shouldBlock = false;
+    const blockers2 = _getBlockers();
+    if (typeof document !== "undefined" && blockers2.length) {
+      for (const blocker of blockers2) {
+        const shouldHaveBeforeUnload = blocker.enableBeforeUnload ?? true;
+        if (shouldHaveBeforeUnload === true) {
+          shouldBlock = true;
+          break;
+        }
+        if (typeof shouldHaveBeforeUnload === "function" && shouldHaveBeforeUnload() === true) {
+          shouldBlock = true;
+          break;
+        }
+      }
+    }
+    if (shouldBlock) {
+      e.preventDefault();
+      return e.returnValue = "";
+    }
+    return;
   };
-  var originalPushState = win.history.pushState;
-  var originalReplaceState = win.history.replaceState;
   const history = createHistory({
     getLocation,
+    getLength: () => win.history.length,
     pushState: (href, state) => queueHistoryAction("push", href, state),
     replaceState: (href, state) => queueHistoryAction("replace", href, state),
-    back: () => win.history.back(),
-    forward: () => win.history.forward(),
-    go: (n) => win.history.go(n),
+    back: (ignoreBlocker) => {
+      if (ignoreBlocker) skipBlockerNextPop = true;
+      ignoreNextBeforeUnload = true;
+      return win.history.back();
+    },
+    forward: (ignoreBlocker) => {
+      if (ignoreBlocker) skipBlockerNextPop = true;
+      ignoreNextBeforeUnload = true;
+      win.history.forward();
+    },
+    go: (n) => {
+      nextPopIsGo = true;
+      win.history.go(n);
+    },
     createHref: (href) => createHref(href),
     flush,
     destroy: () => {
       win.history.pushState = originalPushState;
       win.history.replaceState = originalReplaceState;
-      win.removeEventListener(pushStateEvent, onPushPop);
-      win.removeEventListener(popStateEvent, onPushPop);
+      win.removeEventListener(beforeUnloadEvent, onBeforeUnload, {
+        capture: true
+      });
+      win.removeEventListener(popStateEvent, onPushPopEvent);
     },
-    onBlocked: (onUpdate) => {
+    onBlocked: () => {
       if (rollbackLocation && currentLocation !== rollbackLocation) {
         currentLocation = rollbackLocation;
-        onUpdate();
       }
-    }
+    },
+    getBlockers: _getBlockers,
+    setBlockers: _setBlockers,
+    notifyOnIndexChange: false
   });
-  win.addEventListener(pushStateEvent, onPushPop);
-  win.addEventListener(popStateEvent, onPushPop);
-  win.history.pushState = function() {
-    let res = originalPushState.apply(win.history, arguments);
-    if (tracking)
-      history.notify();
+  win.addEventListener(beforeUnloadEvent, onBeforeUnload, { capture: true });
+  win.addEventListener(popStateEvent, onPushPopEvent);
+  win.history.pushState = function(...args) {
+    const res = originalPushState.apply(win.history, args);
+    if (!history._ignoreSubscribers) onPushPop("PUSH");
     return res;
   };
-  win.history.replaceState = function() {
-    let res = originalReplaceState.apply(win.history, arguments);
-    if (tracking)
-      history.notify();
+  win.history.replaceState = function(...args) {
+    const res = originalReplaceState.apply(win.history, args);
+    if (!history._ignoreSubscribers) onPushPop("REPLACE");
     return res;
   };
   return history;
@@ -201,7 +337,12 @@ function createHashHistory(opts) {
   return createBrowserHistory({
     window: win,
     parseLocation: () => {
-      const hashHref = win.location.hash.split("#").slice(1).join("#") ?? "/";
+      const hashSplit = win.location.hash.split("#").slice(1);
+      const pathPart = hashSplit[0] ?? "/";
+      const searchPart = win.location.search;
+      const hashEntries = hashSplit.slice(1);
+      const hashPart = hashEntries.length === 0 ? "" : `#${hashEntries.join("#")}`;
+      const hashHref = `${pathPart}${searchPart}${hashPart}`;
       return parseHref(hashHref, win.history.state);
     },
     createHref: (href) => `${win.location.pathname}${win.location.search}#${href}`
@@ -211,24 +352,29 @@ function createMemoryHistory(opts = {
   initialEntries: ["/"]
 }) {
   const entries = opts.initialEntries;
-  let index = opts.initialIndex ?? entries.length - 1;
-  let currentState = {
-    key: createRandomKey()
-  };
-  const getLocation = () => parseHref(entries[index], currentState);
+  let index = opts.initialIndex ? Math.min(Math.max(opts.initialIndex, 0), entries.length - 1) : entries.length - 1;
+  const states = entries.map(
+    (_entry, index2) => assignKeyAndIndex(index2, void 0)
+  );
+  const getLocation = () => parseHref(entries[index], states[index]);
   return createHistory({
     getLocation,
+    getLength: () => entries.length,
     pushState: (path, state) => {
-      currentState = state;
+      if (index < entries.length - 1) {
+        entries.splice(index + 1);
+        states.splice(index + 1);
+      }
+      states.push(state);
       entries.push(path);
-      index++;
+      index = Math.max(entries.length - 1, 0);
     },
     replaceState: (path, state) => {
-      currentState = state;
+      states[index] = state;
       entries[index] = path;
     },
     back: () => {
-      index--;
+      index = Math.max(index - 1, 0);
     },
     forward: () => {
       index = Math.min(index + 1, entries.length - 1);
@@ -240,8 +386,8 @@ function createMemoryHistory(opts = {
   });
 }
 function parseHref(href, state) {
-  let hashIndex = href.indexOf("#");
-  let searchIndex = href.indexOf("?");
+  const hashIndex = href.indexOf("#");
+  const searchIndex = href.indexOf("?");
   return {
     href,
     pathname: href.substring(
@@ -250,7 +396,7 @@ function parseHref(href, state) {
     ),
     hash: hashIndex > -1 ? href.substring(hashIndex) : "",
     search: searchIndex > -1 ? href.slice(searchIndex, hashIndex === -1 ? void 0 : hashIndex) : "",
-    state: state || {}
+    state: state || { [stateIndexKey]: 0, key: createRandomKey() }
   };
 }
 function createRandomKey() {
@@ -260,6 +406,7 @@ export {
   createBrowserHistory,
   createHashHistory,
   createHistory,
-  createMemoryHistory
+  createMemoryHistory,
+  parseHref
 };
 //# sourceMappingURL=index.js.map