Merge pull request #952 from vitejs/sync-20f5d16b-1

docs(en): merge docs-cn/sync-docs into docs-cn/dev @ 20f5d16
vitejs · May 9, 2024 · 013f1fa · 013f1fa
2 parents a0215dc + 8105474
commit 013f1fa
Show file tree

Hide file tree

Showing 10 changed files with 241 additions and 165 deletions.
diff --git a/.vitepress/theme/components/AsideSponsors.vue b/.vitepress/theme/components/AsideSponsors.vue
@@ -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;
@@ -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>
diff --git a/guide/api-hmr.md b/guide/api-hmr.md
@@ -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}
 

diff --git a/guide/api-plugin.md b/guide/api-plugin.md
@@ -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
+})
+```
diff --git a/guide/backend-integration.md b/guide/backend-integration.md
@@ -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"]
      }
    }
    ```
@@ -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" />
    ```
diff --git a/guide/env-and-mode.md b/guide/env-and-mode.md
@@ -2,7 +2,7 @@
 
 ## 环境变量 {#env-variables}
 
-Vite 在一个特殊的 **`import.meta.env`** 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：
+Vite 在一个特殊的 **`import.meta.env`** 对象上暴露环境变量，这些变量在构建时会被静态地替换掉。这里有一些在所有情况下都可以使用的内建变量：
 
 - **`import.meta.env.MODE`**: {string} 应用运行的[模式](#modes)。
 

diff --git a/guide/static-deploy.md b/guide/static-deploy.md
@@ -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) 来部署你的静态站点。
diff --git a/index.md b/index.md
@@ -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: 💡
@@ -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>
diff --git a/package.json b/package.json
@@ -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 .",