Integrating Elixir with JavaScript and WebAssembly in a Unified Package

The article elaborates on the challenges and solutions encountered while developing the Popcorn library, which allows Elixir to run in web browsers. Initially, Popcorn required developers to manually copy JavaScript files and install Hex packages, complicating the setup process. To streamline integration, the authors decided to create an npm package that encapsulates both JavaScript and WebAssembly files, making it easier for developers, particularly those using frameworks like Phoenix or React. The complexity arises from architectural decisions that dictate the placement of JavaScript and Wasm files, driven by the use of Emscripten. The article discusses how they dealt with issues related to bundlers' handling of Wasm, needing to ensure correct resolution of imports and managing the different contexts across iframes and WebWorkers. To improve the user experience, they finally shifted towards wrapping their library logic into plugins that integrate seamlessly into a developer’s build pipeline instead of modifying bundler behavior directly. This approach allowed for a cleaner and more organized way to include necessary files, simplifying the development experience overall. The article concludes by sharing the library's current availability and some recent improvements made to AtomVM.