Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions .vitepress/theme/components/AsideSponsors.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,23 @@ const sponsors = computed(() => {
</script>

<template>
<a class="vite-event" href="https://lu.ma/vite" target="_blank">
<img width="22" height="22" src="/logo.svg" />
<a
class="viteconf"
href="https://viteconf.org/23/replay?utm=vite-sidebar"
target="_blank"
>
<img width="22" height="22" src="/viteconf.svg" />
<span>
<p class="extra-info">May 9th, 2024</p>
<p class="heading">Vite Meetup SF</p>
<p class="extra-info">Beyond Fast</p>
<p class="heading">ViteConf 2023</p>
<p class="extra-info">Watch the replay!</p>
</span>
</a>
<VPDocAsideSponsors v-if="data" :data="sponsors" />
</template>

<style>
.vite-event {
.viteconf {
margin-top: 1rem;
margin-bottom: 1rem;
border-radius: 14px;
Expand All @@ -48,26 +53,35 @@ const sponsors = computed(() => {
border: 2px solid var(--vp-c-bg-alt);
transition: border-color 0.5s;
}
.vite-event:hover {
.viteconf:hover {
border: 2px solid var(--vp-c-brand-light);
}
.vite-event img {
.viteconf img {
transition: transform 0.5s;
transform: scale(1.25);
}
.vite-event:hover img {
.viteconf:hover img {
transform: scale(1.75);
}
.vite-event .heading {
background-image: var(--vp-home-hero-name-background);
.viteconf .heading {
background-image: linear-gradient(
120deg,
#b047ff 16%,
var(--vp-c-brand-lighter),
var(--vp-c-brand-lighter)
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vite-event .extra-info {
.viteconf .extra-info {
color: var(--vp-c-text-1);
opacity: 0;
font-size: 0.7rem;
padding-left: 0.1rem;
transition: opacity 0.5s;
}
.viteconf:hover .extra-info {
opacity: 0.9;
}
</style>
2 changes: 1 addition & 1 deletion guide/api-hmr.md
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ import.meta.hot.accept((module) => {

如果在连接前调用,数据会先被缓存、等到连接建立好后再发送。

查看 [客户端与服务器的数据交互](/guide/api-plugin.html#client-server-communication) 一节获取更多细节
查看 [客户端与服务端间通信](/guide/api-plugin.html#client-server-communication) 以及 [自定义事件的 TypeScript 类型定义指南](/guide/api-plugin.html#typescript-for-custom-events) 章节获取更多细节

## 推荐阅读 {#further-reading}

Expand Down
30 changes: 27 additions & 3 deletions guide/api-plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -624,16 +624,40 @@ export default defineConfig({

### 自定义事件的 TypeScript 类型定义指南 {#typeScript-for-custom-events}

可以通过扩展 `CustomEventMap` 这个 interface 来为自定义事件标注类型:
Vite 会在内部从 `CustomEventMap` 这个接口推断出 payload 的类型,可以通过扩展这个接口来为自定义事件进行类型定义:

:::tip 提示
在指定 TypeScript 声明文件时,确保包含 `.d.ts` 扩展名。否则,TypeScript 可能不会知道试图扩展的是哪个文件。
:::

```ts
// events.d.ts
import 'vite/types/customEvent'
import 'vite/types/customEvent.d.ts'

declare module 'vite/types/customEvent' {
declare module 'vite/types/customEvent.d.ts' {
interface CustomEventMap {
'custom:foo': { msg: string }
// 'event-key': payload
}
}
```

这个接口扩展被 `InferCustomEventPayload<T>` 所使用,用来推断事件 `T` 的 payload 类型。要了解更多关于这个接口如何被使用的信息,请参考 [HMR API 文档](./api-hmr#hmr-api)。

```ts twoslash
import 'vite/client'
import type { InferCustomEventPayload } from 'vite/types/customEvent.d.ts'
declare module 'vite/types/customEvent.d.ts' {
interface CustomEventMap {
'custom:foo': { msg: string }
}
}
// ---cut---
type CustomFooPayload = InferCustomEventPayload<'custom:foo'>
import.meta.hot?.on('custom:foo', (payload) => {
// payload 的类型为 { msg: string }
})
import.meta.hot?.on('unknown:event', (payload) => {
// payload 的类型为 any
})
```
58 changes: 35 additions & 23 deletions guide/backend-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,24 +62,36 @@

```json
{
"main.js": {
"file": "assets/main.4889e940.js",
"src": "main.js",
"_shared-!~{003}~.js": {
"file": "assets/shared-ChJ_j-JJ.css",
"src": "_shared-!~{003}~.js"
},
"_shared-B7PI925R.js": {
"file": "assets/shared-B7PI925R.js",
"name": "shared",
"css": ["assets/shared-ChJ_j-JJ.css"]
},
"baz.js": {
"file": "assets/baz-B2H3sXNv.js",
"name": "baz",
"src": "baz.js",
"isDynamicEntry": true
},
"views/bar.js": {
"file": "assets/bar-gkvgaI9m.js",
"name": "bar",
"src": "views/bar.js",
"isEntry": true,
"dynamicImports": ["views/foo.js"],
"css": ["assets/main.b82dbe22.css"],
"assets": ["assets/asset.0ab0f9cd.png"],
"imports": ["_shared.83069a53.js"]
"imports": ["_shared-B7PI925R.js"],
"dynamicImports": ["baz.js"]
},
"views/foo.js": {
"file": "assets/foo.869aea0d.js",
"file": "assets/foo-BRBmoGS9.js",
"name": "foo",
"src": "views/foo.js",
"isDynamicEntry": true,
"imports": ["_shared.83069a53.js"]
},
"_shared.83069a53.js": {
"file": "assets/shared.83069a53.js",
"css": ["assets/shared.a834bfc3.css"]
"isEntry": true,
"imports": ["_shared-B7PI925R.js"],
"css": ["assets/foo-5UjPuW-k.css"]
}
}
```
Expand Down Expand Up @@ -122,21 +134,21 @@
- 可选项,对于每个导入的 JavaScript chunk 的 `file` 键的 `<link rel="modulepreload">` 标签,
同样从入口文件 chunk 开始递归追踪导入。

按照上面的示例 manifest,对于入口文件 `main.js`,在生产环境中应包含以下标签:
按照上面的示例 manifest,对于入口文件 `views/foo.js`,在生产环境中应包含以下标签:

```html
<link rel="stylesheet" href="assets/main.b82dbe22.css" />
<link rel="stylesheet" href="assets/shared.a834bfc3.css" />
<script type="module" src="assets/main.4889e940.js"></script>
<link rel="stylesheet" href="assets/foo-5UjPuW-k.css" />
<link rel="stylesheet" href="assets/shared-ChJ_j-JJ.css" />
<script type="module" src="assets/foo-BRBmoGS9.js"></script>
<!-- 可选 -->
<link rel="modulepreload" href="assets/shared.83069a53.js" />
<link rel="modulepreload" href="assets/shared-B7PI925R.js" />
```

而对于入口文件 `views/foo.js`,应该包含以下标签:
而对于入口文件 `views/bar.js`,应该包含以下标签:

```html
<link rel="stylesheet" href="assets/shared.a834bfc3.css" />
<script type="module" src="assets/foo.869aea0d.js"></script>
<link rel="stylesheet" href="assets/shared-ChJ_j-JJ.css" />
<script type="module" src="assets/bar-gkvgaI9m.js"></script>
<!-- 可选 -->
<link rel="modulepreload" href="assets/shared.83069a53.js" />
<link rel="modulepreload" href="assets/shared-B7PI925R.js" />
```
2 changes: 1 addition & 1 deletion guide/env-and-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## 环境变量 {#env-variables}

Vite 在一个特殊的 **`import.meta.env`** 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量:
Vite 在一个特殊的 **`import.meta.env`** 对象上暴露环境变量,这些变量在构建时会被静态地替换掉。这里有一些在所有情况下都可以使用的内建变量:

- **`import.meta.env.MODE`**: {string} 应用运行的[模式](#modes)。

Expand Down
24 changes: 19 additions & 5 deletions guide/static-deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -334,14 +334,28 @@ $ npx wrangler pages deploy dist

还可以为项目添加一个 [自定义域名](https://render.com/docs/custom-domains)。

## Flightcontrol {#flightcontrol}
<!--
NOTE: The sections below are reserved for more deployment platforms not listed above.
Feel free to submit a PR that adds a new section with a link to your platform's
deployment guide, as long as it meets these criteria:

使用 [Flightcontrol](https://www.flightcontrol.dev/?ref=docs-vite) 部署静态站点,可以按照 [说明](https://www.flightcontrol.dev/docs/reference/examples/vite?ref=docs-vite) 进行操作。
1. Users should be able to deploy their site for free.
2. Free tier offerings should host the site indefinitely and are not time-bound.
Offering a limited number of computation resource or site counts in exchange is fine.
3. The linked guides should not contain any malicious content.

## AWS Amplify 部署 {#aws-amplify-hoisting}
The Vite team may change the criteria and audit the current list from time to time.
If a section is removed, we will ping the original PR authors before doing so.
-->

使用 [AWS Amplify 部署](https://aws.amazon.com/amplify/hosting/) 部署静态站点,可以按照 [说明](https://docs.amplify.aws/guides/hosting/vite/q/platform/js/) 进行操作。
## Flightcontrol

根据 [说明](https://www.flightcontrol.dev/docs/reference/examples/vite?ref=docs-vite),使用 [Flightcontrol](https://www.flightcontrol.dev/?ref=docs-vite) 来部署你的静态站点。

## Kinsta 静态站点托管 {#kinsta-static-site-hosting}

你可以按照这些 [说明](https://kinsta.com/docs/react-vite-example/) 在 [Kinsta](https://kinsta.com/static-site-hosting/) 上部署你的 Vite 应用作为一个静态站点。
根据 [说明](https://kinsta.com/docs/react-vite-example/),使用 [Kinsta](https://kinsta.com/static-site-hosting/) 来部署你的静态站点。

## xmit 静态站点托管 {#xmit-static-site-hosting}

根据 [说明](https://xmit.dev/posts/vite-quickstart/),使用 [xmit](https://xmit.co) 来部署你的静态站点。
10 changes: 10 additions & 0 deletions index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ hero:
- theme: alt
text: 在 GitHub 上查看
link: https://github.com/vitejs/vite
- theme: brand
text: 🎉 ViteConf 23!
link: https://viteconf.org/23/replay?utm=vite-homepage

features:
- icon: 💡
Expand Down Expand Up @@ -48,6 +51,13 @@ import { onMounted } from 'vue'
import { fetchReleaseTag } from './.vitepress/utils/fetchReleaseTag.js'

onMounted(() => {
const urlParams = new URLSearchParams(window.location.search)
if (urlParams.get('uwu') != null) {
const img = document.querySelector('.VPHero .VPImage.image-src')
img.src = '/logo-uwu.png'
img.alt = 'Vite Kawaii Logo by @icarusgkx'
}

fetchReleaseTag()
})
</script>
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
"vite": "^5.1.6",
"feed": "^4.2.2",
"yorkie": "^2.0.0",
"@shikijs/vitepress-twoslash": "^1.3.0",
"@shikijs/vitepress-twoslash": "^1.4.0",
"@types/express": "^4.17.21",
"vitepress": "1.1.3",
"vue": "^3.4.24"
"vitepress": "1.1.4",
"vue": "^3.4.26"
},
"scripts": {
"dev": "vitepress dev .",
Expand Down
Loading