Inject devtools hook on iframe

elonehoo commented 4 months ago

in my Chrome old version devtools, colud debug write component, but this is not new version.

old devtools

old version 6.6.3 link

new devtools

alexzhang1030 commented 4 months ago

Multiple app issue /cc @webfansplz

webfansplz commented 4 months ago

We're missing the iframe injection case (See:https://github.com/vuejs/devtools/blob/main/packages/app-backend-core/src/hook.ts#L42

After a discussion with @elonehoo, he will try to support this case.

elonehoo commented 4 months ago

🙌 let me handle it!!!!!!!!!!!!!!!!

alexzhang1030 commented 4 months ago

A playground can be:

// main.ts
const app3 = createApp(Iframe)
app3.mount('#app3')

<script setup lang="ts">
import Srcdoc from './srcdoc.html?raw'
</script>

<template>
  <div class="m-auto mt-5 h-30 w-60 flex flex-col items-center justify-center rounded bg-[#363636]">
    <iframe
      sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
      :srcdoc="Srcdoc"
    />
  </div>
</template>

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://play.vuejs.org/vue.runtime.esm-browser.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import { createApp, h, ref } from 'vue'

      const app = createApp({
        setup() {
          const counter = ref(0)

          return () =>
            h(
              'div',
              {
                style: {
                  color: 'white',
                  display: 'flex',
                  'flex-wrap': 'wrap',
                  'justify-content': 'center',
                  'align-items': 'center',
                  height: '100vh',
                },
              },
              h('h1', { style: { width: '100%' } }, 'App3 in iframe'),
              h('count', `${counter.value}`),
              h('div', h('button', { onClick: () => counter.value++ }, '++')),
            )
        },
      }).mount('#app')
    </script>
  </body>
</html>

elonehoo commented 4 months ago

wait..... this is so cool

weeks6 commented 2 weeks ago

@elonehoo any progress?

vuejs / devtools

Inject devtools hook on iframe #498