2d:null 2e:["$","title",null,{"children":"WebAssembly via Emscripten | j.carson | Observable"}] 33:T5fb,md`# WebAssembly via Emscripten Using Emscripten, it's possible to compile C++ code in to WebAssembly that works directly in your browser. This snippet uses [Embind](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html) to simplify the connection to C++ and wrap standard containers (e.g. \`std::vector\`) ## Getting Started 1. Get [Emscripten](https://emscripten.org/docs/getting_started/downloads.html) 1. Copy \`example.cpp\` (see below) to your system 1. Run \`emcc --bind --std=c++17 -s MODULARIZE=1 -o test.js example1.cpp\` * \`--bind\` - Compiles the source code using the Embind bindings to connect C/C++ and JavaScript. (ie. It enables the use of \`#include \` * \`-s MODULARIZE=1\` - Places all code in a factory function that lets us create an instance of the module. Hurray. * \`--std=c++17\` - Not really needed, was added to support [std::partial_sort_copy](https://en.cppreference.com/w/cpp/algorithm/partial_sort_copy) which is no longer part of the code but I left it in to show C++17 is supported. 1. Upload the resulting **test.js** and **test.wasm** to your ObservableHQ notebook 1. Create a usable module from the Webassembly and Javascript uploads using [@ballingt/hello-embind](https://observablehq.com/@ballingt/hello-embind) * Note: The author's original notebook hardcoded the name of their WASM file in the \`moduleFromJavaScriptAndWasm\` function. So I copied and modified it below (with attribution). 1. Call the module (see below) `34:[{"id":"ad8fbd18fd164a263d55a4200f311e61894dbf721b80e8ced9f7f1c0446b9f51dda3d8e9bb68e6fd2f5ae24d9b6ea1fbfb18397256c16fc142a41becfc3c337d","href":"https://static.observableusercontent.com/files/ad8fbd18fd164a263d55a4200f311e61894dbf721b80e8ced9f7f1c0446b9f51dda3d8e9bb68e6fd2f5ae24d9b6ea1fbfb18397256c16fc142a41becfc3c337d","name":"test@3.js","type":"application/javascript","lastModified":1602286266523.552,"size":200960},{"id":"c8281624963ff3bb10fb99b2fb9e4677bb2a1365170019291370af6d55d1e4826b4c6e10580ce219eef5595bd8768eb92e5c8056e5108262be331e155da5c882","href":"https://static.observableusercontent.com/files/c8281624963ff3bb10fb99b2fb9e4677bb2a1365170019291370af6d55d1e4826b4c6e10580ce219eef5595bd8768eb92e5c8056e5108262be331e155da5c882","name":"test@3.wasm","type":"application/wasm","lastModified":1602286266448.715,"size":49490}] 31:{"id":"fa73b4e091a1fa02","slug":"webassembly-via-emscripten","title":"WebAssembly via Emscripten","thumbnail":"9c1a9a64f95415be07f068a5a48d280b60b329d88b323a7b590c559c53fa2f7e","access_level":"public","create_time":"$D2020-10-09T22:55:27.425Z","update_time":"$D2021-08-30T15:22:11.970Z","view_time":null,"first_public_time":"$D2020-10-09T23:36:42.899Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"7cae0ef6ff159231","login":"jerdak","name":"j.carson","avatar_url":"https://avatars-next.observableusercontent.com/c9503938960f19ac6db5d65d8d4d6a9f676805ddb8d5dfca1e6e3d1ab6c18f7c","tier":"starter_2024"},"version":98,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bbfa6fe35a8ce00e","login":"jerdak","name":"j.carson","avatar_url":"https://avatars-next.observableusercontent.com/c9503938960f19ac6db5d65d8d4d6a9f676805ddb8d5dfca1e6e3d1ab6c18f7c","tier":null}],"members":[{"type":"individual","id":"bbfa6fe35a8ce00e","login":"jerdak","name":"j.carson","avatar_url":"https://avatars-next.observableusercontent.com/c9503938960f19ac6db5d65d8d4d6a9f676805ddb8d5dfca1e6e3d1ab6c18f7c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"WebAssembly via Emscripten","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`## example.cpp`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md` \n ~~~cpp\n #include \n #include \n #include \n #include \n #include \n\n #include \n\n template\n std::vector sort(const val& typedArray){\n // Convert directly from a javascript array to a C++-native container type\n std::vector vec = vecFromJSArray(typedArray);\n\n // Sort it in C++\n std::sort(vec.begin(),vec.end());\n return vec;\n }\n EMSCRIPTEN_BINDINGS(my_module) {\n function(\"csort\", &sort);\n register_vector(\"FloatList\");\n }\n ~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`## Call Test.wasm (our sorting function)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"{\n const x = [-10,1,5,-66,15,16,100,99,5,6,7];\n const xs = module.csort(x);\n const y = [];\n \n // There does not appear to be a way to directly treat `xs` as an iterable (e.g. JS array).\n for (let i = 0; i < xs.size(); ++i){\n y.push(xs.get(i));\n }\n return y;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`## Appendix A: Module Loading\n\nModules are attached to this notebook and loaded using the **File Attachments** API.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"module = await moduleFromJavaScriptAndWasm(\n FileAttachment(\"test@3.js\"),\n FileAttachment(\"test@3.wasm\")\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"moduleFromJavaScriptAndWasm = async (jsFileAttachment, wasmFileAttachment) => {\n // Source: https://observablehq.com/@ballingt/hello-embind\n \n const wasmLocation = await wasmFileAttachment.url();\n const createModule = await require(await jsFileAttachment.url());\n \n return new Promise(resolve => {\n createModule({\n // By default Emscripten modules expect the .wasm code at ./quick_example.wasm\n // and since Observable file attachments don't have predictable names like this\n // we override this behavior.\n locateFile: function(s) {\n return wasmLocation;\n }\n }).then(m => {\n // Something about this .then() locks up Observable\n delete m.then;\n resolve(m);\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"