@tanstack/react-router 1.34.3 → 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/router.cjs +16 -8
- package/dist/cjs/router.cjs.map +1 -1
- package/dist/cjs/router.d.cts +6 -0
- 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/router.d.ts +6 -0
- package/dist/esm/router.js +16 -8
- 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/router.ts +24 -10
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/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;
|
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)) {
|