browser
browser copied to clipboard
elm
Why can't Browser.application have an element mount point?
Right now Browser.application wipes clean the <body>. The body can be used as a place for useful stuff to exst. For us, it was a) scripts to not be in the head, and b) inlining our SVG icons.
Inlining the SVG icons previous allowed us:
- one less network request for a required resource
- IE11 support
- no flash of content for getting the #id from a
<use>tag - Not having to deal with hashing/asset management as NRI's Webpack asset plugin does not support v0.19.
The v0.18 did not clear the body. Clearing the element is fine and whatever, but since the body of document still serves as a storage space for other content, there shouldn't be anything wrong with mounting at <body><div id="app"></div>... OTHER STUFF...</body>. Sure, the application would now have to measure different elements than the body, but what's wrong with that?
Related https://discourse.elm-lang.org/t/fullscreen-elm-app-in-0-19-childnode-issue-reopened/3174
Q: We are using Browser.application and inline svg-icons in the body which works fine. Though they are inserted there build-time. Are you doing it with some "webpack magic"?
Rails, but it could be Webpack, gulp, whatever. It's not uncommon to do this.
Made some tests and realised why it works for us is that we have the icons rendered after Elm.Main.init() in body. Don't know the implications on this regarding best practice but at least it works and can be a workaround util other solutions. Our body-tag:
<body>
<!-- Elm -->
<script src="/app.js"></script>
<script>
var app = Elm.Main.init();
</script>
<!-- icons -->
<div style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 41 66" id="icon-pmt-logo"><title>pmt-logo</title>
<!-- svg icon -->
</symbol>
</svg>
</div>
</body>
This is not ideal for us, we use Google Sign-In for all of our internal apps and this works by creating a hidden iframe, when Browser.application wipes the <body> clean it breaks our authentication.
Also, if the Elm.Main.init({node: ... }) parameter is going to be ignored I'd expect to see a warning about this in the console.
