feat(test): add dts testing (#347)

* feat(test): add dts testing

* update test script

* update github actions

* chore: update to align with vue-next

* clean up

* fix test

* fix

* Update .github/workflows/nodejs.yml

Co-authored-by: Carlos Rodrigues <[email protected]>

Co-authored-by: Carlos Rodrigues <[email protected]>

Author: antfu

.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": {

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);
+});