fix: resolve Mermaid CSP errors with enhanced bundling strategy (#3681)

Implements a more robust bundling strategy for Mermaid diagrams to prevent
dynamic chunk loading at runtime, which was causing CSP violations.

Key changes:
- Added manualChunks function in vite.config.ts to consolidate all Mermaid
  code and dependencies into a single bundle
- Added mermaid and dagre to optimizeDeps.include for pre-bundling
- Customized chunkFileNames to ensure predictable output
- Removed incorrect static imports in MermaidBlock.tsx

This resolves the CSP errors where Mermaid was attempting to dynamically
load chunks like chunk-RZ5BOZE2.js and channel.js from the webview origin.

Fixes: #3680

Signed-off-by: Eric Wheeler <[email protected]>
Co-authored-by: Eric Wheeler <[email protected]>
Co-authored-by: Daniel <[email protected]>

Author: 3 people

webview-ui/src/components/common/MermaidBlock.tsx

@@ -1,12 +1,16 @@
 import { useEffect, useRef, useState } from "react"
 import mermaid from "mermaid"
-import { useDebounceEffect } from "@src/utils/useDebounceEffect"
 import styled from "styled-components"
+import { useDebounceEffect } from "@src/utils/useDebounceEffect"
 import { vscode } from "@src/utils/vscode"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useCopyToClipboard } from "@src/utils/clipboard"
 import CodeBlock from "./CodeBlock"
 
+// Removed previous attempts at static imports for individual diagram types
+// as the paths were incorrect for Mermaid v11.4.1 and caused errors.
+// The primary strategy will now rely on Vite's bundling configuration.
+
 const MERMAID_THEME = {
 	background: "#1e1e1e", // VS Code dark theme background
 	textColor: "#ffffff", // Main text color

webview-ui/vite.config.ts

@@ -98,8 +98,36 @@ export default defineConfig(({ mode }) => {
 			rollupOptions: {
 				output: {
 					entryFileNames: `assets/[name].js`,
-					chunkFileNames: `assets/[name].js`,
+					chunkFileNames: (chunkInfo) => {
+						if (chunkInfo.name === "mermaid-bundle") {
+							return `assets/mermaid-bundle.js`
+						}
+						// Default naming for other chunks, ensuring uniqueness from entry
+						return `assets/chunk-[hash].js`
+					},
 					assetFileNames: `assets/[name].[ext]`,
+					manualChunks: (id, { getModuleInfo }) => {
+						// Consolidate all mermaid code and its direct large dependencies (like dagre)
+						// into a single chunk. The 'channel.js' error often points to dagre.
+						if (
+							id.includes("node_modules/mermaid") ||
+							id.includes("node_modules/dagre") || // dagre is a common dep for graph layout
+							id.includes("node_modules/cytoscape") // another potential graph lib
+							// Add other known large mermaid dependencies if identified
+						) {
+							return "mermaid-bundle"
+						}
+
+						// Check if the module is part of any explicitly defined mermaid-related dynamic import
+						// This is a more advanced check if simple path matching isn't enough.
+						const moduleInfo = getModuleInfo(id)
+						if (moduleInfo?.importers.some((importer) => importer.includes("node_modules/mermaid"))) {
+							return "mermaid-bundle"
+						}
+						if (moduleInfo?.dynamicImporters.some((importer) => importer.includes("node_modules/mermaid"))) {
+							return "mermaid-bundle"
+						}
+					},
 				},
 			},
 		},
@@ -116,6 +144,11 @@ export default defineConfig(({ mode }) => {
 		},
 		define,
 		optimizeDeps: {
+			include: [
+				"mermaid",
+				"dagre", // Explicitly include dagre for pre-bundling
+				// Add other known large mermaid dependencies if identified
+			],
 			exclude: ["@vscode/codicons", "vscode-oniguruma", "shiki"],
 		},
 		assetsInclude: ["**/*.wasm", "**/*.wav"],