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'