@tanstack/vue-router 0.0.1 → 1.140.0

package/dist/esm/RouterProvider.js

@@ -0,0 +1,65 @@
+import * as Vue from "vue";
+import { Matches } from "./Matches.js";
+import { provideRouter } from "./routerContext.js";
+const RouterContextProvider = Vue.defineComponent({
+  name: "RouterContextProvider",
+  props: {
+    router: {
+      type: Object,
+      required: true
+    }
+    // Rest of router options will be passed as attrs
+  },
+  setup(props, {
+    attrs,
+    slots
+  }) {
+    const router = props.router;
+    const restAttrs = attrs;
+    router.update({
+      ...router.options,
+      ...restAttrs,
+      context: {
+        ...router.options.context,
+        ...restAttrs.context || {}
+      }
+    });
+    provideRouter(router);
+    return () => {
+      const childContent = slots.default?.();
+      if (router.options.Wrap) {
+        const WrapComponent = router.options.Wrap;
+        return Vue.h(WrapComponent, null, () => childContent);
+      }
+      return childContent;
+    };
+  }
+});
+const RouterProvider = Vue.defineComponent({
+  name: "RouterProvider",
+  props: {
+    router: {
+      type: Object,
+      required: true
+    }
+    // Rest of router options will be passed as attrs
+  },
+  setup(props, {
+    attrs
+  }) {
+    const restAttrs = attrs;
+    return () => {
+      return Vue.h(RouterContextProvider, {
+        router: props.router,
+        ...restAttrs
+      }, {
+        default: () => Vue.h(Matches)
+      });
+    };
+  }
+});
+export {
+  RouterContextProvider,
+  RouterProvider
+};
+//# sourceMappingURL=RouterProvider.js.map

