Skip to content

Commit 69b416f

Browse files
authored
release v6.0
2 parents 7a8baea + 7cde508 commit 69b416f

16 files changed

+248
-32
lines changed

.vitepress/theme/components/AsideSponsors.vue

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
<script setup lang="ts">
22
import { computed } from 'vue'
33
import { VPDocAsideSponsors } from 'vitepress/theme'
4-
import { useSponsor } from '../composables/sponsor'
4+
import { useSponsor, voidZero } from '../composables/sponsor'
55
66
const { data } = useSponsor()
77
88
const sponsors = computed(() => {
9-
return (
10-
data?.value.map((sponsor) => {
9+
return [
10+
{ size: 'small', items: [voidZero] },
11+
...(data?.value.map((sponsor) => {
1112
return {
1213
size: sponsor.size === 'big' ? 'mini' : 'xmini',
1314
items: sponsor.items,
1415
}
15-
}) ?? []
16-
)
16+
}) ?? []),
17+
]
1718
})
1819
</script>
1920

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup>
2+
defineProps({
3+
videoId: String,
4+
})
5+
</script>
6+
7+
<template>
8+
<div class="full-width-youtube-video">
9+
<iframe
10+
width="560"
11+
height="315"
12+
:src="`https://www.youtube.com/embed/${videoId}`"
13+
title="YouTube video player"
14+
frameborder="0"
15+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
16+
allowfullscreen
17+
></iframe>
18+
</div>
19+
</template>
20+
21+
<style scoped>
22+
.full-width-youtube-video {
23+
position: relative;
24+
padding-bottom: 56.25%;
25+
height: 0;
26+
}
27+
28+
.full-width-youtube-video iframe {
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 100%;
34+
border: none;
35+
border-radius: 0.5rem;
36+
}
37+
</style>

.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { useSponsor } from '../../../composables/sponsor'
2+
import { useSponsor, voidZero } from '../../../composables/sponsor'
33
import { VPSponsors } from 'vitepress/theme'
44
55
const { data } = useSponsor()
@@ -53,8 +53,8 @@ const { data } = useSponsor()
5353

5454
<h4>由以下团队呈现</h4>
5555
<div class="voidzero">
56-
<a href="https://voidzero.dev" target="_blank">
57-
<img src="./voidzero.svg" />
56+
<a :href="voidZero.url" target="_blank">
57+
<img :src="voidZero.img" />
5858
</a>
5959
</div>
6060

@@ -120,6 +120,7 @@ const { data } = useSponsor()
120120
position: relative;
121121
display: inline-block;
122122
max-width: 260px;
123+
filter: grayscale(1) invert(1);
123124
}
124125
}
125126

.vitepress/theme/composables/sponsor.ts

+6
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ const data = ref()
2525
const dataHost = 'https://sponsors.vuejs.org'
2626
const dataUrl = `${dataHost}/vite.json`
2727

