Difference between revisions of "Generating WebAssembly with LDC"

From D Wiki
Jump to: navigation, search
m (→‎Test in HTML page: format JS code)
(show how to discover using WebAsm SIMD)
Line 109: Line 109:
 
callback from D: 42 + -2.5 = 39.5
 
callback from D: 42 + -2.5 = 39.5
 
r = 39.5
 
r = 39.5
 +
</pre>
 +
 +
== Additional LLVM wasm features ==
 +
 +
You can list the supported LLVM features for WASM with your LDC version like SIMD or exception handling using
 +
 +
<pre>ldc2 -mtriple=wasm32-unknown-unknown-wasm -mattr=help</pre>
 +
 +
'''Example output''': ('''may be outdated''', run the above command yourself to get the supported features for your LDC version)
 +
 +
<pre>
 +
Targeting wasm32. Available CPUs for this target:
 +
 +
  bleeding-edge - Select the bleeding-edge processor.
 +
  generic      - Select the generic processor.
 +
  mvp          - Select the mvp processor.
 +
 +
Available features for this target:
 +
 +
  atomics            - Enable Atomics.
 +
  bulk-memory        - Enable bulk memory operations.
 +
  exception-handling  - Enable Wasm exception handling.
 +
  multivalue          - Enable multivalue blocks, instructions, and functions.
 +
  mutable-globals    - Enable mutable globals.
 +
  nontrapping-fptoint - Enable non-trapping float-to-int conversion operators.
 +
  reference-types    - Enable reference types.
 +
  sign-ext            - Enable sign extension operators.
 +
  simd128            - Enable 128-bit SIMD.
 +
  tail-call          - Enable tail call instructions.
 +
 +
Use +feature to enable a feature, or -feature to disable it.
 +
For example, llc -mcpu=mycpu -mattr=+feature1,-feature2
 
</pre>
 
</pre>
  

Revision as of 18:36, 17 November 2021

Starting with v1.11, LDC supports compiling and linking directly to WebAssembly. This page shows how to get started.

Building WebAssembly

Let's generate a .wasm file for this D code (wasm.d): 

extern(C): // disable D mangling

double add(double a, double b) { return a + b; }

// seems to be the required entry point
void _start() {}

Build wasm.wasm: 

ldc2 -mtriple=wasm32-unknown-unknown-wasm -betterC wasm.d

In case LDC errors out (e.g., with unsupported -link-internally), try an official prebuilt release package.

Test in HTML page

Let's test it with a little HTML page, loading and invoking the WebAssembly via JavaScript. Generate an .html file in the same directory as the .wasm file, with the following contents: 

<html>
  <head>
    <script>
      const request = new XMLHttpRequest();
      request.open('GET', 'wasm.wasm');
      request.responseType = 'arraybuffer';
      request.onload = () => {
        console.log('response received');
        const bytes = request.response;
        const importObject = {};
        WebAssembly.instantiate(bytes, importObject).then(result => {
          console.log('instantiated');
          const { exports } = result.instance;
          // finally, call the add() function implemented in D:
          const r = exports.add(42, -2.5);
          console.log('r = ' + r);
        });
      };
      request.send();
      console.log('request sent');
    </script>
  </head>
  <body>
    Test page
  </body>
</html>

Note that fetch() doesn't work for files in the local filesystem (file://), but XMLHttpRequest does in Firefox (not in Chrome though IIRC).

Open the HTML page; the JavaScript console should show: 

request sent
response received
instantiated
r = 39.5

Calling external functions

The minimal example above only calls in one direction, from JavaScript to WebAssembly. Here's how to call external functions in D:

wasm.d: 

extern(C): // disable D mangling

void callback(double a, double b, double c);

double add(double a, double b)
{
    const c = a + b;
    callback(a, b, c);
    return c;
}

void _start() {}

Add -L-allow-undefined as linker flag to the LDC command line, otherwise LLD refuses to link due to undefined callback().

Implement the callback() function in JavaScript and specify it in importObject.env: 

const callback = (a, b, c) => {
  console.log(`callback from D: ${a} + ${b} = ${c}`);
};

// ...

  const importObject = {
    env: { callback }
  };

The log should now show: 

request sent
response received
instantiated
callback from D: 42 + -2.5 = 39.5
r = 39.5

Additional LLVM wasm features

You can list the supported LLVM features for WASM with your LDC version like SIMD or exception handling using 

ldc2 -mtriple=wasm32-unknown-unknown-wasm -mattr=help

Example output: (may be outdated, run the above command yourself to get the supported features for your LDC version) 

Targeting wasm32. Available CPUs for this target:

  bleeding-edge - Select the bleeding-edge processor.
  generic       - Select the generic processor.
  mvp           - Select the mvp processor.

Available features for this target:

  atomics             - Enable Atomics.
  bulk-memory         - Enable bulk memory operations.
  exception-handling  - Enable Wasm exception handling.
  multivalue          - Enable multivalue blocks, instructions, and functions.
  mutable-globals     - Enable mutable globals.
  nontrapping-fptoint - Enable non-trapping float-to-int conversion operators.
  reference-types     - Enable reference types.
  sign-ext            - Enable sign extension operators.
  simd128             - Enable 128-bit SIMD.
  tail-call           - Enable tail call instructions.

Use +feature to enable a feature, or -feature to disable it.
For example, llc -mcpu=mycpu -mattr=+feature1,-feature2

Examples

Retrieved from "https://wiki.dlang.org/?title=Generating_WebAssembly_with_LDC&oldid=10040"