@tanstack/vue-router 0.0.1 → 1.140.0

package/dist/esm/useRouter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRouter.js","sources":["../../src/useRouter.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport warning from 'tiny-warning'\nimport { getRouterContext } from './routerContext'\nimport type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'\n\nexport function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {\n  warn?: boolean\n}): TRouter {\n  const value = Vue.inject(getRouterContext() as any, null)\n  warning(\n    !((opts?.warn ?? true) && !value),\n    'useRouter must be used inside a <RouterProvider> component!',\n  )\n  return value as any\n}\n"],"names":["useRouter","opts","value","Vue","inject","getRouterContext","warning","warn"],"mappings":";;;AAKO,SAASA,UAAwDC,MAE5D;AACV,QAAMC,QAAQC,IAAIC,OAAOC,iBAAgB,GAAW,IAAI;AACxDC,UACE,GAAGL,MAAMM,QAAQ,SAAS,CAACL,QAC3B,6DACF;AACA,SAAOA;AACT;"}

package/dist/esm/useRouterState.d.ts

@@ -0,0 +1,8 @@
+import { AnyRouter, RegisteredRouter, RouterState } from '@tanstack/router-core';
+import * as Vue from 'vue';
+export type UseRouterStateOptions<TRouter extends AnyRouter, TSelected> = {
+    router?: TRouter;
+    select?: (state: RouterState<TRouter['routeTree']>) => TSelected;
+};
+export type UseRouterStateResult<TRouter extends AnyRouter, TSelected> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected;
+export declare function useRouterState<TRouter extends AnyRouter = RegisteredRouter, TSelected = unknown>(opts?: UseRouterStateOptions<TRouter, TSelected>): Vue.Ref<UseRouterStateResult<TRouter, TSelected>>;

package/dist/esm/useRouterState.js

@@ -0,0 +1,20 @@
+import { useStore } from "@tanstack/vue-store";
+import * as Vue from "vue";
+import { useRouter } from "./useRouter.js";
+function useRouterState(opts) {
+  const contextRouter = useRouter({
+    warn: opts?.router === void 0
+  });
+  const router = opts?.router || contextRouter;
+  if (!router || !router.__store) {
+    return Vue.ref(void 0);
+  }
+  return useStore(router.__store, (state) => {
+    if (opts?.select) return opts.select(state);
+    return state;
+  });
+}
+export {
+  useRouterState
+};
+//# sourceMappingURL=useRouterState.js.map