package/dist/esm/RouterProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouterProvider.js","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport { Matches } from './Matches'\nimport { provideRouter } from './routerContext'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterOptions,\n} from '@tanstack/router-core'\n\n// Component that provides router context and renders children\nexport const RouterContextProvider = Vue.defineComponent({\n  name: 'RouterContextProvider',\n  props: {\n    router: {\n      type: Object,\n      required: true,\n    },\n    // Rest of router options will be passed as attrs\n  },\n  setup(props, { attrs, slots }) {\n    const router = props.router as AnyRouter\n    const restAttrs = attrs as Record<string, any>\n\n    // Allow the router to update options on the router instance\n    router.update({\n      ...router.options,\n      ...restAttrs,\n      context: {\n        ...router.options.context,\n        ...((restAttrs.context as Record<string, any>) || {}),\n      },\n    } as any)\n\n    // Provide router to all child components\n    provideRouter(router)\n\n    return () => {\n      // Get child content\n      const childContent = slots.default?.()\n\n      // If a Wrap component is specified in router options, use it\n      if (router.options.Wrap) {\n        const WrapComponent = router.options.Wrap\n        return Vue.h(WrapComponent, null, () => childContent)\n      }\n\n      // Otherwise just return the child content\n      return childContent\n    }\n  },\n})\n\n// The main router provider component that includes matches\nexport const RouterProvider = Vue.defineComponent({\n  name: 'RouterProvider',\n  props: {\n    router: {\n      type: Object,\n      required: true,\n    },\n    // Rest of router options will be passed as attrs\n  },\n  setup(props, { attrs }) {\n    const restAttrs = attrs as Record<string, any>\n\n    return () => {\n      return Vue.h(\n        RouterContextProvider,\n        {\n          router: props.router,\n          ...restAttrs,\n        },\n        {\n          default: () => Vue.h(Matches),\n        },\n      )\n    }\n  },\n}) as unknown as {\n  <TRouter extends AnyRouter = RegisteredRouter>(\n    props: {\n      router: TRouter\n      routeTree?: TRouter['routeTree']\n    } & Record<string, any>,\n  ): Vue.VNode\n  new (): {\n    $props: {\n      router: AnyRouter\n      routeTree?: AnyRouter['routeTree']\n    }\n  }\n}\n\nexport type RouterProps<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n> = Omit<\n  RouterOptions<\n    TRouter['routeTree'],\n    NonNullable<TRouter['options']['trailingSlash']>,\n    false,\n    TRouter['history'],\n    TDehydrated\n  >,\n  'context'\n> & {\n  router: TRouter\n  context?: Partial<\n    RouterOptions<\n      TRouter['routeTree'],\n      NonNullable<TRouter['options']['trailingSlash']>,\n      false,\n      TRouter['history'],\n      TDehydrated\n    >['context']\n  >\n}\n"],"names":["RouterContextProvider","Vue","defineComponent","name","props","router","type","Object","required","setup","attrs","slots","restAttrs","update","options","context","provideRouter","childContent","default","Wrap","WrapComponent","h","RouterProvider","Matches"],"mappings":";;;MAUaA,wBAAwBC,IAAIC,gBAAgB;AAAA,EACvDC,MAAM;AAAA,EACNC,OAAO;AAAA,IACLC,QAAQ;AAAA,MACNC,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACZ;AAAA;AAAA;EAGFC,MAAML,OAAO;AAAA,IAAEM;AAAAA,IAAOC;AAAAA,EAAM,GAAG;AAC7B,UAAMN,SAASD,MAAMC;AACrB,UAAMO,YAAYF;AAGlBL,WAAOQ,OAAO;AAAA,MACZ,GAAGR,OAAOS;AAAAA,MACV,GAAGF;AAAAA,MACHG,SAAS;AAAA,QACP,GAAGV,OAAOS,QAAQC;AAAAA,QAClB,GAAKH,UAAUG,WAAmC,CAAA;AAAA,MACpD;AAAA,IACF,CAAQ;AAGRC,kBAAcX,MAAM;AAEpB,WAAO,MAAM;AAEX,YAAMY,eAAeN,MAAMO,UAAO;AAGlC,UAAIb,OAAOS,QAAQK,MAAM;AACvB,cAAMC,gBAAgBf,OAAOS,QAAQK;AACrC,eAAOlB,IAAIoB,EAAED,eAAe,MAAM,MAAMH,YAAY;AAAA,MACtD;AAGA,aAAOA;AAAAA,IACT;AAAA,EACF;AACF,CAAC;MAGYK,iBAAiBrB,IAAIC,gBAAgB;AAAA,EAChDC,MAAM;AAAA,EACNC,OAAO;AAAA,IACLC,QAAQ;AAAA,MACNC,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACZ;AAAA;AAAA;EAGFC,MAAML,OAAO;AAAA,IAAEM;AAAAA,EAAM,GAAG;AACtB,UAAME,YAAYF;AAElB,WAAO,MAAM;AACX,aAAOT,IAAIoB,EACTrB,uBACA;AAAA,QACEK,QAAQD,MAAMC;AAAAA,QACd,GAAGO;AAAAA,MACL,GACA;AAAA,QACEM,SAASA,MAAMjB,IAAIoB,EAAEE,OAAO;AAAA,MAC9B,CACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/SafeFragment.d.ts

@@ -0,0 +1,4 @@
+import * as Vue from 'vue';
+export declare const SafeFragment: Vue.DefineComponent<{}, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;

package/dist/esm/ScriptOnce.d.ts

@@ -0,0 +1,5 @@
+export declare function ScriptOnce({ children, log, }: {
+    children: string;
+    log?: boolean;
+    sync?: boolean;
+}): import("vue/jsx-runtime").JSX.Element | null;

package/dist/esm/ScriptOnce.js

@@ -0,0 +1,21 @@
+import { createVNode } from "vue";
+import jsesc from "jsesc";
+function ScriptOnce({
+  children,
+  log
+}) {
+  if (typeof document !== "undefined") {
+    return null;
+  }
+  return createVNode("script", {
+    "class": "tsr-once",
+    "innerHTML": [children, (log ?? true) && process.env.NODE_ENV === "development" ? `console.info(\`Injected From Server:
+${jsesc(children.toString(), {
+      quotes: "backtick"
+    })}\`)` : "", 'if (typeof __TSR_SSR__ !== "undefined") __TSR_SSR__.cleanScripts()'].filter(Boolean).join("\n")
+  }, null);
+}
+export {
+  ScriptOnce
+};
+//# sourceMappingURL=ScriptOnce.js.map

