fix(web): use default Code Inspector integration (#41903)

web/plugins/vite/code-inspector.ts

@@ -1,64 +0,0 @@
-import type { Plugin } from 'vite'
-import fs from 'node:fs'
-import path from 'node:path'
-import { codeInspectorPlugin } from 'code-inspector-plugin'
-import { injectClientSnippet, normalizeViteModuleId } from './utils.ts'
-
-type CodeInspectorPluginOptions = {
-  injectTarget: string
-  port?: number
-}
-
-type ForceInspectorClientInjectionPluginOptions = CodeInspectorPluginOptions & {
-  projectRoot: string
-}
-
-export const createCodeInspectorPlugin = ({
-  injectTarget,
-  port = 5678,
-}: CodeInspectorPluginOptions): Plugin => {
-  return codeInspectorPlugin({
-    bundler: 'vite',
-    port,
-    injectTo: injectTarget,
-    exclude: [/^(?!.*\.(?:js|ts|mjs|mts|jsx|tsx|vue|svelte|html)(?:$|\?)).*/],
-  }) as Plugin
-}
-
-const getInspectorRuntimeSnippet = (runtimeFile: string): string => {
-  if (!fs.existsSync(runtimeFile)) return ''
-
-  const raw = fs.readFileSync(runtimeFile, 'utf-8')
-
-  // Strip the helper component default export to avoid duplicate default exports after injection.
-  return raw.replace(/\s*export default function CodeInspectorEmptyElement\(\)\s*\{[\s\S]*$/, '')
-}
-
-export const createForceInspectorClientInjectionPlugin = ({
-  injectTarget,
-  port = 5678,
-  projectRoot,
-}: ForceInspectorClientInjectionPluginOptions): Plugin => {
-  const runtimeFile = path.resolve(
-    projectRoot,
-    `node_modules/code-inspector-plugin/dist/append-code-${port}.js`,
-  )
-  const clientSnippet = getInspectorRuntimeSnippet(runtimeFile)
-
-  return {
-    name: 'vinext-force-code-inspector-client',
-    apply: 'serve',
-    enforce: 'pre',
-    transform(code, id) {
-      if (!clientSnippet) return null
-
-      const cleanId = normalizeViteModuleId(id)
-      if (cleanId !== injectTarget) return null
-
-      const nextCode = injectClientSnippet(code, 'code-inspector-component', clientSnippet)
-      if (nextCode === code) return null
-
-      return { code: nextCode, map: null }
-    },
-  }
-}

web/vite.config.ts

@@ -1,10 +1,6 @@
 import { fileURLToPath } from 'node:url'
 import { configDefaults, defineConfig, lazyPlugins } from 'vite-plus'
 import { playwright } from 'vite-plus/test/browser-playwright'
-import {
-  createCodeInspectorPlugin,
-  createForceInspectorClientInjectionPlugin,
-} from './plugins/vite/code-inspector.ts'
 import { customI18nHmrPlugin } from './plugins/vite/custom-i18n-hmr.ts'
 import { getRootClientInjectTarget } from './plugins/vite/inject-target.ts'
 import { nextStaticImageTestPlugin } from './plugins/vite/next-static-image-test.ts'
@@ -14,7 +10,7 @@ const isCI = !!process.env.CI
 const rootClientInjectTarget = getRootClientInjectTarget(projectRoot)
 const browserTestPattern = 'app/**/*.browser.spec.{ts,tsx}'
 
-export default defineConfig(({ mode }) => {
+export default defineConfig(({ command, mode, isPreview }) => {
   const isTest = mode === 'test'
   const isStorybook =
     process.env.STORYBOOK === 'true' ||
@@ -35,15 +31,16 @@ export default defineConfig(({ mode }) => {
           import('vite-plugin-inspect'),
         ])
 
+      const inspector =
+        command === 'serve' && isPreview !== true
+          ? (await import('code-inspector-plugin')).codeInspectorPlugin({
+              bundler: 'vite',
+            })
+          : undefined
+
       return [
         Inspect(),
-        createCodeInspectorPlugin({
-          injectTarget: rootClientInjectTarget,
-        }),
-        createForceInspectorClientInjectionPlugin({
-          injectTarget: rootClientInjectTarget,
-          projectRoot,
-        }),
+        inspector,
         tailwindcss(),
         react(),
         vinext({ react: false }),