I've been experimenting with mounting Elm applications into an existing React application (this is my vector to get us using Elm at work). Using webpack, I can import a 'Main' Elm module into a JS file, and have access to the Elm object, in order to mount an Elm app at some part of the DOM.
This is great! It's simple to understand, and simple to set up. The problem is that for each little Elm app (or component) that's imported into a JS file, the Elm runtime is copied. That adds about 100kb to my bundle for each Elm component I add!
In order to get around this and only include the Elm runtime once, I created one single `Main.elm` file that imports all of my other Elm components (each of which has a `main` function defined within for rendering). Then, wherever I want to mount one of my small Elm components (let's call it Foo), I require that main file, then I mount that specific module to the page: `elm.embed("Main.Foo", <element>)`.
This works, but it's not very intuitive, and convolutes the nice filesystem layout we had before.
Also, the ports for all little Elm components must be created in that single Main file, instead of in the Main file for each component that we had before.
Lastly, in order for any tasks to be run, the 'Main' module must be mounted somewhere on the page (some invisible div).
I don't expect that there's a reliable way to separate the elm runtime code from the application code without modifying the compiler. Does anyone else have a better workaround? Would a change like this to the compiler be non-trivial?