package/dist/esm/ScriptOnce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScriptOnce.js","sources":["../../src/ScriptOnce.tsx"],"sourcesContent":["import jsesc from 'jsesc'\n\nexport function ScriptOnce({\n  children,\n  log,\n}: {\n  children: string\n  log?: boolean\n  sync?: boolean\n}) {\n  if (typeof document !== 'undefined') {\n    return null\n  }\n\n  return (\n    <script\n      class=\"tsr-once\"\n      innerHTML={[\n        children,\n        (log ?? true) && process.env.NODE_ENV === 'development'\n          ? `console.info(\\`Injected From Server:\n${jsesc(children.toString(), { quotes: 'backtick' })}\\`)`\n          : '',\n        'if (typeof __TSR_SSR__ !== \"undefined\") __TSR_SSR__.cleanScripts()',\n      ]\n        .filter(Boolean)\n        .join('\\n')}\n    />\n  )\n}\n"],"names":["ScriptOnce","children","log","document","_createVNode","process","env","NODE_ENV","jsesc","toString","quotes","filter","Boolean","join"],"mappings":";;AAEO,SAASA,WAAW;AAAA,EACzBC;AAAAA,EACAC;AAKF,GAAG;AACD,MAAI,OAAOC,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AAEA,SAAAC,YAAA,UAAA;AAAA,IAAA,SAAA;AAAA,IAAA,aAGe,CACTH,WACCC,OAAO,SAASG,QAAQC,IAAIC,aAAa,gBACtC;AAAA,EACVC,MAAMP,SAASQ,YAAY;AAAA,MAAEC,QAAQ;AAAA,IAAW,CAAC,CAAC,QACxC,IACJ,oEAAoE,EAEnEC,OAAOC,OAAO,EACdC,KAAK,IAAI;AAAA,EAAC,GAAA,IAAA;AAGnB;"}

package/dist/esm/Scripts.d.ts

@@ -0,0 +1 @@
+export declare const Scripts: () => import("vue/jsx-runtime").JSX.Element;

package/dist/esm/Scripts.js

@@ -0,0 +1,46 @@
+import { createVNode, Fragment, mergeProps } from "vue";
+import { Asset } from "./Asset.js";
+import { useRouterState } from "./useRouterState.js";
+import { useRouter } from "./useRouter.js";
+const Scripts = () => {
+  const router = useRouter();
+  const assetScripts = useRouterState({
+    select: (state) => {
+      const assetScripts2 = [];
+      const manifest = router.ssr?.manifest;
+      if (!manifest) {
+        return [];
+      }
+      state.matches.map((match) => router.looseRoutesById[match.routeId]).forEach((route) => manifest.routes[route.id]?.assets?.filter((d) => d.tag === "script").forEach((asset) => {
+        assetScripts2.push({
+          tag: "script",
+          attrs: asset.attrs,
+          children: asset.children
+        });
+      }));
+      return assetScripts2;
+    }
+  });
+  const scripts = useRouterState({
+    select: (state) => ({
+      scripts: state.matches.map((match) => match.scripts).flat(1).filter(Boolean).map(({
+        children,
+        ...script
+      }) => ({
+        tag: "script",
+        attrs: {
+          ...script
+        },
+        children
+      }))
+    })
+  });
+  const allScripts = [...scripts.value.scripts, ...assetScripts.value];
+  return createVNode(Fragment, null, [allScripts.map((asset, i) => createVNode(Asset, mergeProps(asset, {
+    "key": i
+  }), null))]);
+};
+export {
+  Scripts
+};
+//# sourceMappingURL=Scripts.js.map

