feat: support jsx and tsx for RouterLink and RouterView

Close #226

__tests__/mount.ts

@@ -12,6 +12,7 @@ import {
   App,
   VNode,
   shallowRef,
+  ComponentOptions,
 } from 'vue'
 import { compile } from '@vue/compiler-dom'
 import * as runtimeDom from '@vue/runtime-dom'
@@ -21,7 +22,7 @@ import { routeLocationKey } from '../src/injectionSymbols'
 export interface MountOptions {
   propsData: Record<string, any>
   provide: Record<string | symbol, any>
-  components: Record<string, Component>
+  components: ComponentOptions['components']
   slots: Record<string, string>
 }
 

src/RouterLink.ts

@@ -6,20 +6,20 @@ import {
   computed,
   reactive,
   unref,
-  Component,
+  VNodeProps,
 } from 'vue'
 import { RouteLocationRaw, VueUseOptions, RouteLocation } from './types'
 import { isSameLocationObject, isSameRouteRecord } from './location'
 import { routerKey, routeLocationKey } from './injectionSymbols'
 import { RouteRecord } from './matcher/types'
 
-interface LinkProps {
+export interface RouterLinkProps {
   to: RouteLocationRaw
-  // TODO: refactor using extra options allowed in router.push
+  // TODO: refactor using extra options allowed in router.push. Needs RFC
   replace?: boolean
 }
 
-type UseLinkOptions = VueUseOptions<LinkProps>
+type UseLinkOptions = VueUseOptions<RouterLinkProps>
 
 // TODO: we could allow currentRoute as a prop to expose `isActive` and
 // `isExactActive` behavior should go through an RFC
@@ -85,7 +85,7 @@ export function useLink(props: UseLinkOptions) {
   }
 }
 
-export const RouterLink = (defineComponent({
+export const RouterLinkImpl = defineComponent({
   name: 'RouterLink',
   props: {
     to: {
@@ -137,7 +137,15 @@ export const RouterLink = (defineComponent({
           )
     }
   },
-}) as unknown) as Component
+})
+
+// export the public type for h/tsx inference
+// also to avoid inline import() in generated d.ts files
+export const RouterLink = (RouterLinkImpl as any) as {
+  new (): {
+    $props: VNodeProps & RouterLinkProps
+  }
+}
 
 function guardEvent(e: MouseEvent) {
   // don't redirect with control keys

src/RouterView.ts

@@ -7,16 +7,22 @@ import {
   computed,
   ref,
   ComponentPublicInstance,
-  Component,
+  VNodeProps,
 } from 'vue'
-import { RouteLocationNormalizedLoaded } from './types'
+import { RouteLocationNormalizedLoaded, RouteLocationNormalized } from './types'
 import {
   matchedRouteKey,
   viewDepthKey,
   routeLocationKey,
 } from './injectionSymbols'
 
-export const RouterView = (defineComponent({
+export interface RouterViewProps {
+  name?: string
+  // allow looser type for user facing api
+  route?: RouteLocationNormalized
+}
+
+export const RouterViewImpl = defineComponent({
   name: 'RouterView',
   props: {
     name: {
@@ -97,4 +103,12 @@ export const RouterView = (defineComponent({
         : null
     }
   },
-}) as unknown) as Component
+})
+
+// export the public type for h/tsx inference
+// also to avoid inline import() in generated d.ts files
+export const RouterView = (RouterViewImpl as any) as {
+  new (): {
+    $props: VNodeProps & RouterViewProps
+  }
+}

src/index.ts

@@ -44,7 +44,7 @@ export {
 export { NavigationFailureType, NavigationFailure } from './errors'
 
 export { onBeforeRouteLeave, onBeforeRouteUpdate } from './navigationGuards'
-export { RouterLink, useLink } from './RouterLink'
-export { RouterView } from './RouterView'
+export { RouterLink, useLink, RouterLinkProps } from './RouterLink'
+export { RouterView, RouterViewProps } from './RouterView'
 
 export * from './useApi'

test-dts/components.test-d.tsx

@@ -0,0 +1,23 @@
+import { expectError, expectType } from 'tsd'
+import {
+  RouterLink,
+  RouterView,
+  createRouter,
+  createMemoryHistory,
+} from './index'
+
+let router = createRouter({
+  history: createMemoryHistory(),
+  routes: [],
+})
+
+// RouterLink
+expectError(<RouterLink />)
+expectType<JSX.Element>(<RouterLink to="/foo" replace />)
+expectType<JSX.Element>(<RouterLink to="/foo" />)
+expectType<JSX.Element>(<RouterLink to={{ path: '/foo' }} />)
+
+// RouterView
+expectType<JSX.Element>(<RouterView />)
+expectType<JSX.Element>(<RouterView name="foo" />)
+expectType<JSX.Element>(<RouterView route={router.currentRoute.value} />)