@tanstack/react-router 1.87.1 → 1.87.3

package/dist/cjs/router.d.cts

@@ -1,4 +1,5 @@
 import { Store, NoInfer } from '@tanstack/react-store';
+import { DeferredPromiseState } from './defer.cjs';
 import { HistoryState, RouterHistory } from '@tanstack/history';
 import { Manifest } from './manifest.cjs';
 import { AnyContext, AnyRoute, AnyRouteWithContext, ErrorRouteComponent, NotFoundRouteComponent, RootRoute, RouteComponent, RouteMask } from './route.cjs';
@@ -44,15 +45,22 @@ export type HydrationCtx = {
     payload: Record<string, any>;
 };
 export type InferRouterContext<TRouteTree extends AnyRoute> = TRouteTree extends RootRoute<any, infer TRouterContext extends AnyContext, any, any, any, any, any, any> ? TRouterContext : AnyContext;
-export type ExtractedEntry = {
+export interface ExtractedBaseEntry {
     dataType: '__beforeLoadContext' | 'loaderData';
-    type: 'promise' | 'stream';
+    type: string;
     path: Array<string>;
-    value: any;
     id: number;
-    streamState?: StreamState;
     matchIndex: number;
-};
+}
+export interface ExtractedStream extends ExtractedBaseEntry {
+    type: 'stream';
+    streamState: StreamState;
+}
+export interface ExtractedPromise extends ExtractedBaseEntry {
+    type: 'promise';
+    promiseState: DeferredPromiseState<any>;
+}
+export type ExtractedEntry = ExtractedStream | ExtractedPromise;
 export type StreamState = {
     promises: Array<ControlledPromise<string | null>>;
 };

package/dist/esm/Transitioner.js

