ruby.wasm

repository·main·Indexed 21 days ago

https://github.com/ruby/ruby.wasm

A collection of WebAssembly ports of CRuby that enable Ruby applications to run in web browsers, WASI-compatible runtimes, and Edge Computing platforms. It includes version-specific binaries for Ruby 3.2, 3.3, 3.4, 4.0, and HEAD, distributed via npm packages such as @ruby/wasm-wasi and @ruby/wasm-emscripten. The project provides the ruby_wasm extension library for Rust-based WebAssembly capabilities and the js gem for JavaScript bindings.

Tokens
20.5K
Snippets
71
Records
98
Agent score
75%

What's inside ruby.wasm

  1. Overview of the ruby_wasm extension library

    main
    The ruby_wasm extension library provides a Ruby API that exposes WebAssembly tools and utilities from the Rust ecosystem. It is designed to work as an extension for the ruby_wasm gem, allowing Ruby developers to leverage Rust-based WebAssembly capabilities directly within their Ruby code.
  2. Use @ruby/head-wasm-wasi for the latest CRuby HEAD binaries

    main

    The @ruby/head-wasm-wasi package provides WebAssembly binaries of CRuby built from the latest HEAD source code. These binaries are specifically targeted for environments compatible with WASI Preview1.

    To use this package, follow the same integration patterns as the @ruby/wasm-wasi package. For detailed usage instructions, refer to the @ruby/wasm-wasi documentation.

  3. Configure the Emscripten Module object

    main

    The defaultModule passed to loadRuby acts as a thin wrapper around the Emscripten Module object. You can use it to intercept and manage the execution environment. Common properties include:

    • locateFile: A function (path) => string used to resolve the location of WebAssembly files.
    • setStatus: A callback (msg) => void called by Emscripten to report status changes.
    • print: A callback (line) => void used to handle output.
    • arguments: An array of strings representing the command-line arguments passed to the Ruby process.
  4. Check versioning and compatibility for the js gem

    main
    The js gem's version is tied directly to the version of ruby.wasm it is compatible with. When selecting a version of the js gem, ensure it matches the version of ruby.wasm you are using in your project to maintain compatibility.
  5. Install and run ruby.wasm in Node.js

    main

    To use Ruby in a Node.js environment, install the @ruby/4.0-wasm-wasi and @ruby/wasm-wasi npm packages. You can then instantiate a Ruby VM by reading the .wasm binary, compiling it, and using DefaultRubyVM from @ruby/wasm-wasi/dist/node.

    import fs from "fs/promises";
    import { DefaultRubyVM } from "@ruby/wasm-wasi/dist/node";
    
    const binary = await fs.readFile("./node_modules/@ruby/4.0-wasm-wasi/dist/ruby.wasm");
    const module = await WebAssembly.compile(binary);
    const { vm } = await DefaultRubyVM(module);
    vm.eval(`puts "hello world"`);
  6. Install ruby.wasm npm packages

    main

    For JavaScript host environments, you can install specific Ruby versions as npm packages. Available packages include:

    • @ruby/4.0-wasm-wasi: CRuby 4.0 with WASI and JS interop.
    • @ruby/3.4-wasm-wasi: CRuby 3.4 with WASI and JS interop.
    • @ruby/3.3-wasm-wasi: CRuby 3.3 with WASI and JS interop.
    • @ruby/3.2-wasm-wasi: CRuby 3.2 with WASI and JS interop.
    • @ruby/head-wasm-wasi: HEAD CRuby with WASI and JS interop.
    • @ruby/head-wasm-emscripten: HEAD CRuby built on Emscripten (not well tested).
  7. Run ruby-wasm-wasi examples in the browser

    main

    To view the browser-based examples for the ruby-wasm-wasi package family, serve the directory using a local HTTP server and navigate to the provided HTML files.

    1. Start a local server at port 8000 using Ruby's built-in HTTP server.
    2. Open the following files in your browser:
      • http://localhost:8000/hello.html
      • http://localhost:8000/lucky.html
      • http://localhost:8000/ruby-box.html
      • http://localhost:8000/script-src
    $ ruby -run -e httpd . -p 8000
    $ # Open http://localhost:8000/hello.html
    $ # Open http://localhost:8000/lucky.html
    $ # Open http://localhost:8000/ruby-box.html
    $ # Open http://localhost:8000/script-src