vite-plugin-vue-inspector - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

dist/index.js

@@ -146,2 +146,3 @@ var __create = Object.create;
 
+const isClient = typeof window !== "undefined"
 const App =  {
@@ -152,3 +153,3 @@ data() {
       overlayTarget: null,
-      disabled: !window.__VUE_INSPECTOR_INITIAL_ENABLED__,
+      disabled: isClient ? !window.__VUE_INSPECTOR_INITIAL_ENABLED__ : false,
       overlayVisible: false,
@@ -176,2 +177,3 @@
     controlStyle() {
+      if(!isClient) return \`\`
       const left = this.controlPosition.x || window.clientWidth
@@ -282,8 +284,8 @@ const top = this.controlPosition.y || 20
   overlayContainerScript: "\n    const container = document.createElement('div')\n    container.style.position = 'fixed'\n    container.id = 'vite_vue_inspector_overlay_container'\n    document.body.appendChild(container)\n  ",
-  styles: "\n.vue-inspector-control {\n  cursor: pointer;\n  position: fixed;\n  text-align: center;\n  right: 20px;\n  top: 20px;\n  z-index: 100000;\n  width: 60px;\n  height: 60px;\n  background-color: #fff;\n  border: 2px solid #29a8f2;\n  border-radius: 50%;\n}\n.vue-inspector-control img {\n  width: 50px;\n}\n.vue-inspector-control:hover {\n  background-color: #29a8f2;\n}\n.vue-inspector-control.disabled {\n  border: 2px dashed #ccc;\n}\n.vue-inspector-control.disabled:hover {\n  background-color: #ccc;\n}\n.vue-inspector-control.disabled img {\n  opacity: 0.5;\n}\n.vue-inspector-overlay {\n  position: fixed;\n  border: 2px dashed #666;\n  background-color: rgba(0,0,0,0.8);\n  color: #fff;\n  padding: 10px;\n  border-radius: 5px;\n  text-align: left;\n}\n.vue-inspector-overlay em {\n  font-style: normal;\n  font-weight: 500;\n}\n"
+  styles: "\n.vue-inspector-control {\n  cursor: pointer;\n  position: fixed;\n  text-align: center;\n  right: 20px;\n  top: 20px;\n  z-index: 100000;\n  width: 60px;\n  height: 60px;\n  background-color: #fff;\n  border: 2px solid #29a8f2;\n  border-radius: 50%;\n}\n.vue-inspector-control img {\n  width: 50px;\n}\n.vue-inspector-control:hover {\n  background-color: #29a8f2;\n}\n.vue-inspector-control.disabled {\n  border: 2px dashed #ccc;\n}\n.vue-inspector-control.disabled:hover {\n  background-color: #ccc;\n}\n.vue-inspector-control.disabled img {\n  opacity: 0.5;\n}\n.vue-inspector-overlay {\n  z-index: 100000;\n  position: fixed;\n  border: 2px dashed #666;\n  background-color: rgba(0,0,0,0.8);\n  color: #fff;\n  padding: 10px;\n  border-radius: 5px;\n  text-align: left;\n}\n.vue-inspector-overlay  li {\n  list-style-type: none;\n}\n.vue-inspector-overlay em {\n  font-style: normal;\n  font-weight: 500;\n}\n"
 };
 var v3 = {
-  scripts: 'import { createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "/node_modules/.vite/deps/vue.js?v=browserHash"\n\nconst _hoisted_1 = {\n  id: "vueInspectorControl",\n  ref: "target",\n  src: "https://github.com/webfansplz/vite-plugin-vue-inspector/blob/main/docs/images/logo.png?raw=true",\n  alt: "logo",\n  draggable: "false"\n}\nconst _hoisted_2 = /*#__PURE__*/_createTextVNode(" file: ")\nconst _hoisted_3 = /*#__PURE__*/_createTextVNode(" line: ")\nconst _hoisted_4 = /*#__PURE__*/_createTextVNode(" column: ")\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock("div", null, [\n    _createCommentVNode(" switch control "),\n    _createElementVNode("div", {\n      class: _normalizeClass(["vue-inspector-control", {disabled: _ctx.disabled}]),\n      style: _normalizeStyle(_ctx.controlStyle),\n      onClick: _cache[0] || (_cache[0] = _withModifiers((...args) => (_ctx.toggleControl && _ctx.toggleControl(...args)), ["stop"]))\n    }, [\n      _createElementVNode("img", _hoisted_1, null, 512 /* NEED_PATCH */)\n    ], 6 /* CLASS, STYLE */),\n    _createCommentVNode(" overlay "),\n    (_ctx.overlayVisible)\n      ? (_openBlock(), _createElementBlock("ul", {\n          key: 0,\n          ref: "overlayTarget",\n          class: "vue-inspector-overlay",\n          style: _normalizeStyle(_ctx.overlayStyle)\n        }, [\n          _createElementVNode("li", null, [\n            _hoisted_2,\n            _createElementVNode("em", null, _toDisplayString(`<${_ctx.navigationParams.title}>`), 1 /* TEXT */)\n          ]),\n          _createElementVNode("li", null, [\n            _hoisted_3,\n            _createElementVNode("em", null, _toDisplayString(_ctx.navigationParams.line), 1 /* TEXT */)\n          ]),\n          _createElementVNode("li", null, [\n            _hoisted_4,\n            _createElementVNode("em", null, _toDisplayString(_ctx.navigationParams.column), 1 /* TEXT */)\n          ])\n        ], 4 /* STYLE */))\n      : _createCommentVNode("v-if", true)\n  ]))\n}\nconst App =  {\n  data() {\n    return {\n      target: null,\n      overlayTarget: null,\n      disabled: !window.__VUE_INSPECTOR_INITIAL_ENABLED__,\n      overlayVisible: false,\n\n      navigationParams: {\n        file: "",\n        line: 0,\n        column: 0,\n      },\n      position: {\n        x: 0,\n        y: 0,\n      },\n\n      // drag control\n      controlPosition: {\n        x: 0,\n        y: 0,\n      },\n      pressedDelta: undefined,\n    }\n  },\n  computed: {\n    controlStyle() {\n      const left = this.controlPosition.x || window.clientWidth\n      const top = this.controlPosition.y || 20\n      return `left:${left}px;top:${top}px;`\n    },\n    overlayStyle() {\n      return {\n        left: `${\n          this.position.x - this.$refs.overlayTarget?.clientWidth / 2 || 0\n        }px`,\n        top: `${this.position.y + 20}px`,\n      }\n    },\n  },\n  mounted() {\n    this.$refs.target?.addEventListener("pointerdown", this.dragStart, true)\n    window.addEventListener("pointermove", this.dragMove, true)\n    window.addEventListener("pointerup", this.dragEnd, true)\n\n    window.addEventListener("click", this.onFetch)\n    window.addEventListener("mousemove", this.onMouseMove)\n  },\n  methods: {\n    dragStart(e) {\n      e.stopPropagation()\n      if (e.target !== this.$refs.target) return\n      const rect = this.$refs.target?.getBoundingClientRect()\n      const pos = {\n        x: e.pageX - rect.left,\n        y: e.pageY - rect.top,\n      }\n      this.pressedDelta = pos\n    },\n    dragMove(e) {\n      if (!this.pressedDelta) return\n      this.controlPosition = {\n        x: e.pageX - this.pressedDelta.x,\n        y: e.pageY - this.pressedDelta.y,\n      }\n    },\n    dragEnd() {\n      if (!this.pressedDelta) return\n      this.pressedDelta = undefined\n    },\n\n    toggleControl() {\n      this.disabled = !this.disabled\n    },\n    getTargetNode(e) {\n      const path = e.path ?? e.composedPath()\n      const targetNode = path?.find(node => node?.hasAttribute?.("data-v-inspector-file"))\n      if (targetNode?.id === "vueInspectorControl") {\n        return {\n          targetNode: null,\n          params: null,\n        }\n      }\n      return {\n        targetNode,\n        params: targetNode\n          ? {\n            file: targetNode?.getAttribute?.("data-v-inspector-file"),\n            line: targetNode?.getAttribute?.("data-v-inspector-line"),\n            column: targetNode?.getAttribute?.("data-v-inspector-column"),\n            title: targetNode?.getAttribute?.("data-v-inspector-title"),\n          }\n          : null,\n      }\n    },\n    onFetch(e) {\n      if (this.disabled) return\n      e.preventDefault()\n      const { targetNode, params } = this.getTargetNode(e)\n      if (!targetNode) return\n      const { file, line, column } = params\n      fetch(\n        `/__open-stack-frame-in-editor?file=${file}&line=${line}&column=${column}`,\n      )\n      this.overlayVisible = false\n    },\n    onMouseMove(e) {\n      if (this.disabled) return\n      const { targetNode, params } = this.getTargetNode(e)\n      if (targetNode) {\n        this.position.x = e.pageX\n        this.position.y = e.pageY\n        this.overlayVisible = true\n        this.navigationParams = params\n      }\n      else {\n        this.overlayVisible = false\n        this.navigationParams = {\n          file: "",\n          line: 0,\n          column: 0,\n        }\n      }\n    },\n  },\n}\nApp.render = render\n    import { createApp } from "/node_modules/.vite/deps/vue.js?v=browserHash"\n    createApp(App).mount(\'#vite_vue_inspector_overlay_container\')\n  ',
+  scripts: 'import { createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "/node_modules/.vite/deps/vue.js?v=browserHash"\n\nconst _hoisted_1 = {\n  id: "vueInspectorControl",\n  ref: "target",\n  src: "https://github.com/webfansplz/vite-plugin-vue-inspector/blob/main/docs/images/logo.png?raw=true",\n  alt: "logo",\n  draggable: "false"\n}\nconst _hoisted_2 = /*#__PURE__*/_createTextVNode(" file: ")\nconst _hoisted_3 = /*#__PURE__*/_createTextVNode(" line: ")\nconst _hoisted_4 = /*#__PURE__*/_createTextVNode(" column: ")\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock("div", null, [\n    _createCommentVNode(" switch control "),\n    _createElementVNode("div", {\n      class: _normalizeClass(["vue-inspector-control", {disabled: _ctx.disabled}]),\n      style: _normalizeStyle(_ctx.controlStyle),\n      onClick: _cache[0] || (_cache[0] = _withModifiers((...args) => (_ctx.toggleControl && _ctx.toggleControl(...args)), ["stop"]))\n    }, [\n      _createElementVNode("img", _hoisted_1, null, 512 /* NEED_PATCH */)\n    ], 6 /* CLASS, STYLE */),\n    _createCommentVNode(" overlay "),\n    (_ctx.overlayVisible)\n      ? (_openBlock(), _createElementBlock("ul", {\n          key: 0,\n          ref: "overlayTarget",\n          class: "vue-inspector-overlay",\n          style: _normalizeStyle(_ctx.overlayStyle)\n        }, [\n          _createElementVNode("li", null, [\n            _hoisted_2,\n            _createElementVNode("em", null, _toDisplayString(`<${_ctx.navigationParams.title}>`), 1 /* TEXT */)\n          ]),\n          _createElementVNode("li", null, [\n            _hoisted_3,\n            _createElementVNode("em", null, _toDisplayString(_ctx.navigationParams.line), 1 /* TEXT */)\n          ]),\n          _createElementVNode("li", null, [\n            _hoisted_4,\n            _createElementVNode("em", null, _toDisplayString(_ctx.navigationParams.column), 1 /* TEXT */)\n          ])\n        ], 4 /* STYLE */))\n      : _createCommentVNode("v-if", true)\n  ]))\n}\nconst isClient = typeof window !== "undefined"\nconst App =  {\n  data() {\n    return {\n      target: null,\n      overlayTarget: null,\n      disabled: isClient ? !window.__VUE_INSPECTOR_INITIAL_ENABLED__ : false,\n      overlayVisible: false,\n\n      navigationParams: {\n        file: "",\n        line: 0,\n        column: 0,\n      },\n      position: {\n        x: 0,\n        y: 0,\n      },\n\n      // drag control\n      controlPosition: {\n        x: 0,\n        y: 0,\n      },\n      pressedDelta: undefined,\n    }\n  },\n  computed: {\n    controlStyle() {\n      if(!isClient) return ``\n      const left = this.controlPosition.x || window.clientWidth\n      const top = this.controlPosition.y || 20\n      return `left:${left}px;top:${top}px;`\n    },\n    overlayStyle() {\n      return {\n        left: `${\n          this.position.x - this.$refs.overlayTarget?.clientWidth / 2 || 0\n        }px`,\n        top: `${this.position.y + 20}px`,\n      }\n    },\n  },\n  mounted() {\n    this.$refs.target?.addEventListener("pointerdown", this.dragStart, true)\n    window.addEventListener("pointermove", this.dragMove, true)\n    window.addEventListener("pointerup", this.dragEnd, true)\n\n    window.addEventListener("click", this.onFetch)\n    window.addEventListener("mousemove", this.onMouseMove)\n  },\n  methods: {\n    dragStart(e) {\n      e.stopPropagation()\n      if (e.target !== this.$refs.target) return\n      const rect = this.$refs.target?.getBoundingClientRect()\n      const pos = {\n        x: e.pageX - rect.left,\n        y: e.pageY - rect.top,\n      }\n      this.pressedDelta = pos\n    },\n    dragMove(e) {\n      if (!this.pressedDelta) return\n      this.controlPosition = {\n        x: e.pageX - this.pressedDelta.x,\n        y: e.pageY - this.pressedDelta.y,\n      }\n    },\n    dragEnd() {\n      if (!this.pressedDelta) return\n      this.pressedDelta = undefined\n    },\n\n    toggleControl() {\n      this.disabled = !this.disabled\n    },\n    getTargetNode(e) {\n      const path = e.path ?? e.composedPath()\n      const targetNode = path?.find(node => node?.hasAttribute?.("data-v-inspector-file"))\n      if (targetNode?.id === "vueInspectorControl") {\n        return {\n          targetNode: null,\n          params: null,\n        }\n      }\n      return {\n        targetNode,\n        params: targetNode\n          ? {\n            file: targetNode?.getAttribute?.("data-v-inspector-file"),\n            line: targetNode?.getAttribute?.("data-v-inspector-line"),\n            column: targetNode?.getAttribute?.("data-v-inspector-column"),\n            title: targetNode?.getAttribute?.("data-v-inspector-title"),\n          }\n          : null,\n      }\n    },\n    onFetch(e) {\n      if (this.disabled) return\n      e.preventDefault()\n      const { targetNode, params } = this.getTargetNode(e)\n      if (!targetNode) return\n      const { file, line, column } = params\n      fetch(\n        `/__open-stack-frame-in-editor?file=${file}&line=${line}&column=${column}`,\n      )\n      this.overlayVisible = false\n    },\n    onMouseMove(e) {\n      if (this.disabled) return\n      const { targetNode, params } = this.getTargetNode(e)\n      if (targetNode) {\n        this.position.x = e.pageX\n        this.position.y = e.pageY\n        this.overlayVisible = true\n        this.navigationParams = params\n      }\n      else {\n        this.overlayVisible = false\n        this.navigationParams = {\n          file: "",\n          line: 0,\n          column: 0,\n        }\n      }\n    },\n  },\n}\nApp.render = render\n    import { createApp } from "/node_modules/.vite/deps/vue.js?v=browserHash"\n    createApp(App).mount(\'#vite_vue_inspector_overlay_container\')\n  ',
   overlayContainerScript: "\n    const container = document.createElement('div')\n    container.style.position = 'fixed'\n    container.id = 'vite_vue_inspector_overlay_container'\n    document.body.appendChild(container)\n  ",
-  styles: "\n.vue-inspector-control {\n  cursor: pointer;\n  position: fixed;\n  text-align: center;\n  right: 20px;\n  top: 20px;\n  z-index: 100000;\n  width: 60px;\n  height: 60px;\n  background-color: #fff;\n  border: 2px solid #29a8f2;\n  border-radius: 50%;\n}\n.vue-inspector-control img {\n  width: 50px;\n}\n.vue-inspector-control:hover {\n  background-color: #29a8f2;\n}\n.vue-inspector-control.disabled {\n  border: 2px dashed #ccc;\n}\n.vue-inspector-control.disabled:hover {\n  background-color: #ccc;\n}\n.vue-inspector-control.disabled img {\n  opacity: 0.5;\n}\n.vue-inspector-overlay {\n  position: fixed;\n  border: 2px dashed #666;\n  background-color: rgba(0,0,0,0.8);\n  color: #fff;\n  padding: 10px;\n  border-radius: 5px;\n  text-align: left;\n}\n.vue-inspector-overlay em {\n  font-style: normal;\n  font-weight: 500;\n}\n"
+  styles: "\n.vue-inspector-control {\n  cursor: pointer;\n  position: fixed;\n  text-align: center;\n  right: 20px;\n  top: 20px;\n  z-index: 100000;\n  width: 60px;\n  height: 60px;\n  background-color: #fff;\n  border: 2px solid #29a8f2;\n  border-radius: 50%;\n}\n.vue-inspector-control img {\n  width: 50px;\n}\n.vue-inspector-control:hover {\n  background-color: #29a8f2;\n}\n.vue-inspector-control.disabled {\n  border: 2px dashed #ccc;\n}\n.vue-inspector-control.disabled:hover {\n  background-color: #ccc;\n}\n.vue-inspector-control.disabled img {\n  opacity: 0.5;\n}\n.vue-inspector-overlay {\n  z-index: 100000;\n  position: fixed;\n  border: 2px dashed #666;\n  background-color: rgba(0,0,0,0.8);\n  color: #fff;\n  padding: 10px;\n  border-radius: 5px;\n  text-align: left;\n}\n.vue-inspector-overlay  li {\n  list-style-type: none;\n}\n.vue-inspector-overlay em {\n  font-style: normal;\n  font-weight: 500;\n}\n"
 };
@@ -290,0 +292,0 @@

package.json

 {
   "name": "vite-plugin-vue-inspector",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "jump to local IDE source code while click the element of browser automatically.",
@@ -34,3 +34,4 @@ "keywords": [
     "build-overlay": "esmo scripts/build-overlay.ts",
-    "build": "pnpm run build-overlay && tsup src/index.ts --format cjs,esm --dts"
+    "copy-overlay": "esno scripts/copy-overlay.ts",
+    "build": "pnpm run build-overlay && tsup src/index.ts --format cjs,esm --dts && pnpm run copy-overlay"
   },
@@ -51,2 +52,3 @@ "bugs": {
     "chalk": "4.1.2",
+    "esno": "^0.14.1",
     "magic-string": "^0.26.1",
@@ -53,0 +55,0 @@ "shell-quote": "^1.7.3"

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

85847

7.55%

Number of package files

7

16.67%

Lines of code

1275

0.63%

Worsened metrics

Dependency count

10

11.11%

Dependency changes

• + Added

  esno@^0.14.1

• + Added

  @esbuild/aix-ppc64@0.25.1
  (transitive)

• + Added

  @esbuild/android-arm@0.25.1
  (transitive)

• + Added

  @esbuild/android-arm64@0.25.1
  (transitive)

• + Added

  @esbuild/android-x64@0.25.1
  (transitive)

• + Added

  @esbuild/darwin-arm64@0.25.1
  (transitive)

• + Added

  @esbuild/darwin-x64@0.25.1
  (transitive)

• + Added

  @esbuild/freebsd-arm64@0.25.1
  (transitive)

• + Added

  @esbuild/freebsd-x64@0.25.1
  (transitive)

• + Added

  @esbuild/linux-arm@0.25.1
  (transitive)

• + Added

  @esbuild/linux-arm64@0.25.1
  (transitive)

• + Added

  @esbuild/linux-ia32@0.25.1
  (transitive)

• + Added

  @esbuild/linux-loong64@0.25.1
  (transitive)

• + Added

  @esbuild/linux-mips64el@0.25.1
  (transitive)

• + Added

  @esbuild/linux-ppc64@0.25.1
  (transitive)

• + Added

  @esbuild/linux-riscv64@0.25.1
  (transitive)

• + Added

  @esbuild/linux-s390x@0.25.1
  (transitive)

• + Added

  @esbuild/linux-x64@0.25.1
  (transitive)

• + Added

  @esbuild/netbsd-arm64@0.25.1
  (transitive)

• + Added

  @esbuild/netbsd-x64@0.25.1
  (transitive)

• + Added

  @esbuild/openbsd-arm64@0.25.1
  (transitive)

• + Added

  @esbuild/openbsd-x64@0.25.1
  (transitive)

• + Added

  @esbuild/sunos-x64@0.25.1
  (transitive)

• + Added

  @esbuild/win32-arm64@0.25.1
  (transitive)

• + Added

  @esbuild/win32-ia32@0.25.1
  (transitive)

• + Added

  @esbuild/win32-x64@0.25.1
  (transitive)

• + Added

  builtins@4.1.0
  (transitive)

• + Added

  cross-spawn@7.0.6
  (transitive)

• + Added

  esbuild@0.25.1
  (transitive)

• + Added

  esbuild-node-loader@0.6.5
  (transitive)

• + Added

  esbuild-register@3.6.0
  (transitive)

• + Added

  esno@0.14.1
  (transitive)

• + Added

  import-meta-resolve@1.1.1
  (transitive)

• + Added

  isexe@2.0.0
  (transitive)

• + Added

  path-key@3.1.1
  (transitive)

• + Added

  semver@7.7.1
  (transitive)

• + Added

  shebang-command@2.0.0
  (transitive)

• + Added

  shebang-regex@3.0.0
  (transitive)

• + Added

  which@2.0.2
  (transitive)