Merge branch 'main' into feat/importGlobSubImports

.eslintrc.cjs

@@ -10,6 +10,7 @@ module.exports = defineConfig({
     'plugin:@typescript-eslint/recommended',
     'plugin:regexp/recommended',
   ],
+  ignorePatterns: ['packages/create-vite/template-**'],
   plugins: ['import', 'regexp'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -180,6 +181,21 @@ module.exports = defineConfig({
         '@typescript-eslint/no-empty-function': 'off',
       },
     },
+    {
+      files: ['playground/**'],
+      excludedFiles: [
+        'playground/ssr-resolve/**',
+        'playground/**/*{commonjs,cjs}*/**',
+        'playground/**/*{commonjs,cjs}*',
+        'playground/**/*dep*/**',
+        'playground/resolve/browser-module-field2/index.web.js',
+        'playground/resolve/browser-field/**',
+        'playground/tailwind/**', // blocked by https://github.com/postcss/postcss-load-config/issues/239
+      ],
+      rules: {
+        'import/no-commonjs': 'error',
+      },
+    },
     {
       files: [
         'playground/tsconfig-json/**',

.github/workflows/ci.yml

@@ -58,7 +58,7 @@ jobs:
 
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@9328bab880abf4acc377d77718d28c6ac167f154 # v35.7.2
+        uses: tj-actions/changed-files@cf4fe8759a45edd76ed6215da3529d2dbd2a3c68 # v36.0.9
         with:
           files: |
             docs/**

.github/workflows/publish.yml

@@ -12,6 +12,9 @@ jobs:
     # prevents this action from running on forks
     if: github.repository == 'vitejs/vite'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
     environment: Release
     steps:
       - name: Checkout

.npmrc

@@ -1,10 +1,6 @@
-hoist-pattern[]=*eslint*
-hoist-pattern[]=*babel*
-hoist-pattern[]=@emotion/*
-hoist-pattern[]=postcss
-hoist-pattern[]=pug
-hoist-pattern[]=source-map-support
-hoist-pattern[]=ts-node
+hoist-pattern[]=ts-node # package/vite: postcss-load-config
+hoist-pattern[]=postcss # package/vite
+hoist-pattern[]=pug # playground/tailwind: @vue/compiler-sfc
 strict-peer-dependencies=false
 shell-emulator=true
 auto-install-peers=false

docs/.vitepress/config.ts

@@ -136,6 +136,7 @@ export default defineConfig({
         text: 'Resources',
         items: [
           { text: 'Team', link: '/team' },
+          { text: 'Releases', link: '/releases' },
           {
             items: [
               {

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

@@ -21,8 +21,27 @@ const data = ref()
 const dataHost = 'https://sponsors.vuejs.org'
 const dataUrl = `${dataHost}/vite.json`
 
-// no sponsors yet :(
-const viteSponsors: Pick<Sponsors, 'gold'> = {
+const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
+  special: [
+    // sponsors patak-dev
+    {
+      name: 'StackBlitz',
+      url: 'https://stackblitz.com',
+      img: '/stackblitz.svg',
+    },
+    // sponsors antfu
+    {
+      name: 'NuxtLabs',
+      url: 'https://nuxtlabs.com',
+      img: '/nuxtlabs.svg',
+    },
+    // sponsors bluwy
+    {
+      name: 'Astro',
+      url: 'https://astro.build',
+      img: '/astro.svg',
+    },
+  ],
   gold: [],
 }
 
@@ -46,7 +65,12 @@ export function useSponsor() {
 function mapSponsors(sponsors: Sponsors) {
   return [
     {
-      tier: 'Platinum Sponsor',
+      tier: 'Special Sponsors',
+      size: 'big',
+      items: viteSponsors['special'],
+    },
+    {
+      tier: 'Platinum Sponsors',
       size: 'big',
       items: mapImgPath(sponsors['platinum']),
     },
@@ -58,9 +82,20 @@ function mapSponsors(sponsors: Sponsors) {
   ]
 }
 
+const viteSponsorNames = new Set(
+  Object.values(viteSponsors).flatMap((sponsors) =>
+    sponsors.map((s) => s.name),
+  ),
+)
+
+/**
+ * Map Vue/Vite sponsors data to objects and filter out Vite-specific sponsors
+ */
 function mapImgPath(sponsors: Sponsor[]) {
-  return sponsors.map((sponsor) => ({
-    ...sponsor,
-    img: `${dataHost}/images/${sponsor.img}`,
-  }))
+  return sponsors
+    .filter((sponsor) => !viteSponsorNames.has(sponsor.name))
+    .map((sponsor) => ({
+      ...sponsor,
+      img: `${dataHost}/images/${sponsor.img}`,
+    }))
 }

docs/.vitepress/theme/styles/vars.css

@@ -114,3 +114,7 @@
 .dark .vp-doc .custom-block a {
   transition: color 0.25s;
 }
+
+.vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image {
+  max-width: 124px;
+}

docs/blog/announcing-vite4-3.md

@@ -0,0 +1,86 @@
+---
+sidebar: false
+head:
+  - - meta
+    - property: og:type
+      content: website
+  - - meta
+    - property: og:title
+      content: Announcing Vite 4.3
+  - - meta
+    - property: og:image
+      content: https://vitejs.dev/og-image-announcing-vite4-3.png
+  - - meta
+    - property: og:url
+      content: https://vitejs.dev/blog/announcing-vite4-3
+  - - meta
+    - property: og:description
+      content: Vite 4.3 Release Announcement
+  - - meta
+    - name: twitter:card
+      content: summary_large_image
+---
+
+# Vite 4.3 is out!
+
+_April 20, 2023_
+
+![Vite 4.3 Announcement Cover Image](/og-image-announcing-vite4-3.png)
+
+Quick links:
+
+- Docs: [English](/), [简体中文](https://cn.vitejs.dev/), [日本語](https://ja.vitejs.dev/), [Español](https://es.vitejs.dev/), [Português](https://pt.vitejs.dev/)
+- [Vite 4.3 Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#430-2023-04-20)
+
+## Performance Improvements
+
+In this minor, we focused on improving the dev server performance. The resolve logic got streamlined, improving hot paths and implementing smarter caching for finding `package.json`, TS config files, and resolved URL in general.
+
+You can read a detailed walkthrough of the performance work done in this blog post by one of Vite Contributors: [How we made Vite 4.3 faaaaster 🚀](https://sun0day.github.io/blog/vite/why-vite4_3-is-faster.html).
+
+This sprint resulted in speed improvements across the board compared to Vite 4.2.
+
+These are the performance improvements as measured by [sapphi-red/performance-compare](https://github.com/sapphi-red/performance-compare), which tests an app with 1000 React Components cold and warm dev server startup time as well as HMR times for a root and a leaf component:
+
+| **Vite (babel)**   |  Vite 4.2 | Vite 4.3 | Improvement |
+| :----------------- | --------: | -------: | ----------: |
+| **dev cold start** | 17249.0ms | 5132.4ms |      -70.2% |
+| **dev warm start** |  6027.8ms | 4536.1ms |      -24.7% |
+| **Root HMR**       |    46.8ms |   26.7ms |      -42.9% |
+| **Leaf HMR**       |    27.0ms |   12.9ms |      -52.2% |
+
+| **Vite (swc)**     |  Vite 4.2 | Vite 4.3 | Improvement |
+| :----------------- | --------: | -------: | ----------: |
+| **dev cold start** | 13552.5ms | 3201.0ms |      -76.4% |
+| **dev warm start** |  4625.5ms | 2834.4ms |      -38.7% |
+| **Root HMR**       |    30.5ms |   24.0ms |      -21.3% |
+| **Leaf HMR**       |    16.9ms |   10.0ms |      -40.8% |
+
+![Vite 4.3 vs 4.2 startup time comparison](/vite4-3-startup-time.png)
+
+![Vite 4.3 vs 4.2 HMR time comparison](/vite4-3-hmr-time.png)
+
+You can read more information about the benchmark [here](https://gist.github.com/sapphi-red/25be97327ee64a3c1dce793444afdf6e). Specs and Versions for this performance run:
+
+- CPU: Ryzen 9 5900X, Memory: DDR4-3600 32GB, SSD: WD Blue SN550 NVME SSD
+- Windows 10 Pro 21H2 19044.2846
+- Node.js 18.16.0
+- Vite and React Plugin versions
+  - Vite 4.2 (babel): Vite 4.2.1 + plugin-react 3.1.0
+  - Vite 4.3 (babel): Vite 4.3.0 + plugin-react 4.0.0-beta.1
+  - Vite 4.2 (swc): Vite 4.2.1 + plugin-react-swc 3.2.0
+  - Vite 4.3 (swc): Vite 4.3.0 + plugin-react-swc 3.3.0
+
+Early adopters have also reported seeing 1.5x-2x dev startup time improvement on real apps while testing the Vite 4.3 beta. We'd love to know the results for your apps.
+
+## Profiling
+
+We'll continue to work on Vite's performance. We're working on an official [Benchmark tool](https://github.com/vitejs/vite-benchmark) for Vite that let us get performance metrics for each Pull Request.
+
+And [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) now has more performance-related features to help you identify which plugins or middlewares are the bottleneck for your applications.
+
+Using `vite --profile` (and then pressing `p`) once the page loads will save a CPU profile of the dev server startup. You can open them in an app as [speedscope](https://www.speedscope.app/) to identify performance issues. And you can share your findings with the Vite Team in a [Discussion](https://github.com/vitejs/vite/discussions) or in [Vite's Discord](https://chat.vitejs.dev).
+
+## Next Steps
+
+We decided to do a single Vite Major this year aligning with the [EOL of Node.js 16](https://endoflife.date/nodejs) in September, dropping support for both Node.js 14 and 16 in it. If you would like to get involved, we started a [Vite 5 Discussion](https://github.com/vitejs/vite/discussions/12466) to gather early feedback.

docs/config/build-options.md

@@ -98,7 +98,7 @@ If you specify `build.lib`, `build.assetsInlineLimit` will be ignored and assets
 - **Type:** `boolean`
 - **Default:** `true`
 
-Enable/disable CSS code splitting. When enabled, CSS imported in async chunks will be inlined into the async chunk itself and inserted when the chunk is loaded.
+Enable/disable CSS code splitting. When enabled, CSS imported in async JS chunks will be preserved as chunks and fetched together when the chunk is fetched.
 
 If disabled, all CSS in the entire project will be extracted into a single CSS file.
 

docs/config/dep-optimization-options.md

@@ -65,3 +65,10 @@ Optimizing dependencies in build mode is **experimental**. If enabled, it remove
 
 If you want to try this build strategy, you can use `optimizeDeps.disabled: false`. `@rollup/plugin-commonjs` can be removed by passing `build.commonjsOptions: { include: [] }`.
 :::
+
+## optimizeDeps.needsInterop
+
+- **Experimental**
+- **Type:** `string[]`
+
+Forces ESM interop when importing these dependencies. Vite is able to properly detect when a dependency needs interop, so this option isn't generally needed. However, different combinations of dependencies could cause some of them to be prebundled differently. Adding these packages to `needsInterop` can speed up cold start by avoiding full-page reloads. You'll receive a warning if this is the case for one of your dependencies, suggesting to add the package name to this array in your config.

docs/config/server-options.md

@@ -34,6 +34,13 @@ The second case is when wildcard hosts (e.g. `0.0.0.0`) are used. This is becaus
 
 :::
 
+::: tip Accessing the server on WSL2 from your LAN
+
+When running Vite on WSL2, it is not sufficient to set `host: true` to access the server from your LAN.
+See [the WSL document](https://learn.microsoft.com/en-us/windows/wsl/networking#accessing-a-wsl-2-distribution-from-your-local-area-network-lan) for more details.
+
+:::
+
 ## server.port
 
 - **Type:** `number`

docs/guide/api-plugin.md

@@ -159,7 +159,9 @@ The following hooks are called on each incoming module request:
 - [`load`](https://rollupjs.org/plugin-development/#load)
 - [`transform`](https://rollupjs.org/plugin-development/#transform)
 
-They also have an extended `options` parameter with additional Vite-specific properties. You can read more in the [SSR documentation](/guide/ssr#ssr-specific-plugin-logic).
+These hooks also have an extended `options` parameter with additional Vite-specific properties. You can read more in the [SSR documentation](/guide/ssr#ssr-specific-plugin-logic).
+
+Some `resolveId` calls' `importer` value may be an absolute path for a generic `index.html` at root as it's not always possible to derive the actual importer due to Vite's unbundled dev server pattern. For imports handled within Vite's resolve pipeline, the importer can be tracked during the import analysis phase, providing the correct `importer` value.
 
 The following hooks are called when the server is closed:
 
@@ -343,6 +345,8 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
   - An array of tag descriptor objects (`{ tag, attrs, children }`) to inject to the existing HTML. Each tag can also specify where it should be injected to (default is prepending to `<head>`)
   - An object containing both as `{ html, tags }`
 
+  By default `order` is `undefined`, with this hook applied after the html has been transformed. In order to inject a script that should go through the Vite plugins pipeline, `order: 'pre'` will apply the hook before processing the HTML. `order: 'post'` applies the hook after all hooks with `order` undefined are applied.
+
   **Basic Example:**
 
   ```js

docs/guide/build.md

@@ -114,6 +114,8 @@ export default defineConfig({
 
 If you specify a different root, remember that `__dirname` will still be the folder of your vite.config.js file when resolving the input paths. Therefore, you will need to add your `root` entry to the arguments for `resolve`.
 
+Note that for HTML files, Vite ignores the name given to the entry in the `rollupOptions.input` object and instead respects the resolved id of the file when generating the HTML asset in the dist folder. This ensures a consistent structure with the way the dev server works.
+
 ## Library Mode
 
 When you are developing a browser-oriented library, you are likely spending most of the time on a test/demo page that imports your actual library. With Vite, you can use your `index.html` for that purpose to get the smooth development experience.

docs/guide/cli.md

@@ -98,7 +98,7 @@ vite optimize [root]
 
 ### `vite preview`
 
-Locally preview production build.
+Locally preview the production build. Do not use this as a production server as it's not designed for it.
 
 #### Usage
 

docs/guide/features.md

@@ -138,8 +138,8 @@ Vite provides first-class Vue support:
 
 - Vue 3 SFC support via [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue)
 - Vue 3 JSX support via [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx)
-- Vue 2.7 support via [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2)
-- Vue <2.7 support via [vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2)
+- Vue 2.7 SFC support via [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2)
+- Vue 2.7 JSX support via [@vitejs/plugin-vue2-jsx](https://github.com/vitejs/vite-plugin-vue2-jsx)
 
 ## JSX
 
@@ -351,7 +351,7 @@ const modules = {
 `import.meta.glob` also supports importing files as strings (similar to [Importing Asset as String](https://vitejs.dev/guide/assets.html#importing-asset-as-string)) with the [Import Reflection](https://github.com/tc39/proposal-import-reflection) syntax:
 
 ```js
-const modules = import.meta.glob('./dir/*.js', { as: 'raw' })
+const modules = import.meta.glob('./dir/*.js', { as: 'raw', eager: true })
 ```
 
 The above will be transformed into the following:
@@ -541,7 +541,7 @@ import MyWorker from './worker?worker'
 const worker = new MyWorker()
 ```
 
-The worker script can also use `import` statements instead of `importScripts()` - note during dev this relies on browser native support and currently only works in Chrome, but for the production build it is compiled away.
+The worker script can also use ESM `import` statements instead of `importScripts()`. **Note**: During dev this relies on [browser native support](https://caniuse.com/?search=module%20worker) (currently not supported in Firefox), but for the production build it is compiled away.
 
 By default, the worker script will be emitted as a separate chunk in the production build. If you wish to inline the worker as base64 strings, add the `inline` query:
 

docs/guide/index.md

@@ -110,6 +110,7 @@ Vite also supports [multi-page apps](./build#multi-page-app) with multiple `.htm
 #### Specifying Alternative Root
 
 Running `vite` starts the dev server using the current working directory as root. You can specify an alternative root with `vite serve some/sub/dir`.
+Note that Vite will also resolve [its config file (i.e. `vite.config.js`)](/config/#configuring-vite) inside the project root, so you'll need to move it if the root is changed.
 
 ## Command Line Interface
 

docs/guide/troubleshooting.md

@@ -154,3 +154,14 @@ If these code are used inside dependencies, you could use [`patch-package`](http
 ### Browser extensions
 
 Some browser extensions (like ad-blockers) may prevent the Vite client from sending requests to the Vite dev server. You may see a white screen without logged errors in this case. Try disabling extensions if you have this issue.
+
+### Cross drive links on Windows
+
+If there's a cross drive links in your project on Windows, Vite may not work.
+
+An example of cross drive links are:
+
+- a virtual drive linked to a folder by `subst` command
+- a symlink/junction to a different drive by `mklink` command (e.g. Yarn global cache)
+
+Related issue: [#10802](https://github.com/vitejs/vite/issues/10802)

docs/plugins/index.md

@@ -18,7 +18,11 @@ Check out [Using Plugins](../guide/using-plugins) for information on how to use
 
 ### [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2)
 
-- Provides Vue 2 Single File Components support.
+- Provides Vue 2.7 Single File Components support.
+
+### [@vitejs/plugin-vue2-jsx](https://github.com/vitejs/vite-plugin-vue2-jsx)
+
+- Provides Vue 2.7 JSX support (via [dedicated Babel transform](https://github.com/vuejs/jsx-vue2/)).
 
 ### [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react)