package/dist/esm/useRouterState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRouterState.js","sources":["../../src/useRouterState.tsx"],"sourcesContent":["import { useStore } from '@tanstack/vue-store'\nimport * as Vue from 'vue'\nimport { useRouter } from './useRouter'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterState,\n} from '@tanstack/router-core'\n\nexport type UseRouterStateOptions<TRouter extends AnyRouter, TSelected> = {\n  router?: TRouter\n  select?: (state: RouterState<TRouter['routeTree']>) => TSelected\n}\n\nexport type UseRouterStateResult<\n  TRouter extends AnyRouter,\n  TSelected,\n> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected\n\nexport function useRouterState<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TSelected = unknown,\n>(\n  opts?: UseRouterStateOptions<TRouter, TSelected>,\n): Vue.Ref<UseRouterStateResult<TRouter, TSelected>> {\n  const contextRouter = useRouter<TRouter>({\n    warn: opts?.router === undefined,\n  })\n  const router = opts?.router || contextRouter\n\n  // Return a safe default if router is undefined\n  if (!router || !router.__store) {\n    return Vue.ref(undefined) as Vue.Ref<\n      UseRouterStateResult<TRouter, TSelected>\n    >\n  }\n\n  return useStore(router.__store, (state) => {\n    if (opts?.select) return opts.select(state)\n\n    return state\n  }) as Vue.Ref<UseRouterStateResult<TRouter, TSelected>>\n}\n"],"names":["useRouterState","opts","contextRouter","useRouter","warn","router","undefined","__store","Vue","ref","useStore","state","select"],"mappings":";;;AAmBO,SAASA,eAIdC,MACmD;AACnD,QAAMC,gBAAgBC,UAAmB;AAAA,IACvCC,MAAMH,MAAMI,WAAWC;AAAAA,EACzB,CAAC;AACD,QAAMD,SAASJ,MAAMI,UAAUH;AAG/B,MAAI,CAACG,UAAU,CAACA,OAAOE,SAAS;AAC9B,WAAOC,IAAIC,IAAIH,MAAS;AAAA,EAG1B;AAEA,SAAOI,SAASL,OAAOE,SAAUI,WAAU;AACzC,QAAIV,MAAMW,OAAQ,QAAOX,KAAKW,OAAOD,KAAK;AAE1C,WAAOA;AAAAA,EACT,CAAC;AACH;"}

package/dist/esm/useSearch.d.ts

@@ -0,0 +1,9 @@
+import { AnyRouter, RegisteredRouter, ResolveUseSearch, StrictOrFrom, ThrowConstraint, ThrowOrOptional, UseSearchResult } from '@tanstack/router-core';
+import type * as Vue from 'vue';
+export interface UseSearchBaseOptions<TRouter extends AnyRouter, TFrom, TStrict extends boolean, TThrow extends boolean, TSelected> {
+    select?: (state: ResolveUseSearch<TRouter, TFrom, TStrict>) => TSelected;
+    shouldThrow?: TThrow;
+}
+export type UseSearchOptions<TRouter extends AnyRouter, TFrom, TStrict extends boolean, TThrow extends boolean, TSelected> = StrictOrFrom<TRouter, TFrom, TStrict> & UseSearchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>;
+export type UseSearchRoute<out TFrom> = <TRouter extends AnyRouter = RegisteredRouter, TSelected = unknown>(opts?: UseSearchBaseOptions<TRouter, TFrom, true, true, TSelected>) => Vue.Ref<UseSearchResult<TRouter, TFrom, true, TSelected>>;
+export declare function useSearch<TRouter extends AnyRouter = RegisteredRouter, const TFrom extends string | undefined = undefined, TStrict extends boolean = true, TThrow extends boolean = true, TSelected = unknown>(opts: UseSearchOptions<TRouter, TFrom, TStrict, ThrowConstraint<TStrict, TThrow>, TSelected>): Vue.Ref<ThrowOrOptional<UseSearchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>>;

package/dist/esm/useSearch.js

@@ -0,0 +1,15 @@
+import { useMatch } from "./useMatch.js";
+function useSearch(opts) {
+  return useMatch({
+    from: opts.from,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    select: (match) => {
+      return opts.select ? opts.select(match.search) : match.search;
+    }
+  });
+}
+export {
+  useSearch
+};
+//# sourceMappingURL=useSearch.js.map

package/dist/esm/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.js","sources":["../../src/useSearch.tsx"],"sourcesContent":["import { useMatch } from './useMatch'\nimport type * as Vue from 'vue'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  ResolveUseSearch,\n  StrictOrFrom,\n  ThrowConstraint,\n  ThrowOrOptional,\n  UseSearchResult,\n} from '@tanstack/router-core'\n\nexport interface UseSearchBaseOptions<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n  TThrow extends boolean,\n  TSelected,\n> {\n  select?: (state: ResolveUseSearch<TRouter, TFrom, TStrict>) => TSelected\n  shouldThrow?: TThrow\n}\n\nexport type UseSearchOptions<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n  TThrow extends boolean,\n  TSelected,\n> = StrictOrFrom<TRouter, TFrom, TStrict> &\n  UseSearchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>\n\nexport type UseSearchRoute<out TFrom> = <\n  TRouter extends AnyRouter = RegisteredRouter,\n  TSelected = unknown,\n>(\n  opts?: UseSearchBaseOptions<\n    TRouter,\n    TFrom,\n    /* TStrict */ true,\n    /* TThrow */ true,\n    TSelected\n  >,\n) => Vue.Ref<UseSearchResult<TRouter, TFrom, true, TSelected>>\n\nexport function useSearch<\n  TRouter extends AnyRouter = RegisteredRouter,\n  const TFrom extends string | undefined = undefined,\n  TStrict extends boolean = true,\n  TThrow extends boolean = true,\n  TSelected = unknown,\n>(\n  opts: UseSearchOptions<\n    TRouter,\n    TFrom,\n    TStrict,\n    ThrowConstraint<TStrict, TThrow>,\n    TSelected\n  >,\n): Vue.Ref<\n  ThrowOrOptional<UseSearchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>\n> {\n  return useMatch({\n    from: opts.from!,\n    strict: opts.strict,\n    shouldThrow: opts.shouldThrow,\n    select: (match: any) => {\n      return opts.select ? opts.select(match.search) : match.search\n    },\n  }) as any\n}\n"],"names":["useSearch","opts","useMatch","from","strict","shouldThrow","select","match","search"],"mappings":";AA6CO,SAASA,UAOdC,MASA;AACA,SAAOC,SAAS;AAAA,IACdC,MAAMF,KAAKE;AAAAA,IACXC,QAAQH,KAAKG;AAAAA,IACbC,aAAaJ,KAAKI;AAAAA,IAClBC,QAASC,WAAe;AACtB,aAAON,KAAKK,SAASL,KAAKK,OAAOC,MAAMC,MAAM,IAAID,MAAMC;AAAAA,IACzD;AAAA,EACF,CAAC;AACH;"}

