feat(client): add vue SFC custom tab (#775)

vuejs · Jan 23, 2025 · 59996b9 · 59996b9
1 parent ebec9f2
commit 59996b9
Show file tree

Hide file tree

Showing 14 changed files with 405 additions and 18 deletions.
diff --git a/docs/plugins/api.md b/docs/plugins/api.md
@@ -50,6 +50,49 @@ addCustomTab({
   },
   category: 'advanced',
 })
+
+
+const SFC = /* vue */ `
+  <script setup lang="ts">
+  import { ref } from 'vue'
+  
+  const count = ref(0)
+  </script>
+  
+  <template>
+    <div class="h-full w-full flex flex-col items-center justify-center">
+      <div>
+        count is {{ count }}
+      </div>
+      <button class="btn" @click="count++">
+        increment
+      </button>
+    </div>
+  </template>
+  
+  <style scoped>
+  .btn {
+    background-color: #4c51bf;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    border: none;
+    cursor: pointer;
+  }
+  </style>
+`
+
+addCustomTab({
+  name: 'plugin-count',
+  title: 'Plugin Count',
+  icon: 'baseline-exposure-plus-1',
+  // SFC view
+  view: {
+    type: 'sfc',
+    sfc: SFC,
+  },
+  category: 'app',
+})
 ```
 
 ## `addCustomCommand`

diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "play:multi-app": "turbo dev --filter=./packages/playground/multi-app",
     "play:webpack": "turbo dev --filter=./packages/playground/webpack",
     "play:options-api": "turbo dev --filter=./packages/playground/options-api",
+    "play:plugin-sfc": "turbo dev --filter=./packages/playground/plugin-sfc",
     "docs": "pnpm -C docs run docs:dev",
     "docs:build": "pnpm -C docs run docs:build",
     "zip": "tsx ./scripts/extension-zip.ts",

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -41,7 +41,8 @@
     "vis-network": "^9.1.9",
     "vite-hot-client": "^0.2.4",
     "vue-router": "^4.5.0",
-    "vue-virtual-scroller": "2.0.0-beta.8"
+    "vue-virtual-scroller": "2.0.0-beta.8",
+    "vue3-sfc-loader": "^0.9.5"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.277",

diff --git a/packages/client/src/components/CustomTabComponent.vue b/packages/client/src/components/CustomTabComponent.vue
@@ -39,6 +39,9 @@ watch(() => tabName.value, () => {
   <template v-else-if="tab?.view?.type === 'vnode'">
     <Component :is="tab.view.vnode" />
   </template>
+  <template v-else-if="tab?.view?.type === 'sfc'">
+    <SFCView :sfc="tab.view.sfc" :name="tab.name" />
+  </template>
   <template v-else>
     <div>
       <NCard flex="~ col" h-full items-center justify-center>

diff --git a/packages/client/src/components/common/SFCView.vue b/packages/client/src/components/common/SFCView.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import * as Vue from 'vue'
+import { loadModule } from 'vue3-sfc-loader'
+
+const props = defineProps<{
+  sfc: string
+  name: string
+}>()
+
+const options = {
+  moduleCache: {
+    vue: Vue,
+  },
+  getFile() {
+    return props?.sfc ?? ''
+  },
+  addStyle(textContent: string) {
+    const style = Object.assign(document.createElement('style'), { textContent })
+    const ref = document.head.getElementsByTagName('style')[0] || null
+    document.head.insertBefore(style, ref)
+  },
+}
+
+const RemoteSFC = defineAsyncComponent(() => loadModule(`${props.name}.vue`, options))
+</script>
+
+<template>
+  <RemoteSFC />
+</template>
diff --git a/packages/devtools-kit/src/types/tab.ts b/packages/devtools-kit/src/types/tab.ts
@@ -6,7 +6,7 @@ type TabCategory =
   | 'modules'
   | 'advanced'
 
-export type ModuleView = ModuleIframeView | ModuleVNodeView
+export type ModuleView = ModuleIframeView | ModuleVNodeView | ModuleSFCView
 
 export interface ModuleIframeView {
   /**
@@ -36,6 +36,17 @@ export interface ModuleVNodeView {
   vnode: VNode
 }
 
+export interface ModuleSFCView {
+  /**
+   * SFC view
+   */
+  type: 'sfc'
+  /**
+   * SFC component
+   */
+  sfc: string
+}
+
 export interface CustomTab {
   /**
    * The name of the tab, must be unique

diff --git a/packages/playground/plugin-sfc/index.html b/packages/playground/plugin-sfc/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue DevTools Plugin-SFC Playground</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/playground/plugin-sfc/package.json b/packages/playground/plugin-sfc/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "playground-plugin-sfc",
+  "type": "module",
+  "version": "7.3.2",
+  "private": true,
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/devtools": "workspace:^",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.1",
+    "vite-plugin-inspect": "0.8.9",
+    "vite-plugin-vue-devtools": "workspace:*"
+  }
+}
diff --git a/packages/playground/plugin-sfc/public/vite.svg b/packages/playground/plugin-sfc/public/vite.svg
diff --git a/packages/playground/plugin-sfc/src/App.vue b/packages/playground/plugin-sfc/src/App.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex flex-col justify-center" />
+</template>
diff --git a/packages/playground/plugin-sfc/src/count.vue b/packages/playground/plugin-sfc/src/count.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<template>
+  <div class="h-full w-full flex flex-col items-center justify-center">
+    <div>
+      count is {{ count }}
+    </div>
+    <button class="btn" @click="count++">
+      increment
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.btn {
+  background-color: #4c51bf;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: none;
+  cursor: pointer;
+}
+</style>
diff --git a/packages/playground/plugin-sfc/src/main.ts b/packages/playground/plugin-sfc/src/main.ts
@@ -0,0 +1,20 @@
+import { addCustomTab } from '@vue/devtools-kit'
+import { createApp } from 'vue'
+import App from './App.vue'
+import countSFC from './count.vue?raw'
+
+const app = createApp(App)
+app.mount('#app')
+
+setTimeout(() => {
+  addCustomTab({
+    name: 'plugin_count',
+    title: 'Plugin Count',
+    icon: 'baseline-exposure-plus-1',
+    view: {
+      type: 'sfc',
+      sfc: countSFC,
+    },
+    category: 'app',
+  })
+}, 2000)
diff --git a/packages/playground/plugin-sfc/vite.config.ts b/packages/playground/plugin-sfc/vite.config.ts
@@ -0,0 +1,15 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+import inspect from 'vite-plugin-inspect'
+import VueDevTools from 'vite-plugin-vue-devtools'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    VueDevTools(),
+    inspect(),
+  ],
+  server: {
+    port: 3000,
+  },
+})