fix: allow extra props of components in TSX

ktsn · ktsn · commit 7b3029ed458f · 2020-09-14T22:34:06.000+08:00
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -3,6 +3,9 @@ import {
   UnwrapRef,
   ComponentObjectPropsOptions,
   ExtractPropTypes,
+  AllowedComponentProps,
+  ComponentCustomProps,
+  VNodeProps,
 } from 'vue'
 
 import {
@@ -64,23 +67,22 @@ export type ExtractInstance<T> = T extends VueMixin<infer V> ? V : never
 export type NarrowEmit<T extends VueBase> = Omit<
   T,
   '$emit' | keyof ClassComponentHooks
->
+> &
   // Reassign class component hooks as mapped types makes prototype function (`mounted(): void`) instance function (`mounted: () => void`).
-  & ClassComponentHooks
-
-  // Exclude generic $emit type (`$emit: (event: string, ...args: any[]) => void`) if there are another intersected type.
-  & {
-    $emit: T['$emit'] extends (((event: string, ...args: any[]) => void) & infer R)
-    ? unknown extends R
-    ? T['$emit']
-    : R
-    : T['$emit']
+  ClassComponentHooks & {
+    // Exclude generic $emit type (`$emit: (event: string, ...args: any[]) => void`) if there are another intersected type.
+    $emit: T['$emit'] extends ((event: string, ...args: any[]) => void) &
+      infer R
+      ? unknown extends R
+        ? T['$emit']
+        : R
+      : T['$emit']
   }
 
 export type MixedVueBase<Mixins extends VueMixin[]> = Mixins extends (infer T)[]
   ? VueConstructor<
-    NarrowEmit<UnionToIntersection<ExtractInstance<T>> & Vue> & VueBase
-  >
+      NarrowEmit<UnionToIntersection<ExtractInstance<T>> & Vue> & VueBase
+    >
   : never
 
 export function mixins<T extends VueMixin[]>(...Ctors: T): MixedVueBase<T>
@@ -96,7 +98,7 @@ export function mixins(...Ctors: VueMixin[]): VueConstructor {
       Ctors.forEach((Ctor) => {
         const data = new (Ctor as VueConstructor)(...args)
         Object.keys(data).forEach((key) => {
-          ; (this as any)[key] = (data as any)[key]
+          ;(this as any)[key] = (data as any)[key]
         })
       })
     }
@@ -106,12 +108,22 @@ export function mixins(...Ctors: VueMixin[]): VueConstructor {
 export function props<
   PropNames extends string,
   Props = Readonly<{ [key in PropNames]?: any }>
->(propNames: PropNames[]): VueConstructor<Vue<Props> & Props>
+>(
+  propNames: PropNames[]
+): VueConstructor<
+  Vue<Props, {}, VNodeProps & AllowedComponentProps & ComponentCustomProps> &
+    Props
+>
 
 export function props<
   PropsOptions extends ComponentObjectPropsOptions,
   Props = Readonly<ExtractPropTypes<PropsOptions>>
->(propsOptions: PropsOptions): VueConstructor<Vue<Props> & Props>
+>(
+  propsOptions: PropsOptions
+): VueConstructor<
+  Vue<Props, {}, VNodeProps & AllowedComponentProps & ComponentCustomProps> &
+    Props
+>
 
 export function props(
   propsOptions: string[] | ComponentObjectPropsOptions
diff --git a/src/vue.ts b/src/vue.ts
@@ -4,6 +4,9 @@ import {
   ComponentOptions,
   VNode,
   SetupContext,
+  VNodeProps,
+  AllowedComponentProps,
+  ComponentCustomProps,
 } from 'vue'
 
 function defineGetter<T, K extends keyof T>(
@@ -115,8 +118,12 @@ export type EmitsOptions = ObjectEmitsOptions | string[]
 
 export type Vue<
   Props = unknown,
-  Emits extends EmitsOptions = {}
-> = ComponentPublicInstance<{}, {}, {}, {}, {}, Emits, Props> &
+  Emits extends EmitsOptions = {},
+  PublicProps = Props &
+    VNodeProps &
+    AllowedComponentProps &
+    ComponentCustomProps
+> = ComponentPublicInstance<Props, {}, {}, {}, {}, Emits, PublicProps> &
   ClassComponentHooks
 
 export interface VueConstructor<V extends VueBase = Vue> extends VueMixin<V> {
diff --git a/test-dts/jsx.tsx b/test-dts/jsx.tsx
@@ -0,0 +1,62 @@
+import { Vue, props } from '../src'
+
+describe('JSX', () => {
+  function assertJsx(jsx: JSX.Element): void {}
+
+  it('checks props type', () => {
+    const Props = props({
+      required: {
+        type: String,
+        required: true,
+      },
+
+      optional: Number,
+    })
+
+    class App extends Props {}
+
+    assertJsx(<App required="Hello" />)
+    assertJsx(<App required="Hello" optional={123} />)
+
+    // @ts-expect-error
+    assertJsx(<App />)
+    // @ts-expect-error
+    assertJsx(<App required={true} />)
+    // @ts-expect-error
+    assertJsx(<App required="Hello" optional={{ foo: 'bar' }} />)
+
+    assertJsx(
+      <App ref="app" class="foo" required="Test" testCustomProp="custom" />
+    )
+  })
+
+  it('passes vnode props', () => {
+    class App extends Vue {}
+
+    assertJsx(<App ref="test" />)
+    assertJsx(<App key="123" />)
+  })
+
+  it('passes class and style attributes', () => {
+    class App extends Vue {}
+
+    assertJsx(<App class="foo" />)
+    assertJsx(<App class={{ disabled: true }} />)
+    assertJsx(<App class={['test']} />)
+
+    assertJsx(<App style="font-size: 12px;" />)
+    assertJsx(<App style={{ color: 'red' }} />)
+  })
+
+  it('passes component custom props', () => {
+    class App extends Vue {}
+
+    assertJsx(<App testCustomProp="test" />)
+  })
+})
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProps {
+    testCustomProp?: string
+  }
+}
