docs: clarify manifest.json imports field is JS chunks only (#2251)

Author: jay-es

.vitepress/config.ts

@@ -485,7 +485,27 @@ export default defineConfig({
   markdown: {
     // languages used for twoslash and jsdocs in twoslash
     languages: ['ts', 'js', 'json'],
-    codeTransformers: [transformerTwoslash()],
+    codeTransformers: [
+      transformerTwoslash(),
+      // style:* サポートを追加
+      {
+        root(hast) {
+          const meta = this.options.meta?.__raw
+            ?.split(' ')
+            .find((m) => m.startsWith('style:'))
+          if (meta) {
+            const style = meta.slice('style:'.length)
+            const rootPre = hast.children.find(
+              (n): n is typeof n & { type: 'element'; tagName: 'pre' } =>
+                n.type === 'element' && n.tagName === 'pre',
+            )
+            if (rootPre) {
+              rootPre.properties.style += '; ' + style
+            }
+          }
+        },
+      },
+    ],
     config(md) {
       md.use(groupIconMdPlugin, {
         titleBar: {

guide/backend-integration.md

@@ -64,7 +64,7 @@
 
 3. 本番環境向けには、`vite build` を実行後、他のアセットファイルと共に `.vite/manifest.json` ファイルが生成されます。マニフェストファイルの内容は以下のようになります:
 
-   ```json [.vite/manifest.json]
+   ```json [.vite/manifest.json] style:max-height:400px
    {
      "_shared-B7PI925R.js": {
        "file": "assets/shared-B7PI925R.js",
@@ -106,17 +106,53 @@
 
    マニフェストは `Record<name, chunk>` 構造になっており、各チャンクは `ManifestChunk` インターフェースに従います:
 
-   ```ts
+   ```ts style:max-height:400px
    interface ManifestChunk {
+     /**
+      * このチャンク / アセットの入力ファイル名（既知の場合）
+      */
      src?: string
+     /**
+      * このチャンク / アセットの出力ファイル名
+      */
      file: string
+     /**
+      * このチャンクによってインポートされる CSS ファイルのリスト
+      *
+      * このフィールドは JS チャンクにのみ存在します。
+      */
      css?: string[]
+     /**
+      * このチャンクによってインポートされる CSS ファイルを除くアセットファイルのリスト
+      *
+      * このフィールドは JS チャンクにのみ存在します。
+      */
      assets?: string[]
+     /**
+      * このチャンクまたはアセットがエントリーポイントかどうか
+      */
      isEntry?: boolean
+     /**
+      * このチャンク / アセットの名前（既知の場合）
+      */
      name?: string
-     names?: string[]
+     /**
+      * このチャンクが動的エントリーポイントかどうか
+      *
+      * このフィールドは JS チャンクにのみ存在します。
+      */
      isDynamicEntry?: boolean
+     /**
+      * このチャンクによって静的にインポートされるチャンクのリスト
+      *
+      * 値はマニフェストのキーです。このフィールドは JS チャンクにのみ存在します。
+      */
      imports?: string[]
+     /**
+      * このチャンクによって動的にインポートされるチャンクのリスト
+      *
+      * 値はマニフェストのキーです。このフィールドは JS チャンクにのみ存在します。
+      */
      dynamicImports?: string[]
    }
    ```
@@ -128,7 +164,7 @@
    - **アセットチャンク**: 画像やフォントなどのインポートされたアセットから生成されます。キーはプロジェクトルートからの相対パスです。
    - **CSS ファイル**: [`build.cssCodeSplit`](/config/build-options.md#build-csscodesplit) が `false` の場合、キー `style.css` で単一の CSS ファイルが生成されます。`build.cssCodeSplit` が `false` でない場合、キーは JS チャンクと同様に生成されます（つまり、エントリーチャンクは `_` プレフィックスなし、非エントリーチャンクは `_` プレフィックスあり）。
 
-   チャンクには、静的インポートと動的インポートの情報（どちらもマニフェスト内の対応するチャンクをマップするキー）と、それらと対応する CSS とアセットファイルが含まれます（あれば）。
+   JS チャンク（アセットまたは CSS 以外のチャンク）には、静的インポートと動的インポートの情報（どちらもマニフェスト内の対応するチャンクをマップするキー）と、それらと対応する CSS とアセットファイルが含まれます（あれば）。
 
 4. このファイルを使用してハッシュを付加されたファイル名でリンクや preload directives をレンダリングすることができます。