@tanstack/react-router 1.33.7 → 1.34.0

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.7",
+  "version": "1.34.0",
   "description": "",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/index.tsx

@@ -269,3 +269,4 @@ export {
   DefaultGlobalNotFound,
   type NotFoundError,
 } from './not-found'
+export { type Manifest, type RouterManagedTag } from './manifest'

package/src/manifest.ts

@@ -0,0 +1,31 @@
+export type Manifest = {
+  routes: Record<
+    string,
+    {
+      preloads?: Array<string>
+      assets?: Array<RouterManagedTag>
+    }
+  >
+}
+
+export type RouterManagedTag =
+  | {
+      tag: 'title'
+      attrs?: Record<string, any>
+      children: string
+    }
+  | {
+      tag: 'meta' | 'link'
+      attrs?: Record<string, any>
+      children?: never
+    }
+  | {
+      tag: 'script'
+      attrs?: Record<string, any>
+      children?: string
+    }
+  | {
+      tag: 'style'
+      attrs?: Record<string, any>
+      children?: string
+    }

package/src/router.ts

@@ -27,6 +27,7 @@ import {
 } from './path'
 import { isRedirect, isResolvedRedirect } from './redirects'
 import { isNotFound } from './not-found'
+import type { Manifest } from './manifest'
 import type * as React from 'react'
 import type {
   HistoryLocation,
@@ -393,6 +394,7 @@ export type DehydratedRouteMatch = Pick<
 
 export interface DehydratedRouter {
   state: DehydratedRouterState
+  manifest?: Manifest
 }
 
 export type RouterConstructorOptions<
@@ -484,6 +486,7 @@ export class Router<
   injectedHtml: Array<InjectedHtmlEntry> = []
   dehydratedData?: TDehydrated
   viewTransitionPromise?: ControlledPromise<true>
+  manifest?: Manifest
 
   // Must build in constructor
   __store!: Store<RouterState<TRouteTree>>
@@ -2314,6 +2317,7 @@ export class Router<
             : undefined,
         })),
       },
+      manifest: this.manifest,
     }
   }
 
@@ -2376,6 +2380,8 @@ export class Router<
         matches: matches as any,
       }
     })
+
+    this.manifest = ctx.router.manifest
   }
 
   handleNotFound = (matches: Array<AnyRouteMatch>, err: NotFoundError) => {

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)
 }