Bug: [vue/xstate-inspect] Impossible to inspect in iframe

SteamWind commented 2 years ago

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

sandbox (a) sandbox (b)

Additional context

No response

itai-gendler commented 2 years ago

were you able to solve this issue? i'm also stuck on this trying to have an iframe in a compoenent.

Andarist commented 2 years ago

We are going to discuss changes to the app/inspector protocol~ to make use cases like this work out of the box. Stay tuned.

davidkpiano commented 2 years ago

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>

SteamWind commented 1 year ago

@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().

SteamWind commented 9 months ago

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...

statelyai / xstate