,
13 tweets,
5 min read
Read on Twitter
Announcing a template for C → #WebAssembly on @Cloudflare Workers with Emscripten! Link to repo: github.com/cloudflare/wor… 
Shout out to @dassurma for his gist gist.github.com/surma/b2705b6c… that gave me a great starting point for using Emscripten with webpack. Dockerized Emscripten made the experience very clean!
In lieu of a blogpost, here is a tweet storm on the creation of this template, and some of the tricks used to get all these tools playing nicely together.
Workers isn't node, but it isn't quite the browser either. The Workers' runtime uses V8, the same JavaScript/Wasm engine that powers node and Chrome, which provides the ECMAScript builtins. On top of V8, Workers implement several other apis: workers.cloudflare.com/docs/reference…
I started with the 'web' environment, as it had the closest glue code by default to what Workers needs. The 'node' environment expects the node stdlib to be present, so it's not applicable here.
However, this wasn't enough for things to work off the bat. So, I started looking into what was causing the glue code to error out when uploaded to workers.
First off, the glue code expected "document" to be present in the global scope. I added "document = this" to the glue code preamble, and moved on.
Next up was the TextDecoder API. Workers only implements the UTF-8 TextDecoder, and Emscripten expects UTF-16 and UTF-32 to be present as well. I used the 's TEXTDECODER=0' flag for emcc to use Emscripten's implementation instead.
I should mention just how many config flags Emscripten provides for configuring the glue code. There is over 100 of them!
With the use of the TextDecoder API disabled, the next part was injecting the Wasm module into the Emscripten glue code. Workers doesn't support dynamic execution for security reasons, so uploaded Wasm is exposed as a binding in global scope, which we have to pass to Emscripten:
The last part of this template was integrating Emscripten with Webpack, which wrangler uses behind-the-scenes for bundling your Workers projects. The difficult part was actually calling Emscripten as part of the Webpack build, for which I wrote a plugin for calling shell scripts.
The webpack config also needed to expose the built Wasm module and glue code as part of the final webpack build. I used copy-webpack-plugin for this.
And that's all of it! If you want to play around with the template, check out the template repo at github.com/cloudflare/wor… or use wrangler to generate a new project using the template!
