vite-plugin-devtools-vue2 0.1.2 → 0.1.3

package/lib/picker.js

@@ -10,26 +10,33 @@ let hovered = null;
 
 const nearestVm = el => {
     while (el) {
-        if (el.__vue__) return el.__vue__;
+        if (el.__vue__) {
+            return el.__vue__;
+        }
         el = el.parentElement;
     }
     return null;
 };
 
 const vmName = vm => {
-    const o = vm.$options || {};
-    let n = o.name || o._componentTag;
-    if (!n && o.__file)
-        n = String(o.__file)
+    const options = vm.$options || {};
+    let name = options.name || options._componentTag;
+    if (!name && options.__file) {
+        name = String(options.__file)
             .split(/[\\/]/)
             .pop()
             .replace(/\.vue$/, '');
-    if (!n && vm.$root === vm) n = 'Root';
-    return n || 'Anonymous';
+    }
+    if (!name && vm.$root === vm) {
+        name = 'Root';
+    }
+    return name || 'Anonymous';
 };
 
 const ensureEls = () => {
-    if (box) return;
+    if (box) {
+        return;
+    }
     box = document.createElement('div');
     Object.assign(box.style, {
         position: 'fixed',
@@ -59,48 +66,63 @@ const ensureEls = () => {
 
 const paint = vm => {
     const el = vm && vm.$el;
-    if (!el || !el.getBoundingClientRect) return clear();
-    const r = el.getBoundingClientRect();
+    if (!el || !el.getBoundingClientRect) {
+        return clear();
+    }
+    const rect = el.getBoundingClientRect();
     Object.assign(box.style, {
         display: 'block',
-        top: `${r.top}px`,
-        left: `${r.left}px`,
-        width: `${r.width}px`,
-        height: `${r.height}px`
+        top: `${rect.top}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`
     });
     label.textContent = `<${vmName(vm)}>`;
     label.style.display = 'block';
-    label.style.top = `${Math.max(0, r.top - 20)}px`;
-    label.style.left = `${r.left}px`;
+    label.style.top = `${Math.max(0, rect.top - 20)}px`;
+    label.style.left = `${rect.left}px`;
 };
 
 const clear = () => {
-    if (box) box.style.display = 'none';
-    if (label) label.style.display = 'none';
+    if (box) {
+        box.style.display = 'none';
+    }
+    if (label) {
+        label.style.display = 'none';
+    }
 };
 
-const onMove = e => {
-    const vm = nearestVm(e.target);
+const onMove = event => {
+    const vm = nearestVm(event.target);
     hovered = vm;
-    if (vm) paint(vm);
-    else clear();
+    if (vm) {
+        paint(vm);
+    } else {
+        clear();
+    }
 };
 
-const onClick = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    const vm = hovered || nearestVm(e.target);
+const onClick = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    const vm = hovered || nearestVm(event.target);
     const cb = onPick;
     stopPicking();
-    if (vm && cb) cb(vm);
+    if (vm && cb) {
+        cb(vm);
+    }
 };
 
-const onKey = e => {
-    if (e.key === 'Escape') stopPicking();
+const onKey = event => {
+    if (event.key === 'Escape') {
+        stopPicking();
+    }
 };
 
 export const startPicking = cb => {
-    if (active) return;
+    if (active) {
+        return;
+    }
     ensureEls();
     active = true;
     onPick = cb;
@@ -112,7 +134,9 @@ export const startPicking = cb => {
 };
 
 export const stopPicking = () => {
-    if (!active) return;
+    if (!active) {
+        return;
+    }
     active = false;
     onPick = null;
     hovered = null;

package/lib/vuex.js

@@ -14,7 +14,7 @@ const listeners = new Set();
 let store = null;
 
 const emit = () => {
-    listeners.forEach(l => l());
+    listeners.forEach(item => item());
 };
 
 // Deep clone so a snapshot isn't mutated by later state changes. Vuex state is
@@ -22,25 +22,27 @@ const emit = () => {
 const clone = state => {
     try {
         return JSON.parse(JSON.stringify(state));
-    } catch (e) {
+    } catch (err) {
         return state;
     }
 };
 
-hook.on('vuex:init', s => {
-    store = s;
+hook.on('vuex:init', storeInstance => {
+    store = storeInstance;
     snapshots.length = 0;
     snapshots.push({
         type: 'Base State',
         payload: undefined,
-        state: clone(s.state),
+        state: clone(storeInstance.state),
         base: true
     });
     emit();
 });
 
 hook.on('vuex:mutation', (mutation, state) => {
-    if (!store) return;
+    if (!store) {
+        return;
+    }
     snapshots.push({
         type: mutation.type,
         payload: mutation.payload,
@@ -71,13 +73,17 @@ export const subscribe = cb => {
 // replaceState in response to this event).
 export const travelTo = index => {
     const snap = snapshots[index];
-    if (!snap || !store) return;
+    if (!snap || !store) {
+        return;
+    }
     hook.emit('vuex:travel-to-state', snap.state);
 };
 
 // Drop history and treat the current live state as the new base.
 export const commitAll = () => {
-    if (!store) return;
+    if (!store) {
+        return;
+    }
     snapshots.length = 0;
     snapshots.push({
         type: 'Base State',

package/lib/walker.js

@@ -30,7 +30,9 @@ const displayName = vm => {
             .pop()
             .replace(/\.vue$/, '');
     }
-    if (!name && vm.$root === vm) name = 'Root';
+    if (!name && vm.$root === vm) {
+        name = 'Root';
+    }
     return name || 'Anonymous';
 };
 
@@ -41,7 +43,9 @@ export const findRoots = () => {
     const els = document.querySelectorAll('*');
     for (const el of els) {
         const vm = el.__vue__;
-        if (vm && vm.$root) roots.add(vm.$root);
+        if (vm && vm.$root) {
+            roots.add(vm.$root);
+        }
     }
     return [...roots];
 };
@@ -70,25 +74,47 @@ const walk = vm => {
 // Render an arbitrary value into a short, safe display string. Same-realm, so
 // we can inspect types directly; we just avoid dumping huge/circular objects.
 export const formatValue = (value, depth = 0) => {
-    const t = typeof value;
-    if (value === null) return 'null';
-    if (value === undefined) return 'undefined';
-    if (t === 'string') return JSON.stringify(value);
-    if (t === 'number' || t === 'boolean') return String(value);
-    if (t === 'function') return `ƒ ${value.name || 'anonymous'}()`;
-    if (t === 'symbol') return value.toString();
-    if (value instanceof Node) return `<${value.nodeName.toLowerCase()}>`;
+    const type = typeof value;
+    if (value === null) {
+        return 'null';
+    }
+    if (value === undefined) {
+        return 'undefined';
+    }
+    if (type === 'string') {
+        return JSON.stringify(value);
+    }
+    if (type === 'number' || type === 'boolean') {
+        return String(value);
+    }
+    if (type === 'function') {
+        return `ƒ ${value.name || 'anonymous'}()`;
+    }
+    if (type === 'symbol') {
+        return value.toString();
+    }
+    if (value instanceof Node) {
+        return `<${value.nodeName.toLowerCase()}>`;
+    }
     if (Array.isArray(value)) {
-        if (depth > 1) return `Array(${value.length})`;
-        const items = value.slice(0, 5).map(v => formatValue(v, depth + 1));
-        if (value.length > 5) items.push(`… +${value.length - 5}`);
+        if (depth > 1) {
+            return `Array(${value.length})`;
+        }
+        const items = value.slice(0, 5).map(item => formatValue(item, depth + 1));
+        if (value.length > 5) {
+            items.push(`… +${value.length - 5}`);
+        }
         return `[${items.join(', ')}]`;
     }
-    if (t === 'object') {
-        if (depth > 1) return 'Object';
+    if (type === 'object') {
+        if (depth > 1) {
+            return 'Object';
+        }
         const keys = Object.keys(value);
-        const preview = keys.slice(0, 5).map(k => `${k}: ${formatValue(value[k], depth + 1)}`);
-        if (keys.length > 5) preview.push('…');
+        const preview = keys.slice(0, 5).map(item => `${item}: ${formatValue(value[item], depth + 1)}`);
+        if (keys.length > 5) {
+            preview.push('…');
+        }
         return `{ ${preview.join(', ')} }`;
     }
     return String(value);
@@ -97,7 +123,9 @@ export const formatValue = (value, depth = 0) => {
 // Extract props / data / computed for the detail pane. Values are returned raw
 // (not stringified) so the panel can render an expandable value tree.
 export const inspect = vm => {
-    if (!vm) return { props: [], data: [], computed: [] };
+    if (!vm) {
+        return { props: [], data: [], computed: [] };
+    }
 
     const props = [];
     const propDefs = (vm.$options && vm.$options.props) || null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vite-plugin-devtools-vue2",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "description": "vite-plugin-vue-devtools for vue@2.x",
     "type": "module",
     "main": "lib/index.js",