chore: add vue3 dts test (#842)

Author: xiaoxiangmoe

package.json

@@ -38,7 +38,7 @@
     "lint": "prettier --write --parser typescript \"{src,test,test-dts}/**/*.ts?(x)\" && prettier --write \"{src,test}/**/*.js\"",
     "test": "yarn test-dts && yarn test-unit",
     "test-unit": "cross-env NODE_ENV=test jest",
-    "test-dts": "tsc -p ./test-dts/tsconfig.json && yarn build && tsc -p ./test-dts/tsconfig.build.json",
+    "test-dts": "tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.vue3.json && yarn build && tsc -p ./test-dts/tsconfig.build.json",
     "update-readme": "node ./scripts/update-readme.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "version": "yarn changelog && yarn update-readme && git add CHANGELOG.md README.*",
@@ -67,17 +67,18 @@
     "husky": "^4.3.8",
     "jest": "^26.6.3",
     "lint-staged": "^11.0.0",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.52.7",
     "rollup-plugin-dts": "^3.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "ts-jest": "^26.5.5",
-    "typescript": "^4.3.5",
+    "typescript": "^4.4.4",
     "vue": "^2.6.14",
     "vue-router": "^3.5.2",
-    "vue-server-renderer": "^2.6.14"
+    "vue-server-renderer": "^2.6.14",
+    "vue3": "npm:[email protected]"
   },
   "husky": {
     "hooks": {

src/apis/watch.ts

@@ -228,7 +228,10 @@ function createWatcher(
     cleanup = () => {
       try {
         fn()
-      } catch (error) {
+      } catch (
+        // FIXME: remove any
+        error: any
+      ) {
         logError(error, vm, 'onCleanup()')
       }
     }

src/component/componentOptions.ts

@@ -31,7 +31,7 @@ export interface MethodOptions {
 
 export type SetupFunction<Props, RawBindings = {}> = (
   this: void,
-  props: Props,
+  props: Readonly<Props>,
   ctx: SetupContext
 ) => RawBindings | (() => VNode | null) | void
 

src/component/componentProps.ts

@@ -70,8 +70,9 @@ type InferPropType<T> = T extends null
                   : T
 
 export type ExtractPropTypes<O> = O extends object
-  ? { [K in RequiredKeys<O>]: InferPropType<O[K]> } &
-      { [K in OptionalKeys<O>]?: InferPropType<O[K]> }
+  ? { [K in RequiredKeys<O>]: InferPropType<O[K]> } & {
+      [K in OptionalKeys<O>]?: InferPropType<O[K]>
+    }
   : { [K in string]: any }
 
 type DefaultKeys<T> = {

src/component/defineAsyncComponent.ts

@@ -74,49 +74,50 @@ export function defineAsyncComponent(
     let thisRequest: Promise<ComponentOrComponentOptions>
     return (
       pendingRequest ||
-      (thisRequest = pendingRequest = loader()
-        .catch((err) => {
-          err = err instanceof Error ? err : new Error(String(err))
-          if (userOnError) {
-            return new Promise((resolve, reject) => {
-              const userRetry = () => resolve(retry())
-              const userFail = () => reject(err)
-              userOnError(err, userRetry, userFail, retries + 1)
-            })
-          } else {
-            throw err
-          }
-        })
-        .then((comp: any) => {
-          if (thisRequest !== pendingRequest && pendingRequest) {
-            return pendingRequest
-          }
-          if (__DEV__ && !comp) {
-            warn(
-              `Async component loader resolved to undefined. ` +
-                `If you are using retry(), make sure to return its return value.`
-            )
-          }
-          // interop module default
-          if (
-            comp &&
-            (comp.__esModule || comp[Symbol.toStringTag] === 'Module')
-          ) {
-            comp = comp.default
-          }
-          if (__DEV__ && comp && !isObject(comp) && !isFunction(comp)) {
-            throw new Error(`Invalid async component load result: ${comp}`)
-          }
-          return comp
-        }))
+      (thisRequest = pendingRequest =
+        loader()
+          .catch((err) => {
+            err = err instanceof Error ? err : new Error(String(err))
+            if (userOnError) {
+              return new Promise((resolve, reject) => {
+                const userRetry = () => resolve(retry())
+                const userFail = () => reject(err)
+                userOnError(err, userRetry, userFail, retries + 1)
+              })
+            } else {
+              throw err
+            }
+          })
+          .then((comp: any) => {
+            if (thisRequest !== pendingRequest && pendingRequest) {
+              return pendingRequest
+            }
+            if (__DEV__ && !comp) {
+              warn(
+                `Async component loader resolved to undefined. ` +
+                  `If you are using retry(), make sure to return its return value.`
+              )
+            }
+            // interop module default
+            if (
+              comp &&
+              (comp.__esModule || comp[Symbol.toStringTag] === 'Module')
+            ) {
+              comp = comp.default
+            }
+            if (__DEV__ && comp && !isObject(comp) && !isFunction(comp)) {
+              throw new Error(`Invalid async component load result: ${comp}`)
+            }
+            return comp
+          }))
     )
   }
 
   return () => {
     const component = load()
 
     return {
-      component: component as any, // there is a type missmatch between vue2 type and the docs
+      component,
       delay,
       timeout,
       error: errorComponent,

src/utils/instance.ts

@@ -176,7 +176,10 @@ export function activateCurrentInstance(
   setCurrentInstance(instance)
   try {
     return fn(instance)
-  } catch (err) {
+  } catch (
+    // FIXME: remove any
+    err: any
+  ) {
     if (onError) {
       onError(err)
     } else {

test-dts/defineAsyncComponent.test-d.ts

@@ -1,19 +1,8 @@
-import { AsyncComponent } from 'vue'
-import { defineAsyncComponent, defineComponent, expectType } from './index'
+import { defineAsyncComponent, defineComponent, expectType, h } from './index'
 
-function asyncComponent1() {
-  return Promise.resolve().then(() => {
-    return defineComponent({})
-  })
-}
+const asyncComponent1 = async () => defineComponent({})
 
-function asyncComponent2() {
-  return Promise.resolve().then(() => {
-    return {
-      template: 'ASYNC',
-    }
-  })
-}
+const asyncComponent2 = async () => ({ template: 'ASYNC' })
 
 const syncComponent1 = defineComponent({
   template: '',
@@ -42,19 +31,9 @@ defineAsyncComponent({
   loadingComponent: syncComponent2,
 })
 
-defineAsyncComponent(
-  () =>
-    new Promise((resolve, reject) => {
-      resolve(syncComponent1)
-    })
-)
+defineAsyncComponent(async () => syncComponent1)
 
-defineAsyncComponent(
-  () =>
-    new Promise((resolve, reject) => {
-      resolve(syncComponent2)
-    })
-)
+defineAsyncComponent(async () => syncComponent2)
 
 const component = defineAsyncComponent({
   loader: asyncComponent1,
@@ -71,4 +50,4 @@ const component = defineAsyncComponent({
   },
 })
 
-expectType<AsyncComponent>(component)
+h(component)

test-dts/defineComponent.test-d.ts

@@ -6,6 +6,7 @@ import {
   isNotAnyOrUndefined,
   defineComponent,
   PropType,
+  h,
 } from './index'
 
 describe('with object props', () => {
@@ -126,6 +127,8 @@ describe('with object props', () => {
       expectType<ExpectedProps['ffff']>(props.ffff)
       expectType<ExpectedProps['validated']>(props.validated)
       expectType<ExpectedProps['date']>(props.date)
+      // FIXME: vue 3 bug
+      // @ts-ignore
       expectType<typeof props.unknown>({} as ExpectedProps['unknown'])
 
       isNotAnyOrUndefined(props.a)
@@ -145,6 +148,7 @@ describe('with object props', () => {
       isNotAnyOrUndefined(props.hhh)
       isNotAnyOrUndefined(props.ffff)
 
+      // @ts-expect-error
       expectError((props.a = 1))
 
       // setup context
@@ -158,7 +162,7 @@ describe('with object props', () => {
         }),
       }
     },
-    render(h) {
+    render() {
       const props = this.$props
       expectType<ExpectedProps['a']>(props.a)
       expectType<ExpectedProps['b']>(props.b)
@@ -177,6 +181,8 @@ describe('with object props', () => {
       expectType<ExpectedProps['hhh']>(props.hhh)
       expectType<ExpectedProps['ffff']>(props.ffff)
       expectType<ExpectedProps['validated']>(props.validated)
+      // FIXME: vue 3 bug
+      // @ts-ignore
       expectType<typeof props.unknown>({} as ExpectedProps['unknown'])
 
       // @ts-expect-error props should be readonly
@@ -211,7 +217,7 @@ describe('with object props', () => {
       // setup context properties should be mutable
       this.c = 2
 
-      return h()
+      return h('div')
     },
   })
 })
@@ -228,7 +234,7 @@ describe('type inference w/ array props declaration', () => {
         c: 1,
       }
     },
-    render(h) {
+    render() {
       expectType<any>(this.$props.a)
       expectType<any>(this.$props.b)
       // @ts-expect-error
@@ -237,7 +243,7 @@ describe('type inference w/ array props declaration', () => {
       expectType<any>(this.b)
       expectType<number>(this.c)
 
-      return h()
+      return h('div')
     },
   })
 })
@@ -293,7 +299,7 @@ describe('type inference w/ options API', () => {
         expectType<number>(this.d)
       },
     },
-    render(h) {
+    render() {
       // props
       expectType<number | undefined>(this.a)
       // returned from setup()
@@ -303,7 +309,7 @@ describe('type inference w/ options API', () => {
       // computed
       expectType<number>(this.d)
 
-      return h()
+      return h('div')
     },
   })
 })

test-dts/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@vue/composition-api'
+// export * from 'vue3'
 
 export function describe(_name: string, _fn: () => void): void
 

test-dts/tsconfig.vue3.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@vue/composition-api": ["../node_modules/vue3/dist/vue.d.ts"]
+    }
+  }
+}