User:Saul/wasm

This page has some information on how to import c/++ files into your web projects using wasm and emscripten.

Install

Follow these instructions to setup emscripten.
Run:

sudo cp emscripten/X.XX.XX/system/include/* /usr/local/include

With Node

Install

Install the required package:

npm i -D cpp-wasm-loader

Then configure it with your webpack config like so:

configureWebpack: {
	module: {
		rules: [
			{
				test: /\.(c|cpp)$/,
				use: {
					loader: "cpp-wasm-loader",
					options: {
						emccPath: "/media/Data/Applications/Linux/emsdk/emscripten/1.38.21/emcc"
					}
				}
			}
		]
	},
	resolve: {
		extensions: [".js", ".c", ".cpp"]
	}
}

You may have to build as sudo.

Example Use

add.cpp

#include <emscripten.h>

extern "C"
{
	/* Declare Javascript function for use in C/C++ */
	extern int sub(int a, int b);

	EMSCRIPTEN_KEEPALIVE /* <= Needed to export this function to javascript "module.exports" */
	int add(int a, int b)
	{
		return a + b;
	}

}

add.js

const wasm = require("./add.cpp");

wasm.init((imports) => {
	// custom javascript function that can be called from C;
	imports._sub = (a, b) => a - b;
	return imports;
}).then((module) => {
	console.log(module.exports.add(1, 2)); // 3
	console.log(module.memory) // Raw ArrayBuffer Memory object
	console.log(module.memoryManager) // Memory Manager Class
	console.log(module.raw) // The complete unmodified return value of the webassembly init promise.
}).catch((err) => {
	console.error(err);
})

Pointers/Arrays

To pass an array to c++ use this function:

function arrayToPtr(array) {
	var ptr = module.raw.instance.exports._malloc(array.length * 4);
	module.emModule.HEAP32.set(array, ptr / 4)
	return ptr
}

var array = new Int32Array([1, 2, 3, 4, 5]);
var cppArray = arrayToPtr(array);

NOTE:' You will need to have the fullEnv option set to true in your webpack settings, see this for more info.

Without Node

See Mozilla's guide for use without node.
See also.