@linhey/react-debug-inspector 1.2.2 → 1.2.3

package/README.md

@@ -48,23 +48,33 @@ npm install @linhey/react-debug-inspector --save-dev
 
 ### 1. 配置 Vite (vite.config.ts)
 
+推荐在 Vite 8+ 使用官方导出的插件工厂，确保 `data-debug` 注入稳定：
+
 ```typescript
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import debugInspector from '@linhey/react-debug-inspector';
+import { createViteDebugInspectorPlugin } from '@linhey/react-debug-inspector';
 
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        // 仅在开发环境下启用注入
-        plugins: process.env.NODE_ENV === 'development' ? [debugInspector] : []
-      }
-    }),
+    createViteDebugInspectorPlugin(),
+    react(),
   ],
 });
 ```
 
+如果你仍在旧链路中使用 Babel 直接注入，也可以保留：
+
+```typescript
+import debugInspector from '@linhey/react-debug-inspector';
+
+react({
+  babel: {
+    plugins: [debugInspector],
+  }
+})
+```
+
 ### 2. 初始化交互界面 (main.tsx)
 
 ```typescript

package/dist/index.d.mts

@@ -9,4 +9,16 @@ declare function babelPluginDebugLabel(): {
  */
 declare function initInspector(): void;
 
-export { babelPluginDebugLabel as default, initInspector };
+type TransformResult = {
+    code: string;
+    map: object | null;
+};
+type ViteCompatiblePlugin = {
+    name: string;
+    apply: 'serve';
+    enforce: 'pre';
+    transform: (code: string, id: string) => Promise<TransformResult | null>;
+};
+declare function createViteDebugInspectorPlugin(): ViteCompatiblePlugin;
+
+export { createViteDebugInspectorPlugin, babelPluginDebugLabel as default, initInspector };

package/dist/index.d.ts

@@ -9,4 +9,16 @@ declare function babelPluginDebugLabel(): {
  */
 declare function initInspector(): void;
 
-export { babelPluginDebugLabel as default, initInspector };
+type TransformResult = {
+    code: string;
+    map: object | null;
+};
+type ViteCompatiblePlugin = {
+    name: string;
+    apply: 'serve';
+    enforce: 'pre';
+    transform: (code: string, id: string) => Promise<TransformResult | null>;
+};
+declare function createViteDebugInspectorPlugin(): ViteCompatiblePlugin;
+
+export { createViteDebugInspectorPlugin, babelPluginDebugLabel as default, initInspector };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,11 +17,20 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  createViteDebugInspectorPlugin: () => createViteDebugInspectorPlugin,
   default: () => index_default,
   initInspector: () => initInspector
 });
@@ -726,9 +737,39 @@ function initInspector() {
   };
 }
 
+// src/vite-plugin.ts
+function createViteDebugInspectorPlugin() {
+  return {
+    name: "react-debug-inspector-transform",
+    apply: "serve",
+    enforce: "pre",
+    async transform(code, id) {
+      if (id.includes("node_modules")) return null;
+      if (!/\.[jt]sx($|\?)/.test(id)) return null;
+      const { transformAsync } = await import("@babel/core");
+      const result = await transformAsync(code, {
+        filename: id,
+        babelrc: false,
+        configFile: false,
+        plugins: [babelPluginDebugLabel()],
+        parserOpts: {
+          plugins: ["jsx", "typescript"]
+        },
+        sourceMaps: true
+      });
+      if (!result?.code) return null;
+      return {
+        code: result.code,
+        map: result.map ?? null
+      };
+    }
+  };
+}
+
 // src/index.ts
 var index_default = babelPluginDebugLabel;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  createViteDebugInspectorPlugin,
   initInspector
 });

package/dist/index.mjs

@@ -699,9 +699,39 @@ function initInspector() {
   };
 }
 
+// src/vite-plugin.ts
+function createViteDebugInspectorPlugin() {
+  return {
+    name: "react-debug-inspector-transform",
+    apply: "serve",
+    enforce: "pre",
+    async transform(code, id) {
+      if (id.includes("node_modules")) return null;
+      if (!/\.[jt]sx($|\?)/.test(id)) return null;
+      const { transformAsync } = await import("@babel/core");
+      const result = await transformAsync(code, {
+        filename: id,
+        babelrc: false,
+        configFile: false,
+        plugins: [babelPluginDebugLabel()],
+        parserOpts: {
+          plugins: ["jsx", "typescript"]
+        },
+        sourceMaps: true
+      });
+      if (!result?.code) return null;
+      return {
+        code: result.code,
+        map: result.map ?? null
+      };
+    }
+  };
+}
+
 // src/index.ts
 var index_default = babelPluginDebugLabel;
 export {
+  createViteDebugInspectorPlugin,
   index_default as default,
   initInspector
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linhey/react-debug-inspector",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A developer tool to inspect React components in browser and jump to source code.",
   "author": "linhey",
   "license": "MIT",
@@ -17,7 +17,7 @@
   "scripts": {
     "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
     "dev:test-app": "vite --config vite.config.test.ts",
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external @babel/core",
     "test": "vitest run",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
@@ -25,8 +25,10 @@
     "test:all": "npm run test && npm run test:e2e",
     "prepublishOnly": "npm run build"
   },
+  "dependencies": {
+    "@babel/core": "^7.24.0"
+  },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
     "@playwright/test": "^1.58.2",
     "@types/node": "^25.3.5",
     "@types/react": "^19.2.14",