vite-plugin-devtools-vue2 0.1.3 → 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

@@ -20,3 +20,8 @@ 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;
+
+// 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/panel.js

@@ -3,12 +3,12 @@
 // on every Vue scheduler flush.
 
 import { LitElement, css, html } from 'lit';
-import { DragThreshold, EdgeMargin, PanelEdge, PanelH, PanelW, SectionFilterThreshold, StoreKey } from './config.js';
+import { DragThreshold, EdgeMargin, IdleTuckDelay, IdleTuckMargin, PanelEdge, PanelH, PanelW, SectionFilterThreshold, StoreKey } from './config.js';
+import { clearEvents, subscribe as eventsSubscribe, getEvents } from './events.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';
 
 export class VueDevToolsPanel extends LitElement {
@@ -51,6 +51,9 @@ export class VueDevToolsPanel extends LitElement {
         // the right; { edge: 'left'|'right'|'top'|'bottom', along: number }.
         this._pos = ui.pos || { edge: 'bottom', along: Number.POSITIVE_INFINITY };
         this._drag = null;
+        // When collapsed + idle, the entry tucks toward the edge (see IdleTuck*).
+        this._idleTucked = false;
+        this._idleTimer = 0;
         this._editingPath = null;
         this._focusEdit = false;
         this._flushTimer = null;
@@ -122,12 +125,15 @@ export class VueDevToolsPanel extends LitElement {
         const alongY = clamp(pos.along, vh - eh - margin);
 
         const es = entry.style;
+        // When collapsed and idle, tuck the entry toward the edge (smaller /
+        // negative margin) so it peeks; hovering/interacting restores it.
+        const dockMargin = this.collapsed && this._idleTucked ? IdleTuckMargin : EdgeMargin;
         es.insetInlineStart = es.insetBlockStart = es.insetInlineEnd = es.insetBlockEnd = 'auto';
         if (pos.edge === 'right' || pos.edge === 'left') {
-            es['inset' + (pos.edge === 'right' ? 'InlineEnd' : 'InlineStart')] = margin + 'px';
+            es['inset' + (pos.edge === 'right' ? 'InlineEnd' : 'InlineStart')] = dockMargin + 'px';
             es.insetBlockStart = alongY + 'px';
         } else {
-            es['inset' + (pos.edge === 'bottom' ? 'BlockEnd' : 'BlockStart')] = margin + 'px';
+            es['inset' + (pos.edge === 'bottom' ? 'BlockEnd' : 'BlockStart')] = dockMargin + 'px';
             es.insetInlineStart = alongX + 'px';
         }
         this.setAttribute('dock', pos.edge);
@@ -164,6 +170,7 @@ export class VueDevToolsPanel extends LitElement {
         }
         event.preventDefault();
         hide(); // clear any hover highlight before dragging
+        this._wakeEntry();
         const entry = this.renderRoot.querySelector('.entry');
         const rect = entry.getBoundingClientRect();
         this._drag = {
@@ -222,6 +229,28 @@ export class VueDevToolsPanel extends LitElement {
         }
         // Position was already decided live in _dragMove; just remember it.
         this._persistUiState();
+        this._scheduleIdleTuck();
+    }
+
+    // Idle-tuck: when collapsed with no interaction, the entry slides toward the
+    // edge; hovering/dragging/opening wakes it back to the normal margin.
+    _scheduleIdleTuck() {
+        clearTimeout(this._idleTimer);
+        if (!this.collapsed) {
+            return;
+        }
+        this._idleTimer = setTimeout(() => {
+            this._idleTucked = true;
+            this._applyPos();
+        }, IdleTuckDelay);
+    }
+
+    _wakeEntry() {
+        clearTimeout(this._idleTimer);
+        if (this._idleTucked) {
+            this._idleTucked = false;
+            this._applyPos();
+        }
     }
 
     connectedCallback() {
@@ -246,6 +275,7 @@ export class VueDevToolsPanel extends LitElement {
         hook.off('flush', this._onFlush);
         window.removeEventListener('keydown', this._onKeydown, true);
         window.removeEventListener('resize', this._onResize);
+        clearTimeout(this._idleTimer);
         if (this._resizeRaf) {
             cancelAnimationFrame(this._resizeRaf);
             this._resizeRaf = 0;
@@ -266,6 +296,7 @@ export class VueDevToolsPanel extends LitElement {
     firstUpdated() {
         this._applyPos();
         this.setAttribute('theme', this.theme);
+        this._scheduleIdleTuck();
     }
 
     _toggleTheme() {
@@ -535,6 +566,12 @@ export class VueDevToolsPanel extends LitElement {
         // Re-clamp the docked position when switching fab <-> panel (sizes differ).
         if (changed && changed.has('collapsed')) {
             this._applyPos();
+            // Opening wakes the entry; collapsing restarts the idle-tuck timer.
+            if (this.collapsed) {
+                this._scheduleIdleTuck();
+            } else {
+                this._wakeEntry();
+            }
         }
         // Focus a freshly opened inline editor.
         if (this._focusEdit) {
@@ -1002,7 +1039,12 @@ export class VueDevToolsPanel extends LitElement {
 
     render() {
         return html`
-            <div class="entry" @pointerdown=${event => this._onFabPointerDown(event)}>
+            <div
+                class="entry"
+                @pointerdown=${event => this._onFabPointerDown(event)}
+                @pointerenter=${() => this._wakeEntry()}
+                @pointerleave=${() => this._scheduleIdleTuck()}
+            >
                 <span class="fab-icon">${this._vueLogo()}</span>
             </div>
             ${this.collapsed ? null : this._renderPanel()}
@@ -1013,7 +1055,6 @@ export class VueDevToolsPanel extends LitElement {
         return html`
             <div class="panel">
                 <nav class="sidebar">
-                    <div class="logo">${this._vueLogo()}</div>
                     <button class="side-tab ${this.tab === 'components' ? 'active' : ''}" @click=${() => (this.tab = 'components')}>
                         ${this._icon('components')}
                         <span class="tip">Components</span>
@@ -1234,8 +1275,7 @@ export class VueDevToolsPanel extends LitElement {
         return html`
             <button class="btn on time-travel" @click=${() => travelTo(entry.index)}>⏱ Time Travel</button>
             ${this._renderKvSection('mutation', { type: snap.type, time: new Date(snap.time).toLocaleTimeString() }, false)}
-            ${payloadObj ? this._renderKvSection('payload', payloadObj, false) : null}
-            ${this._renderKvSection('state', snap.state || {}, false)}
+            ${payloadObj ? this._renderKvSection('payload', payloadObj, false) : null} ${this._renderKvSection('state', snap.state || {}, false)}
             ${store ? this._renderKvSection('getters (live)', store.getters || {}, false) : null}
         `;
     }
@@ -1246,12 +1286,13 @@ export class VueDevToolsPanel extends LitElement {
         return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(date.getMilliseconds(), 3)}`;
     }
 
-    // Plugin logo
+    // Plugin logo (Vite mark).
     _vueLogo() {
         return html`
-            <svg fill-rule="evenodd" viewBox="64 64 896 896" fill="var(--logo-fill)" aria-hidden="true">
+            <svg class="vlogo" viewBox="0 0 48 46" fill="none" aria-hidden="true">
                 <path
-                    d="M250.02 547.04c92.37-19.8 79.77-130.07 76.95-154.18-4.56-37.2-48.26-102.16-107.63-97.02-74.7 6.7-85.65 114.58-85.65 114.58-10.04 49.88 24.2 156.43 116.33 136.62m84.7 214.14c10.28 38.7 43.95 40.43 43.95 40.43H427V683.55h-51.74c-23.22 6.96-34.5 25.1-36.98 32.8-2.74 7.8-8.71 27.6-3.57 44.83m169.07-531.1c0-72.42-41.13-131.08-92.2-131.08-50.92 0-92.21 58.66-92.21 131.07 0 72.5 41.3 131.16 92.2 131.16 51.08 0 92.21-58.66 92.21-131.16m248.1 9.1c8.86-54.92-35.08-118.88-83.34-129.82-48.34-11.1-108.7 66.28-114.18 116.74-6.55 61.72 8.79 123.28 76.86 132.06 68.16 8.87 112.03-63.87 120.65-118.97m46.35 433.02s-105.47-81.53-167-169.6c-83.4-129.91-201.98-77.05-241.62-11.02-39.47 66.03-101 107.87-109.7 118.9-8.87 10.93-127.36 74.8-101.07 191.55 26.28 116.65 118.73 114.5 118.73 114.5s68.08 6.7 147.1-10.94C523.7 888.03 591.7 910 591.7 910s184.57 61.72 235.07-57.18c50.41-118.97-28.53-180.61-28.53-180.61M362.42 849.17c-51.83-10.36-72.47-45.65-75.13-51.7-2.57-6.13-17.24-34.55-9.45-82.85 22.39-72.41 86.23-77.63 86.23-77.63h63.85v-78.46l54.4.82.08 289.82zm205.38-.83c-53.56-13.75-56.05-51.78-56.05-51.78V643.95l56.05-.92v137.12c3.4 14.59 21.65 17.32 21.65 17.32h56.88V643.95h59.62v204.39zm323.84-397.72c0-26.35-21.89-105.72-103.15-105.72-81.43 0-92.29 74.9-92.29 127.84 0 50.54 4.31 121.13 105.4 118.8 101.15-2.15 90.04-114.41 90.04-140.92"
+                    d="M25.9456 44.9383C25.2821 45.7827 23.925 45.3131 23.925 44.2403V33.9369C23.925 32.6875 22.9126 31.6751 21.6631 31.6751H10.287C9.36714 31.6751 8.83075 30.6346 9.36713 29.8871L16.8464 19.4157C17.917 17.9185 16.8464 15.8376 15.0046 15.8376H1.23731C0.317479 15.8376 -0.218913 14.7972 0.317475 14.0497L10.0134 0.4741C10.2266 0.176825 10.5692 0.000183105 10.9332 0.000183105H39.8271C40.7469 0.000183105 41.2833 1.04065 40.7469 1.78814L33.2676 12.2595C32.197 13.7567 33.2676 15.8376 35.1094 15.8376H46.4856C47.4291 15.8376 47.959 16.9255 47.3753 17.6687L25.9478 44.9404L25.9456 44.9383Z"
+                    fill="#863BFF"
                 />
             </svg>
         `;
@@ -1422,6 +1463,11 @@ export class VueDevToolsPanel extends LitElement {
             background: var(--bg);
             border: 1px solid var(--border-strong);
             box-shadow: 0 6px 20px rgb(16 24 40 / 0.18);
+            transition:
+                inset-block-start 0.2s ease,
+                inset-block-end 0.2s ease,
+                inset-inline-start 0.2s ease,
+                inset-inline-end 0.2s ease;
         }
         .entry:active {
             cursor: grabbing;
@@ -1436,6 +1482,11 @@ export class VueDevToolsPanel extends LitElement {
             inline-size: 16px;
             block-size: 16px;
         }
+        .fab-icon .vlogo {
+            inline-size: 18px;
+            block-size: 18px;
+            display: block;
+        }
         /* On the left/right edges, stack the entry's icons vertically. */
         :host([dock='left']) .entry,
         :host([dock='right']) .entry {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vite-plugin-devtools-vue2",
-    "version": "0.1.3",
+    "version": "0.1.5",
     "description": "vite-plugin-vue-devtools for vue@2.x",
     "type": "module",
     "main": "lib/index.js",
@@ -18,6 +18,14 @@
         "inspector"
     ],
     "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/shuoshubao/vite-plugin-vue2-devtools.git"
+    },
+    "author": {
+        "name": "shuoshuobao",
+        "email": "shuoshuobao@gmail.com"
+    },
     "dependencies": {
         "lit": "^3.1.4"
     }