h-vue-scan/dist/index.js

A Vue 3 plugin for scanning re-rendering states and show them in the browser dom.

import { getCurrentInstance as f, nextTick as m } from "vue";
function a(e) {
  if (!e.enabled)
    return;
  const n = f();
  n && m(() => {
    const t = n.vnode.el;
    if (!t)
      return;
    const o = document.createElement("div"), i = Math.floor(e.opacity * 255).toString(16).padStart(2, "0");
    o.style.cssText = `
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: ${e.borderWidth} solid ${e.color};
      background-color: ${e.color}${i};
      pointer-events: none;
      box-sizing: border-box;
      z-index: 2147483647;
    `;
    const r = getComputedStyle(t), d = t.style.position;
    r.position === "static" && (t.style.position = "relative"), t.appendChild(o), setTimeout(() => {
      o.parentNode && o.parentNode.removeChild(o), r.position === "static" && (t.style.position = d);
    }, e.duration);
  });
}
var u, p;
const g = {
  autoInject: !0,
  color: "#41B883",
  duration: 1e3,
  opacity: 0.3,
  borderWidth: "2px",
  enabled: ((p = (u = import.meta) == null ? void 0 : u.env) == null ? void 0 : p.MODE) === "development"
}, y = {
  install(e, n = g) {
    var c, s;
    if (((s = (c = import.meta) == null ? void 0 : c.env) == null ? void 0 : s.MODE) !== "development")
      return;
    const {
      autoInject: t,
      borderWidth: o,
      color: i,
      duration: r,
      enabled: d,
      opacity: l
    } = n;
    if (!i || !o || !r || !l) {
      console.warn("[VueScan] Invalid options provided. Please ensure all required options are set.");
      return;
    }
    e.config.globalProperties.$renderDebug = (b = n) => {
      a(b);
    }, e.provide("renderDebug", a), t && e.mixin({
      updated() {
        a({ borderWidth: o, color: i, duration: r, enabled: d, opacity: l });
      }
    });
  }
};
export {
  y as RenderDebugPlugin
};