From 53168fb592bf961db72fa60323af7ab149b47d02 Mon Sep 17 00:00:00 2001
From: Jun Shindo <46585162+jay-es@users.noreply.github.com>
Date: Fri, 1 Nov 2024 20:43:01 +0900
Subject: [PATCH] docs: missing changes guides
---
changes/per-environment-apis.md | 16 +++----
changes/shared-plugins-during-build.md | 65 ++++++++++++++++++++++++--
2 files changed, 70 insertions(+), 11 deletions(-)
diff --git a/changes/per-environment-apis.md b/changes/per-environment-apis.md
index 0ba6ec19..acefb821 100644
--- a/changes/per-environment-apis.md
+++ b/changes/per-environment-apis.md
@@ -4,16 +4,12 @@
[Environment API feedback discussion](https://github.com/vitejs/vite/discussions/16358)でフィードバックをお寄せください。
:::
-ViteDevServer のモジュールグラフに関連する複数の API は、より独立した環境 API に置き換えられました。
-
-- `server.moduleGraph` -> [`environment.moduleGraph`](/guide/api-environment#separate-module-graphs)
-- `server.transformRequest` -> `environment.transformRequest`
-- `server.warmupRequest` -> `environment.warmupRequest`
+モジュールグラフとモジュール変換に関連する `ViteDevServer` の複数の API が `DevEnvironment` インスタンスに移動されました。
影響範囲: `Vite プラグイン作成者`
::: warning 将来の廃止予定
-Environment インスタンスは `v6.0` で初めて導入されました。`v7.0` では現在環境にある `server.moduleGraph` やその他のメソッドが廃止される予定です。まだサーバーのメソッドから移行することはお勧めしません。使用状況を明確にするために、vite の設定でこれらを設定してください。
+`Environment` インスタンスは `v6.0` で初めて導入されました。`v7.0` では現在環境にある `server.moduleGraph` やその他のメソッドが廃止される予定です。まだサーバーのメソッドから移行することはお勧めしません。使用状況を明確にするために、vite の設定でこれらを設定してください。
```ts
future: {
@@ -26,8 +22,12 @@ future: {
## 動機
-// TODO: （訳注: 原文ママ）
+Vite v5 以前では、単一の Vite 開発サーバーには常に 2 つの環境（`client` と `ssr`）がありました。 `server.moduleGraph` には、これらの両方の環境からの混合モジュールが含まれていました。ノードは `clientImportedModules` と `ssrImportedModules` のリストで接続されていました（ただし、それぞれに対して単一の `importers` リストが維持されていました）。変換されたモジュールは `id` と `ssr` ブーリアンで表されていました。このブール値は、`server.moduleGraph.getModuleByUrl(url, ssr)` や `server.transformRequest(url, { ssr })` などの API に渡す必要がありました。
+
+Vite v6 では、任意の数のカスタム環境（`client`、`ssr`、`edge` など）を作成できるようになりました。単一の `ssr` ブール値では不十分になりました。API を `server.transformRequest(url, { environment })` という形式に変更する代わりに、これらのメソッドを環境インスタンスに移動し、Vite 開発サーバーなしで呼び出せるようにしました。
## 移行ガイド
-// TODO: （訳注: 原文ママ）
+- `server.moduleGraph` -> [`environment.moduleGraph`](/guide/api-environment#separate-module-graphs)
+- `server.transformRequest(url, ssr)` -> `environment.transformRequest(url)`
+- `server.warmupRequest(url, ssr)` -> `environment.warmupRequest(url)`
diff --git a/changes/shared-plugins-during-build.md b/changes/shared-plugins-during-build.md
index e64cbeb4..d9fc91ac 100644
--- a/changes/shared-plugins-during-build.md
+++ b/changes/shared-plugins-during-build.md
@@ -4,7 +4,6 @@
[Environment API feedback discussion](https://github.com/vitejs/vite/discussions/16358)でフィードバックをお寄せください。
:::
-// TODO: （訳注: 原文ママ）
[ビルド時の共有プラグイン](/guide/api-environment.md#shared-plugins-during-build)を参照してください。
影響範囲: `Vite プラグイン作成者`
@@ -15,8 +14,68 @@
## 動機
-// TODO: （訳注: 原文ママ）
+開発とビルドのプラグインパイプラインを調整します。
## 移行ガイド
-// TODO: （訳注: 原文ママ）
+環境をまたいでプラグインを共有できるようにするには、プラグインの状態を現在の環境でキー付けする必要があります。以下の形式のプラグインは、すべての環境における変換されたモジュールの数を数えます。
+
+```js
+function CountTransformedModulesPlugin() {
+ let transformedModules
+ return {
+ name: 'count-transformed-modules',
+ buildStart() {
+ transformedModules = 0
+ },
+ transform(id) {
+ transformedModules++
+ },
+ buildEnd() {
+ console.log(transformedModules)
+ },
+ }
+}
+```
+
+代わりに、各環境で変換されたモジュールの数を数えたい場合は、マップを保持する必要があります。
+
+```js
+function PerEnvironmentCountTransformedModulesPlugin() {
+ const state = new Map()
+ return {
+ name: 'count-transformed-modules',
+ perEnvironmentStartEndDuringDev: true,
+ buildStart() {
+ state.set(this.environment, { count: 0 })
+ }
+ transform(id) {
+ state.get(this.environment).count++
+ },
+ buildEnd() {
+ console.log(this.environment.name, state.get(this.environment).count)
+ }
+ }
+}
+```
+
+このパターンを簡素化するために、Vite の内部では、`usePerEnvironmentState` ヘルパーを使用しています:
+
+```js
+function PerEnvironmentCountTransformedModulesPlugin() {
+ const state = usePerEnvironmentState<{ count: number }>(() => ({ count: 0 }))
+ return {
+ name: 'count-transformed-modules',
+ perEnvironmentStartEndDuringDev: true,
+ buildStart() {
+ state(this).count = 0
+ }
+ transform(id) {
+ state(this).count++
+ },
+ buildEnd() {
+ console.log(this.environment.name, state(this).count)
+ }
+ }
+}
+```