最新MoonBit WASM输出体积远小于Rust

正文

请到「今天看啥」查看全文

在开启了 Js-string builtin 这一特性之后，MoonBit String 类型将被编译为 JavaScript 中的 String object，从而可以实现非常简洁的互操作。我们需要在 moon.pkg.json 配置文件中开启这一特性：

// demo-js-builtin-string/palindrome/moon.pkg.json
{
  "link": {
    "wasm-gc": {
      "exports": ["palindrome"],
      "use-js-builtin-string": true
    }
  },
}

这时我们可以执行 moon build 将这个包进行编译，接下来我们准备一个 JavaScript 环境来测试这个函数：

// demo-js-builtin-string/a.js
const { instance } = await WebAssembly.instantiateStreaming(
  fetch(
    new URL(
      "./target/wasm-gc/release/build/palindrome/palindrome.wasm",
      import.meta.url
    )
  ),
  {},
  {
    builtins: ["js-string"],
    importedStringConstants: "_",
  }
);
console.log(instance.exports.palindrome("hello"));
console.log(instance.exports.palindrome("ada"));

这里我们通过 builtins: ["js-string"] 这个选项来在 JavaScript 环境中开启 Js string builtin 的特性， importedStringConstants 这个字段用于支持字符串字面量，这里的 "_" 是 MoonBit 编译器在编译字符串字面量时使用的默认名称，这个字段可以进行定制化，具体方式将会在后文中提到，这时我们可以使用最新版本的 deno 运行这个 JavaScript 程序：

$ deno run -A --v8-flags=--experimental-wasm-imported-strings a.js
false
true

使用浏览器环境

现在我们使用浏览器环境展示一个使用 MoonBit 操作 DOM API 的示例。

我们新建一个名为 dom 的包，将 DOM object 作为抽象类型，并通过 JavaScript 环境导入一个 set_css 函数来操作 DOM，比如这里我们可以使用它来实现一个 change_color 函数：

// demo-js-builtin-string/dom/dom.mbt
type DOM
fn set_css(dom : DOM, key : String, value : String) -> Unit = "dom" "set_css"
pub fn change_color(dom : DOM) -> Unit {
  set_css(dom, "color", "red")
}

同样地，我们需要在 moon.pkg.json 文件中开启 Js string builtin：

// demo-js-builtin-string/dom/moon.pkg.json
{
  "link": {
    "wasm-gc": {
      "exports": ["change_color"],
      "use-js-builtin-string": true
    }
  }
}

接下来我们通过下面的 JavaScript 程序提供需要被导入的 set_css 函数，并且调用 MoonBit 中的 change_color 函数来改变字体颜色。

// demo-js-builtin-string/b.mjs
const { instance } = await WebAssembly.instantiateStreaming(
  fetch(
    new URL("./target/wasm-gc/release/build/dom/dom.wasm", import.meta.url)
  ),
  {
    dom: {
      set_css: (dom, key, value) => {
        dom.style[key] = value;
      },
    },
  },
  {
    builtins: ["js-string"],
    importedStringConstants: "_",
  }
);
document.getElementById("hello").addEventListener("click", () => {
  instance.exports.change_color(document.getElementById("hello"));
});

同时我们使用下面的 HTML 文件来展示这个示例。

在这个 HTML 文件中，我们创建了一个简单的 div 元素，并通过 script 标签引入了我们之前编写的 JavaScript 模块。这样，当用户点击 "hello" 文本时，就会触发我们在 MoonBit 中定义的 change_color 函数，将文本颜色改变为红色。

请到「今天看啥」查看全文