@tanstack/vue-router 1.167.5 → 1.168.0

package/dist/esm/link.js

@@ -1,9 +1,9 @@
 import { useRouter } from "./useRouter.js";
-import { useRouterState } from "./useRouterState.js";
 import { useIntersectionObserver } from "./utils.js";
-import { useMatches } from "./Matches.js";
 import { deepEqual, exactPathTest, isDangerousProtocol, preloadWarning, removeTrailingSlash } from "@tanstack/router-core";
 import * as Vue from "vue";
+import { isServer } from "@tanstack/router-core/isServer";
+import { useStore } from "@tanstack/vue-store";
 //#region src/link.tsx
 var timeoutMap = /* @__PURE__ */ new WeakMap();
 function useLinkProps(options) {
@@ -22,107 +22,13 @@ function useLinkProps(options) {
 			return "internal";
 		}
 	});
-	const buildLocationKey = useRouterState({ select: (s) => {
-		const leaf = s.matches[s.matches.length - 1];
-		return {
-			search: leaf?.search,
-			hash: s.location.hash,
-			path: leaf?.pathname
-		};
-	} });
-	const from = useMatches({ select: (matches) => options.from ?? matches[matches.length - 1]?.fullPath });
-	const _options = Vue.computed(() => ({
-		...options,
-		from: from.value
-	}));
-	const next = Vue.computed(() => {
-		buildLocationKey.value;
-		return router.buildLocation(_options.value);
-	});
-	const preload = Vue.computed(() => {
-		if (_options.value.reloadDocument) return false;
-		return options.preload ?? router.options.defaultPreload;
-	});
-	const preloadDelay = Vue.computed(() => options.preloadDelay ?? router.options.defaultPreloadDelay ?? 0);
-	const isActive = useRouterState({ select: (s) => {
-		const activeOptions = options.activeOptions;
-		if (activeOptions?.exact) {
-			if (!exactPathTest(s.location.pathname, next.value.pathname, router.basepath)) return false;
-		} else {
-			const currentPathSplit = removeTrailingSlash(s.location.pathname, router.basepath).split("/");
-			if (!(removeTrailingSlash(next.value?.pathname, router.basepath)?.split("/"))?.every((d, i) => d === currentPathSplit[i])) return false;
-		}
-		if (activeOptions?.includeSearch ?? true) {
-			if (!deepEqual(s.location.search, next.value.search, {
-				partial: !activeOptions?.exact,
-				ignoreUndefined: !activeOptions?.explicitUndefined
-			})) return false;
-		}
-		if (activeOptions?.includeHash) return s.location.hash === next.value.hash;
-		return true;
-	} });
-	const doPreload = () => router.preloadRoute(_options.value).catch((err) => {
-		console.warn(err);
-		console.warn(preloadWarning);
-	});
-	const preloadViewportIoCallback = (entry) => {
-		if (entry?.isIntersecting) doPreload();
-	};
 	const ref = Vue.ref(null);
