Update global hook for Vue Devtools #1376
Conversation
Codecov Report
@@ Coverage Diff @@
## release/3.2 #1376 +/- ##
===============================================
+ Coverage 20.44% 20.45% +0.01%
===============================================
Files 241 236 -5
Lines 5215 5143 -72
Branches 643 627 -16
===============================================
- Hits 1066 1052 -14
+ Misses 3662 3617 -45
+ Partials 487 474 -13
Continue to review full report at Codecov.
|
|
@ndelangen were you ever able to verify that this works? |
|
@shilman this won't work fully until there is a change in Vue Devtools. reference: vuejs/devtools-v6#361 cc: @posva who I believe is looking into a more in-depth fix for the Devtools which will allow them to identify apps within iframes. @posva Should we still keep the global |
|
I think we can keep it and support the global variable in a slightly different way in the future. I still need more time to work on this, I have only hacked on 1 afternoon or so 😅 Is the idea to allow auto focus of the devtools on the iframe while in storybook? |
|
@posva No worries, just thought I'd get your input. Maybe if the global variable is provided, use that context by default? Otherwise, traverse the DOM (including iframes) until a root Vue instance is detected and use that? |
|
Yeah, but we can do that on Vue devtools end 🙂 |
|
@posva @matt-oconnell should we merge this then? If it's going to work as-is in the future, there's no harm in merging? |
|
👍 |
| @@ -56,7 +56,8 @@ export default function({ assets, publicPath, headHtml }) { | |||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |||
| <script> | |||
| if (window.parent !== window) { | |||
| window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; | |||
| window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__; | |||
| window.parent.__VUE_DEVTOOLS_CONTEXT__ = window.document; | |||
There was a problem hiding this comment.
@matt-oconnell I don't know how storybook works, why do we need this line?
There was a problem hiding this comment.
We don't unless we want to ensure Devtools looks directly at this context. It would possibly speed up start up time a bit. I can remove it if you want me to
There was a problem hiding this comment.
no, it looks fine like this 🙂
Thanks for the follow up!
|
@matt-oconnell are we still waiting on changes to vue devtools? LMK! we're planning to do the 3.2 release soon and it would be great to get this in if that's realistic. |
|
Things look fine for me. We'll be able to update the devtools later, don't worry about that 🙂 |
Issue:
What I did
Right now, Vue Devtools cannot identify Vue root nodes within iframes. We can link a global hook from the parent window to the iframe window and devtools will successfully recognize that the page includes a Vue application. This causes the devtools add the tab to browser debugging windows.
Secondly, adding a
__VUE_DEVTOOLS_CONTEXT__variable and defining it as the iframe document, allows the devtools to properly walk the context and identify components. To work, this requires a change to Vue Devtools as well.How to test
Run storybook and attempt to use Vue Devtools. Without the corresponding PR to add
__VUE_DEVTOOLS_CONTEXT__, you should still see Vue Devtools but Components will not appear correctlyI'm going to submit a PR to devtools which I'll reference here as well.