@tanstack/react-router 1.33.8 → 1.34.0

package/dist/cjs/useBlocker.cjs

@@ -19,17 +19,47 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-function useBlocker(blockerFn, condition = true) {
+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.useRouter();
-  React__namespace.useEffect(() => {
-    if (!condition)
-      return;
-    return history.block(blockerFn);
+  const [resolver, setResolver] = React__namespace.useState({
+    status: "idle",
+    proceed: () => {
+    },
+    reset: () => {
+    }
+  });
+  const createPromise = () => new Promise((resolve) => {
+    setResolver({
+      status: "idle",
+      proceed: () => resolve(true),
+      reset: () => resolve(false)
+    });
   });
+  const [promise, setPromise] = React__namespace.useState(createPromise);
+  React__namespace.useEffect(() => {
+    const blockerFnComposed = async () => {
+      if (blockerFn) {
+        return await blockerFn();
+      }
+      setResolver((prev) => ({
+        ...prev,
+        status: "blocked"
+      }));
+      const canNavigateAsync = await promise;
+      setPromise(createPromise);
+      return canNavigateAsync;
+    };
+    return !blockerCondition ? void 0 : history.block(blockerFnComposed);
+  }, [blockerFn, blockerCondition, history, promise]);
+  return resolver;
 }
-function Block({ blocker, condition, children }) {
-  useBlocker(blocker, condition);
-  return children ?? null;
+function Block({ blockerFn, condition, children }) {
+  const resolver = useBlocker({ blockerFn, condition });
+  return children ? typeof children === "function" ? children(resolver) : children : null;
 }
 exports.Block = Block;
 exports.useBlocker = useBlocker;

package/dist/cjs/useBlocker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useBlocker.cjs","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\nexport function useBlocker(\n  blockerFn: BlockerFn,\n  condition: boolean | any = true,\n): void {\n  const { history } = useRouter()\n\n  React.useEffect(() => {\n    if (!condition) return\n    return history.block(blockerFn)\n  })\n}\n\nexport function Block({ blocker, condition, children }: PromptProps) {\n  useBlocker(blocker, condition)\n  return children ?? null\n}\n\nexport type PromptProps = {\n  blocker: BlockerFn\n  condition?: boolean | any\n  children?: ReactNode\n}\n"],"names":["useRouter","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKgB,SAAA,WACd,WACA,YAA2B,MACrB;AACA,QAAA,EAAE,YAAYA,UAAAA;AAEpBC,mBAAM,UAAU,MAAM;AACpB,QAAI,CAAC;AAAW;AACT,WAAA,QAAQ,MAAM,SAAS;AAAA,EAAA,CAC/B;AACH;AAEO,SAAS,MAAM,EAAE,SAAS,WAAW,YAAyB;AACnE,aAAW,SAAS,SAAS;AAC7B,SAAO,YAAY;AACrB;;;"}
+{"version":3,"file":"useBlocker.cjs","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  const createPromise = () =>\n    new Promise<boolean>((resolve) => {\n      setResolver({\n        status: 'idle',\n        proceed: () => resolve(true),\n        reset: () => resolve(false),\n      })\n    })\n\n  const [promise, setPromise] = React.useState(createPromise)\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      setResolver((prev) => ({\n        ...prev,\n        status: 'blocked',\n      }))\n      const canNavigateAsync = await promise\n\n      setPromise(createPromise)\n\n      return canNavigateAsync\n    }\n\n    return !blockerCondition ? undefined : history.block(blockerFnComposed)\n  }, [blockerFn, blockerCondition, history, promise])\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":["useRouter","React"],"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;AACrD,QAAA,EAAE,YAAYA,UAAAA;AAEpB,QAAM,CAAC,UAAU,WAAW,IAAIC,iBAAM,SAA0B;AAAA,IAC9D,QAAQ;AAAA,IACR,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,OAAO,MAAM;AAAA,IAAC;AAAA,EAAA,CACf;AAED,QAAM,gBAAgB,MACpB,IAAI,QAAiB,CAAC,YAAY;AACpB,gBAAA;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,MAAM,QAAQ,IAAI;AAAA,MAC3B,OAAO,MAAM,QAAQ,KAAK;AAAA,IAAA,CAC3B;AAAA,EAAA,CACF;AAEH,QAAM,CAAC,SAAS,UAAU,IAAIA,iBAAM,SAAS,aAAa;AAE1DA,mBAAM,UAAU,MAAM;AACpB,UAAM,oBAAoB,YAAY;AAEpC,UAAI,WAAW;AACb,eAAO,MAAM,UAAU;AAAA,MACzB;AAEA,kBAAY,CAAC,UAAU;AAAA,QACrB,GAAG;AAAA,QACH,QAAQ;AAAA,MACR,EAAA;AACF,YAAM,mBAAmB,MAAM;AAE/B,iBAAW,aAAa;AAEjB,aAAA;AAAA,IAAA;AAGT,WAAO,CAAC,mBAAmB,SAAY,QAAQ,MAAM,iBAAiB;AAAA,KACrE,CAAC,WAAW,kBAAkB,SAAS,OAAO,CAAC;AAE3C,SAAA;AACT;AAEO,SAAS,MAAM,EAAE,WAAW,WAAW,YAAyB;AACrE,QAAM,WAAW,WAAW,EAAE,WAAW,UAAW,CAAA;AACpD,SAAO,WACH,OAAO,aAAa,aAClB,SAAS,QAAQ,IACjB,WACF;AACN;;;"}

package/dist/cjs/useBlocker.d.cts

@@ -1,10 +1,24 @@
 import { BlockerFn } from '@tanstack/history';
 import { ReactNode } from './route.cjs';
 
-export declare function useBlocker(blockerFn: BlockerFn, condition?: boolean | any): void;
-export declare function Block({ blocker, condition, children }: PromptProps): any;
+type BlockerResolver = {
+    status: 'idle' | 'blocked';
+    proceed: () => void;
+    reset: () => void;
+};
+type BlockerOpts = {
+    blockerFn?: BlockerFn;
+    condition?: boolean | any;
+};
+export declare function useBlocker(blockerFnOrOpts?: BlockerOpts): BlockerResolver;
+/**
+ * @deprecated Use the BlockerOpts 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 = {
-    blocker: BlockerFn;
+    blockerFn?: BlockerFn;
     condition?: boolean | any;
-    children?: ReactNode;
+    children?: ReactNode | (({ proceed, reset }: BlockerResolver) => ReactNode);
 };
+export {};

package/dist/esm/useBlocker.d.ts

@@ -1,10 +1,24 @@
 import { BlockerFn } from '@tanstack/history';
 import { ReactNode } from './route.js';
 
-export declare function useBlocker(blockerFn: BlockerFn, condition?: boolean | any): void;
-export declare function Block({ blocker, condition, children }: PromptProps): any;
+type BlockerResolver = {
+    status: 'idle' | 'blocked';
+    proceed: () => void;
+    reset: () => void;
+};
+type BlockerOpts = {
+    blockerFn?: BlockerFn;
+    condition?: boolean | any;
+};
+export declare function useBlocker(blockerFnOrOpts?: BlockerOpts): BlockerResolver;
+/**
+ * @deprecated Use the BlockerOpts 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 = {
-    blocker: BlockerFn;
+    blockerFn?: BlockerFn;
     condition?: boolean | any;
-    children?: ReactNode;
+    children?: ReactNode | (({ proceed, reset }: BlockerResolver) => ReactNode);
 };
+export {};

package/dist/esm/useBlocker.js

@@ -1,16 +1,46 @@
 import * as React from "react";
 import { useRouter } from "./useRouter.js";
-function useBlocker(blockerFn, condition = true) {
+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();
-  React.useEffect(() => {
-    if (!condition)
-      return;
-    return history.block(blockerFn);
+  const [resolver, setResolver] = React.useState({
+    status: "idle",
+    proceed: () => {
+    },
+    reset: () => {
+    }
+  });
+  const createPromise = () => new Promise((resolve) => {
+    setResolver({
+      status: "idle",
+      proceed: () => resolve(true),
+      reset: () => resolve(false)
+    });
   });
+  const [promise, setPromise] = React.useState(createPromise);
+  React.useEffect(() => {
+    const blockerFnComposed = async () => {
+      if (blockerFn) {
+        return await blockerFn();
+      }
+      setResolver((prev) => ({
+        ...prev,
+        status: "blocked"
+      }));
+      const canNavigateAsync = await promise;
+      setPromise(createPromise);
+      return canNavigateAsync;
+    };
+    return !blockerCondition ? void 0 : history.block(blockerFnComposed);
+  }, [blockerFn, blockerCondition, history, promise]);
+  return resolver;
 }
-function Block({ blocker, condition, children }) {
-  useBlocker(blocker, condition);
-  return children ?? null;
+function Block({ blockerFn, condition, children }) {
+  const resolver = useBlocker({ blockerFn, condition });
+  return children ? typeof children === "function" ? children(resolver) : children : null;
 }
 export {
   Block,

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\nexport function useBlocker(\n  blockerFn: BlockerFn,\n  condition: boolean | any = true,\n): void {\n  const { history } = useRouter()\n\n  React.useEffect(() => {\n    if (!condition) return\n    return history.block(blockerFn)\n  })\n}\n\nexport function Block({ blocker, condition, children }: PromptProps) {\n  useBlocker(blocker, condition)\n  return children ?? null\n}\n\nexport type PromptProps = {\n  blocker: BlockerFn\n  condition?: boolean | any\n  children?: ReactNode\n}\n"],"names":[],"mappings":";;AAKgB,SAAA,WACd,WACA,YAA2B,MACrB;AACA,QAAA,EAAE,YAAY;AAEpB,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC;AAAW;AACT,WAAA,QAAQ,MAAM,SAAS;AAAA,EAAA,CAC/B;AACH;AAEO,SAAS,MAAM,EAAE,SAAS,WAAW,YAAyB;AACnE,aAAW,SAAS,SAAS;AAC7B,SAAO,YAAY;AACrB;"}
+{"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  const createPromise = () =>\n    new Promise<boolean>((resolve) => {\n      setResolver({\n        status: 'idle',\n        proceed: () => resolve(true),\n        reset: () => resolve(false),\n      })\n    })\n\n  const [promise, setPromise] = React.useState(createPromise)\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      setResolver((prev) => ({\n        ...prev,\n        status: 'blocked',\n      }))\n      const canNavigateAsync = await promise\n\n      setPromise(createPromise)\n\n      return canNavigateAsync\n    }\n\n    return !blockerCondition ? undefined : history.block(blockerFnComposed)\n  }, [blockerFn, blockerCondition, history, promise])\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;AACrD,QAAA,EAAE,YAAY;AAEpB,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAA0B;AAAA,IAC9D,QAAQ;AAAA,IACR,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,OAAO,MAAM;AAAA,IAAC;AAAA,EAAA,CACf;AAED,QAAM,gBAAgB,MACpB,IAAI,QAAiB,CAAC,YAAY;AACpB,gBAAA;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,MAAM,QAAQ,IAAI;AAAA,MAC3B,OAAO,MAAM,QAAQ,KAAK;AAAA,IAAA,CAC3B;AAAA,EAAA,CACF;AAEH,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,aAAa;AAE1D,QAAM,UAAU,MAAM;AACpB,UAAM,oBAAoB,YAAY;AAEpC,UAAI,WAAW;AACb,eAAO,MAAM,UAAU;AAAA,MACzB;AAEA,kBAAY,CAAC,UAAU;AAAA,QACrB,GAAG;AAAA,QACH,QAAQ;AAAA,MACR,EAAA;AACF,YAAM,mBAAmB,MAAM;AAE/B,iBAAW,aAAa;AAEjB,aAAA;AAAA,IAAA;AAGT,WAAO,CAAC,mBAAmB,SAAY,QAAQ,MAAM,iBAAiB;AAAA,KACrE,CAAC,WAAW,kBAAkB,SAAS,OAAO,CAAC;AAE3C,SAAA;AACT;AAEO,SAAS,MAAM,EAAE,WAAW,WAAW,YAAyB;AACrE,QAAM,WAAW,WAAW,EAAE,WAAW,UAAW,CAAA;AACpD,SAAO,WACH,OAAO,aAAa,aAClB,SAAS,QAAQ,IACjB,WACF;AACN;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.33.8",
+  "version": "1.34.0",
   "description": "",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/useBlocker.tsx

@@ -3,25 +3,93 @@ import { useRouter } from './useRouter'
 import type { BlockerFn } from '@tanstack/history'
 import type { ReactNode } from './route'
 
+type BlockerResolver = {
+  status: 'idle' | 'blocked'
+  proceed: () => void
+  reset: () => void
+}
+
+type BlockerOpts = {
+  blockerFn?: BlockerFn
+  condition?: boolean | any
+}
+
+export function useBlocker(blockerFnOrOpts?: BlockerOpts): BlockerResolver
+
+/**
+ * @deprecated Use the BlockerOpts object syntax instead
+ */
+export function useBlocker(
+  blockerFn?: BlockerFn,
+  condition?: boolean | any,
+): BlockerResolver
+
 export function useBlocker(
-  blockerFn: BlockerFn,
-  condition: boolean | any = true,
-): void {
+  blockerFnOrOpts?: BlockerFn | BlockerOpts,
+  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()
 
-  React.useEffect(() => {
-    if (!condition) return
-    return history.block(blockerFn)
+  const [resolver, setResolver] = React.useState<BlockerResolver>({
+    status: 'idle',
+    proceed: () => {},
+    reset: () => {},
   })
+
+  const createPromise = () =>
+    new Promise<boolean>((resolve) => {
+      setResolver({
+        status: 'idle',
+        proceed: () => resolve(true),
+        reset: () => resolve(false),
+      })
+    })
+
+  const [promise, setPromise] = React.useState(createPromise)
+
+  React.useEffect(() => {
+    const blockerFnComposed = async () => {
+      // If a function is provided, it takes precedence over the promise blocker
+      if (blockerFn) {
+        return await blockerFn()
+      }
+
+      setResolver((prev) => ({
+        ...prev,
+        status: 'blocked',
+      }))
+      const canNavigateAsync = await promise
+
+      setPromise(createPromise)
+
+      return canNavigateAsync
+    }
+
+    return !blockerCondition ? undefined : history.block(blockerFnComposed)
+  }, [blockerFn, blockerCondition, history, promise])
+
+  return resolver
 }
 
-export function Block({ blocker, condition, children }: PromptProps) {
-  useBlocker(blocker, condition)
-  return children ?? null
+export function Block({ blockerFn, condition, children }: PromptProps) {
+  const resolver = useBlocker({ blockerFn, condition })
+  return children
+    ? typeof children === 'function'
+      ? children(resolver)
+      : children
+    : null
 }
 
 export type PromptProps = {
-  blocker: BlockerFn
+  blockerFn?: BlockerFn
   condition?: boolean | any
-  children?: ReactNode
+  children?: ReactNode | (({ proceed, reset }: BlockerResolver) => ReactNode)
 }