package/dist/esm/utils.d.ts

@@ -0,0 +1,40 @@
+import * as Vue from 'vue';
+export declare const useLayoutEffect: typeof Vue.effect;
+export declare const usePrevious: (fn: () => boolean) => Vue.ComputedRef<{
+    current: boolean | null;
+    previous: boolean | null;
+}>;
+/**
+ * React hook to wrap `IntersectionObserver`.
+ *
+ * This hook will create an `IntersectionObserver` and observe the ref passed to it.
+ *
+ * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.
+ *
+ * @param ref - The ref to observe
+ * @param intersectionObserverOptions - The options to pass to the IntersectionObserver
+ * @param options - The options to pass to the hook
+ * @param callback - The callback to call when the intersection changes
+ * @returns The IntersectionObserver instance
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ * const ref = React.useRef<HTMLDivElement>(null)
+ * useIntersectionObserver(
+ *  ref,
+ *  (entry) => { doSomething(entry) },
+ *  { rootMargin: '10px' },
+ *  { disabled: false }
+ * )
+ * return <div ref={ref} />
+ * ```
+ */
+export declare function useIntersectionObserver<T extends Element>(ref: Vue.Ref<T | null>, callback: (entry: IntersectionObserverEntry | undefined) => void, intersectionObserverOptions?: IntersectionObserverInit, options?: {
+    disabled?: boolean | (() => boolean);
+}): Vue.Ref<IntersectionObserver | null>;
+export declare function splitProps<T extends Record<string, any>>(props: T, keys: Array<keyof T>): Vue.ComputedRef<{
+    [k: string]: unknown;
+}>[];
+export type ParentProps<T = {}> = T & {
+    children?: Vue.VNode | Array<Vue.VNode> | string;
+};

package/dist/esm/utils.js