package/dist/esm/Scripts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scripts.js","sources":["../../src/Scripts.tsx"],"sourcesContent":["import { Asset } from './Asset'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\nexport const Scripts = () => {\n  const router = useRouter()\n\n  const assetScripts = useRouterState({\n    select: (state) => {\n      const assetScripts: Array<RouterManagedTag> = []\n      const manifest = router.ssr?.manifest\n\n      if (!manifest) {\n        return []\n      }\n\n      state.matches\n        .map((match) => router.looseRoutesById[match.routeId]!)\n        .forEach((route) =>\n          manifest.routes[route.id]?.assets\n            ?.filter((d) => d.tag === 'script')\n            .forEach((asset) => {\n              assetScripts.push({\n                tag: 'script',\n                attrs: asset.attrs,\n                children: asset.children,\n              } as any)\n            }),\n        )\n\n      return assetScripts\n    },\n  })\n\n  const scripts = useRouterState({\n    select: (state) => ({\n      scripts: (\n        state.matches\n          .map((match) => match.scripts!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...script }) => ({\n        tag: 'script',\n        attrs: {\n          ...script,\n        },\n        children,\n      })),\n    }),\n  })\n\n  const allScripts = [\n    ...scripts.value.scripts,\n    ...assetScripts.value,\n  ] as Array<RouterManagedTag>\n\n  return (\n    <>\n      {allScripts.map((asset, i) => (\n        <Asset {...asset} key={i} />\n      ))}\n    </>\n  )\n}\n"],"names":["Scripts","router","useRouter","assetScripts","useRouterState","select","state","manifest","ssr","matches","map","match","looseRoutesById","routeId","forEach","route","routes","id","assets","filter","d","tag","asset","push","attrs","children","scripts","flat","Boolean","script","allScripts","value","_createVNode","_Fragment","i","Asset","_mergeProps"],"mappings":";;;;AAKO,MAAMA,UAAUA,MAAM;AAC3B,QAAMC,SAASC,UAAS;AAExB,QAAMC,eAAeC,eAAe;AAAA,IAClCC,QAASC,WAAU;AACjB,YAAMH,gBAAwC,CAAA;AAC9C,YAAMI,WAAWN,OAAOO,KAAKD;AAE7B,UAAI,CAACA,UAAU;AACb,eAAO,CAAA;AAAA,MACT;AAEAD,YAAMG,QACHC,IAAKC,WAAUV,OAAOW,gBAAgBD,MAAME,OAAO,CAAE,EACrDC,QAASC,WACRR,SAASS,OAAOD,MAAME,EAAE,GAAGC,QACvBC,OAAQC,OAAMA,EAAEC,QAAQ,QAAQ,EACjCP,QAASQ,WAAU;AAClBnB,QAAAA,cAAaoB,KAAK;AAAA,UAChBF,KAAK;AAAA,UACLG,OAAOF,MAAME;AAAAA,UACbC,UAAUH,MAAMG;AAAAA,QAClB,CAAQ;AAAA,MACV,CAAC,CACL;AAEF,aAAOtB;AAAAA,IACT;AAAA,EACF,CAAC;AAED,QAAMuB,UAAUtB,eAAe;AAAA,IAC7BC,QAASC,YAAW;AAAA,MAClBoB,SACEpB,MAAMG,QACHC,IAAKC,WAAUA,MAAMe,OAAQ,EAC7BC,KAAK,CAAC,EACNR,OAAOS,OAAO,EACjBlB,IAAI,CAAC;AAAA,QAAEe;AAAAA,QAAU,GAAGI;AAAAA,MAAO,OAAO;AAAA,QAClCR,KAAK;AAAA,QACLG,OAAO;AAAA,UACL,GAAGK;AAAAA;QAELJ;AAAAA,MACF,EAAE;AAAA;EAEN,CAAC;AAED,QAAMK,aAAa,CACjB,GAAGJ,QAAQK,MAAML,SACjB,GAAGvB,aAAa4B,KAAK;AAGvB,SAAAC,YAAAC,iBAEKH,WAAWpB,IAAI,CAACY,OAAOY,MAACF,YAAAG,OAAAC,WACZd,OAAK;AAAA,IAAA,OAAOY;AAAAA,EAAC,CAAA,GAAA,IAAA,CACzB,CAAC,CAAA;AAGR;"}

package/dist/esm/ScrollRestoration.d.ts

@@ -0,0 +1,14 @@
+import { ParsedLocation, ScrollRestorationEntry, ScrollRestorationOptions } from '@tanstack/router-core';
+/**
+ * @deprecated use createRouter's `scrollRestoration` option instead
+ */
+export declare function ScrollRestoration(_props: ScrollRestorationOptions): null;
+export declare function useElementScrollRestoration(options: ({
+    id: string;
+    getElement?: () => Window | Element | undefined | null;
+} | {
+    id?: string;
+    getElement: () => Window | Element | undefined | null;
+}) & {
+    getKey?: (location: ParsedLocation) => string;
+}): ScrollRestorationEntry | undefined;

