@linhey/react-debug-inspector 1.2.1 → 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
 });
@@ -102,6 +113,7 @@ function initInspector() {
   let latestHoverEvent = null;
   let pendingHoverFrame = false;
   let anchorUpdatePending = false;
+  let selectionLocked = false;
   const edgeOffset = 24;
   const successColor = "#10b981";
   const defaultOverlayBg = "rgba(14, 165, 233, 0.15)";
@@ -271,6 +283,11 @@ function initInspector() {
       event.stopImmediatePropagation?.();
     }
   };
+  const isInspectorChromeTarget = (target) => {
+    if (!target) return false;
+    if (target === toggleBtn || target === overlay || target === tooltip || target === actionMenu) return true;
+    return !!target.closest('[data-inspector-ignore="true"]');
+  };
   const extractTextContent = (target) => {
     const ariaLabel = normalizeText(target.getAttribute("aria-label") || "");
     if (ariaLabel) return truncateText(ariaLabel);
@@ -410,6 +427,30 @@ function initInspector() {
     if (!actionMenu) return;
     actionMenu.style.display = "none";
   };
+  const finalizeSelection = (debugId) => {
+    selectionLocked = true;
+    copyText(debugId).then(() => {
+      showCopyFeedback("Copied!", "success");
+      win.setTimeout(() => {
+        selectionLocked = false;
+        stopInspecting();
+      }, 600);
+    }).catch(() => {
+      selectionLocked = false;
+    });
+  };
+  const selectDebugTarget = (target) => {
+    if (selectionLocked) return;
+    const debugEl = target?.closest("[data-debug]");
+    if (!debugEl) {
+      selectionLocked = false;
+      stopInspecting();
+      return;
+    }
+    const debugId = debugEl.getAttribute("data-debug");
+    if (!debugId) return;
+    finalizeSelection(debugId);
+  };
   const copyText = async (value) => {
     await navigator.clipboard.writeText(value);
   };
@@ -464,7 +505,7 @@ function initInspector() {
     if (!isInspecting || !overlay || !tooltip) return;
     const target = event.target;
     if (!target) return;
-    if (target === toggleBtn || target === overlay || target === tooltip || target.closest('[data-inspector-ignore="true"]')) {
+    if (isInspectorChromeTarget(target)) {
       return;
     }
     const debugEl = target.closest("[data-debug]");
@@ -498,6 +539,7 @@ function initInspector() {
   };
   const stopInspecting = () => {
     isInspecting = false;
+    selectionLocked = false;
     latestContext = null;
     lastHoveredDebugEl = null;
     toggleBtn.style.transform = "scale(1)";
@@ -617,25 +659,32 @@ function initInspector() {
       inspectByPointer(latestHoverEvent);
     });
   };
+  const handlePointerSuppression = (event) => {
+    if (!isInspecting) return;
+    const target = event.target;
+    if (!target || isInspectorChromeTarget(target)) return;
+    if (selectionLocked) {
+      suppressEvent(event, { preventDefault: true, immediate: true });
+      return;
+    }
+    const isTouchSelectionEvent = event.type === "touchend" || event.type === "pointerup" && "pointerType" in event && event.pointerType !== "mouse";
+    suppressEvent(event, { preventDefault: true, immediate: true });
+    if (isTouchSelectionEvent) {
+      selectDebugTarget(target);
+    }
+  };
   const handleWindowClick = (event) => {
     if (!isInspecting) return;
     const target = event.target;
     if (!target || target === toggleBtn) return;
-    if (target.closest('[data-inspector-ignore="true"]')) {
+    if (isInspectorChromeTarget(target)) {
       return;
     }
     suppressEvent(event, { preventDefault: true, immediate: true });
-    const debugEl = target.closest("[data-debug]");
-    if (!debugEl) {
-      stopInspecting();
+    if (selectionLocked) {
       return;
     }
-    const debugId = debugEl.getAttribute("data-debug");
-    if (!debugId) return;
-    copyText(debugId).then(() => {
-      showCopyFeedback("Copied!", "success");
-      win.setTimeout(stopInspecting, 600);
-    });
+    selectDebugTarget(target);
   };
   const handleKeyDown = (event) => {
     if (event.key === "Escape" && isInspecting) stopInspecting();
@@ -653,6 +702,12 @@ function initInspector() {
   win.addEventListener("resize", scheduleAnchorUpdate);
   win.addEventListener("scroll", scheduleAnchorUpdate, true);
   doc.addEventListener("mousemove", handleMouseMove);
+  win.addEventListener("pointerdown", handlePointerSuppression, { capture: true });
+  win.addEventListener("pointerup", handlePointerSuppression, { capture: true });
+  win.addEventListener("mousedown", handlePointerSuppression, { capture: true });
+  win.addEventListener("mouseup", handlePointerSuppression, { capture: true });
+  win.addEventListener("touchstart", handlePointerSuppression, { capture: true });
+  win.addEventListener("touchend", handlePointerSuppression, { capture: true });
   win.addEventListener("click", handleWindowClick, { capture: true });
   win.addEventListener("keydown", handleKeyDown);
   updateAnchorForDialogs();
@@ -662,6 +717,12 @@ function initInspector() {
     win.removeEventListener("resize", scheduleAnchorUpdate);
     win.removeEventListener("scroll", scheduleAnchorUpdate, true);
     doc.removeEventListener("mousemove", handleMouseMove);
+    win.removeEventListener("pointerdown", handlePointerSuppression, { capture: true });
+    win.removeEventListener("pointerup", handlePointerSuppression, { capture: true });
+    win.removeEventListener("mousedown", handlePointerSuppression, { capture: true });
+    win.removeEventListener("mouseup", handlePointerSuppression, { capture: true });
+    win.removeEventListener("touchstart", handlePointerSuppression, { capture: true });
+    win.removeEventListener("touchend", handlePointerSuppression, { capture: true });
     win.removeEventListener("click", handleWindowClick, { capture: true });
     win.removeEventListener("keydown", handleKeyDown);
     for (const eventName of shieldedEvents) {
@@ -676,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

@@ -75,6 +75,7 @@ function initInspector() {
   let latestHoverEvent = null;
   let pendingHoverFrame = false;
   let anchorUpdatePending = false;
+  let selectionLocked = false;
   const edgeOffset = 24;
   const successColor = "#10b981";
   const defaultOverlayBg = "rgba(14, 165, 233, 0.15)";
@@ -244,6 +245,11 @@ function initInspector() {
       event.stopImmediatePropagation?.();
     }
   };
+  const isInspectorChromeTarget = (target) => {
+    if (!target) return false;
+    if (target === toggleBtn || target === overlay || target === tooltip || target === actionMenu) return true;
+    return !!target.closest('[data-inspector-ignore="true"]');
+  };
   const extractTextContent = (target) => {
     const ariaLabel = normalizeText(target.getAttribute("aria-label") || "");
     if (ariaLabel) return truncateText(ariaLabel);
@@ -383,6 +389,30 @@ function initInspector() {
     if (!actionMenu) return;
     actionMenu.style.display = "none";
   };
+  const finalizeSelection = (debugId) => {
+    selectionLocked = true;
+    copyText(debugId).then(() => {
+      showCopyFeedback("Copied!", "success");
+      win.setTimeout(() => {
+        selectionLocked = false;
+        stopInspecting();
+      }, 600);
+    }).catch(() => {
+      selectionLocked = false;
+    });
+  };
+  const selectDebugTarget = (target) => {
+    if (selectionLocked) return;
+    const debugEl = target?.closest("[data-debug]");
+    if (!debugEl) {
+      selectionLocked = false;
+      stopInspecting();
+      return;
+    }
+    const debugId = debugEl.getAttribute("data-debug");
+    if (!debugId) return;
+    finalizeSelection(debugId);
+  };
   const copyText = async (value) => {
     await navigator.clipboard.writeText(value);
   };
@@ -437,7 +467,7 @@ function initInspector() {
     if (!isInspecting || !overlay || !tooltip) return;
     const target = event.target;
     if (!target) return;
-    if (target === toggleBtn || target === overlay || target === tooltip || target.closest('[data-inspector-ignore="true"]')) {
+    if (isInspectorChromeTarget(target)) {
       return;
     }
     const debugEl = target.closest("[data-debug]");
@@ -471,6 +501,7 @@ function initInspector() {
   };
   const stopInspecting = () => {
     isInspecting = false;
+    selectionLocked = false;
     latestContext = null;
     lastHoveredDebugEl = null;
     toggleBtn.style.transform = "scale(1)";
@@ -590,25 +621,32 @@ function initInspector() {
       inspectByPointer(latestHoverEvent);
     });
   };
+  const handlePointerSuppression = (event) => {
+    if (!isInspecting) return;
+    const target = event.target;
+    if (!target || isInspectorChromeTarget(target)) return;
+    if (selectionLocked) {
+      suppressEvent(event, { preventDefault: true, immediate: true });
+      return;
+    }
+    const isTouchSelectionEvent = event.type === "touchend" || event.type === "pointerup" && "pointerType" in event && event.pointerType !== "mouse";
+    suppressEvent(event, { preventDefault: true, immediate: true });
+    if (isTouchSelectionEvent) {
+      selectDebugTarget(target);
+    }
+  };
   const handleWindowClick = (event) => {
     if (!isInspecting) return;
     const target = event.target;
     if (!target || target === toggleBtn) return;
-    if (target.closest('[data-inspector-ignore="true"]')) {
+    if (isInspectorChromeTarget(target)) {
       return;
     }
     suppressEvent(event, { preventDefault: true, immediate: true });
-    const debugEl = target.closest("[data-debug]");
-    if (!debugEl) {
-      stopInspecting();
+    if (selectionLocked) {
       return;
     }
-    const debugId = debugEl.getAttribute("data-debug");
-    if (!debugId) return;
-    copyText(debugId).then(() => {
-      showCopyFeedback("Copied!", "success");
-      win.setTimeout(stopInspecting, 600);
-    });
+    selectDebugTarget(target);
   };
   const handleKeyDown = (event) => {
     if (event.key === "Escape" && isInspecting) stopInspecting();
@@ -626,6 +664,12 @@ function initInspector() {
   win.addEventListener("resize", scheduleAnchorUpdate);
   win.addEventListener("scroll", scheduleAnchorUpdate, true);
   doc.addEventListener("mousemove", handleMouseMove);
+  win.addEventListener("pointerdown", handlePointerSuppression, { capture: true });
+  win.addEventListener("pointerup", handlePointerSuppression, { capture: true });
+  win.addEventListener("mousedown", handlePointerSuppression, { capture: true });
+  win.addEventListener("mouseup", handlePointerSuppression, { capture: true });
+  win.addEventListener("touchstart", handlePointerSuppression, { capture: true });
+  win.addEventListener("touchend", handlePointerSuppression, { capture: true });
   win.addEventListener("click", handleWindowClick, { capture: true });
   win.addEventListener("keydown", handleKeyDown);
   updateAnchorForDialogs();
@@ -635,6 +679,12 @@ function initInspector() {
     win.removeEventListener("resize", scheduleAnchorUpdate);
     win.removeEventListener("scroll", scheduleAnchorUpdate, true);
     doc.removeEventListener("mousemove", handleMouseMove);
+    win.removeEventListener("pointerdown", handlePointerSuppression, { capture: true });
+    win.removeEventListener("pointerup", handlePointerSuppression, { capture: true });
+    win.removeEventListener("mousedown", handlePointerSuppression, { capture: true });
+    win.removeEventListener("mouseup", handlePointerSuppression, { capture: true });
+    win.removeEventListener("touchstart", handlePointerSuppression, { capture: true });
+    win.removeEventListener("touchend", handlePointerSuppression, { capture: true });
     win.removeEventListener("click", handleWindowClick, { capture: true });
     win.removeEventListener("keydown", handleKeyDown);
     for (const eventName of shieldedEvents) {
@@ -649,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.1",
+  "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",