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?
Would love to hear some experiences.
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?
This PR might interest you - adds a CSS class to the debugger so that you have somewhere to hook alternative styling onto:
The idea seems reasonable enough, but if it were adopted would need to be documented somewhere so that people know it is available.
If you are really keen to try it, you can fork and merge in the PR, then copy over the elm/browser in your $ELM_HOME cache.
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.
Ah thanks, if only that got merged 
Nice, thanks for the insights
I added some info about those memory leaks to the issues justification for adding app.kill() · Issue #886 · elm/core · GitHub
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.