chore: merge main

.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = defineConfig({
   root: true,
   extends: [
     'eslint:recommended',
-    'plugin:node/recommended',
+    'plugin:n/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:regexp/recommended',
   ],
@@ -29,37 +29,32 @@ module.exports = defineConfig({
       },
     ],
 
-    'node/no-missing-import': [
-      'error',
-      {
-        allowModules: ['types', 'estree', 'less', 'sass', 'stylus'],
-        tryExtensions: ['.ts', '.js', '.jsx', '.tsx', '.d.ts'],
-      },
-    ],
-    'node/no-missing-require': [
+    'n/no-process-exit': 'off',
+    'n/no-missing-import': 'off',
+    'n/no-missing-require': [
       'error',
       {
         // for try-catching yarn pnp
         allowModules: ['pnpapi', 'vite'],
         tryExtensions: ['.ts', '.js', '.jsx', '.tsx', '.d.ts'],
       },
     ],
-    'node/no-extraneous-import': [
+    'n/no-extraneous-import': [
       'error',
       {
-        allowModules: ['vite', 'less', 'sass', 'vitest'],
+        allowModules: ['vite', 'less', 'sass', 'vitest', 'unbuild'],
       },
     ],
-    'node/no-extraneous-require': [
+    'n/no-extraneous-require': [
       'error',
       {
         allowModules: ['vite'],
       },
     ],
-    'node/no-deprecated-api': 'off',
-    'node/no-unpublished-import': 'off',
-    'node/no-unpublished-require': 'off',
-    'node/no-unsupported-features/es-syntax': 'off',
+    'n/no-deprecated-api': 'off',
+    'n/no-unpublished-import': 'off',
+    'n/no-unpublished-require': 'off',
+    'n/no-unsupported-features/es-syntax': 'off',
 
     '@typescript-eslint/ban-ts-comment': 'error',
     '@typescript-eslint/ban-types': 'off', // TODO: we should turn this on in a new PR
@@ -118,7 +113,7 @@ module.exports = defineConfig({
     {
       files: 'packages/vite/**/*.*',
       rules: {
-        'node/no-restricted-require': [
+        'n/no-restricted-require': [
           'error',
           Object.keys(
             require('./packages/vite/package.json').devDependencies,
@@ -141,32 +136,32 @@ module.exports = defineConfig({
     {
       files: ['packages/vite/src/types/**', '*.spec.ts'],
       rules: {
-        'node/no-extraneous-import': 'off',
+        'n/no-extraneous-import': 'off',
       },
     },
     {
       files: ['packages/create-vite/template-*/**', '**/build.config.ts'],
       rules: {
         'no-undef': 'off',
-        'node/no-missing-import': 'off',
+        'n/no-missing-import': 'off',
         '@typescript-eslint/explicit-module-boundary-types': 'off',
       },
     },
     {
       files: ['playground/**'],
       rules: {
-        'node/no-extraneous-import': 'off',
-        'node/no-extraneous-require': 'off',
-        'node/no-missing-import': 'off',
-        'node/no-missing-require': 'off',
+        'n/no-extraneous-import': 'off',
+        'n/no-extraneous-require': 'off',
+        'n/no-missing-import': 'off',
+        'n/no-missing-require': 'off',
         // engine field doesn't exist in playgrounds
-        'node/no-unsupported-features/es-builtins': [
+        'n/no-unsupported-features/es-builtins': [
           'error',
           {
             version: '^14.18.0 || >=16.0.0',
           },
         ],
-        'node/no-unsupported-features/node-builtins': [
+        'n/no-unsupported-features/node-builtins': [
           'error',
           {
             version: '^14.18.0 || >=16.0.0',

.github/workflows/ci.yml

@@ -39,7 +39,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node_version: [14, 16, 18]
+        node_version: [14, 16, 18, 20]
         include:
           # Active LTS + other OS
           - os: macos-latest
@@ -58,7 +58,7 @@ jobs:
 
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@04124efe7560d15e11ea2ba96c0df2989f68f1f4 # v35.6.1
+        uses: tj-actions/changed-files@9328bab880abf4acc377d77718d28c6ac167f154 # v35.7.2
         with:
           files: |
             docs/**
@@ -67,8 +67,14 @@ jobs:
             packages/create-vite/template**
             **.md
 
+      - name: Install pnpm (node 14, pnpm 7)
+        if: steps.changed-files.outputs.only_changed != 'true' && matrix.node_version == 14
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7
+
       - name: Install pnpm
-        if: steps.changed-files.outputs.only_changed != 'true'
+        if: steps.changed-files.outputs.only_changed != 'true' && matrix.node_version != 14
         uses: pnpm/action-setup@v2.2.4
 
       - name: Set node version to ${{ matrix.node_version }}

docs/.vitepress/config.ts

@@ -94,10 +94,6 @@ export default defineConfig({
     pt: { label: 'Português', link: 'https://pt.vitejs.dev' },
   },
 
-  vue: {
-    reactivityTransform: true,
-  },
-
   themeConfig: {
     logo: '/logo.svg',
 

docs/.vitepress/theme/components/HomeSponsors.vue

@@ -9,8 +9,59 @@ const { data } = useSponsor()
   <VPHomeSponsors
     v-if="data"
     message="Vite is free and open source, made possible by wonderful sponsors."
-    action-text="Become a sponsor"
-    action-link="https://github.com/sponsors/yyx990803"
     :data="data"
   />
+  <div class="action">
+    <a
+      class="sponsor"
+      href="https://github.com/sponsors/vitejs"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Sponsor Vite
+    </a>
+    <a
+      class="sponsor"
+      href="https://github.com/sponsors/yyx990803"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Sponsor Evan You
+    </a>
+  </div>
 </template>
+
+<style scoped>
+.action {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  padding-top: 4rem;
+}
+
+.sponsor {
+  /* .VPButton */
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  /* .VPButton.medium */
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+  /* .VPButton.sponsor */
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.sponsor:hover {
+  /* .VPButton.sponsor:hover */
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+</style>

docs/.vitepress/theme/composables/sponsor.ts

@@ -21,6 +21,11 @@ const data = ref()
 const dataHost = 'https://sponsors.vuejs.org'
 const dataUrl = `${dataHost}/vite.json`
 
+// no sponsors yet :(
+const viteSponsors: Pick<Sponsors, 'gold'> = {
+  gold: [],
+}
+
 export function useSponsor() {
   onMounted(async () => {
     if (data.value) {
@@ -48,7 +53,7 @@ function mapSponsors(sponsors: Sponsors) {
     {
       tier: 'Gold Sponsors',
       size: 'medium',
-      items: mapImgPath(sponsors['gold']),
+      items: viteSponsors['gold'].concat(mapImgPath(sponsors['gold'])),
     },
   ]
 }

docs/_data/team.js

@@ -120,7 +120,23 @@ export const core = [
     name: 'Dominik G.',
     title: 'Resident CI Expert',
     desc: 'Team Member of Vite and Svelte',
-    links: [{ icon: 'github', link: 'https://github.com/dominikg' }],
+    links: [
+      { icon: 'github', link: 'https://github.com/dominikg' },
+      { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@dominikg' },
+    ],
+    sponsor: 'https://github.com/sponsors/dominikg',
+  },
+  {
+    avatar: 'https://github.com/sheremet-va.png',
+    name: 'Vladimir',
+    title: 'Core team member of Vitest & Vite',
+    desc: 'An open source fullstack developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/sheremet-va' },
+      { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@sheremet_va' },
+      { icon: 'twitter', link: 'https://twitter.com/sheremet_va' },
+    ],
+    sponsor: 'https://github.com/sponsors/sheremet-va',
   },
 ]
 

docs/config/build-options.md

@@ -10,7 +10,7 @@ Browser compatibility target for the final bundle. The default value is a Vite s
 
 Another special value is `'esnext'` - which assumes native dynamic imports support and will transpile as little as possible:
 
-- If the [`build.minify`](#build-minify) option is `'terser'`, `'esnext'` will be forced down to `'es2021'`.
+- If the [`build.minify`](#build-minify) option is `'terser'` and the installed Terser version is below 5.16.0, `'esnext'` will be forced down to `'es2021'`.
 - In other cases, it will perform no transpilation at all.
 
 The transform is performed with esbuild and the value should be a valid [esbuild target option](https://esbuild.github.io/api/#target). Custom targets can either be an ES version (e.g. `es2015`), a browser with version (e.g. `chrome58`), or an array of multiple target strings.

docs/config/server-options.md

@@ -324,7 +324,7 @@ export default defineConfig({
 - **Type:** `false | (sourcePath: string, sourcemapPath: string) => boolean`
 - **Default:** `(sourcePath) => sourcePath.includes('node_modules')`
 
-Whether or not to ignore source files in the server sourcemap, used to populate the [`x_google_ignoreList` source map extension](https://developer.chrome.com/blog/devtools-better-angular-debugging/#the-x_google_ignorelist-source-map-extension).
+Whether or not to ignore source files in the server sourcemap, used to populate the [`x_google_ignoreList` source map extension](https://developer.chrome.com/articles/x-google-ignore-list/).
 
 `server.sourcemapIgnoreList` is the equivalent of [`build.rollupOptions.output.sourcemapIgnoreList`](https://rollupjs.org/configuration-options/#output-sourcemapignorelist) for the dev server. A difference between the two config options is that the rollup function is called with a relative path for `sourcePath` while `server.sourcemapIgnoreList` is called with an absolute path. During dev, most modules have the map and the source in the same folder, so the relative path for `sourcePath` is the file name itself. In these cases, absolute paths makes it convenient to be used instead.
 

docs/config/shared-options.md

@@ -111,7 +111,7 @@ When aliasing to file system paths, always use absolute paths. Relative alias va
 More advanced custom resolution can be achieved through [plugins](/guide/api-plugin).
 
 ::: warning Using with SSR
-If you have configured aliases for [SSR externalized dependencies](/guide/ssr.md#ssr-externals), you may want to alias the actual `node_modules` packages. Both [Yarn](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) and [pnpm](https://pnpm.js.org/en/aliases) support aliasing via the `npm:` prefix.
+If you have configured aliases for [SSR externalized dependencies](/guide/ssr.md#ssr-externals), you may want to alias the actual `node_modules` packages. Both [Yarn](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) and [pnpm](https://pnpm.io/aliases/) support aliasing via the `npm:` prefix.
 :::
 
 ## resolve.dedupe
@@ -232,7 +232,7 @@ Specify options to pass to CSS pre-processors. The file extensions are used as k
 - `less` - [Options](https://lesscss.org/usage/#less-options).
 - `styl`/`stylus` - Only [`define`](https://stylus-lang.com/docs/js.html#define-name-node) is supported, which can be passed as an object.
 
-All preprocessor options also support the `additionalData` option, which can be used to inject extra code for each style content.
+All preprocessor options also support the `additionalData` option, which can be used to inject extra code for each style content. Note that if you include actual styles and not just variables, those styles will be duplicated in the final bundle.
 
 Example:
 

docs/config/worker-options.md

@@ -5,7 +5,7 @@ Options related to Web Workers.
 ## worker.format
 
 - **Type:** `'es' | 'iife'`
-- **Default:** `iife`
+- **Default:** `'iife'`
 
 Output format for worker bundle.
 

docs/guide/api-javascript.md

@@ -198,6 +198,46 @@ import { preview } from 'vite'
 })()
 ```
 
+## `PreviewServer`
+
+```ts
+interface PreviewServer extends PreviewServerForHook {
+  resolvedUrls: ResolvedServerUrls
+}
+```
+
+## `PreviewServerForHook`
+
+```ts
+interface PreviewServerForHook {
+  /**
+   * The resolved vite config object
+   */
+  config: ResolvedConfig
+  /**
+   * A connect app instance.
+   * - Can be used to attach custom middlewares to the preview server.
+   * - Can also be used as the handler function of a custom http server
+   *   or as a middleware in any connect-style Node.js frameworks
+   *
+   * https://github.com/senchalabs/connect#use-middleware
+   */
+  middlewares: Connect.Server
+  /**
+   * native Node http server instance
+   */
+  httpServer: http.Server
+  /**
+   * The resolved urls Vite prints on the CLI
+   */
+  resolvedUrls: ResolvedServerUrls | null
+  /**
+   * Print server urls
+   */
+  printUrls(): void
+}
+```
+
 ## `resolveConfig`
 
 **Type Signature:**

docs/guide/api-plugin.md

@@ -309,10 +309,11 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
 
 ### `configurePreviewServer`
 
-- **Type:** `(server: { middlewares: Connect.Server, httpServer: http.Server }) => (() => void) | void | Promise<(() => void) | void>`
+- **Type:** `(server: PreviewServerForHook) => (() => void) | void | Promise<(() => void) | void>`
 - **Kind:** `async`, `sequential`
+- **See also:** [PreviewServerForHook](./api-javascript#previewserverforhook)
 
-  Same as [`configureServer`](/guide/api-plugin.html#configureserver) but for the preview server. It provides the [connect](https://github.com/senchalabs/connect) server and its underlying [http server](https://nodejs.org/api/http.html). Similarly to `configureServer`, the `configurePreviewServer` hook is called before other middlewares are installed. If you want to inject a middleware **after** other middlewares, you can return a function from `configurePreviewServer`, which will be called after internal middlewares are installed:
+  Same as [`configureServer`](/guide/api-plugin.html#configureserver) but for the preview server. Similarly to `configureServer`, the `configurePreviewServer` hook is called before other middlewares are installed. If you want to inject a middleware **after** other middlewares, you can return a function from `configurePreviewServer`, which will be called after internal middlewares are installed:
 
   ```js
   const myPlugin = () => ({

docs/guide/features.md

@@ -74,7 +74,7 @@ You can read more about the transition in the [TypeScript 3.7 release notes](htt
 
 If you are using a library that heavily relies on class fields, please be careful about the library's intended usage of it.
 
-Most libraries expect `"useDefineForClassFields": true`, such as [MobX](https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties), [Vue Class Components 8.x](https://github.com/vuejs/vue-class-component/issues/465), etc.
+Most libraries expect `"useDefineForClassFields": true`, such as [MobX](https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties).
 
 But a few libraries haven't transitioned to this new default yet, including [`lit-element`](https://github.com/lit/lit-element/issues/1030). Please explicitly set `useDefineForClassFields` to `false` in these cases.
 
@@ -96,7 +96,7 @@ Vite's default types are for its Node.js API. To shim the environment of client
 /// <reference types="vite/client" />
 ```
 
-Also, you can add `vite/client` to `compilerOptions.types` of your `tsconfig`:
+Alternatively, you can add `vite/client` to `compilerOptions.types` inside `tsconfig.json`:
 
 ```json
 {

docs/guide/ssr.md

@@ -216,7 +216,7 @@ If a dependency needs to be transformed by Vite's pipeline, for example, because
 For linked dependencies, they are not externalized by default to take advantage of Vite's HMR. If this isn't desired, for example, to test dependencies as if they aren't linked, you can add it to [`ssr.external`](../config/ssr-options.md#ssr-external).
 
 :::warning Working with Aliases
-If you have configured aliases that redirect one package to another, you may want to alias the actual `node_modules` packages instead to make it work for SSR externalized dependencies. Both [Yarn](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) and [pnpm](https://pnpm.js.org/en/aliases) support aliasing via the `npm:` prefix.
+If you have configured aliases that redirect one package to another, you may want to alias the actual `node_modules` packages instead to make it work for SSR externalized dependencies. Both [Yarn](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) and [pnpm](https://pnpm.io/aliases/) support aliasing via the `npm:` prefix.
 :::
 
 ## SSR-specific Plugin Logic