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": "pnpm@10.11.0",
+"packageManager": "pnpm@10.11.1",
 "repository": {
 "type": "git",
 "url": "git+https://github.com/nuxt/devtools.git"

packages/devtools-kit/types.d.ts

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

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

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

packages/devtools/build.config.ts

@@ -1,25 +1,43 @@
 import{defineBuildConfig}from'unbuild'
+importVuefrom'unplugin-vue/rollup'
+import{buildCSS}from'./src/webcomponents/scripts/build-css'
 
 exportdefaultdefineBuildConfig({
 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
+awaitbuildCSS()
+},
+'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() {
 constrouter=useRouter()
 constvirtualFileId=useCurrentVirtualFile()
 
-returnasync(filepath: string)=>{
+returnasync(filepath?: string)=>{
+if(!filepath)
+return
+
 constbuildDir=config.value?.buildDir
 constpath=(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 @@
 importtype{NuxtDevtoolsHostClient,TimelineEventRoute,TimelineMetrics}from'@nuxt/devtools/types'
+importtype{NuxtDevToolsInspectorProps}from'@nuxt/devtools/webcomponents'
 importtype{$Fetch}from'ofetch'
 importtype{Ref}from'vue'
-importtype{Router}from'vue-router'
 
+importtype{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{eventsasinspectorEvents,hasDataasinspectorHasData,stateasinspectorState}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'
-importMainfrom'./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'
 
 constclientRef=shallowRef<NuxtDevtoolsHostClient>()
@@ -34,6 +36,9 @@ export async function setupDevToolsClient({
 timeMetric: any
 router: Router
 }){
+letiframe: HTMLIFrameElement|undefined
+letinspector: NuxtDevtoolsHostClient['inspector']|undefined
+
 constcolorMode=useClientColorMode()
 consttimeline=initTimelineMetrics()
 
@@ -108,8 +113,6 @@ export async function setupDevToolsClient({
 
 window.__NUXT_DEVTOOLS_HOST__=client
 
-letiframe: HTMLIFrameElement|undefined
-
 functionsyncClient(){
 if(!client.inspector)
 client.inspector=getInspectorInstance()
@@ -183,33 +186,65 @@ export async function setupDevToolsClient({
 }
 
 functiongetInspectorInstance(): NuxtDevtoolsHostClient['inspector']{
-constisAvailable=ref(inspectorHasData())
+if(inspector)
+returninspector
 
-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
-awaitclient.hooks.callHook('host:inspector:click',info.fullpath)
-})
-}
+constprops=reactive<NuxtDevToolsInspectorProps>({
+mouse: {x: 0,y: 0},
+matched: undefined,
+})
 
+constcomponent=newNuxtDevtoolsInspectPanel(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',()=>{
+constparent=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)=>{
+consturl=(easany)?.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}
+})
+
+constisAvailable=ref(inspectorHasData())
 if(!isAvailable.value){
 inspectorEvents.on('hover',async()=>{
 isAvailable.value=inspectorHasData()
 })
 }
 
-returnmarkRaw({
+returninspector=markRaw({
  isAvailable,
 isEnabled: toRef(inspectorState,'isEnabled'),
 enable: ()=>{
@@ -284,13 +319,13 @@ export async function setupDevToolsClient({
 client.devtools.toggle()
 })
 
-constapp=createApp({
-render: ()=>h(Main,{client}),
-devtools: {
-hide: true,
-},
-})
-app.mount(holder)
+constframe=newNuxtDevtoolsFrame(reactive({
+ client,
+settings,
+state,
+popupWindow,
+}))
+holder.appendChild(frame)
 }
 
 exportfunctionuseClientColorMode(): 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'
 
-exportconstPANEL_PADDING=10
-exportconstPANEL_MIN=20
-exportconstPANEL_MAX=100
-
 exportconstpopupWindow=shallowRef<Window|null>(null)
 
 exportconststate=useObjectStorage<DevToolsFrameState>('nuxt-devtools-frame-state',{