30:[] 2e:{"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"},{"id":41,"value":"adderModule.addTwo(1,2)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":173,"value":"factorialModule.fac(10)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"}],"files":"$W30","stdlib":"1","titling":"auto"}