refactor(types): bundle client types (#9966)

Author: sapphi-red

.eslintignore

@@ -1,4 +1,4 @@
 dist
 playground-temp
 temp
-
+packages/vite/client/types.d.ts

.eslintrc.cjs

@@ -131,7 +131,7 @@ module.exports = defineConfig({
       }
     },
     {
-      files: ['packages/vite/types/**', '*.spec.ts'],
+      files: ['packages/vite/src/dep-types/**', '*.spec.ts'],
       rules: {
         'node/no-extraneous-import': 'off'
       }

.gitignore

@@ -5,6 +5,7 @@
 *.local
 *.log
 /.vscode/
+/packages/vite/client/types.d.ts
 /packages/vite/LICENSE
 dist
 dist-ssr

.prettierignore

@@ -9,3 +9,4 @@ playground/tsconfig-json-load-error/has-error/tsconfig.json
 playground/html/invalid.html
 playground/html/valid.html
 playground/worker/classic-worker.js
+packages/vite/client/types.d.ts

CONTRIBUTING.md

@@ -218,7 +218,7 @@ Avoid deps with large transitive dependencies that result in bloated size compar
 
 Vite aims to be fully usable as a dependency in a TypeScript project (e.g. it should provide proper typings for VitePress), and also in `vite.config.ts`. This means technically a dependency whose types are exposed needs to be part of `dependencies` instead of `devDependencies`. However, this also means we won't be able to bundle it.
 
-To get around this, we inline some of these dependencies' types in `packages/vite/types`. This way, we can still expose the typing but bundle the dependency's source code.
+To get around this, we inline some of these dependencies' types in `packages/vite/src/dep-types`. This way, we can still expose the typing but bundle the dependency's source code.
 
 Use `pnpm run check-dist-types` to check that the bundled types do not rely on types in `devDependencies`. If you are adding `dependencies`, make sure to configure `tsconfig.check.json`.
 

docs/guide/api-plugin.md

@@ -595,12 +595,21 @@ It is possible to type custom events by extending the `CustomEventMap` interface
 
 ```ts
 // events.d.ts
-import 'vite/types/customEvent'
+import 'vite'
+import 'vite/client/types'
 
-declare module 'vite/types/customEvent' {
-  interface CustomEventMap {
-    'custom:foo': { msg: string }
-    // 'event-key': payload
-  }
+interface MyCustomEventMap {
+  'custom:foo': { msg: string }
+  // 'event-key': payload
+}
+
+// extend interface for server-side
+declare module 'vite' {
+  interface CustomEventMap extends MyCustomEventMap {}
+}
+
+// extend interface for client-side
+declare module 'vite/client/types' {
+  interface CustomEventMap extends MyCustomEventMap {}
 }
 ```

packages/plugin-legacy/tsconfig.json

@@ -12,7 +12,6 @@
     "noUnusedLocals": true,
     "esModuleInterop": true,
     "paths": {
-      "types/*": ["../vite/types/*"],
       "vite": ["../vite/src/node/index.js"]
     }
   }

packages/plugin-react/tsconfig.json

@@ -12,7 +12,6 @@
     "noUnusedLocals": true,
     "esModuleInterop": true,
     "paths": {
-      "types/*": ["../vite/types/*"],
       "vite": ["../vite/src/node/index.js"]
     }
   }

packages/plugin-vue-jsx/tsconfig.json

@@ -12,7 +12,6 @@
     "noUnusedLocals": true,
     "esModuleInterop": true,
     "paths": {
-      "types/*": ["../vite/types/*"],
       "vite": ["../vite/src/node/index.js"]
     }
   }

packages/plugin-vue/tsconfig.json

@@ -14,7 +14,6 @@
     "esModuleInterop": true,
     "baseUrl": ".",
     "paths": {
-      "types/*": ["../vite/types/*"],
       "vite": ["../vite/src/node/index.js"]
     }
   }

packages/vite/api-extractor.client.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+  "projectFolder": "./src/client",
+
+  "mainEntryPointFilePath": "./src/client-types.d.ts",
+
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "",
+    "publicTrimmedFilePath": "./client/types.d.ts"
+  },
+
+  "apiReport": {
+    "enabled": false
+  },
+
+  "docModel": {
+    "enabled": false
+  },
+
+  "tsdocMetadata": {
+    "enabled": false
+  },
+
+  "messages": {
+    "compilerMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      }
+    },
+
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "warning",
+        "addToApiReportFile": true
+      },
+
+      "ae-missing-release-tag": {
+        "logLevel": "none"
+      }
+    },
+
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      },
+
+      "tsdoc-undefined-tag": {
+        "logLevel": "none"
+      }
+    }
+  }
+}

