refactor(types): simplify type exports (#10243)

Co-authored-by: 翠 / green <green@sapphi.red>

Author: bluwy

.eslintignore

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

.eslintrc.cjs

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

.gitignore

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

.prettierignore

@@ -9,4 +9,3 @@ 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,10 +218,12 @@ 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/src/dep-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/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`.
 
+For types shared between client and node, they should be added into `packages/vite/types`. These types are not bundled and are published as is (though they are still considered internal). Dependency types within this directory (e.g. `packages/vite/types/chokidar.d.ts`) are deprecated and should be added to `packages/vite/src/types` instead.
+
 ### Think Before Adding Yet Another Option
 
 We already have many config options, and we should avoid fixing an issue by adding yet another one. Before adding an option, consider whether the problem:

docs/guide/api-plugin.md

@@ -595,21 +595,12 @@ It is possible to type custom events by extending the `CustomEventMap` interface
 
 ```ts
 // events.d.ts
-import 'vite'
-import 'vite/client/types'
+import 'vite/types/customEvent'
 
-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 {}
+declare module 'vite/types/customEvent' {
+  interface CustomEventMap {
+    'custom:foo': { msg: string }
+    // 'event-key': payload
+  }
 }
 ```

packages/vite/api-extractor.client.json

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

packages/vite/client.d.ts

@@ -20,24 +20,16 @@
     "./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",
-    "client/types.d.ts"
+    "types"
   ],
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
@@ -55,13 +47,12 @@
     "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-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",
+    "build-types": "run-s build-types-temp build-types-pre-patch build-types-roll build-types-post-patch build-types-check",
+    "build-types-temp": "tsc --emitDeclarationOnly --outDir temp/node -p src/node",
+    "build-types-pre-patch": "tsx scripts/prePatchTypes.ts",
+    "build-types-roll": "api-extractor run && rimraf temp",
+    "build-types-post-patch": "tsx scripts/postPatchTypes.ts",
+    "build-types-check": "tsc --project tsconfig.check.json",
     "lint": "eslint --cache --ext .ts src/**",
     "format": "prettier --write --cache --parser typescript \"src/**/*.ts\"",
     "prepublishOnly": "npm run build"
@@ -127,8 +118,8 @@
     "strip-literal": "^0.4.2",
     "tsconfck": "^2.0.1",
     "tslib": "^2.4.0",
-    "dep-types": "link:./src/dep-types",
-    "types": "link:./src/types",
+    "dep-types": "link:./src/types",
+    "types": "link:./types",
     "ufo": "^0.8.5",
     "ws": "^8.9.0"
   },

packages/vite/import-meta.d.ts

@@ -0,0 +1,16 @@
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import colors from 'picocolors'
+import { rewriteImports } from './util'
+
+const dir = dirname(fileURLToPath(import.meta.url))
+const nodeDts = resolve(dir, '../dist/node/index.d.ts')
+
+// rewrite `types/*` import to relative import
+rewriteImports(nodeDts, (importPath) => {
+  if (importPath.startsWith('types/')) {
+    return '../../' + importPath
+  }
+})
+
+console.log(colors.green(colors.bold(`patched types/* imports`)))

packages/vite/package.json

@@ -0,0 +1,23 @@
+import { dirname, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import colors from 'picocolors'
+import { rewriteImports, slash } from './util'
+
+const dir = dirname(fileURLToPath(import.meta.url))
+const tempDir = resolve(dir, '../temp/node')
+const depTypesDir = resolve(dir, '../src/types')
+
+// walk through the temp dts dir, find all import/export of, deps-types/*
+// and rewrite them into relative imports - so that api-extractor actually
+// includes them in the rolled-up final d.ts file.
+rewriteImports(tempDir, (importPath, currentFile) => {
+  if (importPath.startsWith('dep-types/')) {
+    const absoluteTypePath = resolve(
+      depTypesDir,
+      importPath.slice('dep-types/'.length)
+    )
+    return slash(relative(dirname(currentFile), absoluteTypePath))
+  }
+})
+
+console.log(colors.green(colors.bold(`patched deps-types/* imports`)))

packages/vite/scripts/patchTypes.ts

@@ -0,0 +1,72 @@
+import { readFileSync, readdirSync, statSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import type { ParseResult } from '@babel/parser'
+import { parse } from '@babel/parser'
+import type { File } from '@babel/types'
+import colors from 'picocolors'
+import MagicString from 'magic-string'
+
+export function rewriteImports(
+  fileOrDir: string,
+  rewrite: (importPath: string, currentFile: string) => string | void
+): void {
+  walkDir(fileOrDir, (file) => {
+    rewriteFileImports(file, (importPath) => {
+      return rewrite(importPath, file)
+    })
+  })
+}
+
+export function slash(p: string): string {
+  return p.replace(/\\/g, '/')
+}
+
+function walkDir(dir: string, handleFile: (file: string) => void): void {
+  if (statSync(dir).isDirectory()) {
+    const files = readdirSync(dir)
+    for (const file of files) {
+      const resolved = resolve(dir, file)
+      walkDir(resolved, handleFile)
+    }
+  } else {
+    handleFile(dir)
+  }
+}
+
+function rewriteFileImports(
+  file: string,
+  rewrite: (importPath: string) => string | void
+): void {
+  const content = readFileSync(file, 'utf-8')
+  const str = new MagicString(content)
+  let ast: ParseResult<File>
+  try {
+    ast = parse(content, {
+      sourceType: 'module',
+      plugins: ['typescript', 'classProperties']
+    })
+  } catch (e) {
+    console.log(colors.red(`failed to parse ${file}`))
+    throw e
+  }
+  for (const statement of ast.program.body) {
+    if (
+      statement.type === 'ImportDeclaration' ||
+      statement.type === 'ExportNamedDeclaration' ||
+      statement.type === 'ExportAllDeclaration'
+    ) {
+      const source = statement.source
+      if (source?.value) {
+        const newImportPath = rewrite(source.value)
+        if (newImportPath) {
+          str.overwrite(
+            source.start!,
+            source.end!,
+            JSON.stringify(newImportPath)
+          )
+        }
+      }
+    }
+  }
+  writeFileSync(file, str.toString())
+}

packages/vite/scripts/postPatchTypes.ts

@@ -1,7 +1,8 @@
 // Vitest Snapshot v1
 
 exports[`fixture > transform 1`] = `
-"import * as __vite_glob_1_0 from \\"./modules/a.ts\\";import * as __vite_glob_1_1 from \\"./modules/b.ts\\";import * as __vite_glob_1_2 from \\"./modules/index.ts\\";import { name as __vite_glob_3_0 } from \\"./modules/a.ts\\";import { name as __vite_glob_3_1 } from \\"./modules/b.ts\\";import { name as __vite_glob_3_2 } from \\"./modules/index.ts\\";import { default as __vite_glob_5_0 } from \\"./modules/a.ts?raw\\";import { default as __vite_glob_5_1 } from \\"./modules/b.ts?raw\\";export const basic = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"),\\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\")});
+"import * as __vite_glob_1_0 from \\"./modules/a.ts\\";import * as __vite_glob_1_1 from \\"./modules/b.ts\\";import * as __vite_glob_1_2 from \\"./modules/index.ts\\";import { name as __vite_glob_3_0 } from \\"./modules/a.ts\\";import { name as __vite_glob_3_1 } from \\"./modules/b.ts\\";import { name as __vite_glob_3_2 } from \\"./modules/index.ts\\";import { default as __vite_glob_5_0 } from \\"./modules/a.ts?raw\\";import { default as __vite_glob_5_1 } from \\"./modules/b.ts?raw\\";import \\"types/importMeta\\";
+export const basic = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"),\\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\")});
 export const basicEager = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": __vite_glob_1_0,\\"./modules/b.ts\\": __vite_glob_1_1,\\"./modules/index.ts\\": __vite_glob_1_2});
 export const ignore = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\")});
 export const namedEager = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": __vite_glob_3_0,\\"./modules/b.ts\\": __vite_glob_3_1,\\"./modules/index.ts\\": __vite_glob_3_2});
@@ -19,7 +20,8 @@ export const cleverCwd2 = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": (
 `;
 
 exports[`fixture > transform with restoreQueryExtension 1`] = `
-"import * as __vite_glob_1_0 from \\"./modules/a.ts\\";import * as __vite_glob_1_1 from \\"./modules/b.ts\\";import * as __vite_glob_1_2 from \\"./modules/index.ts\\";import { name as __vite_glob_3_0 } from \\"./modules/a.ts\\";import { name as __vite_glob_3_1 } from \\"./modules/b.ts\\";import { name as __vite_glob_3_2 } from \\"./modules/index.ts\\";import { default as __vite_glob_5_0 } from \\"./modules/a.ts?raw\\";import { default as __vite_glob_5_1 } from \\"./modules/b.ts?raw\\";export const basic = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"),\\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\")});
+"import * as __vite_glob_1_0 from \\"./modules/a.ts\\";import * as __vite_glob_1_1 from \\"./modules/b.ts\\";import * as __vite_glob_1_2 from \\"./modules/index.ts\\";import { name as __vite_glob_3_0 } from \\"./modules/a.ts\\";import { name as __vite_glob_3_1 } from \\"./modules/b.ts\\";import { name as __vite_glob_3_2 } from \\"./modules/index.ts\\";import { default as __vite_glob_5_0 } from \\"./modules/a.ts?raw\\";import { default as __vite_glob_5_1 } from \\"./modules/b.ts?raw\\";import \\"types/importMeta\\";
+export const basic = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"),\\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\")});
 export const basicEager = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": __vite_glob_1_0,\\"./modules/b.ts\\": __vite_glob_1_1,\\"./modules/index.ts\\": __vite_glob_1_2});
 export const ignore = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\")});
 export const namedEager = /* #__PURE__ */ Object.assign({\\"./modules/a.ts\\": __vite_glob_3_0,\\"./modules/b.ts\\": __vite_glob_3_1,\\"./modules/index.ts\\": __vite_glob_3_2});

packages/vite/scripts/prePatchTypes.ts

@@ -1,8 +1,4 @@
-import type { ImportMeta as ViteImportMeta } from 'types/importMeta'
-
-declare global {
-  interface ImportMeta extends ViteImportMeta {}
-}
+import 'types/importMeta'
 
 export interface ModuleType {
   name: string

packages/vite/scripts/util.ts

@@ -1,5 +1,21 @@
-export type {
-  CustomEventMap,
-  InferCustomEventPayload,
-  InvalidatePayload
-} from '../client/types'
+import type {
+  ErrorPayload,
+  FullReloadPayload,
+  PrunePayload,
+  UpdatePayload
+} from './hmrPayload'
+
+export interface CustomEventMap {
+  'vite:beforeUpdate': UpdatePayload
+  'vite:beforePrune': PrunePayload
+  'vite:beforeFullReload': FullReloadPayload
+  'vite:error': ErrorPayload
+  'vite:invalidate': InvalidatePayload
+}
+
+export interface InvalidatePayload {
+  path: string
+}
+
+export type InferCustomEventPayload<T extends string> =
+  T extends keyof CustomEventMap ? CustomEventMap[T] : any

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

@@ -1,10 +1,61 @@
-export type {
-  HMRPayload,
-  ConnectedPayload,
-  UpdatePayload,
-  Update,
-  PrunePayload,
-  FullReloadPayload,
-  CustomPayload,
-  ErrorPayload
-} from '../client/types'
+export type HMRPayload =
+  | ConnectedPayload
+  | UpdatePayload
+  | FullReloadPayload
+  | CustomPayload
+  | ErrorPayload
+  | PrunePayload
+
+export interface ConnectedPayload {
+  type: 'connected'
+}
+
+export interface UpdatePayload {
+  type: 'update'
+  updates: Update[]
+}
+
+export interface Update {
+  type: 'js-update' | 'css-update'
+  path: string
+  acceptedPath: string
+  timestamp: number
+  /**
+   * @experimental internal
+   */
+  explicitImportRequired?: boolean | undefined
+}
+
+export interface PrunePayload {
+  type: 'prune'
+  paths: string[]
+}
+
+export interface FullReloadPayload {
+  type: 'full-reload'
+  path?: string
+}
+
+export interface CustomPayload {
+  type: 'custom'
+  event: string
+  data?: any
+}
+
+export interface ErrorPayload {
+  type: 'error'
+  err: {
+    [name: string]: any
+    message: string
+    stack: string
+    id?: string
+    frame?: string
+    plugin?: string
+    pluginCode?: string
+    loc?: {
+      file?: string
+      line: number
+      column: number
+    }
+  }
+}

packages/vite/src/dep-types/package.json

@@ -1 +1,33 @@
-export type { ModuleNamespace, ViteHotContext } from '../client/types'
+import type { InferCustomEventPayload } from './customEvent'
+
+export type ModuleNamespace = Record<string, any> & {
+  [Symbol.toStringTag]: 'Module'
+}
+
+export interface ViteHotContext {
+  readonly data: any
+
+  accept(): void
+  accept(cb: (mod: ModuleNamespace | undefined) => void): void
+  accept(dep: string, cb: (mod: ModuleNamespace | undefined) => void): void
+  accept(
+    deps: readonly string[],
+    cb: (mods: Array<ModuleNamespace | undefined>) => void
+  ): void
+
+  acceptExports(exportNames: string | readonly string[]): void
+  acceptExports(
+    exportNames: string | readonly string[],
+    cb: (mod: ModuleNamespace | undefined) => void
+  ): void
+
+  dispose(cb: (data: any) => void): void
+  decline(): void
+  invalidate(): void
+
+  on<T extends string>(
+    event: T,
+    cb: (payload: InferCustomEventPayload<T>) => void
+  ): void
+  send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void
+}

packages/vite/src/node/__tests__/plugins/importGlob/__snapshots__/fixture.test.ts.snap

@@ -1,7 +1,97 @@
-export type {
-  ImportGlobOptions,
-  GeneralImportGlobOptions,
-  KnownAsTypeMap,
-  ImportGlobFunction,
-  ImportGlobEagerFunction
-} from '../client/types'
+export interface ImportGlobOptions<
+  Eager extends boolean,
+  AsType extends string
+> {
+  /**
+   * Import type for the import url.
+   */
+  as?: AsType
+  /**
+   * Import as static or dynamic
+   *
+   * @default false
+   */
+  eager?: Eager
+  /**
+   * Import only the specific named export. Set to `default` to import the default export.
+   */
+  import?: string
+  /**
+   * Custom queries
+   */
+  query?: string | Record<string, string | number | boolean>
+  /**
+   * Search files also inside `node_modules/` and hidden directories (e.g. `.git/`). This might have impact on performance.
+   *
+   * @default false
+   */
+  exhaustive?: boolean
+}
+
+export type GeneralImportGlobOptions = ImportGlobOptions<boolean, string>
+
+export interface KnownAsTypeMap {
+  raw: string
+  url: string
+  worker: Worker
+}
+
+export interface ImportGlobFunction {
+  /**
+   * Import a list of files with a glob pattern.
+   *
+   * Overload 1: No generic provided, infer the type from `eager` and `as`
+   */
+  <
+    Eager extends boolean,
+    As extends string,
+    T = As extends keyof KnownAsTypeMap ? KnownAsTypeMap[As] : unknown
+  >(
+    glob: string | string[],
+    options?: ImportGlobOptions<Eager, As>
+  ): (Eager extends true ? true : false) extends true
+    ? Record<string, T>
+    : Record<string, () => Promise<T>>
+  /**
+   * Import a list of files with a glob pattern.
+   *
+   * Overload 2: Module generic provided, infer the type from `eager: false`
+   */
+  <M>(
+    glob: string | string[],
+    options?: ImportGlobOptions<false, string>
+  ): Record<string, () => Promise<M>>
+  /**
+   * Import a list of files with a glob pattern.
+   *
+   * Overload 3: Module generic provided, infer the type from `eager: true`
+   */
+  <M>(
+    glob: string | string[],
+    options: ImportGlobOptions<true, string>
+  ): Record<string, M>
+}
+
+export interface ImportGlobEagerFunction {
+  /**
+   * Eagerly import a list of files with a glob pattern.
+   *
+   * Overload 1: No generic provided, infer the type from `as`
+   */
+  <
+    As extends string,
+    T = As extends keyof KnownAsTypeMap ? KnownAsTypeMap[As] : unknown
+  >(
+    glob: string | string[],
+    options?: Omit<ImportGlobOptions<boolean, As>, 'eager'>
+  ): Record<string, T>
+  /**
+   * Eagerly import a list of files with a glob pattern.
+   *
+   * Overload 2: Module generic provided
+   */
+  <M>(
+    glob: string | string[],
+    options?: Omit<ImportGlobOptions<boolean, string>, 'eager'>
+  ): Record<string, M>
+}

packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/index.ts

@@ -1,13 +1,28 @@
-import type {
-  ImportMeta as ViteImportMeta,
-  ImportMetaEnv as ViteImportMetaEnv
-} from '../client/types'
-
-declare global {
-  interface GlobOptions {
-    as?: string
-  }
-
-  interface ImportMeta extends ViteImportMeta {}
-  interface ImportMetaEnv extends ViteImportMetaEnv {}
+// This file is an augmentation to the built-in ImportMeta interface
+// Thus cannot contain any top-level imports
+// <https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation>
+
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+
+interface ImportMetaEnv {
+  [key: string]: any
+  BASE_URL: string
+  MODE: string
+  DEV: boolean
+  PROD: boolean
+  SSR: boolean
+}
+
+interface ImportMeta {
+  url: string
+
+  readonly hot?: import('./hot').ViteHotContext
+
+  readonly env: ImportMetaEnv
+
+  glob: import('./importGlob').ImportGlobFunction
+  /**
+   * @deprecated Use `import.meta.glob('*', { eager: true })` instead
+   */
+  globEager: import('./importGlob').ImportGlobEagerFunction
 }

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

@@ -1,16 +1,9 @@
-import 'vite'
-import 'vite/client/types'
+import 'vite/types/customEvent'
 
-interface MyCustomEventMap {
-  'custom:foo': { msg: string }
-  'custom:remote-add': { a: number; b: number }
-  'custom:remote-add-result': { result: string }
-}
-
-declare module 'vite' {
-  interface CustomEventMap extends MyCustomEventMap {}
-}
-
-declare module 'vite/client/types' {
-  interface CustomEventMap extends MyCustomEventMap {}
+declare module 'vite/types/customEvent' {
+  interface CustomEventMap {
+    'custom:foo': { msg: string }
+    'custom:remote-add': { a: number; b: number }
+    'custom:remote-add-result': { result: string }
+  }
 }