✅ Deploy Preview for vue-devtools-docs canceled.

Open in StackBlitz

npm i https://pkg.pr.new/@vue/devtools-applet@890

npm i https://pkg.pr.new/@vue/devtools-core@890

npm i https://pkg.pr.new/@vue/devtools-api@890

npm i https://pkg.pr.new/@vue/devtools@890

npm i https://pkg.pr.new/@vue/devtools-kit@890

npm i https://pkg.pr.new/vite-plugin-vue-devtools@890

commit: fbc83b6

This doesn't work yet because the callbacks are lost (probably during serialization). There should be some communication up but I don't know where it is. The iframe can be accessed even if it's nested (e.g. window['vue-devtools-iframe'].contentWindow.document.getElementsByTagName('iframe')[0]))

This doesn't work yet because the callbacks are lost (probably during serialization). There should be some communication up but I don't know where it is. The iframe can be accessed even if it's nested (e.g. window['vue-devtools-iframe'].contentWindow.document.getElementsByTagName('iframe')[0]))

Oh, yep. We need to handle the communication. I'll handle it.

Hi @posva , It's a lit be hard to pass the iframe instance to the user app side. If we use tab name instead of it, can it cover your use case? For example:

  addCustomTab({
    name: 'pinia-colada',
    title: 'Pinia Colada',
    icon: 'https://pinia-colada.esm.dev/logo.svg',
    view: {
      type: 'iframe',
      src: '/__pinia-colada-devtools',
      persistent: false,
      onLoad(name) {
       console.log(name) //  'pinia-colada',

      },
      onClose(name) {
        console.log(name) //  'pinia-colada',
      },
    },
    category: 'modules',
  })

Why is it hard? Are they cases where the iframe can't be transferred? I suppose the case with the standalone devtools doesn't work because the devtools are not created by the main document but that's fine: with time a more powerful approach will be document pip

Having access to the iframe element is needed to establish the communication between the two documents.

Why is it hard? Are they cases where the iframe can't be transferred? I suppose the case with the standalone devtools doesn't work because the devtools are not created by the main document but that's fine: with time a more powerful approach will be document pip

Having access to the iframe element is needed to establish the communication between the two documents.

That's because the current communication way design, which we have in devtools client <=> user vue app always pass through serialized data to support the vite plugin/standalone app/extension panel target.

Yeah, I see. That's unfortunate.
There should be some way of communicating between the iframe added by addCustomTab and the Vue app. It would make devtools so much more powerful. I think there is something like that in Nuxt Devtools but you know better than me 😆

In my Pinia Colada devtools I use the messaging API and a custom DuplexChannel based on MessageChannel to communicate between the two context but the API still requires the 2 contexts to be attached to the same document. In the end, I think antfu/birpc is more flexible than just emit/listen but not sure of what would be the communication channel

Yeah, I see. That's unfortunate. There should be some way of communicating between the iframe added by addCustomTab and the Vue app. It would make devtools so much more powerful. I think there is something like that in Nuxt Devtools but you know better than me 😆

In my Pinia Colada devtools I use the messaging API and a custom DuplexChannel based on MessageChannel to communicate between the two context but the API still requires the 2 contexts to be attached to the same document. In the end, I think antfu/birpc is more flexible than just emit/listen but not sure of what would be the communication channel

Yeah. If we only consider iframe hosts, it would be relatively easy to implement, but things get more complex and difficult in browser extension or Electron environments. Vue DevTools currently uses the MessageChannel API for cross-window communication in separate window mode, which is pretty cool. The communication design is also based on antfu/birpc, making one-to-many communication simple and elegant.

Then maybe there should be a callback in the add custom tab function that allows remote procedures to the iframe. Or any other method of communicating between the main app and the iframe added to the devtools
Otherwise adding an iframe cannot do much beyond displaying some docs