2e:null 2f:["$","title",null,{"children":"Stupid trick: Writing WebAssembly from Scratch | Thomas Ballinger | Observable"}] 34:T8a2,# Stupid trick: Writing WebAssembly from Scratch I managed to [write WebAssembly opcodes from scratch](https://www.youtube.com/watch?v=pkw9USN_Tko), you can too! ### Step 1: let's learn LEB Lesson 1: -64 through 63 are just those number directly! That's plenty of numbers, we're done! ### Step 2: memorize the magic number! It's 0, a, s, m. Another stupid trick is memorizing ascii codes - remember, A is 65 (0x41) in ASCII, and lowercase starts 0x20 later at 97 (0x61) - 0, 97, 115, 109 - just remember those! ### Step 3: memorize the version number! It's 1, little endian: 0x01 0x00 0x00 0x00 ### Step 4: memorize the types section! typeSection = [0x01, 0x05, 0x01, 0x60, 0x00, 0x01, 0x7f] Function section, 5 more bytes, there is one type, it's a function (-0x20), 0 arguments, 1 return value, an int (-0x01)

    0x01, // Type section
    0x05, // this section has 5 more bytes
    0x01, // There is 1 type
    0x60, // it's a function
    0x00, // it takes zero arguments
    0x01, // it has one return value
    0x7f, // which is an int

### Step 5: the functions section 3, 2, 1, 0! (for each function, point to its type) ### Step 6: the exports section 7, 5, 1, name length, name, 0, 0

    0x07, // Export section
    0x05, // this section has 5 more bytes
    0x01, // there's one export
    0x01, // the name of the function has one byte
    'x'.codePointAt(0), // let's call our exported function "x"
    0x00, // it's a function
    0x00, // it's the function at index 0

### Step 7: memorize the skeleton of the code section

    0x0a, // Code section
    code.length + 2, // there are code.length + 2 more bytes in this section
    0x01, // there's one function in here
    code.length, // this function is code.length bytes long
    ...code

### Step 8: memorize a few operands 0x41 means constant i32, for some reason this is ascii A! i32.add 0x6a start at 106 i32.sub 0x6b i32.mul 0x6c i32.div_s 0x6d 0x0b // END opcode ]35:T434,buildModule = (code) => { return [ ...[0x00, 0x61, 0x73, 0x6d], // magic number ...[0x01, 0x00, 0x00, 0x00], // version 0x01, // Type section 0x05, // this section has 5 more bytes 0x01, // There is 1 type 0x60, // it's a function 0x00, // it takes zero arguments 0x01, // it has one return value (I think that's what this means?) 0x7f, // which is an int 0x03, // Func section 0x02, // this section has 2 more bytes 0x01, // there's one function 0x00, // the first function uses type signature at index 0 0x07, // Export section 0x05, // this section has 5 more bytes 0x01, // there's one export 0x01, // the name of the function has one byte "x".codePointAt(0), // let's call our exported function "x" 0x00, // it's a function 0x00, // it's the function at index 0 0x0a, // Code section code.length + 2, // there are code.length + 2 more bytes in this section 0x01, // there's one function in here code.length, // this function is code.length bytes long ...code ]; }36:[{"id":"39fd0575df7943eadeaff30f6adfcedb42fb58c3331d403fe3eba7062bb439b7f5880f3d8d395ff6fd110a24c436e3fd00f6304c8553a12023b50fc658ed5c53","href":"https://static.observableusercontent.com/files/39fd0575df7943eadeaff30f6adfcedb42fb58c3331d403fe3eba7062bb439b7f5880f3d8d395ff6fd110a24c436e3fd00f6304c8553a12023b50fc658ed5c53","name":"image.png","type":"image/png","lastModified":1658888433066.372,"size":1342918}] 32:{"id":"a794cec8e2a73d39","slug":"stupid-trick-writing-webassembly-from-scratch","title":"Stupid trick: Writing WebAssembly from Scratch","thumbnail":"5dcfd3a20c9c87b7b71af117e91e2d4207a5e238a47a4b44fa5319b6b8a8e361","access_level":"public","create_time":"$D2022-07-27T02:09:55.675Z","update_time":"$D2022-12-05T05:24:39.490Z","view_time":null,"first_public_time":"$D2022-07-27T03:52:39.682Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"8d59e5c626effee2","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":"starter_2024"},"version":165,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":null}],"members":[{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Stupid trick: Writing WebAssembly from Scratch","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"leb = require(\"https://bundle.run/@webassemblyjs/leb128@1.9.0/lib/index.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"leb.encodeI32(-64)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"\n- LEB encoding\n - memorize 1, 0, 2","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"leb.encodeI32(12)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"reference: https://github.com/WebAssembly/design/blob/main/BinaryEncoding.md\nreference: https://observablehq.com/@ballingt/advent-of-wasm-day-1?collection=@ballingt/advent-of-wasm","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"### some working WebAssembly:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"part1Code = (mass) => [\n 0x00, // there are no local variables (this is where we'd declare them if there were)\n 0x41, // constant integer\n ...leb.encodeI32(mass),\n 0x41, // constant integer\n ...leb.encodeI32(3),\n 0x6d, // division\n 0x41, // constant integer\n ...leb.encodeI32(2),\n 0x6b, // subtraction\n 0x0b // END opcode\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":" $\"image.png\"$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"[0x00, 0x61, 0x73, 0x6d].map((x) => [x, String.fromCharCode(x)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"String.fromCharCode(65 + 0x20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"typeSection = [0x01, 0x05, 0x01, 0x60, 0x00, 0x01, 0x7f]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"async function runModule(mass) {\n const linear = buildModule(mass);\n const linearBuffer = new Uint8Array(linear);\n const module = await WebAssembly.compile(linearBuffer);\n const instance = await WebAssembly.instantiate(module);\n return await instance.exports.x();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"runModule(part1Code(1123))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"