@tanstack/vue-router 1.140.5 → 1.141.0

package/dist/esm/Transitioner.js

@@ -3,152 +3,155 @@ import { trimPathRight, getLocationChangeInfo, handleHashScroll } from "@tanstac
 import { useRouter } from "./useRouter.js";
 import { useRouterState } from "./useRouterState.js";
 import { usePrevious } from "./utils.js";
-const Transitioner = Vue.defineComponent({
-  name: "Transitioner",
-  setup() {
-    const router = useRouter();
-    let mountLoadForRouter = {
-      router,
-      mounted: false
-    };
-    if (router.isServer) {
-      return () => null;
+let mountLoadForRouter = {
+  router: null,
+  mounted: false
+};
+function useTransitionerSetup() {
+  const router = useRouter();
+  if (router.isServer) {
+    return;
+  }
+  const isLoading = useRouterState({
+    select: ({
+      isLoading: isLoading2
+    }) => isLoading2
+  });
+  const isTransitioning = Vue.ref(false);
+  const hasPendingMatches = useRouterState({
+    select: (s) => s.matches.some((d) => d.status === "pending")
+  });
+  const previousIsLoading = usePrevious(() => isLoading.value);
+  const isAnyPending = Vue.computed(() => isLoading.value || isTransitioning.value || hasPendingMatches.value);
+  const previousIsAnyPending = usePrevious(() => isAnyPending.value);
+  const isPagePending = Vue.computed(() => isLoading.value || hasPendingMatches.value);
+  const previousIsPagePending = usePrevious(() => isPagePending.value);
+  router.startTransition = (fn) => {
+    isTransitioning.value = true;
+    try {
+      router.__store.setState((s) => ({
+        ...s,
+        isTransitioning: true
+      }));
+    } catch {
     }
-    const isLoading = useRouterState({
-      select: ({
-        isLoading: isLoading2
-      }) => isLoading2
-    });
-    const isTransitioning = Vue.ref(false);
-    const hasPendingMatches = useRouterState({
-      select: (s) => s.matches.some((d) => d.status === "pending")
+    const endTransition = () => {
+      Vue.nextTick(() => {
+        try {
+          isTransitioning.value = false;
+          router.__store.setState((s) => ({
+            ...s,
+            isTransitioning: false
+          }));
+        } catch {
+        }
+      });
+    };
+    fn();
+    endTransition();
+  };
+  router.startViewTransition = (fn) => {
+    fn();
+  };
+  let unsubscribe;
+  Vue.onMounted(() => {
+    unsubscribe = router.history.subscribe(router.load);
+    const nextLocation = router.buildLocation({
+      to: router.latestLocation.pathname,
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+      _includeValidateSearch: true
     });
-    const previousIsLoading = usePrevious(() => isLoading.value);
-    const isAnyPending = Vue.computed(() => isLoading.value || isTransitioning.value || hasPendingMatches.value);
-    const previousIsAnyPending = usePrevious(() => isAnyPending.value);
-    const isPagePending = Vue.computed(() => isLoading.value || hasPendingMatches.value);
-    const previousIsPagePending = usePrevious(() => isPagePending.value);
-    router.startTransition = (fn) => {
-      isTransitioning.value = true;
+    if (trimPathRight(router.latestLocation.href) !== trimPathRight(nextLocation.href)) {
+      router.commitLocation({
+        ...nextLocation,
+        replace: true
+      });
+    }
+  });
+  const isMounted = Vue.ref(false);
+  Vue.onMounted(() => {
+    isMounted.value = true;
+  });
+  Vue.onUnmounted(() => {
+    isMounted.value = false;
+    if (unsubscribe) {
+      unsubscribe();
+    }
+  });
+  Vue.onMounted(() => {
+    if (typeof window !== "undefined" && router.ssr || mountLoadForRouter.router === router && mountLoadForRouter.mounted) {
+      return;
+    }
+    mountLoadForRouter = {
+      router,
+      mounted: true
+    };
+    const tryLoad = async () => {
       try {
-        router.__store.setState((s) => ({
-          ...s,
-          isTransitioning: true
-        }));
-      } catch {
+        await router.load();
+      } catch (err) {
+        console.error(err);
       }
-      const endTransition = () => {
-        Vue.nextTick(() => {
-          try {
-            isTransitioning.value = false;
-            router.__store.setState((s) => ({
-              ...s,
-              isTransitioning: false
-            }));
-          } catch {
-          }
-        });
-      };
-      fn();
-      endTransition();
-    };
-    router.startViewTransition = (fn) => {
-      fn();
     };
-    let unsubscribe;
-    Vue.onMounted(() => {
-      unsubscribe = router.history.subscribe(router.load);
-      const nextLocation = router.buildLocation({
-        to: router.latestLocation.pathname,
-        search: true,
-        params: true,
-        hash: true,
-        state: true,
-        _includeValidateSearch: true
-      });
-      if (trimPathRight(router.latestLocation.href) !== trimPathRight(nextLocation.href)) {
-        router.commitLocation({
-          ...nextLocation,
-          replace: true
+    tryLoad();
+  });
+  Vue.watch(() => isLoading.value, (newValue) => {
+    if (!isMounted.value) return;
+    try {
+      if (previousIsLoading.value.previous && !newValue) {
+        router.emit({
+          type: "onLoad",
+          ...getLocationChangeInfo(router.state)
         });
       }
-    });
-    const isMounted = Vue.ref(false);
-    Vue.onMounted(() => {
-      isMounted.value = true;
-    });
-    Vue.onUnmounted(() => {
-      isMounted.value = false;
-      if (unsubscribe) {
-        unsubscribe();
-      }
-    });
-    Vue.onMounted(() => {
-      if (typeof window !== "undefined" && router.ssr || mountLoadForRouter.router === router && mountLoadForRouter.mounted) {
-        return;
-      }
-      mountLoadForRouter = {
-        router,
-        mounted: true
-      };
-      const tryLoad = async () => {
-        try {
-          await router.load();
-        } catch (err) {
-          console.error(err);
-        }
-      };
-      tryLoad();
-    });
-    Vue.watch(() => isLoading.value, (newValue) => {
-      if (!isMounted.value) return;
-      try {
-        if (previousIsLoading.value.previous && !newValue) {
-          router.emit({
-            type: "onLoad",
-            ...getLocationChangeInfo(router.state)
-          });
-        }
-      } catch {
-      }
-    });
-    Vue.watch(isPagePending, (newValue) => {
-      if (!isMounted.value) return;
-      try {
-        if (previousIsPagePending.value.previous && !newValue) {
-          router.emit({
-            type: "onBeforeRouteMount",
-            ...getLocationChangeInfo(router.state)
-          });
-        }
-      } catch {
+    } catch {
+    }
+  });
+  Vue.watch(isPagePending, (newValue) => {
+    if (!isMounted.value) return;
+    try {
+      if (previousIsPagePending.value.previous && !newValue) {
+        router.emit({
+          type: "onBeforeRouteMount",
+          ...getLocationChangeInfo(router.state)
+        });
       }
-    });
-    Vue.watch(isAnyPending, (newValue) => {
-      if (!isMounted.value) return;
-      try {
-        if (previousIsAnyPending.value.previous && !newValue) {
-          const changeInfo = getLocationChangeInfo(router.state);
-          router.emit({
-            type: "onResolved",
-            ...changeInfo
-          });
-          router.__store.setState((s) => ({
-            ...s,
-            status: "idle",
-            resolvedLocation: s.location
-          }));
-          if (changeInfo.hrefChanged) {
-            handleHashScroll(router);
-          }
+    } catch {
+    }
+  });
+  Vue.watch(isAnyPending, (newValue) => {
+    if (!isMounted.value) return;
+    try {
+      if (previousIsAnyPending.value.previous && !newValue) {
+        const changeInfo = getLocationChangeInfo(router.state);
+        router.emit({
+          type: "onResolved",
+          ...changeInfo
+        });
+        router.__store.setState((s) => ({
+          ...s,
+          status: "idle",
+          resolvedLocation: s.location
+        }));
+        if (changeInfo.hrefChanged) {
+          handleHashScroll(router);
         }
-      } catch {
       }
-    });
+    } catch {
+    }
+  });
+}
+Vue.defineComponent({
+  name: "Transitioner",
+  setup() {
+    useTransitionerSetup();
     return () => null;
   }
 });
 export {
-  Transitioner
+  useTransitionerSetup
 };
 //# sourceMappingURL=Transitioner.js.map

package/dist/esm/Transitioner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport {\n  getLocationChangeInfo,\n  handleHashScroll,\n  trimPathRight,\n} from '@tanstack/router-core'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport { usePrevious } from './utils'\n\nexport const Transitioner = Vue.defineComponent({\n  name: 'Transitioner',\n  setup() {\n    const router = useRouter()\n    let mountLoadForRouter = { router, mounted: false }\n\n    if (router.isServer) {\n      return () => null\n    }\n\n    const isLoading = useRouterState({\n      select: ({ isLoading }) => isLoading,\n    })\n\n    // Track if we're in a transition - using a ref to track async transitions\n    const isTransitioning = Vue.ref(false)\n\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(() => isLoading.value)\n\n    const isAnyPending = Vue.computed(\n      () => isLoading.value || isTransitioning.value || hasPendingMatches.value,\n    )\n    const previousIsAnyPending = usePrevious(() => isAnyPending.value)\n\n    const isPagePending = Vue.computed(\n      () => isLoading.value || hasPendingMatches.value,\n    )\n    const previousIsPagePending = usePrevious(() => isPagePending.value)\n\n    // Implement startTransition similar to React/Solid\n    // Vue doesn't have a native useTransition like React 18, so we simulate it\n    // We also update the router state's isTransitioning flag so useMatch can check it\n    router.startTransition = (fn: () => void | Promise<void>) => {\n      isTransitioning.value = true\n      // Also update the router state so useMatch knows we're transitioning\n      try {\n        router.__store.setState((s) => ({ ...s, isTransitioning: true }))\n      } catch {\n        // Ignore errors if component is unmounted\n      }\n\n      // Helper to end the transition\n      const endTransition = () => {\n        // Use nextTick to ensure Vue has processed all reactive updates\n        Vue.nextTick(() => {\n          try {\n            isTransitioning.value = false\n            router.__store.setState((s) => ({ ...s, isTransitioning: false }))\n          } catch {\n            // Ignore errors if component is unmounted\n          }\n        })\n      }\n\n      // Execute the function synchronously\n      // The function internally may call startViewTransition which schedules async work\n      // via document.startViewTransition, but we don't need to wait for it here\n      // because Vue's reactivity will trigger re-renders when state changes\n      fn()\n\n      // End the transition on next tick to allow Vue to process reactive updates\n      endTransition()\n    }\n\n    // For Vue, we need to completely override startViewTransition because Vue's\n    // async rendering doesn't work well with the View Transitions API's requirement\n    // for synchronous DOM updates. The browser expects the DOM to be updated\n    // when the callback promise resolves, but Vue updates asynchronously.\n    //\n    // Our approach: Skip the actual view transition animation but still update state.\n    // This ensures navigation works correctly even without the visual transition.\n    // In the future, we could explore using viewTransition.captured like vue-view-transitions does.\n    router.startViewTransition = (fn: () => Promise<void>) => {\n      // Just run the callback directly without wrapping in document.startViewTransition\n      // This ensures the state updates happen and Vue can render them normally\n      fn()\n    }\n\n    // Subscribe to location changes\n    // and try to load the new location\n    let unsubscribe: (() => void) | undefined\n\n    Vue.onMounted(() => {\n      unsubscribe = 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        _includeValidateSearch: true,\n      })\n\n      if (\n        trimPathRight(router.latestLocation.href) !==\n        trimPathRight(nextLocation.href)\n      ) {\n        router.commitLocation({ ...nextLocation, replace: true })\n      }\n    })\n\n    // Track if component is mounted to prevent updates after unmount\n    const isMounted = Vue.ref(false)\n\n    Vue.onMounted(() => {\n      isMounted.value = true\n    })\n\n    Vue.onUnmounted(() => {\n      isMounted.value = false\n      if (unsubscribe) {\n        unsubscribe()\n      }\n    })\n\n    // Try to load the initial location\n    Vue.onMounted(() => {\n      if (\n        (typeof window !== 'undefined' && router.ssr) ||\n        (mountLoadForRouter.router === router && mountLoadForRouter.mounted)\n      ) {\n        return\n      }\n      mountLoadForRouter = { router, mounted: true }\n      const tryLoad = async () => {\n        try {\n          await router.load()\n        } catch (err) {\n          console.error(err)\n        }\n      }\n      tryLoad()\n    })\n\n    // Setup watchers for emitting events\n    // All watchers check isMounted to prevent updates after unmount\n    Vue.watch(\n      () => isLoading.value,\n      (newValue) => {\n        if (!isMounted.value) return\n        try {\n          if (previousIsLoading.value.previous && !newValue) {\n            router.emit({\n              type: 'onLoad',\n              ...getLocationChangeInfo(router.state),\n            })\n          }\n        } catch {\n          // Ignore errors if component is unmounted\n        }\n      },\n    )\n\n    Vue.watch(isPagePending, (newValue) => {\n      if (!isMounted.value) return\n      try {\n        // emit onBeforeRouteMount\n        if (previousIsPagePending.value.previous && !newValue) {\n          router.emit({\n            type: 'onBeforeRouteMount',\n            ...getLocationChangeInfo(router.state),\n          })\n        }\n      } catch {\n        // Ignore errors if component is unmounted\n      }\n    })\n\n    Vue.watch(isAnyPending, (newValue) => {\n      if (!isMounted.value) return\n      try {\n        // The router was pending and now it's not\n        if (previousIsAnyPending.value.previous && !newValue) {\n          const changeInfo = getLocationChangeInfo(router.state)\n          router.emit({\n            type: 'onResolved',\n            ...changeInfo,\n          })\n\n          router.__store.setState((s) => ({\n            ...s,\n            status: 'idle',\n            resolvedLocation: s.location,\n          }))\n\n          if (changeInfo.hrefChanged) {\n            handleHashScroll(router)\n          }\n        }\n      } catch {\n        // Ignore errors if component is unmounted\n      }\n    })\n\n    return () => null\n  },\n})\n"],"names":["Transitioner","Vue","defineComponent","name","setup","router","useRouter","mountLoadForRouter","mounted","isServer","isLoading","useRouterState","select","isTransitioning","ref","hasPendingMatches","s","matches","some","d","status","previousIsLoading","usePrevious","value","isAnyPending","computed","previousIsAnyPending","isPagePending","previousIsPagePending","startTransition","fn","__store","setState","endTransition","nextTick","startViewTransition","unsubscribe","onMounted","history","subscribe","load","nextLocation","buildLocation","to","latestLocation","pathname","search","params","hash","state","_includeValidateSearch","trimPathRight","href","commitLocation","replace","isMounted","onUnmounted","window","ssr","tryLoad","err","console","error","watch","newValue","previous","emit","type","getLocationChangeInfo","changeInfo","resolvedLocation","location","hrefChanged","handleHashScroll"],"mappings":"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"}
+{"version":3,"file":"Transitioner.js","sources":["../../src/Transitioner.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport {\n  getLocationChangeInfo,\n  handleHashScroll,\n  trimPathRight,\n} from '@tanstack/router-core'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport { usePrevious } from './utils'\n\n// Track mount state per router to avoid double-loading\nlet mountLoadForRouter = { router: null as any, mounted: false }\n\n/**\n * Composable that sets up router transition logic.\n * This is called from MatchesContent to set up:\n * - router.startTransition\n * - router.startViewTransition\n * - History subscription\n * - Router event watchers\n *\n * Must be called during component setup phase.\n */\nexport function useTransitionerSetup() {\n  const router = useRouter()\n\n  // Skip on server - no transitions needed\n  if (router.isServer) {\n    return\n  }\n\n  const isLoading = useRouterState({\n    select: ({ isLoading }) => isLoading,\n  })\n\n  // Track if we're in a transition - using a ref to track async transitions\n  const isTransitioning = Vue.ref(false)\n\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(() => isLoading.value)\n\n  const isAnyPending = Vue.computed(\n    () => isLoading.value || isTransitioning.value || hasPendingMatches.value,\n  )\n  const previousIsAnyPending = usePrevious(() => isAnyPending.value)\n\n  const isPagePending = Vue.computed(\n    () => isLoading.value || hasPendingMatches.value,\n  )\n  const previousIsPagePending = usePrevious(() => isPagePending.value)\n\n  // Implement startTransition similar to React/Solid\n  // Vue doesn't have a native useTransition like React 18, so we simulate it\n  // We also update the router state's isTransitioning flag so useMatch can check it\n  router.startTransition = (fn: () => void | Promise<void>) => {\n    isTransitioning.value = true\n    // Also update the router state so useMatch knows we're transitioning\n    try {\n      router.__store.setState((s) => ({ ...s, isTransitioning: true }))\n    } catch {\n      // Ignore errors if component is unmounted\n    }\n\n    // Helper to end the transition\n    const endTransition = () => {\n      // Use nextTick to ensure Vue has processed all reactive updates\n      Vue.nextTick(() => {\n        try {\n          isTransitioning.value = false\n          router.__store.setState((s) => ({ ...s, isTransitioning: false }))\n        } catch {\n          // Ignore errors if component is unmounted\n        }\n      })\n    }\n\n    // Execute the function synchronously\n    // The function internally may call startViewTransition which schedules async work\n    // via document.startViewTransition, but we don't need to wait for it here\n    // because Vue's reactivity will trigger re-renders when state changes\n    fn()\n\n    // End the transition on next tick to allow Vue to process reactive updates\n    endTransition()\n  }\n\n  // For Vue, we need to completely override startViewTransition because Vue's\n  // async rendering doesn't work well with the View Transitions API's requirement\n  // for synchronous DOM updates. The browser expects the DOM to be updated\n  // when the callback promise resolves, but Vue updates asynchronously.\n  //\n  // Our approach: Skip the actual view transition animation but still update state.\n  // This ensures navigation works correctly even without the visual transition.\n  // In the future, we could explore using viewTransition.captured like vue-view-transitions does.\n  router.startViewTransition = (fn: () => Promise<void>) => {\n    // Just run the callback directly without wrapping in document.startViewTransition\n    // This ensures the state updates happen and Vue can render them normally\n    fn()\n  }\n\n  // Subscribe to location changes\n  // and try to load the new location\n  let unsubscribe: (() => void) | undefined\n\n  Vue.onMounted(() => {\n    unsubscribe = 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      _includeValidateSearch: true,\n    })\n\n    if (\n      trimPathRight(router.latestLocation.href) !==\n      trimPathRight(nextLocation.href)\n    ) {\n      router.commitLocation({ ...nextLocation, replace: true })\n    }\n  })\n\n  // Track if component is mounted to prevent updates after unmount\n  const isMounted = Vue.ref(false)\n\n  Vue.onMounted(() => {\n    isMounted.value = true\n  })\n\n  Vue.onUnmounted(() => {\n    isMounted.value = false\n    if (unsubscribe) {\n      unsubscribe()\n    }\n  })\n\n  // Try to load the initial location\n  Vue.onMounted(() => {\n    if (\n      (typeof window !== 'undefined' && router.ssr) ||\n      (mountLoadForRouter.router === router && mountLoadForRouter.mounted)\n    ) {\n      return\n    }\n    mountLoadForRouter = { router, mounted: true }\n    const tryLoad = async () => {\n      try {\n        await router.load()\n      } catch (err) {\n        console.error(err)\n      }\n    }\n    tryLoad()\n  })\n\n  // Setup watchers for emitting events\n  // All watchers check isMounted to prevent updates after unmount\n  Vue.watch(\n    () => isLoading.value,\n    (newValue) => {\n      if (!isMounted.value) return\n      try {\n        if (previousIsLoading.value.previous && !newValue) {\n          router.emit({\n            type: 'onLoad',\n            ...getLocationChangeInfo(router.state),\n          })\n        }\n      } catch {\n        // Ignore errors if component is unmounted\n      }\n    },\n  )\n\n  Vue.watch(isPagePending, (newValue) => {\n    if (!isMounted.value) return\n    try {\n      // emit onBeforeRouteMount\n      if (previousIsPagePending.value.previous && !newValue) {\n        router.emit({\n          type: 'onBeforeRouteMount',\n          ...getLocationChangeInfo(router.state),\n        })\n      }\n    } catch {\n      // Ignore errors if component is unmounted\n    }\n  })\n\n  Vue.watch(isAnyPending, (newValue) => {\n    if (!isMounted.value) return\n    try {\n      // The router was pending and now it's not\n      if (previousIsAnyPending.value.previous && !newValue) {\n        const changeInfo = getLocationChangeInfo(router.state)\n        router.emit({\n          type: 'onResolved',\n          ...changeInfo,\n        })\n\n        router.__store.setState((s) => ({\n          ...s,\n          status: 'idle',\n          resolvedLocation: s.location,\n        }))\n\n        if (changeInfo.hrefChanged) {\n          handleHashScroll(router)\n        }\n      }\n    } catch {\n      // Ignore errors if component is unmounted\n    }\n  })\n}\n\n/**\n * @deprecated Use useTransitionerSetup() composable instead.\n * This component is kept for backwards compatibility but the setup logic\n * has been moved to useTransitionerSetup() for better SSR hydration.\n */\nexport const Transitioner = Vue.defineComponent({\n  name: 'Transitioner',\n  setup() {\n    useTransitionerSetup()\n    return () => null\n  },\n})\n"],"names":["mountLoadForRouter","router","mounted","useTransitionerSetup","useRouter","isServer","isLoading","useRouterState","select","isTransitioning","Vue","ref","hasPendingMatches","s","matches","some","d","status","previousIsLoading","usePrevious","value","isAnyPending","computed","previousIsAnyPending","isPagePending","previousIsPagePending","startTransition","fn","__store","setState","endTransition","nextTick","startViewTransition","unsubscribe","onMounted","history","subscribe","load","nextLocation","buildLocation","to","latestLocation","pathname","search","params","hash","state","_includeValidateSearch","trimPathRight","href","commitLocation","replace","isMounted","onUnmounted","window","ssr","tryLoad","err","console","error","watch","newValue","previous","emit","type","getLocationChangeInfo","changeInfo","resolvedLocation","location","hrefChanged","handleHashScroll","defineComponent","name","setup"],"mappings":"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"}

package/dist/esm/awaited.d.ts

@@ -4,9 +4,24 @@ export type AwaitOptions<T> = {
     promise: Promise<T>;
 };
 export declare function useAwaited<T>({ promise: _promise, }: AwaitOptions<T>): [T, DeferredPromise<T>];
-export declare function Await<T>(props: AwaitOptions<T> & {
-    fallback?: Vue.VNode;
-    children: (result: T) => Vue.VNode;
-}): () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+export declare const Await: Vue.DefineComponent<Vue.ExtractPropTypes<{
+    promise: {
+        type: PromiseConstructor;
+        required: true;
+    };
+    children: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
     [key: string]: any;
-}> | undefined;
+}>, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+    promise: {
+        type: PromiseConstructor;
+        required: true;
+    };
+    children: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;

package/dist/esm/awaited.js

@@ -12,27 +12,24 @@ function useAwaited({
   }
   return [promise[TSR_DEFERRED_PROMISE].data, promise];
 }
-function Await(props) {
-  const data = Vue.ref(null);
-  const error = Vue.ref(null);
-  const pending = Vue.ref(true);
-  Vue.watchEffect(async () => {
-    pending.value = true;
-    try {
-      data.value = await props.promise;
-    } catch (err) {
-      error.value = err;
-    } finally {
-      pending.value = false;
+const Await = Vue.defineComponent({
+  name: "Await",
+  props: {
+    promise: {
+      type: Promise,
+      required: true
+    },
+    children: {
+      type: Function,
+      required: true
     }
-  });
-  const inner = Vue.computed(() => {
-    if (error.value) throw error.value;
-    if (pending.value) return props.fallback;
-    return props.children(data.value);
-  });
-  return () => inner.value;
-}
+  },
+  async setup(props) {
+    const deferred = defer(props.promise);
+    const data = await deferred;
+    return () => props.children(data);
+  }
+});
 export {
   Await,
   useAwaited

package/dist/esm/awaited.js.map

@@ -1 +1 @@
-{"version":3,"file":"awaited.js","sources":["../../src/awaited.tsx"],"sourcesContent":["import * as Vue from 'vue'\n\nimport { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'\nimport type { DeferredPromise } from '@tanstack/router-core'\n\nexport type AwaitOptions<T> = {\n  promise: Promise<T>\n}\n\nexport function useAwaited<T>({\n  promise: _promise,\n}: AwaitOptions<T>): [T, DeferredPromise<T>] {\n  const promise = defer(_promise)\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {\n    throw promise\n  }\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {\n    throw promise[TSR_DEFERRED_PROMISE].error\n  }\n\n  return [promise[TSR_DEFERRED_PROMISE].data, promise]\n}\n\nexport function Await<T>(\n  props: AwaitOptions<T> & {\n    fallback?: Vue.VNode\n    children: (result: T) => Vue.VNode\n  },\n) {\n  const data = Vue.ref<T | null>(null)\n  const error = Vue.ref<Error | null>(null)\n  const pending = Vue.ref(true)\n\n  Vue.watchEffect(async () => {\n    pending.value = true\n    try {\n      data.value = await props.promise\n    } catch (err) {\n      error.value = err as Error\n    } finally {\n      pending.value = false\n    }\n  })\n\n  const inner = Vue.computed(() => {\n    if (error.value) throw error.value\n    if (pending.value) return props.fallback\n    return props.children(data.value as T)\n  })\n\n  return () => inner.value\n}\n"],"names":["useAwaited","promise","_promise","defer","TSR_DEFERRED_PROMISE","status","error","data","Await","props","Vue","ref","pending","watchEffect","value","err","inner","computed","fallback","children"],"mappings":";;AASO,SAASA,WAAc;AAAA,EAC5BC,SAASC;AACM,GAA4B;AAC3C,QAAMD,UAAUE,MAAMD,QAAQ;AAE9B,MAAID,QAAQG,oBAAoB,EAAEC,WAAW,WAAW;AACtD,UAAMJ;AAAAA,EACR;AAEA,MAAIA,QAAQG,oBAAoB,EAAEC,WAAW,SAAS;AACpD,UAAMJ,QAAQG,oBAAoB,EAAEE;AAAAA,EACtC;AAEA,SAAO,CAACL,QAAQG,oBAAoB,EAAEG,MAAMN,OAAO;AACrD;AAEO,SAASO,MACdC,OAIA;AACA,QAAMF,OAAOG,IAAIC,IAAc,IAAI;AACnC,QAAML,QAAQI,IAAIC,IAAkB,IAAI;AACxC,QAAMC,UAAUF,IAAIC,IAAI,IAAI;AAE5BD,MAAIG,YAAY,YAAY;AAC1BD,YAAQE,QAAQ;AAChB,QAAI;AACFP,WAAKO,QAAQ,MAAML,MAAMR;AAAAA,IAC3B,SAASc,KAAK;AACZT,YAAMQ,QAAQC;AAAAA,IAChB,UAAC;AACCH,cAAQE,QAAQ;AAAA,IAClB;AAAA,EACF,CAAC;AAED,QAAME,QAAQN,IAAIO,SAAS,MAAM;AAC/B,QAAIX,MAAMQ,MAAO,OAAMR,MAAMQ;AAC7B,QAAIF,QAAQE,MAAO,QAAOL,MAAMS;AAChC,WAAOT,MAAMU,SAASZ,KAAKO,KAAU;AAAA,EACvC,CAAC;AAED,SAAO,MAAME,MAAMF;AACrB;"}
+{"version":3,"file":"awaited.js","sources":["../../src/awaited.tsx"],"sourcesContent":["import * as Vue from 'vue'\n\nimport { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'\nimport type { DeferredPromise } from '@tanstack/router-core'\n\nexport type AwaitOptions<T> = {\n  promise: Promise<T>\n}\n\nexport function useAwaited<T>({\n  promise: _promise,\n}: AwaitOptions<T>): [T, DeferredPromise<T>] {\n  const promise = defer(_promise)\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {\n    throw promise\n  }\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {\n    throw promise[TSR_DEFERRED_PROMISE].error\n  }\n\n  return [promise[TSR_DEFERRED_PROMISE].data, promise]\n}\n\nexport const Await = Vue.defineComponent({\n  name: 'Await',\n  props: {\n    promise: {\n      type: Promise,\n      required: true,\n    },\n    children: {\n      type: Function,\n      required: true,\n    },\n  },\n  async setup(props) {\n    const deferred = defer(props.promise)\n    const data = await deferred\n    return () => (props.children as (result: unknown) => Vue.VNode)(data)\n  },\n})\n"],"names":["useAwaited","promise","_promise","defer","TSR_DEFERRED_PROMISE","status","error","data","Await","Vue","defineComponent","name","props","type","Promise","required","children","Function","setup","deferred"],"mappings":";;AASO,SAASA,WAAc;AAAA,EAC5BC,SAASC;AACM,GAA4B;AAC3C,QAAMD,UAAUE,MAAMD,QAAQ;AAE9B,MAAID,QAAQG,oBAAoB,EAAEC,WAAW,WAAW;AACtD,UAAMJ;AAAAA,EACR;AAEA,MAAIA,QAAQG,oBAAoB,EAAEC,WAAW,SAAS;AACpD,UAAMJ,QAAQG,oBAAoB,EAAEE;AAAAA,EACtC;AAEA,SAAO,CAACL,QAAQG,oBAAoB,EAAEG,MAAMN,OAAO;AACrD;MAEaO,QAAQC,IAAIC,gBAAgB;AAAA,EACvCC,MAAM;AAAA,EACNC,OAAO;AAAA,IACLX,SAAS;AAAA,MACPY,MAAMC;AAAAA,MACNC,UAAU;AAAA;IAEZC,UAAU;AAAA,MACRH,MAAMI;AAAAA,MACNF,UAAU;AAAA,IACZ;AAAA;EAEF,MAAMG,MAAMN,OAAO;AACjB,UAAMO,WAAWhB,MAAMS,MAAMX,OAAO;AACpC,UAAMM,OAAO,MAAMY;AACnB,WAAO,MAAOP,MAAMI,SAA4CT,IAAI;AAAA,EACtE;AACF,CAAC;"}

package/dist/esm/index.d.ts

@@ -47,5 +47,7 @@ export { ScriptOnce } from './ScriptOnce.js';
 export { Asset } from './Asset.js';
 export { HeadContent } from './HeadContent.js';
 export { Scripts } from './Scripts.js';
+export { Body } from './Body.js';
+export { Html } from './Html.js';
 export { composeRewrites } from '@tanstack/router-core';
 export type { LocationRewrite, LocationRewriteFunction, } from '@tanstack/router-core';

package/dist/esm/index.js

@@ -31,10 +31,13 @@ import { ScriptOnce } from "./ScriptOnce.js";
 import { Asset } from "./Asset.js";
 import { HeadContent } from "./HeadContent.js";
 import { Scripts } from "./Scripts.js";
+import { Body } from "./Body.js";
+import { Html } from "./Html.js";
 export {
   Asset,
   Await,
   Block,
+  Body,
   CatchBoundary,
   CatchNotFound,
   DefaultGlobalNotFound,
@@ -42,6 +45,7 @@ export {
   FileRoute,
   FileRouteLoader,
   HeadContent,
+  Html,
   LazyRoute,
   Link,
   Match,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/lazyRouteComponent.js

@@ -52,14 +52,14 @@ function lazyRouteComponent(importer, exportName, ssr) {
   const lazyComp = Vue.defineComponent({
     name: "LazyRouteComponent",
     setup(props) {
-      const component = Vue.ref(comp);
+      const component = Vue.shallowRef(comp ? Vue.markRaw(comp) : comp);
       const errorState = Vue.ref(error);
       const loading = Vue.ref(!component.value && !errorState.value);
       Vue.onMounted(() => {
         if (!component.value && !errorState.value) {
           loading.value = true;
           load().then((result) => {
-            component.value = result;
+            component.value = result ? Vue.markRaw(result) : result;
             loading.value = false;
           }).catch((err) => {
             errorState.value = err;

package/dist/esm/lazyRouteComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport { Outlet } from './Match'\nimport type { AsyncRouteComponent } from './route'\n\n// If the load fails due to module not found, it may mean a new version of\n// the build was deployed and the user's browser is still using an old version.\n// If this happens, the old version in the user's browser would have an outdated\n// URL to the lazy module.\n// In that case, we want to attempt one window refresh to get the latest.\nfunction isModuleNotFoundError(error: any): boolean {\n  // chrome: \"Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // firefox: \"error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // safari: \"Importing a module script failed.\"\n  if (typeof error?.message !== 'string') return false\n  return (\n    error.message.startsWith('Failed to fetch dynamically imported module') ||\n    error.message.startsWith('error loading dynamically imported module') ||\n    error.message.startsWith('Importing a module script failed')\n  )\n}\n\nexport function ClientOnly(props: { children?: any; fallback?: Vue.VNode }) {\n  const hydrated = useHydrated()\n\n  return () => {\n    if (hydrated.value) {\n      return props.children\n    }\n    return props.fallback || null\n  }\n}\n\nexport function useHydrated() {\n  // Only hydrate on client-side, never on server\n  const hydrated = Vue.ref(false)\n\n  // If on server, return false\n  if (typeof window === 'undefined') {\n    return Vue.computed(() => false)\n  }\n\n  // On client, set to true once mounted\n  Vue.onMounted(() => {\n    hydrated.value = true\n  })\n\n  return hydrated\n}\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n  ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any> | undefined\n  let comp: T[TKey] | T['default'] | null = null\n  let error: any = null\n  let attemptedReload = false\n\n  const load = () => {\n    // If we're on the server and SSR is disabled for this component\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve(comp)\n    }\n\n    // Use existing promise or create new one\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n          return comp\n        })\n        .catch((err) => {\n          error = err\n          loadPromise = undefined\n\n          // If it's a module not found error, we'll try to handle it in the component\n          if (isModuleNotFoundError(error)) {\n            return null\n          }\n\n          throw err\n        })\n    }\n\n    return loadPromise\n  }\n\n  // Create a lazy component wrapper using defineComponent so it works in Vue SFC templates\n  const lazyComp = Vue.defineComponent({\n    name: 'LazyRouteComponent',\n    setup(props: any) {\n      // Create refs to track component state\n      const component = Vue.ref<any>(comp)\n      const errorState = Vue.ref<any>(error)\n      const loading = Vue.ref(!component.value && !errorState.value)\n\n      // Setup effect to load the component when this component is used\n      Vue.onMounted(() => {\n        if (!component.value && !errorState.value) {\n          loading.value = true\n\n          load()\n            .then((result) => {\n              component.value = result\n              loading.value = false\n            })\n            .catch((err) => {\n              errorState.value = err\n              loading.value = false\n            })\n        }\n      })\n\n      // Handle module not found error with reload attempt\n      if (\n        errorState.value &&\n        isModuleNotFoundError(errorState.value) &&\n        !attemptedReload\n      ) {\n        if (\n          typeof window !== 'undefined' &&\n          typeof sessionStorage !== 'undefined'\n        ) {\n          // Try to reload once on module not found error\n          const storageKey = `tanstack_router_reload:${errorState.value.message}`\n          if (!sessionStorage.getItem(storageKey)) {\n            sessionStorage.setItem(storageKey, '1')\n            attemptedReload = true\n            window.location.reload()\n            return () => null // Return empty while reloading\n          }\n        }\n      }\n\n      // If we have a non-module-not-found error, throw it\n      if (errorState.value && !isModuleNotFoundError(errorState.value)) {\n        throw errorState.value\n      }\n\n      // Return a render function\n      return () => {\n        // If we're still loading or don't have a component yet, use a suspense pattern\n        if (loading.value || !component.value) {\n          return Vue.h('div', null) // Empty div while loading\n        }\n\n        // If SSR is disabled for this component\n        if (ssr?.() === false) {\n          return Vue.h(ClientOnly, {\n            fallback: Vue.h(Outlet),\n            children: Vue.h(component.value, props),\n          })\n        }\n\n        // Regular render with the loaded component\n        return Vue.h(component.value, props)\n      }\n    },\n  })\n\n  // Add preload method\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["isModuleNotFoundError","error","message","startsWith","ClientOnly","props","hydrated","useHydrated","value","children","fallback","Vue","ref","window","computed","onMounted","lazyRouteComponent","importer","exportName","ssr","loadPromise","comp","attemptedReload","load","document","Promise","resolve","then","res","undefined","catch","err","lazyComp","defineComponent","name","setup","component","errorState","loading","result","sessionStorage","storageKey","getItem","setItem","location","reload","h","Outlet","preload"],"mappings":";;AASA,SAASA,sBAAsBC,OAAqB;AAIlD,MAAI,OAAOA,OAAOC,YAAY,SAAU,QAAO;AAC/C,SACED,MAAMC,QAAQC,WAAW,6CAA6C,KACtEF,MAAMC,QAAQC,WAAW,2CAA2C,KACpEF,MAAMC,QAAQC,WAAW,kCAAkC;AAE/D;AAEO,SAASC,WAAWC,OAAiD;AAC1E,QAAMC,WAAWC,YAAW;AAE5B,SAAO,MAAM;AACX,QAAID,SAASE,OAAO;AAClB,aAAOH,MAAMI;AAAAA,IACf;AACA,WAAOJ,MAAMK,YAAY;AAAA,EAC3B;AACF;AAEO,SAASH,cAAc;AAE5B,QAAMD,WAAWK,IAAIC,IAAI,KAAK;AAG9B,MAAI,OAAOC,WAAW,aAAa;AACjC,WAAOF,IAAIG,SAAS,MAAM,KAAK;AAAA,EACjC;AAGAH,MAAII,UAAU,MAAM;AAClBT,aAASE,QAAQ;AAAA,EACnB,CAAC;AAED,SAAOF;AACT;AAEO,SAASU,mBAIdC,UACAC,YACAC,KAGQ;AACR,MAAIC;AACJ,MAAIC,OAAsC;AAC1C,MAAIpB,QAAa;AACjB,MAAIqB,kBAAkB;AAEtB,QAAMC,OAAOA,MAAM;AAEjB,QAAI,OAAOC,aAAa,eAAeL,MAAG,MAAS,OAAO;AACxDE,aAAQA,MAAM;AACd,aAAOI,QAAQC,QAAQL,IAAI;AAAA,IAC7B;AAGA,QAAI,CAACD,aAAa;AAChBA,oBAAcH,SAAQ,EACnBU,KAAMC,SAAQ;AACbR,sBAAcS;AACdR,eAAOO,IAAIV,cAAc,SAAS;AAClC,eAAOG;AAAAA,MACT,CAAC,EACAS,MAAOC,SAAQ;AACd9B,gBAAQ8B;AACRX,sBAAcS;AAGd,YAAI7B,sBAAsBC,KAAK,GAAG;AAChC,iBAAO;AAAA,QACT;AAEA,cAAM8B;AAAAA,MACR,CAAC;AAAA,IACL;AAEA,WAAOX;AAAAA,EACT;AAGA,QAAMY,WAAWrB,IAAIsB,gBAAgB;AAAA,IACnCC,MAAM;AAAA,IACNC,MAAM9B,OAAY;AAEhB,YAAM+B,YAAYzB,IAAIC,IAASS,IAAI;AACnC,YAAMgB,aAAa1B,IAAIC,IAASX,KAAK;AACrC,YAAMqC,UAAU3B,IAAIC,IAAI,CAACwB,UAAU5B,SAAS,CAAC6B,WAAW7B,KAAK;AAG7DG,UAAII,UAAU,MAAM;AAClB,YAAI,CAACqB,UAAU5B,SAAS,CAAC6B,WAAW7B,OAAO;AACzC8B,kBAAQ9B,QAAQ;AAEhBe,eAAI,EACDI,KAAMY,YAAW;AAChBH,sBAAU5B,QAAQ+B;AAClBD,oBAAQ9B,QAAQ;AAAA,UAClB,CAAC,EACAsB,MAAOC,SAAQ;AACdM,uBAAW7B,QAAQuB;AACnBO,oBAAQ9B,QAAQ;AAAA,UAClB,CAAC;AAAA,QACL;AAAA,MACF,CAAC;AAGD,UACE6B,WAAW7B,SACXR,sBAAsBqC,WAAW7B,KAAK,KACtC,CAACc,iBACD;AACA,YACE,OAAOT,WAAW,eAClB,OAAO2B,mBAAmB,aAC1B;AAEA,gBAAMC,aAAa,0BAA0BJ,WAAW7B,MAAMN,OAAO;AACrE,cAAI,CAACsC,eAAeE,QAAQD,UAAU,GAAG;AACvCD,2BAAeG,QAAQF,YAAY,GAAG;AACtCnB,8BAAkB;AAClBT,mBAAO+B,SAASC,OAAM;AACtB,mBAAO,MAAM;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAGA,UAAIR,WAAW7B,SAAS,CAACR,sBAAsBqC,WAAW7B,KAAK,GAAG;AAChE,cAAM6B,WAAW7B;AAAAA,MACnB;AAGA,aAAO,MAAM;AAEX,YAAI8B,QAAQ9B,SAAS,CAAC4B,UAAU5B,OAAO;AACrC,iBAAOG,IAAImC,EAAE,OAAO,IAAI;AAAA,QAC1B;AAGA,YAAI3B,MAAG,MAAS,OAAO;AACrB,iBAAOR,IAAImC,EAAE1C,YAAY;AAAA,YACvBM,UAAUC,IAAImC,EAAEC,MAAM;AAAA,YACtBtC,UAAUE,IAAImC,EAAEV,UAAU5B,OAAOH,KAAK;AAAA,UACxC,CAAC;AAAA,QACH;AAGA,eAAOM,IAAImC,EAAEV,UAAU5B,OAAOH,KAAK;AAAA,MACrC;AAAA,IACF;AAAA,GACD;AAGC2B,WAAiBgB,UAAUzB;AAE7B,SAAOS;AACT;"}
+{"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport { Outlet } from './Match'\nimport type { AsyncRouteComponent } from './route'\n\n// If the load fails due to module not found, it may mean a new version of\n// the build was deployed and the user's browser is still using an old version.\n// If this happens, the old version in the user's browser would have an outdated\n// URL to the lazy module.\n// In that case, we want to attempt one window refresh to get the latest.\nfunction isModuleNotFoundError(error: any): boolean {\n  // chrome: \"Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // firefox: \"error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n  // safari: \"Importing a module script failed.\"\n  if (typeof error?.message !== 'string') return false\n  return (\n    error.message.startsWith('Failed to fetch dynamically imported module') ||\n    error.message.startsWith('error loading dynamically imported module') ||\n    error.message.startsWith('Importing a module script failed')\n  )\n}\n\nexport function ClientOnly(props: { children?: any; fallback?: Vue.VNode }) {\n  const hydrated = useHydrated()\n\n  return () => {\n    if (hydrated.value) {\n      return props.children\n    }\n    return props.fallback || null\n  }\n}\n\nexport function useHydrated() {\n  // Only hydrate on client-side, never on server\n  const hydrated = Vue.ref(false)\n\n  // If on server, return false\n  if (typeof window === 'undefined') {\n    return Vue.computed(() => false)\n  }\n\n  // On client, set to true once mounted\n  Vue.onMounted(() => {\n    hydrated.value = true\n  })\n\n  return hydrated\n}\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n  ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any> | undefined\n  let comp: T[TKey] | T['default'] | null = null\n  let error: any = null\n  let attemptedReload = false\n\n  const load = () => {\n    // If we're on the server and SSR is disabled for this component\n    if (typeof document === 'undefined' && ssr?.() === false) {\n      comp = (() => null) as any\n      return Promise.resolve(comp)\n    }\n\n    // Use existing promise or create new one\n    if (!loadPromise) {\n      loadPromise = importer()\n        .then((res) => {\n          loadPromise = undefined\n          comp = res[exportName ?? 'default']\n          return comp\n        })\n        .catch((err) => {\n          error = err\n          loadPromise = undefined\n\n          // If it's a module not found error, we'll try to handle it in the component\n          if (isModuleNotFoundError(error)) {\n            return null\n          }\n\n          throw err\n        })\n    }\n\n    return loadPromise\n  }\n\n  // Create a lazy component wrapper using defineComponent so it works in Vue SFC templates\n  const lazyComp = Vue.defineComponent({\n    name: 'LazyRouteComponent',\n    setup(props: any) {\n      // Create refs to track component state\n      // Use shallowRef for component to avoid making it reactive (Vue warning)\n      const component = Vue.shallowRef<any>(comp ? Vue.markRaw(comp) : comp)\n      const errorState = Vue.ref<any>(error)\n      const loading = Vue.ref(!component.value && !errorState.value)\n\n      // Setup effect to load the component when this component is used\n      Vue.onMounted(() => {\n        if (!component.value && !errorState.value) {\n          loading.value = true\n\n          load()\n            .then((result) => {\n              // Use markRaw to prevent Vue from making the component reactive\n              component.value = result ? Vue.markRaw(result) : result\n              loading.value = false\n            })\n            .catch((err) => {\n              errorState.value = err\n              loading.value = false\n            })\n        }\n      })\n\n      // Handle module not found error with reload attempt\n      if (\n        errorState.value &&\n        isModuleNotFoundError(errorState.value) &&\n        !attemptedReload\n      ) {\n        if (\n          typeof window !== 'undefined' &&\n          typeof sessionStorage !== 'undefined'\n        ) {\n          // Try to reload once on module not found error\n          const storageKey = `tanstack_router_reload:${errorState.value.message}`\n          if (!sessionStorage.getItem(storageKey)) {\n            sessionStorage.setItem(storageKey, '1')\n            attemptedReload = true\n            window.location.reload()\n            return () => null // Return empty while reloading\n          }\n        }\n      }\n\n      // If we have a non-module-not-found error, throw it\n      if (errorState.value && !isModuleNotFoundError(errorState.value)) {\n        throw errorState.value\n      }\n\n      // Return a render function\n      return () => {\n        // If we're still loading or don't have a component yet, use a suspense pattern\n        if (loading.value || !component.value) {\n          return Vue.h('div', null) // Empty div while loading\n        }\n\n        // If SSR is disabled for this component\n        if (ssr?.() === false) {\n          return Vue.h(ClientOnly, {\n            fallback: Vue.h(Outlet),\n            children: Vue.h(component.value, props),\n          })\n        }\n\n        // Regular render with the loaded component\n        return Vue.h(component.value, props)\n      }\n    },\n  })\n\n  // Add preload method\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["isModuleNotFoundError","error","message","startsWith","ClientOnly","props","hydrated","useHydrated","value","children","fallback","Vue","ref","window","computed","onMounted","lazyRouteComponent","importer","exportName","ssr","loadPromise","comp","attemptedReload","load","document","Promise","resolve","then","res","undefined","catch","err","lazyComp","defineComponent","name","setup","component","shallowRef","markRaw","errorState","loading","result","sessionStorage","storageKey","getItem","setItem","location","reload","h","Outlet","preload"],"mappings":"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"}

package/dist/esm/link.js

@@ -247,65 +247,56 @@ function useLinkProps(options) {
     }
     return hrefValue;
   });
-  const reactiveProps = Vue.shallowReactive({
-    ...getPropsSafeToSpread(),
-    href: void 0,
-    ref,
+  const staticEventHandlers = {
     onClick: composeEventHandlers([options.onClick, handleClick]),
     onFocus: composeEventHandlers([options.onFocus, handleFocus]),
     onMouseenter: composeEventHandlers([options.onMouseEnter, handleEnter]),
     onMouseover: composeEventHandlers([options.onMouseOver, handleEnter]),
     onMouseleave: composeEventHandlers([options.onMouseLeave, handleLeave]),
     onMouseout: composeEventHandlers([options.onMouseOut, handleLeave]),
-    onTouchstart: composeEventHandlers([options.onTouchStart, handleTouchStart]),
-    disabled: !!options.disabled,
-    target: options.target
-  });
-  Vue.watchEffect(() => {
-    const activeP = resolvedActiveProps.value;
-    const inactiveP = resolvedInactiveProps.value;
-    reactiveProps.href = href.value;
+    onTouchstart: composeEventHandlers([options.onTouchStart, handleTouchStart])
+  };
+  const computedProps = Vue.computed(() => {
+    const result = {
+      ...getPropsSafeToSpread(),
+      href: href.value,
+      ref,
+      ...staticEventHandlers,
+      disabled: !!options.disabled,
+      target: options.target
+    };
     if (resolvedStyle.value) {
-      reactiveProps.style = resolvedStyle.value;
-    } else {
-      delete reactiveProps.style;
+      result.style = resolvedStyle.value;
     }
     if (resolvedClassName.value) {
-      reactiveProps.class = resolvedClassName.value;
-    } else {
-      delete reactiveProps.class;
+      result.class = resolvedClassName.value;
     }
     if (options.disabled) {
-      reactiveProps.role = "link";
-      reactiveProps["aria-disabled"] = true;
-    } else {
-      delete reactiveProps.role;
-      delete reactiveProps["aria-disabled"];
+      result.role = "link";
+      result["aria-disabled"] = true;
     }
     if (isActive.value) {
-      reactiveProps["data-status"] = "active";
-      reactiveProps["aria-current"] = "page";
-    } else {
-      delete reactiveProps["data-status"];
-      delete reactiveProps["aria-current"];
+      result["data-status"] = "active";
+      result["aria-current"] = "page";
     }
     if (isTransitioning.value) {
-      reactiveProps["data-transitioning"] = "transitioning";
-    } else {
-      delete reactiveProps["data-transitioning"];
+      result["data-transitioning"] = "transitioning";
     }
+    const activeP = resolvedActiveProps.value;
+    const inactiveP = resolvedInactiveProps.value;
     for (const key of Object.keys(activeP)) {
       if (key !== "class" && key !== "style") {
-        reactiveProps[key] = activeP[key];
+        result[key] = activeP[key];
       }
     }
     for (const key of Object.keys(inactiveP)) {
       if (key !== "class" && key !== "style") {
-        reactiveProps[key] = inactiveP[key];
+        result[key] = inactiveP[key];
       }
     }
+    return result;
   });
-  return reactiveProps;
+  return computedProps;
 }
 function createLink(Comp) {
   return Vue.defineComponent({
@@ -334,9 +325,10 @@ const LinkImpl = Vue.defineComponent({
       ...props,
       ...attrs
     };
-    const linkProps = useLinkProps(allProps);
+    const linkPropsComputed = useLinkProps(allProps);
     return () => {
       const Component = props._asChild || "a";
+      const linkProps = linkPropsComputed.value;
       const isActive = linkProps["data-status"] === "active";
       const isTransitioning = linkProps["data-transitioning"] === "transitioning";
       const slotContent = slots.default ? slots.default({