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);
})

Without Node

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

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]);

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