Skip to content

Commit

Permalink
Merge branch 'main' into feat/importGlobSubImports
Browse files Browse the repository at this point in the history
  • Loading branch information
patak-dev authored Jun 6, 2023
2 parents 4c69e4f + 1e299cc commit b8bafaa
Show file tree
Hide file tree
Showing 223 changed files with 3,237 additions and 1,566 deletions.
16 changes: 16 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ module.exports = defineConfig({
'plugin:@typescript-eslint/recommended',
'plugin:regexp/recommended',
],
ignorePatterns: ['packages/create-vite/template-**'],
plugins: ['import', 'regexp'],
parser: '@typescript-eslint/parser',
parserOptions: {
Expand Down Expand Up @@ -180,6 +181,21 @@ module.exports = defineConfig({
'@typescript-eslint/no-empty-function': 'off',
},
},
{
files: ['playground/**'],
excludedFiles: [
'playground/ssr-resolve/**',
'playground/**/*{commonjs,cjs}*/**',
'playground/**/*{commonjs,cjs}*',
'playground/**/*dep*/**',
'playground/resolve/browser-module-field2/index.web.js',
'playground/resolve/browser-field/**',
'playground/tailwind/**', // blocked by https://github.com/postcss/postcss-load-config/issues/239
],
rules: {
'import/no-commonjs': 'error',
},
},
{
files: [
'playground/tsconfig-json/**',
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ jobs:

- name: Get changed files
id: changed-files
uses: tj-actions/changed-files@9328bab880abf4acc377d77718d28c6ac167f154 # v35.7.2
uses: tj-actions/changed-files@cf4fe8759a45edd76ed6215da3529d2dbd2a3c68 # v36.0.9
with:
files: |
docs/**
Expand Down
3 changes: 3 additions & 0 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ jobs:
# prevents this action from running on forks
if: github.repository == 'vitejs/vite'
runs-on: ubuntu-latest
permissions:
contents: read
id-token: write
environment: Release
steps:
- name: Checkout
Expand Down
10 changes: 3 additions & 7 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
hoist-pattern[]=*eslint*
hoist-pattern[]=*babel*
hoist-pattern[]=@emotion/*
hoist-pattern[]=postcss
hoist-pattern[]=pug
hoist-pattern[]=source-map-support
hoist-pattern[]=ts-node
hoist-pattern[]=ts-node # package/vite: postcss-load-config
hoist-pattern[]=postcss # package/vite
hoist-pattern[]=pug # playground/tailwind: @vue/compiler-sfc
strict-peer-dependencies=false
shell-emulator=true
auto-install-peers=false
1 change: 1 addition & 0 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ export default defineConfig({
text: 'Resources',
items: [
{ text: 'Team', link: '/team' },
{ text: 'Releases', link: '/releases' },
{
items: [
{
Expand Down
49 changes: 42 additions & 7 deletions docs/.vitepress/theme/composables/sponsor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,27 @@ const data = ref()
const dataHost = 'https://sponsors.vuejs.org'
const dataUrl = `${dataHost}/vite.json`

// no sponsors yet :(
const viteSponsors: Pick<Sponsors, 'gold'> = {
const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
special: [
// sponsors patak-dev
{
name: 'StackBlitz',
url: 'https://stackblitz.com',
img: '/stackblitz.svg',
},
// sponsors antfu
{
name: 'NuxtLabs',
url: 'https://nuxtlabs.com',
img: '/nuxtlabs.svg',
},
// sponsors bluwy
{
name: 'Astro',
url: 'https://astro.build',
img: '/astro.svg',
},
],
gold: [],
}

Expand All @@ -46,7 +65,12 @@ export function useSponsor() {
function mapSponsors(sponsors: Sponsors) {
return [
{
tier: 'Platinum Sponsor',
tier: 'Special Sponsors',
size: 'big',
items: viteSponsors['special'],
},
{
tier: 'Platinum Sponsors',
size: 'big',
items: mapImgPath(sponsors['platinum']),
},
Expand All @@ -58,9 +82,20 @@ function mapSponsors(sponsors: Sponsors) {
]
}

const viteSponsorNames = new Set(
Object.values(viteSponsors).flatMap((sponsors) =>
sponsors.map((s) => s.name),
),
)

/**
* Map Vue/Vite sponsors data to objects and filter out Vite-specific sponsors
*/
function mapImgPath(sponsors: Sponsor[]) {
return sponsors.map((sponsor) => ({
...sponsor,
img: `${dataHost}/images/${sponsor.img}`,
}))
return sponsors
.filter((sponsor) => !viteSponsorNames.has(sponsor.name))
.map((sponsor) => ({
...sponsor,
img: `${dataHost}/images/${sponsor.img}`,
}))
}
4 changes: 4 additions & 0 deletions docs/.vitepress/theme/styles/vars.css
Original file line number Diff line number Diff line change
Expand Up @@ -114,3 +114,7 @@
.dark .vp-doc .custom-block a {
transition: color 0.25s;
}

.vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image {
max-width: 124px;
}
86 changes: 86 additions & 0 deletions docs/blog/announcing-vite4-3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
---
sidebar: false
head:
- - meta
- property: og:type
content: website
- - meta
- property: og:title
content: Announcing Vite 4.3
- - meta
- property: og:image
content: https://vitejs.dev/og-image-announcing-vite4-3.png
- - meta
- property: og:url
content: https://vitejs.dev/blog/announcing-vite4-3
- - meta
- property: og:description
content: Vite 4.3 Release Announcement
- - meta
- name: twitter:card
content: summary_large_image
---

# Vite 4.3 is out!

_April 20, 2023_

![Vite 4.3 Announcement Cover Image](/og-image-announcing-vite4-3.png)

Quick links:

- Docs: [English](/), [简体中文](https://cn.vitejs.dev/), [日本語](https://ja.vitejs.dev/), [Español](https://es.vitejs.dev/), [Português](https://pt.vitejs.dev/)
- [Vite 4.3 Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#430-2023-04-20)

## Performance Improvements

In this minor, we focused on improving the dev server performance. The resolve logic got streamlined, improving hot paths and implementing smarter caching for finding `package.json`, TS config files, and resolved URL in general.

You can read a detailed walkthrough of the performance work done in this blog post by one of Vite Contributors: [How we made Vite 4.3 faaaaster 🚀](https://sun0day.github.io/blog/vite/why-vite4_3-is-faster.html).

This sprint resulted in speed improvements across the board compared to Vite 4.2.

These are the performance improvements as measured by [sapphi-red/performance-compare](https://github.com/sapphi-red/performance-compare), which tests an app with 1000 React Components cold and warm dev server startup time as well as HMR times for a root and a leaf component:

| **Vite (babel)** | Vite 4.2 | Vite 4.3 | Improvement |
| :----------------- | --------: | -------: | ----------: |
| **dev cold start** | 17249.0ms | 5132.4ms | -70.2% |
| **dev warm start** | 6027.8ms | 4536.1ms | -24.7% |
| **Root HMR** | 46.8ms | 26.7ms | -42.9% |
| **Leaf HMR** | 27.0ms | 12.9ms | -52.2% |

| **Vite (swc)** | Vite 4.2 | Vite 4.3 | Improvement |
| :----------------- | --------: | -------: | ----------: |
| **dev cold start** | 13552.5ms | 3201.0ms | -76.4% |
| **dev warm start** | 4625.5ms | 2834.4ms | -38.7% |
| **Root HMR** | 30.5ms | 24.0ms | -21.3% |
| **Leaf HMR** | 16.9ms | 10.0ms | -40.8% |

![Vite 4.3 vs 4.2 startup time comparison](/vite4-3-startup-time.png)

![Vite 4.3 vs 4.2 HMR time comparison](/vite4-3-hmr-time.png)

You can read more information about the benchmark [here](https://gist.github.com/sapphi-red/25be97327ee64a3c1dce793444afdf6e). Specs and Versions for this performance run:

- CPU: Ryzen 9 5900X, Memory: DDR4-3600 32GB, SSD: WD Blue SN550 NVME SSD
- Windows 10 Pro 21H2 19044.2846
- Node.js 18.16.0
- Vite and React Plugin versions
- Vite 4.2 (babel): Vite 4.2.1 + plugin-react 3.1.0
- Vite 4.3 (babel): Vite 4.3.0 + plugin-react 4.0.0-beta.1
- Vite 4.2 (swc): Vite 4.2.1 + plugin-react-swc 3.2.0
- Vite 4.3 (swc): Vite 4.3.0 + plugin-react-swc 3.3.0

Early adopters have also reported seeing 1.5x-2x dev startup time improvement on real apps while testing the Vite 4.3 beta. We'd love to know the results for your apps.

## Profiling

We'll continue to work on Vite's performance. We're working on an official [Benchmark tool](https://github.com/vitejs/vite-benchmark) for Vite that let us get performance metrics for each Pull Request.

And [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) now has more performance-related features to help you identify which plugins or middlewares are the bottleneck for your applications.

Using `vite --profile` (and then pressing `p`) once the page loads will save a CPU profile of the dev server startup. You can open them in an app as [speedscope](https://www.speedscope.app/) to identify performance issues. And you can share your findings with the Vite Team in a [Discussion](https://github.com/vitejs/vite/discussions) or in [Vite's Discord](https://chat.vitejs.dev).

## Next Steps

We decided to do a single Vite Major this year aligning with the [EOL of Node.js 16](https://endoflife.date/nodejs) in September, dropping support for both Node.js 14 and 16 in it. If you would like to get involved, we started a [Vite 5 Discussion](https://github.com/vitejs/vite/discussions/12466) to gather early feedback.
2 changes: 1 addition & 1 deletion docs/config/build-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ If you specify `build.lib`, `build.assetsInlineLimit` will be ignored and assets
- **Type:** `boolean`
- **Default:** `true`
Enable/disable CSS code splitting. When enabled, CSS imported in async chunks will be inlined into the async chunk itself and inserted when the chunk is loaded.
Enable/disable CSS code splitting. When enabled, CSS imported in async JS chunks will be preserved as chunks and fetched together when the chunk is fetched.
If disabled, all CSS in the entire project will be extracted into a single CSS file.
Expand Down
7 changes: 7 additions & 0 deletions docs/config/dep-optimization-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,10 @@ Optimizing dependencies in build mode is **experimental**. If enabled, it remove

If you want to try this build strategy, you can use `optimizeDeps.disabled: false`. `@rollup/plugin-commonjs` can be removed by passing `build.commonjsOptions: { include: [] }`.
:::

## optimizeDeps.needsInterop

- **Experimental**
- **Type:** `string[]`

Forces ESM interop when importing these dependencies. Vite is able to properly detect when a dependency needs interop, so this option isn't generally needed. However, different combinations of dependencies could cause some of them to be prebundled differently. Adding these packages to `needsInterop` can speed up cold start by avoiding full-page reloads. You'll receive a warning if this is the case for one of your dependencies, suggesting to add the package name to this array in your config.
7 changes: 7 additions & 0 deletions docs/config/server-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,13 @@ The second case is when wildcard hosts (e.g. `0.0.0.0`) are used. This is becaus

:::

::: tip Accessing the server on WSL2 from your LAN

When running Vite on WSL2, it is not sufficient to set `host: true` to access the server from your LAN.
See [the WSL document](https://learn.microsoft.com/en-us/windows/wsl/networking#accessing-a-wsl-2-distribution-from-your-local-area-network-lan) for more details.

:::

## server.port

- **Type:** `number`
Expand Down
6 changes: 5 additions & 1 deletion docs/guide/api-plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,9 @@ The following hooks are called on each incoming module request:
- [`load`](https://rollupjs.org/plugin-development/#load)
- [`transform`](https://rollupjs.org/plugin-development/#transform)

They also have an extended `options` parameter with additional Vite-specific properties. You can read more in the [SSR documentation](/guide/ssr#ssr-specific-plugin-logic).
These hooks also have an extended `options` parameter with additional Vite-specific properties. You can read more in the [SSR documentation](/guide/ssr#ssr-specific-plugin-logic).

Some `resolveId` calls' `importer` value may be an absolute path for a generic `index.html` at root as it's not always possible to derive the actual importer due to Vite's unbundled dev server pattern. For imports handled within Vite's resolve pipeline, the importer can be tracked during the import analysis phase, providing the correct `importer` value.

The following hooks are called when the server is closed:

Expand Down Expand Up @@ -343,6 +345,8 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
- An array of tag descriptor objects (`{ tag, attrs, children }`) to inject to the existing HTML. Each tag can also specify where it should be injected to (default is prepending to `<head>`)
- An object containing both as `{ html, tags }`

By default `order` is `undefined`, with this hook applied after the html has been transformed. In order to inject a script that should go through the Vite plugins pipeline, `order: 'pre'` will apply the hook before processing the HTML. `order: 'post'` applies the hook after all hooks with `order` undefined are applied.

**Basic Example:**

```js
Expand Down
2 changes: 2 additions & 0 deletions docs/guide/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,8 @@ export default defineConfig({

If you specify a different root, remember that `__dirname` will still be the folder of your vite.config.js file when resolving the input paths. Therefore, you will need to add your `root` entry to the arguments for `resolve`.

Note that for HTML files, Vite ignores the name given to the entry in the `rollupOptions.input` object and instead respects the resolved id of the file when generating the HTML asset in the dist folder. This ensures a consistent structure with the way the dev server works.

## Library Mode

When you are developing a browser-oriented library, you are likely spending most of the time on a test/demo page that imports your actual library. With Vite, you can use your `index.html` for that purpose to get the smooth development experience.
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ vite optimize [root]

### `vite preview`

Locally preview production build.
Locally preview the production build. Do not use this as a production server as it's not designed for it.

#### Usage

Expand Down
8 changes: 4 additions & 4 deletions docs/guide/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,8 @@ Vite provides first-class Vue support:

- Vue 3 SFC support via [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue)
- Vue 3 JSX support via [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx)
- Vue 2.7 support via [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2)
- Vue <2.7 support via [vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2)
- Vue 2.7 SFC support via [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2)
- Vue 2.7 JSX support via [@vitejs/plugin-vue2-jsx](https://github.com/vitejs/vite-plugin-vue2-jsx)

## JSX

Expand Down Expand Up @@ -351,7 +351,7 @@ const modules = {
`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' })
const modules = import.meta.glob('./dir/*.js', { as: 'raw', eager: true })
```

The above will be transformed into the following:
Expand Down Expand Up @@ -541,7 +541,7 @@ import MyWorker from './worker?worker'
const worker = new MyWorker()
```

The worker script can also use `import` statements instead of `importScripts()` - note during dev this relies on browser native support and currently only works in Chrome, but for the production build it is compiled away.
The worker script can also use ESM `import` statements instead of `importScripts()`. **Note**: During dev this relies on [browser native support](https://caniuse.com/?search=module%20worker) (currently not supported in Firefox), but for the production build it is compiled away.

By default, the worker script will be emitted as a separate chunk in the production build. If you wish to inline the worker as base64 strings, add the `inline` query:

Expand Down
1 change: 1 addition & 0 deletions docs/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ Vite also supports [multi-page apps](./build#multi-page-app) with multiple `.htm
#### Specifying Alternative Root

Running `vite` starts the dev server using the current working directory as root. You can specify an alternative root with `vite serve some/sub/dir`.
Note that Vite will also resolve [its config file (i.e. `vite.config.js`)](/config/#configuring-vite) inside the project root, so you'll need to move it if the root is changed.

## Command Line Interface

Expand Down
11 changes: 11 additions & 0 deletions docs/guide/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -154,3 +154,14 @@ If these code are used inside dependencies, you could use [`patch-package`](http
### Browser extensions

Some browser extensions (like ad-blockers) may prevent the Vite client from sending requests to the Vite dev server. You may see a white screen without logged errors in this case. Try disabling extensions if you have this issue.

### Cross drive links on Windows

If there's a cross drive links in your project on Windows, Vite may not work.

An example of cross drive links are:

- a virtual drive linked to a folder by `subst` command
- a symlink/junction to a different drive by `mklink` command (e.g. Yarn global cache)

Related issue: [#10802](https://github.com/vitejs/vite/issues/10802)
6 changes: 5 additions & 1 deletion docs/plugins/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ Check out [Using Plugins](../guide/using-plugins) for information on how to use

### [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2)

- Provides Vue 2 Single File Components support.
- Provides Vue 2.7 Single File Components support.

### [@vitejs/plugin-vue2-jsx](https://github.com/vitejs/vite-plugin-vue2-jsx)

- Provides Vue 2.7 JSX support (via [dedicated Babel transform](https://github.com/vuejs/jsx-vue2/)).

### [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react)

Expand Down
1 change: 1 addition & 0 deletions docs/public/astro.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit b8bafaa

Please sign in to comment.