I’m thinking of introducing Elm into a React project with Browser.element.
It’ll only be one element for now but I am wondering what’s gonna happen with the debugger when a second element is added?
Are there two debuggers? Is there a way to switch between them? What’s a good way to deal with it?
There will be multiple debuggers, one for each app. Because the debuggers have a fixed position, they will overlap and you can only easily interact with the top most one. But each debugger works as normal.
You could use a contain - CSS: Cascading Style Sheets | MDN property on the parent element of each of the apps to create a new containing block so that the fixed position is not relative to the viewport but the to the parent element.
This works well, but only when the CSS in the apps to not depend on the viewport to be the containing block.
Hey @klaftertief thanks for sharing this tip. Wow, I never would’ve come up with that. I gave contain a check on caniuse and it has surprisingly good browser support.
I guess I could even set the contain to be set only when I’m in dev mode or so.
Another question that popped into my head was this:
Say I have some routing on the page, route A and route B. When I show route A there’s one element, when i navigate to route B there’s another. Will route A’s debugger still be visible when I’m on route B, since there’s no way to do somehting like app.kill()?. Or maybe even more generally? What will happen if Elm.ModuleA.init() is called multiple times as I navigate back and forth? Will new debugger’s be spawned every time?
Yes, we only set the CSS in development mode.
We do not have client side routing on the page, so I can’t really comment on the route change behaviour. My guess is that the debugger will disappear when the React app removes the wrapping Elm app element, but you might have memory leaks if you do not clean up ports and other things of the Elm app.