Merge branch 'main' into feature/shouldInlineAssets

CONTRIBUTING.md

@@ -180,11 +180,17 @@ You can set the `DEBUG` environment variable to turn on debugging logs. E.g. `DE
 
 ### Issue Triaging Workflow
 
-![issue-workflow](./.github/issue-workflow.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./.github/issue-workflow-dark.png">
+  <img src="./.github/issue-workflow.png">
+</picture>
 
 ### Pull Request Review Workflow
 
-![issue-workflow](./.github/pr-workflow.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./.github/pr-workflow-dark.png">
+  <img src="./.github/pr-workflow.png">
+</picture>
 
 ## Notes on Dependencies
 

docs/.vitepress/config.ts

@@ -1,10 +1,26 @@
 import { defineConfig } from 'vitepress'
 
+const ogDescription = 'Next Generation Frontend Tooling'
+const ogImage = 'https://main.vitejs.dev/og-image.png'
+const ogTitle = 'Vite'
+const ogUrl = 'https://main.vitejs.dev'
+
 export default defineConfig({
   title: 'Vite',
   description: 'Next Generation Frontend Tooling',
 
-  head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]],
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:title', content: ogTitle }],
+    ['meta', { property: 'og:image', content: ogImage }],
+    ['meta', { property: 'og:url', content: ogUrl }],
+    ['meta', { property: 'twitter:description', content: ogDescription }],
+    ['meta', { property: 'twitter:title', content: ogTitle }],
+    ['meta', { property: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { property: 'twitter:image', content: ogImage }],
+    ['meta', { property: 'twitter:url', content: ogUrl }]
+  ],
 
   vue: {
     reactivityTransform: true
@@ -41,7 +57,8 @@ export default defineConfig({
       text: 'English',
       items: [
         { text: '简体中文', link: 'https://cn.vitejs.dev' },
-        { text: '日本語', link: 'https://ja.vitejs.dev' }
+        { text: '日本語', link: 'https://ja.vitejs.dev' },
+        { text: 'Español', link: 'https://es.vitejs.dev' }
       ]
     },
 

docs/config/build-options.md

@@ -147,7 +147,7 @@ Produce SSR-oriented build. The value can be a string to directly specify the SS
 
 Set to `false` to disable minification, or specify the minifier to use. The default is [esbuild](https://github.com/evanw/esbuild) which is 20 ~ 40x faster than terser and only 1 ~ 2% worse compression. [Benchmarks](https://github.com/privatenumber/minification-benchmarks)
 
-Note the `build.minify` option is not available when using the `'es'` format in lib mode.
+Note the `build.minify` option does not minify whitespaces when using the `'es'` format in lib mode, as it removes pure annotations and break tree-shaking.
 
 Terser must be installed when it is set to `'terser'`.
 

docs/config/index.md

@@ -61,10 +61,10 @@ Vite also directly supports TS config files. You can use `vite.config.ts` with t
 
 ## Conditional Config
 
-If the config needs to conditional determine options based on the command (`dev`/`serve` or `build`) or the [mode](/guide/env-and-mode) being used, it can export a function instead:
+If the config needs to conditionally determine options based on the command (`dev`/`serve` or `build`), the [mode](/guide/env-and-mode) being used, or if it is an SSR build (`ssrBuild`), it can export a function instead:
 
 ```js
