From be231faec0181fae487a3ca004f4a5e309cedaaf Mon Sep 17 00:00:00 2001 From: balibabu Date: Wed, 4 Mar 2026 20:50:58 +0800 Subject: [PATCH] Feat: Write the row and column numbers into the element's data attribute for easy code location. (#13368) ### What problem does this PR solve? Feat: Write the row and column numbers into the element's data attribute for easy code location. ### Type of change - [x] New Feature (non-breaking change which adds functionality) Co-authored-by: Liu An --- web/vite.config.ts | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/web/vite.config.ts b/web/vite.config.ts index 8f014255b..4e0f5f098 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -6,12 +6,33 @@ import { createHtmlPlugin } from 'vite-plugin-html'; import { viteStaticCopy } from 'vite-plugin-static-copy'; import { appName } from './src/conf.json'; +// Inject code location data attributes for react-dev-inspector +const inspectorBabelPlugin = (): import('vite').Plugin => ({ + name: 'inspector-babel', + enforce: 'pre' as const, + async transform(code: string, id: string) { + if (id.includes('node_modules')) return; + if (!/\.[jt]sx$/.test(id)) return; + + // Dynamically import babel transform to inject data attributes + const { transform } = await import('@react-dev-inspector/babel-plugin'); + return { + code: transform({ + filePath: id, + sourceCode: code, + }), + map: null, + }; + }, +}); + // https://vitejs.dev/config/ -export default defineConfig(({ mode, command }) => { +export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { plugins: [ + inspectorBabelPlugin(), react(), viteStaticCopy({ targets: [