packages/vite/client.d.ts

@@ -1,4 +1,4 @@
-/// <reference path="./types/importMeta.d.ts" />
+/// <reference path="./import-meta.d.ts" />
 
 // CSS modules
 type CSSModuleClasses = { readonly [key: string]: string }

packages/vite/import-meta.d.ts

@@ -0,0 +1,10 @@
+import type {
+  ImportMeta as ViteImportMeta,
+  ImportMetaEnv as ViteImportMetaEnv
+  // eslint-disable-next-line node/no-missing-import -- use .js for `moduleResolution: "nodenext"`
+} from './client/types.js'
+
+declare global {
+  interface ImportMeta extends ViteImportMeta {}
+  interface ImportMetaEnv extends ViteImportMetaEnv {}
+}

packages/vite/package.json

@@ -20,16 +20,24 @@
     "./client": {
       "types": "./client.d.ts"
     },
+    "./import-meta": {
+      "types": "./import-meta.d.ts"
+    },
+    "./client/types": {
+      "types": "./client/types.d.ts"
+    },
     "./dist/client/*": "./dist/client/*",
     "./package.json": "./package.json"
   },
   "files": [
     "bin",
     "dist",
     "client.d.ts",
+    "import-meta.d.ts",
     "index.cjs",
     "src/client",
-    "types"
+    "types",
+    "client/types.d.ts"
   ],
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
@@ -47,11 +55,13 @@
     "dev": "rimraf dist && pnpm run build-bundle -w",
     "build": "rimraf dist && run-s build-bundle build-types",
     "build-bundle": "rollup --config rollup.config.ts --configPlugin typescript",
-    "build-types": "run-s build-temp-types patch-types roll-types check-dist-types",
-    "build-temp-types": "tsc --emitDeclarationOnly --outDir temp/node -p src/node",
-    "patch-types": "tsx scripts/patchTypes.ts",
-    "roll-types": "api-extractor run && rimraf temp",
-    "check-dist-types": "tsc --project tsconfig.check.json",
+    "build-types": "run-p build-node-types build-client-types",
+    "build-node-types": "run-s build-node-types-temp build-node-types-patch build-node-types-roll build-node-types-check",
+    "build-node-types-temp": "tsc --emitDeclarationOnly --outDir temp/node -p src/node",
+    "build-node-types-patch": "tsx scripts/patchTypes.ts",
+    "build-node-types-roll": "api-extractor run && rimraf temp",
+    "build-node-types-check": "tsc --project tsconfig.check.json",
+    "build-client-types": "api-extractor run -c api-extractor.client.json",
     "lint": "eslint --cache --ext .ts src/**",
     "format": "prettier --write --cache --parser typescript \"src/**/*.ts\"",
     "prepublishOnly": "npm run build"
@@ -117,7 +127,8 @@
     "strip-literal": "^0.4.2",
     "tsconfck": "^2.0.1",
     "tslib": "^2.4.0",
-    "types": "link:./types",
+    "dep-types": "link:./src/dep-types",
+    "types": "link:./src/types",
     "ufo": "^0.8.5",
     "ws": "^8.9.0"
   },

packages/vite/scripts/patchTypes.ts

