@tanstack/vue-router 1.167.0 → 1.167.2

package/dist/esm/Match.js

@@ -1,328 +1,247 @@
-import * as Vue from "vue";
-import invariant from "tiny-invariant";
-import warning from "tiny-warning";
-import { rootRouteId, isNotFound, isRedirect, createControlledPromise, getLocationChangeInfo } from "@tanstack/router-core";
-import { isServer } from "@tanstack/router-core/isServer";
 import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
-import { ClientOnly } from "./ClientOnly.js";
-import { useRouterState } from "./useRouterState.js";
 import { useRouter } from "./useRouter.js";
-import { CatchNotFound } from "./not-found.js";
+import { useRouterState } from "./useRouterState.js";
 import { matchContext } from "./matchContext.js";
+import { ClientOnly } from "./ClientOnly.js";
+import { CatchNotFound } from "./not-found.js";
 import { renderRouteNotFound } from "./renderRouteNotFound.js";
 import { ScrollRestoration } from "./scroll-restoration.js";
-const Match = Vue.defineComponent({
-  name: "Match",
-  props: {
-    matchId: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const router = useRouter();
-    let lastKnownRouteId = null;
-    const matchData = useRouterState({
-      select: (s) => {
-        let match = s.matches.find((d) => d.id === props.matchId);
-        let matchIndex = match ? s.matches.findIndex((d) => d.id === props.matchId) : -1;
-        if (match) {
-          lastKnownRouteId = match.routeId;
-        } else if (lastKnownRouteId) {
-          match = s.matches.find((d) => d.routeId === lastKnownRouteId);
-          matchIndex = match ? s.matches.findIndex((d) => d.routeId === lastKnownRouteId) : -1;
-        }
-        if (!match) {
-          return null;
-        }
-        const routeId = match.routeId;
-        const parentRouteId = matchIndex > 0 ? s.matches[matchIndex - 1]?.routeId : null;
-        return {
-          matchId: match.id,
-          // Return the actual matchId (may differ from props.matchId)
-          routeId,
-          parentRouteId,
-          loadedAt: s.loadedAt,
-          ssr: match.ssr,
-          _displayPending: match._displayPending
-        };
-      }
-    });
-    invariant(matchData.value, `Could not find routeId for matchId "${props.matchId}". Please file an issue!`);
-    const route = Vue.computed(() => matchData.value ? router.routesById[matchData.value.routeId] : null);
-    const PendingComponent = Vue.computed(() => route.value?.options?.pendingComponent ?? router?.options?.defaultPendingComponent);
-    const pendingElement = Vue.computed(() => PendingComponent.value ? Vue.h(PendingComponent.value) : void 0);
-    const routeErrorComponent = Vue.computed(() => route.value?.options?.errorComponent ?? router?.options?.defaultErrorComponent);
-    const routeOnCatch = Vue.computed(() => route.value?.options?.onCatch ?? router?.options?.defaultOnCatch);
-    const routeNotFoundComponent = Vue.computed(() => route.value?.isRoot ? (
-      // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
-      route.value?.options?.notFoundComponent ?? router?.options?.notFoundRoute?.options?.component
-    ) : route.value?.options?.notFoundComponent);
-    const hasShellComponent = Vue.computed(() => {
-      if (!route.value?.isRoot) return false;
-      return !!route.value.options.shellComponent;
-    });
-    const ShellComponent = Vue.computed(() => hasShellComponent.value ? route.value.options.shellComponent : null);
-    const matchIdRef = Vue.ref(matchData.value?.matchId ?? props.matchId);
-    Vue.watch([() => props.matchId, () => matchData.value?.matchId], ([propsMatchId, dataMatchId]) => {
-      matchIdRef.value = dataMatchId ?? propsMatchId;
-    }, {
-      immediate: true
-    });
-    Vue.provide(matchContext, matchIdRef);
-    return () => {
-      const actualMatchId = matchData.value?.matchId ?? props.matchId;
-      const resolvedNoSsr = matchData.value?.ssr === false || matchData.value?.ssr === "data-only";
-      const shouldClientOnly = resolvedNoSsr || !!matchData.value?._displayPending;
-      const renderMatchContent = () => {
-        const matchInner = Vue.h(MatchInner, {
-          matchId: actualMatchId
-        });
-        let content = shouldClientOnly ? Vue.h(ClientOnly, {
-          fallback: pendingElement.value
-        }, {
-          default: () => matchInner
-        }) : matchInner;
-        if (routeNotFoundComponent.value) {
-          content = Vue.h(CatchNotFound, {
-            fallback: (error) => {
-              if (!routeNotFoundComponent.value || error.routeId && error.routeId !== matchData.value?.routeId || !error.routeId && route.value && !route.value.isRoot) throw error;
-              return Vue.h(routeNotFoundComponent.value, error);
-            },
-            children: content
-          });
-        }
-        if (routeErrorComponent.value) {
-          content = CatchBoundary({
-            getResetKey: () => matchData.value?.loadedAt ?? 0,
-            errorComponent: routeErrorComponent.value || ErrorComponent,
-            onCatch: (error) => {
-              if (isNotFound(error)) throw error;
-              warning(false, `Error in route match: ${actualMatchId}`);
-              routeOnCatch.value?.(error);
-            },
-            children: content
-          });
-        }
-        const withScrollRestoration = [content, matchData.value?.parentRouteId === rootRouteId && router.options.scrollRestoration ? Vue.h(Vue.Fragment, null, [Vue.h(OnRendered), Vue.h(ScrollRestoration)]) : null].filter(Boolean);
-        if (withScrollRestoration.length === 1) {
-          return withScrollRestoration[0];
-        }
-        return Vue.h(Vue.Fragment, null, withScrollRestoration);
-      };
-      if (!hasShellComponent.value) {
-        return renderMatchContent();
-      }
-      return Vue.h(ShellComponent.value, null, {
-        // Important: return a fresh VNode on each slot invocation so that shell
-        // components can re-render without reusing a cached VNode instance.
-        default: () => renderMatchContent()
-      });
-    };
-  }
+import { createControlledPromise, getLocationChangeInfo, isNotFound, isRedirect, rootRouteId } from "@tanstack/router-core";
+import * as Vue from "vue";
+import warning from "tiny-warning";
+import { isServer } from "@tanstack/router-core/isServer";
+import invariant from "tiny-invariant";
+//#region src/Match.tsx
+var Match = Vue.defineComponent({
+	name: "Match",
+	props: { matchId: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		const router = useRouter();
+		let lastKnownRouteId = null;
+		const matchData = useRouterState({ select: (s) => {
+			let match = s.matches.find((d) => d.id === props.matchId);
+			let matchIndex = match ? s.matches.findIndex((d) => d.id === props.matchId) : -1;
+			if (match) lastKnownRouteId = match.routeId;
+			else if (lastKnownRouteId) {
+				match = s.matches.find((d) => d.routeId === lastKnownRouteId);
+				matchIndex = match ? s.matches.findIndex((d) => d.routeId === lastKnownRouteId) : -1;
+			}
+			if (!match) return null;
+			const routeId = match.routeId;
+			const parentRouteId = matchIndex > 0 ? s.matches[matchIndex - 1]?.routeId : null;
+			return {
+				matchId: match.id,
+				routeId,
+				parentRouteId,
+				loadedAt: s.loadedAt,
+				ssr: match.ssr,
+				_displayPending: match._displayPending
+			};
+		} });
+		invariant(matchData.value, `Could not find routeId for matchId "${props.matchId}". Please file an issue!`);
+		const route = Vue.computed(() => matchData.value ? router.routesById[matchData.value.routeId] : null);
+		const PendingComponent = Vue.computed(() => route.value?.options?.pendingComponent ?? router?.options?.defaultPendingComponent);
+		const pendingElement = Vue.computed(() => PendingComponent.value ? Vue.h(PendingComponent.value) : void 0);
+		const routeErrorComponent = Vue.computed(() => route.value?.options?.errorComponent ?? router?.options?.defaultErrorComponent);
+		const routeOnCatch = Vue.computed(() => route.value?.options?.onCatch ?? router?.options?.defaultOnCatch);
+		const routeNotFoundComponent = Vue.computed(() => route.value?.isRoot ? route.value?.options?.notFoundComponent ?? router?.options?.notFoundRoute?.options?.component : route.value?.options?.notFoundComponent);
+		const hasShellComponent = Vue.computed(() => {
+			if (!route.value?.isRoot) return false;
+			return !!route.value.options.shellComponent;
+		});
+		const ShellComponent = Vue.computed(() => hasShellComponent.value ? route.value.options.shellComponent : null);
+		const matchIdRef = Vue.ref(matchData.value?.matchId ?? props.matchId);
+		Vue.watch([() => props.matchId, () => matchData.value?.matchId], ([propsMatchId, dataMatchId]) => {
+			matchIdRef.value = dataMatchId ?? propsMatchId;
+		}, { immediate: true });
+		Vue.provide(matchContext, matchIdRef);
+		return () => {
+			const actualMatchId = matchData.value?.matchId ?? props.matchId;
+			const shouldClientOnly = matchData.value?.ssr === false || matchData.value?.ssr === "data-only" || !!matchData.value?._displayPending;
+			const renderMatchContent = () => {
+				const matchInner = Vue.h(MatchInner, { matchId: actualMatchId });
+				let content = shouldClientOnly ? Vue.h(ClientOnly, { fallback: pendingElement.value }, { default: () => matchInner }) : matchInner;
+				if (routeNotFoundComponent.value) content = Vue.h(CatchNotFound, {
+					fallback: (error) => {
+						if (!routeNotFoundComponent.value || error.routeId && error.routeId !== matchData.value?.routeId || !error.routeId && route.value && !route.value.isRoot) throw error;
+						return Vue.h(routeNotFoundComponent.value, error);
+					},
+					children: content
+				});
+				if (routeErrorComponent.value) content = CatchBoundary({
+					getResetKey: () => matchData.value?.loadedAt ?? 0,
+					errorComponent: routeErrorComponent.value || ErrorComponent,
+					onCatch: (error) => {
+						if (isNotFound(error)) throw error;
+						warning(false, `Error in route match: ${actualMatchId}`);
+						routeOnCatch.value?.(error);
+					},
+					children: content
+				});
+				const withScrollRestoration = [content, matchData.value?.parentRouteId === rootRouteId && router.options.scrollRestoration ? Vue.h(Vue.Fragment, null, [Vue.h(OnRendered), Vue.h(ScrollRestoration)]) : null].filter(Boolean);
+				if (withScrollRestoration.length === 1) return withScrollRestoration[0];
+				return Vue.h(Vue.Fragment, null, withScrollRestoration);
+			};
+			if (!hasShellComponent.value) return renderMatchContent();
+			return Vue.h(ShellComponent.value, null, { default: () => renderMatchContent() });
+		};
+	}
 });
-const OnRendered = Vue.defineComponent({
-  name: "OnRendered",
-  setup() {
-    const router = useRouter();
-    const location = useRouterState({
-      select: (s) => {
-        return s.resolvedLocation?.state.key;
-      }
-    });
-    Vue.watchEffect(() => {
-      if (location.value) {
-        router.emit({
-          type: "onRendered",
-          ...getLocationChangeInfo(router.state)
-        });
-      }
-    });
-    return () => null;
-  }
+var OnRendered = Vue.defineComponent({
+	name: "OnRendered",
+	setup() {
+		const router = useRouter();
+		const location = useRouterState({ select: (s) => {
+			return s.resolvedLocation?.state.key;
+		} });
+		Vue.watchEffect(() => {
+			if (location.value) router.emit({
+				type: "onRendered",
+				...getLocationChangeInfo(router.state)
+			});
+		});
+		return () => null;
+	}
 });
-const MatchInner = Vue.defineComponent({
-  name: "MatchInner",
-  props: {
-    matchId: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const router = useRouter();
-    let lastKnownRouteId = null;
-    const combinedState = useRouterState({
-      select: (s) => {
-        let match2 = s.matches.find((d) => d.id === props.matchId);
-        if (match2) {
-          lastKnownRouteId = match2.routeId;
-        } else if (lastKnownRouteId) {
-          const sameRouteMatch = s.matches.find((d) => d.routeId === lastKnownRouteId);
-          if (sameRouteMatch) {
-            match2 = sameRouteMatch;
-          }
-        }
-        if (!match2) {
-          return null;
-        }
-        const routeId = match2.routeId;
-        const remountFn = router.routesById[routeId].options.remountDeps ?? router.options.defaultRemountDeps;
-        let remountKey2;
-        if (remountFn) {
-          const remountDeps = remountFn({
-            routeId,
-            loaderDeps: match2.loaderDeps,
-            params: match2._strictParams,
-            search: match2._strictSearch
-          });
-          remountKey2 = remountDeps ? JSON.stringify(remountDeps) : void 0;
-        }
-        return {
-          routeId,
-          match: {
-            id: match2.id,
-            status: match2.status,
-            error: match2.error,
-            ssr: match2.ssr,
-            _forcePending: match2._forcePending,
-            _displayPending: match2._displayPending
-          },
-          remountKey: remountKey2
-        };
-      }
-    });
-    const route = Vue.computed(() => {
-      if (!combinedState.value) return null;
-      return router.routesById[combinedState.value.routeId];
-    });
-    const match = Vue.computed(() => combinedState.value?.match);
-    const remountKey = Vue.computed(() => combinedState.value?.remountKey);
-    return () => {
-      if (!combinedState.value || !match.value || !route.value) return null;
-      if (match.value._displayPending) {
-        const PendingComponent = route.value.options.pendingComponent ?? router.options.defaultPendingComponent;
-        return PendingComponent ? Vue.h(PendingComponent) : null;
-      }
-      if (match.value._forcePending) {
-        const PendingComponent = route.value.options.pendingComponent ?? router.options.defaultPendingComponent;
-        return PendingComponent ? Vue.h(PendingComponent) : null;
-      }
-      if (match.value.status === "notFound") {
-        invariant(isNotFound(match.value.error), "Expected a notFound error");
-        return renderRouteNotFound(router, route.value, match.value.error);
-      }
-      if (match.value.status === "redirected") {
-        invariant(isRedirect(match.value.error), "Expected a redirect error");
-        throw router.getMatch(match.value.id)?._nonReactive.loadPromise;
-      }
-      if (match.value.status === "error") {
-        const RouteErrorComponent = route.value.options.errorComponent ?? router.options.defaultErrorComponent;
-        if (RouteErrorComponent) {
-          return Vue.h(RouteErrorComponent, {
-            error: match.value.error,
-            reset: () => {
-              router.invalidate();
-            },
-            info: {
-              componentStack: ""
-            }
-          });
-        }
-        throw match.value.error;
-      }
-      if (match.value.status === "pending") {
-        const pendingMinMs = route.value.options.pendingMinMs ?? router.options.defaultPendingMinMs;
-        const routerMatch = router.getMatch(match.value.id);
-        if (pendingMinMs && routerMatch && !routerMatch._nonReactive.minPendingPromise) {
-          if (!(isServer ?? router.isServer)) {
-            const minPendingPromise = createControlledPromise();
-            routerMatch._nonReactive.minPendingPromise = minPendingPromise;
-            setTimeout(() => {
-              minPendingPromise.resolve();
-              routerMatch._nonReactive.minPendingPromise = void 0;
-            }, pendingMinMs);
-          }
-        }
-        const PendingComponent = route.value.options.pendingComponent ?? router.options.defaultPendingComponent;
-        if (PendingComponent) {
-          return Vue.h(PendingComponent);
-        }
-        return null;
-      }
-      const Comp = route.value.options.component ?? router.options.defaultComponent;
-      const key = remountKey.value;
-      if (Comp) {
-        return Vue.h(Comp, key !== void 0 ? {
-          key
-        } : void 0);
-      }
-      return Vue.h(Outlet, key !== void 0 ? {
-        key
-      } : void 0);
-    };
-  }
+var MatchInner = Vue.defineComponent({
+	name: "MatchInner",
+	props: { matchId: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		const router = useRouter();
+		let lastKnownRouteId = null;
+		const combinedState = useRouterState({ select: (s) => {
+			let match = s.matches.find((d) => d.id === props.matchId);
+			if (match) lastKnownRouteId = match.routeId;
+			else if (lastKnownRouteId) {
+				const sameRouteMatch = s.matches.find((d) => d.routeId === lastKnownRouteId);
+				if (sameRouteMatch) match = sameRouteMatch;
+			}
+			if (!match) return null;
+			const routeId = match.routeId;
+			const remountFn = router.routesById[routeId].options.remountDeps ?? router.options.defaultRemountDeps;
+			let remountKey;
+			if (remountFn) {
+				const remountDeps = remountFn({
+					routeId,
+					loaderDeps: match.loaderDeps,
+					params: match._strictParams,
+					search: match._strictSearch
+				});
+				remountKey = remountDeps ? JSON.stringify(remountDeps) : void 0;
+			}
+			return {
+				routeId,
+				match: {
+					id: match.id,
+					status: match.status,
+					error: match.error,
+					ssr: match.ssr,
+					_forcePending: match._forcePending,
+					_displayPending: match._displayPending
+				},
+				remountKey
+			};
+		} });
+		const route = Vue.computed(() => {
+			if (!combinedState.value) return null;
+			return router.routesById[combinedState.value.routeId];
+		});
+		const match = Vue.computed(() => combinedState.value?.match);
+		const remountKey = Vue.computed(() => combinedState.value?.remountKey);
+		return () => {
+			if (!combinedState.value || !match.value || !route.value) return null;
+			if (match.value._displayPending) {
+				const PendingComponent = route.value.options.pendingComponent ?? router.options.defaultPendingComponent;
+				return PendingComponent ? Vue.h(PendingComponent) : null;
+			}
+			if (match.value._forcePending) {
+				const PendingComponent = route.value.options.pendingComponent ?? router.options.defaultPendingComponent;
+				return PendingComponent ? Vue.h(PendingComponent) : null;
+			}
+			if (match.value.status === "notFound") {
+				invariant(isNotFound(match.value.error), "Expected a notFound error");
+				return renderRouteNotFound(router, route.value, match.value.error);
+			}
+			if (match.value.status === "redirected") {
+				invariant(isRedirect(match.value.error), "Expected a redirect error");
+				throw router.getMatch(match.value.id)?._nonReactive.loadPromise;
+			}
+			if (match.value.status === "error") {
+				const RouteErrorComponent = route.value.options.errorComponent ?? router.options.defaultErrorComponent;
+				if (RouteErrorComponent) return Vue.h(RouteErrorComponent, {
+					error: match.value.error,
+					reset: () => {
+						router.invalidate();
+					},
+					info: { componentStack: "" }
+				});
+				throw match.value.error;
+			}
+			if (match.value.status === "pending") {
+				const pendingMinMs = route.value.options.pendingMinMs ?? router.options.defaultPendingMinMs;
+				const routerMatch = router.getMatch(match.value.id);
+				if (pendingMinMs && routerMatch && !routerMatch._nonReactive.minPendingPromise) {
+					if (!(isServer ?? router.isServer)) {
+						const minPendingPromise = createControlledPromise();
+						routerMatch._nonReactive.minPendingPromise = minPendingPromise;
+						setTimeout(() => {
+							minPendingPromise.resolve();
+							routerMatch._nonReactive.minPendingPromise = void 0;
+						}, pendingMinMs);
+					}
+				}
+				const PendingComponent = route.value.options.pendingComponent ?? router.options.defaultPendingComponent;
+				if (PendingComponent) return Vue.h(PendingComponent);
+				return null;
+			}
+			const Comp = route.value.options.component ?? router.options.defaultComponent;
+			const key = remountKey.value;
+			if (Comp) return Vue.h(Comp, key !== void 0 ? { key } : void 0);
+			return Vue.h(Outlet, key !== void 0 ? { key } : void 0);
+		};
+	}
 });
-const Outlet = Vue.defineComponent({
-  name: "Outlet",
-  setup() {
-    const router = useRouter();
-    const matchId = Vue.inject(matchContext);
-    const safeMatchId = Vue.computed(() => matchId?.value || "");
-    const routeId = useRouterState({
-      select: (s) => s.matches.find((d) => d.id === safeMatchId.value)?.routeId
-    });
-    const route = Vue.computed(() => router.routesById[routeId.value]);
-    const parentGlobalNotFound = useRouterState({
-      select: (s) => {
-        const matches = s.matches;
-        const parentMatch = matches.find((d) => d.id === safeMatchId.value);
-        if (!parentMatch) {
-          return false;
-        }
-        return parentMatch.globalNotFound;
-      }
-    });
-    const childMatchData = useRouterState({
-      select: (s) => {
-        const matches = s.matches;
-        const index = matches.findIndex((d) => d.id === safeMatchId.value);
-        const child = matches[index + 1];
-        if (!child) return null;
-        return {
-          id: child.id,
-          // Key based on routeId + params only (not loaderDeps)
-          // This ensures component recreates when params change,
-          // but NOT when only loaderDeps change
-          paramsKey: child.routeId + JSON.stringify(child._strictParams)
-        };
-      }
-    });
-    return () => {
-      if (parentGlobalNotFound.value) {
-        return renderRouteNotFound(router, route.value, void 0);
-      }
-      if (!childMatchData.value) {
-        return null;
-      }
-      const nextMatch = Vue.h(Match, {
-        matchId: childMatchData.value.id,
-        key: childMatchData.value.paramsKey
-      });
-      if (safeMatchId.value === rootRouteId) {
-        return Vue.h(Vue.Suspense, {
-          fallback: router.options.defaultPendingComponent ? Vue.h(router.options.defaultPendingComponent) : null
-        }, {
-          default: () => nextMatch
-        });
-      }
-      return nextMatch;
-    };
-  }
+var Outlet = Vue.defineComponent({
+	name: "Outlet",
+	setup() {
+		const router = useRouter();
+		const matchId = Vue.inject(matchContext);
+		const safeMatchId = Vue.computed(() => matchId?.value || "");
+		const routeId = useRouterState({ select: (s) => s.matches.find((d) => d.id === safeMatchId.value)?.routeId });
+		const route = Vue.computed(() => router.routesById[routeId.value]);
+		const parentGlobalNotFound = useRouterState({ select: (s) => {
+			const parentMatch = s.matches.find((d) => d.id === safeMatchId.value);
+			if (!parentMatch) return false;
+			return parentMatch.globalNotFound;
+		} });
+		const childMatchData = useRouterState({ select: (s) => {
+			const matches = s.matches;
+			const child = matches[matches.findIndex((d) => d.id === safeMatchId.value) + 1];
+			if (!child) return null;
+			return {
+				id: child.id,
+				paramsKey: child.routeId + JSON.stringify(child._strictParams)
+			};
+		} });
+		return () => {
+			if (parentGlobalNotFound.value) return renderRouteNotFound(router, route.value, void 0);
+			if (!childMatchData.value) return null;
+			const nextMatch = Vue.h(Match, {
+				matchId: childMatchData.value.id,
+				key: childMatchData.value.paramsKey
+			});
+			if (safeMatchId.value === rootRouteId) return Vue.h(Vue.Suspense, { fallback: router.options.defaultPendingComponent ? Vue.h(router.options.defaultPendingComponent) : null }, { default: () => nextMatch });
+			return nextMatch;
+		};
+	}
 });
-export {
-  Match,
-  MatchInner,
-  Outlet
-};
-//# sourceMappingURL=Match.js.map
+//#endregion
+export { Match, Outlet };
+
+//# sourceMappingURL=Match.js.map