Merge branch 'main' into main

.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,11 +6,13 @@ 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` 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.
+
+3. Run `pnpm link --global` in `packages/vite`. This links `vite` globally so that you can:
 
    - Run `pnpm link vite` in another Vite project to use the locally built Vite;
    - Use the `vite` binary anywhere.

docs/.vitepress/theme/sponsors.css

@@ -8,10 +8,15 @@
 }
 
 .sponsors img {
-  max-width: 200px;
+  max-width: 180px;
   height: 40px;
   display: block;
-  margin: 1.25rem 0;
+  margin-top: 1em;
+}
+
+.sponsors a.platinum img {
+  max-width: 240px;
+  height: 60px;
 }
 
 .sponsors.frontpage {

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",

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

@@ -17,7 +17,7 @@ When learning, debugging, or authoring plugins we suggest including [vite-plugin
 
 ## Conventions
 
-If the plugin doesn't use Vite specific hooks and can be implemented as a [Compatible Rollup Plugin](#rollup-plugin-compatibility), then it is recommended to use the [Rollup Plugin naming conventions](https://rollupjs.org/guide/en/#conventions)
+If the plugin doesn't use Vite specific hooks and can be implemented as a [Compatible Rollup Plugin](#rollup-plugin-compatibility), then it is recommended to use the [Rollup Plugin naming conventions](https://rollupjs.org/guide/en/#conventions) (except for virtual modules naming, see note below).
 
 - Rollup Plugins should have a clear name with `rollup-plugin-` prefix.
 - Include `rollup-plugin` and `vite-plugin` keywords in package.json.
@@ -36,6 +36,10 @@ If your plugin is only going to work for a particular framework, its name should
 - `vite-plugin-react-` prefix for React Plugins
 - `vite-plugin-svelte-` prefix for Svelte Plugins
 
+Rollup recommends prefixing the module ID for 'virtual modules' (e.g. for helper functions) with `\0`. This prevents other plugins from trying to process it. But this convention for paths isn't browser-friendly.
+
+Vite convention for virtual modules is to prefix the path with `virtual:`. If possible the plugin name should be used as a namespace to avoid collisions with other plugins in the ecosystem. For example, a `vite-plugin-posts` could ask users to import a `virtual:posts` or `virtual:posts/helpers` virtual modules to get build time information.
+
 ## Plugins config
 
 Users will add plugins to the project `devDependencies` and configure them using the `plugins` array option.
@@ -218,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
         }
@@ -227,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}

docs/guide/static-deploy.md

@@ -33,11 +33,11 @@ By default, the build output will be placed at `dist`. You may deploy this `dist
 
 ### Testing The App Locally
 
-Once you've built the app, you may test it locally by running `npm run serve` command.
+Once you've built the app, you may test it locally by running `npm run preview` command.
 
 ```bash
 $ npm run build
-$ npm run serve
+$ npm run preview
 ```
 
 The `vite preview` command will boot up local static web server that serves the files from `dist` at http://localhost:5000. It's an easy way to check if the production build looks OK in your local environment.
@@ -47,17 +47,13 @@ You may configure the port of the server py passing `--port` flag as an argument
 ```json
 {
   "scripts": {
-    "serve": "vite preview --port 8080"
+    "preview": "vite preview --port 8080"
   }
 }
 ```
 
 Now the `preview` method will launch the server at http://localhost:8080.
 
-::: tip NOTE
-If you change the script name from `serve` to `preview`, you may run into issues with some package managers due to the way they handle [Pre & Post scripts](https://docs.npmjs.com/cli/v7/using-npm/scripts#pre--post-scripts).
-:::
-
 ## GitHub Pages
 
 1. Set the correct `base` in `vite.config.js`.
@@ -88,7 +84,7 @@ If you change the script name from `serve` to `preview`, you may run into issues
    git commit -m 'deploy'
 
    # if you are deploying to https://<USERNAME>.github.io
-   # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
+   # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main
 
    # if you are deploying to https://<USERNAME>.github.io/<REPO>
    # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
@@ -187,7 +183,13 @@ You can also run the above script in your CI setup to enable automatic deploymen
    {
      "hosting": {
        "public": "dist",
-       "ignore": []
+       "ignore": [],
+       "rewrites": [
+         {
+           "source": "**",
+           "destination": "/index.html"
+         }
+       ]
      }
    }
    ```

docs/index.md

@@ -25,7 +25,11 @@ footer: MIT Licensed | Copyright © 2019-present Evan You & Vite Contributors
 
 <div class="frontpage sponsors">
   <h2>Sponsors</h2>
-  <a v-for="{ href, src, name, id } of sponsors" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
+  <a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier === 'platinum')" class="platinum" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
+    <img :src="src" :alt="name" :id="`sponsor-${id}`">
+  </a>
+  <br>
+  <a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier !== 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
     <img :src="src" :alt="name" :id="`sponsor-${id}`">
   </a>
   <br>