Hey friends, it's been a while!
It's time for another summer sale — starting today, you can get the book for 50% off. Just head on over to wasmgroundup.com, no discount code required.
So, if you've been meaning to pick it up (or you know someone who has), what better time than now?
wasmgroundup.com
WebAssembly from the Ground Up
A book about WebAssembly — learn Wasm by building a simple compiler in JavaScript.
![import jz from 'jz'
// 3 lines of JS → 120 bytes of WASM, compiles in <1ms
const { exports } = await WebAssembly.instantiate(jz(`
let { sin, PI } = Math
export let sine = (out, freq, t) => {
for (let i = 0; i < out.length; i++) out[i] = sin((t + i) * freq * PI * 2 / 44100)
}
`))
// Real-time audio at native speed, zero GC pauses
exports.sine(audioBuffer, 440, sampleOffset)](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:zmdqpvhi7mrerefow5jxqcb6/bafkreigzjzukdafrmpf5euvaxrzznnrltf2hzv76672oxognaubfmpvife)
![Details
Structured cloning of WebAssembly.Module
Normally you'd instantiate a Wasm module with WebAssembly.instantiate, which gives you a module instance. Here, we use WebAssembly.compile, which gives us a WebAssembly.Module. This is a stateless object that is structured-cloneable, which allows it to be safely shared across realm boundaries.
Serialization (an implicit part of structured cloning) of WebAssembly modules is defined in §3 of the WebAssembly Web API, which says:
Engines should attempt to share/reuse internal compiled code when performing a structured serialization, although in corner cases like CPU upgrade or browser update, this might not be possible and full recompilation may be necessary.
Shared memory
WebAssembly.Memory also support structured cloning. When we pass shared: true, the buffer property is a SharedArrayBuffer:
The structured clone algorithm accepts SharedArrayBuffer objects and typed arrays mapped onto SharedArrayBuffer objects. In both cases, the SharedArrayBuffer object is transmitted to the receiver resulting in a new, private SharedArrayBuffer object in the receiving agent (just as for ArrayBuffer). However, the shared data block referenced by the two SharedArrayBuffer objects is the same data block, and a side effect to the block in one agent will eventually become visible in the other agent.
Atomic add
The last piece of the puzzle is the i32.atomic.rmw.add instruction used in the addId function:
(func (export "add") (result i32)
;; mem[0] += workerId
i32.const 0
global.get 0
i32.atomic.rmw.add))
This instruction is defined in the threads proposal (a Stage 4 proposal, so not finalized yet), which defines "a new shared linear memory type and some new operations for atomic memory access".
i32.atomic.rmw.add is equivalent to LOCK XADD on x86. As described in the threads proposal:](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:zcycfvljdjkc2ywtj33blgdl/bafkreibmpgcsj3nhuo35vp6yqywpa4dax6x56v37pnpcoq274fq2vdxkby)
![import * as w from "@wasmgroundup/emit";
const mod = w.module([
w.typesec([w.functype([w.valtype.i32, w.valtype.i32], [w.valtype.i32])]),
w.funcsec([w.typeidx(0)]),
w.exportsec([w.export_("add", w.exportdesc.func(w.funcidx(0)))]),
w.codesec([
w.code(
w.func(
[],
w.expr([
[w.instr.local.get, ...w.i32(0)],
[w.instr.local.get, ...w.i32(1)],
w.instr.i32.add,
]),
),
),
]),
]);
const { instance } = await WebAssembly.instantiate(w.flatten(mod));
const { add } = instance.exports as { add: (a: number, b: number) => number };
console.log(add(1, 2)); // 3](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:zmdqpvhi7mrerefow5jxqcb6/bafkreib7rlnvsbx32nrijvdoxfkn54ipbwrqalampo3i5qjlaynim5aepi)
![// im*:vec(import)
export function importsec(ims) {
return section(SECTION_ID_IMPORT, vec(ims));
}
// mod:name nm:name d:importdesc
export function import_(mod, nm, d) {
return [name(mod), name(nm), d];
}
export const importdesc = {
// x:typeidx
func(x) {
return [0x00, typeidx(x)];
},
};](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:zmdqpvhi7mrerefow5jxqcb6/bafkreig3vx6db3x3iuay3mlquwpobn7hgig2nsyvqny25g6lxzyyy4pbky)
