xstate
xstate copied to clipboard
statelyai
Bug: [vue/xstate-inspect] Impossible to inspect in iframe
Description
As discussed in the thread on the Stately discord, it is impossible to use the iframe to inspect the state machine with vue if the iframe is in a component and the machines are initialized in that component (or elsewhere).
Indeed, the documentation says that you should run inspect() before any other code, for vue, the best being in main.js. But if you do this in this order, you can't see the inspector in the iframe (white iframe).
Expected result
(a) When you run inspect before any code with the iframe option, the iframe displays the inspector.
OR
(b) When inspect() is run after the component containing the iframe has been initialized, the iframe detects and displays the previously run machines.
Actual result
(a) When you run inspect before any code with the iframe option, the iframe displays nothing. (white iframe)
OR
(b) When inspect is run after the component containing the iframe has been initialized, the inspector is launched but does not detect the machines that were previously launched. (Waiting for connection...)
Reproduction
Additional context
No response
were you able to solve this issue? i'm also stuck on this trying to have an iframe in a compoenent.
We are going to discuss changes to the app/inspector protocol~ to make use cases like this work out of the box. Stay tuned.
The workaround right now is to add the iframe outside of Vue:
<body>
<noscript>
<strong
>We're sorry but codesandbox doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<iframe data-xstate></iframe>
<!-- built files will be auto injected -->
</body>
@itai-gendler
were you able to solve this issue? i'm also stuck on this trying to have an iframe in a compoenent.
No, I used the external window finally, but I had to do weird things to make it work. I had to destroy and reopen the window everytime we inspect().
What did you came up with?
We are going to discuss changes to the app/inspector protocol~
I saw news about stately sky. But it's not the same use case.
I saw about those news too: https://stately.ai/blog/2023-12-01-xstate-v5#inspect-api
I feel like debugging should be the n°1 priority as it is hard to understand what's happening in a state machine...