Ruby Next goes online!

Author: palkan

.gitignore

@@ -0,0 +1,22 @@
+/.bundle/
+/.yardoc
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+tmp/
+dist/
+
+gemfiles/*.lock
+Gemfile.lock
+
+mspec/
+.rbnext/
+rubyspec_temp/
+
+build/
+rubies/
+
+ruby.wasm
+
+node_modules/

Gemfile

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+gem "js", "~> 2.4.1.pre.1" unless ENV["JS"] == "false"
+gem "ruby_wasm", "~> 2.5.pre.1"
+gem "ruby-next", "~> 1.0"

README.md

@@ -0,0 +1,58 @@
+# Ruby Next in browser
+
+Play with Ruby Next right in the browser (powered by [ruby.wasm](https://github.com/ruby/ruby.wasm)).
+
+## Development
+
+### Prerequisites
+
+- Install [wasi-vfs](https://github.com/kateinoigakukun/wasi-vfs):
+
+  ```sh
+  brew tap kateinoigakukun/wasi-vfs https://github.com/kateinoigakukun/wasi-vfs.git
+  brew install kateinoigakukun/wasi-vfs/wasi-vfs
+  ```
+
+- Install Rust toolchain:
+
+  ```sh
+  curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+  ```
+
+- Now you're ready to:
+
+  ```sh
+  bundle install
+  ```
+
+### Building ruby.wasm
+
+The following command works for me:
+
+```sh
+LDFLAGS='-L/opt/homebrew/opt/ruby/lib' bundle exec rbwasm build -o src/ruby.wasm --ruby-version 3.2
+```
+
+Looks like compiling Ruby relies on the hardcoded `/usr/local/opt/ruby/lib` path for linking. So, we need to provie the correct way to Ruby (and, I guess, the versions must match).
+
+This would build a JS-compatible WASM module. To build JS-free WASM module, use the `JS=false` env var.
+
+### Testing
+
+Using [wasmtime](https://github.com/bytecodealliance/wasmtime), you can verify the **JS-free** module like this:
+
+```sh
+wasmtime run --dir ./::/ src/ruby.wasm ruby-next.rb
+```
+
+### Running web version
+
+First, install JS deps (`yarn install`).
+
+Then, run a web server:
+
+```sh
+yarn serve
+```
+
+Go to [localhost:8000](http://localhost:8000) and see it in action!

bin/build.js

@@ -0,0 +1,23 @@
+import esbuild from "esbuild";
+import url from "url";
+import wasmPlugin from "./wasmPlugin.js";
+import copyPlugin from "./copyPlugin.js";
+
+const entryPoint = url.fileURLToPath(new URL("../src/index", import.meta.url));
+const outdir = url.fileURLToPath(new URL("../dist", import.meta.url));
+
+const { metafile } = await esbuild.build({
+  bundle: true,
+  entryPoints: [entryPoint],
+  format: "esm",
+  metafile: true,
+  minify: true,
+  outdir,
+  plugins: [wasmPlugin, copyPlugin],
+  sourcemap: true,
+  splitting: true,
+  target: "es6",
+});
+
+const analysis = await esbuild.analyzeMetafile(metafile);
+console.log(analysis);

bin/copyPlugin.js

@@ -0,0 +1,17 @@
+import path from "node:path";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default {
+  name: "copy",
+  setup(build) {
+    build.onEnd(() => {
+      fs.copyFileSync(
+        path.resolve(__dirname, "../src/index.html"),
+        path.resolve(__dirname, "../dist/index.html")
+      );
+    });
+  },
+};

bin/serve.js

@@ -0,0 +1,21 @@
+import esbuild from "esbuild";
+import url from "url";
+import wasmPlugin from "./wasmPlugin.js";
+import copyPlugin from "./copyPlugin.js";
+
+const entryPoint = url.fileURLToPath(new URL("../src/index", import.meta.url));
+const outdir = url.fileURLToPath(new URL("../dist", import.meta.url));
+
+const ctx = await esbuild.context({
+  bundle: true,
+  entryPoints: [entryPoint],
+  format: "esm",
+  outdir,
+  plugins: [wasmPlugin, copyPlugin],
+  sourcemap: true,
+  splitting: true,
+  target: "esnext",
+});
+
+const { host, port } = await ctx.serve({ servedir: outdir });
+console.log(`Listening at ${host}:${port}`);

bin/wasmPlugin.js

@@ -0,0 +1,56 @@
+// From: https://github.com/ruby-syntax-tree/ruby-syntax-tree.github.io/blob/main/bin/wasmPlugin.js
+
+import path from "node:path";
+import fs from "node:fs";
+
+export default {
+  name: "wasm",
+  setup(build) {
+    // Resolve ".wasm" files to a path with a namespace
+    build.onResolve({ filter: /\.wasm$/ }, (args) => {
+      // If this is the import inside the stub module, import the
+      // binary itself. Put the path in the "wasm-binary" namespace
+      // to tell our binary load callback to load the binary file.
+      if (args.namespace === "wasm-stub") {
+        return {
+          path: args.path,
+          namespace: "wasm-binary",
+        };
+      }
+
+      // Otherwise, generate the JavaScript stub module for this
+      // ".wasm" file. Put it in the "wasm-stub" namespace to tell
+      // our stub load callback to fill it with JavaScript.
+      //
+      // Resolve relative paths to absolute paths here since this
+      // resolve callback is given "resolveDir", the directory to
+      // resolve imports against.
+      if (args.resolveDir === "") {
+        return; // Ignore unresolvable paths
+      }
+      return {
+        path: path.isAbsolute(args.path)
+          ? args.path
+          : path.join(args.resolveDir, args.path),
+        namespace: "wasm-stub",
+      };
+    });
+
+    // Virtual modules in the "wasm-stub" namespace are filled with
+    // the JavaScript code for compiling the WebAssembly binary. The
+    // binary itself is imported from a second virtual module.
+    build.onLoad({ filter: /.*/, namespace: "wasm-stub" }, async (args) => ({
+      contents: `import wasm from ${JSON.stringify(args.path)}
+        export default () => WebAssembly.compile(wasm)`,
+    }));
+
+    // Virtual modules in the "wasm-binary" namespace contain the
+    // actual bytes of the WebAssembly file. This uses esbuild's
+    // built-in "binary" loader instead of manually embedding the
+    // binary data inside JavaScript code ourselves.
+    build.onLoad({ filter: /.*/, namespace: "wasm-binary" }, async (args) => ({
+      contents: await fs.promises.readFile(args.path),
+      loader: "binary",
+    }));
+  },
+};

package.json

@@ -0,0 +1,15 @@
+{
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "node bin/build.js",
+    "serve": "node bin/serve.js"
+  },
+  "dependencies": {
+    "@bjorn3/browser_wasi_shim": "^0.2.18",
+    "@ruby/wasm-wasi": "^2.4.1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.17.10"
+  }
+}

ruby-next.rb

@@ -0,0 +1,21 @@
+require "/bundle/setup"
+
+# Make gem no-op
+define_singleton_method(:gem) { |*| nil }
+
+require "ruby-next/language"
+
+SOURCE = <<~'RUBY'
+  greet = proc do
+    case it
+      in hello: hello if hello =~ /human/i
+        '🙂'
+      in hello: 'martian'
+        '👽'
+      end
+  end
+
+  puts greet.call(hello: 'martian')
+RUBY
+
+puts RubyNext::Language.transform(SOURCE)