@tanstack/vue-router/dist/esm/Matches.js

Modern and scalable routing for Vue applications

import { renderInNonRouteComponentContext } from "./nonRouteComponentContext.js";
import { CatchBoundary } from "./CatchBoundary.js";
import { useRouter } from "./useRouter.js";
import { routeIdContext } from "./matchContext.js";
import { Match } from "./Match.js";
import { useTransitionerSetup } from "./Transitioner.js";
import * as Vue from "vue";
import { isServer } from "@tanstack/router-core/isServer";
import { useStore } from "@tanstack/vue-store";
//#region src/Matches.tsx
var Matches = Vue.defineComponent({
	name: "Matches",
	setup() {
		const router = useRouter();
		useTransitionerSetup();
		return () => {
			const pendingElement = router.options.defaultPendingComponent ? process.env.NODE_ENV !== "production" ? renderInNonRouteComponentContext(router.options.defaultPendingComponent, void 0, "pendingComponent") : Vue.h(router.options.defaultPendingComponent) : null;
			const inner = (isServer ?? router.isServer) || typeof document !== "undefined" && router.ssr ? Vue.h(MatchesInner) : Vue.h(Vue.Suspense, { fallback: pendingElement }, { default: () => Vue.h(MatchesInner) });
			return router.options.InnerWrap ? Vue.h(router.options.InnerWrap, null, { default: () => inner }) : inner;
		};
	}
});
var errorComponentFn = (props) => {
	return Vue.h("div", { class: "error" }, [
		Vue.h("h1", null, "Error"),
		Vue.h("p", null, props.error.message || String(props.error)),
		Vue.h("button", { onClick: props.reset }, "Try Again")
	]);
};
var MatchesInner = Vue.defineComponent({
	name: "MatchesInner",
	setup() {
		const router = useRouter();
		const matches = useStore(router.stores.matches);
		const routeId = Vue.computed(() => matches.value[0]?.routeId);
		return () => {
			const childElement = routeId.value ? Vue.h(Match, { routeId: routeId.value }) : Vue.h("div");
			if (router.options.disableGlobalCatchBoundary) return childElement;
			return Vue.h(CatchBoundary, {
				getResetKey: () => matches.value,
				errorComponent: errorComponentFn,
				onCatch: process.env.NODE_ENV !== "production" ? (error) => {
					console.warn(`Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`);
					console.warn(`Warning: ${error.message || error.toString()}`);
				} : void 0,
				children: childElement
			});
		};
	}
});
function useMatchRoute() {
	const router = useRouter();
	const location = useStore(router.stores.location, (value) => value.href);
	const resolvedLocation = useStore(router.stores.resolvedLocation, (value) => value?.href);
	const status = useStore(router.stores.status);
	return (opts) => {
		return Vue.computed(() => {
			location.value;
			resolvedLocation.value;
			status.value;
			const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts;
			return router.matchRoute(rest, {
				pending,
				caseSensitive,
				fuzzy,
				includeSearch
			});
		});
	};
}
var MatchRoute = Vue.defineComponent({
	name: "MatchRoute",
	props: {
		from: {
			type: String,
			required: false
		},
		to: {
			type: String,
			required: false
		},
		fuzzy: {
			type: Boolean,
			required: false
		},
		caseSensitive: {
			type: Boolean,
			required: false
		},
		includeSearch: {
			type: Boolean,
			required: false
		},
		pending: {
			type: Boolean,
			required: false
		}
	},
	setup(props, { slots }) {
		const params = useMatchRoute()(props);
		return () => {
			const match = params.value;
			if (!match || !slots.default) return null;
			if (typeof slots.default === "function") return Vue.h(Vue.Fragment, null, slots.default(match));
			return Vue.h(Vue.Fragment, null, slots.default);
		};
	}
});
function useMatches(opts) {
	return useStore(useRouter().stores.matches, (matches) => {
		return opts?.select ? opts.select(matches) : matches;
	});
}
function useParentMatches(opts) {
	const contextRouteId = Vue.inject(routeIdContext);
	return useMatches({ select: (matches) => {
		matches = matches.slice(0, matches.findIndex((d) => d.routeId === contextRouteId));
		return opts?.select ? opts.select(matches) : matches;
	} });
}
function useChildMatches(opts) {
	const contextRouteId = Vue.inject(routeIdContext);
	return useMatches({ select: (matches) => {
		matches = matches.slice(matches.findIndex((d) => d.routeId === contextRouteId) + 1);
		return opts?.select ? opts.select(matches) : matches;
	} });
}
//#endregion
export { MatchRoute, Matches, useChildMatches, useMatchRoute, useMatches, useParentMatches };

//# sourceMappingURL=Matches.js.map