chore: Merge branch 'main' into feat/import-glob-raw

.github/renovate.json5

@@ -24,14 +24,14 @@
     "typescript",
 
     // breaking changes
-    "source-map",
-    "react-refresh",
+    "cac", // `cac:v6.7.10+` has breaking changes
+    "react-router", // `react-router:v6.0.0+` has breaking changes
+    "react-router-dom", // `react-router-dom:v6.0.0+` has breaking changes
+    "source-map", // `source-map:v0.7.0+` needs more investigation
 
-    // breaks since "3.0.1", needs futher investigate
-    "postcss-load-config",
-
-    // ESM Only
-    "strip-ansi",
-    "periscopic"
+    // ESM Only => https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#how-can-i-move-my-commonjs-project-to-esm
+    "node-fetch",
+    "periscopic",
+    "strip-ansi"
   ]
 }

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node_version: [12, 14, 16]
+        node_version: [12, 14, 16, 17]
         include:
           - os: macos-latest
             node_version: 16

CONTRIBUTING.md

@@ -6,13 +6,15 @@ Hi! We are really excited that you are interested in contributing to Vite. Befor
 
 The Vite repo is a monorepo using pnpm workspaces. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/).
 
-To development and test the core `vite` package:
+To develop and test the core `vite` package:
 
-1. Go to `packages/vite` and run `pnpm run dev`. This starts `rollup` in watch mode.
+1. Run `pnpm i` in Vite's root folder
 
-2. Run `pnpm link --global` in `packages/vite`. This links `vite` globally so that you can:
+2. Go to `packages/vite` and run `pnpm run dev`. This starts `rollup` in watch mode.
 
-   - Run `pnpm link vite` in another Vite project to use the locally built Vite;
+3. Run `pnpm link --global` in `packages/vite`. This links `vite` globally so that you can:
+
+   - Run `pnpm link --global vite` in another Vite project to use the locally built Vite;
    - Use the `vite` binary anywhere.
 
    If your project has `vite` as a nested dependency, you can customize the dependency resolution instead depending on the package manager used. For pnpm, add this in your project's root `package.json`:

docs/.vitepress/theme/index.js

