@tanstack/react-router 1.34.2 → 1.34.3

package/dist/esm/awaited.js.map

@@ -1 +1 @@
-{"version":3,"file":"awaited.js","sources":["../../src/awaited.tsx"],"sourcesContent":["import * as React from 'react'\nimport warning from 'tiny-warning'\nimport { useRouter } from './useRouter'\nimport { defaultSerializeError } from './router'\nimport { isDehydratedDeferred } from './defer'\nimport { defaultDeserializeError, isServerSideError } from './Matches'\nimport type { DeferredPromise } from './defer'\n\nexport type AwaitOptions<T> = {\n  promise: DeferredPromise<T>\n}\n\nexport function useAwaited<T>({\n  promise,\n}: AwaitOptions<T>): [T, DeferredPromise<T>] {\n  const router = useRouter()\n  // const rerender = React.useReducer((x) => x + 1, 0)[1]\n\n  const state = promise.__deferredState\n\n  // Dehydrated promises only\n  // Successful or errored deferred promises mean they\n  // were resolved on the server and no further action is needed\n  if (isDehydratedDeferred(promise) && state.status === 'pending') {\n    const streamedData = (window as any)[`__TSR__DEFERRED__${state.uid}`]\n\n    if (streamedData) {\n      Object.assign(state, router.options.transformer.parse(streamedData))\n    } else {\n      let token = router.registeredDeferredsIds.get(state.uid)\n\n      // If we haven't yet, create a promise and resolver that our streamed HTML can use\n      // when the client-side data is streamed in and ready.\n      if (!token) {\n        token = {}\n        router.registeredDeferredsIds.set(state.uid, token)\n        router.registeredDeferreds.set(token, state)\n\n        Object.assign(state, {\n          resolve: () => {\n            state.__resolvePromise?.()\n            // rerender()\n          },\n          promise: new Promise((r) => {\n            state.__resolvePromise = r as any\n          }),\n          __resolvePromise: () => {},\n        })\n      }\n    }\n  }\n\n  // If the promise is pending, always throw the state.promise\n  // For originating promises, this will be the original promise\n  // For dehydrated promises, this will be the placeholder promise\n  // that will be resolved when the server sends the real data\n  if (state.status === 'pending') {\n    throw isDehydratedDeferred(promise) ? state.promise : promise\n  }\n\n  if (state.status === 'error') {\n    if (typeof document !== 'undefined') {\n      if (isServerSideError(state.error)) {\n        throw (\n          router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n        )(state.error.data as any)\n      } else {\n        warning(\n          false,\n          \"Encountered a server-side error that doesn't fit the expected shape\",\n        )\n        throw state.error\n      }\n    } else {\n      throw {\n        data: (\n          router.options.errorSerializer?.serialize ?? defaultSerializeError\n        )(state.error),\n        __isServerError: true,\n      }\n    }\n  }\n\n  return [promise.__deferredState.data as any, promise]\n}\n\nexport function Await<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n) {\n  const inner = <AwaitInner {...props} />\n  if (props.fallback) {\n    return <React.Suspense fallback={props.fallback}>{inner}</React.Suspense>\n  }\n  return inner\n}\n\nfunction AwaitInner<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n) {\n  const router = useRouter()\n  const [data, promise] = useAwaited(props)\n  const state = promise.__deferredState\n  // If we are the originator of the promise,\n  // inject the state into the HTML stream\n  return (\n    <>\n      {!isDehydratedDeferred(promise) ? (\n        <ScriptOnce\n          children={`window.__TSR__DEFERRED__${state.uid} = ${JSON.stringify(router.options.transformer.stringify(state))}\n  if (window.__TSR__ROUTER__) {\n    let deferred = window.__TSR__ROUTER__.getDeferred('${state.uid}');\n    if (deferred) deferred.resolve(window.__TSR__DEFERRED__${state.uid});\n  }\n  document.querySelectorAll('.tsr-script-once').forEach((el) => el.parentElement.removeChild(el));`}\n        />\n      ) : null}\n      {props.children(data)}\n    </>\n  )\n}\n\nfunction ScriptOnce({\n  className,\n  children,\n  ...rest\n}: { children: string } & React.HTMLProps<HTMLScriptElement>) {\n  return (\n    <script\n      {...rest}\n      className={`tsr-script-once ${className || ''}`}\n      dangerouslySetInnerHTML={{\n        __html: children,\n      }}\n    />\n  )\n}\n"],"names":["_a"],"mappings":";;;;;;;AAYO,SAAS,WAAc;AAAA,EAC5B;AACF,GAA6C;;AAC3C,QAAM,SAAS;AAGf,QAAM,QAAQ,QAAQ;AAKtB,MAAI,qBAAqB,OAAO,KAAK,MAAM,WAAW,WAAW;AAC/D,UAAM,eAAgB,OAAe,oBAAoB,MAAM,GAAG,EAAE;AAEpE,QAAI,cAAc;AAChB,aAAO,OAAO,OAAO,OAAO,QAAQ,YAAY,MAAM,YAAY,CAAC;AAAA,IAAA,OAC9D;AACL,UAAI,QAAQ,OAAO,uBAAuB,IAAI,MAAM,GAAG;AAIvD,UAAI,CAAC,OAAO;AACV,gBAAQ,CAAA;AACR,eAAO,uBAAuB,IAAI,MAAM,KAAK,KAAK;AAC3C,eAAA,oBAAoB,IAAI,OAAO,KAAK;AAE3C,eAAO,OAAO,OAAO;AAAA,UACnB,SAAS,MAAM;;AACb,aAAAA,MAAA,MAAM,qBAAN,gBAAAA,IAAA;AAAA,UAEF;AAAA,UACA,SAAS,IAAI,QAAQ,CAAC,MAAM;AAC1B,kBAAM,mBAAmB;AAAA,UAAA,CAC1B;AAAA,UACD,kBAAkB,MAAM;AAAA,UAAC;AAAA,QAAA,CAC1B;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAMI,MAAA,MAAM,WAAW,WAAW;AAC9B,UAAM,qBAAqB,OAAO,IAAI,MAAM,UAAU;AAAA,EACxD;AAEI,MAAA,MAAM,WAAW,SAAS;AACxB,QAAA,OAAO,aAAa,aAAa;AAC/B,UAAA,kBAAkB,MAAM,KAAK,GAAG;AAClC,iBACE,YAAO,QAAQ,oBAAf,mBAAgC,gBAAe,yBAC/C,MAAM,MAAM,IAAW;AAAA,MAAA,OACpB;AACL;AAAA,UACE;AAAA,UACA;AAAA,QAAA;AAEF,cAAM,MAAM;AAAA,MACd;AAAA,IAAA,OACK;AACC,YAAA;AAAA,QACJ,SACE,YAAO,QAAQ,oBAAf,mBAAgC,cAAa,uBAC7C,MAAM,KAAK;AAAA,QACb,iBAAiB;AAAA,MAAA;AAAA,IAErB;AAAA,EACF;AAEA,SAAO,CAAC,QAAQ,gBAAgB,MAAa,OAAO;AACtD;AAEO,SAAS,MACd,OAIA;AACA,QAAM,QAAQ,oBAAC,YAAY,EAAA,GAAG,MAAO,CAAA;AACrC,MAAI,MAAM,UAAU;AAClB,+BAAQ,MAAM,UAAN,EAAe,UAAU,MAAM,UAAW,UAAM,MAAA,CAAA;AAAA,EAC1D;AACO,SAAA;AACT;AAEA,SAAS,WACP,OAIA;AACA,QAAM,SAAS;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,WAAW,KAAK;AACxC,QAAM,QAAQ,QAAQ;AAGtB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,CAAA,qBAAqB,OAAO,IAC5B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,2BAA2B,MAAM,GAAG,MAAM,KAAK,UAAU,OAAO,QAAQ,YAAY,UAAU,KAAK,CAAC,CAAC;AAAA;AAAA,yDAEhE,MAAM,GAAG;AAAA,6DACL,MAAM,GAAG;AAAA;AAAA;AAAA,MAAA;AAAA,IAAA,IAI5D;AAAA,IACH,MAAM,SAAS,IAAI;AAAA,EACtB,EAAA,CAAA;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA8D;AAE1D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,mBAAmB,aAAa,EAAE;AAAA,MAC7C,yBAAyB;AAAA,QACvB,QAAQ;AAAA,MACV;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"awaited.js","sources":["../../src/awaited.tsx"],"sourcesContent":["import * as React from 'react'\nimport warning from 'tiny-warning'\nimport { useRouter } from './useRouter'\nimport { defaultSerializeError } from './router'\nimport { isDehydratedDeferred } from './defer'\nimport { defaultDeserializeError, isServerSideError } from './Matches'\nimport type { DeferredPromise } from './defer'\n\nexport type AwaitOptions<T> = {\n  promise: DeferredPromise<T>\n}\n\nexport function useAwaited<T>({\n  promise,\n}: AwaitOptions<T>): [T, DeferredPromise<T>] {\n  const router = useRouter()\n  // const rerender = React.useReducer((x) => x + 1, 0)[1]\n\n  const state = promise.__deferredState\n\n  // Dehydrated promises only\n  // Successful or errored deferred promises mean they\n  // were resolved on the server and no further action is needed\n  if (isDehydratedDeferred(promise) && state.status === 'pending') {\n    const streamedData = (window as any)[`__TSR__DEFERRED__${state.uid}`]\n\n    if (streamedData) {\n      Object.assign(state, router.options.transformer.parse(streamedData))\n    } else {\n      let token = router.registeredDeferredsIds.get(state.uid)\n\n      // If we haven't yet, create a promise and resolver that our streamed HTML can use\n      // when the client-side data is streamed in and ready.\n      if (!token) {\n        token = {}\n        router.registeredDeferredsIds.set(state.uid, token)\n        router.registeredDeferreds.set(token, state)\n\n        Object.assign(state, {\n          resolve: () => {\n            state.__resolvePromise?.()\n            // rerender()\n          },\n          promise: new Promise((r) => {\n            state.__resolvePromise = r as any\n          }),\n          __resolvePromise: () => {},\n        })\n      }\n    }\n  }\n\n  // If the promise is pending, always throw the state.promise\n  // For originating promises, this will be the original promise\n  // For dehydrated promises, this will be the placeholder promise\n  // that will be resolved when the server sends the real data\n  if (state.status === 'pending') {\n    throw isDehydratedDeferred(promise) ? state.promise : promise\n  }\n\n  if (state.status === 'error') {\n    if (typeof document !== 'undefined') {\n      if (isServerSideError(state.error)) {\n        throw (\n          router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n        )(state.error.data as any)\n      } else {\n        warning(\n          false,\n          \"Encountered a server-side error that doesn't fit the expected shape\",\n        )\n        throw state.error\n      }\n    } else {\n      throw {\n        data: (\n          router.options.errorSerializer?.serialize ?? defaultSerializeError\n        )(state.error),\n        __isServerError: true,\n      }\n    }\n  }\n\n  return [promise.__deferredState.data as any, promise]\n}\n\nexport function Await<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n) {\n  const inner = <AwaitInner {...props} />\n  if (props.fallback) {\n    return <React.Suspense fallback={props.fallback}>{inner}</React.Suspense>\n  }\n  return inner\n}\n\nfunction AwaitInner<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n) {\n  const router = useRouter()\n  const [data, promise] = useAwaited(props)\n  const state = promise.__deferredState\n  // If we are the originator of the promise,\n  // inject the state into the HTML stream\n  return (\n    <>\n      {!isDehydratedDeferred(promise) ? (\n        <ScriptOnce\n          children={`window.__TSR__DEFERRED__${state.uid} = ${JSON.stringify(router.options.transformer.stringify(state))}\n  if (window.__TSR__ROUTER__) {\n    let deferred = window.__TSR__ROUTER__.getDeferred('${state.uid}');\n    if (deferred) deferred.resolve(window.__TSR__DEFERRED__${state.uid});\n  }`}\n        />\n      ) : null}\n      {props.children(data)}\n    </>\n  )\n}\n\nexport function ScriptOnce({\n  className,\n  children,\n  ...rest\n}: { children: string } & React.HTMLProps<HTMLScriptElement>) {\n  return (\n    <script\n      {...rest}\n      className={`tsr-script-once ${className || ''}`}\n      dangerouslySetInnerHTML={{\n        __html: [\n          children,\n          `document.querySelectorAll('.tsr-script-once').forEach((el) => el.parentElement.removeChild(el));`,\n        ].join('\\n'),\n      }}\n    />\n  )\n}\n"],"names":["_a"],"mappings":";;;;;;;AAYO,SAAS,WAAc;AAAA,EAC5B;AACF,GAA6C;;AAC3C,QAAM,SAAS;AAGf,QAAM,QAAQ,QAAQ;AAKtB,MAAI,qBAAqB,OAAO,KAAK,MAAM,WAAW,WAAW;AAC/D,UAAM,eAAgB,OAAe,oBAAoB,MAAM,GAAG,EAAE;AAEpE,QAAI,cAAc;AAChB,aAAO,OAAO,OAAO,OAAO,QAAQ,YAAY,MAAM,YAAY,CAAC;AAAA,IAAA,OAC9D;AACL,UAAI,QAAQ,OAAO,uBAAuB,IAAI,MAAM,GAAG;AAIvD,UAAI,CAAC,OAAO;AACV,gBAAQ,CAAA;AACR,eAAO,uBAAuB,IAAI,MAAM,KAAK,KAAK;AAC3C,eAAA,oBAAoB,IAAI,OAAO,KAAK;AAE3C,eAAO,OAAO,OAAO;AAAA,UACnB,SAAS,MAAM;;AACb,aAAAA,MAAA,MAAM,qBAAN,gBAAAA,IAAA;AAAA,UAEF;AAAA,UACA,SAAS,IAAI,QAAQ,CAAC,MAAM;AAC1B,kBAAM,mBAAmB;AAAA,UAAA,CAC1B;AAAA,UACD,kBAAkB,MAAM;AAAA,UAAC;AAAA,QAAA,CAC1B;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAMI,MAAA,MAAM,WAAW,WAAW;AAC9B,UAAM,qBAAqB,OAAO,IAAI,MAAM,UAAU;AAAA,EACxD;AAEI,MAAA,MAAM,WAAW,SAAS;AACxB,QAAA,OAAO,aAAa,aAAa;AAC/B,UAAA,kBAAkB,MAAM,KAAK,GAAG;AAClC,iBACE,YAAO,QAAQ,oBAAf,mBAAgC,gBAAe,yBAC/C,MAAM,MAAM,IAAW;AAAA,MAAA,OACpB;AACL;AAAA,UACE;AAAA,UACA;AAAA,QAAA;AAEF,cAAM,MAAM;AAAA,MACd;AAAA,IAAA,OACK;AACC,YAAA;AAAA,QACJ,SACE,YAAO,QAAQ,oBAAf,mBAAgC,cAAa,uBAC7C,MAAM,KAAK;AAAA,QACb,iBAAiB;AAAA,MAAA;AAAA,IAErB;AAAA,EACF;AAEA,SAAO,CAAC,QAAQ,gBAAgB,MAAa,OAAO;AACtD;AAEO,SAAS,MACd,OAIA;AACA,QAAM,QAAQ,oBAAC,YAAY,EAAA,GAAG,MAAO,CAAA;AACrC,MAAI,MAAM,UAAU;AAClB,+BAAQ,MAAM,UAAN,EAAe,UAAU,MAAM,UAAW,UAAM,MAAA,CAAA;AAAA,EAC1D;AACO,SAAA;AACT;AAEA,SAAS,WACP,OAIA;AACA,QAAM,SAAS;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,WAAW,KAAK;AACxC,QAAM,QAAQ,QAAQ;AAGtB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,CAAA,qBAAqB,OAAO,IAC5B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,2BAA2B,MAAM,GAAG,MAAM,KAAK,UAAU,OAAO,QAAQ,YAAY,UAAU,KAAK,CAAC,CAAC;AAAA;AAAA,yDAEhE,MAAM,GAAG;AAAA,6DACL,MAAM,GAAG;AAAA;AAAA,MAAA;AAAA,IAAA,IAG5D;AAAA,IACH,MAAM,SAAS,IAAI;AAAA,EACtB,EAAA,CAAA;AAEJ;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA8D;AAE1D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,mBAAmB,aAAa,EAAE;AAAA,MAC7C,yBAAyB;AAAA,QACvB,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,QAAA,EACA,KAAK,IAAI;AAAA,MACb;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/index.d.ts

@@ -1,7 +1,7 @@
 export { createHistory, createBrowserHistory, createHashHistory, createMemoryHistory, type BlockerFn, type HistoryLocation, type RouterHistory, type ParsedPath, type HistoryState, } from '@tanstack/history';
 export { default as invariant } from 'tiny-invariant';
 export { default as warning } from 'tiny-warning';
-export { useAwaited, Await, type AwaitOptions } from './awaited.js';
+export { useAwaited, Await, type AwaitOptions, ScriptOnce } from './awaited.js';
 export { defer, isDehydratedDeferred, type DeferredPromiseState, type DeferredPromise, } from './defer.js';
 export { CatchBoundary, ErrorComponent } from './CatchBoundary.js';
 export { FileRoute, createFileRoute, FileRouteLoader, LazyRoute, createLazyRoute, createLazyFileRoute, type FileRoutesByPath, type LazyRouteOptions, } from './fileRoute.js';

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { createBrowserHistory, createHashHistory, createHistory, createMemoryHistory } from "@tanstack/history";
 import { default as default2 } from "tiny-invariant";
 import { default as default3 } from "tiny-warning";
-import { Await, useAwaited } from "./awaited.js";
+import { Await, ScriptOnce, useAwaited } from "./awaited.js";
 import { defer, isDehydratedDeferred } from "./defer.js";
 import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
 import { FileRoute, FileRouteLoader, LazyRoute, createFileRoute, createLazyFileRoute, createLazyRoute } from "./fileRoute.js";
@@ -55,6 +55,7 @@ export {
   Router,
   RouterContextProvider,
   RouterProvider,
+  ScriptOnce,
   ScrollRestoration,
   SearchParamError,
   cleanPath,

package/dist/esm/router.d.ts

@@ -387,10 +387,6 @@ export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailing
     cleanCache: () => void;
     preloadRoute: <TFrom extends string | import('./routeInfo').ParseRoute<TRouteTree, TRouteTree>["fullPath"] = string, TTo extends string = "", TMaskFrom extends string | import('./routeInfo').ParseRoute<TRouteTree, TRouteTree>["fullPath"] = TFrom, TMaskTo extends string = "">(opts: NavigateOptions<Router<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<Array<AnyRouteMatch> | undefined>;
     matchRoute: <TFrom extends RoutePaths<TRouteTree> = "/", TTo extends string = "", TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>>(location: ToOptions<Router<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>, TFrom, TTo>, opts?: MatchRouteOptions) => false | RouteById<TRouteTree, TResolved>['types']['allParams'];
-    /**
-     * @deprecated Injecting HTML directly is no longer supported. Use the new <ScriptOnce /> component instead.
-     */
-    injectHtml: (html: string | (() => Promise<string> | string)) => Promise<void>;
     registeredDeferredsIds: Map<string, {}>;
     registeredDeferreds: WeakMap<{}, DeferredPromiseState<any>>;
     getDeferred: (uid: string) => DeferredPromiseState<any> | undefined;

package/dist/esm/router.js

@@ -1144,8 +1144,6 @@ class Router {
       }
       return match;
     };
-    this.injectHtml = async (html) => {
-    };
     this.registeredDeferredsIds = /* @__PURE__ */ new Map();
     this.registeredDeferreds = /* @__PURE__ */ new WeakMap();
     this.getDeferred = (uid) => {