package/dist/esm/ScrollRestoration.js

@@ -0,0 +1,36 @@
+import { defaultGetScrollRestorationKey, getCssSelector, scrollRestorationCache, setupScrollRestoration } from "@tanstack/router-core";
+import { useRouter } from "./useRouter.js";
+function useScrollRestoration() {
+  const router = useRouter();
+  setupScrollRestoration(router, true);
+}
+function ScrollRestoration(_props) {
+  useScrollRestoration();
+  if (process.env.NODE_ENV === "development") {
+    console.warn("The ScrollRestoration component is deprecated. Use createRouter's `scrollRestoration` option instead.");
+  }
+  return null;
+}
+function useElementScrollRestoration(options) {
+  useScrollRestoration();
+  const router = useRouter();
+  const getKey = options.getKey || defaultGetScrollRestorationKey;
+  let elementSelector = "";
+  if (options.id) {
+    elementSelector = `[data-scroll-restoration-id="${options.id}"]`;
+  } else {
+    const element = options.getElement?.();
+    if (!element) {
+      return;
+    }
+    elementSelector = element instanceof Window ? "window" : getCssSelector(element);
+  }
+  const restoreKey = getKey(router.latestLocation);
+  const byKey = scrollRestorationCache?.state[restoreKey];
+  return byKey?.[elementSelector];
+}
+export {
+  ScrollRestoration,
+  useElementScrollRestoration
+};
+//# sourceMappingURL=ScrollRestoration.js.map

package/dist/esm/ScrollRestoration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollRestoration.js","sources":["../../src/ScrollRestoration.tsx"],"sourcesContent":["import {\n  defaultGetScrollRestorationKey,\n  getCssSelector,\n  scrollRestorationCache,\n  setupScrollRestoration,\n} from '@tanstack/router-core'\nimport { useRouter } from './useRouter'\nimport type {\n  ParsedLocation,\n  ScrollRestorationEntry,\n  ScrollRestorationOptions,\n} from '@tanstack/router-core'\n\nfunction useScrollRestoration() {\n  const router = useRouter()\n  setupScrollRestoration(router, true)\n}\n\n/**\n * @deprecated use createRouter's `scrollRestoration` option instead\n */\nexport function ScrollRestoration(_props: ScrollRestorationOptions) {\n  useScrollRestoration()\n\n  if (process.env.NODE_ENV === 'development') {\n    console.warn(\n      \"The ScrollRestoration component is deprecated. Use createRouter's `scrollRestoration` option instead.\",\n    )\n  }\n\n  return null\n}\n\nexport function useElementScrollRestoration(\n  options: (\n    | {\n        id: string\n        getElement?: () => Window | Element | undefined | null\n      }\n    | {\n        id?: string\n        getElement: () => Window | Element | undefined | null\n      }\n  ) & {\n    getKey?: (location: ParsedLocation) => string\n  },\n): ScrollRestorationEntry | undefined {\n  useScrollRestoration()\n\n  const router = useRouter()\n  const getKey = options.getKey || defaultGetScrollRestorationKey\n\n  let elementSelector = ''\n\n  if (options.id) {\n    elementSelector = `[data-scroll-restoration-id=\"${options.id}\"]`\n  } else {\n    const element = options.getElement?.()\n    if (!element) {\n      return\n    }\n    elementSelector =\n      element instanceof Window ? 'window' : getCssSelector(element)\n  }\n\n  const restoreKey = getKey(router.latestLocation)\n  const byKey = scrollRestorationCache?.state[restoreKey]\n  return byKey?.[elementSelector]\n}\n"],"names":["useScrollRestoration","router","useRouter","setupScrollRestoration","ScrollRestoration","_props","process","env","NODE_ENV","console","warn","useElementScrollRestoration","options","getKey","defaultGetScrollRestorationKey","elementSelector","id","element","getElement","Window","getCssSelector","restoreKey","latestLocation","byKey","scrollRestorationCache","state"],"mappings":";;AAaA,SAASA,uBAAuB;AAC9B,QAAMC,SAASC,UAAS;AACxBC,yBAAuBF,QAAQ,IAAI;AACrC;AAKO,SAASG,kBAAkBC,QAAkC;AAClEL,uBAAoB;AAEpB,MAAIM,QAAQC,IAAIC,aAAa,eAAe;AAC1CC,YAAQC,KACN,uGACF;AAAA,EACF;AAEA,SAAO;AACT;AAEO,SAASC,4BACdC,SAYoC;AACpCZ,uBAAoB;AAEpB,QAAMC,SAASC,UAAS;AACxB,QAAMW,SAASD,QAAQC,UAAUC;AAEjC,MAAIC,kBAAkB;AAEtB,MAAIH,QAAQI,IAAI;AACdD,sBAAkB,gCAAgCH,QAAQI,EAAE;AAAA,EAC9D,OAAO;AACL,UAAMC,UAAUL,QAAQM,aAAU;AAClC,QAAI,CAACD,SAAS;AACZ;AAAA,IACF;AACAF,sBACEE,mBAAmBE,SAAS,WAAWC,eAAeH,OAAO;AAAA,EACjE;AAEA,QAAMI,aAAaR,OAAOZ,OAAOqB,cAAc;AAC/C,QAAMC,QAAQC,wBAAwBC,MAAMJ,UAAU;AACtD,SAAOE,QAAQR,eAAe;AAChC;"}

package/dist/esm/Transitioner.d.ts

@@ -0,0 +1,2 @@
+import * as Vue from 'vue';
+export declare const Transitioner: Vue.DefineComponent<{}, () => null, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;

package/dist/esm/Transitioner.js

@@ -0,0 +1,154 @@
+import * as Vue from "vue";
+import { trimPathRight, getLocationChangeInfo, handleHashScroll } from "@tanstack/router-core";
+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;
+    }
+    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 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
+        });
+      }
+    });
+    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 {
+      }
+    });
+    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 {
+      }
+    });
+    return () => null;
+  }
+});
+export {
+  Transitioner
+};
+//# sourceMappingURL=Transitioner.js.map

