roc/crates/repl_wasm
dependabot[bot] cd0a26c2c2
Bump wasm-bindgen-futures from 0.4.31 to 0.4.32
Bumps [wasm-bindgen-futures](https://github.com/rustwasm/wasm-bindgen) from 0.4.31 to 0.4.32.
- [Release notes](https://github.com/rustwasm/wasm-bindgen/releases)
- [Changelog](https://github.com/rustwasm/wasm-bindgen/blob/main/CHANGELOG.md)
- [Commits](https://github.com/rustwasm/wasm-bindgen/commits)

---
updated-dependencies:
- dependency-name: wasm-bindgen-futures
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
2022-08-14 09:17:19 +00:00
..
src wasm: add stack_bytes field to Env 2022-08-08 21:41:25 +01:00
.gitignore Move web REPL assets into www folder and build script into repl_wasm crate 2022-07-09 10:02:24 +01:00
architecture.png Move web REPL assets into www folder and build script into repl_wasm crate 2022-07-09 10:02:24 +01:00
build-www.sh Move web REPL assets into www folder and build script into repl_wasm crate 2022-07-09 10:02:24 +01:00
build.rs fixes to make default.nix work 2022-08-01 16:50:38 +02:00
Cargo.toml Bump wasm-bindgen-futures from 0.4.31 to 0.4.32 2022-08-14 09:17:19 +00:00
README.md Move web REPL assets into www folder and build script into repl_wasm crate 2022-07-09 10:02:24 +01:00
screenshot.png Move web REPL assets into www folder and build script into repl_wasm crate 2022-07-09 10:02:24 +01:00

Web REPL

Running locally

1. Build the Roc website

For a minimal build (when just working on the web REPL)

cp -r www/public www/build

Or, for a full build (with std lib documentation, downloadable source code, etc.)

www/build.sh

2. Build the web REPL

This builds the compiler as a .wasm file, and generates JS glue code. It will cargo install the wasm-pack command line tool if you don't already have it. You should run it from the project root directory.

crates/repl_wasm/build-www.sh
cp crates/repl_wasm/build/* www/build/repl/

2. Run a local HTTP server

Browsers won't load .wasm files over the file:// protocol, so you need to serve the files in ./www/build/ from a local web server. Any server will do, but this example should work on any system that has Python 3 installed:

cd www/build
python3 -m http.server

3. Open your browser

You should be able to find the Roc REPL at http://127.0.0.1:8000/repl (or whatever port your web server mentioned when it started up.)

Warning: This is work in progress! Not all language features are implemented yet, error messages don't look nice yet, up/down arrows don't work for history, etc.

Screenshot

How it works

  • User types text into the HTML <input /> tag
  • JS detects the onchange event and passes the input text to the Roc compiler WebAssembly module
  • Roc compiler WebAssembly module
    • Parses the text (currently just a single line)
    • Type checks
    • Monomorphizes
    • Generates WebAssembly using the development backend (not LLVM)
    • Returns a slice of bytes to JavaScript
  • JavaScript
    • Takes the slice of bytes and creates a WebAssembly.Instance
    • Runs the WebAssembly app
    • Gets the memory address of the result and makes a copy of the app's entire memory buffer
    • Passes the result address and the memory buffer to the compiler for analysis
  • Roc compiler WebAssembly module
    • Analyses the bytes of the result, based on the known return type from earlier
    • Traverses the copied memory buffer to find any child values
    • Produces a user-friendly String and passes it to JavaScript
  • JavaScript
    • Displays the input and output text on the web page

High-level diagram

There are several directories/packages involved here:

  • www/public/repl/index.html: The web page with its JavaScript and a build script
  • crates/repl_wasm: The Rust crate that becomes the "compiler" WebAssembly module
  • crates/repl_eval: REPL logic shared between crates/repl_cli and crates/repl_wasm