From 1463761f22b9b21a699e8d7f09ff769a290abe11 Mon Sep 17 00:00:00 2001
From: webfansplz <webfansplz@gmail.com>
Date: Wed, 20 Dec 2023 11:55:27 +0800
Subject: [PATCH] feat: support vnode type for custom tab view

---
 packages/client/src/pages/custom-tab-view.vue |  3 +++
 .../devtools-kit/src/core/custom-tab/types.ts | 15 +++++++++++-
 packages/playground/src/main.ts               | 23 ++++++++-----------
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/pages/custom-tab-view.vue b/packages/client/src/pages/custom-tab-view.vue
index 799abcc1..c353e8b6 100644
--- 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
index 1c9fa853..ce07bff0 100644
--- 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
index ae7fa819..a2cf0242 100644
--- 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)