chore: support code-inspector for vinext (#32788)

web/vite.config.ts

@@ -1,15 +1,78 @@
 import type { Plugin } from 'vite'
+import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import react from '@vitejs/plugin-react'
+import { codeInspectorPlugin } from 'code-inspector-plugin'
 import vinext from 'vinext'
 import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const isCI = !!process.env.CI
+const inspectorPort = 5678
+const inspectorInjectTarget = path.resolve(__dirname, 'app/components/browser-initializer.tsx')
+const inspectorRuntimeFile = path.resolve(
+  __dirname,
+  `node_modules/code-inspector-plugin/dist/append-code-${inspectorPort}.js`,
+)
+
+const getInspectorRuntimeSnippet = (): string => {
+  if (!fs.existsSync(inspectorRuntimeFile))
+    return ''
+
+  const raw = fs.readFileSync(inspectorRuntimeFile, 'utf-8')
+  // Remove the helper module default export from append file to avoid duplicate default exports.
+  return raw.replace(
+    /\s*export default function CodeInspectorEmptyElement\(\)\s*\{[\s\S]*$/,
+    '',
+  )
+}
+
+const normalizeInspectorModuleId = (id: string): string => {
+  const withoutQuery = id.split('?', 1)[0]
+
+  // Vite/vinext may pass absolute fs modules as "/@fs/<abs-path>".
+  if (withoutQuery.startsWith('/@fs/'))
+    return withoutQuery.slice('/@fs'.length)
+
+  return withoutQuery
+}
+
+const createCodeInspectorPlugin = (): Plugin => {
+  return codeInspectorPlugin({
+    bundler: 'vite',
+    port: inspectorPort,
+    injectTo: inspectorInjectTarget,
+    exclude: [/^(?!.*\.(?:js|ts|mjs|mts|jsx|tsx|vue|svelte|html)(?:$|\?)).*/],
+  }) as Plugin
+}
+
+const createForceInspectorClientInjectionPlugin = (): Plugin => {
+  const clientSnippet = getInspectorRuntimeSnippet()
+
+  return {
+    name: 'vinext-force-code-inspector-client',
+    apply: 'serve',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!clientSnippet)
+        return null
+
+      const cleanId = normalizeInspectorModuleId(id)
+      if (cleanId !== inspectorInjectTarget)
+        return null
+      if (code.includes('code-inspector-component'))
+        return null
+
+      return `${clientSnippet}\n${code}`
+    },
+  }
+}
 
 export default defineConfig(({ mode }) => {
+  const isDev = mode === 'development'
+
   return {
     plugins: mode === 'test'
       ? [
@@ -26,6 +89,12 @@ export default defineConfig(({ mode }) => {
           } as Plugin,
         ]
       : [
+          ...(isDev
+            ? [
+                createCodeInspectorPlugin(),
+                createForceInspectorClientInjectionPlugin(),
+              ]
+            : []),
           vinext(),
         ],
     resolve: {