Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(types): bundle client types #9966

Merged
merged 9 commits into from Sep 24, 2022
2 changes: 1 addition & 1 deletion .eslintignore
@@ -1,4 +1,4 @@
dist
playground-temp
temp

packages/vite/client/types.d.ts
2 changes: 1 addition & 1 deletion .eslintrc.cjs
Expand Up @@ -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'
}
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -5,6 +5,7 @@
*.local
*.log
/.vscode/
/packages/vite/client/types.d.ts
/packages/vite/LICENSE
dist
dist-ssr
Expand Down
1 change: 1 addition & 0 deletions .prettierignore
Expand Up @@ -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
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Expand Up @@ -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`.

Expand Down
21 changes: 15 additions & 6 deletions docs/guide/api-plugin.md
Expand Up @@ -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 {}
}
```
1 change: 0 additions & 1 deletion packages/plugin-legacy/tsconfig.json
Expand Up @@ -12,7 +12,6 @@
"noUnusedLocals": true,
"esModuleInterop": true,
"paths": {
"types/*": ["../vite/types/*"],
"vite": ["../vite/src/node/index.js"]
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/plugin-react/tsconfig.json
Expand Up @@ -12,7 +12,6 @@
"noUnusedLocals": true,
"esModuleInterop": true,
"paths": {
"types/*": ["../vite/types/*"],
"vite": ["../vite/src/node/index.js"]
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/plugin-vue-jsx/tsconfig.json
Expand Up @@ -12,7 +12,6 @@
"noUnusedLocals": true,
"esModuleInterop": true,
"paths": {
"types/*": ["../vite/types/*"],
"vite": ["../vite/src/node/index.js"]
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/plugin-vue/tsconfig.json
Expand Up @@ -14,7 +14,6 @@
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"types/*": ["../vite/types/*"],
"vite": ["../vite/src/node/index.js"]
}
}
Expand Down
54 changes: 54 additions & 0 deletions 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"
}
}
}
}
2 changes: 1 addition & 1 deletion 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 }
Expand Down
10 changes: 10 additions & 0 deletions 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"`
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When vite/client or vite/import-meta is used from a file using moduleResolution: "nodenext", this import needs to be vite/client/types or vite/client/types.js... (vitepress uses moduleResolution: "nodenext")

} from './client/types.js'

declare global {
interface ImportMeta extends ViteImportMeta {}
interface ImportMetaEnv extends ViteImportMetaEnv {}
}
25 changes: 18 additions & 7 deletions packages/vite/package.json
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -116,7 +126,8 @@
"strip-literal": "^0.4.0",
"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.8.1"
},
Expand Down
45 changes: 30 additions & 15 deletions packages/vite/scripts/patchTypes.ts
Expand Up @@ -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, '/')
Expand Down Expand Up @@ -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))
}
23 changes: 23 additions & 0 deletions 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'
2 changes: 1 addition & 1 deletion packages/vite/src/client/tsconfig.json
@@ -1,6 +1,6 @@
{
"extends": "../../tsconfig.base.json",
"include": ["./", "../../types"],
"include": ["./", "../types"],
"compilerOptions": {
"types": [],
"target": "ES2019",
Expand Down
59 changes: 59 additions & 0 deletions 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 }
5 changes: 5 additions & 0 deletions 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 }