feat: support vnode type for custom tab view

vuejs · Dec 20, 2023 · 1463761 · 1463761
1 parent 4cd24f2
commit 1463761
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/packages/client/src/pages/custom-tab-view.vue b/packages/client/src/pages/custom-tab-view.vue
@@ -42,6 +42,9 @@ watch(() => route.params.name, () => {
   <template v-else-if="tab?.view?.type === 'iframe'">
     <IframeView v-if="iframeViewVisible" :src="tab.view.src" />
   </template>
+  <template v-else-if="tab?.view?.type === 'vnode'">
+    <Component :is="tab.view.vnode" />
+  </template>
   <template v-else>
     <PanelGrids>
       <NCard flex="~ col" h-full items-center justify-center>

diff --git a/packages/devtools-kit/src/core/custom-tab/types.ts b/packages/devtools-kit/src/core/custom-tab/types.ts
@@ -1,10 +1,12 @@
+import type { VNode } from 'vue'
+
 type TabCategory =
   | 'pinned'
   | 'app'
   | 'modules'
   | 'advanced'
 
-export type ModuleView = ModuleIframeView
+export type ModuleView = ModuleIframeView | ModuleVNodeView
 
 export interface ModuleIframeView {
   /**
@@ -23,6 +25,17 @@ export interface ModuleIframeView {
   persistent?: boolean
 }
 
+export interface ModuleVNodeView {
+  /**
+   * Vue's VNode view
+   */
+  type: 'vnode'
+  /**
+   * Send vnode to the client, they must be static and serializable
+   */
+  vnode: VNode
+}
+
 export interface CustomTab {
   /**
    * The name of the tab, must be unique

diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
@@ -3,8 +3,6 @@ import { createApp } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHistory } from 'vue-router'
 
-import { addCustomTab } from '@vue/devtools-next-api'
-
 // import { devtools } from '@vue/devtools-next'
 import App2 from './App.vue'
 import App from './App.preview.vue'
@@ -52,17 +50,16 @@ const router2 = createRouter({
   routes,
 })
 
-addCustomTab({
-  name: 'vueuse',
-  // @unocss-include
-  icon: 'i-logos-vueuse',
-  title: 'VueUse',
-  view: {
-    type: 'iframe',
-    src: 'https://vueuse.org/',
-  },
-  category: 'app',
-})
+// addCustomTab({
+//   name: 'vueuse',
+//   icon: 'i-logos-vueuse',
+//   title: 'VueUse',
+//   view: {
+//     type: 'iframe',
+//     src: 'https://vueuse.org/',
+//   },
+//   category: 'app',
+// })
 
 app.use(router)
 app.use(pinia)