@@ -3,19 +3,20 @@ import { dirname, relative, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import type { ParseResult } from '@babel/parser'
 import { parse } from '@babel/parser'
-import type { File } from '@babel/types'
+import type { File, StringLiteral } from '@babel/types'
 import colors from 'picocolors'
 import MagicString from 'magic-string'
 
 const dir = dirname(fileURLToPath(import.meta.url))
 const tempDir = resolve(dir, '../temp/node')
-const typesDir = resolve(dir, '../types')
+const typesDir = resolve(dir, '../src/types')
+const depTypesDir = resolve(dir, '../src/dep-types')
 
-// walk through the temp dts dir, find all import/export of types/*
+// walk through the temp dts dir, find all import/export of types/*, deps-types/*
 // and rewrite them into relative imports - so that api-extractor actually
 // includes them in the rolled-up final d.ts file.
 walkDir(tempDir)
-console.log(colors.green(colors.bold(`patched types/* imports`)))
+console.log(colors.green(colors.bold(`patched types/*, deps-types/* imports`)))
 
 function slash(p: string): string {
   return p.replace(/\\/g, '/')
@@ -49,20 +50,34 @@ function rewriteFile(file: string): void {
   }
   for (const statement of ast.program.body) {
     if (
-      (statement.type === 'ImportDeclaration' ||
-        statement.type === 'ExportNamedDeclaration' ||
-        statement.type === 'ExportAllDeclaration') &&
-      statement.source?.value.startsWith('types/')
+      statement.type === 'ImportDeclaration' ||
+      statement.type === 'ExportNamedDeclaration' ||
+      statement.type === 'ExportAllDeclaration'
     ) {
       const source = statement.source
-      const absoluteTypePath = resolve(typesDir, source.value.slice(6))
-      const relativeTypePath = slash(relative(dirname(file), absoluteTypePath))
-      str.overwrite(
-        source.start!,
-        source.end!,
-        JSON.stringify(relativeTypePath)
-      )
+      if (source?.value.startsWith('types/')) {
+        rewriteSource(str, source, file, typesDir, 'types')
+      } else if (source?.value.startsWith('dep-types/')) {
+        rewriteSource(str, source, file, depTypesDir, 'dep-types')
+      }
     }
   }
   writeFileSync(file, str.toString())
 }
+
+function rewriteSource(
+  str: MagicString,
+  source: StringLiteral,
+  rewritingFile: string,
+  typesDir: string,
+  typesDirName: string
+) {
+  const absoluteTypePath = resolve(
+    typesDir,
+    source.value.slice(typesDirName.length + 1)
+  )
+  const relativeTypePath = slash(
+    relative(dirname(rewritingFile), absoluteTypePath)
+  )
+  str.overwrite(source.start!, source.end!, JSON.stringify(relativeTypePath))
+}

packages/vite/src/client-types.d.ts

@@ -0,0 +1,23 @@
+export type {
+  CustomEventMap,
+  InferCustomEventPayload
+} from './types/customEvent'
+export type {
+  HMRPayload,
+  ConnectedPayload,
+  UpdatePayload,
+  Update,
+  PrunePayload,
+  FullReloadPayload,
+  CustomPayload,
+  ErrorPayload
+} from './types/hmrPayload'
+export type { ModuleNamespace, ViteHotContext } from './types/hot'
+export type {
+  ImportGlobOptions,
+  GeneralImportGlobOptions,
+  KnownAsTypeMap,
+  ImportGlobFunction,
+  ImportGlobEagerFunction
+} from './types/importGlob'
+export type { ImportMetaEnv, ImportMeta } from './types/importMeta'

packages/vite/src/client/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["./", "../../types"],
+  "include": ["./", "../types"],
   "compilerOptions": {
     "types": [],
     "target": "ES2019",

packages/vite/src/dep-types/alias.d.ts

@@ -0,0 +1,59 @@
+/**
+Types from https://github.com/rollup/plugins/blob/master/packages/alias/types/index.d.ts
+Inlined because the plugin is bundled.
+
+https://github.com/rollup/plugins/blob/master/LICENSE
+
+The MIT License (MIT)
+
+Copyright (c) 2019 RollupJS Plugin Contributors (https://github.com/rollup/plugins/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import type { PluginHooks } from 'rollup'
+
+export interface Alias {
+  find: string | RegExp
+  replacement: string
+  /**
+   * Instructs the plugin to use an alternative resolving algorithm,
+   * rather than the Rollup's resolver.
+   * @default null
+   */
+  customResolver?: ResolverFunction | ResolverObject | null
+}
+
+export type ResolverFunction = PluginHooks['resolveId']
+
+export interface ResolverObject {
+  buildStart?: PluginHooks['buildStart']
+  resolveId: ResolverFunction
+}
+
+/**
+ * Specifies an `Object`, or an `Array` of `Object`,
+ * which defines aliases used to replace values in `import` or `require` statements.
+ * With either format, the order of the entries is important,
+ * in that the first defined rules are applied first.
+ *
+ * This is passed to \@rollup/plugin-alias as the "entries" field
+ * https://github.com/rollup/plugins/tree/master/packages/alias#entries
+ */
+export type AliasOptions = readonly Alias[] | { [find: string]: string }

packages/vite/src/dep-types/anymatch.d.ts

@@ -0,0 +1,5 @@
+export type AnymatchFn = (testString: string) => boolean
+export type AnymatchPattern = string | RegExp | AnymatchFn
+type AnymatchMatcher = AnymatchPattern | AnymatchPattern[]
+
+export { AnymatchMatcher as Matcher }