WIP types: Add support for vue type helpers

packages/router/__tests__/RouterLink.spec.ts

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { RouterLink, RouterLinkProps } from '../src/RouterLink'
+import { RouterLink } from '../src/RouterLink'
 import {
  START_LOCATION_NORMALIZED,
  RouteQueryAndHash,
@@ -919,15 +919,13 @@ describe('RouterLink', () => {
  components: { RouterLink },
  name: 'AppLink',
 
- // @ts-expect-error
  props: {
- ...((RouterLink as any).props as RouterLinkProps),
+ ...RouterLink.props,
  inactiveClass: String as PropType<string>,
  },
 
  computed: {
  isExternalLink(): boolean {
- // @ts-expect-error
  return typeof this.to === 'string' && this.to.startsWith('http')
  },
  },
@@ -951,7 +949,7 @@ describe('RouterLink', () => {
  }
  router.resolve.mockReturnValueOnce(resolvedLocation)
 
- const wrapper = await mount(AppLink as any, {
+ const wrapper = await mount(AppLink, {
  propsData,
  global: {
  provide: {

packages/router/src/RouterLink.ts

@@ -6,11 +6,6 @@ import {
  computed,
  reactive,
  unref,
- VNode,
- UnwrapRef,
- VNodeProps,
- AllowedComponentProps,
- ComponentCustomProps,
  getCurrentInstance,
  watchEffect,
  // this is a workaround for https://github.com/microsoft/rushstack/issues/1050
@@ -25,6 +20,8 @@ import {
  RendererNode,
  // @ts-ignore
  ComponentOptionsMixin,
+ SlotsType,
+ UnwrapRef,
 } from 'vue'
 import {
  RouteLocationRaw,
@@ -174,9 +171,6 @@ export function useLink(props: UseLinkOptions) {
  }
  }
 
- /**
- * NOTE: update {@link _RouterLinkI}'s `$slots` type when updating this
- */
  return {
  route,
  href: computed(() => route.value.href),
@@ -207,6 +201,10 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
 
  useLink,
 
+ slots: {} as SlotsType<{
+ default?: (arg: UnwrapRef<ReturnType<typeof useLink>>) => any
+ }>,
+
  setup(props, { slots }) {
  const link = reactive(useLink(props))
  const { options } = inject(routerKey)!
@@ -217,11 +215,6 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
  options.linkActiveClass,
  'router-link-active'
  )]: link.isActive,
- // [getLinkClass(
- // props.inactiveClass,
- // options.linkInactiveClass,
- // 'router-link-inactive'
- // )]: !link.isExactActive,
  [getLinkClass(
  props.exactActiveClass,
  options.linkExactActiveClass,
@@ -256,39 +249,7 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
 /**
  * Component to render a link that triggers a navigation on click.
  */
-export const RouterLink: _RouterLinkI = RouterLinkImpl as any
-
-/**
- * Typed version of the `RouterLink` component. Its generic defaults to the typed router, so it can be inferred
- * automatically for JSX.
- *
- * @internal
- */
-export interface _RouterLinkI {
- new (): {
- $props: AllowedComponentProps &
- ComponentCustomProps &
- VNodeProps &
- RouterLinkProps
-
- $slots: {
- default?: ({
- route,
- href,
- isActive,
- isExactActive,
- navigate,
- }: UnwrapRef<ReturnType<typeof useLink>>) => VNode[]
- }
- }
-
- /**
- * Access to `useLink()` without depending on using vue-router
- *
- * @internal
- */
- useLink: typeof useLink
-}
+export const RouterLink = RouterLinkImpl
 
 function guardEvent(e: MouseEvent) {
  // don't redirect with control keys

packages/router/src/RouterView.ts

@@ -10,12 +10,11 @@ import {
  VNodeProps,
  getCurrentInstance,
  computed,
- AllowedComponentProps,
- ComponentCustomProps,
  watch,
  Slot,
  VNode,
  Component,
+ SlotsType,
 } from 'vue'
 import {
  RouteLocationNormalized,
@@ -54,6 +53,16 @@ export const RouterViewImpl = /*#__PURE__*/ defineComponent({
  route: Object as PropType<RouteLocationNormalizedLoaded>,
  },
 
+ slots: {} as SlotsType<{
+ default?: ({
+ Component,
+ route,
+ }: {
+ Component: VNode
+ route: RouteLocationNormalizedLoaded
+ }) => any
+ }>,
+
  // Better compat for @vue/compat users
  // https://github.com/vuejs/router/issues/1315
  compatConfig: { MODE: 3 },
@@ -217,24 +226,7 @@ function normalizeSlot(slot: Slot | undefined, data: any) {
 /**
  * Component to display the current route the user is at.
  */
-export const RouterView = RouterViewImpl as unknown as {
- new (): {
- $props: AllowedComponentProps &
- ComponentCustomProps &
- VNodeProps &
- RouterViewProps
-
- $slots: {
- default?: ({
- Component,
- route,
- }: {
- Component: VNode
- route: RouteLocationNormalizedLoaded
- }) => VNode[]
- }
- }
-}
+export const RouterView = RouterViewImpl
 
 // warn against deprecated usage with <transition> & <keep-alive>
 // due to functional component being no longer eager in Vue 3

packages/router/src/index.ts

@@ -83,11 +83,7 @@ export {
  loadRouteLocation,
 } from './navigationGuards'
 export { RouterLink, useLink } from './RouterLink'
-export type {
- _RouterLinkI,
- RouterLinkProps,
- UseLinkOptions,
-} from './RouterLink'
+export type { RouterLinkProps, UseLinkOptions } from './RouterLink'
 export { RouterView } from './RouterView'
 export type { RouterViewProps } from './RouterView'