@tanstack/vue-router 0.0.1 → 1.140.0

package/src/Transitioner.tsx

@@ -0,0 +1,213 @@
+import * as Vue from 'vue'
+import {
+  getLocationChangeInfo,
+  handleHashScroll,
+  trimPathRight,
+} from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+import { usePrevious } from './utils'
+
+export 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 }) => isLoading,
+    })
+
+    // Track if we're in a transition - using a ref to track async transitions
+    const isTransitioning = Vue.ref(false)
+
+    // Track pending state changes
+    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)
+
+    // Implement startTransition similar to React/Solid
+    // Vue doesn't have a native useTransition like React 18, so we simulate it
+    // We also update the router state's isTransitioning flag so useMatch can check it
+    router.startTransition = (fn: () => void | Promise<void>) => {
+      isTransitioning.value = true
+      // Also update the router state so useMatch knows we're transitioning
+      try {
+        router.__store.setState((s) => ({ ...s, isTransitioning: true }))
+      } catch {
+        // Ignore errors if component is unmounted
+      }
+
+      // Helper to end the transition
+      const endTransition = () => {
+        // Use nextTick to ensure Vue has processed all reactive updates
+        Vue.nextTick(() => {
+          try {
+            isTransitioning.value = false
+            router.__store.setState((s) => ({ ...s, isTransitioning: false }))
+          } catch {
+            // Ignore errors if component is unmounted
+          }
+        })
+      }
+
+      // Execute the function synchronously
+      // The function internally may call startViewTransition which schedules async work
+      // via document.startViewTransition, but we don't need to wait for it here
+      // because Vue's reactivity will trigger re-renders when state changes
+      fn()
+
+      // End the transition on next tick to allow Vue to process reactive updates
+      endTransition()
+    }
+
+    // For Vue, we need to completely override startViewTransition because Vue's
+    // async rendering doesn't work well with the View Transitions API's requirement
+    // for synchronous DOM updates. The browser expects the DOM to be updated
+    // when the callback promise resolves, but Vue updates asynchronously.
+    //
+    // Our approach: Skip the actual view transition animation but still update state.
+    // This ensures navigation works correctly even without the visual transition.
+    // In the future, we could explore using viewTransition.captured like vue-view-transitions does.
+    router.startViewTransition = (fn: () => Promise<void>) => {
+      // Just run the callback directly without wrapping in document.startViewTransition
+      // This ensures the state updates happen and Vue can render them normally
+      fn()
+    }
+
+    // Subscribe to location changes
+    // and try to load the new location
+    let unsubscribe: (() => void) | undefined
+
+    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 })
+      }
+    })
+
+    // Track if component is mounted to prevent updates after unmount
+    const isMounted = Vue.ref(false)
+
+    Vue.onMounted(() => {
+      isMounted.value = true
+    })
+
+    Vue.onUnmounted(() => {
+      isMounted.value = false
+      if (unsubscribe) {
+        unsubscribe()
+      }
+    })
+
+    // Try to load the initial location
+    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()
+    })
+
+    // Setup watchers for emitting events
+    // All watchers check isMounted to prevent updates after unmount
+    Vue.watch(
+      () => isLoading.value,
+      (newValue) => {
+        if (!isMounted.value) return
+        try {
+          if (previousIsLoading.value.previous && !newValue) {
+            router.emit({
+              type: 'onLoad',
+              ...getLocationChangeInfo(router.state),
+            })
+          }
+        } catch {
+          // Ignore errors if component is unmounted
+        }
+      },
+    )
+
+    Vue.watch(isPagePending, (newValue) => {
+      if (!isMounted.value) return
+      try {
+        // emit onBeforeRouteMount
+        if (previousIsPagePending.value.previous && !newValue) {
+          router.emit({
+            type: 'onBeforeRouteMount',
+            ...getLocationChangeInfo(router.state),
+          })
+        }
+      } catch {
+        // Ignore errors if component is unmounted
+      }
+    })
+
+    Vue.watch(isAnyPending, (newValue) => {
+      if (!isMounted.value) return
+      try {
+        // The router was pending and now it's not
+        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 {
+        // Ignore errors if component is unmounted
+      }
+    })
+
+    return () => null
+  },
+})

package/src/awaited.tsx

@@ -0,0 +1,54 @@
+import * as Vue from 'vue'
+
+import { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'
+import type { DeferredPromise } from '@tanstack/router-core'
+
+export type AwaitOptions<T> = {
+  promise: Promise<T>
+}
+
+export function useAwaited<T>({
+  promise: _promise,
+}: AwaitOptions<T>): [T, DeferredPromise<T>] {
+  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]
+}
+
+export function Await<T>(
+  props: AwaitOptions<T> & {
+    fallback?: Vue.VNode
+    children: (result: T) => Vue.VNode
+  },
+) {
+  const data = Vue.ref<T | null>(null)
+  const error = Vue.ref<Error | null>(null)
+  const pending = Vue.ref(true)
+
+  Vue.watchEffect(async () => {
+    pending.value = true
+    try {
+      data.value = await props.promise
+    } catch (err) {
+      error.value = err as Error
+    } 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 as T)
+  })
+
+  return () => inner.value
+}