package/dist/esm/Transitioner.js.map

@@ -0,0 +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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"}

package/dist/esm/awaited.d.ts

@@ -0,0 +1,12 @@
+import { DeferredPromise } from '@tanstack/router-core';
+import * as Vue from 'vue';
+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, {
+    [key: string]: any;
+}> | undefined;

package/dist/esm/awaited.js

@@ -0,0 +1,40 @@
+import * as Vue from "vue";
+import { defer, TSR_DEFERRED_PROMISE } from "@tanstack/router-core";
+function useAwaited({
+  promise: _promise
+}) {
+  const promise = defer(_promise);
+  if (promise[TSR_DEFERRED_PROMISE].status === "pending") {
+    throw promise;
+  }
+  if (promise[TSR_DEFERRED_PROMISE].status === "error") {
+    throw promise[TSR_DEFERRED_PROMISE].error;
+  }
+  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 inner = Vue.computed(() => {
+    if (error.value) throw error.value;
+    if (pending.value) return props.fallback;
+    return props.children(data.value);
+  });
+  return () => inner.value;
+}
+export {
+  Await,
+  useAwaited
+};
+//# sourceMappingURL=awaited.js.map

package/dist/esm/awaited.js.map

@@ -0,0 +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;"}

package/dist/esm/fileRoute.d.ts