@@ -0,0 +1,44 @@
+import * as Vue from "vue";
+const useLayoutEffect = typeof window !== "undefined" ? Vue.effect : Vue.effect;
+const usePrevious = (fn) => {
+  return Vue.computed(
+    (prev = {
+      current: null,
+      previous: null
+    }) => {
+      const current = fn();
+      if (prev.current !== current) {
+        prev.previous = prev.current;
+        prev.current = current;
+      }
+      return prev;
+    }
+  );
+};
+function useIntersectionObserver(ref, callback, intersectionObserverOptions = {}, options = {}) {
+  const isIntersectionObserverAvailable = typeof IntersectionObserver === "function";
+  const observerRef = Vue.ref(null);
+  Vue.watchEffect((onCleanup) => {
+    const r = ref.value;
+    const isDisabled = typeof options.disabled === "function" ? options.disabled() : options.disabled;
+    if (!r || !isIntersectionObserverAvailable || isDisabled) {
+      return;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      callback(entry);
+    }, intersectionObserverOptions);
+    observerRef.value = observer;
+    observer.observe(r);
+    onCleanup(() => {
+      observer.disconnect();
+      observerRef.value = null;
+    });
+  });
+  return observerRef;
+}
+export {
+  useIntersectionObserver,
+  useLayoutEffect,
+  usePrevious
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as Vue from 'vue'\n\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? Vue.effect : Vue.effect\n\nexport const usePrevious = (fn: () => boolean) => {\n  return Vue.computed(\n    (\n      prev: { current: boolean | null; previous: boolean | null } = {\n        current: null,\n        previous: null,\n      },\n    ) => {\n      const current = fn()\n\n      if (prev.current !== current) {\n        prev.previous = prev.current\n        prev.current = current\n      }\n\n      return prev\n    },\n  )\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n *  ref,\n *  (entry) => { doSomething(entry) },\n *  { rootMargin: '10px' },\n *  { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n  ref: Vue.Ref<T | null>,\n  callback: (entry: IntersectionObserverEntry | undefined) => void,\n  intersectionObserverOptions: IntersectionObserverInit = {},\n  options: { disabled?: boolean | (() => boolean) } = {},\n): Vue.Ref<IntersectionObserver | null> {\n  const isIntersectionObserverAvailable =\n    typeof IntersectionObserver === 'function'\n  const observerRef = Vue.ref<IntersectionObserver | null>(null)\n\n  // Use watchEffect with cleanup to properly manage the observer lifecycle\n  Vue.watchEffect((onCleanup) => {\n    const r = ref.value\n    // Support both static boolean and function for disabled check\n    const isDisabled =\n      typeof options.disabled === 'function'\n        ? options.disabled()\n        : options.disabled\n    if (!r || !isIntersectionObserverAvailable || isDisabled) {\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      callback(entry)\n    }, intersectionObserverOptions)\n\n    observerRef.value = observer\n    observer.observe(r)\n\n    onCleanup(() => {\n      observer.disconnect()\n      observerRef.value = null\n    })\n  })\n\n  return observerRef\n}\n\nexport function splitProps<T extends Record<string, any>>(\n  props: T,\n  keys: Array<keyof T>,\n) {\n  // Get the specified props\n  const selectedProps = Vue.computed(() => {\n    return Object.fromEntries(keys.map((key) => [key, props[key]]))\n  })\n\n  // Get remaining props as attrs\n  const remainingAttrs = Vue.computed(() => {\n    const attrs = Vue.useAttrs()\n    return Object.fromEntries(\n      Object.entries(attrs).filter(([key]) => !keys.includes(key as keyof T)),\n    )\n  })\n\n  return [selectedProps, remainingAttrs]\n}\n\nexport type ParentProps<T = {}> = T & {\n  children?: Vue.VNode | Array<Vue.VNode> | string\n}\n"],"names":[],"mappings":";AAEO,MAAM,kBACX,OAAO,WAAW,cAAc,IAAI,SAAS,IAAI;AAE5C,MAAM,cAAc,CAAC,OAAsB;AAChD,SAAO,IAAI;AAAA,IACT,CACE,OAA8D;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,MAET;AACH,YAAM,UAAU,GAAA;AAEhB,UAAI,KAAK,YAAY,SAAS;AAC5B,aAAK,WAAW,KAAK;AACrB,aAAK,UAAU;AAAA,MACjB;AAEA,aAAO;AAAA,IACT;AAAA,EAAA;AAEJ;AA2BO,SAAS,wBACd,KACA,UACA,8BAAwD,CAAA,GACxD,UAAoD,IACd;AACtC,QAAM,kCACJ,OAAO,yBAAyB;AAClC,QAAM,cAAc,IAAI,IAAiC,IAAI;AAG7D,MAAI,YAAY,CAAC,cAAc;AAC7B,UAAM,IAAI,IAAI;AAEd,UAAM,aACJ,OAAO,QAAQ,aAAa,aACxB,QAAQ,aACR,QAAQ;AACd,QAAI,CAAC,KAAK,CAAC,mCAAmC,YAAY;AACxD;AAAA,IACF;AAEA,UAAM,WAAW,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACrD,eAAS,KAAK;AAAA,IAChB,GAAG,2BAA2B;AAE9B,gBAAY,QAAQ;AACpB,aAAS,QAAQ,CAAC;AAElB,cAAU,MAAM;AACd,eAAS,WAAA;AACT,kBAAY,QAAQ;AAAA,IACtB,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AACT;"}

package/dist/source/Asset.d.ts

@@ -0,0 +1,2 @@
+import type { RouterManagedTag } from '@tanstack/router-core';
+export declare function Asset({ tag, attrs, children }: RouterManagedTag): any;

package/dist/source/Asset.jsx

@@ -0,0 +1,22 @@
+export function Asset({ tag, attrs, children }) {
+    switch (tag) {
+        case 'title':
+            return <title {...attrs}>{children}</title>;
+        case 'meta':
+            return <meta {...attrs}/>;
+        case 'link':
+            return <link {...attrs}/>;
+        case 'style':
+            return <style {...attrs} innerHTML={children}/>;
+        case 'script':
+            if (attrs && attrs.src) {
+                return <script {...attrs}/>;
+            }
+            if (typeof children === 'string')
+                return <script {...attrs} innerHTML={children}/>;
+            return null;
+        default:
+            return null;
+    }
+}
+//# sourceMappingURL=Asset.jsx.map

package/dist/source/Asset.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Asset.jsx","sourceRoot":"","sources":["../../src/Asset.tsx"],"names":[],"mappings":"AAEA,MAAM,UAAU,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAoB;IAC9D,QAAQ,GAAG,EAAE,CAAC;QACZ,KAAK,OAAO;YACV,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAA;QAC7C,KAAK,MAAM;YACT,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,EAAG,CAAA;QAC5B,KAAK,MAAM;YACT,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,EAAG,CAAA;QAC5B,KAAK,OAAO;YACV,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAG,CAAA;QAClD,KAAK,QAAQ;YACX,IAAK,KAAa,IAAK,KAAa,CAAC,GAAG,EAAE,CAAC;gBACzC,OAAO,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,EAAG,CAAA;YAC9B,CAAC;YACD,IAAI,OAAO,QAAQ,KAAK,QAAQ;gBAC9B,OAAO,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAG,CAAA;YACnD,OAAO,IAAI,CAAA;QACb;YACE,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC"}

package/dist/source/CatchBoundary.d.ts

@@ -0,0 +1,19 @@
+import * as Vue from 'vue';
+import type { ErrorRouteComponent } from './route';
+export declare function CatchBoundary(props: {
+    getResetKey: () => number | string;
+    children: Vue.VNode;
+    errorComponent?: ErrorRouteComponent;
+    onCatch?: (error: Error) => void;
+}): Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}>;
+export declare const ErrorComponent: Vue.DefineComponent<Vue.ExtractPropTypes<{
+    error: ObjectConstructor;
+    reset: FunctionConstructor;
+}>, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+    error: ObjectConstructor;
+    reset: FunctionConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;

package/dist/source/CatchBoundary.jsx

@@ -0,0 +1,134 @@
+import * as Vue from 'vue';
+// Create a Vue error boundary component
+const VueErrorBoundary = Vue.defineComponent({
+    name: 'VueErrorBoundary',
+    props: {
+        onError: Function,
+        resetKey: [String, Number],
+    },
+    emits: ['catch'],
+    setup(props, { slots }) {
+        const error = Vue.ref(null);
+        const resetFn = Vue.ref(null);
+        const reset = () => {
+            error.value = null;
+        };
+        // Watch for changes in the reset key
+        Vue.watch(() => props.resetKey, (newKey, oldKey) => {
+            if (newKey !== oldKey && error.value) {
+                reset();
+            }
+        });
+        // Capture errors from child components
+        Vue.onErrorCaptured((err) => {
+            // If the error is a Promise (thrown for Suspense), don't treat it as an error
+            // Just ignore it - Suspense will handle it
+            if (err instanceof Promise ||
+                (err && typeof err.then === 'function')) {
+                return false; // Prevent from propagating as an error, but don't set error state
+            }
+            error.value = err;
+            resetFn.value = reset;
+            // Call the onError callback if provided
+            if (props.onError) {
+                props.onError(err);
+            }
+            // Prevent the error from propagating further
+            return false;
+        });
+        return () => {
+            // If there's an error, render the fallback
+            if (error.value && slots.fallback) {
+                return slots.fallback({
+                    error: error.value,
+                    reset,
+                });
+            }
+            // Otherwise render the default slot
+            return slots.default && slots.default();
+        };
+    },
+});
+// Main CatchBoundary component
+export function CatchBoundary(props) {
+    // Create a component to use in the template
+    const CatchBoundaryWrapper = Vue.defineComponent({
+        name: 'CatchBoundaryWrapper',
+        inheritAttrs: false,
+        setup() {
+            const resetKey = Vue.computed(() => props.getResetKey());
+            return () => {
+                // Always use our default component as a safe fallback
+                const defaultErrorComponent = ErrorComponent;
+                return Vue.h(VueErrorBoundary, {
+                    resetKey: resetKey.value,
+                    onError: props.onCatch,
+                }, {
+                    default: () => props.children,
+                    fallback: ({ error, reset }) => {
+                        // Safely render the error component - either the provided one or the default
+                        if (props.errorComponent) {
+                            // Use the provided error component
+                            return Vue.h(props.errorComponent, { error, reset });
+                        }
+                        else {
+                            // Use the default error component
+                            return Vue.h(defaultErrorComponent, { error, reset });
+                        }
+                    },
+                });
+            };
+        },
+    });
+    return Vue.h(CatchBoundaryWrapper);
+}
+// Error component
+export const ErrorComponent = Vue.defineComponent({
+    name: 'ErrorComponent',
+    props: {
+        error: Object,
+        reset: Function,
+    },
+    setup(props) {
+        const show = Vue.ref(process.env.NODE_ENV !== 'production');
+        const toggleShow = () => {
+            show.value = !show.value;
+        };
+        return () => Vue.h('div', { style: { padding: '.5rem', maxWidth: '100%' } }, [
+            Vue.h('div', { style: { display: 'flex', alignItems: 'center', gap: '.5rem' } }, [
+                Vue.h('strong', { style: { fontSize: '1rem' } }, 'Something went wrong!'),
+                Vue.h('button', {
+                    style: {
+                        appearance: 'none',
+                        fontSize: '.6em',
+                        border: '1px solid currentColor',
+                        padding: '.1rem .2rem',
+                        fontWeight: 'bold',
+                        borderRadius: '.25rem',
+                    },
+                    onClick: toggleShow,
+                }, show.value ? 'Hide Error' : 'Show Error'),
+            ]),
+            Vue.h('div', { style: { height: '.25rem' } }),
+            show.value
+                ? Vue.h('div', {}, [
+                    Vue.h('pre', {
+                        style: {
+                            fontSize: '.7em',
+                            border: '1px solid red',
+                            borderRadius: '.25rem',
+                            padding: '.3rem',
+                            color: 'red',
+                            overflow: 'auto',
+                        },
+                    }, [
+                        props.error?.message
+                            ? Vue.h('code', {}, props.error.message)
+                            : null,
+                    ]),
+                ])
+                : null,
+        ]);
+    },
+});
+//# sourceMappingURL=CatchBoundary.jsx.map

package/dist/source/CatchBoundary.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CatchBoundary.jsx","sourceRoot":"","sources":["../../src/CatchBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAA;AAS1B,wCAAwC;AACxC,MAAM,gBAAgB,GAAG,GAAG,CAAC,eAAe,CAAC;IAC3C,IAAI,EAAE,kBAAkB;IACxB,KAAK,EAAE;QACL,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;KAC3B;IACD,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,CAAe,IAAI,CAAC,CAAA;QACzC,MAAM,OAAO,GAAG,GAAG,CAAC,GAAG,CAAsB,IAAI,CAAC,CAAA;QAElD,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAA;QACpB,CAAC,CAAA;QAED,qCAAqC;QACrC,GAAG,CAAC,KAAK,CACP,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;YACjB,IAAI,MAAM,KAAK,MAAM,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;gBACrC,KAAK,EAAE,CAAA;YACT,CAAC;QACH,CAAC,CACF,CAAA;QAED,uCAAuC;QACvC,GAAG,CAAC,eAAe,CAAC,CAAC,GAAU,EAAE,EAAE;YACjC,8EAA8E;YAC9E,2CAA2C;YAC3C,IACE,GAAG,YAAY,OAAO;gBACtB,CAAC,GAAG,IAAI,OAAQ,GAAW,CAAC,IAAI,KAAK,UAAU,CAAC,EAChD,CAAC;gBACD,OAAO,KAAK,CAAA,CAAC,kEAAkE;YACjF,CAAC;YAED,KAAK,CAAC,KAAK,GAAG,GAAG,CAAA;YACjB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;YAErB,wCAAwC;YACxC,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;gBAClB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;YACpB,CAAC;YAED,6CAA6C;YAC7C,OAAO,KAAK,CAAA;QACd,CAAC,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE;YACV,2CAA2C;YAC3C,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBAClC,OAAO,KAAK,CAAC,QAAQ,CAAC;oBACpB,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,KAAK;iBACN,CAAC,CAAA;YACJ,CAAC;YAED,oCAAoC;YACpC,OAAO,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAA;QACzC,CAAC,CAAA;IACH,CAAC;CACF,CAAC,CAAA;AAEF,+BAA+B;AAC/B,MAAM,UAAU,aAAa,CAAC,KAK7B;IACC,4CAA4C;IAC5C,MAAM,oBAAoB,GAAG,GAAG,CAAC,eAAe,CAAC;QAC/C,IAAI,EAAE,sBAAsB;QAC5B,YAAY,EAAE,KAAK;QACnB,KAAK;YACH,MAAM,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAA;YAExD,OAAO,GAAG,EAAE;gBACV,sDAAsD;gBACtD,MAAM,qBAAqB,GAAG,cAAc,CAAA;gBAE5C,OAAO,GAAG,CAAC,CAAC,CACV,gBAAgB,EAChB;oBACE,QAAQ,EAAE,QAAQ,CAAC,KAAK;oBACxB,OAAO,EAAE,KAAK,CAAC,OAAO;iBACvB,EACD;oBACE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ;oBAC7B,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAuB,EAAE,EAAE;wBAClD,6EAA6E;wBAC7E,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;4BACzB,mCAAmC;4BACnC,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;wBACtD,CAAC;6BAAM,CAAC;4BACN,kCAAkC;4BAClC,OAAO,GAAG,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;wBACvD,CAAC;oBACH,CAAC;iBACF,CACF,CAAA;YACH,CAAC,CAAA;QACH,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,GAAG,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAA;AACpC,CAAC;AAED,kBAAkB;AAClB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC,eAAe,CAAC;IAChD,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;KAChB;IACD,KAAK,CAAC,KAAK;QACT,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAA;QAE3D,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAA;QAC1B,CAAC,CAAA;QAED,OAAO,GAAG,EAAE,CACV,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;YAC9D,GAAG,CAAC,CAAC,CACH,KAAK,EACL,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAClE;gBACE,GAAG,CAAC,CAAC,CACH,QAAQ,EACR,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAC/B,uBAAuB,CACxB;gBACD,GAAG,CAAC,CAAC,CACH,QAAQ,EACR;oBACE,KAAK,EAAE;wBACL,UAAU,EAAE,MAAM;wBAClB,QAAQ,EAAE,MAAM;wBAChB,MAAM,EAAE,wBAAwB;wBAChC,OAAO,EAAE,aAAa;wBACtB,UAAU,EAAE,MAAM;wBAClB,YAAY,EAAE,QAAQ;qBACvB;oBACD,OAAO,EAAE,UAAU;iBACpB,EACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CACzC;aACF,CACF;YACD,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;YAC7C,IAAI,CAAC,KAAK;gBACR,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,EAAE;oBACf,GAAG,CAAC,CAAC,CACH,KAAK,EACL;wBACE,KAAK,EAAE;4BACL,QAAQ,EAAE,MAAM;4BAChB,MAAM,EAAE,eAAe;4BACvB,YAAY,EAAE,QAAQ;4BACtB,OAAO,EAAE,OAAO;4BAChB,KAAK,EAAE,KAAK;4BACZ,QAAQ,EAAE,MAAM;yBACjB;qBACF,EACD;wBACE,KAAK,CAAC,KAAK,EAAE,OAAO;4BAClB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;4BACxC,CAAC,CAAC,IAAI;qBACT,CACF;iBACF,CAAC;gBACJ,CAAC,CAAC,IAAI;SACT,CAAC,CAAA;IACN,CAAC;CACF,CAAC,CAAA"}

package/dist/source/ClientOnly.d.ts

@@ -0,0 +1,67 @@
+import * as Vue from 'vue';
+export interface ClientOnlyProps {
+    /**
+     * The children to render when the JS is loaded.
+     */
+    children?: Vue.VNode;
+    /**
+     * The fallback component to render if the JS is not yet loaded.
+     */
+    fallback?: Vue.VNode;
+}
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ *
+ * @example
+ * Render a Chart component if JS loads, renders a simple FakeChart
+ * component server-side or if there is no JS. The FakeChart can have only the
+ * UI without the behavior or be a loading spinner or skeleton.
+ *
+ * ```tsx
+ * return (
+ *   <ClientOnly fallback={<FakeChart />}>
+ *     <Chart />
+ *   </ClientOnly>
+ * )
+ * ```
+ */
+export declare const ClientOnly: Vue.DefineComponent<Vue.ExtractPropTypes<{
+    fallback: {
+        type: Vue.PropType<Vue.VNode>;
+        default: null;
+    };
+}>, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}> | Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+    fallback: {
+        type: Vue.PropType<Vue.VNode>;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    fallback: Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+        [key: string]: any;
+    }>;
+}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * When doing Server-Side Rendering, the result will always be false.
+ * When doing Client-Side Rendering, the result will always be false on the
+ * first render and true from then on. Even if a new component renders it will
+ * always start with true.
+ *
+ * @example
+ * ```tsx
+ * // Disable a button that needs JS to work.
+ * const hydrated = useHydrated()
+ * return (
+ *   <button type="button" disabled={!hydrated.value} onClick={doSomethingCustom}>
+ *     Click me
+ *   </button>
+ * )
+ * ```
+ * @returns True if the JS has been hydrated already, false otherwise.
+ */
+export declare function useHydrated(): Vue.Ref<boolean>;

