vite-plugin-devtools-vue2 0.1.0 → 0.1.2

package/README.md

@@ -1,4 +1,4 @@
-# vite-plugin-vue2-devtools
+# vite-plugin-devtools-vue2
 
 一个**仅用于开发环境**的 Vite 插件，为 Vue 2.6 应用注入一个悬浮的组件审查面板（devtools）。
 
@@ -24,7 +24,7 @@
 ## 安装
 
 ```bash
-npm i -D vite-plugin-vue2-devtools
+npm i -D vite-plugin-devtools-vue2
 ```
 
 ## 使用
@@ -33,7 +33,7 @@ npm i -D vite-plugin-vue2-devtools
 
 ```js
 import { createVuePlugin } from 'vite-plugin-vue2';
-import vueDevtools from 'vite-plugin-vue2-devtools';
+import vueDevtools from 'vite-plugin-devtools-vue2';
 
 export default {
     plugins: [createVuePlugin(), vueDevtools()]

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 STORE_KEY = '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;
+
+// Margin between the floating entry and the viewport edge.
+export const EDGE_MARGIN = 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;
+
+// Pointer travel (px) before a press on the entry counts as a drag vs a click.
+export const DRAG_THRESHOLD = 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;

package/lib/events.js

@@ -0,0 +1,71 @@
+// 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 MAX_EVENTS = 200;
+
+const emit = () => {
+    listeners.forEach(l => l());
+};
+
+const componentName = vm => {
+    const o = (vm && vm.$options) || {};
+    let n = o.name || o._componentTag;
+    if (!n && o.__file)
+        n = String(o.__file)
+            .split(/[\\/]/)
+            .pop()
+            .replace(/\.vue$/, '');
+    if (!n && vm && vm.$root === vm) n = 'Root';
+    return n || '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 > MAX_EVENTS) 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 (e) {
+            /* 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/index.js

@@ -13,7 +13,7 @@ const CLIENT_ENTRY = resolve(__dirname, 'main.js');
 const PLUGIN_ROOT = __dirname;
 
 /**
- * vite-plugin-vue2-devtools
+ * vite-plugin-devtools-vue2
  *
  * Dev-only plugin. Injects a small client bundle that hooks into the Vue 2.6
  * global devtools hook, walks the component tree and renders a floating
@@ -24,7 +24,7 @@ const PLUGIN_ROOT = __dirname;
  */
 const vueDevTools = () => {
     return {
-        name: 'vite-plugin-vue2-devtools',
+        name: 'vite-plugin-devtools-vue2',
         // Inspector is a development aid only; never touch the production build.
         apply: 'serve',
 

package/lib/main.js

@@ -5,6 +5,7 @@
 import './hook.js';
 import './panel.js';
 import './vuex.js';
+import './events.js';
 
 const mount = () => {
     if (document.querySelector('#__vue_devtools__')) return;

package/lib/panel.js

@@ -3,25 +3,14 @@
 // on every Vue scheduler flush.
 
 import { LitElement, css, html } from 'lit';
+import { DRAG_THRESHOLD, EDGE_MARGIN, PANEL_EDGE, PANEL_H, PANEL_W, SECTION_FILTER_THRESHOLD, STORE_KEY } from './config.js';
 import hook from './hook.js';
 import { hide, highlight } from './inspector.js';
 import { isPicking, startPicking, stopPicking } from './picker.js';
 import { commitAll, getSnapshots, getStore, hasStore, travelTo, subscribe as vuexSubscribe } from './vuex.js';
+import { clearEvents, getEvents, subscribe as eventsSubscribe } from './events.js';
 import { buildTree, formatValue, getInstance } from './walker.js';
 
-// Persisted UI state (survives reloads). Only stable, cheap bits — not the
-// component tree / expanded set (ids are regenerated each load).
-const STORE_KEY = 'vue-devtools:ui';
-
-// Panel size (keep in sync with .panel CSS) — used to keep it on-screen.
-const PANEL_W = 620;
-const PANEL_H = 420;
-const EDGE_MARGIN = 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).
-const PANEL_EDGE = EDGE_MARGIN + 30 / 2;
-const DRAG_THRESHOLD = 4;
-
 export class VueDevToolsPanel extends LitElement {
     static properties = {
         tree: { state: true },
@@ -32,6 +21,7 @@ export class VueDevToolsPanel extends LitElement {
         query: { state: true },
         tab: { state: true },
         vuexSelected: { state: true },
+        timelineSelected: { state: true },
         renderCodeText: { state: true }
     };
 
@@ -47,9 +37,12 @@ export class VueDevToolsPanel extends LitElement {
         this.query = '';
         this.tab = ui.tab || 'components';
         this.vuexSelected = 0;
+        this.timelineSelected = null;
         this.renderCodeText = null;
         this.valueExpanded = new Set();
         this.sectionCollapsed = new Set();
+        // Per-section (props/data/…) key filter text, keyed by section title.
+        this._sectionFilter = {};
         // Docked position of the entry/panel. Defaults to the bottom edge near
         // the right; { edge: 'left'|'right'|'top'|'bottom', along: number }.
         this._pos = ui.pos || { edge: 'bottom', along: Number.POSITIVE_INFINITY };
@@ -219,6 +212,7 @@ export class VueDevToolsPanel extends LitElement {
         window.addEventListener('keydown', this._onKeydown, true);
         window.addEventListener('resize', this._onResize);
         this._vuexUnsub = vuexSubscribe(() => this.requestUpdate());
+        this._eventsUnsub = eventsSubscribe(() => this.requestUpdate());
         // DOM-based fallback refresh (see constructor). Only childList/subtree —
         // our own panel renders inside a shadow root (not observed), and the
         // inspector highlight box only mutates via style, so this won't loop.
@@ -243,6 +237,7 @@ export class VueDevToolsPanel extends LitElement {
             this._domObserver = null;
         }
         if (this._vuexUnsub) this._vuexUnsub();
+        if (this._eventsUnsub) this._eventsUnsub();
         stopPicking();
     }
 
@@ -520,13 +515,48 @@ export class VueDevToolsPanel extends LitElement {
 
     // Render an object as a titled, collapsible section of expandable value rows.
     // `editable` enables inline editing of primitive leaves (writes back into obj).
+    // Sections with many keys get a live filter input in the header.
     _renderKvSection(title, obj, editable) {
-        const keys = obj ? Object.keys(obj) : [];
-        if (!keys.length) return null;
+        const allKeys = obj ? Object.keys(obj) : [];
+        if (!allKeys.length) return null;
         const collapsed = this.sectionCollapsed.has(title);
+        const showFilter = allKeys.length > SECTION_FILTER_THRESHOLD;
+        const q = (this._sectionFilter[title] || '').trim().toLowerCase();
+        const keys = q ? allKeys.filter(k => k.toLowerCase().includes(q)) : allKeys;
         return html`