@@ -0,0 +1,54 @@
+import { UseParamsRoute } from './useParams.js';
+import { UseMatchRoute } from './useMatch.js';
+import { UseSearchRoute } from './useSearch.js';
+import { AnyContext, AnyRoute, AnyRouter, Constrain, ConstrainLiteral, FileBaseRouteOptions, FileRoutesByPath, LazyRouteOptions, Register, RegisteredRouter, ResolveParams, Route, RouteById, RouteConstraints, RouteIds, RouteLoaderFn, UpdatableRouteOptions, UseNavigateResult } from '@tanstack/router-core';
+import { UseLoaderDepsRoute } from './useLoaderDeps.js';
+import { UseLoaderDataRoute } from './useLoaderData.js';
+import { UseRouteContextRoute } from './useRouteContext.js';
+export declare function createFileRoute<TFilePath extends keyof FileRoutesByPath, TParentRoute extends AnyRoute = FileRoutesByPath[TFilePath]['parentRoute'], TId extends RouteConstraints['TId'] = FileRoutesByPath[TFilePath]['id'], TPath extends RouteConstraints['TPath'] = FileRoutesByPath[TFilePath]['path'], TFullPath extends RouteConstraints['TFullPath'] = FileRoutesByPath[TFilePath]['fullPath']>(path?: TFilePath): FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>['createRoute'];
+/**
+  @deprecated It's no longer recommended to use the `FileRoute` class directly.
+  Instead, use `createFileRoute('/path/to/file')(options)` to create a file route.
+*/
+export declare class FileRoute<TFilePath extends keyof FileRoutesByPath, TParentRoute extends AnyRoute = FileRoutesByPath[TFilePath]['parentRoute'], TId extends RouteConstraints['TId'] = FileRoutesByPath[TFilePath]['id'], TPath extends RouteConstraints['TPath'] = FileRoutesByPath[TFilePath]['path'], TFullPath extends RouteConstraints['TFullPath'] = FileRoutesByPath[TFilePath]['fullPath']> {
+    path?: TFilePath | undefined;
+    silent?: boolean;
+    constructor(path?: TFilePath | undefined, _opts?: {
+        silent: boolean;
+    });
+    createRoute: <TRegister = Register, TSearchValidator = undefined, TParams = ResolveParams<TPath>, TRouteContextFn = AnyContext, TBeforeLoadFn = AnyContext, TLoaderDeps extends Record<string, any> = {}, TLoaderFn = undefined, TChildren = unknown, TSSR = unknown, TMiddlewares = unknown, THandlers = undefined>(options?: FileBaseRouteOptions<TRegister, TParentRoute, TId, TPath, TSearchValidator, TParams, TLoaderDeps, TLoaderFn, AnyContext, TRouteContextFn, TBeforeLoadFn, AnyContext, TSSR, TMiddlewares, THandlers> & UpdatableRouteOptions<TParentRoute, TId, TFullPath, TParams, TSearchValidator, TLoaderFn, TLoaderDeps, AnyContext, TRouteContextFn, TBeforeLoadFn>) => Route<TRegister, TParentRoute, TPath, TFullPath, TFilePath, TId, TSearchValidator, TParams, AnyContext, TRouteContextFn, TBeforeLoadFn, TLoaderDeps, TLoaderFn, TChildren, unknown, TSSR, TMiddlewares, THandlers>;
+}
+/**
+  @deprecated It's recommended not to split loaders into separate files.
+  Instead, place the loader function in the the main route file, inside the
+  `createFileRoute('/path/to/file)(options)` options.
+*/
+export declare function FileRouteLoader<TFilePath extends keyof FileRoutesByPath, TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute']>(_path: TFilePath): <TLoaderFn>(loaderFn: Constrain<TLoaderFn, RouteLoaderFn<Register, TRoute['parentRoute'], TRoute['types']['id'], TRoute['types']['params'], TRoute['types']['loaderDeps'], TRoute['types']['routerContext'], TRoute['types']['routeContextFn'], TRoute['types']['beforeLoadFn']>>) => TLoaderFn;
+declare module '@tanstack/router-core' {
+    interface LazyRoute<in out TRoute extends AnyRoute> {
+        useMatch: UseMatchRoute<TRoute['id']>;
+        useRouteContext: UseRouteContextRoute<TRoute['id']>;
+        useSearch: UseSearchRoute<TRoute['id']>;
+        useParams: UseParamsRoute<TRoute['id']>;
+        useLoaderDeps: UseLoaderDepsRoute<TRoute['id']>;
+        useLoaderData: UseLoaderDataRoute<TRoute['id']>;
+        useNavigate: () => UseNavigateResult<TRoute['fullPath']>;
+    }
+}
+export declare class LazyRoute<TRoute extends AnyRoute> {
+    options: {
+        id: string;
+    } & LazyRouteOptions;
+    constructor(opts: {
+        id: string;
+    } & LazyRouteOptions);
+    useMatch: UseMatchRoute<TRoute['id']>;
+    useRouteContext: UseRouteContextRoute<TRoute['id']>;
+    useSearch: UseSearchRoute<TRoute['id']>;
+    useParams: UseParamsRoute<TRoute['id']>;
+    useLoaderDeps: UseLoaderDepsRoute<TRoute['id']>;
+    useLoaderData: UseLoaderDataRoute<TRoute['id']>;
+    useNavigate: () => UseNavigateResult<TRoute["fullPath"]>;
+}
+export declare function createLazyRoute<TRouter extends AnyRouter = RegisteredRouter, TId extends string = string, TRoute extends AnyRoute = RouteById<TRouter['routeTree'], TId>>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>): (opts: LazyRouteOptions) => LazyRoute<TRoute>;
+export declare function createLazyFileRoute<TFilePath extends keyof FileRoutesByPath, TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute']>(id: TFilePath): (opts: LazyRouteOptions) => LazyRoute<TRoute>;

