@tanstack/vue-router 1.167.5 → 1.168.0

package/dist/source/link.jsx

@@ -1,9 +1,9 @@
 import * as Vue from 'vue';
 import { deepEqual, exactPathTest, isDangerousProtocol, preloadWarning, removeTrailingSlash, } from '@tanstack/router-core';
-import { useRouterState } from './useRouterState';
+import { isServer } from '@tanstack/router-core/isServer';
+import { useStore } from '@tanstack/vue-store';
 import { useRouter } from './useRouter';
 import { useIntersectionObserver } from './utils';
-import { useMatches } from './Matches';
 const timeoutMap = new WeakMap();
 export function useLinkProps(options) {
     const router = useRouter();
@@ -24,134 +24,8 @@ export 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, // path + params
-            };
-        },
-    });
-    // when `from` is not supplied, use the leaf route of the current matches as the `from` location
-    const from = useMatches({
-        select: (matches) => options.from ?? matches[matches.length - 1]?.fullPath,
-    });
-    const _options = Vue.computed(() => ({
-        ...options,
-        from: from.value,
-    }));
-    const next = Vue.computed(() => {
-        // Depend on search to rebuild when search changes
-        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) {
-                const testExact = exactPathTest(s.location.pathname, next.value.pathname, router.basepath);
-                if (!testExact) {
-                    return false;
-                }
-            }
-            else {
-                const currentPathSplit = removeTrailingSlash(s.location.pathname, router.basepath).split('/');
-                const nextPathSplit = removeTrailingSlash(next.value?.pathname, router.basepath)?.split('/');
-                const pathIsFuzzyEqual = nextPathSplit?.every((d, i) => d === currentPathSplit[i]);
-                if (!pathIsFuzzyEqual) {
-                    return false;
-                }
-            }
-            if (activeOptions?.includeSearch ?? true) {
-                const searchTest = deepEqual(s.location.search, next.value.search, {
-                    partial: !activeOptions?.exact,
-                    ignoreUndefined: !activeOptions?.explicitUndefined,
-                });
-                if (!searchTest) {
-                    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;
-        }
-    });
-    // Create safe props that can be spread
-    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') {
         // Block dangerous protocols like javascript:, blob:, data:
         if (isDangerousProtocol(options.to, router.protocolAllowlist)) {
@@ -160,7 +34,7 @@ export function useLinkProps(options) {
             }
             // Return props without href to prevent navigation
             const safeProps = {
-                ...getPropsSafeToSpread(),
+                ...getPropsSafeToSpread(options),
                 ref,
                 // No href attribute - blocks the dangerous protocol
                 target: options.target,
@@ -170,11 +44,11 @@ export 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,
             };
             // Remove undefined values
             Object.keys(safeProps).forEach((key) => {
@@ -186,7 +60,7 @@ export function useLinkProps(options) {
         }
         // External links just have simple props
         const externalProps = {
-            ...getPropsSafeToSpread(),
+            ...getPropsSafeToSpread(options),
             ref,
             href: options.to,
             target: options.target,
@@ -196,11 +70,11 @@ export 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,
         };
         // Remove undefined values
         Object.keys(externalProps).forEach((key) => {
@@ -210,6 +84,79 @@ export function useLinkProps(options) {
         });
         return Vue.computed(() => externalProps);
     }
+    // During SSR we render exactly once and do not need reactivity.
+    // Avoid store subscriptions, effects and observers on the server.
+    if (isServer ?? router.isServer) {
+        const next = router.buildLocation(options);
+        const href = getHref({
+            options: 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: options,
+            isActive,
+        });
+        const result = combineResultProps({
+            href,
+            options: 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(() => {
+        // Rebuild when inherited search/hash or the current route context changes.
+        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;
+        }
+    });
     // The click handler
     const handleClick = (e) => {
         // Check actual element's target attribute as fallback
@@ -221,7 +168,7 @@ export function useLinkProps(options) {
             (!effectiveTarget || effectiveTarget === '_self') &&
             e.button === 0) {
             // Don't prevent default or handle navigation if reloadDocument is true
-            if (_options.value.reloadDocument) {
+            if (options.reloadDocument) {
                 return;
             }
             e.preventDefault();
@@ -232,7 +179,7 @@ export function useLinkProps(options) {
             });
             // All is well? Navigate!
             router.navigate({
-                ..._options.value,
+                ...options,
                 replace: options.replace,
                 resetScroll: options.resetScroll,
                 hashScrollIntoView: options.hashScrollIntoView,
@@ -283,64 +230,15 @@ export function useLinkProps(options) {
         };
     }
     // Get the active and inactive props
-    const resolvedActiveProps = Vue.computed(() => {
-        const activeProps = options.activeProps || (() => ({ class: 'active' }));
-        const props = isActive.value
-            ? typeof activeProps === 'function'
-                ? activeProps()
-                : activeProps
-            : {};
-        return props || { class: undefined, style: undefined };
-    });
-    const resolvedInactiveProps = Vue.computed(() => {
-        const inactiveProps = options.inactiveProps || (() => ({}));
-        const props = isActive.value
-            ? {}
-            : typeof inactiveProps === 'function'
-                ? inactiveProps()
-                : inactiveProps;
-        return props || { class: undefined, style: undefined };
-    });
-    const resolvedClassName = Vue.computed(() => {
-        const classes = [
-            options.class,
-            resolvedActiveProps.value?.class,
-            resolvedInactiveProps.value?.class,
-        ].filter(Boolean);
-        return classes.length ? classes.join(' ') : undefined;
-    });
-    const resolvedStyle = Vue.computed(() => {
-        const result = {};
-        // Merge styles from all sources
-        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 : undefined;
-    });
-    const href = Vue.computed(() => {
-        if (options.disabled) {
-            return undefined;
-        }
-        const nextLocation = next.value;
-        const location = nextLocation?.maskedLocation ?? nextLocation;
-        // Use publicHref - it contains the correct href for display
-        // When a rewrite changes the origin, publicHref is the full URL
-        // Otherwise it's the origin-stripped path
-        // This avoids constructing URL objects in the hot path
-        const publicHref = location?.publicHref;
-        if (!publicHref)
-            return undefined;
-        const external = location?.external;
-        if (external)
-            return publicHref;
-        return router.history.createHref(publicHref) || '/';
-    });
+    const resolvedStyleProps = Vue.computed(() => resolveStyleProps({
+        options: options,
+        isActive: isActive.value,
+    }));
+    const href = Vue.computed(() => getHref({
+        options: options,
+        router,
+        nextLocation: next.value,
+    }));
     // Create static event handlers that don't change between renders
     const staticEventHandlers = {
         onClick: composeEventHandlers([
@@ -356,76 +254,229 @@ export function useLinkProps(options) {
             enqueueIntentPreload,
         ]),
         onMouseenter: composeEventHandlers([
-            options.onMouseEnter,
+            eventHandlers.onMouseenter,
             enqueueIntentPreload,
         ]),
         onMouseover: composeEventHandlers([
-            options.onMouseOver,
+            eventHandlers.onMouseover,
             enqueueIntentPreload,
         ]),
         onMouseleave: composeEventHandlers([
-            options.onMouseLeave,
+            eventHandlers.onMouseleave,
             handleLeave,
         ]),
         onMouseout: composeEventHandlers([
-            options.onMouseOut,
+            eventHandlers.onMouseout,
             handleLeave,
         ]),
         onTouchstart: composeEventHandlers([
-            options.onTouchStart,
+            eventHandlers.onTouchstart,
             handleTouchStart,
         ]),
     };
     // Compute all props synchronously to avoid hydration mismatches
     // Using Vue.computed ensures props are calculated at render time, not after
     const computedProps = Vue.computed(() => {
-        const result = {
-            ...getPropsSafeToSpread(),
+        const { resolvedActiveProps, resolvedInactiveProps, resolvedClassName, resolvedStyle, } = resolvedStyleProps.value;
+        return combineResultProps({
             href: href.value,
+            options: options,
             ref,
-            ...staticEventHandlers,
-            disabled: !!options.disabled,
-            target: options.target,
-        };
-        // Add style if present
-        if (resolvedStyle.value) {
-            result.style = resolvedStyle.value;
-        }
-        // Add class if present
-        if (resolvedClassName.value) {
-            result.class = resolvedClassName.value;
+            staticEventHandlers,
+            isActive: isActive.value,
+            isTransitioning: isTransitioning.value,
+            resolvedActiveProps,
+            resolvedInactiveProps,
+            resolvedClassName,
+            resolvedStyle,
+        });
+    });
+    // Return the computed ref itself - callers should access .value
+    return computedProps;
+}
+function resolveStyleProps({ options, isActive, }) {
+    const activeProps = options.activeProps || (() => ({ class: 'active' }));
+    const resolvedActiveProps = (isActive
+        ? typeof activeProps === 'function'
+            ? activeProps()
+            : activeProps
+        : {}) || { class: undefined, style: undefined };
+    const inactiveProps = options.inactiveProps || (() => ({}));
+    const resolvedInactiveProps = (isActive
+        ? {}
+        : typeof inactiveProps === 'function'
+            ? inactiveProps()
+            : inactiveProps) || { class: undefined, style: undefined };
+    const classes = [
+        options.class,
+        resolvedActiveProps?.class,
+        resolvedInactiveProps?.class,
+    ].filter(Boolean);
+    const resolvedClassName = classes.length ? classes.join(' ') : undefined;
+    const result = {};
+    // Merge styles from all sources
+    if (options.style) {
+        Object.assign(result, options.style);
+    }
+    if (resolvedActiveProps?.style) {
+        Object.assign(result, resolvedActiveProps.style);
+    }
+    if (resolvedInactiveProps?.style) {
+        Object.assign(result, resolvedInactiveProps.style);
+    }
+    const resolvedStyle = Object.keys(result).length > 0 ? result : undefined;
+    return {
+        resolvedActiveProps,
+        resolvedInactiveProps,
+        resolvedClassName,
+        resolvedStyle,
+    };
+}
+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];
         }
-        // Add disabled props
-        if (options.disabled) {
-            result.role = 'link';
-            result['aria-disabled'] = true;
+    }
+    for (const key of Object.keys(resolvedInactiveProps)) {
+        if (key !== 'class' && key !== 'style') {
+            result[key] = resolvedInactiveProps[key];
         }
-        // Add active status
-        if (isActive.value) {
-            result['data-status'] = 'active';
-            result['aria-current'] = 'page';
+    }
+    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,
+    };
+}
+const 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',
+]);
+// Create safe props that can be spread
+const getPropsSafeToSpread = (options) => {
+    const result = {};
+    for (const key in options) {
+        if (!propsUnsafeToSpread.has(key)) {
+            result[key] = options[key];
         }
-        // Add transitioning status
-        if (isTransitioning.value) {
-            result['data-transitioning'] = 'transitioning';
+    }
+    return result;
+};
+function getIsActive({ activeOptions, loc, nextLoc, router, }) {
+    if (activeOptions?.exact) {
+        const testExact = exactPathTest(loc.pathname, nextLoc.pathname, router.basepath);
+        if (!testExact) {
+            return false;
         }
-        // Merge active/inactive props (excluding class and style which are handled above)
-        const activeP = resolvedActiveProps.value;
-        const inactiveP = resolvedInactiveProps.value;
-        for (const key of Object.keys(activeP)) {
-            if (key !== 'class' && key !== 'style') {
-                result[key] = activeP[key];
-            }
+    }
+    else {
+        const currentPath = removeTrailingSlash(loc.pathname, router.basepath);
+        const nextPath = removeTrailingSlash(nextLoc.pathname, router.basepath);
+        const pathIsFuzzyEqual = currentPath.startsWith(nextPath) &&
+            (currentPath.length === nextPath.length ||
+                currentPath[nextPath.length] === '/');
+        if (!pathIsFuzzyEqual) {
+            return false;
         }
-        for (const key of Object.keys(inactiveP)) {
-            if (key !== 'class' && key !== 'style') {
-                result[key] = inactiveP[key];
-            }
+    }
+    if (activeOptions?.includeSearch ?? true) {
+        const searchTest = deepEqual(loc.search, nextLoc.search, {
+            partial: !activeOptions?.exact,
+            ignoreUndefined: !activeOptions?.explicitUndefined,
+        });
+        if (!searchTest) {
+            return false;
         }
-        return result;
-    });
-    // Return the computed ref itself - callers should access .value
-    return computedProps;
+    }
+    if (activeOptions?.includeHash) {
+        return loc.hash === nextLoc.hash;
+    }
+    return true;
+}
+function getHref({ options, router, nextLocation, }) {
+    if (options.disabled) {
+        return undefined;
+    }
+    const location = nextLocation?.maskedLocation ?? nextLocation;
+    // Use publicHref - it contains the correct href for display
+    // When a rewrite changes the origin, publicHref is the full URL
+    // Otherwise it's the origin-stripped path
+    // This avoids constructing URL objects in the hot path
+    const publicHref = location?.publicHref;
+    if (!publicHref)
+        return undefined;
+    const external = location?.external;
+    if (external)
+        return publicHref;
+    return router.history.createHref(publicHref) || '/';
 }
 export function createLink(Comp) {
     return Vue.defineComponent({
@@ -466,13 +517,11 @@ const LinkImpl = Vue.defineComponent({
     ],
     setup(props, { attrs, slots }) {
         // Call useLinkProps ONCE during setup with combined props and attrs
-        // The returned object is a computed ref that updates reactively
         const allProps = { ...props, ...attrs };
-        const linkPropsComputed = useLinkProps(allProps);
+        const linkPropsSource = useLinkProps(allProps);
         return () => {
             const Component = props._asChild || 'a';
-            // Access the computed value to get fresh props each render
-            const linkProps = linkPropsComputed.value;
+            const linkProps = Vue.unref(linkPropsSource);
             const isActive = linkProps['data-status'] === 'active';
             const isTransitioning = linkProps['data-transitioning'] === 'transitioning';
             // Create the slot content or empty array if no default slot