vite-plugin-devtools-vue2 0.1.1 → 0.1.3

package/lib/config.js

@@ -0,0 +1,22 @@
+// config.js — shared tunables for the devtools panel.
+
+// localStorage key for persisted UI state (open/closed, tab, docked position).
+export const StoreKey = 'vue-devtools:ui';
+
+// Panel size (keep in sync with .panel CSS) — used to keep it on-screen.
+export const PanelW = 620;
+export const PanelH = 420;
+
+// Margin between the floating entry and the viewport edge.
+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 PanelEdge = EdgeMargin + 30 / 2;
+
+// Pointer travel (px) before a press on the entry counts as a drag vs a click.
+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 SectionFilterThreshold = 10;

package/lib/events.js

@@ -0,0 +1,80 @@
+// events.js — records component events by patching Vue 2's `$emit`.
+//
+// We capture the Vue constructor from the global hook's `init` event (fired
+// before the app mounts, since this module is imported early), then wrap
+// `Vue.prototype.$emit` to log every custom event with its payload + source
+// component. Lifecycle `hook:*` events are filtered out as noise.
+
+import hook from './hook.js';
+
+const events = [];
+const listeners = new Set();
+let patched = false;
+let seq = 0;
+
+const MaxEvents = 200;
+
+const emit = () => {
+    listeners.forEach(item => item());
+};
+
+const componentName = vm => {
+    const options = (vm && vm.$options) || {};
+    let name = options.name || options._componentTag;
+    if (!name && options.__file) {
+        name = String(options.__file)
+            .split(/[\\/]/)
+            .pop()
+            .replace(/\.vue$/, '');
+    }
+    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
+    }
+    events.push({
+        id: ++seq,
+        name: String(name),
+        args,
+        component: componentName(vm),
+        time: Date.now()
+    });
+    if (events.length > MaxEvents) {
+        events.shift();
+    }
+    emit();
+};
+
+hook.on('init', Vue => {
+    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 (err) {
+            /* never break the app because of devtools */
+        }
+        return original.apply(this, arguments);
+    };
+});
+
+export const getEvents = () => events;
+
+export const subscribe = cb => {
+    listeners.add(cb);
+    return () => listeners.delete(cb);
+};
+
+export const clearEvents = () => {
+    events.length = 0;
+    emit();
+};

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

@@ -5,9 +5,12 @@
 import './hook.js';
 import './panel.js';
 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);