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)