package/src/fileRoute.ts

@@ -0,0 +1,271 @@
+import warning from 'tiny-warning'
+import { createRoute } from './route'
+
+import { useMatch } from './useMatch'
+import { useLoaderDeps } from './useLoaderDeps'
+import { useLoaderData } from './useLoaderData'
+import { useSearch } from './useSearch'
+import { useParams } from './useParams'
+import { useNavigate } from './useNavigate'
+import { useRouter } from './useRouter'
+import type { UseParamsRoute } from './useParams'
+import type { UseMatchRoute } from './useMatch'
+import type { UseSearchRoute } from './useSearch'
+import type {
+  AnyContext,
+  AnyRoute,
+  AnyRouter,
+  Constrain,
+  ConstrainLiteral,
+  FileBaseRouteOptions,
+  FileRoutesByPath,
+  LazyRouteOptions,
+  Register,
+  RegisteredRouter,
+  ResolveParams,
+  Route,
+  RouteById,
+  RouteConstraints,
+  RouteIds,
+  RouteLoaderFn,
+  UpdatableRouteOptions,
+  UseNavigateResult,
+} from '@tanstack/router-core'
+import type { UseLoaderDepsRoute } from './useLoaderDeps'
+import type { UseLoaderDataRoute } from './useLoaderData'
+import type { UseRouteContextRoute } from './useRouteContext'
+
+export 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'] {
+  if (typeof path === 'object') {
+    return new FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>(path, {
+      silent: true,
+    }).createRoute(path) as any
+  }
+  return new FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>(path, {
+    silent: true,
+  }).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 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'],
+> {
+  silent?: boolean
+
+  constructor(
+    public path?: TFilePath,
+    _opts?: { silent: boolean },
+  ) {
+    this.silent = _opts?.silent
+  }
+
+  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
+  > => {
+    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 as any)
+    ;(route as any).isRoot = false
+    return route as any
+  }
+}
+
+/**
+  @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 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 {
+  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 as any
+}
+
+declare module '@tanstack/router-core' {
+  export 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 class LazyRoute<TRoute extends AnyRoute> {
+  options: {
+    id: string
+  } & LazyRouteOptions
+
+  constructor(
+    opts: {
+      id: string
+    } & LazyRouteOptions,
+  ) {
+    this.options = opts
+  }
+
+  useMatch: UseMatchRoute<TRoute['id']> = (opts) => {
+    return useMatch({
+      select: opts?.select,
+      from: this.options.id,
+    } as any) as any
+  }
+
+  useRouteContext: UseRouteContextRoute<TRoute['id']> = (opts) => {
+    return useMatch({
+      from: this.options.id,
+      select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
+    }) as any
+  }
+
+  useSearch: UseSearchRoute<TRoute['id']> = (opts) => {
+    return useSearch({
+      select: opts?.select,
+      from: this.options.id,
+    } as any) as any
+  }
+
+  useParams: UseParamsRoute<TRoute['id']> = (opts) => {
+    return useParams({
+      select: opts?.select,
+      from: this.options.id,
+    } as any) as any
+  }
+
+  useLoaderDeps: UseLoaderDepsRoute<TRoute['id']> = (opts) => {
+    return useLoaderDeps({ ...opts, from: this.options.id } as any)
+  }
+
+  useLoaderData: UseLoaderDataRoute<TRoute['id']> = (opts) => {
+    return useLoaderData({ ...opts, from: this.options.id } as any)
+  }
+
+  useNavigate = (): UseNavigateResult<TRoute['fullPath']> => {
+    const router = useRouter()
+    return useNavigate({ from: router.routesById[this.options.id].fullPath })
+  }
+}
+
+export function createLazyRoute<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TId extends string = string,
+  TRoute extends AnyRoute = RouteById<TRouter['routeTree'], TId>,
+>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {
+  return (opts: LazyRouteOptions) => {
+    return new LazyRoute<TRoute>({
+      id: id,
+      ...opts,
+    })
+  }
+}
+export function createLazyFileRoute<
+  TFilePath extends keyof FileRoutesByPath,
+  TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'],
+>(id: TFilePath): (opts: LazyRouteOptions) => LazyRoute<TRoute> {
+  if (typeof id === 'object') {
+    return new LazyRoute<TRoute>(id) as any
+  }
+
+  return (opts: LazyRouteOptions) => new LazyRoute<TRoute>({ id, ...opts })
+}

package/src/history.ts

@@ -0,0 +1,9 @@
+import type { HistoryLocation } from '@tanstack/history'
+
+declare module '@tanstack/history' {
+  interface HistoryState {
+    __tempLocation?: HistoryLocation
+    __tempKey?: string
+    __hashScrollIntoViewOptions?: boolean | ScrollIntoViewOptions
+  }
+}