@tanstack/vue-router 0.0.1 → 1.140.1

package/src/useMatch.tsx

@@ -0,0 +1,127 @@
+import * as Vue from 'vue'
+import { useRouterState } from './useRouterState'
+import { injectDummyMatch, injectMatch } from './matchContext'
+import type {
+  AnyRouter,
+  MakeRouteMatch,
+  MakeRouteMatchUnion,
+  RegisteredRouter,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+} from '@tanstack/router-core'
+
+export interface UseMatchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (
+    match: MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>,
+  ) => TSelected
+  shouldThrow?: TThrow
+}
+
+export type UseMatchRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchBaseOptions<TRouter, TFrom, true, true, TSelected>,
+) => Vue.Ref<UseMatchResult<TRouter, TFrom, true, TSelected>>
+
+export type UseMatchOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseMatchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>
+
+export type UseMatchResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> = unknown extends TSelected
+  ? TStrict extends true
+    ? MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>
+    : MakeRouteMatchUnion<TRouter>
+  : TSelected
+
+export function useMatch<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseMatchOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Vue.Ref<
+  ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  const nearestMatchId = opts.from ? injectDummyMatch() : injectMatch()
+
+  // Store to track pending error for deferred throwing
+  const pendingError = Vue.ref<Error | null>(null)
+
+  // Select the match from router state
+  const matchSelection = useRouterState({
+    select: (state: any) => {
+      const match = state.matches.find((d: any) =>
+        opts.from ? opts.from === d.routeId : d.id === nearestMatchId.value,
+      )
+
+      if (match === undefined) {
+        // During navigation transitions, check if the match exists in pendingMatches
+        const pendingMatch = state.pendingMatches?.find((d: any) =>
+          opts.from ? opts.from === d.routeId : d.id === nearestMatchId.value,
+        )
+
+        // If there's a pending match or we're transitioning, return undefined without throwing
+        if (pendingMatch || state.isTransitioning) {
+          pendingError.value = null
+          return undefined
+        }
+
+        // Store the error to throw later if shouldThrow is enabled
+        if (opts.shouldThrow ?? true) {
+          pendingError.value = new Error(
+            `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+          )
+        }
+
+        return undefined
+      }
+
+      pendingError.value = null
+      return opts.select ? opts.select(match) : match
+    },
+  } as any)
+
+  // Throw the error if we have one - this happens after the selector runs
+  // Using a computed so the error is thrown when the return value is accessed
+  const result = Vue.computed(() => {
+    // Check for pending error first
+    if (pendingError.value) {
+      throw pendingError.value
+    }
+    return matchSelection.value
+  })
+
+  // Also immediately throw if there's already an error from initial render
+  // This ensures errors are thrown even if the returned ref is never accessed
+  if (pendingError.value) {
+    throw pendingError.value
+  }
+
+  return result as any
+}

package/src/useNavigate.tsx

@@ -0,0 +1,40 @@
+import * as Vue from 'vue'
+import { useRouter } from './useRouter'
+import type {
+  AnyRouter,
+  FromPathOption,
+  NavigateOptions,
+  RegisteredRouter,
+  UseNavigateResult,
+} from '@tanstack/router-core'
+
+export function useNavigate<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDefaultFrom extends string = string,
+>(_defaultOpts?: {
+  from?: FromPathOption<TRouter, TDefaultFrom>
+}): UseNavigateResult<TDefaultFrom> {
+  const { navigate } = useRouter()
+
+  return ((options: NavigateOptions) => {
+    return navigate({ from: _defaultOpts?.from, ...options })
+  }) as UseNavigateResult<TDefaultFrom>
+}
+
+export function Navigate<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
+  const { navigate } = useRouter()
+
+  Vue.onMounted(() => {
+    navigate({
+      ...props,
+    })
+  })
+
+  return null
+}

package/src/useParams.tsx

@@ -0,0 +1,71 @@
+import { useMatch } from './useMatch'
+import type * as Vue from 'vue'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseParams,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseParamsResult,
+} from '@tanstack/router-core'
+
+export interface UseParamsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (params: ResolveUseParams<TRouter, TFrom, TStrict>) => TSelected
+  shouldThrow?: TThrow
+}
+
+export type UseParamsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseParamsBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>
+
+export type UseParamsRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseParamsBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected
+  >,
+) => Vue.Ref<UseParamsResult<TRouter, TFrom, true, TSelected>>
+
+export function useParams<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseParamsOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Vue.Ref<
+  ThrowOrOptional<UseParamsResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    select: (match: any) => {
+      return opts.select ? opts.select(match.params) : match.params
+    },
+  } as any) as any
+}

package/src/useRouteContext.ts

@@ -0,0 +1,31 @@
+import { useMatch } from './useMatch'
+import type * as Vue from 'vue'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  UseRouteContextBaseOptions,
+  UseRouteContextOptions,
+  UseRouteContextResult,
+} from '@tanstack/router-core'
+
+export type UseRouteContextRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseRouteContextBaseOptions<TRouter, TFrom, true, TSelected>,
+) => Vue.Ref<UseRouteContextResult<TRouter, TFrom, true, TSelected>>
+
+export function useRouteContext<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseRouteContextOptions<TRouter, TFrom, TStrict, TSelected>,
+): Vue.Ref<UseRouteContextResult<TRouter, TFrom, TStrict, TSelected>> {
+  return useMatch({
+    ...(opts as any),
+    select: (match) =>
+      opts.select ? opts.select(match.context) : match.context,
+  }) as any
+}

package/src/useRouter.tsx

@@ -0,0 +1,15 @@
+import * as Vue from 'vue'
+import warning from 'tiny-warning'
+import { getRouterContext } from './routerContext'
+import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
+
+export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
+  warn?: boolean
+}): TRouter {
+  const value = Vue.inject(getRouterContext() as any, null)
+  warning(
+    !((opts?.warn ?? true) && !value),
+    'useRouter must be used inside a <RouterProvider> component!',
+  )
+  return value as any
+}

package/src/useRouterState.tsx

@@ -0,0 +1,43 @@
+import { useStore } from '@tanstack/vue-store'
+import * as Vue from 'vue'
+import { useRouter } from './useRouter'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterState,
+} from '@tanstack/router-core'
+
+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 function useRouterState<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseRouterStateOptions<TRouter, TSelected>,
+): Vue.Ref<UseRouterStateResult<TRouter, TSelected>> {
+  const contextRouter = useRouter<TRouter>({
+    warn: opts?.router === undefined,
+  })
+  const router = opts?.router || contextRouter
+
+  // Return a safe default if router is undefined
+  if (!router || !router.__store) {
+    return Vue.ref(undefined) as Vue.Ref<
+      UseRouterStateResult<TRouter, TSelected>
+    >
+  }
+
+  return useStore(router.__store, (state) => {
+    if (opts?.select) return opts.select(state)
+
+    return state
+  }) as Vue.Ref<UseRouterStateResult<TRouter, TSelected>>
+}

package/src/useSearch.tsx

@@ -0,0 +1,71 @@
+import { useMatch } from './useMatch'
+import type * as Vue from 'vue'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseSearch,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseSearchResult,
+} from '@tanstack/router-core'
+
+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,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected
+  >,
+) => Vue.Ref<UseSearchResult<TRouter, TFrom, true, TSelected>>
+
+export 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>
+> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    select: (match: any) => {
+      return opts.select ? opts.select(match.search) : match.search
+    },
+  }) as any
+}

package/src/utils.ts

@@ -0,0 +1,111 @@
+import * as Vue from 'vue'
+
+export const useLayoutEffect =
+  typeof window !== 'undefined' ? Vue.effect : Vue.effect
+
+export const usePrevious = (fn: () => boolean) => {
+  return Vue.computed(
+    (
+      prev: { current: boolean | null; previous: boolean | null } = {
+        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<T extends Element>(
+  ref: Vue.Ref<T | null>,
+  callback: (entry: IntersectionObserverEntry | undefined) => void,
+  intersectionObserverOptions: IntersectionObserverInit = {},
+  options: { disabled?: boolean | (() => boolean) } = {},
+): Vue.Ref<IntersectionObserver | null> {
+  const isIntersectionObserverAvailable =
+    typeof IntersectionObserver === 'function'
+  const observerRef = Vue.ref<IntersectionObserver | null>(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<T extends Record<string, any>>(
+  props: T,
+  keys: Array<keyof T>,
+) {
+  // 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 as keyof T)),
+    )
+  })
+
+  return [selectedProps, remainingAttrs]
+}
+
+export type ParentProps<T = {}> = T & {
+  children?: Vue.VNode | Array<Vue.VNode> | string
+}