package/dist/esm/fileRoute.js

@@ -0,0 +1,103 @@
+import warning from "tiny-warning";
+import { createRoute } from "./route.js";
+import { useMatch } from "./useMatch.js";
+import { useLoaderDeps } from "./useLoaderDeps.js";
+import { useLoaderData } from "./useLoaderData.js";
+import { useSearch } from "./useSearch.js";
+import { useParams } from "./useParams.js";
+import { useNavigate } from "./useNavigate.js";
+import { useRouter } from "./useRouter.js";
+function createFileRoute(path) {
+  if (typeof path === "object") {
+    return new FileRoute(path, {
+      silent: true
+    }).createRoute(path);
+  }
+  return new FileRoute(path, {
+    silent: true
+  }).createRoute;
+}
+class FileRoute {
+  constructor(path, _opts) {
+    this.path = path;
+    this.createRoute = (options) => {
+      warning(
+        this.silent,
+        "FileRoute is deprecated and will be removed in the next major version. Use the createFileRoute(path)(options) function instead."
+      );
+      const route = createRoute(options);
+      route.isRoot = false;
+      return route;
+    };
+    this.silent = _opts?.silent;
+  }
+}
+function FileRouteLoader(_path) {
+  warning(
+    false,
+    `FileRouteLoader is deprecated and will be removed in the next major version. Please place the loader function in the the main route file, inside the \`createFileRoute('/path/to/file')(options)\` options`
+  );
+  return (loaderFn) => loaderFn;
+}
+class LazyRoute {
+  constructor(opts) {
+    this.useMatch = (opts2) => {
+      return useMatch({
+        select: opts2?.select,
+        from: this.options.id
+      });
+    };
+    this.useRouteContext = (opts2) => {
+      return useMatch({
+        from: this.options.id,
+        select: (d) => opts2?.select ? opts2.select(d.context) : d.context
+      });
+    };
+    this.useSearch = (opts2) => {
+      return useSearch({
+        select: opts2?.select,
+        from: this.options.id
+      });
+    };
+    this.useParams = (opts2) => {
+      return useParams({
+        select: opts2?.select,
+        from: this.options.id
+      });
+    };
+    this.useLoaderDeps = (opts2) => {
+      return useLoaderDeps({ ...opts2, from: this.options.id });
+    };
+    this.useLoaderData = (opts2) => {
+      return useLoaderData({ ...opts2, from: this.options.id });
+    };
+    this.useNavigate = () => {
+      const router = useRouter();
+      return useNavigate({ from: router.routesById[this.options.id].fullPath });
+    };
+    this.options = opts;
+  }
+}
+function createLazyRoute(id) {
+  return (opts) => {
+    return new LazyRoute({
+      id,
+      ...opts
+    });
+  };
+}
+function createLazyFileRoute(id) {
+  if (typeof id === "object") {
+    return new LazyRoute(id);
+  }
+  return (opts) => new LazyRoute({ id, ...opts });
+}
+export {
+  FileRoute,
+  FileRouteLoader,
+  LazyRoute,
+  createFileRoute,
+  createLazyFileRoute,
+  createLazyRoute
+};
+//# sourceMappingURL=fileRoute.js.map