-            <div class="section-title" @click=${() => this._toggleSection(title)}>${this._caret(!collapsed, false)} ${title}</div>
-            ${collapsed ? null : keys.map(k => this._renderValueRow(k, obj[k], `${title}.${k}`, 0, obj, editable))}
+            <div class="section-title" @click=${() => this._toggleSection(title)}>
+                ${this._caret(!collapsed, false)}
+                <span class="section-name">${title}</span>
+                ${showFilter
+                    ? html`
+                          <input
+                              class="section-filter"
+                              type="search"
+                              placeholder="filter…"
+                              .value=${this._sectionFilter[title] || ''}
+                              @click=${e => e.stopPropagation()}
+                              @keydown=${e => {
+                                  if (e.key === 'Escape') {
+                                      this._sectionFilter[title] = '';
+                                      this.requestUpdate();
+                                  }
+                                  e.stopPropagation();
+                              }}
+                              @input=${e => {
+                                  this._sectionFilter[title] = e.target.value;
+                                  this.requestUpdate();
+                              }}
+                          />
+                      `
+                    : null}
+            </div>
+            ${collapsed
+                ? null
+                : keys.length
+                ? keys.map(k => this._renderValueRow(k, obj[k], `${title}.${k}`, 0, obj, editable))
+                : html`
+                      <div class="empty">No match</div>
+                  `}
         `;
     }
 
@@ -833,6 +863,10 @@ export class VueDevToolsPanel extends LitElement {
                         ${this._icon('vuex')}
                         <span class="tip">Vuex</span>
                     </button>
+                    <button class="side-tab ${this.tab === 'timeline' ? 'active' : ''}" @click=${() => (this.tab = 'timeline')}>
+                        ${this._icon('timeline')}
+                        <span class="tip">Timeline</span>
+                    </button>
                     <span class="side-spacer"></span>
                     ${this.tab === 'components'
                         ? html`
