DEV Community

阿豪
阿豪

Posted on

tsx+wat=? A new idea for wasm modularization

Access to the web ecosystem of wasm allows for easy type checking, syntax highlighting, and function level testing.

Performance improvement of 1.3 - 1.5 times for computational functions, due to the simd support, the image processing functions will be boosted a bit more, 3-10 times.

Here are some example code and online demos

Image description

function Add() {
  const $a = <param.i32 />
  const $b = <param.i32 />
  const $ret = <result.i32 />
  return (
    <Func params={[$b, $a]} ret={$ret}>
      <local.get var={$a} />
      <local.get var={$b} />
      <i32.add />
    </Func>
  )
}

export default (
  <Module>
    <Export value={Add} />
  </Module>
)
Enter fullscreen mode Exit fullscreen mode
function Fib() {
  const $n = <param.i32 />;
  const $ret = <result.i32 />;
  return (
    <Func params={[$n]} ret={$ret}>
      <local.get var={$n} />
      <i32.const value={2} />
      <i32.lt_u />
      <If ret={$ret}>
        <Then>
          <local.get var={$n} />
        </Then>
        <Else>
          <local.get var={$n} />
          <i32.const value={1} />
          <i32.sub />
          <Call fn={Fib} />
          <local.get var={$n} />
          <i32.const value={2} />
          <i32.sub />
          <Call fn={Fib} />
          <i32.add />
        </Else>
      </If>
    </Func>
  );
}
export default (
  <Module>
    <Export value={Fib} />
  </Module>
)
Enter fullscreen mode Exit fullscreen mode

https://github.com/ahaoboy/xwat-bench

https://stackblitz.com/github/ahaoboy/xwat-bench

Top comments (0)