feat(types): separate client type shims from main types

docs/guide/features.md

@@ -32,6 +32,20 @@ Vite uses [esbuild](https://github.com/evanw/esbuild) to transpile TypeScript in
 
 Note that because `esbuild` only performs transpilation without type information, it doesn't support certain features like const enum and implicit type-only imports. You must set `"isolatedModules": true` in your `tsconfig.json` under `compilerOptions` so that TS will warn you against the features that do not work with isolated transpilation.
 
+### Client Type Shims
+
+Vite's default types are for its Node.js API. To shim the environment of client side code in a Vite application, add a `shim.d.ts` file in your project with the following:
+
+```ts
+import 'vite/env'
+```
+
+This will provide the following type shims:
+
+- Asset imports (e.g. importing an `.svg` file)
+- Types for the Vite-injected [env vraibles](./env-and-mode#env-variables) on `import.meta.env`
+- Types for the [HMR API](./api-hmr) on `import.meta.hot`
+
 ## JSX
 
 `.jsx` and `.tsx` files are also supported out of the box. JSX transpilation is also handled via [ESBuild](https://esbuild.github.io), and defaults to the React 16 flavor. React 17 style JSX support in ESBuild is tracked [here](https://github.com/evanw/esbuild/issues/334).

packages/vite/types/fileTypes.d.ts → packages/vite/env.d.ts

@@ -1,3 +1,39 @@
+/// <reference lib="dom" />
+
+interface ImportMeta {
+  url: string
+
+  readonly hot?: {
+    readonly data: any
+
+    accept(): void
+    accept(cb: (mod: any) => void): void
+    accept(dep: string, cb: (mod: any) => void): void
+    accept(deps: readonly string[], cb: (mods: any[]) => void): void
+
+    /**
+     * @deprecated
+     */
+    acceptDeps(): never
+
+    dispose(cb: (data: any) => void): void
+    decline(): void
+    invalidate(): void
+
+    on(event: string, cb: (...args: any[]) => void): void
+  }
+
+  readonly env: ImportMetaEnv
+}
+
+interface ImportMetaEnv {
+  [key: string]: string | boolean | undefined
+  BASE_URL: string
+  MODE: string
+  DEV: boolean
+  PROD: boolean
+}
+
 // CSS modules
 type CSSModuleClasses = { readonly [key: string]: string }
 
@@ -136,3 +172,18 @@ declare module '*.otf' {
   const src: string
   export default src
 }
+
+// web worker
+declare module '*?worker' {
+  const workerConstructor: {
+    new (): Worker
+  }
+  export default workerConstructor
+}
+
+declare module '*?worker&inline' {
+  const workerConstructor: {
+    new (): Worker
+  }
+  export default workerConstructor
+}

packages/vite/package.json

@@ -11,7 +11,8 @@
   "types": "dist/node/index.d.ts",
   "files": [
     "bin",
-    "dist"
+    "dist",
+    "env.d.ts"
   ],
   "engines": {
     "node": ">=12.0.0"
@@ -31,10 +32,9 @@
     "prebuild": "rimraf dist && yarn lint",
     "build": "run-s build-bundle build-types",
     "build-bundle": "rollup -c",
-    "build-types": "run-s build-temp-types patch-types roll-types inject-types",
+    "build-types": "run-s build-temp-types patch-types roll-types",
     "build-temp-types": "tsc --emitDeclarationOnly --outDir temp/node -p src/node",
     "patch-types": "node scripts/patchTypes",
-    "inject-types": "node scripts/injectTypes",
     "roll-types": "api-extractor run && rimraf temp",
     "lint": "eslint --ext .ts src/**",
     "format": "prettier --write --parser typescript \"src/**/*.ts\"",