From ba8b7afa650277b7218e0bd53564b5fb45bf4549 Mon Sep 17 00:00:00 2001
From: Wei <fi3ework@gmail.com>
Date: Sat, 22 May 2021 22:16:31 +0800
Subject: [PATCH] feat(create-app): improve client types (#3214)

---
 docs/guide/features.md                                    | 8 +++++++-
 .../create-app/template-lit-element-ts/src/vite-env.d.ts  | 1 +
 packages/create-app/template-lit-element-ts/tsconfig.json | 1 -
 packages/create-app/template-preact-ts/src/vite-env.d.ts  | 1 +
 packages/create-app/template-preact-ts/tsconfig.json      | 1 -
 packages/create-app/template-react-ts/src/vite-env.d.ts   | 1 +
 packages/create-app/template-react-ts/tsconfig.json       | 1 -
 .../template-svelte-ts/src/{global.d.ts => vite-env.d.ts} | 0
 .../template-svelte/src/{global.d.ts => vite-env.d.ts}    | 0
 packages/create-app/template-vanilla-ts/src/vite-env.d.ts | 1 +
 packages/create-app/template-vanilla-ts/tsconfig.json     | 1 -
 packages/create-app/template-vue-ts/src/vite-env.d.ts     | 1 +
 packages/create-app/template-vue-ts/tsconfig.json         | 3 +--
 13 files changed, 13 insertions(+), 7 deletions(-)
 create mode 100644 packages/create-app/template-lit-element-ts/src/vite-env.d.ts
 create mode 100644 packages/create-app/template-preact-ts/src/vite-env.d.ts
 create mode 100644 packages/create-app/template-react-ts/src/vite-env.d.ts
 rename packages/create-app/template-svelte-ts/src/{global.d.ts => vite-env.d.ts} (100%)
 rename packages/create-app/template-svelte/src/{global.d.ts => vite-env.d.ts} (100%)
 create mode 100644 packages/create-app/template-vanilla-ts/src/vite-env.d.ts
 create mode 100644 packages/create-app/template-vue-ts/src/vite-env.d.ts

diff --git a/docs/guide/features.md b/docs/guide/features.md
index f7d363f00ec88c..383735ba0f8b4e 100644
--- a/docs/guide/features.md
+++ b/docs/guide/features.md
@@ -38,7 +38,13 @@ Note that because `esbuild` only performs transpilation without type information
 
 ### Client Types
 
-Vite's default types are for its Node.js API. To shim the environment of client side code in a Vite application, add `vite/client` to `compilerOptions.types` of your `tsconfig`:
+Vite's default types are for its Node.js API. To shim the environment of client side code in a Vite application, add a `d.ts` declaration file:
+
+```typescript
+/// <reference types="vite/client" />
+```
+
+Also, you can add `vite/client` to `compilerOptions.types` of your `tsconfig`:
 
 ```json
 {
diff --git a/packages/create-app/template-lit-element-ts/src/vite-env.d.ts b/packages/create-app/template-lit-element-ts/src/vite-env.d.ts
new file mode 100644
index 00000000000000..11f02fe2a0061d
--- /dev/null
+++ b/packages/create-app/template-lit-element-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/create-app/template-lit-element-ts/tsconfig.json b/packages/create-app/template-lit-element-ts/tsconfig.json
index ce99226ee4f24c..d17e916d3feb33 100644
--- a/packages/create-app/template-lit-element-ts/tsconfig.json
+++ b/packages/create-app/template-lit-element-ts/tsconfig.json
@@ -2,7 +2,6 @@
   "compilerOptions": {
     "module": "esnext",
     "lib": ["es2017", "dom", "dom.iterable"],
-    "types": ["vite/client"],
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "./types",
diff --git a/packages/create-app/template-preact-ts/src/vite-env.d.ts b/packages/create-app/template-preact-ts/src/vite-env.d.ts
new file mode 100644
index 00000000000000..11f02fe2a0061d
--- /dev/null
+++ b/packages/create-app/template-preact-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/create-app/template-preact-ts/tsconfig.json b/packages/create-app/template-preact-ts/tsconfig.json
index a748ee4d112a8c..84c196e7a3ff0f 100644
--- a/packages/create-app/template-preact-ts/tsconfig.json
+++ b/packages/create-app/template-preact-ts/tsconfig.json
@@ -2,7 +2,6 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vite/client"],
     "allowJs": false,
     "skipLibCheck": false,
     "esModuleInterop": false,
diff --git a/packages/create-app/template-react-ts/src/vite-env.d.ts b/packages/create-app/template-react-ts/src/vite-env.d.ts
new file mode 100644
index 00000000000000..11f02fe2a0061d
--- /dev/null
+++ b/packages/create-app/template-react-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/create-app/template-react-ts/tsconfig.json b/packages/create-app/template-react-ts/tsconfig.json
index 51efd413cde175..013e6c54f0e341 100644
--- a/packages/create-app/template-react-ts/tsconfig.json
+++ b/packages/create-app/template-react-ts/tsconfig.json
@@ -2,7 +2,6 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vite/client"],
     "allowJs": false,
     "skipLibCheck": false,
     "esModuleInterop": false,
diff --git a/packages/create-app/template-svelte-ts/src/global.d.ts b/packages/create-app/template-svelte-ts/src/vite-env.d.ts
similarity index 100%
rename from packages/create-app/template-svelte-ts/src/global.d.ts
rename to packages/create-app/template-svelte-ts/src/vite-env.d.ts
diff --git a/packages/create-app/template-svelte/src/global.d.ts b/packages/create-app/template-svelte/src/vite-env.d.ts
similarity index 100%
rename from packages/create-app/template-svelte/src/global.d.ts
rename to packages/create-app/template-svelte/src/vite-env.d.ts
diff --git a/packages/create-app/template-vanilla-ts/src/vite-env.d.ts b/packages/create-app/template-vanilla-ts/src/vite-env.d.ts
new file mode 100644
index 00000000000000..11f02fe2a0061d
--- /dev/null
+++ b/packages/create-app/template-vanilla-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/create-app/template-vanilla-ts/tsconfig.json b/packages/create-app/template-vanilla-ts/tsconfig.json
index 43d4bc703dd9ff..4824d012f24b62 100644
--- a/packages/create-app/template-vanilla-ts/tsconfig.json
+++ b/packages/create-app/template-vanilla-ts/tsconfig.json
@@ -8,7 +8,6 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "types": ["vite/client"],
     "noEmit": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
diff --git a/packages/create-app/template-vue-ts/src/vite-env.d.ts b/packages/create-app/template-vue-ts/src/vite-env.d.ts
new file mode 100644
index 00000000000000..11f02fe2a0061d
--- /dev/null
+++ b/packages/create-app/template-vue-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/create-app/template-vue-ts/tsconfig.json b/packages/create-app/template-vue-ts/tsconfig.json
index e754e65292f1a0..5b6c24dfc57c0d 100644
--- a/packages/create-app/template-vue-ts/tsconfig.json
+++ b/packages/create-app/template-vue-ts/tsconfig.json
@@ -8,8 +8,7 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
-    "types": ["vite/client"]
+    "lib": ["esnext", "dom"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }