vite-plugin-vue-devtools 0.0.1-alpha.0 → 0.0.1-alpha.2

package/package.json

@@ -1,18 +1,102 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.0.1-alpha.0",
-  "description": "Vue Devtools",
-  "scripts": {
-  },
+  "version": "0.0.1-alpha.2",
+  "packageManager": "pnpm@7.30.0",
+  "description": "A vite plugin for Vue Devtools",
+  "author": "webfansplz",
+  "license": "MIT",
+  "homepage": "https://github.com/webfansplz/vite-plugin-vue-devtools#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/webfansplz/vite-plugin-vue-devtools.git"
   },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/webfansplz/vite-plugin-vue-devtools/issues"
   },
-  "homepage": "https://github.com/webfansplz/vite-plugin-vue-devtools#readme"
+  "keywords": [
+    "vue-devtools",
+    "vite-plugin",
+    "vite-plugin-vue-devtools",
+    "vue",
+    "vite"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/node/app.js",
+    "src/node/Container.vue",
+    "*.d.ts"
+  ],
+  "engines": {
+    "node": ">=14"
+  },
+  "scripts": {
+    "build": "rimraf dist && run-s build:*",
+    "build:client": "vite build src/client",
+    "build:js": "unbuild",
+    "dev": "nr stub && vite src/client",
+    "dev:client": "vite build src/client --watch",
+    "play": "nr -C playground dev",
+    "stub": "unbuild --stub",
+    "lint": "eslint . --fix",
+    "prepublishOnly": "npm run build",
+    "release": "bumpp && npm publish"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.1.2",
+    "nanoid": "^4.0.2",
+    "sirv": "^2.0.2",
+    "splitpanes": "^3.1.5",
+    "vite-hot-client": "^0.2.1",
+    "vite-plugin-vue-inspector": "^3.4.1",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.38.5",
+    "@antfu/ni": "^0.21.3",
+    "@iconify/json": "^2.2.52",
+    "@nuxt/devtools-ui-kit": "^0.4.1",
+    "@types/codemirror": "^5.60.7",
+    "@types/node": "^18.15.13",
+    "@types/splitpanes": "^2.2.1",
+    "@unocss/eslint-config": "^0.51.5",
+    "@unocss/reset": "^0.51.5",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "bumpp": "^9.1.0",
+    "codemirror": "^6.0.1",
+    "codemirror-theme-vars": "^0.1.2",
+    "dayjs": "^1.11.7",
+    "eslint": "^8.38.0",
+    "fast-glob": "^3.2.12",
+    "floating-vue": "2.0.0-beta.20",
+    "fuse.js": "^6.6.2",
+    "image-meta": "^0.1.1",
+    "npm-run-all": "^4.1.5",
+    "ohash": "^1.1.2",
+    "pathe": "^1.1.0",
+    "pinia": "^2.0.35",
+    "rimraf": "^5.0.0",
+    "typescript": "^5.0.4",
+    "unbuild": "^1.2.1",
+    "unocss": "^0.51.5",
+    "unplugin-auto-import": "^0.15.3",
+    "unplugin-vue-components": "^0.24.1",
+    "vis-data": "^7.1.6",
+    "vis-network": "^9.1.6",
+    "vite": "^4.3.1",
+    "vite-dev-rpc": "^0.1.2",
+    "vite-plugin-inspect": "^0.7.23",
+    "vite-plugin-pages": "^0.29.0",
+    "vue": "^3.2.47"
+  }
 }

package/src/node/Container.vue