@@ -9,7 +9,7 @@ export default {
   Layout() {
     return h(Theme.Layout, null, {
       'sidebar-bottom': () =>
-        h('div', { class: 'sponsors' }, [
+        h('div', { class: 'sponsors sidebar' }, [
           h(
             'a',
             {

docs/.vitepress/theme/sponsors.css

@@ -5,13 +5,13 @@
 
 .sponsors a {
   color: #999;
+  margin: 1em;
+  display: block;
 }
 
 .sponsors img {
-  max-width: 200px;
-  height: 40px;
-  display: block;
-  margin: 1.25rem 0;
+  max-width: 160px;
+  max-height: 40px;
 }
 
 .sponsors.frontpage {
@@ -21,7 +21,6 @@
 .sponsors.frontpage img {
   display: inline-block;
   vertical-align: middle;
-  margin: 0 1rem 1.25rem 1rem;
 }
 
 .sponsors.frontpage h2 {
@@ -30,7 +29,28 @@
   border: none;
 }
 
+.sponsors.sidebar a img {
+  max-height: 36px;
+}
+
+.platinum-sponsors {
+  margin-bottom: 1.5em;
+}
+
+.platinum-sponsors a img {
+  max-width: 240px;
+  max-height: 60px;
+}
+
+.gold-sponsors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
 /* special cases */
 #sponsor-mux {
   padding: 5px 0;
+  min-height: 36px;
 }

docs/.vitepress/theme/sponsors.json

@@ -1,4 +1,11 @@
 [
+  {
+    "id": "stackblitz",
+    "name": "StackBlitz",
+    "href": "https://stackblitz.com/",
+    "src": "/stackblitz.svg",
+    "tier": "platinum"
+  },
   {
     "id": "tailwind",
     "name": "Tailwind Labs",
@@ -22,5 +29,11 @@
     "name": "Plaid Inc.",
     "href": "https://plaid.co.jp/",
     "src": "/plaid.svg"
+  },
+  {
+    "id": "divriots",
+    "name": "divriots",
+    "href": "https://divriots.com/",
+    "src": "/divriots.png"
   }
 ]

docs/config/index.md

@@ -52,22 +52,25 @@ 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 (`serve` or `build`) or the [mode](/guide/env-and-mode) being used, it can export a function instead:
+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:
 
 ```js
 export default defineConfig(({ command, mode }) => {
   if (command === 'serve') {
     return {
-      // serve specific config
+      // dev specific config
     }
   } else {
+    // command === 'build'
     return {
       // build specific config
     }
   }
 })
 ```
 
+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`).
+
 ### Async Config
 
 If the config needs to call async function, it can export a async function instead:
@@ -741,6 +744,14 @@ export default defineConfig({
 
   When set to `true`, the build will also generate a SSR manifest for determining style links and asset preload directives in production.
 
+### build.ssr
+
+- **Type:** `boolean | string`
+- **Default:** `undefined`
+- **Related:** [Server-Side Rendering](/guide/ssr)
+
+  Produce SSR-oriented build. The value can be a string to directly specify the SSR entry, or `true`, which requires specifying the SSR entry via `rollupOptions.input`.
+
 ### build.minify
 
 - **Type:** `boolean | 'terser' | 'esbuild'`
@@ -789,6 +800,77 @@ export default defineConfig({
 
   Set to `{}` to enable rollup watcher. This is mostly used in cases that involve build-only plugins or integrations processes.
 
+## Preview Options
+
+### preview.host
+
+- **Type:** `string | boolean`
+- **Default:** [`server.host`](#server_host)
+
+  Specify which IP addresses the server should listen on.
+  Set this to `0.0.0.0` or `true` to listen on all addresses, including LAN and public addresses.
+
+  This can be set via the CLI using `--host 0.0.0.0` or `--host`.
+
+### preview.port
+
+- **Type:** `number`
+- **Default:** `5000`
+
+  Specify server port. Note if the port is already being used, Vite will automatically try the next available port so this may not be the actual port the server ends up listening on.
+
+**Example:**
+
+```js
+export default defineConfig({
+  server: {
+    port: 3030
+  },
+  preview: {
+    port: 8080
+  }
+})
+```
+
+### preview.strictPort
+
+- **Type:** `boolean`
+- **Default:** [`server.strictPort`](#server_strictport)
+
+  Set to `true` to exit if port is already in use, instead of automatically try the next available port.
+
+### preview.https
+
+- **Type:** `boolean | https.ServerOptions`
+- **Default:** [`server.https`](#server_https)
+
+  Enable TLS + HTTP/2. Note this downgrades to TLS only when the [`server.proxy` option](#server-proxy) is also used.
+
+  The value can also be an [options object](https://nodejs.org/api/https.html#https_https_createserver_options_requestlistener) passed to `https.createServer()`.
+
+### preview.open
+
+- **Type:** `boolean | string`
+- **Default:** [`server.open`](#server_open)
+
+  Automatically open the app in the browser on server start. When the value is a string, it will be used as the URL's pathname. If you want to open the server in a specific browser you like, you can set the env `process.env.BROWSER` (e.g. `firefox`). See [the `open` package](https://github.com/sindresorhus/open#app) for more details.
+
+### preview.proxy
+
+- **Type:** `Record<string, string | ProxyOptions>`
+- **Default:** [`server.proxy`](#server_proxy)
+
+  Configure custom proxy rules for the dev server. Expects an object of `{ key: options }` pairs. If the key starts with `^`, it will be interpreted as a `RegExp`. The `configure` option can be used to access the proxy instance.
+
+  Uses [`http-proxy`](https://github.com/http-party/node-http-proxy). Full options [here](https://github.com/http-party/node-http-proxy#options).
+
+### preview.cors
+
+- **Type:** `boolean | CorsOptions`
+- **Default:** [`server.cors`](#server_proxy)
+
+  Configure CORS for the dev server. This is enabled by default and allows any origin. Pass an [options object](https://github.com/expressjs/cors) to fine tune the behavior or `false` to disable.
+
 ## Dep Optimization Options
 
 - **Related:** [Dependency Pre-Bundling](/guide/dep-pre-bundling)

docs/guide/api-javascript.md

@@ -25,6 +25,8 @@ const { createServer } = require('vite')
     }
   })
   await server.listen()
+
+  server.printUrls()
 })()
 ```
 
@@ -138,6 +140,34 @@ const { build } = require('vite')
 })()
 ```
 
+## `preview`
+
+**Experimental**
+
+**Type Signature:**
+
+```ts
+async function preview(inlineConfig?: InlineConfig): Promise<PreviewServer>
+```
+
+**Example Usage:**
+
+```js
+const { preview } = require('vite')
+
+;(async () => {
+  const previewServer = await preview({
+    // any valid user config options, plus `mode` and `configFile`
+    preview: {
+      port: 8080,
+      open: true
+    }
+  })
+
+  previewServer.printUrls()
+})()
+```
+
 ## `resolveConfig`
 
 **Type Signature:**
@@ -150,6 +180,8 @@ async function resolveConfig(
 ): Promise<ResolvedConfig>
 ```
 
+The `command` value is `serve` in dev (in the cli `vite`, `vite dev`, and `vite serve` are aliases).
+
 ## `transformWithEsbuild`
 
 **Type Signature:**

docs/guide/api-plugin.md

@@ -222,7 +222,7 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
       // use stored config in other hooks
       transform(code, id) {
         if (config.command === 'serve') {
-          // serve: plugin invoked by dev server
+          // dev: plugin invoked by dev server
         } else {
           // build: plugin invoked by Rollup
         }
@@ -231,6 +231,8 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
   }
   ```
 
+  Note that the `command` value is `serve` in dev (in the cli `vite`, `vite dev`, and `vite serve` are aliases).
+
 ### `configureServer`
 
 - **Type:** `(server: ViteDevServer) => (() => void) | void | Promise<(() => void) | void>`

docs/guide/env-and-mode.md

@@ -62,7 +62,7 @@ To achieve, you can create an `env.d.ts` in `src` directory, then augment `Impor
 ```typescript
 /// <reference types="vite/client" />
 
-interface ImportMetaEnv extends Readonly<Record<string, string>> {
+interface ImportMetaEnv {
   readonly VITE_APP_TITLE: string
   // more env variables...
 }

docs/guide/index.md

@@ -115,10 +115,10 @@ Running `vite` starts the dev server using the current working directory as root
 
 In a project where Vite is installed, you can use the `vite` binary in your npm scripts, or run it directly with `npx vite`. Here is the default npm scripts in a scaffolded Vite project:
 
-```json
+```jsonc
 {
   "scripts": {
-    "dev": "vite", // start dev server
+    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
     "build": "vite build", // build for production
     "preview": "vite preview" // locally preview production build
   }

docs/guide/migration.md

@@ -76,7 +76,7 @@ const vueI18nPlugin = {
       return
     }
     if (/\.ya?ml$/.test(id)) {
-      code = JSON.stringify(require('js-yaml').safeLoad(code.trim()))
+      code = JSON.stringify(require('js-yaml').load(code.trim()))
     }
     return `export default Comp => {
       Comp.i18n = ${code}