-export default defineConfig(({ command, mode }) => {
+export default defineConfig(({ command, mode, ssrBuild }) => {
   if (command === 'serve') {
     return {
       // dev specific config
@@ -80,6 +80,8 @@ export default defineConfig(({ command, mode }) => {
 
 It is important to note that in Vite's API the `command` value is `serve` during dev (in the cli `vite`, `vite dev`, and `vite serve` are aliases), and `build` when building for production (`vite build`).
 
+Only `ssrBuild` is included instead of a more general `ssr` flag because, during dev, the config is shared by the single server handling SSR and non-SSR requests.
+
 ## Async Config
 
 If the config needs to call async function, it can export a async function instead:

docs/config/preview-options.md

@@ -42,7 +42,7 @@ export default defineConfig({
 - **Type:** `boolean`
 - **Default:** [`server.strictPort`](./server-options#server-strictport)
 
-Set to `true` to exit if port is already in use, instead of automatically try the next available port.
+Set to `true` to exit if port is already in use, instead of automatically trying the next available port.
 
 ## preview.https
 

docs/config/server-options.md

@@ -45,7 +45,7 @@ Specify server port. Note if the port is already being used, Vite will automatic
 
 - **Type:** `boolean`
 
-Set to `true` to exit if port is already in use, instead of automatically try the next available port.
+Set to `true` to exit if port is already in use, instead of automatically trying the next available port.
 
 ## server.https
 

docs/config/shared-options.md

@@ -198,7 +198,7 @@ Configure CSS modules behavior. The options are passed on to [postcss-modules](h
 
 ## css.postcss
 
-- **Type:** `string | (postcss.ProcessOptions & { plugins?: postcss.Plugin[] })`
+- **Type:** `string | (postcss.ProcessOptions & { plugins?: postcss.AcceptedPlugin[] })`
 
 Inline PostCSS config or a custom directory to search PostCSS config from (default is project root).
 
@@ -280,6 +280,8 @@ export default defineConfig({
 })
 ```
 
+When [`build.minify`](./build-options.md#build-minify) is `true`, all minify optimizations are applied by default. To disable [certain aspects](https://esbuild.github.io/api/#minify) of it, set any of `esbuild.minifyIdentifiers`, `esbuild.minifySyntax`, or `esbuild.minifyWhitespace` options to `false`. Note the `esbuild.minify` option can't be used to override `build.minify`.
+
 Set to `false` to disable esbuild transforms.
 
 ## assetsInclude

docs/guide/api-plugin.md

@@ -332,7 +332,7 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
 - **Type:** `IndexHtmlTransformHook | { enforce?: 'pre' | 'post', transform: IndexHtmlTransformHook }`
 - **Kind:** `async`, `sequential`
 
-  Dedicated hook for transforming `index.html`. The hook receives the current HTML string and a transform context. The context exposes the [`ViteDevServer`](./api-javascript#vitedevserver) instance during dev, and exposes the Rollup output bundle during build.
+  Dedicated hook for transforming HTML entry point files such as `index.html`. The hook receives the current HTML string and a transform context. The context exposes the [`ViteDevServer`](./api-javascript#vitedevserver) instance during dev, and exposes the Rollup output bundle during build.
 
   The hook can be async and can return one of the following:
 
@@ -544,7 +544,7 @@ export default defineConfig({
 ```
 
 ::: tip NOTE
-We recommend **alway prefixing** your event names to avoid collisions with other plugins.
+We recommend **always prefixing** your event names to avoid collisions with other plugins.
 :::
 
 On the client side, use [`hot.on`](/guide/api-hmr.html#hot-on-event-cb) to listen to the events:

docs/guide/build.md

@@ -197,45 +197,34 @@ A user may choose to deploy in three different paths:
 - The generated hashed assets (JS, CSS, and other file types like images)
 - The copied [public files](assets.md#the-public-directory)
 
-A single static [base](#public-base-path) isn't enough in these scenarios. Vite provides experimental support for advanced base options during build, using `experimental.buildAdvancedBaseOptions`.
+A single static [base](#public-base-path) isn't enough in these scenarios. Vite provides experimental support for advanced base options during build, using `experimental.renderBuiltUrl`.
 
 ```js
-  experimental: {
-    buildAdvancedBaseOptions: {
-      // Same as base: './'
-      // type: boolean, default: false
-      relative: true
-      // Static base
-      // type: string, default: undefined
-      url: 'https:/cdn.domain.com/'
-      // Dynamic base to be used for paths inside JS
-      // type: (url: string) => string, default: undefined
-      runtime: (url: string) => `window.__toCdnUrl(${url})`
-    },
+experimental: {
+  renderBuiltUrl: (filename: string, { hostType: 'js' | 'css' | 'html' }) => {
+    if (hostType === 'js') {
+      return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` }
+    } else {
+      return { relative: true }
+    }
   }
+}
 ```
 
-When `runtime` is defined, it will be used for hashed assets and public files paths inside JS assets. Inside CSS and HTML generated files, paths will use `url` if defined or fallback to `config.base`.
-
-If `relative` is true and `url` is defined, relative paths will be prefered for assets inside the same group (for example a hashed image referenced from a JS file). And `url` will be used for the paths in HTML entries and for paths between different groups (a public file referenced from a CSS file).
-
-If the hashed assets and public files aren't deployed together, options for each group can be defined independently:
+If the hashed assets and public files aren't deployed together, options for each group can be defined independently using asset `type` included in the third `context` param given to the function.
 
 ```js
   experimental: {
-    buildAdvancedBaseOptions: {
-      assets: {
-        relative: true
-        url: 'https:/cdn.domain.com/assets',
-        runtime: (url: string) => `window.__assetsPath(${url})`
-      },
-      public: {
-        relative: false
-        url: 'https:/www.domain.com/',
-        runtime: (url: string) => `window.__publicPath + ${url}`
+    renderBuiltUrl(filename: string, { hostType: 'js' | 'css' | 'html', type: 'public' | 'asset' }) {
+      if (type === 'public') {
+        return 'https://www.domain.com/' + filename
+      }
+      else if (path.extname(importer) === '.js') {
+        return { runtime: `window.__assetsPath(${JSON.stringify(filename)})` }
+      }
+      else {
+        return 'https://cdn.domain.com/assets/' + filename
       }
     }
   }
 ```
-
-Any option that isn't defined in the `public` or `assets` entry will be inherited from the main `buildAdvancedBaseOptions` config.

docs/guide/comparisons.md

@@ -1,38 +1,4 @@
-# Comparisons with Other No-Bundler Solutions
-
-## Snowpack
-
-[Snowpack](https://www.snowpack.dev/) is also a no-bundle native ESM dev server that is very similar in scope to Vite. Aside from different implementation details, the two projects share a lot in terms of technical advantages over traditional tooling. Vite's dependency pre-bundling is also inspired by Snowpack v1 (now [`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)). Some of the main differences between the two projects are:
-
-**Production Build**
-
-Snowpack's default build output is unbundled: it transforms each file into separate built modules, which can then be fed into different "optimizers" that perform the actual bundling. The benefit of this is that you can choose between different end-bundlers to fit specific needs (e.g. webpack, Rollup, or even esbuild), the downside is that it's a bit of a fragmented experience - for example, the esbuild optimizer is still unstable, the Rollup optimizer is not officially maintained, and different optimizers have different output and configurations.
-
-Vite opts to have a deeper integration with one single bundler (Rollup) in order to provide a more streamlined experience. It also allows Vite to support a [Universal Plugin API](./api-plugin) that works for both dev and build.
-
-Due to a more integrated build process, Vite supports a wide range of features that are currently not available in Snowpack build optimizers:
-
-- [Multi-Page Support](./build#multi-page-app)
-- [Library Mode](./build#library-mode)
-- [Automatic CSS code-splitting](./features#css-code-splitting)
-- [Optimized async chunk loading](./features#async-chunk-loading-optimization)
-- Official [legacy mode plugin](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) that generates dual modern/legacy bundles and auto delivers the right bundle based on browser support.
-
-**Faster Dependency Pre-Bundling**
-
-Vite uses [esbuild](https://esbuild.github.io/) instead of Rollup for dependency pre-bundling. This results in significant performance improvements in terms of cold server start and re-bundling on dependency invalidations.
-
-**Monorepo Support**
-
-Vite is designed to handle monorepo setups and we have users successfully using it with Yarn, Yarn 2, and PNPM based monorepos.
-
-**CSS Pre-Processor Support**
-
-Vite provides more refined support for Sass and Less, including improved `@import` resolution (aliases and npm dependencies) and [automatic `url()` rebasing for inlined files](./features#import-inlining-and-rebasing).
-
-**First Class Vue Support**
-
-Vite was initially created to serve as the future foundation of [Vue.js](https://vuejs.org/) tooling. Although as of 2.0 Vite is now fully framework-agnostic, the official Vue plugin still provides first-class support for Vue's Single File Component format, covering all advanced features such as template asset reference resolving, `<script setup>`, `<style module>`, custom blocks and more. In addition, Vite provides fine-grained HMR for Vue SFCs. For example, updating the `<template>` or `<style>` of an SFC will perform hot updates without resetting its state.
+# Comparisons
 
 ## WMR
 
@@ -47,3 +13,9 @@ WMR is mainly designed for [Preact](https://preactjs.com/) projects, and offers
 `@web/dev-server` is a bit lower-level in terms of scope. It does not provide official framework integrations, and requires manually setting up a Rollup configuration for the production build.
 
 Overall, Vite is a more opinionated / higher-level tool that aims to provide a more out-of-the-box workflow. That said, the `@web` umbrella project contains many other excellent tools that may benefit Vite users as well.
+
+## Snowpack
+
+[Snowpack](https://www.snowpack.dev/) was also a no-bundle native ESM dev server, very similar in scope to Vite. The project is no longer being maintained. The Snowpack team is now working on [Astro](https://astro.build/), a static site builder powered by Vite. The Astro team is now an active player in the ecosystem, and they are helping to improve Vite.
+
+Aside from different implementation details, the two projects shared a lot in terms of technical advantages over traditional tooling. Vite's dependency pre-bundling is also inspired by Snowpack v1 (now [`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)). Some of the main differences between the two projects are listed in [the v2 Comparisons Guide](https://v2.vitejs.dev/guide/comparisons).

docs/guide/index.md

@@ -74,7 +74,7 @@ npm create vite@latest my-vue-app -- --template vue
 yarn create vite my-vue-app --template vue
 
 # pnpm
-pnpm create vite my-vue-app -- --template vue
+pnpm create vite my-vue-app --template vue
 ```
 
 See [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) for more details on each supported template: `vanilla`, `vanilla-ts`, `vue`, `vue-ts`, `react`, `react-ts`, `preact`, `preact-ts`, `lit`, `lit-ts`, `svelte`, `svelte-ts`.

docs/guide/migration.md

@@ -27,7 +27,7 @@ A small fraction of users will now require using [@vitejs/plugin-legacy](https:/
   - `build.polyfillDynamicImport` (use [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) for browsers without dynamic import support)
   - `optimizeDeps.keepNames` (switch to [`optimizeDeps.esbuildOptions.keepNames`](../config/dep-optimization-options.md#optimizedeps-esbuildoptions))
 
-## Achitecture changes and legacy Options
+## Architecture changes and legacy Options
 
 This section describes the biggest architecture changes in Vite v3. To allow projects to migrate from v2 in case of a compat issue, legacy options have been added to revert to the Vite v2 strategies.
 
@@ -100,7 +100,7 @@ You can use `?init` which is similar to the previous behavior.
 -import init from 'example.wasm'
 +import init from 'example.wasm?init'
 
--init().then((instance) => {
+-init().then((exports) => {
 +init().then(({ exports }) => {
   exports.test()
 })

docs/guide/ssr.md

@@ -130,7 +130,7 @@ app.use('*', async (req, res, next) => {
     // 6. Send the rendered HTML back.
     res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
   } catch (e) {
-    // If an error is caught, let Vite fix the stracktrace so it maps back to
+    // If an error is caught, let Vite fix the stack trace so it maps back to
     // your actual source code.
     vite.ssrFixStacktrace(e)
     next(e)

netlify.toml

@@ -3,4 +3,5 @@
   NPM_FLAGS = "--version" # prevent Netlify npm install
 [build]
   publish = "docs/.vitepress/dist"
-  command = "npx pnpm i --store=node_modules/.pnpm-store --frozen-lockfile && npm run ci-docs"
+  command = "npx pnpm i --store=node_modules/.pnpm-store --frozen-lockfile && npm run ci-docs"
+  ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF docs package.json pnpm-lock.yaml netlify.toml"