-	useIntersectionObserver(ref, preloadViewportIoCallback, { rootMargin: "100px" }, { disabled: () => !!options.disabled || !(preload.value === "viewport") });
-	Vue.effect(() => {
-		if (hasRenderFetched) return;
-		if (!options.disabled && preload.value === "render") {
-			doPreload();
-			hasRenderFetched = true;
-		}
-	});
-	const getPropsSafeToSpread = () => {
-		const result = {};
-		const optionRecord = options;
-		for (const key in options) if (![
-			"activeProps",
-			"inactiveProps",
-			"activeOptions",
-			"to",
-			"preload",
-			"preloadDelay",
-			"hashScrollIntoView",
-			"replace",
-			"startTransition",
-			"resetScroll",
-			"viewTransition",
-			"children",
-			"target",
-			"disabled",
-			"style",
-			"class",
-			"onClick",
-			"onBlur",
-			"onFocus",
-			"onMouseEnter",
-			"onMouseLeave",
-			"onMouseOver",
-			"onMouseOut",
-			"onTouchStart",
-			"ignoreBlocker",
-			"params",
-			"search",
-			"hash",
-			"state",
-			"mask",
-			"reloadDocument",
-			"_asChild",
-			"from",
-			"additionalProps"
-		].includes(key)) result[key] = optionRecord[key];
-		return result;
-	};
+	const eventHandlers = getLinkEventHandlers(options);
 	if (type.value === "external") {
 		if (isDangerousProtocol(options.to, router.protocolAllowlist)) {
 			if (process.env.NODE_ENV !== "production") console.warn(`Blocked Link with dangerous protocol: ${options.to}`);
 			const safeProps = {
-				...getPropsSafeToSpread(),
+				...getPropsSafeToSpread(options),
 				ref,
 				target: options.target,
 				disabled: options.disabled,
@@ -131,11 +37,11 @@ function useLinkProps(options) {
 				onClick: options.onClick,
 				onBlur: options.onBlur,
 				onFocus: options.onFocus,
-				onMouseEnter: options.onMouseEnter,
-				onMouseLeave: options.onMouseLeave,
-				onMouseOver: options.onMouseOver,
-				onMouseOut: options.onMouseOut,
-				onTouchStart: options.onTouchStart
+				onMouseenter: eventHandlers.onMouseenter,
+				onMouseleave: eventHandlers.onMouseleave,
+				onMouseover: eventHandlers.onMouseover,
+				onMouseout: eventHandlers.onMouseout,
+				onTouchstart: eventHandlers.onTouchstart
 			};
 			Object.keys(safeProps).forEach((key) => {
 				if (safeProps[key] === void 0) delete safeProps[key];
@@ -143,7 +49,7 @@ function useLinkProps(options) {
 			return Vue.computed(() => safeProps);
 		}
 		const externalProps = {
-			...getPropsSafeToSpread(),
+			...getPropsSafeToSpread(options),
 			ref,
 			href: options.to,
 			target: options.target,
@@ -153,22 +59,88 @@ function useLinkProps(options) {
 			onClick: options.onClick,
 			onBlur: options.onBlur,
 			onFocus: options.onFocus,
-			onMouseEnter: options.onMouseEnter,
-			onMouseLeave: options.onMouseLeave,
-			onMouseOver: options.onMouseOver,
-			onMouseOut: options.onMouseOut,
-			onTouchStart: options.onTouchStart
+			onMouseenter: eventHandlers.onMouseenter,
+			onMouseleave: eventHandlers.onMouseleave,
+			onMouseover: eventHandlers.onMouseover,
+			onMouseout: eventHandlers.onMouseout,
+			onTouchstart: eventHandlers.onTouchstart
 		};
 		Object.keys(externalProps).forEach((key) => {
 			if (externalProps[key] === void 0) delete externalProps[key];
 		});
 		return Vue.computed(() => externalProps);
 	}
+	if (isServer ?? router.isServer) {
+		const next = router.buildLocation(options);
+		const href = getHref({
+			options,
+			router,
+			nextLocation: next
+		});
+		const isActive = getIsActive({
+			loc: router.stores.location.state,
+			nextLoc: next,
+			activeOptions: options.activeOptions,
+			router
+		});
+		const { resolvedActiveProps, resolvedInactiveProps, resolvedClassName, resolvedStyle } = resolveStyleProps({
+			options,
+			isActive
+		});
+		const result = combineResultProps({
+			href,
+			options,
+			isActive,
+			isTransitioning: false,
+			resolvedActiveProps,
+			resolvedInactiveProps,
+			resolvedClassName,
+			resolvedStyle
+		});
+		return Vue.ref(result);
+	}
+	const currentLocation = useStore(router.stores.location, (l) => l, { equal: (prev, next) => prev.href === next.href });
+	const next = Vue.computed(() => {
+		const opts = {
+			_fromLocation: currentLocation.value,
+			...options
+		};
+		return router.buildLocation(opts);
+	});
+	const preload = Vue.computed(() => {
+		if (options.reloadDocument) return false;
+		return options.preload ?? router.options.defaultPreload;
+	});
+	const preloadDelay = Vue.computed(() => options.preloadDelay ?? router.options.defaultPreloadDelay ?? 0);
+	const isActive = Vue.computed(() => getIsActive({
+		activeOptions: options.activeOptions,
+		loc: currentLocation.value,
+		nextLoc: next.value,
+		router
+	}));
+	const doPreload = () => router.preloadRoute({
+		...options,
+		_builtLocation: next.value
+	}).catch((err) => {
+		console.warn(err);
+		console.warn(preloadWarning);
+	});
+	const preloadViewportIoCallback = (entry) => {
+		if (entry?.isIntersecting) doPreload();
+	};
+	useIntersectionObserver(ref, preloadViewportIoCallback, { rootMargin: "100px" }, { disabled: () => !!options.disabled || !(preload.value === "viewport") });
+	Vue.effect(() => {
+		if (hasRenderFetched) return;
+		if (!options.disabled && preload.value === "render") {
+			doPreload();
+			hasRenderFetched = true;
+		}
+	});
 	const handleClick = (e) => {
 		const elementTarget = e.currentTarget?.getAttribute("target");
 		const effectiveTarget = options.target !== void 0 ? options.target : elementTarget;
 		if (!options.disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!effectiveTarget || effectiveTarget === "_self") && e.button === 0) {
-			if (_options.value.reloadDocument) return;
+			if (options.reloadDocument) return;
 			e.preventDefault();
 			isTransitioning.value = true;
 			const unsub = router.subscribe("onResolved", () => {
@@ -176,7 +148,7 @@ function useLinkProps(options) {
 				isTransitioning.value = false;
 			});
 			router.navigate({
-				..._options.value,
+				...options,
 				replace: options.replace,
 				resetScroll: options.resetScroll,
 				hashScrollIntoView: options.hashScrollIntoView,
@@ -217,81 +189,173 @@ function useLinkProps(options) {
 			for (const handler of handlers) if (handler) handler(event);
 		};
 	}
-	const resolvedActiveProps = Vue.computed(() => {
-		const activeProps = options.activeProps || (() => ({ class: "active" }));
-		return (isActive.value ? typeof activeProps === "function" ? activeProps() : activeProps : {}) || {
-			class: void 0,
-			style: void 0
-		};
-	});
-	const resolvedInactiveProps = Vue.computed(() => {
-		const inactiveProps = options.inactiveProps || (() => ({}));
-		return (isActive.value ? {} : typeof inactiveProps === "function" ? inactiveProps() : inactiveProps) || {
-			class: void 0,
-			style: void 0
-		};
-	});
-	const resolvedClassName = Vue.computed(() => {
-		const classes = [
-			options.class,
-			resolvedActiveProps.value?.class,
-			resolvedInactiveProps.value?.class
-		].filter(Boolean);
-		return classes.length ? classes.join(" ") : void 0;
-	});
-	const resolvedStyle = Vue.computed(() => {
-		const result = {};
-		if (options.style) Object.assign(result, options.style);
-		if (resolvedActiveProps.value?.style) Object.assign(result, resolvedActiveProps.value.style);
-		if (resolvedInactiveProps.value?.style) Object.assign(result, resolvedInactiveProps.value.style);
-		return Object.keys(result).length > 0 ? result : void 0;
-	});
-	const href = Vue.computed(() => {
-		if (options.disabled) return;
-		const nextLocation = next.value;
-		const location = nextLocation?.maskedLocation ?? nextLocation;
-		const publicHref = location?.publicHref;
-		if (!publicHref) return void 0;
-		if (location?.external) return publicHref;
-		return router.history.createHref(publicHref) || "/";
-	});
+	const resolvedStyleProps = Vue.computed(() => resolveStyleProps({
+		options,
+		isActive: isActive.value
+	}));
+	const href = Vue.computed(() => getHref({
+		options,
+		router,
+		nextLocation: next.value
+	}));
 	const staticEventHandlers = {
 		onClick: composeEventHandlers([options.onClick, handleClick]),
 		onBlur: composeEventHandlers([options.onBlur, handleLeave]),
 		onFocus: composeEventHandlers([options.onFocus, enqueueIntentPreload]),
-		onMouseenter: composeEventHandlers([options.onMouseEnter, enqueueIntentPreload]),
-		onMouseover: composeEventHandlers([options.onMouseOver, enqueueIntentPreload]),
-		onMouseleave: composeEventHandlers([options.onMouseLeave, handleLeave]),
-		onMouseout: composeEventHandlers([options.onMouseOut, handleLeave]),
-		onTouchstart: composeEventHandlers([options.onTouchStart, handleTouchStart])
+		onMouseenter: composeEventHandlers([eventHandlers.onMouseenter, enqueueIntentPreload]),
+		onMouseover: composeEventHandlers([eventHandlers.onMouseover, enqueueIntentPreload]),
+		onMouseleave: composeEventHandlers([eventHandlers.onMouseleave, handleLeave]),
+		onMouseout: composeEventHandlers([eventHandlers.onMouseout, handleLeave]),
+		onTouchstart: composeEventHandlers([eventHandlers.onTouchstart, handleTouchStart])
 	};
 	return Vue.computed(() => {
-		const result = {
-			...getPropsSafeToSpread(),
+		const { resolvedActiveProps, resolvedInactiveProps, resolvedClassName, resolvedStyle } = resolvedStyleProps.value;
+		return combineResultProps({
 			href: href.value,
+			options,
 			ref,
-			...staticEventHandlers,
-			disabled: !!options.disabled,
-			target: options.target
-		};
-		if (resolvedStyle.value) result.style = resolvedStyle.value;
-		if (resolvedClassName.value) result.class = resolvedClassName.value;
-		if (options.disabled) {
-			result.role = "link";
-			result["aria-disabled"] = true;
-		}
-		if (isActive.value) {
-			result["data-status"] = "active";
-			result["aria-current"] = "page";
-		}
-		if (isTransitioning.value) result["data-transitioning"] = "transitioning";
-		const activeP = resolvedActiveProps.value;
-		const inactiveP = resolvedInactiveProps.value;
-		for (const key of Object.keys(activeP)) if (key !== "class" && key !== "style") result[key] = activeP[key];
-		for (const key of Object.keys(inactiveP)) if (key !== "class" && key !== "style") result[key] = inactiveP[key];
-		return result;
+			staticEventHandlers,
+			isActive: isActive.value,
+			isTransitioning: isTransitioning.value,
+			resolvedActiveProps,
+			resolvedInactiveProps,
+			resolvedClassName,
+			resolvedStyle
+		});
 	});
 }
+function resolveStyleProps({ options, isActive }) {
+	const activeProps = options.activeProps || (() => ({ class: "active" }));
+	const resolvedActiveProps = (isActive ? typeof activeProps === "function" ? activeProps() : activeProps : {}) || {
+		class: void 0,
+		style: void 0
+	};
+	const inactiveProps = options.inactiveProps || (() => ({}));
+	const resolvedInactiveProps = (isActive ? {} : typeof inactiveProps === "function" ? inactiveProps() : inactiveProps) || {
+		class: void 0,
+		style: void 0
+	};
+	const classes = [
+		options.class,
+		resolvedActiveProps?.class,
+		resolvedInactiveProps?.class
+	].filter(Boolean);
+	const resolvedClassName = classes.length ? classes.join(" ") : void 0;
+	const result = {};
+	if (options.style) Object.assign(result, options.style);
+	if (resolvedActiveProps?.style) Object.assign(result, resolvedActiveProps.style);
+	if (resolvedInactiveProps?.style) Object.assign(result, resolvedInactiveProps.style);
+	return {
+		resolvedActiveProps,
+		resolvedInactiveProps,
+		resolvedClassName,
+		resolvedStyle: Object.keys(result).length > 0 ? result : void 0
+	};
+}
+function combineResultProps({ href, options, isActive, isTransitioning, resolvedActiveProps, resolvedInactiveProps, resolvedClassName, resolvedStyle, ref, staticEventHandlers }) {
+	const result = {
+		...getPropsSafeToSpread(options),
+		ref,
+		...staticEventHandlers,
+		href,
+		disabled: !!options.disabled,
+		target: options.target
+	};
+	if (resolvedStyle) result.style = resolvedStyle;
+	if (resolvedClassName) result.class = resolvedClassName;
+	if (options.disabled) {
+		result.role = "link";
+		result["aria-disabled"] = true;
+	}
+	if (isActive) {
+		result["data-status"] = "active";
+		result["aria-current"] = "page";
+	}
+	if (isTransitioning) result["data-transitioning"] = "transitioning";
+	for (const key of Object.keys(resolvedActiveProps)) if (key !== "class" && key !== "style") result[key] = resolvedActiveProps[key];
+	for (const key of Object.keys(resolvedInactiveProps)) if (key !== "class" && key !== "style") result[key] = resolvedInactiveProps[key];
+	return result;
+}
+function getLinkEventHandlers(options) {
+	return {
+		onMouseenter: options.onMouseEnter ?? options.onMouseenter,
+		onMouseleave: options.onMouseLeave ?? options.onMouseleave,
+		onMouseover: options.onMouseOver ?? options.onMouseover,
+		onMouseout: options.onMouseOut ?? options.onMouseout,
+		onTouchstart: options.onTouchStart ?? options.onTouchstart
+	};
+}
+var propsUnsafeToSpread = new Set([
+	"activeProps",
+	"inactiveProps",
+	"activeOptions",
+	"to",
+	"preload",
+	"preloadDelay",
+	"hashScrollIntoView",
+	"replace",
+	"startTransition",
+	"resetScroll",
+	"viewTransition",
+	"children",
+	"target",
+	"disabled",
+	"style",
+	"class",
+	"onClick",
+	"onBlur",
+	"onFocus",
+	"onMouseEnter",
+	"onMouseenter",
+	"onMouseLeave",
+	"onMouseleave",
+	"onMouseOver",
+	"onMouseover",
+	"onMouseOut",
+	"onMouseout",
+	"onTouchStart",
+	"onTouchstart",
+	"ignoreBlocker",
+	"params",
+	"search",
+	"hash",
+	"state",
+	"mask",
+	"reloadDocument",
+	"_asChild",
+	"from",
+	"additionalProps"
+]);
+var getPropsSafeToSpread = (options) => {
+	const result = {};
+	for (const key in options) if (!propsUnsafeToSpread.has(key)) result[key] = options[key];
+	return result;
+};
+function getIsActive({ activeOptions, loc, nextLoc, router }) {
+	if (activeOptions?.exact) {
+		if (!exactPathTest(loc.pathname, nextLoc.pathname, router.basepath)) return false;
+	} else {
+		const currentPath = removeTrailingSlash(loc.pathname, router.basepath);
+		const nextPath = removeTrailingSlash(nextLoc.pathname, router.basepath);
+		if (!(currentPath.startsWith(nextPath) && (currentPath.length === nextPath.length || currentPath[nextPath.length] === "/"))) return false;
+	}
+	if (activeOptions?.includeSearch ?? true) {
+		if (!deepEqual(loc.search, nextLoc.search, {
+			partial: !activeOptions?.exact,
+			ignoreUndefined: !activeOptions?.explicitUndefined
+		})) return false;
+	}
+	if (activeOptions?.includeHash) return loc.hash === nextLoc.hash;
+	return true;
+}
+function getHref({ options, router, nextLocation }) {
+	if (options.disabled) return;
+	const location = nextLocation?.maskedLocation ?? nextLocation;
+	const publicHref = location?.publicHref;
+	if (!publicHref) return void 0;
+	if (location?.external) return publicHref;
+	return router.history.createHref(publicHref) || "/";
+}
 function createLink(Comp) {
 	return Vue.defineComponent({
 		name: "CreatedLink",
@@ -333,13 +397,13 @@ var LinkImpl = Vue.defineComponent({
 		"target"
 	],
 	setup(props, { attrs, slots }) {
-		const linkPropsComputed = useLinkProps({
+		const linkPropsSource = useLinkProps({
 			...props,
 			...attrs
 		});
 		return () => {
 			const Component = props._asChild || "a";
-			const linkProps = linkPropsComputed.value;
+			const linkProps = Vue.unref(linkPropsSource);
 			const isActive = linkProps["data-status"] === "active";
 			const isTransitioning = linkProps["data-transitioning"] === "transitioning";
 			const slotContent = slots.default ? slots.default({