package/dist/source/ClientOnly.jsx

@@ -0,0 +1,63 @@
+import * as Vue from 'vue';
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ *
+ * @example
+ * Render a Chart component if JS loads, renders a simple FakeChart
+ * component server-side or if there is no JS. The FakeChart can have only the
+ * UI without the behavior or be a loading spinner or skeleton.
+ *
+ * ```tsx
+ * return (
+ *   <ClientOnly fallback={<FakeChart />}>
+ *     <Chart />
+ *   </ClientOnly>
+ * )
+ * ```
+ */
+export const ClientOnly = Vue.defineComponent({
+    name: 'ClientOnly',
+    props: {
+        fallback: {
+            type: Object,
+            default: null,
+        },
+    },
+    setup(props, { slots }) {
+        const hydrated = useHydrated();
+        return () => {
+            if (hydrated.value) {
+                return slots.default?.();
+            }
+            return props.fallback ?? null;
+        };
+    },
+});
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * When doing Server-Side Rendering, the result will always be false.
+ * When doing Client-Side Rendering, the result will always be false on the
+ * first render and true from then on. Even if a new component renders it will
+ * always start with true.
+ *
+ * @example
+ * ```tsx
+ * // Disable a button that needs JS to work.
+ * const hydrated = useHydrated()
+ * return (
+ *   <button type="button" disabled={!hydrated.value} onClick={doSomethingCustom}>
+ *     Click me
+ *   </button>
+ * )
+ * ```
+ * @returns True if the JS has been hydrated already, false otherwise.
+ */
+export function useHydrated() {
+    const hydrated = Vue.ref(false);
+    Vue.onMounted(() => {
+        hydrated.value = true;
+    });
+    return hydrated;
+}
+//# sourceMappingURL=ClientOnly.jsx.map

