Ruby.wasm quickstart - WASI GEM Example

For the rest of us

Ruby.wasm lets you run the Ruby Programming Language in the Browser using Webassembly. This projects makes it easier to get started with a wasm binary that included the Javascript bridge. You can also add your own gems from Rubygems into the webassembly file or use ruby code files on your website.

Example

• Demo Page index.html
• Ruby Code Runner in Browser run-code.html runCode.rb
• Including Ruby files via require_relative require.html main.rb second.rb

how to build (with compiling)

you will need

• gcc and others
• rust
• cargo

git clone --recurse-submodules -j8 https://github.com/Largo/ruby.wasm-quickstart.git
cd ruby.wasm-quickstart
./build.sh
ruby -run -e httpd . -p 8080

Notices

• If you want to add something to your gemfile, you will need to recompile the wasm file (1 second).
• You can add ruby files into ruby-app.wasm by changing the command. for instance a src directory.
• bundle exec rbwasm --dir ./src::/src --log-level debug build --ruby-version 3.3 --target wasm32-unknown-wasi --build-profile full -o ruby-app.wasm
• If you want to load ruby files via the network, use run-code.html as a template. You can add require_relative after the module block to load any files. I will provide a simpler example later.
• see releases for prebuilt ruby-app.wasm

Todo

• explain how to add code outside gems to the image
• show how to shrink/compress the ruby.wasm file (currently 51MB with debug info, but can be about 10mb or less.)
• license + explanation
• ask upstream if they can make a javascript file that doesnt have the .wasm file path hardcoded.
• docker file
• upload release
• figure out how to get better errormessages in the console (which JS:Object)
• Cast some values automatically to numbers
• github website with example

References

• ruby.wasm
• Based on work by Yuta Saito et al
• emirb - irb on ruby-wasm-emscripten + xterm-pty
• irb.wasm
• Largo/irb.wasm: IRB on browser powered by WebAssembly Browser + new JS Gem
• See: Support RubyGems / Bundler #358
• JS Gem
• JavaScript Files
• ruby.wasmでブラウザを酷使してみよう / 2023-MatsueRubyKaigi - Speaker Deck
• ブラウザでRubyを動かす夢 - まめめも
• ruby.wasmでrequire_relativeを使えるようにしたい #Ruby - Qiita
• RubyでWebAssemblyを試してみよう #ruby #WebAssembly #WASM #WASI - クリエーションライン株式会社
• how_to_use_bundler_and_rubygems_on_wasm.md
• TODO: Shrinking .wasm Size
• see contributing.md in ruby.wasm repo

GPT to convert JavaScript to Ruby code:

ChatGPT - Ruby.wasm JavaScript Helper