vite-plugin-devtools-vue2 0.1.0

package/lib/picker.js

@@ -0,0 +1,128 @@
+// picker.js — "click an element on the page to select its component" mode.
+// Hover draws a transient highlight + a name label; click resolves the nearest
+// Vue instance and hands it back via the callback. Esc cancels.
+
+let active = false;
+let box = null;
+let label = null;
+let onPick = null;
+let hovered = null;
+
+const nearestVm = el => {
+    while (el) {
+        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)
+            .split(/[\\/]/)
+            .pop()
+            .replace(/\.vue$/, '');
+    if (!n && vm.$root === vm) n = 'Root';
+    return n || 'Anonymous';
+};
+
+const ensureEls = () => {
+    if (box) return;
+    box = document.createElement('div');
+    Object.assign(box.style, {
+        position: 'fixed',
+        zIndex: '2147483646',
+        background: 'rgba(65, 184, 131, 0.35)',
+        border: '1px solid rgba(65, 184, 131, 0.9)',
+        borderRadius: '3px',
+        pointerEvents: 'none',
+        display: 'none'
+    });
+    label = document.createElement('div');
+    Object.assign(label.style, {
+        position: 'fixed',
+        zIndex: '2147483647',
+        background: '#41b883',
+        color: '#17222b',
+        font: '600 11px -apple-system, sans-serif',
+        padding: '2px 6px',
+        borderRadius: '3px',
+        pointerEvents: 'none',
+        display: 'none',
+        whiteSpace: 'nowrap'
+    });
+    document.body.appendChild(box);
+    document.body.appendChild(label);
+};
+
+const paint = vm => {
+    const el = vm && vm.$el;
+    if (!el || !el.getBoundingClientRect) return clear();
+    const r = el.getBoundingClientRect();
+    Object.assign(box.style, {
+        display: 'block',
+        top: `${r.top}px`,
+        left: `${r.left}px`,
+        width: `${r.width}px`,
+        height: `${r.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`;
+};
+
+const clear = () => {
+    if (box) box.style.display = 'none';
+    if (label) label.style.display = 'none';
+};
+
+const onMove = e => {
+    const vm = nearestVm(e.target);
+    hovered = vm;
+    if (vm) paint(vm);
+    else clear();
+};
+
+const onClick = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const vm = hovered || nearestVm(e.target);
+    const cb = onPick;
+    stopPicking();
+    if (vm && cb) cb(vm);
+};
+
+const onKey = e => {
+    if (e.key === 'Escape') stopPicking();
+};
+
+export const startPicking = cb => {
+    if (active) return;
+    ensureEls();
+    active = true;
+    onPick = cb;
+    hovered = null;
+    document.addEventListener('mousemove', onMove, true);
+    document.addEventListener('click', onClick, true);
+    document.addEventListener('keydown', onKey, true);
+    document.body.style.cursor = 'crosshair';
+};
+
+export const stopPicking = () => {
+    if (!active) return;
+    active = false;
+    onPick = null;
+    hovered = null;
+    document.removeEventListener('mousemove', onMove, true);
+    document.removeEventListener('click', onClick, true);
+    document.removeEventListener('keydown', onKey, true);
+    document.body.style.cursor = '';
+    clear();
+};
+
+export const isPicking = () => {
+    return active;
+};

package/lib/vuex.js

@@ -0,0 +1,88 @@
+// vuex.js — Vuex 3.x integration.
+//
+// Vuex's devtool plugin talks to the global hook: on store creation it emits
+// `vuex:init` with the store, subscribes to mutations emitting `vuex:mutation`
+// (mutation, state), and listens for `vuex:travel-to-state` to replaceState.
+// We record a snapshot per mutation so the panel can inspect state over time
+// and time-travel. This module must be imported before the store is created,
+// which main.js guarantees (it runs before the app code).
+
+import hook from './hook.js';
+
+const snapshots = []; // { type, payload, state, base? }
+const listeners = new Set();
+let store = null;
+
+const emit = () => {
+    listeners.forEach(l => l());
+};
+
+// Deep clone so a snapshot isn't mutated by later state changes. Vuex state is
+// normally serialisable; fall back to the live reference if it isn't.
+const clone = state => {
+    try {
+        return JSON.parse(JSON.stringify(state));
+    } catch (e) {
+        return state;
+    }
+};
+
+hook.on('vuex:init', s => {
+    store = s;
+    snapshots.length = 0;
+    snapshots.push({
+        type: 'Base State',
+        payload: undefined,
+        state: clone(s.state),
+        base: true
+    });
+    emit();
+});
+
+hook.on('vuex:mutation', (mutation, state) => {
+    if (!store) return;
+    snapshots.push({
+        type: mutation.type,
+        payload: mutation.payload,
+        state: clone(state)
+    });
+    emit();
+});
+
+export const hasStore = () => {
+    return !!store;
+};
+
+export const getSnapshots = () => {
+    return snapshots;
+};
+
+export const getStore = () => {
+    return store;
+};
+
+export const subscribe = cb => {
+    listeners.add(cb);
+    return () => listeners.delete(cb);
+};
+
+// Apply a recorded snapshot to the live store (Vuex's plugin does the
+// replaceState in response to this event).
+export const travelTo = index => {
+    const snap = snapshots[index];
+    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;
+    snapshots.length = 0;
+    snapshots.push({
+        type: 'Base State',
+        payload: undefined,
+        state: clone(store.state),
+        base: true
+    });
+    emit();
+};

package/lib/walker.js

@@ -0,0 +1,133 @@
+// walker.js — turn live Vue 2 component instances into plain data the panel
+// can render, and read a selected instance's props/data/computed.
+
+// Stable ids across re-walks: same instance -> same id.
+const idMap = new WeakMap();
+let uid = 0;
+const idOf = vm => {
+    let id = idMap.get(vm);
+    if (id === undefined) {
+        id = ++uid;
+        idMap.set(vm, id);
+    }
+    return id;
+};
+
+// Registry so the panel can resolve an id back to the live instance.
+const registry = new Map();
+
+export const getInstance = id => {
+    return registry.get(id);
+};
+
+const displayName = vm => {
+    const opts = vm.$options || {};
+    let name = opts.name || opts._componentTag;
+    if (!name && opts.__file) {
+        // vite-plugin-vue2 sets __file in dev — gives nice names like "UserCard".
+        name = String(opts.__file)
+            .split(/[\\/]/)
+            .pop()
+            .replace(/\.vue$/, '');
+    }
+    if (!name && vm.$root === vm) name = 'Root';
+    return name || 'Anonymous';
+};
+
+// Find every root instance currently mounted in the DOM. Vue 2 sets
+// `el.__vue__` on component elements; `$root` dedupes them into app roots.
+export const findRoots = () => {
+    const roots = new Set();
+    const els = document.querySelectorAll('*');
+    for (const el of els) {
+        const vm = el.__vue__;
+        if (vm && vm.$root) roots.add(vm.$root);
+    }
+    return [...roots];
+};
+
+// Build a serialisable tree; keeps the registry in sync with what's shown.
+// The synthetic root instance (`new Vue({ render: h => h(App) })`) carries no
+// meaningful state, so — like vue-devtools — we skip it and surface its
+// children (e.g. <App>) as the top-level nodes.
+export const buildTree = () => {
+    registry.clear();
+    return findRoots().flatMap(vm => walk(vm).children);
+};
+
+const walk = vm => {
+    const id = idOf(vm);
+    registry.set(id, vm);
+    return {
+        id,
+        name: displayName(vm),
+        children: (vm.$children || []).map(walk)
+    };
+};
+
+// ---- value formatting -------------------------------------------------------
+
+// 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()}>`;
+    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}`);
+        return `[${items.join(', ')}]`;
+    }
+    if (t === '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('…');
+        return `{ ${preview.join(', ')} }`;
+    }
+    return String(value);
+};
+
+// 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: [] };
+
+    const props = [];
+    const propDefs = (vm.$options && vm.$options.props) || null;
+    if (propDefs) {
+        for (const key of Object.keys(propDefs)) {
+            props.push({ key, value: vm[key] });
+        }
+    }
+
+    const data = [];
+    const raw = vm._data || vm.$data;
+    if (raw) {
+        for (const key of Object.keys(raw)) {
+            data.push({ key, value: raw[key] });
+        }
+    }
+
+    const computed = [];
+    const computedDefs = (vm.$options && vm.$options.computed) || null;
+    if (computedDefs) {
+        for (const key of Object.keys(computedDefs)) {
+            let value;
+            try {
+                value = vm[key]; // reading the getter is intentional
+            } catch (err) {
+                value = `⚠ ${err && err.message}`;
+            }
+            computed.push({ key, value });
+        }
+    }
+
+    return { props, data, computed };
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "vite-plugin-devtools-vue2",
+    "version": "0.1.0",
+    "description": "vite-plugin-vue-devtools for vue@2.x",
+    "type": "module",
+    "main": "lib/index.js",
+    "exports": {
+        ".": "./lib/index.js"
+    },
+    "files": [
+        "lib"
+    ],
+    "keywords": [
+        "vite-plugin",
+        "vue2",
+        "vue-devtools",
+        "devtools",
+        "inspector"
+    ],
+    "license": "MIT",
+    "dependencies": {
+        "lit": "^3.1.4"
+    }
+}