Want to run Ruby app with many .rb files in browser, can't get "js" gem included

[lilole]

This WASM way of running Ruby in the browser is really GREAT.

I have Ruby code running in my browser with minimal JS interfacing to make REST calls to a server:

    def request_post(url, object)
      opts = {
        method: "POST",
        body:   object.to_json,
        headers: {
          "Content-type": "application/json"
        }
      }
      JS.global.fetch(url, opts).await.text.await.to_s
    end

Now I'm ready to add page components using Ruby only, but this requires many custom .rb files.

I am able to build my own .wasm file using rbwasm, with all my app files under site_ruby/, and run my custom code inside the .wasm with wasmtime.

And I can load the .wasm file into the browser, BUT the "js" gem is missing from the .wasm file, and I get an error like this in the browser console:

Failed to instantiate Ruby VM. Please make sure that you have added `gem "js"` to your Gemfile.

I can't figure out what this means exactly. My Gemfile has "js" in it. And when I run various rake tasks inside my clone of the ruby/ruby.wasm repo, I just don't see the "js" gem being compiled to WASM or included anywhere.

I realize that if I "rollup" all my .rb files into a single file, then it's easy to use another <script> tag to add it to the browser, but I feel like including all my .rb files into a main .wasm file is better, leveraging the cool libwasi_vfs.

Is there a doc somewhere I have missed? I have been up all night reading rake task code in this repo. My tired crossed eyes force me to give up.

[lilole]

I found rakelib/packaging.rake#build_ruby and it might lead me to the answer.

[lilole]

I figured it out. In case it helps another Ruby WASM explorer:

1. Git clone this repo.
2. Follow prereq build steps to get rake npm:ruby-4.0-wasm-wasi to work.
   I had to do npm i && rake build compile.
3. Have your app's .rb files tree under a subdir like $PARENT_DIR/app, for a $PARENT_DIR outside the git workspace.
4. Pack your own .wasm, for a $TARGET_DIR outside the git workspace:

   $ base=packages/npm-packages/ruby-4.0-wasm-wasi/dist/ruby+stdlib.wasm
   $ rbwasm pack $base --dir $PARENT_DIR/app::/usr/local/lib/ruby/site_ruby/app -o $TARGET_DIR/custom.wasm

5. Copy $TARGET_DIR/custom.wasm to your webserver root.
6. Copy packages/npm-packages/ruby-4.0-wasm-wasi/dist/browser.script.iife.js to $TARGET_DIR/custom.js.
7. HACK ALERT Find const main$1 = in your custom.js file, and change the const response = fetch(...) line to use fetch("/custom.wasm").
   For me it's around line 2885. Maybe someday the build will allow this to be parameterized. Shrug.
8. Copy $TARGET_DIR/custom.js to your webserver root.
9. In your html, add <script src="https://your.server/custom.js"></script>.
10. Then in a <script type="text/ruby"> you can do require "app/your_main_file" to gain access to all of your app inside the browser.

FWIW, I am open to working on updating the build to automate/parameterize this, if other folks need it.
@kateinoigakukun please let me know if you're interested. Cheers.

[lilole]

And of course I now see you don't have to build anything. The steps above can be trimmed to:

$ cd $TARGET_DIR
$ wget 'https://cdn.jsdelivr.net/npm/@ruby/4.0-wasm-wasi/dist/ruby+stdlib.wasm'
$ wget 'https://cdn.jsdelivr.net/npm/@ruby/4.0-wasm-wasi/dist/browser.script.iife.js'
$ mv browser.script.iife.js custom.js
$ vi custom.js # Change `const response = fetch("/custom.wasm")` line as in step 7 above
$ rbwasm pack ruby+stdlib.wasm --dir $PARENT_DIR/app::/usr/local/lib/ruby/site_ruby/app -o custom.wasm

At this point custom.js and custom.wasm can be put in your webserver root, and continue at step 9 above.

@kateinoigakukun please comment here if you want me to add this to the cheat sheet. Regards.