2b:null 2c:["$","title",null,{"children":"Wasm | Shaun Lebron | Observable"}] 31:[] 2f:{"id":"f224186b8df49d56","slug":"wasm","title":"Wasm","thumbnail":"3a5bfc2d0a05523533e544540ae6989723d05ddba53f5ccf509f6fc68ee9ee8e","access_level":"public","create_time":"$D2018-05-01T18:49:12.378Z","update_time":"$D2018-10-24T17:11:08.830Z","view_time":null,"first_public_time":"$D2018-05-01T23:54:34.727Z","fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"ed9847273198461c","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":"starter_2024"},"version":363,"publish_version":363,"role":null,"authored":false,"authors":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null}],"members":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Wasm","cells":[{"id":0,"value":"md`\n# Wasm\n\n\n $\"WASM\"$ \n\nYou can write [WebAssembly] (wasm) instead of JavaScript in the browser if you want to hand-optimize some code. Though mainly intended as a binary compilation target for other languages like Rust or C, it does have a readable text format that we can manually write (_looks like Lisp with less parens_).\n\nBelow are interactive examples of WebAssembly functions called from JavaScript.\n\n**[See Wasm Syntax Intro][syntax]**\n\n**NOTE**: _Modify the code by clicking the module names on the left._\n\n[WebAssembly]:http://webassembly.org/\n[WebAssembly Studio]:https://webassembly.studio/\n[syntax]:https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"adderModule.addTwo(1,2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof adderModule = wasm`\n(module\n (func $addTwo (param $a i32) (param $b i32) (result i32)\n (i32.add (get_local $a) (get_local $b)))\n (export \"addTwo\" (func $addTwo)))\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"factorialModule.fac(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof factorialModule = wasm`\n(module\n (func $fac (param $a f64) (result f64)\n get_local $a\n f64.const 1\n f64.lt\n if (result f64)\n f64.const 1\n else\n get_local $a\n get_local $a\n f64.const 1\n f64.sub\n call $fac\n f64.mul\n end)\n (export \"fac\" (func $fac)))\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`## See Also\n

\nIn [WebAssembly Studio], you can create an empty \"Wat\" project to see how you can compile handwritten WebAssembly in an actual build workflow.\n\n[WebAssembly Studio]:https://webassembly.studio/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`\n## Appendix\n

\nIn this notebook, we use the official WebAssembly Binary Toolkit, [wabt](https://github.com/WebAssembly/wabt)—pronounced wabbit. Particularly, we pull in \\`libwabt.js\\` which is not documented yet, but is used in their [demo page](https://cdn.rawgit.com/WebAssembly/wabt/aae5a4b7/demo/wat2wasm/index.html). (_[demo code](https://github.com/WebAssembly/wabt/blob/aae5a4b7/demo/wat2wasm/demo.js) is very readable._)\n\nTo directly use my custom wrapper in your own observable notebooks:\n\n

\nimport { wasm } from \"@shaunlebron/wasm\";\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"wabt = {\n const wabt = await require(\"https://cdn.rawgit.com/WebAssembly/wabt/aae5a4b7/demo/libwabt.js\").catch(() => window.wab);\n await wabt.ready;\n return wabt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"// Tagged template literal function for compiling and highlighting WASM code.\n// Example: viewof myModule = wasm`...`;\nfunction wasm(strings, ...vals) {\n const code = strings.reduce((acc,str,i) => acc+vals[i-1]+str);\n const el = highlightWasm(code);\n const exports = compileWasm(code);\n el.value = exports;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"function compileWasm(code) {\n const module = wabt.parseWat('unnamed.wat', code);\n module.resolveNames();\n module.validate();\n const binary = module.toBinary({log: true, write_debug_names:true});\n const {WebAssembly} = window;\n const wasm = new WebAssembly.Module(binary.buffer);\n const instance = new WebAssembly.Instance(wasm, {});\n return instance.exports;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function highlightWasm(code) {\n const highlighted = Prism.highlight(code, Prism.languages.wasm);\n const el = html`\n

\n${highlighted}\n

`;\n el.value = code;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"// wasm syntax highlighting\nPrism = {\n const Prism = await require('prismjs@1.14.0').catch(() => window.Prism);\n \n // load Wasm syntax\n await require('prismjs@1.14.0/components/prism-wasm.js').catch(() => {});\n \n // load GitHub theme\n const style = html``;\n document.body.appendChild(style);\n \n return Prism;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"