@@ -0,0 +1,298 @@
+<script setup>
+import { computed, defineProps, ref } from 'vue'
+import vueDevtoolsOptions from 'virtual:vue-devtools-options'
+
+const props = defineProps({
+  hook: {
+    type: Object,
+  },
+})
+
+window.__VUE_DEVTOOLS_GLOBAL_HOOKS__ = function () {
+  return props.hook
+}
+
+const clientUrl = `${vueDevtoolsOptions.base || '/'}__devtools/`
+const iframe = ref()
+const panelState = ref({
+  position: 'bottom',
+  viewMode: 'default',
+})
+const panelVisible = ref(false)
+const hookBuffer = []
+const panelStyle = computed(() => {
+  if (panelState.value.viewMode === 'component-inspector') {
+    return {
+      bottom: '10px',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      height: '80px',
+      width: '400px',
+    }
+  }
+
+  if (panelState.value.position === 'bottom') {
+    return {
+      transform: 'translateX(-50%)',
+      bottom: '10px',
+      left: '50%',
+    }
+  }
+  else if (panelState.value.position === 'top') {
+    return {
+      transform: 'translateX(-50%)',
+      top: '10px',
+      left: '50%',
+    }
+  }
+  else if (panelState.value.position === 'left') {
+    return {
+      transform: 'translateY(-50%)',
+      top: '50%',
+      left: '10px',
+    }
+  }
+  else {
+    return {
+      transform: 'translateY(-50%)',
+      top: '50%',
+      right: '10px',
+    }
+  }
+})
+const toggleButtonPosition = computed(() => {
+  if (panelState.value.position === 'left') {
+    return {
+      'left': '-8px',
+      'top': 'calc(50% - 25px)',
+      'height': '35px',
+      'width': '35px',
+      'borderRadius': '0 100px 100px 0',
+      '--hover-translate': 'translateX(3px)',
+    }
+  }
+  if (panelState.value.position === 'right') {
+    return {
+      'right': '-8px',
+      'top': 'calc(50% - 25px)',
+      'height': '35px',
+      'width': '35px',
+      'borderRadius': '100px 0 0 100px',
+      '--hover-translate': 'translateX(-3px)',
+    }
+  }
+  if (panelState.value.position === 'top') {
+    return {
+      'top': '-3px',
+      'left': 'calc(50% - 25px)',
+      'borderRadius': '0 0 100px 100px',
+      'height': '30px',
+      'width': '40px',
+      '--hover-translate': 'translate(0, 3px)',
+    }
+  }
+  return {
+    'bottom': '-5px',
+    'left': 'calc(50% - 25px)',
+    'borderRadius': '100px 100px 0 0',
+    'height': '30px',
+    'width': '40px',
+    '--hover-translate': 'translate(0, -3px)',
+  }
+})
+const panelPosition = computed(() => panelVisible.value ? panelStyle.value : { zIndex: -100000 })
+
+function togglePanel() {
+  panelVisible.value = !panelVisible.value
+}
+
+function enableComponentInspector() {
+  window.__VUE_INSPECTOR__?.enable()
+  panelState.value.viewMode = 'component-inspector'
+}
+
+function disableComponentInspector() {
+  window.__VUE_INSPECTOR__?.disable()
+  props.hook.emit('host:inspector:close')
+  if (panelState.value.viewMode === 'component-inspector')
+    panelState.value.viewMode = 'default'
+}
+
+function waitForClientInjection(retry = 10, timeout = 200) {
+  const test = () => !!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__
+
+  if (test())
+    return
+
+  return new Promise((resolve, reject) => {
+    const interval = setInterval(() => {
+      if (test()) {
+        clearInterval(interval)
+        resolve()
+      }
+      else if (retry-- <= 0) {
+        console.log(iframe.value.contentWindow.__VUE_DEVTOOLS_VIEW__)
+        clearInterval(interval)
+        // eslint-disable-next-line prefer-promise-reject-errors
+        reject('Vue Devtools client injection failed')
+      }
+    }, timeout)
+  })
+}
+
+async function onLoad() {
+  await waitForClientInjection()
+  setupClient()
+}
+
+function setupClient() {
+  const injection = iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__
+  const componentInspector = window.__VUE_INSPECTOR__
+  if (componentInspector) {
+    const _openInEditor = componentInspector.openInEditor
+    componentInspector.openInEditor = async (...params) => {
+      disableComponentInspector()
+      _openInEditor(...params)
+    }
+  }
+  injection.setClient({
+    hook: props.hook,
+    hookBuffer,
+    inspector: {
+      enable: enableComponentInspector,
+      disable: disableComponentInspector,
+    },
+    panel: {
+      toggle(position) {
+        panelState.value.position = position
+      },
+    },
+  })
+}
+
+function initPanelPosition() {
+  const frameState = localStorage.getItem('__vue-devtools-frame-state__')
+  if (frameState) {
+    const parsedFrameState = JSON.parse(frameState)
+    panelState.value.position = parsedFrameState.position
+  }
+}
+
+function collectHookBuffer() {
+  let sortId = 0
+  const DevtoolsHooks = {
+    COMPONENT_INIT: 'app:init',
+    COMPONENT_UPDATED: 'component:updated',
+    COMPONENT_ADDED: 'component:added',
+    COMPONENT_REMOVED: 'component:removed',
+    COMPONENT_EMIT: 'component:emit',
+    PERF_START: 'perf:start',
+    PERF_END: 'perf:end',
+  }
+
+  function skipCollect(component) {
+    return component?.root.type?.devtools?.hide || iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__
+  }
+  props.hook.on(DevtoolsHooks.PERF_START, (app, uid, component, type, time) => {
+    if (skipCollect(component))
+      return
+
+    hookBuffer.push([DevtoolsHooks.PERF_START, {
+      now: Date.now(),
+      app,
+      uid,
+      component,
+      type,
+      time,
+      sortId: sortId++,
+    }])
+  })
+  props.hook.on(DevtoolsHooks.PERF_END, (app, uid, component, type, time) => {
+    if (skipCollect(component))
+      return
+
+    hookBuffer.push([DevtoolsHooks.PERF_END, {
+      now: Date.now(),
+      app,
+      uid,
+      component,
+      type,
+      time,
+      sortId: sortId++,
+    }])
+  });
+
+  [
+    DevtoolsHooks.COMPONENT_UPDATED,
+    DevtoolsHooks.COMPONENT_ADDED,
+    DevtoolsHooks.COMPONENT_REMOVED,
+    DevtoolsHooks.COMPONENT_EMIT,
+  ].forEach((item) => {
+    props.hook.on(item, (app, uid, parentUid, component) => {
+      if (!app || (typeof uid !== 'number' && !uid) || !component || skipCollect(component))
+        return
+      hookBuffer.push([item, {
+        app, uid, parentUid, component,
+      }])
+    })
+  })
+}
+
+collectHookBuffer()
+initPanelPosition()
+</script>
+
+<template>
+  <div class="vue-devtools-panel" :style="panelPosition">
+    <iframe ref="iframe" :src="clientUrl" @load="onLoad" />
+  </div>
+  <button class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition" @click.prevent="togglePanel">
+    <svg viewBox="0 0 256 198" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z" />
+      <path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z" />
+      <path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z" />
+    </svg>
+  </button>
+</template>
+
+<style scoped>
+.vue-devtools-panel {
+  position: fixed;
+  width: calc(80vw - 20px);
+  height: calc(60vh - 20px);
+}
+
+.vue-devtools-panel iframe {
+  width: 100%;
+  height: 100%;
+  outline: 0;
+  border:1px solid rgba(125,125,125,0.2);
+  border-radius: 8px;
+}
+
+.vue-devtools-toggle {
+  position: fixed;
+  background: #0C0C0C;
+  border: 1px solid rgba(125,125,125,0.2);
+  box-shadow: 3px 5px 10px rgba(0,0,0,0.1);
+  z-index: 2147483647;
+  cursor: pointer;
+  opacity: 0.8;
+  padding: 0;
+  align-items: center;
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+  outline: 0;
+}
+
+.vue-devtools-toggle:hover {
+  transform: var(--hover-translate);
+  opacity: 1;
+}
+
+.vue-devtools-toggle svg {
+  width: 16px;
+  height: 16px;
+  margin: auto;
+  margin-top:3px;
+}
+</style>

