@tanstack/react-router 1.89.2 → 1.90.0

package/dist/esm/useBlocker.d.ts

@@ -1,23 +1,68 @@
-import { BlockerFn } from '@tanstack/history';
-import { ReactNode } from './route.js';
-type BlockerResolver = {
-    status: 'idle' | 'blocked';
+import { HistoryAction } from '@tanstack/history';
+import { AnyRoute } from './route.js';
+import { ParseRoute } from './routeInfo.js';
+import { AnyRouter, RegisteredRouter } from './router.js';
+import * as React from 'react';
+interface ShouldBlockFnLocation<out TRouteId, out TFullPath, out TAllParams, out TFullSearchSchema> {
+    routeId: TRouteId;
+    fullPath: TFullPath;
+    pathname: string;
+    params: TAllParams;
+    search: TFullSearchSchema;
+}
+type MakeShouldBlockFnLocationUnion<TRouter extends AnyRouter = RegisteredRouter, TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>> = TRoute extends any ? ShouldBlockFnLocation<TRoute['id'], TRoute['fullPath'], TRoute['types']['allParams'], TRoute['types']['fullSearchSchema']> : never;
+type BlockerResolver<TRouter extends AnyRouter = RegisteredRouter> = {
+    status: 'blocked';
+    current: MakeShouldBlockFnLocationUnion<TRouter>;
+    next: MakeShouldBlockFnLocationUnion<TRouter>;
+    action: HistoryAction;
     proceed: () => void;
     reset: () => void;
+} | {
+    status: 'idle';
+    current: undefined;
+    next: undefined;
+    action: undefined;
+    proceed: undefined;
+    reset: undefined;
 };
-type BlockerOpts = {
-    blockerFn?: BlockerFn;
+type ShouldBlockFnArgs<TRouter extends AnyRouter = RegisteredRouter> = {
+    current: MakeShouldBlockFnLocationUnion<TRouter>;
+    next: MakeShouldBlockFnLocationUnion<TRouter>;
+    action: HistoryAction;
+};
+export type ShouldBlockFn<TRouter extends AnyRouter = RegisteredRouter> = (args: ShouldBlockFnArgs<TRouter>) => boolean | Promise<boolean>;
+export type UseBlockerOpts<TRouter extends AnyRouter = RegisteredRouter, TWithResolver extends boolean = boolean> = {
+    shouldBlockFn: ShouldBlockFn<TRouter>;
+    enableBeforeUnload?: boolean | (() => boolean);
+    disabled?: boolean;
+    withResolver?: TWithResolver;
+};
+type LegacyBlockerFn = () => Promise<any> | any;
+type LegacyBlockerOpts = {
+    blockerFn?: LegacyBlockerFn;
     condition?: boolean | any;
 };
-export declare function useBlocker(blockerFnOrOpts?: BlockerOpts): BlockerResolver;
+export declare function useBlocker<TRouter extends AnyRouter = RegisteredRouter, TWithResolver extends boolean = false>(opts: UseBlockerOpts<TRouter, TWithResolver>): TWithResolver extends true ? BlockerResolver<TRouter> : void;
+/**
+ * @deprecated Use the shouldBlockFn property instead
+ */
+export declare function useBlocker(blockerFnOrOpts?: LegacyBlockerOpts): BlockerResolver;
 /**
- * @deprecated Use the BlockerOpts object syntax instead
+ * @deprecated Use the UseBlockerOpts object syntax instead
  */
-export declare function useBlocker(blockerFn?: BlockerFn, condition?: boolean | any): BlockerResolver;
-export declare function Block({ blockerFn, condition, children }: PromptProps): any;
-export type PromptProps = {
-    blockerFn?: BlockerFn;
+export declare function useBlocker(blockerFn?: LegacyBlockerFn, condition?: boolean | any): BlockerResolver;
+export declare function Block<TRouter extends AnyRouter = RegisteredRouter, TWithResolver extends boolean = boolean>(opts: PromptProps<TRouter, TWithResolver>): React.ReactNode;
+/**
+ *  @deprecated Use the UseBlockerOpts property instead
+ */
+export declare function Block(opts: LegacyPromptProps): React.ReactNode;
+type LegacyPromptProps = {
+    blockerFn?: LegacyBlockerFn;
     condition?: boolean | any;
-    children?: ReactNode | (({ proceed, reset }: BlockerResolver) => ReactNode);
+    children?: React.ReactNode | ((params: BlockerResolver) => React.ReactNode);
+};
+type PromptProps<TRouter extends AnyRouter = RegisteredRouter, TWithResolver extends boolean = boolean, TParams = TWithResolver extends true ? BlockerResolver<TRouter> : void> = UseBlockerOpts<TRouter, TWithResolver> & {
+    children?: React.ReactNode | ((params: TParams) => React.ReactNode);
 };
 export {};

package/dist/esm/useBlocker.js

@@ -1,46 +1,134 @@
 import * as React from "react";
 import { useRouter } from "./useRouter.js";
-function useBlocker(blockerFnOrOpts, condition) {
-  const { blockerFn, blockerCondition } = blockerFnOrOpts ? typeof blockerFnOrOpts === "function" ? { blockerFn: blockerFnOrOpts, blockerCondition: condition ?? true } : {
-    blockerFn: blockerFnOrOpts.blockerFn,
-    blockerCondition: blockerFnOrOpts.condition ?? true
-  } : { blockerFn: void 0, blockerCondition: condition ?? true };
-  const { history } = useRouter();
+function _resolveBlockerOpts(opts, condition) {
+  if (opts === void 0) {
+    return {
+      shouldBlockFn: () => true,
+      withResolver: false
+    };
+  }
+  if ("shouldBlockFn" in opts) {
+    return opts;
+  }
+  if (typeof opts === "function") {
+    const shouldBlock2 = Boolean(condition ?? true);
+    const _customBlockerFn2 = async () => {
+      if (shouldBlock2) return await opts();
+      return false;
+    };
+    return {
+      shouldBlockFn: _customBlockerFn2,
+      enableBeforeUnload: shouldBlock2,
+      withResolver: false
+    };
+  }
+  const shouldBlock = Boolean(opts.condition ?? true);
+  const fn = opts.blockerFn;
+  const _customBlockerFn = async () => {
+    if (shouldBlock && fn !== void 0) {
+      return await fn();
+    }
+    return shouldBlock;
+  };
+  return {
+    shouldBlockFn: _customBlockerFn,
+    enableBeforeUnload: shouldBlock,
+    withResolver: fn === void 0
+  };
+}
+function useBlocker(opts, condition) {
+  const {
+    shouldBlockFn,
+    enableBeforeUnload = true,
+    disabled = false,
+    withResolver = false
+  } = _resolveBlockerOpts(opts, condition);
+  const router = useRouter();
+  const { history } = router;
   const [resolver, setResolver] = React.useState({
     status: "idle",
-    proceed: () => {
-    },
-    reset: () => {
-    }
+    current: void 0,
+    next: void 0,
+    action: void 0,
+    proceed: void 0,
+    reset: void 0
   });
   React.useEffect(() => {
-    const blockerFnComposed = async () => {
-      if (blockerFn) {
-        return await blockerFn();
+    const blockerFnComposed = async (blockerFnArgs) => {
+      function getLocation(location) {
+        const parsedLocation = router.parseLocation(void 0, location);
+        const matchedRoutes = router.getMatchedRoutes(parsedLocation);
+        if (matchedRoutes.foundRoute === void 0) {
+          throw new Error(`No route found for location ${location.href}`);
+        }
+        return {
+          routeId: matchedRoutes.foundRoute.id,
+          fullPath: matchedRoutes.foundRoute.fullPath,
+          pathname: parsedLocation.pathname,
+          params: matchedRoutes.routeParams,
+          search: parsedLocation.search
+        };
+      }
+      const current = getLocation(blockerFnArgs.currentLocation);
+      const next = getLocation(blockerFnArgs.nextLocation);
+      const shouldBlock = await shouldBlockFn({
+        action: blockerFnArgs.action,
+        current,
+        next
+      });
+      if (!withResolver) {
+        return shouldBlock;
+      }
+      if (!shouldBlock) {
+        return false;
       }
       const promise = new Promise((resolve) => {
         setResolver({
           status: "blocked",
-          proceed: () => resolve(true),
-          reset: () => resolve(false)
+          current,
+          next,
+          action: blockerFnArgs.action,
+          proceed: () => resolve(false),
+          reset: () => resolve(true)
         });
       });
       const canNavigateAsync = await promise;
       setResolver({
         status: "idle",
-        proceed: () => {
-        },
-        reset: () => {
-        }
+        current: void 0,
+        next: void 0,
+        action: void 0,
+        proceed: void 0,
+        reset: void 0
       });
       return canNavigateAsync;
     };
-    return !blockerCondition ? void 0 : history.block(blockerFnComposed);
-  }, [blockerFn, blockerCondition, history]);
+    return disabled ? void 0 : history.block({ blockerFn: blockerFnComposed, enableBeforeUnload });
+  }, [shouldBlockFn, enableBeforeUnload, disabled, withResolver, history]);
   return resolver;
 }
-function Block({ blockerFn, condition, children }) {
-  const resolver = useBlocker({ blockerFn, condition });
+const _resolvePromptBlockerArgs = (props) => {
+  if ("shouldBlockFn" in props) {
+    return { ...props };
+  }
+  const shouldBlock = Boolean(props.condition ?? true);
+  const fn = props.blockerFn;
+  const _customBlockerFn = async () => {
+    if (shouldBlock && fn !== void 0) {
+      return await fn();
+    }
+    return shouldBlock;
+  };
+  return {
+    shouldBlockFn: _customBlockerFn,
+    enableBeforeUnload: shouldBlock,
+    withResolver: fn === void 0
+  };
+};
+function Block(opts) {
+  const { children, ...rest } = opts;
+  const args = _resolvePromptBlockerArgs(rest);
+  const resolver = useBlocker(args);
   return children ? typeof children === "function" ? children(resolver) : children : null;
 }
 export {

package/dist/esm/useBlocker.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBlocker.js","sources":["../../src/useBlocker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useRouter } from './useRouter'\nimport type { BlockerFn } from '@tanstack/history'\nimport type { ReactNode } from './route'\n\ntype BlockerResolver = {\n  status: 'idle' | 'blocked'\n  proceed: () => void\n  reset: () => void\n}\n\ntype BlockerOpts = {\n  blockerFn?: BlockerFn\n  condition?: boolean | any\n}\n\nexport function useBlocker(blockerFnOrOpts?: BlockerOpts): BlockerResolver\n\n/**\n * @deprecated Use the BlockerOpts object syntax instead\n */\nexport function useBlocker(\n  blockerFn?: BlockerFn,\n  condition?: boolean | any,\n): BlockerResolver\n\nexport function useBlocker(\n  blockerFnOrOpts?: BlockerFn | BlockerOpts,\n  condition?: boolean | any,\n): BlockerResolver {\n  const { blockerFn, blockerCondition } = blockerFnOrOpts\n    ? typeof blockerFnOrOpts === 'function'\n      ? { blockerFn: blockerFnOrOpts, blockerCondition: condition ?? true }\n      : {\n          blockerFn: blockerFnOrOpts.blockerFn,\n          blockerCondition: blockerFnOrOpts.condition ?? true,\n        }\n    : { blockerFn: undefined, blockerCondition: condition ?? true }\n  const { history } = useRouter()\n\n  const [resolver, setResolver] = React.useState<BlockerResolver>({\n    status: 'idle',\n    proceed: () => {},\n    reset: () => {},\n  })\n\n  React.useEffect(() => {\n    const blockerFnComposed = async () => {\n      // If a function is provided, it takes precedence over the promise blocker\n      if (blockerFn) {\n        return await blockerFn()\n      }\n\n      const promise = new Promise<boolean>((resolve) => {\n        setResolver({\n          status: 'blocked',\n          proceed: () => resolve(true),\n          reset: () => resolve(false),\n        })\n      })\n\n      const canNavigateAsync = await promise\n\n      setResolver({\n        status: 'idle',\n        proceed: () => {},\n        reset: () => {},\n      })\n\n      return canNavigateAsync\n    }\n\n    return !blockerCondition ? undefined : history.block(blockerFnComposed)\n  }, [blockerFn, blockerCondition, history])\n\n  return resolver\n}\n\nexport function Block({ blockerFn, condition, children }: PromptProps) {\n  const resolver = useBlocker({ blockerFn, condition })\n  return children\n    ? typeof children === 'function'\n      ? children(resolver)\n      : children\n    : null\n}\n\nexport type PromptProps = {\n  blockerFn?: BlockerFn\n  condition?: boolean | any\n  children?: ReactNode | (({ proceed, reset }: BlockerResolver) => ReactNode)\n}\n"],"names":[],"mappings":";;AA0BgB,SAAA,WACd,iBACA,WACiB;AACjB,QAAM,EAAE,WAAW,qBAAqB,kBACpC,OAAO,oBAAoB,aACzB,EAAE,WAAW,iBAAiB,kBAAkB,aAAa,SAC7D;AAAA,IACE,WAAW,gBAAgB;AAAA,IAC3B,kBAAkB,gBAAgB,aAAa;AAAA,EAAA,IAEnD,EAAE,WAAW,QAAW,kBAAkB,aAAa,KAAK;AAC1D,QAAA,EAAE,QAAQ,IAAI,UAAU;AAE9B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAA0B;AAAA,IAC9D,QAAQ;AAAA,IACR,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,OAAO,MAAM;AAAA,IAAA;AAAA,EAAC,CACf;AAED,QAAM,UAAU,MAAM;AACpB,UAAM,oBAAoB,YAAY;AAEpC,UAAI,WAAW;AACb,eAAO,MAAM,UAAU;AAAA,MAAA;AAGzB,YAAM,UAAU,IAAI,QAAiB,CAAC,YAAY;AACpC,oBAAA;AAAA,UACV,QAAQ;AAAA,UACR,SAAS,MAAM,QAAQ,IAAI;AAAA,UAC3B,OAAO,MAAM,QAAQ,KAAK;AAAA,QAAA,CAC3B;AAAA,MAAA,CACF;AAED,YAAM,mBAAmB,MAAM;AAEnB,kBAAA;AAAA,QACV,QAAQ;AAAA,QACR,SAAS,MAAM;AAAA,QAAC;AAAA,QAChB,OAAO,MAAM;AAAA,QAAA;AAAA,MAAC,CACf;AAEM,aAAA;AAAA,IACT;AAEA,WAAO,CAAC,mBAAmB,SAAY,QAAQ,MAAM,iBAAiB;AAAA,EACrE,GAAA,CAAC,WAAW,kBAAkB,OAAO,CAAC;AAElC,SAAA;AACT;AAEO,SAAS,MAAM,EAAE,WAAW,WAAW,YAAyB;AACrE,QAAM,WAAW,WAAW,EAAE,WAAW,WAAW;AACpD,SAAO,WACH,OAAO,aAAa,aAClB,SAAS,QAAQ,IACjB,WACF;AACN;"}
+{"version":3,"file":"useBlocker.js","sources":["../../src/useBlocker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useRouter } from './useRouter'\nimport type {\n  BlockerFnArgs,\n  HistoryAction,\n  HistoryLocation,\n} from '@tanstack/history'\nimport type { AnyRoute } from './route'\nimport type { ParseRoute } from './routeInfo'\nimport type { AnyRouter, RegisteredRouter } from './router'\n\ninterface ShouldBlockFnLocation<\n  out TRouteId,\n  out TFullPath,\n  out TAllParams,\n  out TFullSearchSchema,\n> {\n  routeId: TRouteId\n  fullPath: TFullPath\n  pathname: string\n  params: TAllParams\n  search: TFullSearchSchema\n}\n\ntype AnyShouldBlockFnLocation = ShouldBlockFnLocation<any, any, any, any>\ntype MakeShouldBlockFnLocationUnion<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,\n> = TRoute extends any\n  ? ShouldBlockFnLocation<\n      TRoute['id'],\n      TRoute['fullPath'],\n      TRoute['types']['allParams'],\n      TRoute['types']['fullSearchSchema']\n    >\n  : never\n\ntype BlockerResolver<TRouter extends AnyRouter = RegisteredRouter> =\n  | {\n      status: 'blocked'\n      current: MakeShouldBlockFnLocationUnion<TRouter>\n      next: MakeShouldBlockFnLocationUnion<TRouter>\n      action: HistoryAction\n      proceed: () => void\n      reset: () => void\n    }\n  | {\n      status: 'idle'\n      current: undefined\n      next: undefined\n      action: undefined\n      proceed: undefined\n      reset: undefined\n    }\n\ntype ShouldBlockFnArgs<TRouter extends AnyRouter = RegisteredRouter> = {\n  current: MakeShouldBlockFnLocationUnion<TRouter>\n  next: MakeShouldBlockFnLocationUnion<TRouter>\n  action: HistoryAction\n}\n\nexport type ShouldBlockFn<TRouter extends AnyRouter = RegisteredRouter> = (\n  args: ShouldBlockFnArgs<TRouter>,\n) => boolean | Promise<boolean>\nexport type UseBlockerOpts<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TWithResolver extends boolean = boolean,\n> = {\n  shouldBlockFn: ShouldBlockFn<TRouter>\n  enableBeforeUnload?: boolean | (() => boolean)\n  disabled?: boolean\n  withResolver?: TWithResolver\n}\n\ntype LegacyBlockerFn = () => Promise<any> | any\ntype LegacyBlockerOpts = {\n  blockerFn?: LegacyBlockerFn\n  condition?: boolean | any\n}\n\nfunction _resolveBlockerOpts(\n  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,\n  condition?: boolean | any,\n): UseBlockerOpts {\n  if (opts === undefined) {\n    return {\n      shouldBlockFn: () => true,\n      withResolver: false,\n    }\n  }\n\n  if ('shouldBlockFn' in opts) {\n    return opts\n  }\n\n  if (typeof opts === 'function') {\n    const shouldBlock = Boolean(condition ?? true)\n\n    const _customBlockerFn = async () => {\n      if (shouldBlock) return await opts()\n      return false\n    }\n\n    return {\n      shouldBlockFn: _customBlockerFn,\n      enableBeforeUnload: shouldBlock,\n      withResolver: false,\n    }\n  }\n\n  const shouldBlock = Boolean(opts.condition ?? true)\n  const fn = opts.blockerFn\n\n  const _customBlockerFn = async () => {\n    if (shouldBlock && fn !== undefined) {\n      return await fn()\n    }\n    return shouldBlock\n  }\n\n  return {\n    shouldBlockFn: _customBlockerFn,\n    enableBeforeUnload: shouldBlock,\n    withResolver: fn === undefined,\n  }\n}\n\nexport function useBlocker<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TWithResolver extends boolean = false,\n>(\n  opts: UseBlockerOpts<TRouter, TWithResolver>,\n): TWithResolver extends true ? BlockerResolver<TRouter> : void\n\n/**\n * @deprecated Use the shouldBlockFn property instead\n */\nexport function useBlocker(blockerFnOrOpts?: LegacyBlockerOpts): BlockerResolver\n\n/**\n * @deprecated Use the UseBlockerOpts object syntax instead\n */\nexport function useBlocker(\n  blockerFn?: LegacyBlockerFn,\n  condition?: boolean | any,\n): BlockerResolver\n\nexport function useBlocker(\n  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,\n  condition?: boolean | any,\n): BlockerResolver | void {\n  const {\n    shouldBlockFn,\n    enableBeforeUnload = true,\n    disabled = false,\n    withResolver = false,\n  } = _resolveBlockerOpts(opts, condition)\n\n  const router = useRouter()\n  const { history } = router\n\n  const [resolver, setResolver] = React.useState<BlockerResolver>({\n    status: 'idle',\n    current: undefined,\n    next: undefined,\n    action: undefined,\n    proceed: undefined,\n    reset: undefined,\n  })\n\n  React.useEffect(() => {\n    const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {\n      function getLocation(\n        location: HistoryLocation,\n      ): AnyShouldBlockFnLocation {\n        const parsedLocation = router.parseLocation(undefined, location)\n        const matchedRoutes = router.getMatchedRoutes(parsedLocation)\n        if (matchedRoutes.foundRoute === undefined) {\n          throw new Error(`No route found for location ${location.href}`)\n        }\n        return {\n          routeId: matchedRoutes.foundRoute.id,\n          fullPath: matchedRoutes.foundRoute.fullPath,\n          pathname: parsedLocation.pathname,\n          params: matchedRoutes.routeParams,\n          search: parsedLocation.search,\n        }\n      }\n\n      const current = getLocation(blockerFnArgs.currentLocation)\n      const next = getLocation(blockerFnArgs.nextLocation)\n\n      const shouldBlock = await shouldBlockFn({\n        action: blockerFnArgs.action,\n        current,\n        next,\n      })\n      if (!withResolver) {\n        return shouldBlock\n      }\n\n      if (!shouldBlock) {\n        return false\n      }\n\n      const promise = new Promise<boolean>((resolve) => {\n        setResolver({\n          status: 'blocked',\n          current,\n          next,\n          action: blockerFnArgs.action,\n          proceed: () => resolve(false),\n          reset: () => resolve(true),\n        })\n      })\n\n      const canNavigateAsync = await promise\n      setResolver({\n        status: 'idle',\n        current: undefined,\n        next: undefined,\n        action: undefined,\n        proceed: undefined,\n        reset: undefined,\n      })\n\n      return canNavigateAsync\n    }\n\n    return disabled\n      ? undefined\n      : history.block({ blockerFn: blockerFnComposed, enableBeforeUnload })\n  }, [shouldBlockFn, enableBeforeUnload, disabled, withResolver, history])\n\n  return resolver\n}\n\nconst _resolvePromptBlockerArgs = (\n  props: PromptProps | LegacyPromptProps,\n): UseBlockerOpts => {\n  if ('shouldBlockFn' in props) {\n    return { ...props }\n  }\n\n  const shouldBlock = Boolean(props.condition ?? true)\n  const fn = props.blockerFn\n\n  const _customBlockerFn = async () => {\n    if (shouldBlock && fn !== undefined) {\n      return await fn()\n    }\n    return shouldBlock\n  }\n\n  return {\n    shouldBlockFn: _customBlockerFn,\n    enableBeforeUnload: shouldBlock,\n    withResolver: fn === undefined,\n  }\n}\n\nexport function Block<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TWithResolver extends boolean = boolean,\n>(opts: PromptProps<TRouter, TWithResolver>): React.ReactNode\n\n/**\n *  @deprecated Use the UseBlockerOpts property instead\n */\nexport function Block(opts: LegacyPromptProps): React.ReactNode\n\nexport function Block(opts: PromptProps | LegacyPromptProps): React.ReactNode {\n  const { children, ...rest } = opts\n  const args = _resolvePromptBlockerArgs(rest)\n\n  const resolver = useBlocker(args)\n  return children\n    ? typeof children === 'function'\n      ? children(resolver as any)\n      : children\n    : null\n}\n\ntype LegacyPromptProps = {\n  blockerFn?: LegacyBlockerFn\n  condition?: boolean | any\n  children?: React.ReactNode | ((params: BlockerResolver) => React.ReactNode)\n}\n\ntype PromptProps<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TWithResolver extends boolean = boolean,\n  TParams = TWithResolver extends true ? BlockerResolver<TRouter> : void,\n> = UseBlockerOpts<TRouter, TWithResolver> & {\n  children?: React.ReactNode | ((params: TParams) => React.ReactNode)\n}\n"],"names":["shouldBlock","_customBlockerFn"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.89.2",
+  "version": "1.90.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "jsesc": "^3.0.2",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.87.6"
+    "@tanstack/history": "1.90.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/index.tsx

@@ -301,6 +301,7 @@ export type {
   DefaultTransformerStringify,
 } from './transformer'
 
+export type { UseBlockerOpts, ShouldBlockFn } from './useBlocker'
 export { useBlocker, Block } from './useBlocker'
 
 export { useNavigate, Navigate } from './useNavigate'

package/src/router.ts

@@ -1058,6 +1058,7 @@ export class Router<
 
   parseLocation = (
     previousLocation?: ParsedLocation<FullSearchSchema<TRouteTree>>,
+    locationToParse?: HistoryLocation,
   ): ParsedLocation<FullSearchSchema<TRouteTree>> => {
     const parse = ({
       pathname,
@@ -1078,7 +1079,7 @@ export class Router<
       }
     }
 
-    const location = parse(this.history.location)
+    const location = parse(locationToParse ?? this.history.location)
 
     const { __tempLocation, __tempKey } = location.state
 

package/src/useBlocker.tsx

@@ -1,92 +1,296 @@
 import * as React from 'react'
 import { useRouter } from './useRouter'
-import type { BlockerFn } from '@tanstack/history'
-import type { ReactNode } from './route'
+import type {
+  BlockerFnArgs,
+  HistoryAction,
+  HistoryLocation,
+} from '@tanstack/history'
+import type { AnyRoute } from './route'
+import type { ParseRoute } from './routeInfo'
+import type { AnyRouter, RegisteredRouter } from './router'
 
-type BlockerResolver = {
-  status: 'idle' | 'blocked'
-  proceed: () => void
-  reset: () => void
+interface ShouldBlockFnLocation<
+  out TRouteId,
+  out TFullPath,
+  out TAllParams,
+  out TFullSearchSchema,
+> {
+  routeId: TRouteId
+  fullPath: TFullPath
+  pathname: string
+  params: TAllParams
+  search: TFullSearchSchema
 }
 
-type BlockerOpts = {
-  blockerFn?: BlockerFn
+type AnyShouldBlockFnLocation = ShouldBlockFnLocation<any, any, any, any>
+type MakeShouldBlockFnLocationUnion<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,
+> = TRoute extends any
+  ? ShouldBlockFnLocation<
+      TRoute['id'],
+      TRoute['fullPath'],
+      TRoute['types']['allParams'],
+      TRoute['types']['fullSearchSchema']
+    >
+  : never
+
+type BlockerResolver<TRouter extends AnyRouter = RegisteredRouter> =
+  | {
+      status: 'blocked'
+      current: MakeShouldBlockFnLocationUnion<TRouter>
+      next: MakeShouldBlockFnLocationUnion<TRouter>
+      action: HistoryAction
+      proceed: () => void
+      reset: () => void
+    }
+  | {
+      status: 'idle'
+      current: undefined
+      next: undefined
+      action: undefined
+      proceed: undefined
+      reset: undefined
+    }
+
+type ShouldBlockFnArgs<TRouter extends AnyRouter = RegisteredRouter> = {
+  current: MakeShouldBlockFnLocationUnion<TRouter>
+  next: MakeShouldBlockFnLocationUnion<TRouter>
+  action: HistoryAction
+}
+
+export type ShouldBlockFn<TRouter extends AnyRouter = RegisteredRouter> = (
+  args: ShouldBlockFnArgs<TRouter>,
+) => boolean | Promise<boolean>
+export type UseBlockerOpts<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+> = {
+  shouldBlockFn: ShouldBlockFn<TRouter>
+  enableBeforeUnload?: boolean | (() => boolean)
+  disabled?: boolean
+  withResolver?: TWithResolver
+}
+
+type LegacyBlockerFn = () => Promise<any> | any
+type LegacyBlockerOpts = {
+  blockerFn?: LegacyBlockerFn
   condition?: boolean | any
 }
 
-export function useBlocker(blockerFnOrOpts?: BlockerOpts): BlockerResolver
+function _resolveBlockerOpts(
+  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+  condition?: boolean | any,
+): UseBlockerOpts {
+  if (opts === undefined) {
+    return {
+      shouldBlockFn: () => true,
+      withResolver: false,
+    }
+  }
+
+  if ('shouldBlockFn' in opts) {
+    return opts
+  }
+
+  if (typeof opts === 'function') {
+    const shouldBlock = Boolean(condition ?? true)
+
+    const _customBlockerFn = async () => {
+      if (shouldBlock) return await opts()
+      return false
+    }
+
+    return {
+      shouldBlockFn: _customBlockerFn,
+      enableBeforeUnload: shouldBlock,
+      withResolver: false,
+    }
+  }
+
+  const shouldBlock = Boolean(opts.condition ?? true)
+  const fn = opts.blockerFn
+
+  const _customBlockerFn = async () => {
+    if (shouldBlock && fn !== undefined) {
+      return await fn()
+    }
+    return shouldBlock
+  }
+
+  return {
+    shouldBlockFn: _customBlockerFn,
+    enableBeforeUnload: shouldBlock,
+    withResolver: fn === undefined,
+  }
+}
+
+export function useBlocker<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = false,
+>(
+  opts: UseBlockerOpts<TRouter, TWithResolver>,
+): TWithResolver extends true ? BlockerResolver<TRouter> : void
+
+/**
+ * @deprecated Use the shouldBlockFn property instead
+ */
+export function useBlocker(blockerFnOrOpts?: LegacyBlockerOpts): BlockerResolver
 
 /**
- * @deprecated Use the BlockerOpts object syntax instead
+ * @deprecated Use the UseBlockerOpts object syntax instead
  */
 export function useBlocker(
-  blockerFn?: BlockerFn,
+  blockerFn?: LegacyBlockerFn,
   condition?: boolean | any,
 ): BlockerResolver
 
 export function useBlocker(
-  blockerFnOrOpts?: BlockerFn | BlockerOpts,
+  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
   condition?: boolean | any,
-): BlockerResolver {
-  const { blockerFn, blockerCondition } = blockerFnOrOpts
-    ? typeof blockerFnOrOpts === 'function'
-      ? { blockerFn: blockerFnOrOpts, blockerCondition: condition ?? true }
-      : {
-          blockerFn: blockerFnOrOpts.blockerFn,
-          blockerCondition: blockerFnOrOpts.condition ?? true,
-        }
-    : { blockerFn: undefined, blockerCondition: condition ?? true }
-  const { history } = useRouter()
+): BlockerResolver | void {
+  const {
+    shouldBlockFn,
+    enableBeforeUnload = true,
+    disabled = false,
+    withResolver = false,
+  } = _resolveBlockerOpts(opts, condition)
+
+  const router = useRouter()
+  const { history } = router
 
   const [resolver, setResolver] = React.useState<BlockerResolver>({
     status: 'idle',
-    proceed: () => {},
-    reset: () => {},
+    current: undefined,
+    next: undefined,
+    action: undefined,
+    proceed: undefined,
+    reset: undefined,
   })
 
   React.useEffect(() => {
-    const blockerFnComposed = async () => {
-      // If a function is provided, it takes precedence over the promise blocker
-      if (blockerFn) {
-        return await blockerFn()
+    const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {
+      function getLocation(
+        location: HistoryLocation,
+      ): AnyShouldBlockFnLocation {
+        const parsedLocation = router.parseLocation(undefined, location)
+        const matchedRoutes = router.getMatchedRoutes(parsedLocation)
+        if (matchedRoutes.foundRoute === undefined) {
+          throw new Error(`No route found for location ${location.href}`)
+        }
+        return {
+          routeId: matchedRoutes.foundRoute.id,
+          fullPath: matchedRoutes.foundRoute.fullPath,
+          pathname: parsedLocation.pathname,
+          params: matchedRoutes.routeParams,
+          search: parsedLocation.search,
+        }
+      }
+
+      const current = getLocation(blockerFnArgs.currentLocation)
+      const next = getLocation(blockerFnArgs.nextLocation)
+
+      const shouldBlock = await shouldBlockFn({
+        action: blockerFnArgs.action,
+        current,
+        next,
+      })
+      if (!withResolver) {
+        return shouldBlock
+      }
+
+      if (!shouldBlock) {
+        return false
       }
 
       const promise = new Promise<boolean>((resolve) => {
         setResolver({
           status: 'blocked',
-          proceed: () => resolve(true),
-          reset: () => resolve(false),
+          current,
+          next,
+          action: blockerFnArgs.action,
+          proceed: () => resolve(false),
+          reset: () => resolve(true),
         })
       })
 
       const canNavigateAsync = await promise
-
       setResolver({
         status: 'idle',
-        proceed: () => {},
-        reset: () => {},
+        current: undefined,
+        next: undefined,
+        action: undefined,
+        proceed: undefined,
+        reset: undefined,
       })
 
       return canNavigateAsync
     }
 
-    return !blockerCondition ? undefined : history.block(blockerFnComposed)
-  }, [blockerFn, blockerCondition, history])
+    return disabled
+      ? undefined
+      : history.block({ blockerFn: blockerFnComposed, enableBeforeUnload })
+  }, [shouldBlockFn, enableBeforeUnload, disabled, withResolver, history])
 
   return resolver
 }
 
-export function Block({ blockerFn, condition, children }: PromptProps) {
-  const resolver = useBlocker({ blockerFn, condition })
+const _resolvePromptBlockerArgs = (
+  props: PromptProps | LegacyPromptProps,
+): UseBlockerOpts => {
+  if ('shouldBlockFn' in props) {
+    return { ...props }
+  }
+
+  const shouldBlock = Boolean(props.condition ?? true)
+  const fn = props.blockerFn
+
+  const _customBlockerFn = async () => {
+    if (shouldBlock && fn !== undefined) {
+      return await fn()
+    }
+    return shouldBlock
+  }
+
+  return {
+    shouldBlockFn: _customBlockerFn,
+    enableBeforeUnload: shouldBlock,
+    withResolver: fn === undefined,
+  }
+}
+
+export function Block<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+>(opts: PromptProps<TRouter, TWithResolver>): React.ReactNode
+
+/**
+ *  @deprecated Use the UseBlockerOpts property instead
+ */
+export function Block(opts: LegacyPromptProps): React.ReactNode
+
+export function Block(opts: PromptProps | LegacyPromptProps): React.ReactNode {
+  const { children, ...rest } = opts
+  const args = _resolvePromptBlockerArgs(rest)
+
+  const resolver = useBlocker(args)
   return children
     ? typeof children === 'function'
-      ? children(resolver)
+      ? children(resolver as any)
       : children
     : null
 }
 
-export type PromptProps = {
-  blockerFn?: BlockerFn
+type LegacyPromptProps = {
+  blockerFn?: LegacyBlockerFn
   condition?: boolean | any
-  children?: ReactNode | (({ proceed, reset }: BlockerResolver) => ReactNode)
+  children?: React.ReactNode | ((params: BlockerResolver) => React.ReactNode)
+}
+
+type PromptProps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+  TParams = TWithResolver extends true ? BlockerResolver<TRouter> : void,
+> = UseBlockerOpts<TRouter, TWithResolver> & {
+  children?: React.ReactNode | ((params: TParams) => React.ReactNode)
 }