feat(test): add dts testing

.github/workflows/nodejs.yml

@@ -1,29 +1,35 @@
-name: Node CI
+name: Build & Test
 
 on:
   pull_request:
     branches:
-    - master
+      - master
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
         node-version: [10.x, 12.x]
 
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: npm install, build, and test
-      run: |
-        npm install
-        npm run build --if-present
-        npm test
-      env:
-        CI: true
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn build
+        env:
+          CI: true
+      - name: Typing Declartion Tests
+        run: yarn test-dts
+        env:
+          CI: true
+      - name: Unit Tests
+        run: yarn test
+        env:
+          CI: true
+

package.json

@@ -22,12 +22,13 @@
   "license": "MIT",
   "sideEffects": false,
   "files": [
-    "dist/"
+    "dist"
   ],
   "scripts": {
     "start": "cross-env TARGET=es rollup -c -w",
     "build": "rollup -c",
     "test": "cross-env NODE_ENV=test jest",
+    "test-dts": "tsc -p ./test-dts/tsconfig.json && npm run build && tsc -p ./test-dts/tsconfig.build.json",
     "release": "bash scripts/release.sh"
   },
   "bugs": {

rollup.config.js

@@ -34,7 +34,7 @@ const builds = {
 };
 
 function getAllBuilds() {
-  return Object.keys(builds).map(key => genConfig(builds[key]));
+  return Object.keys(builds).map((key) => genConfig(builds[key]));
 }
 
 function genConfig({ outFile, format, mode }) {

src/setup.ts

@@ -194,7 +194,7 @@ export function mixin(Vue: VueConstructor) {
             bindingValue = ref(bindingValue);
           } else {
             // bind function to the vm, this will make `this` = vm
-            if (isFunction(bindingValue)){
+            if (isFunction(bindingValue)) {
               bindingValue = bindingValue.bind(vm);
             }
             // a non-reactive should not don't get reactivity

test-dts/index.d.ts

@@ -0,0 +1,5 @@
+export * from '@vue/composition-api';
+
+export function expectType<T>(value: T): void;
+export function expectError<T>(value: T): void;
+export function expectAssignable<T, T2 extends T = T>(value: T2): void;

test-dts/ref.test-d.ts

@@ -0,0 +1,92 @@
+import { Ref, ref, isRef, unref, reactive, expectType } from './index';
+
+function plainType(arg: number | Ref<number>) {
+  // ref coercing
+  const coerced = ref(arg);
+  expectType<Ref<number>>(coerced);
+
+  // isRef as type guard
+  if (isRef(arg)) {
+    expectType<Ref<number>>(arg);
+  }
+
+  // ref unwrapping
+  expectType<number>(unref(arg));
+
+  // ref inner type should be unwrapped
+  const nestedRef = ref({
+    foo: ref(1),
+  });
+  expectType<Ref<{ foo: number }>>(nestedRef);
+  expectType<{ foo: number }>(nestedRef.value);
+
+  // ref boolean
+  const falseRef = ref(false);
+  expectType<Ref<boolean>>(falseRef);
+  expectType<boolean>(falseRef.value);
+
+  // ref true
+  const trueRef = ref<true>(true);
+  expectType<Ref<true>>(trueRef);
+  expectType<true>(trueRef.value);
+
+  // tuple
+  expectType<[number, string]>(unref(ref([1, '1'])));
+
+  interface IteratorFoo {
+    [Symbol.iterator]: any;
+  }
+
+  // with symbol
+  expectType<Ref<IteratorFoo | null | undefined>>(ref<IteratorFoo | null | undefined>());
+}
+
+plainType(1);
+
+function bailType(arg: HTMLElement | Ref<HTMLElement>) {
+  // ref coercing
+  const coerced = ref(arg);
+  expectType<Ref<HTMLElement>>(coerced);
+
+  // isRef as type guard
+  if (isRef(arg)) {
+    expectType<Ref<HTMLElement>>(arg);
+  }
+
+  // ref unwrapping
+  expectType<HTMLElement>(unref(arg));
+
+  // ref inner type should be unwrapped
+  const nestedRef = ref({ foo: ref(document.createElement('DIV')) });
+
+  expectType<Ref<{ foo: HTMLElement }>>(nestedRef);
+  expectType<{ foo: HTMLElement }>(nestedRef.value);
+}
+const el = document.createElement('DIV');
+bailType(el);
+
+function withSymbol() {
+  const customSymbol = Symbol();
+  const obj = {
+    [Symbol.asyncIterator]: { a: 1 },
+    [Symbol.unscopables]: { b: '1' },
+    [customSymbol]: { c: [1, 2, 3] },
+  };
+
+  const objRef = ref(obj);
+
+  expectType<{ a: number }>(objRef.value[Symbol.asyncIterator]);
+  expectType<{ b: string }>(objRef.value[Symbol.unscopables]);
+  expectType<{ c: Array<number> }>(objRef.value[customSymbol]);
+}
+
+withSymbol();
+
+const state = reactive({
+  foo: {
+    value: 1,
+    label: 'bar',
+  },
+});
+
+expectType<string>(state.foo.label);

test-dts/tsconfig.build.json

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

test-dts/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "declaration": true,
+    "baseUrl": ".",
+    "paths": {
+      "@vue/composition-api": ["../src"]
+    }
+  },
+  "exclude": ["../test"],
+  "include": ["../src", "./*.ts"]
+}

test-dts/watch.test-d.ts

@@ -0,0 +1,61 @@
+import { ref, computed, watch, expectType } from './index';
+
+const source = ref('foo');
+const source2 = computed(() => source.value);
+const source3 = () => 1;
+
+// lazy watcher will have consistent types for oldValue.
+watch(source, (value, oldValue) => {
+  expectType<string>(value);
+  expectType<string>(oldValue);
+});
+
+watch([source, source2, source3], (values, oldValues) => {
+  expectType<(string | number)[]>(values);
+  expectType<(string | number)[]>(oldValues);
+});
+
+// const array
+watch([source, source2, source3] as const, (values, oldValues) => {
+  expectType<Readonly<[string, string, number]>>(values);
+  expectType<Readonly<[string, string, number]>>(oldValues);
+});
+
+// immediate watcher's oldValue will be undefined on first run.
+watch(
+  source,
+  (value, oldValue) => {
+    expectType<string>(value);
+    expectType<string | undefined>(oldValue);
+  },
+  { immediate: true }
+);
+
+watch(
+  [source, source2, source3],
+  (values, oldValues) => {
+    expectType<(string | number)[]>(values);
+    expectType<(string | number | undefined)[]>(oldValues);
+  },
+  { immediate: true }
+);
+
+// const array
+watch(
+  [source, source2, source3] as const,
+  (values, oldValues) => {
+    expectType<Readonly<[string, string, number]>>(values);
+    expectType<Readonly<[string | undefined, string | undefined, number | undefined]>>(oldValues);
+  },
+  { immediate: true }
+);
+
+// should provide correct ref.value inner type to callbacks
+const nestedRefSource = ref({
+  foo: ref(1),
+});
+
+watch(nestedRefSource, (v, ov) => {
+  expectType<{ foo: number }>(v);
+  expectType<{ foo: number }>(ov);
+});

test/setup.spec.js

@@ -51,7 +51,7 @@ describe('setup', () => {
     expect(vm.b).toBe(1);
   });
 
-  it('should work with `methods` and `data` options', done => {
+  it('should work with `methods` and `data` options', (done) => {
     let calls = 0;
     const vm = new Vue({
       template: `<div>{{a}}{{b}}{{c}}</div>`,
@@ -215,7 +215,7 @@ describe('setup', () => {
     expect(vm.$refs.test.b).toBe(1);
   });
 
-  it('props should not be reactive', done => {
+  it('props should not be reactive', (done) => {
     let calls = 0;
     const vm = new Vue({
       template: `<child :msg="msg"></child>`,
@@ -256,7 +256,7 @@ describe('setup', () => {
     }).$mount();
   });
 
-  it('should not make returned non-reactive object reactive', done => {
+  it('should not make returned non-reactive object reactive', (done) => {
     const vm = new Vue({
       setup() {
         return {
@@ -285,8 +285,8 @@ describe('setup', () => {
   });
 
   it("should put a unenumerable '__ob__' for non-reactive object", () => {
-    const clone = obj => JSON.parse(JSON.stringify(obj));
-    const componentSetup = jest.fn(props => {
+    const clone = (obj) => JSON.parse(JSON.stringify(obj));
+    const componentSetup = jest.fn((props) => {
       const internalOptions = clone(props.options);
       return { internalOptions };
     });
@@ -329,7 +329,7 @@ describe('setup', () => {
           name: 'child',
           props: ['msg'],
           setup() {
-            return props => {
+            return (props) => {
               p = props;
               return null;
             };
@@ -340,7 +340,7 @@ describe('setup', () => {
     expect(p).toBe(undefined);
   });
 
-  it('inline render function should work', done => {
+  it('inline render function should work', (done) => {
     // let createElement;
     const vm = new Vue({
       props: ['msg'],
@@ -383,44 +383,44 @@ describe('setup', () => {
   });
 
   describe('Methods', () => {
-    it('binds methods when calling with parenthesis', async ()=>{
+    it('binds methods when calling with parenthesis', async () => {
       let context = null;
-      const contextFunction = jest.fn(function (){
-        context = this
+      const contextFunction = jest.fn(function () {
+        context = this;
       });
 
       const vm = new Vue({
         template: '<div><button @click="contextFunction()"/></div>',
         setup() {
           return {
-            contextFunction
-          }
-        }
+            contextFunction,
+          };
+        },
       }).$mount();
-  
+
       await vm.$el.querySelector('button').click();
       expect(contextFunction).toBeCalled();
       expect(context).toBe(vm);
     });
 
     it('binds methods when calling without parenthesis', async () => {
       let context = null;
-      const contextFunction = jest.fn(function (){
-        context = this
+      const contextFunction = jest.fn(function () {
+        context = this;
       });
 
       const vm = new Vue({
         template: '<div><button @click="contextFunction"/></div>',
         setup() {
           return {
-            contextFunction
-          }
-        }
+            contextFunction,
+          };
+        },
       }).$mount();
-  
+
       await vm.$el.querySelector('button').click();
       expect(contextFunction).toBeCalled();
       expect(context).toBe(vm);
     });
-  })
+  });
 });