feat: use webcomponents for embedded views (#864)

Author: antfu

eslint.config.mjs

@@ -6,6 +6,9 @@ export default antfu(
     formatters: true,
     unocss: true,
     pnpm: true,
+    ignore: [
+      '**/.generated/**',
+    ],
   },
   {
     rules: {

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "2.4.1",
   "private": true,
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/devtools.git"

packages/devtools-kit/types.d.ts

@@ -1 +1 @@
-export * from './dist/types'
+export type * from './dist/types.d.mts'

packages/devtools-ui-kit/src/runtime/client.ts

@@ -1,3 +1,5 @@
+import type { NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit/types'
+import type { Ref } from 'vue'
 import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 
-export const devToolsClient = useDevtoolsClient()
+export const devToolsClient: Ref<NuxtDevtoolsIframeClient | undefined> = useDevtoolsClient()

packages/devtools/build.config.ts

@@ -1,25 +1,43 @@
 import { defineBuildConfig } from 'unbuild'
+import Vue from 'unplugin-vue/rollup'
+import { buildCSS } from './src/webcomponents/scripts/build-css'
 
 export default defineBuildConfig({
   entries: [
     'src/module',
     // Chunking
     'src/types',
     'src/dirs',
+    'src/webcomponents/index',
   ],
   externals: [
     'nuxt',
     'nuxt/schema',
     'vite',
     '@nuxt/kit',
     '@nuxt/schema',
+    '@nuxt/devtools',
+    '@nuxt/devtools/webcomponents',
     // Type only
     'vue',
     'vue-router',
     'unstorage',
     'nitropack',
+    'vite-plugin-vue-tracer',
   ],
   rollup: {
     inlineDependencies: true,
   },
+  hooks: {
+    'build:before': async (ctx) => {
+      if (ctx.options.stub)
+        return
+      await buildCSS()
+    },
+    'rollup:options': function (ctx, options) {
+      if (ctx.options.stub)
+        return
+      options.plugins.push(Vue())
+    },
+  },
 })

packages/devtools/client/composables/editor.ts

@@ -12,7 +12,10 @@ export function useOpenInEditor() {
   const router = useRouter()
   const virtualFileId = useCurrentVirtualFile()
 
-  return async (filepath: string) => {
+  return async (filepath?: string) => {
+    if (!filepath)
+      return
+
     const buildDir = config.value?.buildDir
     const path = (buildDir && filepath.startsWith(buildDir))
       ? `#build${filepath.slice(buildDir.length)}`

packages/devtools/package.json

@@ -15,6 +15,10 @@
       "types": "./dist/module.d.mts",
       "import": "./dist/module.mjs"
     },
+    "./webcomponents": {
+      "types": "./dist/webcomponents/index.d.mts",
+      "import": "./dist/webcomponents/index.mjs"
+    },
     "./types": {
       "types": "./dist/types.d.mts"
     },
@@ -85,6 +89,7 @@
     "@iconify-json/bxl": "catalog:icons",
     "@iconify-json/carbon": "catalog:icons",
     "@iconify-json/logos": "catalog:icons",
+    "@iconify-json/ph": "catalog:icons",
     "@iconify-json/ri": "catalog:icons",
     "@iconify-json/simple-icons": "catalog:icons",
     "@iconify-json/tabler": "catalog:icons",
@@ -103,9 +108,11 @@
     "@xterm/addon-fit": "catalog:frontend",
     "@xterm/xterm": "catalog:frontend",
     "cronstrue": "catalog:frontend",
+    "exsolve": "catalog:buildtools",
     "floating-vue": "catalog:frontend",
     "fuse.js": "catalog:frontend",
     "json-editor-vue": "catalog:frontend",
+    "lightningcss": "catalog:buildtools",
     "markdown-it": "catalog:frontend",
     "markdown-it-link-attributes": "catalog:frontend",
     "my-ua-parser": "catalog:frontend",
@@ -120,6 +127,7 @@
     "tsx": "catalog:cli",
     "unimport": "catalog:types",
     "unocss": "catalog:buildtools",
+    "unplugin-vue": "catalog:buildtools",
     "unplugin-vue-markdown": "catalog:buildtools",
     "vanilla-jsoneditor": "catalog:frontend",
     "vis-data": "catalog:frontend",

packages/devtools/src/runtime/plugins/view/client.ts

@@ -1,20 +1,22 @@
 import type { NuxtDevtoolsHostClient, TimelineEventRoute, TimelineMetrics } from '@nuxt/devtools/types'
+import type { NuxtDevToolsInspectorProps } from '@nuxt/devtools/webcomponents'
 import type { $Fetch } from 'ofetch'
 import type { Ref } from 'vue'
-import type { Router } from 'vue-router'
 
+import type { Router } from 'vue-router'
 // eslint-disable-next-line ts/ban-ts-comment
 // @ts-ignore tsconfig
 import { useAppConfig, useRuntimeConfig } from '#imports'
+import { NuxtDevtoolsFrame, NuxtDevtoolsInspectPanel } from '@nuxt/devtools/webcomponents'
 import { setIframeServerContext } from '@vue/devtools-kit'
+
 import { createHooks } from 'hookable'
 import { debounce } from 'perfect-debounce'
-
 import { events as inspectorEvents, hasData as inspectorHasData, state as inspectorState } from 'vite-plugin-vue-tracer/client/overlay'
-import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, toRef, watch } from 'vue'
-import { initTimelineMetrics } from '../../function-metrics-helpers'
-import Main from './Main.vue'
+import { computed, markRaw, reactive, ref, shallowReactive, shallowRef, toRef, watch } from 'vue'
 
+import { initTimelineMetrics } from '../../function-metrics-helpers'
+import { settings } from '../../settings'
 import { popupWindow, state } from './state'
 
 const clientRef = shallowRef<NuxtDevtoolsHostClient>()
@@ -34,6 +36,9 @@ export async function setupDevToolsClient({
   timeMetric: any
   router: Router
 }) {
+  let iframe: HTMLIFrameElement | undefined
+  let inspector: NuxtDevtoolsHostClient['inspector'] | undefined
+
   const colorMode = useClientColorMode()
   const timeline = initTimelineMetrics()
 
@@ -108,8 +113,6 @@ export async function setupDevToolsClient({
 
   window.__NUXT_DEVTOOLS_HOST__ = client
 
-  let iframe: HTMLIFrameElement | undefined
-
   function syncClient() {
     if (!client.inspector)
       client.inspector = getInspectorInstance()
@@ -183,33 +186,65 @@ export async function setupDevToolsClient({
   }
 
   function getInspectorInstance(): NuxtDevtoolsHostClient['inspector'] {
-    const isAvailable = ref(inspectorHasData())
+    if (inspector)
+      return inspector
 
-    if (!inspectorEvents.events.disabled?.length) {
-      inspectorEvents.on('disabled', () => {
-        inspectorState.isVisible = false
-        client?.hooks.callHook('host:inspector:close')
-      })
-    }
-    if (!inspectorEvents.events.enabled?.length) {
-      inspectorEvents.on('enabled', () => {
-        inspectorState.isVisible = true
-      })
-    }
-    if (!inspectorEvents.events.click?.length) {
-      inspectorEvents.on('click', async (info) => {
-        inspectorState.isEnabled = false
-        await client.hooks.callHook('host:inspector:click', info.fullpath)
-      })
-    }
+    const props = reactive<NuxtDevToolsInspectorProps>({
+      mouse: { x: 0, y: 0 },
+      matched: undefined,
+    })
 
+    const component = new NuxtDevtoolsInspectPanel(reactive({ props }))
+    document.body.appendChild(component)
+    Object.assign(component.style, {
+      zIndex: 999999,
+      position: 'fixed',
+    })
+    component.addEventListener('close', () => {
+      props.matched = undefined
+      inspectorState.isEnabled = false
+    })
+    component.addEventListener('selectParent', () => {
+      const parent = inspectorState.main?.getParent()
+      if (parent) {
+        inspectorState.main = parent
+        props.matched = parent
+      }
+    })
+    // eslint-disable-next-line ts/ban-ts-comment
+    // @ts-ignore WebComponent types
+    component.addEventListener('openInEditor', (e) => {
+      const url = (e as any)?.detail?.[0]
+      if (url)
+        client.hooks.callHook('host:inspector:click', url)
+    })
+
+    inspectorEvents.on('hover', () => {
+      inspectorState.isFocused = false
+    })
+    inspectorEvents.on('disabled', () => {
+      inspectorState.isVisible = false
+      client?.hooks.callHook('host:inspector:close')
+    })
+    inspectorEvents.on('enabled', () => {
+      inspectorState.isVisible = true
+    })
+    inspectorEvents.on('click', async (info, e) => {
+      inspectorState.isFocused = true
+      inspectorState.isVisible = true
+
+      props.matched = info
+      props.mouse = { x: e.clientX, y: e.clientY }
+    })
+
+    const isAvailable = ref(inspectorHasData())
     if (!isAvailable.value) {
       inspectorEvents.on('hover', async () => {
         isAvailable.value = inspectorHasData()
       })
     }
 
-    return markRaw({
+    return inspector = markRaw({
       isAvailable,
       isEnabled: toRef(inspectorState, 'isEnabled'),
       enable: () => {
@@ -284,13 +319,13 @@ export async function setupDevToolsClient({
       client.devtools.toggle()
   })
 
-  const app = createApp({
-    render: () => h(Main, { client }),
-    devtools: {
-      hide: true,
-    },
-  })
-  app.mount(holder)
+  const frame = new NuxtDevtoolsFrame(reactive({
+    client,
+    settings,
+    state,
+    popupWindow,
+  }))
+  holder.appendChild(frame)
 }
 
 export function useClientColorMode(): Ref<ColorScheme> {

packages/devtools/src/runtime/plugins/view/state.ts

@@ -2,10 +2,6 @@ import type { DevToolsFrameState } from '@nuxt/devtools/types'
 import { shallowRef } from 'vue'
 import { useObjectStorage } from './utils'
 
-export const PANEL_PADDING = 10
-export const PANEL_MIN = 20
-export const PANEL_MAX = 100
-
 export const popupWindow = shallowRef<Window | null>(null)
 
 export const state = useObjectStorage<DevToolsFrameState>('nuxt-devtools-frame-state', {