[xstate-inspect]: Allow an option for inspect to listen to a custom window object

[mattpocock]

Problem

I've been trying to use @xstate/inspect to build a storybook addon. It doesn't work at present because the machines configured with devTools: true are inside an iframe. @xstate/inspect is running outside of the iframe.

From a quick twitter conversation with @davidkpiano, it appears that @xstate/inspect is listening for messages passed to the window object. This fails when the machines are in an iframe, because they're on a different window.

Solution

Allow for a custom window to be passed to inspect so that it can listen for messages there instead.

const customWindow = document.getElementById('storybook-iframe').contentWindow;

inspect({
  window: customWindow,
});

[Andarist]

I don't know much about Storybook - so it's just a general question: why @xstate/inspect runs in a different frame? can't it just run in the same as the machine you are trying to inspect? 🤔

[mattpocock]

I'd ideally like the inspector to be in an addon, which sits inside the parent Storybook window, not the iframe.

Like this:

https://twitter.com/mpocock1/status/1308481350006190082/photo/1

[mattpocock]

@davidkpiano Is there any code I can fork to see if this works? Can't seem to find the source for @xstate/inspect

[mattpocock]

Disregard - I found it.

[davidkpiano]

Yep, viz branch. I'll make a PR eventually.