28+
export const voidZero = {
29+
name: 'VoidZero',
30+
url: 'https://voidzero.dev',
31+
img: '/voidzero.svg',
32+
} satisfies Sponsor
33+
2834
const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
2935
special: [
3036
// sponsors patak-dev

.vitepress/theme/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import SvgImage from './components/SvgImage.vue'
1010
import WwAds from './components/WwAds.vue'
1111
import ReleaseTag from './components/ReleaseTag.vue'
1212
import './custom.css'
13+
import YouTubeVideo from './components/YouTubeVideo.vue'
1314
import 'virtual:group-icons.css'
1415

1516
export default {
@@ -23,6 +24,7 @@ export default {
2324
enhanceApp({ app }) {
2425
app.component('SvgImage', SvgImage)
2526
app.component('ReleaseTag', ReleaseTag)
27+
app.component('YouTubeVideo', YouTubeVideo)
2628
app.use(TwoslashFloatingVue)
2729
},
2830
} satisfies Theme

.vitepress/tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"target": "ES2022",
44
"module": "ESNext",
5-
"moduleResolution": "Bundler",
5+
"moduleResolution": "bundler",
66
"strict": true,
77
"noImplicitOverride": true,
88
"noUnusedLocals": true,

blog/announcing-vite6.md

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Vite 6.0 is out!
3+
author:
4+
name: The Vite Team
5+
date: 2024-11-26
6+
sidebar: false
7+
head:
8+
- - meta
9+
- property: og:type
10+
content: website
11+
- - meta
12+
- property: og:title
13+
content: Announcing Vite 6
14+
- - meta
15+
- property: og:image
16+
content: https://vite.dev/og-image-announcing-vite6.png
17+
- - meta
18+
- property: og:url
19+
content: https://vite.dev/blog/announcing-vite6
20+
- - meta
21+
- property: og:description
22+
content: Vite 6 Release Announcement
23+
- - meta
24+
- name: twitter:card
25+
content: summary_large_image
26+
---
27+
28+
# Vite 6.0 is out!
29+
30+
_November 26, 2024_
31+
32+
![Vite 6 Announcement Cover Image](/og-image-announcing-vite6.png)
33+
34+
Today, we're taking another big step in Vite's story. The Vite [team](/team), [contributors](https://github.com/vitejs/vite/graphs/contributors), and ecosystem partners are excited to announce the release of Vite 6.
35+
36+
It has been an eventful year. Vite adoption keeps growing, with npm downloads per week jumping from 7.5 million to 17 million since the release of Vite 5 a year ago. [Vitest](https://vitest.dev) is not only being favored more by users but is also starting to form an ecosystem of its own. For example, [Storybook](https://storybook.js.org) has new testing capabilities powered by Vitest.
37+
38+
New frameworks have also joined the Vite ecosystem, including [TanStack Start](https://tanstack.com/start), [One](https://onestack.dev/), [Ember](https://emberjs.com/), and others. Web frameworks are innovating at an increasingly faster pace. You can check out the improvements folks have been doing at [Astro](https://astro.build/), [Nuxt](https://nuxt.com/), [SvelteKit](https://kit.svelte.dev/), [Solid Start](https://www.solidjs.com/blog/introducing-solidstart), [Qwik City](https://qwik.builder.io/qwikcity/overview/), [RedwoodJS](https://redwoodjs.com/), [React Router](https://reactrouter.com/), and the list goes on.
39+
40+
Vite is used by OpenAI, Google, Apple, Microsoft, NASA, Shopify, Cloudflare, GitLab, Reddit, Linear, among many others. Two months ago, we started a list of [companies using Vite](https://github.com/vitejs/companies-using-vite). We're happy to see many developers sending us a PR to add their companies to the list. It's hard to believe how much the ecosystem we built together has grown since Vite gave its first steps.
41+
42+
![Vite weekly npm downloads](/vite6-npm-weekly-downloads.png)
43+
44+
## Speeding up the Vite ecosystem
45+
46+
Last month, the community gathered for the third edition of [ViteConf](https://viteconf.org/24/replay), hosted once more by [StackBlitz](https://stackblitz.com). It was the biggest Vite conference, with a broad representation of builders from the ecosystem. Among other announcements, Evan You announced [VoidZero](https://staging.voidzero.dev/posts/announcing-voidzero-inc), a company dedicated to building an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem. VoidZero is behind [Rolldown](https://rolldown.rs) and [Oxc](https://oxc.rs), and their team is making significant strides, getting them rapidly ready for being adopted by Vite. Watch Evan's keynote to learn more about the next steps for Vite's rust-powered future.
47+
48+
<YouTubeVideo videoId="EKvvptbTx6k?si=EZ-rFJn4pDW3tUvp" />
49+
50+
[Stackblitz](https://stackblitz.com) unveiled [bolt.new](https://bolt.new), a Remix app that combines Claude and WebContainers and lets you prompt, edit, run, and deploy full-stack apps. Nate Weiner announced [One](https://onestack.dev/), a new Vite-powered React framework for web and native. Storybook showcased their latest Vitest-powered [testing features](https://youtu.be/8t5wxrFpCQY?si=PYZoWKf-45goQYDt). And so much more. We encourage you to watch [all 43 talks](https://www.youtube.com/playlist?list=PLqGQbXn_GDmnObDzgjUF4Krsfl6OUKxtp). The speakers made a significant effort to share with us what each project has been up to.
51+
52+
Vite also got a refreshed landing page and a clean domain. You should update your URLs to point to the new [vite.dev](https://vite.dev) domain moving forward. The new design and implementation was done by VoidZero, by the same folks that made their website. Shoutout to [Vicente Rodriguez](https://bento.me/rmoon) and [Simon Le Marchant](https://marchantweb.com/).
53+
54+
## The next Vite major is here
55+
56+
Vite 6 is the most significant major release since Vite 2. We're eager to partner with the ecosystem to keep expanding our shared commons through new APIs and, as usual, a more polished base upon which to build.
57+
58+
Quick links:
59+
60+
- [Docs](/)
61+
- Translations: [简体中文](https://cn.vite.dev/), [日本語](https://ja.vite.dev/), [Español](https://es.vite.dev/), [Português](https://pt.vite.dev/), [한국어](https://ko.vite.dev/), [Deutsch](https://de.vite.dev/)
62+
- [Migration Guide](/guide/migration)
63+
- [GitHub Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#600-2024-11-26)
64+
65+
If you're new to Vite, we suggest reading the [Getting Started](/guide/) and [Features](/guide/features) guides first.
66+
67+
We want to thank the more than [1K contributors to Vite Core](https://github.com/vitejs/vite/graphs/contributors) and the maintainers and contributors of Vite plugins, integrations, tools, and translations that have helped us craft this new major. We invite you to get involved and help us improve Vite for the whole ecosystem. Learn more at our [Contributing Guide](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
68+
69+
To get started, we suggest helping [triage issues](https://github.com/vitejs/vite/issues), [review PRs](https://github.com/vitejs/vite/pulls), send failing tests PRs based on open issues, and support others in [Discussions](https://github.com/vitejs/vite/discussions) and Vite Land's [help forum](https://discord.com/channels/804011606160703521/1019670660856942652). If you'd like to talk to us, join our [Discord community](http://chat.vite.dev/) and say hi on the [#contributing channel](https://discord.com/channels/804011606160703521/804439875226173480).
70+
71+
For the latest news about the Vite ecosystem and Vite core, follow us on [Bluesky](https://bsky.app/profile/vite.dev), [X](https://twitter.com/vite_js), or [Mastodon](https://webtoo.ls/@vite).
72+
73+
## Getting started with Vite 6
74+
75+
You can use `pnpm create vite` to quickly scaffold a Vite app with your preferred framework or play online with Vite 6 using [vite.new](https://vite.new). You can also run `pnpm create vite-extra` to get access to templates from other frameworks and runtimes (Solid, Deno, SSR, and library starters). `create vite-extra` templates are also available when you run `create vite` under the `Others` option.
76+
77+
The Vite starter templates are intended to be used as a playground to test Vite with different frameworks. When building your next project, you should reach out to the starter recommended by each framework. `create vite` also provides a shortcut to setup proper starters by some frameworks, like `create-vue`, `Nuxt 3`, `SvelteKit`, `Remix`, `Analog`, and `Angular`.
78+
79+
## Node.js Support
80+
81+
Vite 6 supports Node.js 18, 20, and 22+, similar to Vite 5. Node.js 21 support has been dropped. Vite drops Node.js support for older versions after their [EOL](https://endoflife.date/nodejs). The Node.js 18 EOL is at the end of April 2025, after which we may release a new major to bump the required Node.js version.
82+
83+
## Experimental Environment API
84+
85+
Vite is getting more flexible with the new Environment API. These new APIs will allow framework authors to offer a dev experience closer to production and for the Ecosystem to share new building blocks. Nothing changes if you're building a SPA; when you use Vite with a single client environment, everything works as before. And even for custom SSR apps, Vite 6 is backward compatible. The primary target audience for Environment API is framework authors.
86+
87+
For end users who are curious, Sapphi wrote a great [Introduction to Environment API](https://green.sapphi.red/blog/increasing-vites-potential-with-the-environment-api) guide. It is a great place to start and understand why we're trying to make Vite even more flexible.
88+
89+
If you are a framework author or Vite plugin maintainer and would like to leverage the new APIs, you can learn more at the [Environment API Guides](https://main.vite.dev/guide/api-environment).
90+
91+
We want to thank everyone involved in defining and implementing the new APIs. Anthony Fu and Pooya Parsa made vite-node to improve [Nuxt's Dev SSR story](https://antfu.me/posts/dev-ssr-on-nuxt) with Vite. Then Anthony used vite-node to power Vitest, and Vladimir Sheremet kept improving it. At the beginning of 2023, Vladimir started working to upstream vite-node to Vite Core, and we released it as Runtime API in Vite 5.1 a year later. Feedback from ecosystem partners (special shout-out to the Cloudflare team) pushed us to do a more ambitious rework of Vite's environments. You can learn more about the story at [Patak's ViteConf 24 talk](https://www.youtube.com/watch?v=WImor3HDyqU?si=EZ-rFJn4pDW3tUvp).
92+
93+
Everyone on the Vite team participated in defining the new API, which was co-designed with feedback from many projects in the Ecosystem. Thanks to everyone involved! We encourage you to get involved if you're building a framework, plugin, or tool on top of Vite. The new APIs are experimental. We will work with the Ecosystem to review how the new APIs will be used and stabilize them for the next major. If you'd like to ask questions or give feedback, there is an [open GitHub discussion here](https://github.com/vitejs/vite/discussions/16358).
94+
95+
## Main Changes
96+
97+
- [Default value for `resolve.conditions`](/guide/migration#default-value-for-resolve-conditions)
98+
- [JSON stringify](/guide/migration#json-stringify)
99+
- [Extended support of asset references in HTML elements](/guide/migration#extended-support-of-asset-references-in-html-elements)
100+
- [postcss-load-config](/guide/migration#postcss-load-config)
101+
- [Sass now uses modern API by default](/guide/migration#sass-now-uses-modern-api-by-default)
102+
- [Customize CSS output file name in library mode](/guide/migration#customize-css-output-file-name-in-library-mode)
103+
- [And more changes that should only affect a few users](/guide/migration#advanced)
104+
105+
There is also a new [Breaking Changes](/changes/) page that lists all planned, considering, and past changes in Vite.
106+
107+
## Migrating to Vite 6
108+
109+
For most projects, the update to Vite 6 should be straightforward, but we advise reviewing the [detailed Migration Guide](/guide/migration) before upgrading.
110+
111+
The complete list of changes is at the [Vite 6 Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#500-2024-11-26).
112+
113+
## Acknowledgments
114+
115+
Vite 6 results from long work hours by our community of contributors, downstream maintainers, plugin authors, and the [Vite Team](/team). We appreciate the individuals and companies sponsoring Vite development. Vite is brought to you by [VoidZero](https://voidzero.dev), in partnership with [StackBlitz](https://stackblitz.com/), [Nuxt Labs](https://nuxtlabs.com/), and [Astro](https://astro.build). A shout-out to sponsors on [Vite's GitHub Sponsors](https://github.com/sponsors/vitejs) and [Vite's Open Collective](https://opencollective.com/vite).

changes/ssr-using-modulerunner.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@
44
可以在 [环境 API 讨论](https://github.com/vitejs/vite/discussions/16358) 中向我们提供反馈
55
:::
66

7-
`server.ssrLoadModule` 已经被 [Module Runner](/guide/api-environment#modulerunner) 取代
7+
`server.ssrLoadModule` 已被从 [Module Runner](/guide/api-environment#modulerunner) 导入所取代
88

99
影响范围:`Vite 插件作者`
1010

1111
::: warning 即将废弃
12-
`ModuleRunner` 最初在 `v6.0` 版本中被引入。我们计划在未来的主要版本中废弃 `server.ssrLoadModule`。如果想识别你的使用情况,可以在你的 vite 配置文件中将 `future.removeSrLoadModule` 设置为 `"warn"`
12+
`ModuleRunner` 最初在 `v6.0` 版本中被引入。我们计划在未来的主要版本中废弃 `server.ssrLoadModule`。如果想识别你的使用情况,可以在你的 vite 配置文件中将 `future.removeSsrLoadModule` 设置为 `"warn"`
1313
:::
1414

1515
## 动机 {#motivation}
1616

17-
// TODO: (保持原文)
17+
`server.ssrLoadModule(url)` 仅允许在 `ssr` 环境中导入模块,并且只能在与 Vite 开发服务器相同的进程中执行这些模块。对于具有自定义环境的应用程序,每个环境都关联一个 `ModuleRunner`,该模块可能在单独的线程或进程中运行。为了导入模块,我们现在使用 `moduleRunner.import(url)`
1818

1919
## 迁移指南 {#migration-guide}
2020

21-
// TODO: (保持原文)
21+
请查看 [用于框架的环境 API 指南](../guide/api-environment-frameworks.md)

guide/api-environment-instances.md

+26-4
Original file line numberDiff line numberDiff line change
@@ -63,25 +63,43 @@ class DevEnvironment {
6363
*/
6464
config: ResolvedConfig & ResolvedDevEnvironmentOptions
6565

66-
constructor(name, config, { hot, options }: DevEnvironmentSetup)
66+
constructor(
67+
name: string,
68+
config: ResolvedConfig,
69+
context: DevEnvironmentContext,
70+
)
6771

6872
/**
6973
* 解析 URL 到一个 id,加载它,并使用插件管道
7074
* 处理代码。模块图也会被更新。
7175
*/
72-
async transformRequest(url: string): TransformResult
76+
async transformRequest(url: string): Promise<TransformResult | null>
7377

7478
/**
7579
* 注册一个低优先级处理的请求。这对于避免瀑布效应
7680
* 非常有用。Vite 服务器有关于其他请求导入模块的
7781
* 信息,因此它可以预热模块图,使得当模块被请求时
7882
* 已经处理完毕。
7983
*/
80-
async warmupRequest(url: string): void
84+
async warmupRequest(url: string): Promise<void>
8185
}
8286
```
8387

84-
其中 `TransformResult` 是:
88+
其中 `DevEnvironmentContext`是:
89+
90+
```ts
91+
interface DevEnvironmentContext {
92+
hot: boolean
93+
transport?: HotChannel | WebSocketServer
94+
options?: EnvironmentOptions
95+
remoteRunner?: {
96+
inlineSourceMap?: boolean
97+
}
98+
depsOptimizer?: DepsOptimizer
99+
}
100+
```
101+
102+
`TransformResult` 是:
85103

86104
```ts
87105
interface TransformResult {
@@ -155,10 +173,14 @@ export class EnvironmentModuleGraph {
155173
rawUrl: string,
156174
): Promise<EnvironmentModuleNode | undefined>
157175

176+
getModuleById(id: string): EnvironmentModuleNode | undefined
177+
158178
getModulesByFile(file: string): Set<EnvironmentModuleNode> | undefined
159179

160180
onFileChange(file: string): void
161181

182+
onFileDelete(file: string): void
183+
162184
invalidateModule(
163185
mod: EnvironmentModuleNode,
164186
seen: Set<EnvironmentModuleNode> = new Set(),

guide/api-environment-runtimes.md

+28-5
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ function createWorkerdDevEnvironment(
118118
export class ModuleRunner {
119119
constructor(
120120
public options: ModuleRunnerOptions,
121-
public evaluator: ModuleEvaluator,
121+
public evaluator: ModuleEvaluator = new ESModulesEvaluator(),
122122
private debug?: ModuleRunnerDebugger,
123123
) {}
124124
/**
@@ -165,8 +165,21 @@ await moduleRunner.import('/src/entry-point.js')
165165

166166
## `ModuleRunnerOptions`
167167

168-
```ts
169-
export interface ModuleRunnerOptions {
168+
```ts twoslash
169+
import type {
170+
InterceptorOptions as InterceptorOptionsRaw,
171+
ModuleRunnerHmr as ModuleRunnerHmrRaw,
172+
EvaluatedModules,
173+
} from 'vite/module-runner'
174+
import type { Debug } from '@type-challenges/utils'
175+
176+
type InterceptorOptions = Debug<InterceptorOptionsRaw>
177+
type ModuleRunnerHmr = Debug<ModuleRunnerHmrRaw>
178+
/** 见下文 */
179+
type ModuleRunnerTransport = unknown
180+
181+
// ---cut---
182+
interface ModuleRunnerOptions {
170183
/**
171184
* 项目根目录
172185
*/
@@ -206,7 +219,13 @@ export interface ModuleRunnerOptions {
206219

207220
**类型签名:**
208221

209-
```ts
222+
```ts twoslash
223+
import type { ModuleRunnerContext as ModuleRunnerContextRaw } from 'vite/module-runner'
224+
import type { Debug } from '@type-challenges/utils'
225+
226+
type ModuleRunnerContext = Debug<ModuleRunnerContextRaw>
227+
228+
// ---cut---
210229
export interface ModuleEvaluator {
211230
/**
212231
* 转换后代码中前缀行的数量。
@@ -237,7 +256,11 @@ Vite 默认导出了实现此接口的 `ESModulesEvaluator`。它使用 `new Asy
237256

238257
**类型签名:**
239258

240-
```ts
259+
```ts twoslash
260+
import type { ModuleRunnerTransportHandlers } from 'vite/module-runner'
261+
/** 一个对象 */
262+
type HotPayload = unknown
263+
// ---cut---
241264
interface ModuleRunnerTransport {
242265
connect?(handlers: ModuleRunnerTransportHandlers): Promise<void> | void
243266
disconnect?(): Promise<void> | void

guide/performance.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Vite 的内部和官方插件已经优化,以在提供与更广泛的生态系
5252
如果你是插件作者,请确保只在需要时调用 [`this.resolve`](https://rollupjs.org/plugin-development/#this-resolve) 以减少上述检查的次数。
5353

5454
::: tip TypeScript
55-
如果你正在使用 TypeScript,启用 `tsconfig.json` 中的 `compilerOptions``"moduleResolution": "Bundler"``"allowImportingTsExtensions": true` 以直接在代码中使用 `.ts``.tsx` 扩展名。
55+
如果你正在使用 TypeScript,启用 `tsconfig.json` 中的 `compilerOptions``"moduleResolution": "bundler"``"allowImportingTsExtensions": true` 以直接在代码中使用 `.ts``.tsx` 扩展名。
5656
:::
5757

5858
## 避免使用桶文件 {#avoid-barrel-files}

0 commit comments

Comments
 (0)