@tanstack/vue-router 0.0.1 → 1.140.1

package/dist/source/useSearch.jsx

@@ -0,0 +1,12 @@
+import { useMatch } from './useMatch';
+export 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;
+        },
+    });
+}
+//# sourceMappingURL=useSearch.jsx.map

package/dist/source/useSearch.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.jsx","sourceRoot":"","sources":["../../src/useSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AA6CrC,MAAM,UAAU,SAAS,CAOvB,IAMC;IAID,OAAO,QAAQ,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,IAAK;QAChB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,WAAW,EAAE,IAAI,CAAC,WAAW;QAC7B,MAAM,EAAE,CAAC,KAAU,EAAE,EAAE;YACrB,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAA;QAC/D,CAAC;KACF,CAAQ,CAAA;AACX,CAAC"}

package/dist/source/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/source/utils.js

@@ -0,0 +1,78 @@
+import * as Vue from 'vue';
+export const useLayoutEffect = typeof window !== 'undefined' ? Vue.effect : Vue.effect;
+export 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;
+    });
+};
+/**
+ * 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 function useIntersectionObserver(ref, callback, intersectionObserverOptions = {}, options = {}) {
+    const isIntersectionObserverAvailable = typeof IntersectionObserver === 'function';
+    const observerRef = Vue.ref(null);
+    // Use watchEffect with cleanup to properly manage the observer lifecycle
+    Vue.watchEffect((onCleanup) => {
+        const r = ref.value;
+        // Support both static boolean and function for disabled check
+        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 function splitProps(props, keys) {
+    // Get the specified props
+    const selectedProps = Vue.computed(() => {
+        return Object.fromEntries(keys.map((key) => [key, props[key]]));
+    });
+    // Get remaining props as attrs
+    const remainingAttrs = Vue.computed(() => {
+        const attrs = Vue.useAttrs();
+        return Object.fromEntries(Object.entries(attrs).filter(([key]) => !keys.includes(key)));
+    });
+    return [selectedProps, remainingAttrs];
+}
+//# sourceMappingURL=utils.js.map

package/dist/source/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,10 +1,80 @@
 {
   "name": "@tanstack/vue-router",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @tanstack/vue-router",
+  "version": "1.140.1",
+  "description": "Modern and scalable routing for Vue applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/router.git",
+    "directory": "packages/vue-router"
+  },
+  "homepage": "https://tanstack.com/router",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
-}
+    "vue",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "@tanstack/vue-store": "^0.8.0",
+    "jsesc": "^3.0.2",
+    "tiny-invariant": "^1.3.3",
+    "tiny-warning": "^1.0.3",
+    "@tanstack/history": "1.140.0",
+    "@tanstack/router-core": "1.140.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/vue": "^8.1.0",
+    "@types/jsesc": "^3.0.3",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "combinate": "^1.1.11",
+    "vue": "^3.5.25",
+    "zod": "^3.23.8"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test": "pnpm run test:unit",
+    "test:eslint": "eslint",
+    "test:types": "pnpm run test:unit .test-d.ts",
+    "test:unit": "vitest",
+    "test:unit:ui": "vitest --ui --watch",
+    "test:unit:dev": "pnpm run test:unit --watch --hideSkippedTests",
+    "test:perf": "vitest bench",
+    "test:perf:dev": "pnpm run test:perf --watch --hideSkippedTests",
+    "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+    "build": "vite build && tsc -p tsconfig.build.json"
+  }
+}

package/src/Asset.tsx

@@ -0,0 +1,23 @@
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export function Asset({ tag, attrs, children }: RouterManagedTag): any {
+  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 as any) && (attrs as any).src) {
+        return <script {...attrs} />
+      }
+      if (typeof children === 'string')
+        return <script {...attrs} innerHTML={children} />
+      return null
+    default:
+      return null
+  }
+}

package/src/CatchBoundary.tsx

@@ -0,0 +1,186 @@
+import * as Vue from 'vue'
+import type { ErrorRouteComponent } from './route'
+
+// Define the error component props interface
+interface ErrorComponentProps {
+  error: Error
+  reset: () => void
+}
+
+// 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<Error | null>(null)
+    const resetFn = Vue.ref<(() => void) | null>(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: Error) => {
+      // 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 as any).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: {
+  getResetKey: () => number | string
+  children: Vue.VNode
+  errorComponent?: ErrorRouteComponent
+  onCatch?: (error: Error) => void
+}) {
+  // 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 }: ErrorComponentProps) => {
+              // 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,
+      ])
+  },
+})

package/src/ClientOnly.tsx

@@ -0,0 +1,75 @@
+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 const ClientOnly = Vue.defineComponent({
+  name: 'ClientOnly',
+  props: {
+    fallback: {
+      type: Object as Vue.PropType<Vue.VNode>,
+      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(): Vue.Ref<boolean> {
+  const hydrated = Vue.ref(false)
+  Vue.onMounted(() => {
+    hydrated.value = true
+  })
+  return hydrated
+}

package/src/HeadContent.tsx

@@ -0,0 +1,159 @@
+import * as Vue from 'vue'
+
+import { Asset } from './Asset'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export const useTags = () => {
+  const router = useRouter()
+
+  const routeMeta = useRouterState({
+    select: (state) => {
+      return state.matches.map((match) => match.meta!).filter(Boolean)
+    },
+  })
+
+  const meta: Vue.Ref<Array<RouterManagedTag>> = Vue.computed(() => {
+    const resultMeta: Array<RouterManagedTag> = []
+    const metaByAttribute: Record<string, true> = {}
+    let title: RouterManagedTag | undefined
+    ;[...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,
+          },
+        })) as Array<RouterManagedTag>,
+  })
+
+  const preloadMeta = useRouterState({
+    select: (state) => {
+      const preloadMeta: Array<RouterManagedTag> = []
+
+      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) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+        },
+        children,
+      })),
+  })
+
+  return () =>
+    uniqBy(
+      [
+        ...meta.value,
+        ...preloadMeta.value,
+        ...links.value,
+        ...headScripts.value,
+      ] as Array<RouterManagedTag>,
+      (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<T>(arr: Array<T>, fn: (item: T) => string) {
+  const seen = new Set<string>()
+  return arr.filter((item) => {
+    const key = fn(item)
+    if (seen.has(key)) {
+      return false
+    }
+    seen.add(key)
+    return true
+  })
+}