vite-plugin-devtools-vue2 0.1.2 → 0.1.5

package/README.md

@@ -4,6 +4,10 @@
 
 面板基于 Shadow DOM + [lit](https://lit.dev/) 渲染，运行在页面同一上下文中，直接读取 Vue 组件实例，无需跨上下文桥接，也不依赖浏览器扩展。
 
+## 预览
+
+![插件截图](https://popo-store.cdn.bcebos.com/archive/13276/d3a1b67e0681430cab5df8faaad38027.png)
+
 ## 特性
 
 -   **组件树**：实时展示组件层级，支持搜索、展开/折叠、方向键导航

package/lib/config.js

@@ -1,22 +1,27 @@
 // config.js — shared tunables for the devtools panel.
 
 // localStorage key for persisted UI state (open/closed, tab, docked position).
-export const STORE_KEY = 'vue-devtools:ui';
+export const StoreKey = 'vue-devtools:ui';
 
 // Panel size (keep in sync with .panel CSS) — used to keep it on-screen.
-export const PANEL_W = 620;
-export const PANEL_H = 420;
+export const PanelW = 620;
+export const PanelH = 420;
 
 // Margin between the floating entry and the viewport edge.
-export const EDGE_MARGIN = 12;
+export const EdgeMargin = 12;
 
 // Distance from the viewport edge to the panel when open (leaves room for the
 // floating entry to sit in the gutter, matching the official devtools).
-export const PANEL_EDGE = EDGE_MARGIN + 30 / 2;
+export const PanelEdge = EdgeMargin + 30 / 2;
 
 // Pointer travel (px) before a press on the entry counts as a drag vs a click.
-export const DRAG_THRESHOLD = 4;
+export const DragThreshold = 4;
 
 // Show a per-section (props/data/computed/attrs…) filter input once a section
 // has more than this many keys.
-export const SECTION_FILTER_THRESHOLD = 10;
+export const SectionFilterThreshold = 10;
+
+// When collapsed, tuck the entry toward the edge after this idle time (ms)…
+export const IdleTuckDelay = 3000;
+// …by shrinking its edge margin to this (negative = peek partly off-screen).
+export const IdleTuckMargin = -12;

package/lib/events.js

@@ -12,26 +12,31 @@ const listeners = new Set();
 let patched = false;
 let seq = 0;
 
-const MAX_EVENTS = 200;
+const MaxEvents = 200;
 
 const emit = () => {
-    listeners.forEach(l => l());
+    listeners.forEach(item => item());
 };
 
 const componentName = vm => {
-    const o = (vm && vm.$options) || {};
-    let n = o.name || o._componentTag;
-    if (!n && o.__file)
-        n = String(o.__file)
+    const options = (vm && vm.$options) || {};
+    let name = options.name || options._componentTag;
+    if (!name && options.__file) {
+        name = String(options.__file)
             .split(/[\\/]/)
             .pop()
             .replace(/\.vue$/, '');
-    if (!n && vm && vm.$root === vm) n = 'Root';
-    return n || 'Anonymous';
+    }
+    if (!name && vm && vm.$root === vm) {
+        name = 'Root';
+    }
+    return name || 'Anonymous';
 };
 
 const record = (vm, name, args) => {
-    if (typeof name === 'string' && name.indexOf('hook:') === 0) return; // lifecycle noise
+    if (typeof name === 'string' && name.indexOf('hook:') === 0) {
+        return; // lifecycle noise
+    }
     events.push({
         id: ++seq,
         name: String(name),
@@ -39,19 +44,23 @@ const record = (vm, name, args) => {
         component: componentName(vm),
         time: Date.now()
     });
-    if (events.length > MAX_EVENTS) events.shift();
+    if (events.length > MaxEvents) {
+        events.shift();
+    }
     emit();
 };
 
 hook.on('init', Vue => {
-    if (patched || !Vue || !Vue.prototype) return;
+    if (patched || !Vue || !Vue.prototype) {
+        return;
+    }
     patched = true;
     const original = Vue.prototype.$emit;
     // Must stay a real function: `this` is the emitting component instance.
     Vue.prototype.$emit = function (name, ...args) {
         try {
             record(this, name, args);
-        } catch (e) {
+        } catch (err) {
             /* never break the app because of devtools */
         }
         return original.apply(this, arguments);

package/lib/hook.js

@@ -7,7 +7,7 @@
 // so we can capture the Vue constructor and subscribe to flushes for live
 // refresh. This module MUST be imported before the app imports Vue.
 
-const HOOK_KEY = '__VUE_DEVTOOLS_GLOBAL_HOOK__';
+const HookKey = '__VUE_DEVTOOLS_GLOBAL_HOOK__';
 
 const createHook = () => {
     const listeners = Object.create(null);
@@ -19,19 +19,25 @@ const createHook = () => {
         },
         off(event, fn) {
             const arr = listeners[event];
-            if (!arr) return;
-            const i = arr.indexOf(fn);
-            if (i > -1) arr.splice(i, 1);
+            if (!arr) {
+                return;
+            }
+            const index = arr.indexOf(fn);
+            if (index > -1) {
+                arr.splice(index, 1);
+            }
         },
         emit(event, ...args) {
             const arr = listeners[event];
-            if (arr) arr.slice().forEach(fn => fn(...args));
+            if (arr) {
+                arr.slice().forEach(item => item(...args));
+            }
         }
     };
 };
 
 // Reuse an existing hook if one somehow already exists, otherwise install ours.
-const hook = window[HOOK_KEY] || (window[HOOK_KEY] = createHook());
+const hook = window[HookKey] || (window[HookKey] = createHook());
 
 // Capture the Vue constructor as soon as Vue registers itself.
 hook.on('init', Vue => {

package/lib/inspector.js

@@ -3,7 +3,9 @@
 let box = null;
 
 const ensureBox = () => {
-    if (box) return box;
+    if (box) {
+        return box;
+    }
     box = document.createElement('div');
     Object.assign(box.style, {
         position: 'fixed',
@@ -21,10 +23,12 @@ const ensureBox = () => {
 
 export const highlight = vm => {
     const el = vm && vm.$el;
-    if (!el || !el.getBoundingClientRect) return hide();
+    if (!el || !el.getBoundingClientRect) {
+        return hide();
+    }
     const rect = el.getBoundingClientRect();
-    const b = ensureBox();
-    Object.assign(b.style, {
+    const boxEl = ensureBox();
+    Object.assign(boxEl.style, {
         display: 'block',
         top: `${rect.top}px`,
         left: `${rect.left}px`,
@@ -34,5 +38,7 @@ export const highlight = vm => {
 };
 
 export const hide = () => {
-    if (box) box.style.display = 'none';
+    if (box) {
+        box.style.display = 'none';
+    }
 };

package/lib/main.js

@@ -8,7 +8,9 @@ import './vuex.js';
 import './events.js';
 
 const mount = () => {
-    if (document.querySelector('#__vue_devtools__')) return;
+    if (document.querySelector('#__vue_devtools__')) {
+        return;
+    }
     const host = document.createElement('div');
     host.id = '__vue_devtools__';
     document.body.appendChild(host);