package/src/node/app.js

@@ -0,0 +1,41 @@
+import { createApp, h } from 'vue'
+import App from 'virtual:vue-devtools-path:Container.vue'
+
+// reuse __VUE_DEVTOOLS_ (@vuejs/devtools) instance first
+const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__ ??= {
+  events: new Map(),
+  on(event, fn) {
+    if (!this.events.has(event))
+      this.events.set(event, [])
+
+    this.events.get(event).push(fn)
+  },
+  emit(event, ...payload) {
+    if (this.events.has(event))
+      this.events.get(event).forEach(fn => fn(...payload))
+  },
+}
+
+function load() {
+  const CONTAINER_ID = '__vue-devtools-container__'
+  const el = document.createElement('div')
+  el.setAttribute('id', CONTAINER_ID)
+  el.setAttribute('data-v-inspector-ignore', 'true')
+  document.getElementsByTagName('body')[0].appendChild(el)
+  createApp({
+    render: () => h(App, { hook }),
+    devtools: {
+      hide: true,
+    },
+  }).mount(`#${CONTAINER_ID}`)
+}
+load()
+
+// print for iframe console
+window.print = (...s) => {
+  console.log('print', ...s)
+}
+
+hook.on('app:init', (app) => {
+  // console.log('init', app)
+})