@tanstack/react-router 1.34.2 → 1.34.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/RouterProvider.cjs.map +1 -1
- package/dist/cjs/RouterProvider.d.cts +3 -1
- package/dist/cjs/Transitioner.cjs +1 -0
- package/dist/cjs/Transitioner.cjs.map +1 -1
- package/dist/cjs/awaited.cjs +6 -3
- package/dist/cjs/awaited.cjs.map +1 -1
- package/dist/cjs/awaited.d.cts +3 -0
- package/dist/cjs/index.cjs +1 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.d.cts +1 -1
- package/dist/cjs/router.cjs +16 -10
- package/dist/cjs/router.cjs.map +1 -1
- package/dist/cjs/router.d.cts +6 -4
- package/dist/esm/RouterProvider.d.ts +3 -1
- package/dist/esm/RouterProvider.js.map +1 -1
- package/dist/esm/Transitioner.js +1 -0
- package/dist/esm/Transitioner.js.map +1 -1
- package/dist/esm/awaited.d.ts +3 -0
- package/dist/esm/awaited.js +6 -3
- package/dist/esm/awaited.js.map +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/router.d.ts +6 -4
- package/dist/esm/router.js +16 -10
- package/dist/esm/router.js.map +1 -1
- package/package.json +1 -1
- package/src/RouterProvider.tsx +3 -1
- package/src/Transitioner.tsx +1 -6
- package/src/awaited.tsx +6 -4
- package/src/index.tsx +1 -1
- package/src/router.ts +24 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RouterProvider.js","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/consistent-type-imports\nimport * as React from 'react'\nimport { Matches } from './Matches'\nimport { getRouterContext } from './routerContext'\nimport type { NavigateOptions, ToOptions } from './link'\nimport type { ParsedLocation } from './location'\nimport type { AnyRoute } from './route'\nimport type { RoutePaths } from './routeInfo'\nimport type {\n AnyRouter,\n RegisteredRouter,\n Router,\n RouterOptions,\n RouterState,\n} from './router'\n\nimport type { MakeRouteMatch } from './Matches'\n\nexport interface CommitLocationOptions {\n replace?: boolean\n resetScroll?: boolean\n viewTransition?: boolean\n /**\n * @deprecated All navigations use React transitions under the hood now\n **/\n startTransition?: boolean\n}\n\nexport interface MatchLocation {\n to?: string | number | null\n fuzzy?: boolean\n caseSensitive?: boolean\n from?: string\n}\n\nexport type NavigateFn = <\n TTo extends string,\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n TMaskTo extends string = '',\n>(\n opts: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo
|
|
1
|
+
{"version":3,"file":"RouterProvider.js","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/consistent-type-imports\nimport * as React from 'react'\nimport { Matches } from './Matches'\nimport { getRouterContext } from './routerContext'\nimport type { NavigateOptions, ToOptions } from './link'\nimport type { ParsedLocation } from './location'\nimport type { AnyRoute } from './route'\nimport type { RoutePaths } from './routeInfo'\nimport type {\n AnyRouter,\n RegisteredRouter,\n Router,\n RouterOptions,\n RouterState,\n} from './router'\n\nimport type { MakeRouteMatch } from './Matches'\n\nexport interface CommitLocationOptions {\n replace?: boolean\n resetScroll?: boolean\n viewTransition?: boolean\n /**\n * @deprecated All navigations use React transitions under the hood now\n **/\n startTransition?: boolean\n}\n\nexport interface MatchLocation {\n to?: string | number | null\n fuzzy?: boolean\n caseSensitive?: boolean\n from?: string\n}\n\nexport type NavigateFn = <\n TTo extends string,\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends RoutePaths<TRouter['routeTree']> | string = string,\n TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,\n TMaskTo extends string = '',\n>(\n opts: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n __isRedirect?: boolean\n },\n) => Promise<void>\n\nexport type BuildLocationFn<TRouteTree extends AnyRoute> = <\n TTo extends string,\n TFrom extends RoutePaths<TRouteTree> | string = string,\n TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,\n TMaskTo extends string = '',\n>(\n opts: ToOptions<\n Router<TRouteTree, 'never'>,\n TFrom,\n TTo,\n TMaskFrom,\n TMaskTo\n > & {\n leaveParams?: boolean\n },\n) => ParsedLocation\n\nexport type InjectedHtmlEntry = string | (() => Promise<string> | string)\n\nexport function RouterContextProvider<\n TRouter extends AnyRouter = RegisteredRouter,\n TDehydrated extends Record<string, any> = Record<string, any>,\n>({\n router,\n children,\n ...rest\n}: RouterProps<TRouter, TDehydrated> & {\n children: React.ReactNode\n}) {\n // Allow the router to update options on the router instance\n router.update({\n ...router.options,\n ...rest,\n context: {\n ...router.options.context,\n ...rest.context,\n },\n } as any)\n\n const routerContext = getRouterContext()\n\n const provider = (\n <routerContext.Provider value={router}>{children}</routerContext.Provider>\n )\n\n if (router.options.Wrap) {\n return <router.options.Wrap>{provider}</router.options.Wrap>\n }\n\n return provider\n}\n\nexport function RouterProvider<\n TRouter extends AnyRouter = RegisteredRouter,\n TDehydrated extends Record<string, any> = Record<string, any>,\n>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {\n return (\n <RouterContextProvider router={router} {...rest}>\n <Matches />\n </RouterContextProvider>\n )\n}\n\nexport function getRouteMatch<TRouteTree extends AnyRoute>(\n state: RouterState<TRouteTree>,\n id: string,\n): undefined | MakeRouteMatch<TRouteTree> {\n return [\n ...state.cachedMatches,\n ...(state.pendingMatches ?? []),\n ...state.matches,\n ].find((d) => d.id === id)\n}\n\nexport type RouterProps<\n TRouter extends AnyRouter = RegisteredRouter,\n TDehydrated extends Record<string, any> = Record<string, any>,\n> = Omit<\n RouterOptions<\n TRouter['routeTree'],\n NonNullable<TRouter['options']['trailingSlash']>,\n TDehydrated\n >,\n 'context'\n> & {\n router: Router<\n TRouter['routeTree'],\n NonNullable<TRouter['options']['trailingSlash']>\n >\n context?: Partial<\n RouterOptions<\n TRouter['routeTree'],\n NonNullable<TRouter['options']['trailingSlash']>,\n TDehydrated\n >['context']\n >\n}\n"],"names":[],"mappings":";;;AAkEO,SAAS,sBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AAED,SAAO,OAAO;AAAA,IACZ,GAAG,OAAO;AAAA,IACV,GAAG;AAAA,IACH,SAAS;AAAA,MACP,GAAG,OAAO,QAAQ;AAAA,MAClB,GAAG,KAAK;AAAA,IACV;AAAA,EAAA,CACM;AAER,QAAM,gBAAgB;AAEtB,QAAM,WACH,oBAAA,cAAc,UAAd,EAAuB,OAAO,QAAS,SAAS,CAAA;AAG/C,MAAA,OAAO,QAAQ,MAAM;AACvB,WAAQ,oBAAA,OAAO,QAAQ,MAAf,EAAqB,UAAS,SAAA,CAAA;AAAA,EACxC;AAEO,SAAA;AACT;AAEO,SAAS,eAGd,EAAE,QAAQ,GAAG,QAA2C;AACxD,6BACG,uBAAsB,EAAA,QAAiB,GAAG,MACzC,UAAA,oBAAC,UAAQ,CAAA,EACX,CAAA;AAEJ;AAEgB,SAAA,cACd,OACA,IACwC;AACjC,SAAA;AAAA,IACL,GAAG,MAAM;AAAA,IACT,GAAI,MAAM,kBAAkB,CAAC;AAAA,IAC7B,GAAG,MAAM;AAAA,EAAA,EACT,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE;AAC3B;"}
|
package/dist/esm/Transitioner.js
CHANGED
|
@@ -55,6 +55,7 @@ function Transitioner() {
|
|
|
55
55
|
const pathChanged = fromLocation.href !== toLocation.href;
|
|
56
56
|
router.emit({
|
|
57
57
|
type: "onLoad",
|
|
58
|
+
// When the new URL has committed, when the new matches have been loaded into state.matches
|
|
58
59
|
fromLocation,
|
|
59
60
|
toLocation,
|
|
60
61
|
pathChanged
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { pick, useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\n\nexport function Transitioner() {\n const router = useRouter()\n const mountLoadForRouter = React.useRef({ router, mounted: false })\n const routerState = useRouterState({\n select: (s) =>\n pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),\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 })\n\n const previousIsLoading = usePrevious(routerState.isLoading)\n\n const isAnyPending =\n routerState.isLoading || isTransitioning || hasPendingMatches\n const previousIsAnyPending = usePrevious(isAnyPending)\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 useLayoutEffect(() => {\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 })\n\n if (router.state.location.href !== nextLocation.href) {\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 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 && !routerState.isLoading) {\n const toLocation = router.state.location\n const fromLocation = router.state.resolvedLocation\n const pathChanged = fromLocation.href !== toLocation.href\n\n router.emit({\n type: 'onLoad'
|
|
1
|
+
{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { pick, useLayoutEffect, usePrevious } from './utils'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\n\nexport function Transitioner() {\n const router = useRouter()\n const mountLoadForRouter = React.useRef({ router, mounted: false })\n const routerState = useRouterState({\n select: (s) =>\n pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),\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 })\n\n const previousIsLoading = usePrevious(routerState.isLoading)\n\n const isAnyPending =\n routerState.isLoading || isTransitioning || hasPendingMatches\n const previousIsAnyPending = usePrevious(isAnyPending)\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 useLayoutEffect(() => {\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 })\n\n if (router.state.location.href !== nextLocation.href) {\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 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 && !routerState.isLoading) {\n const toLocation = router.state.location\n const fromLocation = router.state.resolvedLocation\n const pathChanged = 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 })\n }\n }, [previousIsLoading, router, routerState.isLoading])\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.href !== toLocation.href\n\n router.emit({\n type: 'onResolved',\n fromLocation,\n toLocation,\n pathChanged,\n })\n\n router.__store.setState((s) => ({\n ...s,\n status: 'idle',\n resolvedLocation: s.location,\n }))\n\n if ((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":[],"mappings":";;;;AAKO,SAAS,eAAe;AAC7B,QAAM,SAAS;AACf,QAAM,qBAAqB,MAAM,OAAO,EAAE,QAAQ,SAAS,OAAO;AAClE,QAAM,cAAc,eAAe;AAAA,IACjC,QAAQ,CAAC,MACP,KAAK,GAAG,CAAC,aAAa,YAAY,oBAAoB,iBAAiB,CAAC;AAAA,EAAA,CAC3E;AAED,QAAM,CAAC,iBAAiB,qBAAqB,IAAI,MAAM,cAAc;AAErE,QAAM,oBAAoB,eAAe;AAAA,IACvC,QAAQ,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,SAAS;AAAA,EAAA,CAC5D;AAEK,QAAA,oBAAoB,YAAY,YAAY,SAAS;AAErD,QAAA,eACJ,YAAY,aAAa,mBAAmB;AACxC,QAAA,uBAAuB,YAAY,YAAY;AAEjD,MAAA,CAAC,OAAO,UAAU;AACpB,WAAO,uBAAuB;AAAA,EAChC;AAIA,kBAAgB,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,IAAA,CACR;AAED,QAAI,OAAO,MAAM,SAAS,SAAS,aAAa,MAAM;AACpD,aAAO,eAAe,EAAE,GAAG,cAAc,SAAS,MAAM;AAAA,IAC1D;AAEA,WAAO,MAAM;AACL;IAAA;AAAA,EAEP,GAAA,CAAC,QAAQ,OAAO,OAAO,CAAC;AAG3B,kBAAgB,MAAM;AAElB,QAAA,OAAO,sBACN,mBAAmB,QAAQ,WAAW,UACrC,mBAAmB,QAAQ,SAC7B;AACA;AAAA,IACF;AACA,uBAAmB,UAAU,EAAE,QAAQ,SAAS,KAAK;AAErD,UAAM,UAAU,YAAY;AACtB,UAAA;AACF,cAAM,OAAO;eACN,KAAK;AACZ,gBAAQ,MAAM,GAAG;AAAA,MACnB;AAAA,IAAA;AAGM;EAAA,GACP,CAAC,MAAM,CAAC;AAEX,kBAAgB,MAAM;AAEhB,QAAA,qBAAqB,CAAC,YAAY,WAAW;AACzC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAAA,KACC,CAAC,mBAAmB,QAAQ,YAAY,SAAS,CAAC;AAErD,kBAAgB,MAAM;AAEhB,QAAA,wBAAwB,CAAC,cAAc;AACnC,YAAA,aAAa,OAAO,MAAM;AAC1B,YAAA,eAAe,OAAO,MAAM;AAC5B,YAAA,cAAc,aAAa,SAAS,WAAW;AAErD,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAEM,aAAA,QAAQ,SAAS,CAAC,OAAO;AAAA,QAC9B,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,kBAAkB,EAAE;AAAA,MACpB,EAAA;AAEF,UAAK,SAAiB,eAAe;AACnC,YAAI,OAAO,MAAM,SAAS,SAAS,IAAI;AACrC,gBAAM,KAAK,SAAS,eAAe,OAAO,MAAM,SAAS,IAAI;AAC7D,cAAI,IAAI;AACN,eAAG,eAAe;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACC,GAAA,CAAC,cAAc,sBAAsB,MAAM,CAAC;AAExC,SAAA;AACT;"}
|
package/dist/esm/awaited.d.ts
CHANGED
|
@@ -8,3 +8,6 @@ export declare function Await<T>(props: AwaitOptions<T> & {
|
|
|
8
8
|
fallback?: React.ReactNode;
|
|
9
9
|
children: (result: T) => React.ReactNode;
|
|
10
10
|
}): React.JSX.Element;
|
|
11
|
+
export declare function ScriptOnce({ className, children, ...rest }: {
|
|
12
|
+
children: string;
|
|
13
|
+
} & React.HTMLProps<HTMLScriptElement>): React.JSX.Element;
|
package/dist/esm/awaited.js
CHANGED
|
@@ -77,8 +77,7 @@ function AwaitInner(props) {
|
|
|
77
77
|
if (window.__TSR__ROUTER__) {
|
|
78
78
|
let deferred = window.__TSR__ROUTER__.getDeferred('${state.uid}');
|
|
79
79
|
if (deferred) deferred.resolve(window.__TSR__DEFERRED__${state.uid});
|
|
80
|
-
}
|
|
81
|
-
document.querySelectorAll('.tsr-script-once').forEach((el) => el.parentElement.removeChild(el));`
|
|
80
|
+
}`
|
|
82
81
|
}
|
|
83
82
|
) : null,
|
|
84
83
|
props.children(data)
|
|
@@ -95,13 +94,17 @@ function ScriptOnce({
|
|
|
95
94
|
...rest,
|
|
96
95
|
className: `tsr-script-once ${className || ""}`,
|
|
97
96
|
dangerouslySetInnerHTML: {
|
|
98
|
-
__html:
|
|
97
|
+
__html: [
|
|
98
|
+
children,
|
|
99
|
+
`document.querySelectorAll('.tsr-script-once').forEach((el) => el.parentElement.removeChild(el));`
|
|
100
|
+
].join("\n")
|
|
99
101
|
}
|
|
100
102
|
}
|
|
101
103
|
);
|
|
102
104
|
}
|
|
103
105
|
export {
|
|
104
106
|
Await,
|
|
107
|
+
ScriptOnce,
|
|
105
108
|
useAwaited
|
|
106
109
|
};
|
|
107
110
|
//# sourceMappingURL=awaited.js.map
|
package/dist/esm/awaited.js.map
CHANGED
|
@@ -1 +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 }
|
|
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 />\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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { createHistory, createBrowserHistory, createHashHistory, createMemoryHistory, type BlockerFn, type HistoryLocation, type RouterHistory, type ParsedPath, type HistoryState, } from '@tanstack/history';
|
|
2
2
|
export { default as invariant } from 'tiny-invariant';
|
|
3
3
|
export { default as warning } from 'tiny-warning';
|
|
4
|
-
export { useAwaited, Await, type AwaitOptions } from './awaited.js';
|
|
4
|
+
export { useAwaited, Await, type AwaitOptions, ScriptOnce } from './awaited.js';
|
|
5
5
|
export { defer, isDehydratedDeferred, type DeferredPromiseState, type DeferredPromise, } from './defer.js';
|
|
6
6
|
export { CatchBoundary, ErrorComponent } from './CatchBoundary.js';
|
|
7
7
|
export { FileRoute, createFileRoute, FileRouteLoader, LazyRoute, createLazyRoute, createLazyFileRoute, type FileRoutesByPath, type LazyRouteOptions, } from './fileRoute.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createBrowserHistory, createHashHistory, createHistory, createMemoryHistory } from "@tanstack/history";
|
|
2
2
|
import { default as default2 } from "tiny-invariant";
|
|
3
3
|
import { default as default3 } from "tiny-warning";
|
|
4
|
-
import { Await, useAwaited } from "./awaited.js";
|
|
4
|
+
import { Await, ScriptOnce, useAwaited } from "./awaited.js";
|
|
5
5
|
import { defer, isDehydratedDeferred } from "./defer.js";
|
|
6
6
|
import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
|
|
7
7
|
import { FileRoute, FileRouteLoader, LazyRoute, createFileRoute, createLazyFileRoute, createLazyRoute } from "./fileRoute.js";
|
|
@@ -55,6 +55,7 @@ export {
|
|
|
55
55
|
Router,
|
|
56
56
|
RouterContextProvider,
|
|
57
57
|
RouterProvider,
|
|
58
|
+
ScriptOnce,
|
|
58
59
|
ScrollRestoration,
|
|
59
60
|
SearchParamError,
|
|
60
61
|
cleanPath,
|
package/dist/esm/router.d.ts
CHANGED
|
@@ -303,6 +303,12 @@ export interface DehydratedRouter {
|
|
|
303
303
|
export type RouterConstructorOptions<TRouteTree extends AnyRoute, TTrailingSlashOption extends TrailingSlashOption, TDehydrated extends Record<string, any>, TSerializedError extends Record<string, any>> = Omit<RouterOptions<TRouteTree, TTrailingSlashOption, TDehydrated, TSerializedError>, 'context'> & RouterContextOptions<TRouteTree>;
|
|
304
304
|
export declare const componentTypes: readonly ["component", "errorComponent", "pendingComponent", "notFoundComponent"];
|
|
305
305
|
export type RouterEvents = {
|
|
306
|
+
onBeforeNavigate: {
|
|
307
|
+
type: 'onBeforeNavigate';
|
|
308
|
+
fromLocation: ParsedLocation;
|
|
309
|
+
toLocation: ParsedLocation;
|
|
310
|
+
pathChanged: boolean;
|
|
311
|
+
};
|
|
306
312
|
onBeforeLoad: {
|
|
307
313
|
type: 'onBeforeLoad';
|
|
308
314
|
fromLocation: ParsedLocation;
|
|
@@ -387,10 +393,6 @@ export declare class Router<in out TRouteTree extends AnyRoute, in out TTrailing
|
|
|
387
393
|
cleanCache: () => void;
|
|
388
394
|
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>;
|
|
389
395
|
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'];
|
|
390
|
-
/**
|
|
391
|
-
* @deprecated Injecting HTML directly is no longer supported. Use the new <ScriptOnce /> component instead.
|
|
392
|
-
*/
|
|
393
|
-
injectHtml: (html: string | (() => Promise<string> | string)) => Promise<void>;
|
|
394
396
|
registeredDeferredsIds: Map<string, {}>;
|
|
395
397
|
registeredDeferreds: WeakMap<{}, DeferredPromiseState<any>>;
|
|
396
398
|
getDeferred: (uid: string) => DeferredPromiseState<any> | undefined;
|
package/dist/esm/router.js
CHANGED
|
@@ -565,7 +565,7 @@ class Router {
|
|
|
565
565
|
resetScroll
|
|
566
566
|
});
|
|
567
567
|
};
|
|
568
|
-
this.navigate = ({ from, to, ...rest }) => {
|
|
568
|
+
this.navigate = ({ from, to, __isRedirect, ...rest }) => {
|
|
569
569
|
const toString = String(to);
|
|
570
570
|
let isExternal;
|
|
571
571
|
try {
|
|
@@ -599,12 +599,6 @@ class Router {
|
|
|
599
599
|
const prevLocation = this.state.resolvedLocation;
|
|
600
600
|
const pathDidChange = prevLocation.href !== next.href;
|
|
601
601
|
this.cancelMatches();
|
|
602
|
-
this.emit({
|
|
603
|
-
type: "onBeforeLoad",
|
|
604
|
-
fromLocation: prevLocation,
|
|
605
|
-
toLocation: next,
|
|
606
|
-
pathChanged: pathDidChange
|
|
607
|
-
});
|
|
608
602
|
let pendingMatches;
|
|
609
603
|
this.__store.batch(() => {
|
|
610
604
|
pendingMatches = this.matchRoutes(next.pathname, next.search);
|
|
@@ -620,6 +614,20 @@ class Router {
|
|
|
620
614
|
})
|
|
621
615
|
}));
|
|
622
616
|
});
|
|
617
|
+
if (!this.state.redirect) {
|
|
618
|
+
this.emit({
|
|
619
|
+
type: "onBeforeNavigate",
|
|
620
|
+
fromLocation: prevLocation,
|
|
621
|
+
toLocation: next,
|
|
622
|
+
pathChanged: pathDidChange
|
|
623
|
+
});
|
|
624
|
+
}
|
|
625
|
+
this.emit({
|
|
626
|
+
type: "onBeforeLoad",
|
|
627
|
+
fromLocation: prevLocation,
|
|
628
|
+
toLocation: next,
|
|
629
|
+
pathChanged: pathDidChange
|
|
630
|
+
});
|
|
623
631
|
await this.loadMatches({
|
|
624
632
|
matches: pendingMatches,
|
|
625
633
|
location: next,
|
|
@@ -672,7 +680,7 @@ class Router {
|
|
|
672
680
|
if (isResolvedRedirect(err)) {
|
|
673
681
|
redirect = err;
|
|
674
682
|
if (!this.isServer) {
|
|
675
|
-
this.navigate({ ...err, replace: true });
|
|
683
|
+
this.navigate({ ...err, replace: true, __isRedirect: true });
|
|
676
684
|
this.load();
|
|
677
685
|
}
|
|
678
686
|
} else if (isNotFound(err)) {
|
|
@@ -1144,8 +1152,6 @@ class Router {
|
|
|
1144
1152
|
}
|
|
1145
1153
|
return match;
|
|
1146
1154
|
};
|
|
1147
|
-
this.injectHtml = async (html) => {
|
|
1148
|
-
};
|
|
1149
1155
|
this.registeredDeferredsIds = /* @__PURE__ */ new Map();
|
|
1150
1156
|
this.registeredDeferreds = /* @__PURE__ */ new WeakMap();
|
|
1151
1157
|
this.getDeferred = (uid) => {
|