feat: add TypeScript types and tests (#116)

Closes #96

circle.yml

@@ -19,6 +19,9 @@ jobs:
           key: dependency-cache-{{ checksum "yarn.lock" }}
           paths:
             - ./node_modules
+      - run:
+          name: types
+          command: yarn types
       - run:
           name: test
           command: yarn test

package.json

@@ -8,10 +8,13 @@
   },
   "main": "dist/vue-client-only.common.js",
   "unpkg": "dist/vue-client-only.min.js",
+  "types": "types/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "types/index.d.ts"
   ],
   "scripts": {
+    "types": "dtslint --localTs node_modules/typescript/lib types",
     "test": "echo 'no tests!' && npm run lint",
     "lint": "xo",
     "build": "npm run build:cjs && npm run build:umd",
@@ -29,8 +32,12 @@
   "dependencies": {},
   "devDependencies": {
     "bili": "^0.16.0-rc.1",
+    "dtslint": "^4.1.0",
     "eslint-config-rem": "^3.0.0",
     "poi": "^9.3.1",
+    "tsd": "^0.16.0",
+    "typescript": "^4.3.2",
+    "vue": "^2.6.13",
     "xo": "^0.18.0"
   },
   "xo": {

types/index.d.ts

@@ -0,0 +1,10 @@
+import { FunctionalComponentOptions } from 'vue';
+
+export interface ClientOnlyProps {
+  placeholder?: string;
+  placeholderTag?: string;
+}
+
+declare const ClientOnly: FunctionalComponentOptions<ClientOnlyProps>;
+
+export default ClientOnly;

types/index.test-d.ts

@@ -0,0 +1,11 @@
+import { expectType } from 'tsd';
+import { CreateElement, Component, FunctionalComponentOptions } from 'vue';
+import ClientOnly, { ClientOnlyProps } from 'vue-client-only';
+
+const createElement: CreateElement = null as unknown as CreateElement;
+
+createElement(ClientOnly);
+
+expectType<Component>(ClientOnly);
+expectType<FunctionalComponentOptions>(ClientOnly);
+expectType<FunctionalComponentOptions<ClientOnlyProps>>(ClientOnly);

types/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": [
+      "es6"
+    ],
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    // If the library is an external module (uses `export`), this allows your test file to import "mylib" instead of "./index".
+    // If the library is global (cannot be imported via `import` or `require`), leave this out.
+    "baseUrl": ".",
+    "paths": {
+      "vue-client-only": [
+        "."
+      ]
+    }
+  }
+}