diff --git a/packages/router/__tests__/RouterLink.spec.ts b/packages/router/__tests__/RouterLink.spec.ts index e3d76b685..d3906033b 100644 --- a/packages/router/__tests__/RouterLink.spec.ts +++ b/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, }, 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: { diff --git a/packages/router/src/RouterLink.ts b/packages/router/src/RouterLink.ts index 1d18845d6..1dbaa7319 100644 --- a/packages/router/src/RouterLink.ts +++ b/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>) => 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>) => 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 diff --git a/packages/router/src/RouterView.ts b/packages/router/src/RouterView.ts index ad4d8f720..e1168ae09 100644 --- a/packages/router/src/RouterView.ts +++ b/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, }, + 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 & // due to functional component being no longer eager in Vue 3 diff --git a/packages/router/src/index.ts b/packages/router/src/index.ts index 816dd2c51..102697560 100644 --- a/packages/router/src/index.ts +++ b/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'