How to import wasm file inside javascript ES6 file

user_14671456 0
Viewed 697

I'm new to wasm. I'm reading some tutorials and the mdn documentation about the argument. I have a simple question about, is possible and how I can use a c++ library after converting it to wasm inside a node or Vue project? If I understand the concept, wasm can convert native code from C/C++ to javascript, this means that a c++ library can be easily ported and used in an ES6 javascript file using require() or import right?

webassembly vue.js node.js javascript
2 Answers

Explanation

It doesn't work like that. Wasm is a bytecode that runs on a stack virtual machine. It has its own text format (wat) wich you can write on a text/code editor. After that you compile it using wabt (WebAssembly Binary Tools, search wabt git or wabt npm on google). It is not recomended to write it in its own text format, since it is too difficuilt. The c++ code is a higher level interface for writing WebAssembly. You can also compile typescript into webassembly (search for assemblyscript). Check online about "loading webassembly modules", or "understanding webassembly" for better explanation

user_134763890

you cannot import but if you get the byte format of .wasm file, you can use it inside any javascript file. I will show 2 ways that you can handle:

  • Place the wasm file in public folder and fetch it:

    async function getByte() {

    try {
      const res = await fetch("test.wasm");
      // bytes from memory
      const buffer = await res.arrayBuffer();
      // this will create an object
      const wasm = await WebAssembly.instantiate(buffer);
      console.log(wasm);
      // addTwo function is exported in wasm code, otherwise I would not be able to use it. 
      const addNumbers = wasm.instance.exports.addTwo;
      // console.log(addNumbers);
      const result = addNumbers(10, 50);
      console.log(result);
    } catch (e) {
      console.log(e);
    }
  }

  • In linux, xxd command creates a hex dump of a given file or standard input. For example xxd -g1 test.wasm will create the hex format of the wasm.

enter image description here

Now you can use them in javascript file like this:

async function byteCode() {
        const byteArray = new Int8Array([
          0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00, 0x01, 0x07, 0x01,
          0x60, 0x02, 0x7f, 0x7f, 0x01, 0x7f, 0x03, 0x02, 0x01, 0x00, 0x07,
          0x07, 0x01, 0x03, 0x73, 0x75, 0x6d, 0x00, 0x00, 0x0a, 0x09, 0x01,
          0x07, 0x00, 0x20, 0x00, 0x20, 0x01, 0x6a, 0x0b, 0x00, 0x18, 0x04,
          0x6e, 0x61, 0x6d, 0x65, 0x01, 0x06, 0x01, 0x00, 0x03, 0x73, 0x75,
          0x6d, 0x02, 0x09, 0x01, 0x00, 0x02, 0x00, 0x01, 0x61, 0x01, 0x01,
          0x62,
        ]);
        // WebAssembly is globally available
        // this will create a javascript object
        const wasm = await WebAssembly.instantiate(byteArray.buffer);
        // you need to know methods in original code
        // in test.wasm I wrote a function and exported as "sum"
        const addNumbers = wasm.instance.exports.sum;
        const result = addNumbers(10, 50);
        console.log(result);
      }
user_102628050
Related