Hone logo
Hone
Problems

WebAssembly Bridge in JavaScript: Simple Adder Function

This challenge focuses on creating a JavaScript bridge to interact with a simple WebAssembly module. The goal is to compile a basic WebAssembly module that performs addition and then expose a JavaScript function that can call this WebAssembly function, allowing JavaScript code to leverage the compiled WebAssembly for the addition operation. This demonstrates a fundamental pattern for integrating WebAssembly into JavaScript applications.

Problem Description

You need to create a JavaScript module that acts as a bridge to a pre-compiled WebAssembly module. The WebAssembly module contains a single function named add which takes two 32-bit integers as input and returns their sum as a 32-bit integer. Your JavaScript module should:

  1. Load the WebAssembly module: Assume you have a WebAssembly file named add.wasm.
  2. Instantiate the WebAssembly module: Create an instance of the WebAssembly module.
  3. Expose a JavaScript function: Provide a JavaScript function named addWasm that accepts two 32-bit integers as arguments and calls the add function within the WebAssembly module.
  4. Return the result: The addWasm function should return the result of the addition performed by the WebAssembly module.

Key Requirements:

  • The code must handle the asynchronous nature of WebAssembly module loading.
  • Error handling should be included to gracefully manage potential issues during module loading or instantiation.
  • The JavaScript function addWasm should be the primary interface for interacting with the WebAssembly module.

Expected Behavior:

When addWasm(a, b) is called, it should:

  1. Load the add.wasm file.
  2. Instantiate the WebAssembly module.
  3. Call the add function within the module with arguments a and b.
  4. Return the result of the addition.

Edge Cases to Consider:

  • What happens if add.wasm cannot be loaded (e.g., file not found, invalid format)?
  • What happens if the WebAssembly module fails to instantiate?
  • Consider potential errors during the call to the WebAssembly function.

Examples

Example 1:

Input: addWasm(5, 3)
Output: 8
Explanation: The JavaScript function calls the WebAssembly 'add' function with 5 and 3 as arguments, which returns 8.

Example 2:

Input: addWasm(-2, 7)
Output: 5
Explanation: The JavaScript function calls the WebAssembly 'add' function with -2 and 7 as arguments, which returns 5.

Example 3: (Error Handling)

Input: (Assume add.wasm is not found)
Output:  An error message indicating that the WebAssembly module could not be loaded.  The function should not crash.
Explanation: The code should handle the error gracefully and provide a meaningful error message.

Constraints

  • The WebAssembly module (add.wasm) is assumed to be available in the same directory as the JavaScript file.
  • The add function in the WebAssembly module takes two 32-bit integers (i32) and returns a 32-bit integer (i32).
  • The JavaScript code should be compatible with modern browsers and Node.js.
  • The solution should be reasonably efficient; avoid unnecessary overhead.

Notes

  • You'll need to use the WebAssembly API in JavaScript.
  • Consider using async/await for cleaner asynchronous code.
  • The add.wasm file is not provided; you'll need to create it separately using a WebAssembly compiler (e.g., Emscripten). A simple example add.wasm is provided below for testing purposes.
  • Focus on the JavaScript bridge and interaction with the WebAssembly module. The WebAssembly code itself is assumed to be correct.

Example add.wasm (for testing - create this file separately):

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )
  (export "add" (func $add))
)
Loading editor...
javascript