@tanstack/react-router 1.33.8 → 1.34.1

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

package/src/Transitioner.tsx

@@ -23,7 +23,9 @@ export function Transitioner() {
     routerState.isLoading || isTransitioning || hasPendingMatches
   const previousIsAnyPending = usePrevious(isAnyPending)
 
-  router.startReactTransition = startReactTransition_
+  if (!router.isServer) {
+    router.startReactTransition = startReactTransition_
+  }
 
   // Subscribe to location changes
   // and try to load the new location

package/src/awaited.tsx

@@ -10,7 +10,9 @@ export type AwaitOptions<T> = {
   promise: DeferredPromise<T>
 }
 
-export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
+export function useAwaited<T>({
+  promise,
+}: AwaitOptions<T>): [T, DeferredPromise<T>] {
   const router = useRouter()
   // const rerender = React.useReducer((x) => x + 1, 0)[1]
 
@@ -56,20 +58,6 @@ export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
     throw isDehydratedDeferred(promise) ? state.promise : promise
   }
 
-  // If we are the originator of the promise,
-  // inject the state into the HTML stream
-  if (!isDehydratedDeferred(promise)) {
-    router.injectHtml(
-      `<script class='tsr_deferred_data'>window.__TSR__DEFERRED__${state.uid} = ${JSON.stringify(router.options.transformer.stringify(state))}
-  if (window.__TSR__ROUTER__) {
-    let deferred = window.__TSR__ROUTER__.getDeferred('${state.uid}');
-    if (deferred) deferred.resolve(window.__TSR__DEFERRED__${state.uid});
-  }
-  document.querySelectorAll('.tsr_deferred_data').forEach((el) => el.parentElement.removeChild(el));
-</script>`,
-    )
-  }
-
   if (state.status === 'error') {
     if (typeof document !== 'undefined') {
       if (isServerSideError(state.error)) {
@@ -93,7 +81,7 @@ export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
     }
   }
 
-  return [promise.__deferredState.data as any]
+  return [promise.__deferredState.data as any, promise]
 }
 
 export function Await<T>(
@@ -115,6 +103,40 @@ function AwaitInner<T>(
     children: (result: T) => React.ReactNode
   },
 ) {
-  const awaited = useAwaited(props)
-  return props.children(...awaited) as React.JSX.Element
+  const router = useRouter()
+  const [data, promise] = useAwaited(props)
+  const state = promise.__deferredState
+  // If we are the originator of the promise,
+  // inject the state into the HTML stream
+  return (
+    <>
+      {!isDehydratedDeferred(promise) ? (
+        <ScriptOnce
+          children={`window.__TSR__DEFERRED__${state.uid} = ${JSON.stringify(router.options.transformer.stringify(state))}
+  if (window.__TSR__ROUTER__) {
+    let deferred = window.__TSR__ROUTER__.getDeferred('${state.uid}');
+    if (deferred) deferred.resolve(window.__TSR__DEFERRED__${state.uid});
+  }
+  document.querySelectorAll('.tsr-script-once').forEach((el) => el.parentElement.removeChild(el));`}
+        />
+      ) : null}
+      {props.children(data)}
+    </>
+  )
+}
+
+function ScriptOnce({
+  className,
+  children,
+  ...rest
+}: { children: string } & React.HTMLProps<HTMLScriptElement>) {
+  return (
+    <script
+      {...rest}
+      className={`tsr-script-once ${className || ''}`}
+      dangerouslySetInnerHTML={{
+        __html: children,
+      }}
+    />
+  )
 }

package/src/router.ts

@@ -483,7 +483,6 @@ export class Router<
   shouldViewTransition?: boolean = undefined
   latestLoadPromise: Promise<void> = Promise.resolve()
   subscribers = new Set<RouterListener<RouterEvent>>()
-  injectedHtml: Array<InjectedHtmlEntry> = []
   dehydratedData?: TDehydrated
   viewTransitionPromise?: ControlledPromise<true>
   manifest?: Manifest
@@ -2231,9 +2230,10 @@ export class Router<
     return match
   }
 
-  injectHtml = async (html: string | (() => Promise<string> | string)) => {
-    this.injectedHtml.push(html)
-  }
+  /**
+   * @deprecated Injecting HTML directly is no longer supported. Use the new <ScriptOnce /> component instead.
+   */
+  injectHtml = async (html: string | (() => Promise<string> | string)) => {}
 
   // We use a token -> weak map to keep track of deferred promises
   // that are registered on the server and need to be resolved
@@ -2250,55 +2250,6 @@ export class Router<
     return this.registeredDeferreds.get(token)
   }
 
-  /**
-   * @deprecated Please inject your own html using the `injectHtml` method
-   */
-  dehydrateData = <T>(key: any, getData: T | (() => Promise<T> | T)) => {
-    warning(
-      false,
-      `The dehydrateData method is deprecated. Please use the injectHtml method to inject your own data.`,
-    )
-
-    if (typeof document === 'undefined') {
-      const strKey = typeof key === 'string' ? key : JSON.stringify(key)
-
-      this.injectHtml(async () => {
-        const id = `__TSR_DEHYDRATED__${strKey}`
-        const data =
-          typeof getData === 'function' ? await (getData as any)() : getData
-        return `<script id='${id}' suppressHydrationWarning>
-  window["__TSR_DEHYDRATED__${escapeJSON(
-    strKey,
-  )}"] = ${JSON.stringify(this.options.transformer.stringify(data))}
-</script>`
-      })
-
-      return () => this.hydrateData<T>(key)
-    }
-
-    return () => undefined
-  }
-
-  /**
-   * @deprecated Please extract your own data from scripts injected using the `injectHtml` method
-   */
-  hydrateData = <T = unknown>(key: any) => {
-    warning(
-      false,
-      `The hydrateData method is deprecated. Please use the extractHtml method to extract your own data.`,
-    )
-
-    if (typeof document !== 'undefined') {
-      const strKey = typeof key === 'string' ? key : JSON.stringify(key)
-
-      return this.options.transformer.parse(
-        window[`__TSR_DEHYDRATED__${strKey}` as any] as unknown as string,
-      ) as T
-    }
-
-    return undefined
-  }
-
   dehydrate = (): DehydratedRouter => {
     const pickError =
       this.options.errorSerializer?.serialize ?? defaultSerializeError

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