@@ -847,7 +881,9 @@ export class VueDevToolsPanel extends LitElement {
                         <span class="tip">Minimize</span>
                     </button>
                 </nav>
-                <div class="main">${this.tab === 'components' ? this._renderComponents() : this._renderVuex()}</div>
+                <div class="main">
+                    ${this.tab === 'components' ? this._renderComponents() : this.tab === 'vuex' ? this._renderVuex() : this._renderTimeline()}
+                </div>
                 ${this.renderCodeText != null
                     ? html`
                           <div class="code-overlay">
@@ -955,7 +991,96 @@ export class VueDevToolsPanel extends LitElement {
         `;
     }
 
-    // Plugin logo (Baidu mark).
+    // Merge component events + Vuex mutations into one chronological timeline
+    // (like the vue-devtools v7 Timeline).
+    _timelineEntries() {
+        const entries = [];
+        for (const e of getEvents()) {
+            entries.push({ id: `e${e.id}`, kind: 'event', time: e.time, title: e.name, sub: `<${e.component}>`, event: e });
+        }
+        getSnapshots().forEach((s, i) => {
+            if (s.base) return;
+            entries.push({ id: `m${i}`, kind: 'mutation', time: s.time || 0, title: s.type, sub: 'vuex', snap: s, index: i });
+        });
+        entries.sort((a, b) => a.time - b.time);
+        return entries;
+    }
+
+    _renderTimeline() {
+        const entries = this._timelineEntries();
+        if (!entries.length) {
+            return html`
+                <div class="body"><div class="empty">No timeline activity yet</div></div>
+            `;
+        }
+        const sel = entries.find(e => e.id === this.timelineSelected) || entries[entries.length - 1];
+        return html`
+            <div class="body">
+                <div class="tree">
+                    <div class="vuex-bar">
+                        <button
+                            class="btn"
+                            title="Clear recorded events"
+                            @click=${() => {
+                                clearEvents();
+                                this.timelineSelected = null;
+                            }}
+                        >
+                            ✕ Clear events
+                        </button>
+                    </div>
+                    ${entries.map(
+                        e => html`
+                            <div class="node ${e.id === sel.id ? 'selected' : ''}" @click=${() => (this.timelineSelected = e.id)}>
+                                <span class="tl-badge tl-${e.kind}">${e.kind === 'event' ? 'evt' : 'mut'}</span>
+                                <span class="ev-time">${this._formatTime(e.time)}</span>
+                                <span class="tag">${e.title}</span>
+                                <span class="ev-comp">${e.sub}</span>
+                            </div>
+                        `
+                    )}
+                </div>
+                <div class="detail">${this._renderTimelineDetail(sel)}</div>
+            </div>
+        `;
+    }
+
+    _renderTimelineDetail(entry) {
+        if (!entry) return null;
+        if (entry.kind === 'event') {
+            const e = entry.event;
+            const argsObj = {};
+            (e.args || []).forEach((a, i) => {
+                argsObj[i] = a;
+            });
+            return html`
+                ${this._renderKvSection('event', { name: e.name, from: e.component, time: new Date(e.time).toLocaleTimeString() }, false)}
+                ${e.args && e.args.length
+                    ? this._renderKvSection('payload', argsObj, false)
+                    : html`
+                          <div class="empty">No payload</div>
+                      `}
+            `;
+        }
+        const s = entry.snap;
+        const store = getStore();
+        const payloadObj = s.payload === undefined ? null : { payload: s.payload };
+        return html`
+            <button class="btn on time-travel" @click=${() => travelTo(entry.index)}>⏱ Time Travel</button>
+            ${this._renderKvSection('mutation', { type: s.type, time: new Date(s.time).toLocaleTimeString() }, false)}
+            ${payloadObj ? this._renderKvSection('payload', payloadObj, false) : null}
+            ${this._renderKvSection('state', s.state || {}, false)}
+            ${store ? this._renderKvSection('getters (live)', store.getters || {}, false) : null}
+        `;
+    }
+
+    _formatTime(t) {
+        const d = new Date(t);
+        const p = (n, l = 2) => String(n).padStart(l, '0');
+        return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}.${p(d.getMilliseconds(), 3)}`;
+    }
+
+    // Plugin logo
     _vueLogo() {
         return html`
             <svg fill-rule="evenodd" viewBox="64 64 896 896" fill="#2932E1" aria-hidden="true">
@@ -986,6 +1111,12 @@ export class VueDevToolsPanel extends LitElement {
                         <path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" />
                     </svg>
                 `;
+            case 'timeline':
+                return html`
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 12h4l3 8 4-16 3 8h4" />
+                    </svg>
+                `;
             case 'pick':
                 return html`
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
@@ -1442,6 +1573,22 @@ export class VueDevToolsPanel extends LitElement {
             &:hover {
                 color: #475467;
             }
+            & .section-filter {
+                margin-inline-start: 6px;
+                inline-size: 96px;
+                padding: 1px 6px;
+                border: 1px solid var(--field-border);
+                border-radius: 5px;
+                background: var(--bg);
+                color: var(--text-strong);
+                font-size: 11px;
+                text-transform: none;
+                outline: none;
+                cursor: text;
+            }
+            & .section-filter:focus {
+                border-color: var(--accent);
+            }
         }
         .vrow {
             display: flex;
@@ -1544,6 +1691,21 @@ export class VueDevToolsPanel extends LitElement {
             display: inline-block;
             margin-block: 4px 8px;
         }
+        .ev-time {
+            flex: none;
+            font-size: 10px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+            color: var(--muted);
+        }
+        .ev-comp {
+            margin-inline-start: auto;
+            padding-inline-start: 8px;
+            color: var(--muted);
+        }
+        .node.selected .ev-time,
+        .node.selected .ev-comp {
+            color: rgb(255 255 255 / 0.85);
+        }
     `;
 }
 

package/lib/vuex.js

@@ -44,7 +44,8 @@ hook.on('vuex:mutation', (mutation, state) => {
     snapshots.push({
         type: mutation.type,
         payload: mutation.payload,
-        state: clone(state)
+        state: clone(state),
+        time: Date.now()
     });
     emit();
 });

package/package.json

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