package/dist/source/ClientOnly.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly.jsx","sourceRoot":"","sources":["../../src/ClientOnly.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAA;AAa1B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,eAAe,CAAC;IAC5C,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE;QACL,QAAQ,EAAE;YACR,IAAI,EAAE,MAAiC;YACvC,OAAO,EAAE,IAAI;SACd;KACF;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;QAC9B,OAAO,GAAG,EAAE;YACV,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACnB,OAAO,KAAK,CAAC,OAAO,EAAE,EAAE,CAAA;YAC1B,CAAC;YACD,OAAO,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAA;QAC/B,CAAC,CAAA;IACH,CAAC;CACF,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,WAAW;IACzB,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IAC/B,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAA;IACvB,CAAC,CAAC,CAAA;IACF,OAAO,QAAQ,CAAA;AACjB,CAAC"}

package/dist/source/HeadContent.d.ts

@@ -0,0 +1,10 @@
+import * as Vue from 'vue';
+import type { RouterManagedTag } from '@tanstack/router-core';
+export declare const useTags: () => () => RouterManagedTag[];
+/**
+ * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
+ * It should be rendered in the `<head>` of your document.
+ */
+export declare const HeadContent: 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/source/HeadContent.jsx

@@ -0,0 +1,133 @@
+import * as Vue from 'vue';
+import { Asset } from './Asset';
+import { useRouter } from './useRouter';
+import { useRouterState } from './useRouterState';
+export const useTags = () => {
+    const router = useRouter();
+    const routeMeta = useRouterState({
+        select: (state) => {
+            return state.matches.map((match) => match.meta).filter(Boolean);
+        },
+    });
+    const meta = Vue.computed(() => {
+        const resultMeta = [];
+        const metaByAttribute = {};
+        let title;
+        [...routeMeta.value].reverse().forEach((metas) => {
+            ;
+            [...metas].reverse().forEach((m) => {
+                if (!m)
+                    return;
+                if (m.title) {
+                    if (!title) {
+                        title = {
+                            tag: 'title',
+                            children: m.title,
+                        };
+                    }
+                }
+                else {
+                    const attribute = m.name ?? m.property;
+                    if (attribute) {
+                        if (metaByAttribute[attribute]) {
+                            return;
+                        }
+                        else {
+                            metaByAttribute[attribute] = true;
+                        }
+                    }
+                    resultMeta.push({
+                        tag: 'meta',
+                        attrs: {
+                            ...m,
+                        },
+                    });
+                }
+            });
+        });
+        if (title) {
+            resultMeta.push(title);
+        }
+        resultMeta.reverse();
+        return resultMeta;
+    });
+    const links = useRouterState({
+        select: (state) => state.matches
+            .map((match) => match.links)
+            .filter(Boolean)
+            .flat(1)
+            .map((link) => ({
+            tag: 'link',
+            attrs: {
+                ...link,
+            },
+        })),
+    });
+    const preloadMeta = useRouterState({
+        select: (state) => {
+            const preloadMeta = [];
+            state.matches
+                .map((match) => router.looseRoutesById[match.routeId])
+                .forEach((route) => router.ssr?.manifest?.routes[route.id]?.preloads
+                ?.filter(Boolean)
+                .forEach((preload) => {
+                preloadMeta.push({
+                    tag: 'link',
+                    attrs: {
+                        rel: 'modulepreload',
+                        href: preload,
+                    },
+                });
+            }));
+            return preloadMeta;
+        },
+    });
+    const headScripts = useRouterState({
+        select: (state) => state.matches
+            .map((match) => match.headScripts)
+            .flat(1)
+            .filter(Boolean).map(({ children, ...script }) => ({
+            tag: 'script',
+            attrs: {
+                ...script,
+            },
+            children,
+        })),
+    });
+    return () => uniqBy([
+        ...meta.value,
+        ...preloadMeta.value,
+        ...links.value,
+        ...headScripts.value,
+    ], (d) => {
+        return JSON.stringify(d);
+    });
+};
+/**
+ * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
+ * It should be rendered in the `<head>` of your document.
+ */
+export const HeadContent = Vue.defineComponent({
+    name: 'HeadContent',
+    setup() {
+        const tags = useTags();
+        return () => {
+            return tags().map((tag) => Vue.h(Asset, {
+                ...tag,
+                key: `tsr-meta-${JSON.stringify(tag)}`,
+            }));
+        };
+    },
+});
+function uniqBy(arr, fn) {
+    const seen = new Set();
+    return arr.filter((item) => {
+        const key = fn(item);
+        if (seen.has(key)) {
+            return false;
+        }
+        seen.add(key);
+        return true;
+    });
+}
+//# sourceMappingURL=HeadContent.jsx.map