This is a bit of a hare-brained experiment, but I’d like to try using Popcorn for isomorphic Elixir, that is, to run the same Elixir code on the backend and frontend in the same project.
The core problem I am having is that I cannot tell what mix popcorn.cook is actually bundling up and have no visibility into contents of the bundle to verify my setup.
The core symptom I am experiencing is that debug logging tells me popcorn found my bundle.avm on the client, but the Popcorn.init Promise times out (and so therefore must never be finding my code that calls Popcorn.Wasm.register/1).
The setup isn’t trivial to minimally reproduce, and I’m sure whatever I’m doing wrong is not subtle, so I’ll summarize here in hopes of exposing a glaring conceptual misunderstanding. (I am happy to create the not-so-minimal-example anyways, as a submission to Popcorn examples if nothing else, but would rather get things working first before extracting my approach.) Also seeking any feedback on this approach.
- Popcorn appears to operate at the Application level of distribution, which makes sense. So I’ve set up an umbrella application with a Phoenix
webapp and a Popcornsimapp. - In my
config.exsI capture theMIX_ENVviaconfig_target()and compile it into my applications’ envs and make it available at runtime on eachApplication, ex
def target, do: Application.compile_env!(:sim, :target) - I have
popcorn.cookconfigured to always use:wasmfor its target. - I have
popcornconfigured to emit everything into thewebapps’sassetsdirectory. - I require
popcorn.jsin myapp.jsbundle and call(async () => Popcorn.init(...))().then(popcorn => console.log(popcorn))there. - I copy over all of popcorn’s output, including the bundle, into my
priv/static/assetsto be served by Plug.Static. - I also require the
simapplication asin_umbrellafrom mywebapplication and add it to the list ofextra_applicationsso that it starts in the backend as well as on page load. - The
simapplication just starts a module-basedDynamicSupervisor. In the module’sinitmethod, before returningDynamicSupervisor.init(strategy: :one_for_one), I call:
if Simulation.Application.target() == :wasm do
Popcorn.Wasm.register(__MODULE__)
end
The idea here is that sim gets started both in backend and frontend, and can start a worker with the same code in either place (with the right invocation of JS or Elixir). Simulation.Application.target() can be consulted to navigate any difference in behaviour required for where it is running.
Everything seems to work asset-wise, Popcorn.init is definitely finding my static bundle.avm asset and trying to start it, however the promise always times out, so it seems to not actually have sim correctly bundled and starting inside, or at least Popcorn.Wasm.register(__MODULE__) must never get called. Or I’m fat-fingering awaiting promises somehow, I guess. I have no idea how to debug from here!
I have tried making the register unconditional in case I’m messing up threading along the :wasm target throughout bundling, but the promise still times out so reaching register is unrelated to the target. I’ve tried logging anything in the sim application startup process in hopes of seeing what the target is, or anything at all, and see no console output. Any ideas?
For reference, I am using:
- Erlang
26.0.2 - Elixir
1.17.3-otp-26 - Popcorn
github: "software-mansion/popcorn", tag: "v0.1.8.17"
My console.log looks like:
Main: init, params: {container: undefined, bundlePath: '/assets/js/popcorn/bundle.avm', wasmDir: '/assets/js/popcorn/', debug: true, onStdout: ƒ}
popcorn.js:389
Main: mount, container: html
popcorn.js:389
Main: init, params: {container: undefined, bundlePath: '/assets/js/popcorn/bundle.avm', wasmDir: '/assets/js/popcorn/', debug: true, onStdout: ƒ}
popcorn.js:389
Main: mount, container: <html lang="en" data-theme="dark"><head>…</head><body>…</body><iframe srcdoc="<html>
<html lang="en" dir="ltr">
<head>
<meta name="bundle-path" content="..//assets/js/popcorn/bundle.avm" />
</head>
<script type="module" src="/assets/js/popcorn/popcorn.js" defer></script>
<script type="module" src="/assets/js/popcorn/AtomVM.mjs" defer></script>
<script type="module" src="/assets/js/popcorn/popcorn_iframe.js" defer></script>
<script type="module" defer>
import { runIFrame } from "/assets/js/popcorn/popcorn_iframe.js";
runIFrame();
</script>
</html>" style="visibility: hidden; width: 0px; height: 0px; border: none;">…</iframe><iframe srcdoc="<html>
<html lang="en" dir="ltr">
<head>
<meta name="bundle-path" content="..//assets/js/popcorn/bundle.avm" />
</head>
<script type="module" src="/assets/js/popcorn/popcorn.js" defer></script>
<script type="module" src="/assets/js/popcorn/AtomVM.mjs" defer></script>
<script type="module" src="/assets/js/popcorn/popcorn_iframe.js" defer></script>
<script type="module" defer>
import { runIFrame } from "/assets/js/popcorn/popcorn_iframe.js";
runIFrame();
</script>
</html>" style="visibility: hidden; width: 0px; height: 0px; border: none;">…</iframe></html>
// Some 30 seconds pass...
Promise timeout
app.ts:17
^ Where I call (async () => Popcorn.init(...))().then(popcorn => console.log(popcorn))
My (relevant) app.ts code looks like:
import { Popcorn } from "./popcorn/popcorn.js";
const popcorn = (async () => Popcorn.init({
bundlePath: "/assets/js/popcorn/bundle.avm",
wasmDir: "/assets/js/popcorn/",
onStdout: console.log,
debug: true,
}))()
.then((popcorn) => {
console.log(popcorn);
return popcorn;
})
.catch((error) => {
console.log(error);
return undefined;
});
Notes:
- I am setting the right CORS headers to execute WASM on Plug.Static, so that’s not the issue (and I imagine it would manifest itself differently if it was)
