Module contributed UI

[antfu]

Motivations

While the core of devtools enables the capability of using UI to interact with the Nuxt instance. We would also like to provide the ability for modules to contribute UIs to enhance the DX for the specific integrations (e.g. Nitro VFS, UnoCSS Inspector, Vitest UI, bundle analysis, etc.)

Proposed Solution

The most powerful way we could provide is to allow the module to integrate an iframe - with the full capability of a browser

Pros:

• Full capability of a browser
• Relatively easy for us to support it
• Better isolation

Cons:

• Complexity to get the Nuxt's context for the user-provided UI
• Inconsistent UI design (actually inevitable)
• Complexity for module author to implement (client app, middleware, communications)

To ease the cons, we could provide some toolkit and starter templates in module-builder.

API Design

The current approach is made by a module hook. The view object is preserved for experimenting with the Object representation, which currently only supports iframe

export default defineNuxtModule({
  setup (_, nuxt) {
    nuxt.hook('devtools:custom-tabs', (tabs) => {
      tabs.push({
        title: 'Inspect',
        name: 'inspect',
        icon: 'carbon-search',
        view: {
          type: 'iframe',
          src: '/__inspect'
        }
      })
    })
  }
})

Alternatives

Object representation

I discussed with @pi0 once, to use object and array to represent the layout and render them using @nuxt/ui

Vue components

We may support the module author in providing a Vue SFC so we can mount them to the view. The downside would be the need for two Nuxt instances.

[harlan-zw]

I like the iframe implementation. I think it goes quite nicely with how Nuxt 3 approaches architecture, using API endpoints for contextual data.

The devtools uses birpc quite heavily though, it would be cool to see some sort of support for integrating with this if possible, rather than each implementation re-implementing it. Would actually be great to see more of this in the Nuxt core too.

Here's a very rough idea of an implementation

const { bircp } = setupDevtoolsModuleClient({
  module: 'my-module',
  dir: resolve('/client'),
  serverFunctions: {
    myModuleFunc() { }
  }
})

// easily broadcast data
birpc.boardcast.greeting.asEvent('hello!')

setupDevtoolsModuleClient Implementation

function setupDevtoolsModuleClient(options: any) {
  const path = `__${options.module.replace('-', '_')}__`
  useNuxt().hook('devtools:customTabs', (iframeTabs) => {
    iframeTabs.push({
      name: options.name,
      title: options.title,
      view: {
        type: 'iframe',
        src: options.path,
      },
    })
  })
  // @todo merge in namespaced birpc functions somehow?

  useNuxt().hook('vite:serverCreated', async (server) => {
    // in development: proxy to a nuxt child process somehow?
    // consumed: does nitro support this somehow?
    server.middlewares.use(path, sirv(options.path, { single: true, dev: true }))
  })

  return { birpc }
}

Additionally, a Nuxt layer could be useful for the client? The layer would set up the birpc and an example devtools event (page change?). It should use @nuxt/ui and have a basic layout.

An issue with the current setup, using sirv, is we lose the nuxt HMR. Ideally, we could proxy requests to a child nuxt instance while developing. Not sure how you get around this (I just run both and change the host).

[Flowko]

hi @harlan-zw , love the idea and how u integrated it with https://github.com/harlan-zw/nuxt-og-image, i have a question related to that approach, im trying to figure out a way to resolve componens outside of the client folder/app, they live in the nuxt folder, i'm able to get them from the context through useDevtoolsClient().value?.host?.nuxt.vueApp._context.components but trying to resolve them, doesnt do anything, is there a possible and easy way to do it? or this is something that might not be possible ?
my idea is that i wanna extract the component object and be able to use whenever i want inside the client folder.