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 <asiro@qq.com>

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: [