Devtools/Extension improvements

[HugoDF]

I've found https://github.com/single-spa/single-spa-inspector which has a simpler approach than we've currently got with regards to webpage -> devtools messaging.

Specifically:

• https://github.com/single-spa/single-spa-inspector/blob/master/src/background_script.js
• https://github.com/single-spa/single-spa-inspector/blob/master/src/panel.js

Current Alpine.js devtools implementation is based on Vue devtools (https://github.com/vuejs/vue-devtools), which has a few layers of abstraction that we don't have at the moment, React devtools also have a similar approach (with a "bridge" concept, see https://github.com/facebook/react/tree/master/packages/react-devtools-extensions).

Finding other devtools implementations that plug straight into the chrome extension system would be useful to simplify the approach and reduce the risk of bugs relating to interactions with the browser/devtools.

[ryangjchandler]

I think we're probably in time for a good v0.1.0 release with some of these improvements in place!

[HugoDF]

Yeah I got rid of the tests we had that all broke due to the redesign, might be good to bring them back

[ryangjchandler]

I imagine this new pattern would make event tracking easier too?

[HugoDF]

@ryangjchandler which events do you mean? The $dispatch-ed ones?

The general issue with extensions is that the devtools panel/app doesn't have direct access to the tabs directly so you need to run:

• code on the page/tab
• code that can communicate with the page/tab and the panel
• code in the panel

so it's always a bit annoying to do anything 😄

[KevinBatdorf]

I imagine this new pattern would make event tracking easier too?

I think we would have to add something to Alpine Core to be able to monitor events registered from the component. Feels like something that should be done eventually anyway.

[HugoDF]

I imagine this new pattern would make event tracking easier too?

I think we would have to add something to Alpine Core to be able to monitor events registered from the component. Feels like something that should be done eventually anyway.

I've thought about this again... the good thing about Alpine is that it uses native dispatchEvent and addEventListener under the hood, so it's trivial to instrument: monkey-patch whatever you need keep the existing implementation but also send the data to devtools (a bunch of other thoughts about this are at #48 )

[HugoDF]

I'll close this for now, looks like fixing #1 with #57 worked.

The links in the issue description might be useful down the line if we encounter further backend/proxy/messaging issues.