fix: merge conflict

.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,7 +6,7 @@ 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.
 

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

@@ -789,6 +789,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:**

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/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

@@ -187,7 +187,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>

docs/public/_headers

@@ -1,3 +1,11 @@
 /assets/*
   cache-control: max-age=31536000
-  cache-control: immutable
+  cache-control: immutable
+
+/*.svg
+  cache-control: max-age=604800
+  cache-control: immutable
+
+/*.png
+  cache-control: max-age=604800
+  cache-control: immutable

package.json

@@ -28,40 +28,40 @@
     "ci-docs": "run-s build-vite build-plugin-vue build-docs"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.18.11",
+    "@microsoft/api-extractor": "^7.18.19",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.0.2",
-    "@types/node": "^15.12.2",
-    "@types/semver": "^7.3.8",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@types/node": "^16.11.6",
+    "@types/semver": "^7.3.9",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
+    "@typescript-eslint/parser": "^5.3.0",
     "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.1.0",
-    "eslint-define-config": "^1.1.2",
+    "esbuild": "^0.13.12",
+    "eslint": "^8.2.0",
+    "eslint-define-config": "^1.1.3",
     "eslint-plugin-node": "^11.1.0",
     "execa": "^5.1.1",
     "fs-extra": "^10.0.0",
     "jest": "^27.3.1",
-    "lint-staged": "^11.2.0",
+    "lint-staged": "^11.2.6",
     "minimist": "^1.2.5",
-    "node-fetch": "^2.6.5",
+    "node-fetch": "^2.6.6",
     "npm-run-all": "^4.1.5",
-    "playwright-chromium": "^1.15.1",
+    "playwright-chromium": "^1.16.3",
     "prettier": "2.4.1",
-    "prompts": "^2.4.1",
+    "prompts": "^2.4.2",
     "rimraf": "^3.0.2",
+    "rollup": "^2.59.0",
     "semver": "^7.3.5",
-    "sirv": "^1.0.17",
+    "sirv": "^1.0.18",
     "ts-jest": "^27.0.7",
-    "ts-node": "^10.1.0",
-    "typescript": "~4.4.3",
-    "vitepress": "^0.19.2",
-    "yorkie": "^2.0.0",
-    "rollup": "^2.57.0",
-    "esbuild": "^0.13.2",
-    "vite": "workspace:*"
+    "ts-node": "^10.4.0",
+    "typescript": "~4.4.4",
+    "vite": "workspace:*",
+    "vitepress": "^0.20.1",
+    "yorkie": "^2.0.0"
   },
   "gitHooks": {
     "pre-commit": "lint-staged --concurrent false",

packages/playground/alias/__tests__/alias.spec.ts

@@ -37,3 +37,9 @@ test('optimized dep', async () => {
     '[success] alias optimized'
   )
 })
+
+test('aliased module', async () => {
+  expect(await page.textContent('.aliased-module')).toMatch(
+    '[success] aliased module'
+  )
+})

packages/playground/alias/dir/module/index.js

@@ -0,0 +1 @@
+export const msg = `[success] aliased module`

packages/playground/alias/dir/module/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vite/aliased-module",
+  "private": true,
+  "version": "0.0.0"
+}

packages/playground/alias/index.html

@@ -5,6 +5,7 @@ <h1>Alias</h1>
 <p class="regex"></p>
 <p class="dep"></p>
 <p class="from-script-src"></p>
+<p class="aliased-module"></p>
 
 <div class="optimized"></div>
 
@@ -13,6 +14,7 @@ <h1>Alias</h1>
   import { msg as fsDirMsg } from 'fs-dir/test'
   import { msg as regexMsg } from 'regex/test'
   import { msg as depMsg } from 'dep'
+  import { msg as moduleMsg } from 'aliased-module/index.js'
 
   function text(el, text) {
     document.querySelector(el).textContent = text
@@ -22,6 +24,7 @@ <h1>Alias</h1>
   text('.fs-dir', fsDirMsg)
   text('.regex', regexMsg + ' via regex')
   text('.dep', depMsg)
+  text('.aliased-module', moduleMsg)
 
   import { createApp } from 'vue'
   import { ref } from 'foo'