@@ -9,7 +9,7 @@ function Transitioner() {
   const isLoading = useRouterState({
     select: ({ isLoading: isLoading2 }) => isLoading2
   });
-  const [isTransitioning, startReactTransition_] = React.useTransition();
+  const [isTransitioning, setIsTransitioning] = React.useState(false);
   const hasPendingMatches = useRouterState({
     select: (s) => s.matches.some((d) => d.status === "pending"),
     structuralSharing: true
@@ -20,7 +20,13 @@ function Transitioner() {
   const isPagePending = isLoading || hasPendingMatches;
   const previousIsPagePending = usePrevious(isPagePending);
   if (!router.isServer) {
-    router.startReactTransition = startReactTransition_;
+    router.startReactTransition = (fn) => {
+      setIsTransitioning(true);
+      React.startTransition(() => {
+        fn();
+        setIsTransitioning(false);
+      });
+    };
   }
   React.useEffect(() => {
     const unsub = router.history.subscribe(router.load);

package/dist/esm/Transitioner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport { trimPathRight } from './path'\n\nexport function Transitioner() {\n  const router = useRouter()\n  const mountLoadForRouter = React.useRef({ router, mounted: false })\n  const isLoading = useRouterState({\n    select: ({ isLoading }) => isLoading,\n  })\n\n  const [isTransitioning, startReactTransition_] = React.useTransition()\n  // Track pending state changes\n  const hasPendingMatches = useRouterState({\n    select: (s) => s.matches.some((d) => d.status === 'pending'),\n    structuralSharing: true,\n  })\n\n  const previousIsLoading = usePrevious(isLoading)\n\n  const isAnyPending = isLoading || isTransitioning || hasPendingMatches\n  const previousIsAnyPending = usePrevious(isAnyPending)\n\n  const isPagePending = isLoading || hasPendingMatches\n  const previousIsPagePending = usePrevious(isPagePending)\n\n  if (!router.isServer) {\n    router.startReactTransition = startReactTransition_\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  React.useEffect(() => {\n    const unsub = router.history.subscribe(router.load)\n\n    const nextLocation = router.buildLocation({\n      to: router.latestLocation.pathname,\n      search: true,\n      params: true,\n      hash: true,\n      state: true,\n      _includeValidateSearch: true,\n    })\n\n    if (\n      trimPathRight(router.latestLocation.href) !==\n      trimPathRight(nextLocation.href)\n    ) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n  }, [router, router.history])\n\n  // Try to load the initial location\n  useLayoutEffect(() => {\n    if (\n      (typeof window !== 'undefined' && window.__TSR__?.dehydrated) ||\n      (mountLoadForRouter.current.router === router &&\n        mountLoadForRouter.current.mounted)\n    ) {\n      return\n    }\n    mountLoadForRouter.current = { router, mounted: true }\n\n    const tryLoad = async () => {\n      try {\n        await router.load()\n      } catch (err) {\n        console.error(err)\n      }\n    }\n\n    tryLoad()\n  }, [router])\n\n  useLayoutEffect(() => {\n    // The router was loading and now it's not\n    if (previousIsLoading && !isLoading) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.pathname !== toLocation.pathname\n      const hrefChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches\n        fromLocation,\n        toLocation,\n        pathChanged,\n        hrefChanged,\n      })\n    }\n  }, [previousIsLoading, router, isLoading])\n\n  useLayoutEffect(() => {\n    // emit onBeforeRouteMount\n    if (previousIsPagePending && !isPagePending) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.pathname !== toLocation.pathname\n      const hrefChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onBeforeRouteMount',\n        fromLocation,\n        toLocation,\n        pathChanged,\n        hrefChanged,\n      })\n    }\n  }, [isPagePending, previousIsPagePending, router])\n\n  useLayoutEffect(() => {\n    // The router was pending and now it's not\n    if (previousIsAnyPending && !isAnyPending) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.pathname !== toLocation.pathname\n      const hrefChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onResolved',\n        fromLocation,\n        toLocation,\n        pathChanged,\n        hrefChanged,\n      })\n\n      router.__store.setState((s) => ({\n        ...s,\n        status: 'idle',\n        resolvedLocation: s.location,\n      }))\n\n      if (typeof document !== 'undefined' && (document as any).querySelector) {\n        if (router.state.location.hash !== '') {\n          const el = document.getElementById(router.state.location.hash)\n          if (el) {\n            el.scrollIntoView()\n          }\n        }\n      }\n    }\n  }, [isAnyPending, previousIsAnyPending, router])\n\n  return null\n}\n"],"names":["isLoading"],"mappings":"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"}
+{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport { trimPathRight } from './path'\n\nexport function Transitioner() {\n  const router = useRouter()\n  const mountLoadForRouter = React.useRef({ router, mounted: false })\n  const isLoading = useRouterState({\n    select: ({ isLoading }) => isLoading,\n  })\n\n  const [isTransitioning, setIsTransitioning] = React.useState(false)\n  // Track pending state changes\n  const hasPendingMatches = useRouterState({\n    select: (s) => s.matches.some((d) => d.status === 'pending'),\n    structuralSharing: true,\n  })\n\n  const previousIsLoading = usePrevious(isLoading)\n\n  const isAnyPending = isLoading || isTransitioning || hasPendingMatches\n  const previousIsAnyPending = usePrevious(isAnyPending)\n\n  const isPagePending = isLoading || hasPendingMatches\n  const previousIsPagePending = usePrevious(isPagePending)\n\n  if (!router.isServer) {\n    router.startReactTransition = (fn: () => void) => {\n      setIsTransitioning(true)\n      React.startTransition(() => {\n        fn()\n        setIsTransitioning(false)\n      })\n    }\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  React.useEffect(() => {\n    const unsub = router.history.subscribe(router.load)\n\n    const nextLocation = router.buildLocation({\n      to: router.latestLocation.pathname,\n      search: true,\n      params: true,\n      hash: true,\n      state: true,\n      _includeValidateSearch: true,\n    })\n\n    if (\n      trimPathRight(router.latestLocation.href) !==\n      trimPathRight(nextLocation.href)\n    ) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n\n    return () => {\n      unsub()\n    }\n  }, [router, router.history])\n\n  // Try to load the initial location\n  useLayoutEffect(() => {\n    if (\n      (typeof window !== 'undefined' && window.__TSR__?.dehydrated) ||\n      (mountLoadForRouter.current.router === router &&\n        mountLoadForRouter.current.mounted)\n    ) {\n      return\n    }\n    mountLoadForRouter.current = { router, mounted: true }\n\n    const tryLoad = async () => {\n      try {\n        await router.load()\n      } catch (err) {\n        console.error(err)\n      }\n    }\n\n    tryLoad()\n  }, [router])\n\n  useLayoutEffect(() => {\n    // The router was loading and now it's not\n    if (previousIsLoading && !isLoading) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.pathname !== toLocation.pathname\n      const hrefChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches\n        fromLocation,\n        toLocation,\n        pathChanged,\n        hrefChanged,\n      })\n    }\n  }, [previousIsLoading, router, isLoading])\n\n  useLayoutEffect(() => {\n    // emit onBeforeRouteMount\n    if (previousIsPagePending && !isPagePending) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.pathname !== toLocation.pathname\n      const hrefChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onBeforeRouteMount',\n        fromLocation,\n        toLocation,\n        pathChanged,\n        hrefChanged,\n      })\n    }\n  }, [isPagePending, previousIsPagePending, router])\n\n  useLayoutEffect(() => {\n    // The router was pending and now it's not\n    if (previousIsAnyPending && !isAnyPending) {\n      const toLocation = router.state.location\n      const fromLocation = router.state.resolvedLocation\n      const pathChanged = fromLocation.pathname !== toLocation.pathname\n      const hrefChanged = fromLocation.href !== toLocation.href\n\n      router.emit({\n        type: 'onResolved',\n        fromLocation,\n        toLocation,\n        pathChanged,\n        hrefChanged,\n      })\n\n      router.__store.setState((s) => ({\n        ...s,\n        status: 'idle',\n        resolvedLocation: s.location,\n      }))\n\n      if (typeof document !== 'undefined' && (document as any).querySelector) {\n        if (router.state.location.hash !== '') {\n          const el = document.getElementById(router.state.location.hash)\n          if (el) {\n            el.scrollIntoView()\n          }\n        }\n      }\n    }\n  }, [isAnyPending, previousIsAnyPending, router])\n\n  return null\n}\n"],"names":["isLoading"],"mappings":";;;;;AAMO,SAAS,eAAe;AAC7B,QAAM,SAAS,UAAU;AACzB,QAAM,qBAAqB,MAAM,OAAO,EAAE,QAAQ,SAAS,OAAO;AAClE,QAAM,YAAY,eAAe;AAAA,IAC/B,QAAQ,CAAC,EAAE,WAAAA,iBAAgBA;AAAAA,EAAA,CAC5B;AAED,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,KAAK;AAElE,QAAM,oBAAoB,eAAe;AAAA,IACvC,QAAQ,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,SAAS;AAAA,IAC3D,mBAAmB;AAAA,EAAA,CACpB;AAEK,QAAA,oBAAoB,YAAY,SAAS;AAEzC,QAAA,eAAe,aAAa,mBAAmB;AAC/C,QAAA,uBAAuB,YAAY,YAAY;AAErD,QAAM,gBAAgB,aAAa;AAC7B,QAAA,wBAAwB,YAAY,aAAa;AAEnD,MAAA,CAAC,OAAO,UAAU;AACb,WAAA,uBAAuB,CAAC,OAAmB;AAChD,yBAAmB,IAAI;AACvB,YAAM,gBAAgB,MAAM;AACvB,WAAA;AACH,2BAAmB,KAAK;AAAA,MAAA,CACzB;AAAA,IACH;AAAA,EAAA;AAKF,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,OAAO,QAAQ,UAAU,OAAO,IAAI;AAE5C,UAAA,eAAe,OAAO,cAAc;AAAA,MACxC,IAAI,OAAO,eAAe;AAAA,MAC1B,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,wBAAwB;AAAA,IAAA,CACzB;AAGC,QAAA,cAAc,OAAO,eAAe,IAAI,MACxC,cAAc,aAAa,IAAI,GAC/B;AACA,aAAO,eAAe,EAAE,GAAG,cAAc,SAAS,MAAM;AAAA,IAAA;AAG1D,WAAO,MAAM;AACL,YAAA;AAAA,IACR;AAAA,EACC,GAAA,CAAC,QAAQ,OAAO,OAAO,CAAC;AAG3B,kBAAgB,MAAM;;AACpB,QACG,OAAO,WAAW,iBAAe,YAAO,YAAP,mBAAgB,eACjD,mBAAmB,QAAQ,WAAW,UACrC,mBAAmB,QAAQ,SAC7B;AACA;AAAA,IAAA;AAEF,uBAAmB,UAAU,EAAE,QAAQ,SAAS,KAAK;AAErD,UAAM,UAAU,YAAY;AACtB,UAAA;AACF,cAAM,OAAO,KAAK;AAAA,eACX,KAAK;AACZ,gBAAQ,MAAM,GAAG;AAAA,MAAA;AAAA,IAErB;AAEQ,YAAA;AAAA,EAAA,GACP,CAAC,MAAM,CAAC;AAEX,kBAAgB,MAAM;AAEhB,QAAA,qBAAqB,CAAC,WAAW;AAC7B,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,aAAa,WAAW;AACnD,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEF,GAAA,CAAC,mBAAmB,QAAQ,SAAS,CAAC;AAEzC,kBAAgB,MAAM;AAEhB,QAAA,yBAAyB,CAAC,eAAe;AACrC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,aAAa,WAAW;AACnD,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEF,GAAA,CAAC,eAAe,uBAAuB,MAAM,CAAC;AAEjD,kBAAgB,MAAM;AAEhB,QAAA,wBAAwB,CAAC,cAAc;AACnC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,aAAa,WAAW;AACnD,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAEM,aAAA,QAAQ,SAAS,CAAC,OAAO;AAAA,QAC9B,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,kBAAkB,EAAE;AAAA,MAAA,EACpB;AAEF,UAAI,OAAO,aAAa,eAAgB,SAAiB,eAAe;AACtE,YAAI,OAAO,MAAM,SAAS,SAAS,IAAI;AACrC,gBAAM,KAAK,SAAS,eAAe,OAAO,MAAM,SAAS,IAAI;AAC7D,cAAI,IAAI;AACN,eAAG,eAAe;AAAA,UAAA;AAAA,QACpB;AAAA,MACF;AAAA,IACF;AAAA,EAED,GAAA,CAAC,cAAc,sBAAsB,MAAM,CAAC;AAExC,SAAA;AACT;"}

package/dist/esm/awaited.js

@@ -3,37 +3,37 @@ import * as React from "react";
 import warning from "tiny-warning";
 import { useRouter } from "./useRouter.js";
 import { defaultSerializeError } from "./router.js";
-import { defer } from "./defer.js";
+import { defer, TSR_DEFERRED_PROMISE } from "./defer.js";
 import { isServerSideError, defaultDeserializeError } from "./isServerSideError.js";
 function useAwaited({
   promise: _promise
 }) {
   var _a, _b;
   const router = useRouter();
-  const promise = _promise;
-  defer(promise);
-  if (promise.status === "pending") {
+  const promise = defer(_promise);
+  if (promise[TSR_DEFERRED_PROMISE].status === "pending") {
     throw promise;
   }
-  if (promise.status === "error") {
+  if (promise[TSR_DEFERRED_PROMISE].status === "error") {
     if (typeof document !== "undefined") {
-      if (isServerSideError(promise.error)) {
-        throw (((_a = router.options.errorSerializer) == null ? void 0 : _a.deserialize) ?? defaultDeserializeError)(promise.error.data);
+      if (isServerSideError(promise[TSR_DEFERRED_PROMISE].error)) {
+        throw (((_a = router.options.errorSerializer) == null ? void 0 : _a.deserialize) ?? defaultDeserializeError)(promise[TSR_DEFERRED_PROMISE].error.data);
       } else {
         warning(
           false,
           "Encountered a server-side error that doesn't fit the expected shape"
         );
-        throw promise.error;
+        throw promise[TSR_DEFERRED_PROMISE].error;
       }
     } else {
       throw {
-        data: (((_b = router.options.errorSerializer) == null ? void 0 : _b.serialize) ?? defaultSerializeError)(promise.error),
+        data: (((_b = router.options.errorSerializer) == null ? void 0 : _b.serialize) ?? defaultSerializeError)(promise[TSR_DEFERRED_PROMISE].error),
         __isServerError: true
       };
     }
   }
-  return [promise.data, promise];
+  console.log("useAwaited", promise[TSR_DEFERRED_PROMISE]);
+  return [promise[TSR_DEFERRED_PROMISE].data, promise];
 }
 function Await(props) {
   const inner = /* @__PURE__ */ jsx(AwaitInner, { ...props });
@@ -44,6 +44,7 @@ function Await(props) {
 }
 function AwaitInner(props) {
   const [data] = useAwaited(props);
+  console.log("AwaitInner", data);
   return props.children(data);
 }
 export {

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 { defer } from './defer'\nimport { defaultDeserializeError, isServerSideError } from './isServerSideError'\nimport type { DeferredPromise } from './defer'\n\nexport type AwaitOptions<T> = {\n  promise: Promise<T>\n}\n\nexport function useAwaited<T>({\n  promise: _promise,\n}: AwaitOptions<T>): [T, DeferredPromise<T>] {\n  const router = useRouter()\n  const promise = _promise as DeferredPromise<T>\n\n  defer(promise)\n\n  if (promise.status === 'pending') {\n    throw promise\n  }\n\n  if (promise.status === 'error') {\n    if (typeof document !== 'undefined') {\n      if (isServerSideError(promise.error)) {\n        throw (\n          router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n        )(promise.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 promise.error\n      }\n    } else {\n      throw {\n        data: (\n          router.options.errorSerializer?.serialize ?? defaultSerializeError\n        )(promise.error),\n        __isServerError: true,\n      }\n    }\n  }\n\n  return [promise.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): React.JSX.Element {\n  const [data] = useAwaited(props)\n  return props.children(data) as React.JSX.Element\n}\n"],"names":[],"mappings":";;;;;;;AAYO,SAAS,WAAc;AAAA,EAC5B,SAAS;AACX,GAA6C;;AAC3C,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU;AAEhB,QAAM,OAAO;AAET,MAAA,QAAQ,WAAW,WAAW;AAC1B,UAAA;AAAA,EAAA;AAGJ,MAAA,QAAQ,WAAW,SAAS;AAC1B,QAAA,OAAO,aAAa,aAAa;AAC/B,UAAA,kBAAkB,QAAQ,KAAK,GAAG;AACpC,iBACE,YAAO,QAAQ,oBAAf,mBAAgC,gBAAe,yBAC/C,QAAQ,MAAM,IAAW;AAAA,MAAA,OACtB;AACL;AAAA,UACE;AAAA,UACA;AAAA,QACF;AACA,cAAM,QAAQ;AAAA,MAAA;AAAA,IAChB,OACK;AACC,YAAA;AAAA,QACJ,SACE,YAAO,QAAQ,oBAAf,mBAAgC,cAAa,uBAC7C,QAAQ,KAAK;AAAA,QACf,iBAAiB;AAAA,MACnB;AAAA,IAAA;AAAA,EACF;AAGK,SAAA,CAAC,QAAQ,MAAa,OAAO;AACtC;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,OAAA;AAAA,EAAA;AAEnD,SAAA;AACT;AAEA,SAAS,WACP,OAImB;AACnB,QAAM,CAAC,IAAI,IAAI,WAAW,KAAK;AACxB,SAAA,MAAM,SAAS,IAAI;AAC5B;"}
+{"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 { TSR_DEFERRED_PROMISE, defer } from './defer'\nimport { defaultDeserializeError, isServerSideError } from './isServerSideError'\nimport type { DeferredPromise } from './defer'\n\nexport type AwaitOptions<T> = {\n  promise: Promise<T>\n}\n\nexport function useAwaited<T>({\n  promise: _promise,\n}: AwaitOptions<T>): [T, DeferredPromise<T>] {\n  const router = useRouter()\n  const promise = defer(_promise)\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {\n    throw promise\n  }\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {\n    if (typeof document !== 'undefined') {\n      if (isServerSideError(promise[TSR_DEFERRED_PROMISE].error)) {\n        throw (\n          router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n        )(promise[TSR_DEFERRED_PROMISE].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 promise[TSR_DEFERRED_PROMISE].error\n      }\n    } else {\n      throw {\n        data: (\n          router.options.errorSerializer?.serialize ?? defaultSerializeError\n        )(promise[TSR_DEFERRED_PROMISE].error),\n        __isServerError: true,\n      }\n    }\n  }\n  console.log('useAwaited', promise[TSR_DEFERRED_PROMISE])\n  return [promise[TSR_DEFERRED_PROMISE].data, 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): React.JSX.Element {\n  const [data] = useAwaited(props)\n  console.log('AwaitInner', data)\n\n  return props.children(data) as React.JSX.Element\n}\n"],"names":[],"mappings":";;;;;;;AAYO,SAAS,WAAc;AAAA,EAC5B,SAAS;AACX,GAA6C;;AAC3C,QAAM,SAAS,UAAU;AACnB,QAAA,UAAU,MAAM,QAAQ;AAE9B,MAAI,QAAQ,oBAAoB,EAAE,WAAW,WAAW;AAChD,UAAA;AAAA,EAAA;AAGR,MAAI,QAAQ,oBAAoB,EAAE,WAAW,SAAS;AAChD,QAAA,OAAO,aAAa,aAAa;AACnC,UAAI,kBAAkB,QAAQ,oBAAoB,EAAE,KAAK,GAAG;AAExD,iBAAA,YAAO,QAAQ,oBAAf,mBAAgC,gBAAe,yBAC/C,QAAQ,oBAAoB,EAAE,MAAM,IAAW;AAAA,MAAA,OAC5C;AACL;AAAA,UACE;AAAA,UACA;AAAA,QACF;AACM,cAAA,QAAQ,oBAAoB,EAAE;AAAA,MAAA;AAAA,IACtC,OACK;AACC,YAAA;AAAA,QACJ,SACE,YAAO,QAAQ,oBAAf,mBAAgC,cAAa,uBAC7C,QAAQ,oBAAoB,EAAE,KAAK;AAAA,QACrC,iBAAiB;AAAA,MACnB;AAAA,IAAA;AAAA,EACF;AAEF,UAAQ,IAAI,cAAc,QAAQ,oBAAoB,CAAC;AACvD,SAAO,CAAC,QAAQ,oBAAoB,EAAE,MAAM,OAAO;AACrD;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,OAAA;AAAA,EAAA;AAEnD,SAAA;AACT;AAEA,SAAS,WACP,OAImB;AACnB,QAAM,CAAC,IAAI,IAAI,WAAW,KAAK;AACvB,UAAA,IAAI,cAAc,IAAI;AAEvB,SAAA,MAAM,SAAS,IAAI;AAC5B;"}

package/dist/esm/defer.d.ts

@@ -1,20 +1,19 @@
 import { defaultSerializeError } from './router.js';
+export declare const TSR_DEFERRED_PROMISE: unique symbol;
 export type DeferredPromiseState<T> = {
-    uid: string;
-    resolve?: () => void;
-    reject?: () => void;
-} & ({
-    status: 'pending';
-    data?: T;
-    error?: unknown;
-} | {
-    status: 'success';
-    data: T;
-} | {
-    status: 'error';
-    data?: T;
-    error: unknown;
-});
+    [TSR_DEFERRED_PROMISE]: {
+        status: 'pending';
+        data?: T;
+        error?: unknown;
+    } | {
+        status: 'success';
+        data: T;
+    } | {
+        status: 'error';
+        data?: T;
+        error: unknown;
+    };
+};
 export type DeferredPromise<T> = Promise<T> & DeferredPromiseState<T>;
 export declare function defer<T>(_promise: Promise<T>, options?: {
     serializeError?: typeof defaultSerializeError;

package/dist/esm/defer.js

@@ -1,24 +1,26 @@
 import { defaultSerializeError } from "./router.js";
+const TSR_DEFERRED_PROMISE = Symbol.for("TSR_DEFERRED_PROMISE");
 function defer(_promise, options) {
   const promise = _promise;
-  if (!promise.status) {
-    Object.assign(promise, {
-      status: "pending"
-    });
-    promise.then((data) => {
-      promise.status = "success";
-      promise.data = data;
-    }).catch((error) => {
-      promise.status = "error";
-      promise.error = {
-        data: ((options == null ? void 0 : options.serializeError) ?? defaultSerializeError)(error),
-        __isServerError: true
-      };
-    });
+  if (promise[TSR_DEFERRED_PROMISE]) {
+    return promise;
   }
+  promise[TSR_DEFERRED_PROMISE] = { status: "pending" };
+  promise.then((data) => {
+    promise[TSR_DEFERRED_PROMISE].status = "success";
+    promise[TSR_DEFERRED_PROMISE].data = data;
+    console.log("defer then", promise[TSR_DEFERRED_PROMISE]);
+  }).catch((error) => {
+    promise[TSR_DEFERRED_PROMISE].status = "error";
+    promise[TSR_DEFERRED_PROMISE].error = {
+      data: ((options == null ? void 0 : options.serializeError) ?? defaultSerializeError)(error),
+      __isServerError: true
+    };
+  });
   return promise;
 }
 export {
+  TSR_DEFERRED_PROMISE,
   defer
 };
 //# sourceMappingURL=defer.js.map

package/dist/esm/defer.js.map

@@ -1 +1 @@
-{"version":3,"file":"defer.js","sources":["../../src/defer.ts"],"sourcesContent":["import { defaultSerializeError } from './router'\n\nexport type DeferredPromiseState<T> = {\n  uid: string\n  resolve?: () => void\n  reject?: () => void\n} & (\n  | {\n      status: 'pending'\n      data?: T\n      error?: unknown\n    }\n  | {\n      status: 'success'\n      data: T\n    }\n  | {\n      status: 'error'\n      data?: T\n      error: unknown\n    }\n)\n\nexport type DeferredPromise<T> = Promise<T> & DeferredPromiseState<T>\n\nexport function defer<T>(\n  _promise: Promise<T>,\n  options?: {\n    serializeError?: typeof defaultSerializeError\n  },\n) {\n  const promise = _promise as DeferredPromise<T>\n\n  if (!(promise as any).status) {\n    Object.assign(promise, {\n      status: 'pending',\n    })\n\n    promise\n      .then((data) => {\n        promise.status = 'success' as any\n        promise.data = data\n      })\n      .catch((error) => {\n        promise.status = 'error' as any\n        ;(promise as any).error = {\n          data: (options?.serializeError ?? defaultSerializeError)(error),\n          __isServerError: true,\n        }\n      })\n  }\n\n  return promise\n}\n"],"names":[],"mappings":";AAyBgB,SAAA,MACd,UACA,SAGA;AACA,QAAM,UAAU;AAEZ,MAAA,CAAE,QAAgB,QAAQ;AAC5B,WAAO,OAAO,SAAS;AAAA,MACrB,QAAQ;AAAA,IAAA,CACT;AAGE,YAAA,KAAK,CAAC,SAAS;AACd,cAAQ,SAAS;AACjB,cAAQ,OAAO;AAAA,IAAA,CAChB,EACA,MAAM,CAAC,UAAU;AAChB,cAAQ,SAAS;AACf,cAAgB,QAAQ;AAAA,QACxB,QAAO,mCAAS,mBAAkB,uBAAuB,KAAK;AAAA,QAC9D,iBAAiB;AAAA,MACnB;AAAA,IAAA,CACD;AAAA,EAAA;AAGE,SAAA;AACT;"}
+{"version":3,"file":"defer.js","sources":["../../src/defer.ts"],"sourcesContent":["import { defaultSerializeError } from './router'\n\nexport const TSR_DEFERRED_PROMISE = Symbol.for('TSR_DEFERRED_PROMISE')\n\nexport type DeferredPromiseState<T> = {\n  [TSR_DEFERRED_PROMISE]:\n    | {\n        status: 'pending'\n        data?: T\n        error?: unknown\n      }\n    | {\n        status: 'success'\n        data: T\n      }\n    | {\n        status: 'error'\n        data?: T\n        error: unknown\n      }\n}\n\nexport type DeferredPromise<T> = Promise<T> & DeferredPromiseState<T>\n\nexport function defer<T>(\n  _promise: Promise<T>,\n  options?: {\n    serializeError?: typeof defaultSerializeError\n  },\n) {\n  const promise = _promise as DeferredPromise<T>\n  // this is already deferred promise\n  if ((promise as any)[TSR_DEFERRED_PROMISE]) {\n    return promise\n  }\n  promise[TSR_DEFERRED_PROMISE] = { status: 'pending' }\n\n  promise\n    .then((data) => {\n      promise[TSR_DEFERRED_PROMISE].status = 'success'\n      promise[TSR_DEFERRED_PROMISE].data = data\n      console.log('defer then', promise[TSR_DEFERRED_PROMISE])\n    })\n    .catch((error) => {\n      promise[TSR_DEFERRED_PROMISE].status = 'error'\n      ;(promise[TSR_DEFERRED_PROMISE] as any).error = {\n        data: (options?.serializeError ?? defaultSerializeError)(error),\n        __isServerError: true,\n      }\n    })\n\n  return promise\n}\n"],"names":[],"mappings":";AAEa,MAAA,uBAAuB,OAAO,IAAI,sBAAsB;AAsBrD,SAAA,MACd,UACA,SAGA;AACA,QAAM,UAAU;AAEX,MAAA,QAAgB,oBAAoB,GAAG;AACnC,WAAA;AAAA,EAAA;AAET,UAAQ,oBAAoB,IAAI,EAAE,QAAQ,UAAU;AAGjD,UAAA,KAAK,CAAC,SAAS;AACN,YAAA,oBAAoB,EAAE,SAAS;AAC/B,YAAA,oBAAoB,EAAE,OAAO;AACrC,YAAQ,IAAI,cAAc,QAAQ,oBAAoB,CAAC;AAAA,EAAA,CACxD,EACA,MAAM,CAAC,UAAU;AACR,YAAA,oBAAoB,EAAE,SAAS;AACrC,YAAQ,oBAAoB,EAAU,QAAQ;AAAA,MAC9C,QAAO,mCAAS,mBAAkB,uBAAuB,KAAK;AAAA,MAC9D,iBAAiB;AAAA,IACnB;AAAA,EAAA,CACD;AAEI,SAAA;AACT;"}

package/dist/esm/index.d.ts

@@ -5,7 +5,7 @@ export { default as warning } from 'tiny-warning';
 export { useAwaited, Await } from './awaited.js';
 export type { AwaitOptions } from './awaited.js';
 export { ScriptOnce } from './ScriptOnce.js';
-export { defer } from './defer.js';
+export { defer, TSR_DEFERRED_PROMISE } from './defer.js';
 export type { DeferredPromiseState, DeferredPromise } from './defer.js';
 export { CatchBoundary, ErrorComponent } from './CatchBoundary.js';
 export { FileRoute, createFileRoute, FileRouteLoader, LazyRoute, createLazyRoute, createLazyFileRoute, } from './fileRoute.js';
@@ -34,7 +34,7 @@ export { RouteApi, getRouteApi, Route, createRoute, RootRoute, rootRouteWithCont
 export type { AnyPathParams, ResolveParams, SearchSchemaInput, AnyContext, RouteContext, PreloadableObj, RoutePathOptions, StaticDataRouteOption, RoutePathOptionsIntersection, RouteOptions, FileBaseRouteOptions, BaseRouteOptions, UpdatableRouteOptions, UpdatableStaticRouteOption, MetaDescriptor, RouteLinkEntry, ParseParamsFn, RouteLoaderFn, LoaderFnContext, SearchFilter, ResolveId, InferFullSearchSchema, InferFullSearchSchemaInput, ResolveFullSearchSchema, ResolveFullSearchSchemaInput, AnyRoute, RouteConstraints, AnyRootRoute, ResolveFullPath, RouteMask, ErrorRouteProps, ErrorComponentProps, NotFoundRouteProps, ReactNode, SyncRouteComponent, AsyncRouteComponent, RouteComponent, ErrorRouteComponent, NotFoundRouteComponent, TrimPath, TrimPathLeft, TrimPathRight, RootRouteOptions, AnyRouteWithContext, ParseSplatParams, SplatParams, StringifyParamsFn, ParamsOptions, FullSearchSchemaOption, RouteContextFn, RouteContextOptions, BeforeLoadFn, BeforeLoadContextOptions, ContextOptions, InferAllParams, InferAllContext, LooseReturnType, LooseAsyncReturnType, ContextReturnType, ContextAsyncReturnType, RouteContextParameter, BeforeLoadContextParameter, ResolveAllContext, ResolveLoaderData, ResolveAllParamsFromParent, ResolveRouteContext, } from './route.js';
 export type { ParseRoute, RoutesById, RouteById, RouteIds, RoutesByPath, RouteByPath, RoutePaths, FullSearchSchema, AllParams, AllLoaderData, FullSearchSchemaInput, AllContext, } from './routeInfo.js';
 export { componentTypes, createRouter, Router, lazyFn, SearchParamError, PathParamError, getInitialRouterState, defaultSerializeError, } from './router.js';
-export type { Register, AnyRouter, RegisteredRouter, HydrationCtx, RouterContextOptions, TrailingSlashOption, RouterOptions, RouterErrorSerializer, RouterState, ListenerFn, BuildNextOptions, DehydratedRouterState, DehydratedRouteMatch, DehydratedRouter, RouterConstructorOptions, RouterEvents, RouterEvent, RouterListener, AnyRouterWithContext, ExtractedEntry, StreamState, } from './router.js';
+export type { Register, AnyRouter, RegisteredRouter, HydrationCtx, RouterContextOptions, TrailingSlashOption, RouterOptions, RouterErrorSerializer, RouterState, ListenerFn, BuildNextOptions, DehydratedRouterState, DehydratedRouteMatch, DehydratedRouter, RouterConstructorOptions, RouterEvents, RouterEvent, RouterListener, AnyRouterWithContext, ExtractedEntry, ExtractedStream, ExtractedPromise, StreamState, } from './router.js';
 export { RouterProvider, RouterContextProvider } from './RouterProvider.js';
 export type { RouterProps, CommitLocationOptions, MatchLocation, NavigateFn, BuildLocationFn, InjectedHtmlEntry, } from './RouterProvider.js';
 export { useScrollRestoration, useElementScrollRestoration, ScrollRestoration, } from './scroll-restoration.js';

package/dist/esm/index.js

@@ -3,7 +3,7 @@ import { default as default2 } from "tiny-invariant";
 import { default as default3 } from "tiny-warning";
 import { Await, useAwaited } from "./awaited.js";
 import { ScriptOnce } from "./ScriptOnce.js";
-import { defer } from "./defer.js";
+import { TSR_DEFERRED_PROMISE, defer } from "./defer.js";
 import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
 import { FileRoute, FileRouteLoader, LazyRoute, createFileRoute, createLazyFileRoute, createLazyRoute } from "./fileRoute.js";
 import { lazyRouteComponent } from "./lazyRouteComponent.js";
@@ -64,6 +64,7 @@ export {
   ScriptOnce,
   ScrollRestoration,
   SearchParamError,
+  TSR_DEFERRED_PROMISE,
   cleanPath,
   componentTypes,
   createBrowserHistory,

package/dist/esm/router.d.ts

@@ -1,4 +1,5 @@
 import { Store, NoInfer } from '@tanstack/react-store';
+import { DeferredPromiseState } from './defer.js';
 import { HistoryState, RouterHistory } from '@tanstack/history';
 import { Manifest } from './manifest.js';
 import { AnyContext, AnyRoute, AnyRouteWithContext, ErrorRouteComponent, NotFoundRouteComponent, RootRoute, RouteComponent, RouteMask } from './route.js';
@@ -44,15 +45,22 @@ export type HydrationCtx = {
     payload: Record<string, any>;
 };
 export type InferRouterContext<TRouteTree extends AnyRoute> = TRouteTree extends RootRoute<any, infer TRouterContext extends AnyContext, any, any, any, any, any, any> ? TRouterContext : AnyContext;
-export type ExtractedEntry = {
+export interface ExtractedBaseEntry {
     dataType: '__beforeLoadContext' | 'loaderData';
-    type: 'promise' | 'stream';
+    type: string;
     path: Array<string>;
-    value: any;
     id: number;
-    streamState?: StreamState;
     matchIndex: number;
-};
+}
+export interface ExtractedStream extends ExtractedBaseEntry {
+    type: 'stream';
+    streamState: StreamState;
+}
+export interface ExtractedPromise extends ExtractedBaseEntry {
+    type: 'promise';
+    promiseState: DeferredPromiseState<any>;
+}
+export type ExtractedEntry = ExtractedStream | ExtractedPromise;
 export type StreamState = {
     promises: Array<ControlledPromise<string | null>>;
 };