Popcorn: Run Elixir in WASM

Summary

Getting started API Limitations Under the hood Popcorn is a library that enables execution of Elixir code within web browsers. Compiled Elixir code is executed in the client-side AtomVM runtime. Popcorn offers APIs for interactions between Elixir and JavaScript, handling serialization and communication, as well as ensuring browser responsiveness. We prepared three live examples using Popcorn, check them out! You will find Popcorn API in "API" section and read how it all works in "Under the hood" section. Popcorn in action A simple Elixir REPL, compiling code dynamically in WASM. Elixir docs "Getting started" guide with interactive snippets. Game of life, representing every cell as a process. Getting started Note This library is work in progress. API is unstable and some things don't work. You can read more in "Limitations" section. Popcorn connects your JS and Elixir code by sending messages and directly executing JS from Elixir. To do that, you need to setup both JS and Elixir. Add Popcorn as a dependency in your mix.exs – {:popcorn, "~> 0.1"} and run mix deps.get. After that, setup JS and Elixir WASM entrypoint. JS First, generate a directory that will host Popcorn JS library, WASM, and generated app bundle. To do that, run: $ mix popcorn.build_runtime --target wasm --out-dir static/wasm Next, in your main html you need to include the library and code that sets up communication channels with Elixir. Add those scripts at the end of the body element in HTML. HTML snippet # static/index.html <script type="module" src="wasm/popcorn.js" defer></script> <script type="module" defer> import { Popcorn } from "./wasm/popcorn.js"; const popcorn = await Popcorn.init({ onStdout: console.log, onStderr: console.error, }); </script> WASM Entrypoint A WASM entrypoint is any Elixir module with start/0 function that never exits. If you are using supervision tree, you can write it as follows: Entrypoint snippet # lib/app/application.ex defmodule App.Application do use Application ali...