@tanstack/vue-router 0.0.1 → 1.140.0

package/src/Matches.tsx

@@ -0,0 +1,349 @@
+import * as Vue from 'vue'
+import warning from 'tiny-warning'
+import { CatchBoundary } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import { Transitioner } from './Transitioner'
+import { matchContext } from './matchContext'
+import { Match } from './Match'
+import type {
+  AnyRouter,
+  DeepPartial,
+  ErrorComponentProps,
+  MakeOptionalPathParams,
+  MakeOptionalSearchParams,
+  MakeRouteMatchUnion,
+  MaskOptions,
+  MatchRouteOptions,
+  NoInfer,
+  RegisteredRouter,
+  ResolveRelativePath,
+  ResolveRoute,
+  RouteByPath,
+  RouterState,
+  ToSubOptionsProps,
+} from '@tanstack/router-core'
+
+// Define a type for the error component function
+type ErrorRouteComponentType = (props: ErrorComponentProps) => Vue.VNode
+
+declare module '@tanstack/router-core' {
+  export interface RouteMatchExtensions {
+    meta?: Array<Vue.ComponentOptions['meta'] | undefined>
+    links?: Array<Vue.ComponentOptions['link'] | undefined>
+    scripts?: Array<Vue.ComponentOptions['script'] | undefined>
+    headScripts?: Array<Vue.ComponentOptions['script'] | undefined>
+  }
+}
+
+// Create a component that renders both the Transitioner and MatchesInner
+const MatchesContent = Vue.defineComponent({
+  name: 'MatchesContent',
+  setup() {
+    return () =>
+      Vue.h(Vue.Fragment, null, [Vue.h(Transitioner), Vue.h(MatchesInner)])
+  },
+})
+
+export const Matches = Vue.defineComponent({
+  name: 'Matches',
+  setup() {
+    const router = useRouter()
+
+    return () => {
+      const pendingElement = router?.options?.defaultPendingComponent
+        ? Vue.h(router.options.defaultPendingComponent)
+        : null
+
+      // Do not render a root Suspense during SSR or hydrating from SSR
+      const inner =
+        router?.isServer || (typeof document !== 'undefined' && router?.ssr)
+          ? Vue.h(MatchesContent)
+          : Vue.h(
+              Vue.Suspense,
+              { fallback: pendingElement },
+              {
+                default: () => Vue.h(MatchesContent),
+              },
+            )
+
+      return router?.options?.InnerWrap
+        ? Vue.h(router.options.InnerWrap, null, { default: () => inner })
+        : inner
+    }
+  },
+})
+
+// Create a simple error component function that matches ErrorRouteComponent
+const errorComponentFn: ErrorRouteComponentType = (
+  props: ErrorComponentProps,
+) => {
+  return Vue.h('div', { class: 'error' }, [
+    Vue.h('h1', null, 'Error'),
+    Vue.h('p', null, props.error.message || String(props.error)),
+    Vue.h('button', { onClick: props.reset }, 'Try Again'),
+  ])
+}
+
+const MatchesInner = Vue.defineComponent({
+  name: 'MatchesInner',
+  setup() {
+    const router = useRouter()
+
+    const matchId = useRouterState({
+      select: (s) => {
+        return s.matches[0]?.id
+      },
+    })
+
+    const resetKey = useRouterState({
+      select: (s) => s.loadedAt,
+    })
+
+    // Create a ref for the match id to provide
+    const matchIdRef = Vue.computed(() => matchId.value)
+
+    // Provide the matchId for child components using the InjectionKey
+    Vue.provide(matchContext, matchIdRef)
+
+    return () => {
+      // Generate a placeholder element if matchId.value is not present
+      const childElement = matchId.value
+        ? Vue.h(Match, { matchId: matchId.value })
+        : Vue.h('div')
+
+      // If disableGlobalCatchBoundary is true, don't wrap in CatchBoundary
+      if (router.options.disableGlobalCatchBoundary) {
+        return childElement
+      }
+
+      return Vue.h(CatchBoundary, {
+        getResetKey: () => resetKey.value,
+        errorComponent: errorComponentFn,
+        onCatch: (error: Error) => {
+          warning(
+            false,
+            `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+          )
+          warning(false, error.message || error.toString())
+        },
+        children: childElement,
+      })
+    }
+  },
+})
+
+export type UseMatchRouteOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+> = ToSubOptionsProps<TRouter, TFrom, TTo> &
+  DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> &
+  DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> &
+  MaskOptions<TRouter, TMaskFrom, TMaskTo> &
+  MatchRouteOptions
+
+export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
+  const router = useRouter()
+
+  // Track state changes to trigger re-computation
+  // Use multiple state values like React does for complete reactivity
+  const routerState = useRouterState({
+    select: (s) => ({
+      locationHref: s.location.href,
+      resolvedLocationHref: s.resolvedLocation?.href,
+      status: s.status,
+    }),
+  })
+
+  return <
+    const TFrom extends string = string,
+    const TTo extends string | undefined = undefined,
+    const TMaskFrom extends string = TFrom,
+    const TMaskTo extends string = '',
+  >(
+    opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+  ): Vue.Ref<
+    false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']
+  > => {
+    const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
+
+    const matchRoute = Vue.computed(() => {
+      // Access routerState to establish dependency
+
+      routerState.value
+      return router.matchRoute(rest as any, {
+        pending,
+        caseSensitive,
+        fuzzy,
+        includeSearch,
+      })
+    })
+
+    return matchRoute
+  }
+}
+
+export type MakeMatchRouteOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {
+  // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+  children?:
+    | ((
+        params?: RouteByPath<
+          TRouter['routeTree'],
+          ResolveRelativePath<TFrom, NoInfer<TTo>>
+        >['types']['allParams'],
+      ) => Vue.VNode)
+    | Vue.VNode
+}
+
+// Create a type for the MatchRoute component that includes the generics
+export interface MatchRouteComponentType {
+  <
+    TRouter extends AnyRouter = RegisteredRouter,
+    TFrom extends string = string,
+    TTo extends string | undefined = undefined,
+  >(
+    props: MakeMatchRouteOptions<TRouter, TFrom, TTo>,
+  ): Vue.VNode
+  new (): {
+    $props: {
+      from?: string
+      to?: string
+      fuzzy?: boolean
+      caseSensitive?: boolean
+      includeSearch?: boolean
+      pending?: boolean
+    }
+  }
+}
+
+export const MatchRoute = Vue.defineComponent({
+  name: 'MatchRoute',
+  props: {
+    // Define props to match MakeMatchRouteOptions
+    from: {
+      type: String,
+      required: false,
+    },
+    to: {
+      type: String,
+      required: false,
+    },
+    fuzzy: {
+      type: Boolean,
+      required: false,
+    },
+    caseSensitive: {
+      type: Boolean,
+      required: false,
+    },
+    includeSearch: {
+      type: Boolean,
+      required: false,
+    },
+    pending: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  setup(props, { slots }) {
+    const status = useRouterState({
+      select: (s) => s.status,
+    })
+
+    return () => {
+      if (!status.value) return null
+
+      const matchRoute = useMatchRoute()
+      const params = matchRoute(props as any).value as boolean
+
+      // Create a component that renders the slot in a reactive manner
+      if (!params || !slots.default) {
+        return null
+      }
+
+      // For function slots, pass the params
+      if (typeof slots.default === 'function') {
+        // Use h to create a wrapper component that will call the slot function
+        return Vue.h(Vue.Fragment, null, slots.default(params))
+      }
+
+      // For normal slots, just render them
+      return Vue.h(Vue.Fragment, null, slots.default)
+    }
+  },
+}) as unknown as MatchRouteComponentType
+
+export interface UseMatchesBaseOptions<TRouter extends AnyRouter, TSelected> {
+  select?: (matches: Array<MakeRouteMatchUnion<TRouter>>) => TSelected
+}
+
+export type UseMatchesResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected
+
+export function useMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected>,
+): Vue.Ref<UseMatchesResult<TRouter, TSelected>> {
+  return useRouterState({
+    select: (state: RouterState<TRouter['routeTree']>) => {
+      const matches = state?.matches || []
+      return opts?.select
+        ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)
+        : matches
+    },
+  } as any) as Vue.Ref<UseMatchesResult<TRouter, TSelected>>
+}
+
+export function useParentMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected>,
+): Vue.Ref<UseMatchesResult<TRouter, TSelected>> {
+  // Use matchContext with proper type
+  const contextMatchId = Vue.inject<Vue.Ref<string | undefined>>(matchContext)
+  const safeMatchId = Vue.computed(() => contextMatchId?.value || '')
+
+  return useMatches({
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
+      matches = matches.slice(
+        0,
+        matches.findIndex((d) => d.id === safeMatchId.value),
+      )
+      return opts?.select ? opts.select(matches) : matches
+    },
+  } as any)
+}
+
+export function useChildMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected>,
+): Vue.Ref<UseMatchesResult<TRouter, TSelected>> {
+  // Use matchContext with proper type
+  const contextMatchId = Vue.inject<Vue.Ref<string | undefined>>(matchContext)
+  const safeMatchId = Vue.computed(() => contextMatchId?.value || '')
+
+  return useMatches({
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
+      matches = matches.slice(
+        matches.findIndex((d) => d.id === safeMatchId.value) + 1,
+      )
+      return opts?.select ? opts.select(matches) : matches
+    },
+  } as any)
+}

package/src/RouterProvider.tsx

@@ -0,0 +1,117 @@
+import * as Vue from 'vue'
+import { Matches } from './Matches'
+import { provideRouter } from './routerContext'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterOptions,
+} from '@tanstack/router-core'
+
+// Component that provides router context and renders children
+export 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 as AnyRouter
+    const restAttrs = attrs as Record<string, any>
+
+    // Allow the router to update options on the router instance
+    router.update({
+      ...router.options,
+      ...restAttrs,
+      context: {
+        ...router.options.context,
+        ...((restAttrs.context as Record<string, any>) || {}),
+      },
+    } as any)
+
+    // Provide router to all child components
+    provideRouter(router)
+
+    return () => {
+      // Get child content
+      const childContent = slots.default?.()
+
+      // If a Wrap component is specified in router options, use it
+      if (router.options.Wrap) {
+        const WrapComponent = router.options.Wrap
+        return Vue.h(WrapComponent, null, () => childContent)
+      }
+
+      // Otherwise just return the child content
+      return childContent
+    }
+  },
+})
+
+// The main router provider component that includes matches
+export 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 as Record<string, any>
+
+    return () => {
+      return Vue.h(
+        RouterContextProvider,
+        {
+          router: props.router,
+          ...restAttrs,
+        },
+        {
+          default: () => Vue.h(Matches),
+        },
+      )
+    }
+  },
+}) as unknown as {
+  <TRouter extends AnyRouter = RegisteredRouter>(
+    props: {
+      router: TRouter
+      routeTree?: TRouter['routeTree']
+    } & Record<string, any>,
+  ): Vue.VNode
+  new (): {
+    $props: {
+      router: AnyRouter
+      routeTree?: AnyRouter['routeTree']
+    }
+  }
+}
+
+export type RouterProps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+> = Omit<
+  RouterOptions<
+    TRouter['routeTree'],
+    NonNullable<TRouter['options']['trailingSlash']>,
+    false,
+    TRouter['history'],
+    TDehydrated
+  >,
+  'context'
+> & {
+  router: TRouter
+  context?: Partial<
+    RouterOptions<
+      TRouter['routeTree'],
+      NonNullable<TRouter['options']['trailingSlash']>,
+      false,
+      TRouter['history'],
+      TDehydrated
+    >['context']
+  >
+}

package/src/SafeFragment.tsx

@@ -0,0 +1,10 @@
+import * as Vue from 'vue'
+
+export const SafeFragment = Vue.defineComponent({
+  name: 'SafeFragment',
+  setup(_, { slots }) {
+    return () => {
+      return Vue.h(Vue.Fragment, null, slots.default?.())
+    }
+  },
+})

package/src/ScriptOnce.tsx

@@ -0,0 +1,30 @@
+import jsesc from 'jsesc'
+
+export function ScriptOnce({
+  children,
+  log,
+}: {
+  children: string
+  log?: boolean
+  sync?: boolean
+}) {
+  if (typeof document !== 'undefined') {
+    return null
+  }
+
+  return (
+    <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')}
+    />
+  )
+}

package/src/Scripts.tsx

@@ -0,0 +1,65 @@
+import { Asset } from './Asset'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export const Scripts = () => {
+  const router = useRouter()
+
+  const assetScripts = useRouterState({
+    select: (state) => {
+      const assetScripts: Array<RouterManagedTag> = []
+      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) => {
+              assetScripts.push({
+                tag: 'script',
+                attrs: asset.attrs,
+                children: asset.children,
+              } as any)
+            }),
+        )
+
+      return assetScripts
+    },
+  })
+
+  const scripts = useRouterState({
+    select: (state) => ({
+      scripts: (
+        state.matches
+          .map((match) => match.scripts!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+        },
+        children,
+      })),
+    }),
+  })
+
+  const allScripts = [
+    ...scripts.value.scripts,
+    ...assetScripts.value,
+  ] as Array<RouterManagedTag>
+
+  return (
+    <>
+      {allScripts.map((asset, i) => (
+        <Asset {...asset} key={i} />
+      ))}
+    </>
+  )
+}

package/src/ScrollRestoration.tsx

@@ -0,0 +1,69 @@
+import {
+  defaultGetScrollRestorationKey,
+  getCssSelector,
+  scrollRestorationCache,
+  setupScrollRestoration,
+} from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import type {
+  ParsedLocation,
+  ScrollRestorationEntry,
+  ScrollRestorationOptions,
+} from '@tanstack/router-core'
+
+function useScrollRestoration() {
+  const router = useRouter()
+  setupScrollRestoration(router, true)
+}
+
+/**
+ * @deprecated use createRouter's `scrollRestoration` option instead
+ */
+export function ScrollRestoration(_props: ScrollRestorationOptions) {
+  useScrollRestoration()
+
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(
+      "The ScrollRestoration component is deprecated. Use createRouter's `scrollRestoration` option instead.",
+    )
+  }
+
+  return null
+}
+
+export function useElementScrollRestoration(
+  options: (
+    | {
+        id: string
+        getElement?: () => Window | Element | undefined | null
+      }
+    | {
+        id?: string
+        getElement: () => Window | Element | undefined | null
+      }
+  ) & {
+    getKey?: (location: ParsedLocation) => string
+  },
+): ScrollRestorationEntry | undefined {
+  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]
+}