Getting started & Integrating C++ WASM with React

[IssaAboudi]

Hello all!

I am itching to integrate C++ WASM into my project! I built and compiled my C++ code which contains a main function and a test function called add_two() which just sums two integers passed as arg. I compiled it with the following:

em++ lib.cpp -o wasm.js

I am having trouble calling this function in JS. Here's what I tried so far:

//other relevant imports above
import * as wasmModule from "cwasm/wasm";

const component = () => {
  useEffect(() => {
    wasmModule.default().then(module => {
      const result = module._add_two(1,2); 
      console.log(result); 
    });
  }, []);
}

It doesn't seem to recognize the add_two() function that I'm trying to call. (cwasm is a symlink outside of src because this is a react application)

Any help would be greatly appreciated

[verySmolBrain]

If you haven't gotten this working yet:

You'll probably need to add the -sEXPORTED_FUNCTIONS=_add_two flag otherwise your add_two function gets eliminated as dead code by the compiler. You'll also have to wrap your function in extern "C" {} to prevent name mangling if you're using C++.

If you're getting started with C++ and WASM, I'd also personally look into the Embind or WebIDL aspects of Emscripten. They have most of the basic features already implemented for you and handles cases like C++ name-mangled functions out of the box. Understanding how they generate bindings would also be beneficial in understanding how the Emscripten toolchain functions.

[IssaAboudi]

Ooh awesome thank you so much!