chore: rebase

.github/workflows/ci.yml

@@ -13,6 +13,8 @@ on:
       - feat/*
       - fix/*
       - perf/*
+      - v1
+      - v2
   pull_request:
   workflow_dispatch:
 

README.md

@@ -35,6 +35,8 @@ In addition, Vite is highly extensible via its [Plugin API](https://vitejs.dev/g
 
 ## Packages
 
+> This branch is for the upcoming v3.0, if you are looking for current stable releases, check the [`v2` branch](https://github.com/vitejs/vite/tree/v2) instead.
+
 | Package                                           | Version (click for changelogs)                                                                                                       |
 | ------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
 | [vite](packages/vite)                             | [![vite version](https://img.shields.io/npm/v/vite.svg?label=%20)](packages/vite/CHANGELOG.md)                                       |

docs/.vitepress/config.js → docs/.vitepress/config.ts

@@ -1,9 +1,6 @@
-// @ts-check
+import { defineConfig } from 'vitepress'
 
-/**
- * @type {import('vitepress').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   title: 'Vite',
   description: 'Next Generation Frontend Tooling',
   head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]],
@@ -64,6 +61,15 @@ module.exports = {
           }
         ]
       },
+      {
+        text: 'v3 (next)',
+        items: [
+          {
+            text: 'v2.x (stable)',
+            link: 'https://v2.vitejs.dev'
+          }
+        ]
+      },
       {
         text: 'Languages',
         items: [
@@ -169,4 +175,4 @@ module.exports = {
       ]
     }
   }
-}
+})

docs/guide/api-plugin.md

@@ -305,6 +305,28 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
 
   Note `configureServer` is not called when running the production build so your other hooks need to guard against its absence.
 
+### `configurePreviewServer`
+
+- **Type:** `(server: { middlewares: Connect.Server, httpServer: http.Server }) => (() => void) | void | Promise<(() => void) | void>`
+- **Kind:** `async`, `sequential`
+
+  Same as [`configureServer`](/guide/api-plugin.html#configureserver) but for the preview server. It provides the [connect](https://github.com/senchalabs/connect) server and its underlying [http server](https://nodejs.org/api/http.html). Similarly to `configureServer`, the `configurePreviewServer` hook is called before other middlewares are installed. If you want to inject a middleware **after** other middlewares, you can return a function from `configurePreviewServer`, which will be called after internal middlewares are installed:
+
+  ```js
+  const myPlugin = () => ({
+    name: 'configure-preview-server',
+    configurePreviewServer(server) {
+      // return a post hook that is called after other middlewares are
+      // installed
+      return () => {
+        server.middlewares.use((req, res, next) => {
+          // custom handle request...
+        })
+      }
+    }
+  })
+  ```
+
 ### `transformIndexHtml`
 
 - **Type:** `IndexHtmlTransformHook | { enforce?: 'pre' | 'post', transform: IndexHtmlTransformHook }`

docs/guide/features.md

@@ -282,10 +282,10 @@ for (const path in modules) {
 }
 ```
 
-Matched files are by default lazy loaded via dynamic import and will be split into separate chunks during build. If you'd rather import all the modules directly (e.g. relying on side-effects in these modules to be applied first), you can use `import.meta.globEager` instead:
+Matched files are by default lazy-loaded via dynamic import and will be split into separate chunks during build. If you'd rather import all the modules directly (e.g. relying on side-effects in these modules to be applied first), you can pass `{ eager: true }` as the second argument:
 
 ```js
-const modules = import.meta.globEager('./dir/*.js')
+const modules = import.meta.glob('./dir/*.js', { eager: true })
 ```
 
 The above will be transformed into the following:
@@ -300,7 +300,9 @@ const modules = {
 }
 ```
 
-`import.meta.glob` and `import.meta.globEager` also support 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:
+### Glob Import As
+
+`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' })
@@ -311,18 +313,115 @@ The above will be transformed into the following:
 ```js
 // code produced by vite
 const modules = {
-  './dir/foo.js': '{\n  "msg": "foo"\n}\n',
-  './dir/bar.js': '{\n  "msg": "bar"\n}\n'
+  './dir/foo.js': 'export default "foo"\n',
+  './dir/bar.js': 'export default "bar"\n'
+}
+```
+
+`{ as: 'url' }` is also supported for loading assets as URLs.
+
+### Multiple Patterns
+
+The first argument can be an array of globs, for example
+
+```js
+const modules = import.meta.glob(['./dir/*.js', './another/*.js'])
+```
+
+### Negative Patterns
+
+Negative glob patterns are also supported (prefixed with `!`). To ignore some files from the result, you can add exclude glob patterns to the first argument:
+
+```js
+const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])
+```
+
+```js
+// code produced by vite
+const modules = {
+  './dir/foo.js': () => import('./dir/foo.js')
+}
+```
+
+#### Named Imports
+
+It's possible to only import parts of the modules with the `import` options.
+
+```ts
+const modules = import.meta.glob('./dir/*.js', { import: 'setup' })
+```
+
+```ts
+// code produced by vite
+const modules = {
+  './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup),
+  './dir/bar.js': () => import('./dir/bar.js').then((m) => m.setup)
+}
+```
+
+When combined with `eager` it's even possible to have tree-shaking enabled for those modules.
+
+```ts
+const modules = import.meta.glob('./dir/*.js', { import: 'setup', eager: true })
+```
+
+```ts
+// code produced by vite:
+import { setup as __glob__0_0 } from './dir/foo.js'
+import { setup as __glob__0_1 } from './dir/bar.js'
+const modules = {
+  './dir/foo.js': __glob__0_0,
+  './dir/bar.js': __glob__0_1
+}
+```
+
+Set `import` to `default` to import the default export.
+
+```ts
+const modules = import.meta.glob('./dir/*.js', {
+  import: 'default',
+  eager: true
+})
+```
+
+```ts
+// code produced by vite:
+import __glob__0_0 from './dir/foo.js'
+import __glob__0_1 from './dir/bar.js'
+const modules = {
+  './dir/foo.js': __glob__0_0,
+  './dir/bar.js': __glob__0_1
+}
+```
+
+#### Custom Queries
+
+You can also use the `query` option to provide custom queries to imports for other plugins to consume.
+
+```ts
+const modules = import.meta.glob('./dir/*.js', {
+  query: { foo: 'bar', bar: true }
+})
+```
+
+```ts
+// code produced by vite:
+const modules = {
+  './dir/foo.js': () =>
+    import('./dir/foo.js?foo=bar&bar=true').then((m) => m.setup),
+  './dir/bar.js': () =>
+    import('./dir/bar.js?foo=bar&bar=true').then((m) => m.setup)
 }
 ```
 
+### Glob Import Caveats
+
 Note that:
 
 - This is a Vite-only feature and is not a web or ES standard.
 - The glob patterns are treated like import specifiers: they must be either relative (start with `./`) or absolute (start with `/`, resolved relative to project root) or an alias path (see [`resolve.alias` option](/config/#resolve-alias)).
-- The glob matching is done via `fast-glob` - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax).
-- You should also be aware that glob imports do not accept variables, you need to directly pass the string pattern.
-- The glob patterns cannot contain the same quote string (i.e. `'`, `"`, `` ` ``) as outer quotes, e.g. `'/Tom\'s files/**'`, use `"/Tom's files/**"` instead.
+- The glob matching is done via [`fast-glob`](https://github.com/mrmlnc/fast-glob) - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax).
+- You should also be aware that all the arguments in the `import.meta.glob` must be **passed as literals**. You can NOT use variables or expressions in them.
 
 ## WebAssembly
 

packages/playground/assets/__tests__/assets.spec.ts

@@ -145,8 +145,8 @@ describe('css url() references', () => {
     expect(await getBg('.css-url-quotes-base64-inline')).toMatch(match)
     const icoMatch = isBuild ? `data:image/x-icon;base64` : `favicon.ico`
     const el = await page.$(`link.ico`)
-    const herf = await el.getAttribute('href')
-    expect(herf).toMatch(icoMatch)
+    const href = await el.getAttribute('href')
+    expect(href).toMatch(icoMatch)
   })
 
   test('multiple urls on the same line', async () => {

packages/playground/css/main.js

@@ -80,12 +80,14 @@ text('.inlined-code', inlined)
 
 // glob
 const glob = import.meta.glob('./glob-import/*.css')
-Promise.all(Object.keys(glob).map((key) => glob[key]())).then((res) => {
+Promise.all(
+  Object.keys(glob).map((key) => glob[key]().then((i) => i.default))
+).then((res) => {
   text('.imported-css-glob', JSON.stringify(res, null, 2))
 })
 
 // globEager
-const globEager = import.meta.globEager('./glob-import/*.css')
+const globEager = import.meta.glob('./glob-import/*.css', { eager: true })
 text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
 
 import postcssSourceInput from './postcss-source-input.css?query=foo'

packages/playground/glob-import/__tests__/glob-import.spec.ts

@@ -42,7 +42,7 @@ const allResult = {
   },
   '/dir/index.js': {
     globWithAlias: {
-      './alias.js': {
+      '/dir/alias.js': {
         default: 'hi'
       }
     },
@@ -67,7 +67,7 @@ const rawResult = {
 }
 
 const relativeRawResult = {
-  '../glob-import/dir/baz.json': {
+  './dir/baz.json': {
     msg: 'baz'
   }
 }

packages/playground/glob-import/dir/index.js

@@ -1,4 +1,4 @@
-const modules = import.meta.globEager('./*.(js|ts)')
-const globWithAlias = import.meta.globEager('@dir/al*.js')
+const modules = import.meta.glob('./*.(js|ts)', { eager: true })
+const globWithAlias = import.meta.glob('@dir/al*.js', { eager: true })
 
 export { modules, globWithAlias }

packages/playground/glob-import/dir/nested/bar.js

@@ -1,4 +1,4 @@
-const modules = import.meta.globEager('../*.json')
+const modules = import.meta.glob('../*.json', { eager: true })
 
 export const msg = 'bar'
 export { modules }

packages/playground/glob-import/index.html

@@ -40,8 +40,9 @@
 </script>
 
 <script type="module">
-  const rawModules = import.meta.globEager('/dir/*.json', {
-    as: 'raw'
+  const rawModules = import.meta.glob('/dir/*.json', {
+    as: 'raw',
+    eager: true
   })
   const globraw = {}
   Object.keys(rawModules).forEach((key) => {
@@ -55,12 +56,10 @@
 </script>
 
 <script type="module">
-  const relativeRawModules = import.meta.globEager(
-    '../glob-import/dir/*.json',
-    {
-      as: 'raw'
-    }
-  )
+  const relativeRawModules = import.meta.glob('../glob-import/dir/*.json', {
+    as: 'raw',
+    eager: true
+  })
   const relativeGlobRaw = {}
   Object.keys(relativeRawModules).forEach((key) => {
     relativeGlobRaw[key] = JSON.parse(relativeRawModules[key])

packages/playground/optimize-deps/index.html

@@ -76,7 +76,7 @@ <h2>Reused variable names</h2>
 
 <script type="module">
   // test dep detection in globbed files
-  const globbed = import.meta.globEager('./glob/*.js')
+  const globbed = import.meta.glob('./glob/*.js', { eager: true })
 
   import { camelCase } from 'dep-linked'
   text('.deps-linked', camelCase('foo-bar-baz'))

packages/playground/ssr-react/src/App.jsx

@@ -2,7 +2,7 @@ import { Link, Route, Switch } from 'react-router-dom'
 
 // Auto generates routes from files under ./pages
 // https://vitejs.dev/guide/features.html#glob-import
-const pages = import.meta.globEager('./pages/*.jsx')
+const pages = import.meta.glob('./pages/*.jsx', { eager: true })
 
 const routes = Object.keys(pages).map((path) => {
   const name = path.match(/\.\/pages\/(.*)\.jsx$/)[1]

packages/playground/worker/__tests__/es/es-worker.spec.ts

@@ -118,6 +118,6 @@ test('import.meta.glob in worker', async () => {
   expect(await page.textContent('.importMetaGlob-worker')).toMatch('["')
 })
 
-test('import.meta.globEager in worker', async () => {
+test('import.meta.glob with eager in worker', async () => {
   expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
 })

packages/playground/worker/__tests__/iife/worker.spec.ts

@@ -105,6 +105,6 @@ test('classic worker', async () => {
   expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
 })
 
-test('import.meta.globEager in worker', async () => {
+test('import.meta.glob eager in worker', async () => {
   expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
 })

packages/playground/worker/importMetaGlobEager.worker.js

@@ -1,4 +1,4 @@
-const modules = import.meta.globEager('./modules/*js')
+const modules = import.meta.glob('./modules/*js', { eager: true })
 
 self.onmessage = function (e) {
   self.postMessage(Object.keys(modules))

packages/playground/worker/index.html

@@ -73,7 +73,7 @@ <h2 class="format-iife">format iife:</h2>
 <code class="classic-shared-worker"></code>
 
 <p>
-  use import.meta.globEager in iife worker
+  use import.meta.glob with eager in iife worker
   <span class="classname">.importMetaGlobEager-worker</span>
 </p>
 <code class="importMetaGlobEager-worker"></code>

packages/plugin-vue-jsx/index.js

@@ -48,21 +48,15 @@ function vueJsxPlugin(options = {}) {
     name: 'vite:vue-jsx',
 
     config(config) {
-      const optionsApi = config.define
-        ? config.define.__VUE_OPTIONS_API__
-        : undefined
-      const devTools = config.define
-        ? config.define.__VUE_PROD_DEVTOOLS__
-        : undefined
       return {
         // only apply esbuild to ts files
         // since we are handling jsx and tsx now
         esbuild: {
           include: /\.ts$/
         },
         define: {
-          __VUE_OPTIONS_API__: optionsApi != null ? optionsApi : true,
-          __VUE_PROD_DEVTOOLS__: devTools != null ? devTools : false
+          __VUE_OPTIONS_API__: config.define?.__VUE_OPTIONS_API__ ?? true,
+          __VUE_PROD_DEVTOOLS__: config.define?.__VUE_PROD_DEVTOOLS__ ?? false
         }
       }
     },