2b:null 2c:["$","title",null,{"children":"WASM Playground | Chaos Alchemist | Observable"}] 31:T517,/*{ if (navigator.serviceWorker && false) { //never work console.log("init service worker"); navigator.serviceWorker .register(await FileAttachment("offline_cacher.js").url(), { scope: "./" }) .then((reg) => { console.log("Registration succeeded. Scope is " + reg.scope); }) .catch((error) => { console.log("Serviceworker registration failed with " + error); }); navigator.serviceWorker.ready .then(() => { console.log("service worker ready"); compiler_worker.instance = new Worker(worker_script); compiler_worker.instance.addEventListener("error", (e) => console.log(e) ); const channel = new MessageChannel(); let port = channel.port1; port.addEventListener("message", (msg) => { console.log("msg" + msg); }); const remotePort = channel.port2; compiler_worker.instance.postMessage( { id: "constructor", data: remotePort }, [remotePort] ); compiler_worker.compile_run = function (src) { port.postMessage({ id: "compileLinkRun", data: src }); }; }) .catch((error) => { console.log("Serviceworker init failed with " + error); }); } }*/ { }32:T14d0,compiler = { // port from : https://github.com/binji/wasm-clang class WorkerAPI { constructor(work_script) { this.nextResponseId = 0; this.responseCBs = new Map(); this.worker = new Worker(work_script); const channel = new MessageChannel(); this.port = channel.port1; this.port.onmessage = this.onmessage.bind(this); const remotePort = channel.port2; this.worker.postMessage({ id: "constructor", data: remotePort }, [ remotePort ]); if (offscreenCanvas) this.port.postMessage({ id: "postCanvas", data: offscreenCanvas }, [ offscreenCanvas ]); } setShowTiming(value) { this.port.postMessage({ id: "setShowTiming", data: value }); } terminate() { this.worker.terminate(); } async runAsync(id, options) { const responseId = this.nextResponseId++; const responsePromise = new Promise((resolve, reject) => { this.responseCBs.set(responseId, { resolve, reject }); }); this.port.postMessage({ id, responseId, data: options }); return await responsePromise; } compileLinkRun(contents) { this.port.postMessage({ id: "compileLinkRun", data: contents }); } async compileToAssembly(src) { const input = "test.cc"; const output = "test.S"; const contents = src; //const triple = "x86_64"; const opt = "2"; return this.runAsync("compileToAssembly", { input, output, contents, triple, opt }); } onmessage(event) { switch (event.data.id) { case "write": console.log(event.data.data); //TODO: find a proper way to dispatch event document.dispatchEvent( new CustomEvent("log", { detail: event.data }) ); break; case "runAsync": { const responseId = event.data.responseId; const promise = this.responseCBs.get(responseId); if (promise) { this.responseCBs.delete(responseId); promise.resolve(event.data.data); } break; } } } } let compiler_worker = null; let urls = new Map(); return Promise.all([ FileAttachment("memfs").url(), FileAttachment("clang").url(), FileAttachment("lld").url(), FileAttachment("shared.js").url(), FileAttachment("sysroot.tar").url() ]) .then(([memfs, clang, lld, worker_js, sysroot]) => { urls.set("memfs", memfs); urls.set("clang", clang); urls.set("lld", lld); urls.set("shared.js", worker_js); urls.set("sysroot.tar", sysroot); }) .then(() => { const blob = new Blob( [ ` let orig_fetch = self.fetch; self.fetch = async function(url){ console.log("fetching " + url) if(url == 'memfs'){ return orig_fetch('${urls.get("memfs")}') }else if(url == 'clang'){ return orig_fetch('${urls.get("clang")}') }else if(url == 'lld'){ return orig_fetch('${urls.get("lld")}') }else if(url == 'sysroot.tar'){ return orig_fetch('${urls.get("sysroot.tar")}') }else{ return orig_fetch(url) } } importScripts("${urls.get("shared.js")}"); let api; let port; let canvas; let ctx2d; const apiOptions = { async readBuffer(filename) { const response = await fetch(filename); return response.arrayBuffer(); }, async compileStreaming(filename) { // TODO: make compileStreaming work. It needs the server to use the // application/wasm mimetype. if (false && WebAssembly.compileStreaming) { return WebAssembly.compileStreaming(fetch(filename)); } else { const response = await fetch(filename); return WebAssembly.compile(await response.arrayBuffer()); } }, hostWrite(s) { port.postMessage({id : 'write', data : s}); } }; let currentApp = null; const onAnyMessage = async event => { switch (event.data.id) { case 'constructor': port = event.data.data; port.onmessage = onAnyMessage; api = new API(apiOptions); break; case 'setShowTiming': api.showTiming = event.data.data; break; case 'compileToAssembly': { const responseId = event.data.responseId; let output = null; let transferList; try { output = await api.compileToAssembly(event.data.data); } finally { port.postMessage({id : 'runAsync', responseId, data : output}, transferList); } break; } case 'compileLinkRun': if (currentApp) { console.log('First, disallowing rAF from previous app.'); // Stop running rAF on the previous app, if any. currentApp.allowRequestAnimationFrame = false; } currentApp = await api.compileLinkRun(event.data.data); console.log("finished compileLinkRun. currentApp = " + currentApp); break; case 'postCanvas': canvas = event.data.data; ctx2d = canvas.getContext('2d'); break; } }; self.onmessage = onAnyMessage; ` ], { type: "text/javascript" } ); const script = URL.createObjectURL(blob); //blob.text().then((t) => console.log(t)); //invalidation.then(() => URL.revokeObjectURL(script)); compiler_worker = new WorkerAPI(script); }) .then(() => compiler_worker) .catch(console.error); }33:[{"id":"85f822c0ef373336b6e5865fde18099670d866a4071ef02c0e74373fe0af8d291fba8f332f44cb8d0e242e472e8ae46db884b9b7143d9e727b296385617a7f50","href":"https://static.observableusercontent.com/files/85f822c0ef373336b6e5865fde18099670d866a4071ef02c0e74373fe0af8d291fba8f332f44cb8d0e242e472e8ae46db884b9b7143d9e727b296385617a7f50","name":"shared.js","type":"application/javascript","lastModified":1707036224491.118,"size":23973},{"id":"f28adec579ab437c139069fb392ab0a56b90c2d567fe757316f2a309c8f75eb5131cdd4f76627f4dfcf4304f5434f7d62ecff8d3264aff64c1d3c572860acbc5","href":"https://static.observableusercontent.com/files/f28adec579ab437c139069fb392ab0a56b90c2d567fe757316f2a309c8f75eb5131cdd4f76627f4dfcf4304f5434f7d62ecff8d3264aff64c1d3c572860acbc5","name":"clang","type":"application/wasm","lastModified":1707032404489.228,"size":31214472},{"id":"760e520243bba52808311fbf9a60ad5c3e7458579fd0455975af6b6cebb1db47b8595ba704cfd82dfe1fb520bfa00b5e48af9c5dc792a68da03977905358548d","href":"https://static.observableusercontent.com/files/760e520243bba52808311fbf9a60ad5c3e7458579fd0455975af6b6cebb1db47b8595ba704cfd82dfe1fb520bfa00b5e48af9c5dc792a68da03977905358548d","name":"lld","type":"application/wasm","lastModified":1707032406173.297,"size":19490094},{"id":"1bb11c383dd49c6c56532243a0d3cb00565b077ca4e2cab093756df7e2430dd8caa16aeccee3e489e8ef954620491c9bc41caf8170491e4bd56e461d0a758c21","href":"https://static.observableusercontent.com/files/1bb11c383dd49c6c56532243a0d3cb00565b077ca4e2cab093756df7e2430dd8caa16aeccee3e489e8ef954620491c9bc41caf8170491e4bd56e461d0a758c21","name":"memfs","type":"application/wasm","lastModified":1707032406203.195,"size":345442},{"id":"50cad5f5f0fb5694bf7a45dcebeb4875619d47a9c776f3bb4df0311b616d341e525e8145fd5e65926f7c361913ebfc3411b076326c90af4e0d9d5a67b0ecdb8b","href":"https://static.observableusercontent.com/files/50cad5f5f0fb5694bf7a45dcebeb4875619d47a9c776f3bb4df0311b616d341e525e8145fd5e65926f7c361913ebfc3411b076326c90af4e0d9d5a67b0ecdb8b","name":"sysroot.tar","type":"application/x-tar","lastModified":1707050661652.93,"size":9297920}] 2f:{"id":"9f83c2a3c6c9e40c","slug":"wasm-playground","title":"WASM Playground","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-02-04T03:19:15.038Z","update_time":"$D2024-02-05T15:36:42.294Z","view_time":null,"first_public_time":"$D2024-02-05T04:50:52.062Z","fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"f08015db4d173040","login":"chaosalchemist","name":"Chaos Alchemist","avatar_url":"https://avatars-next.observableusercontent.com/29739a1b68a530a976fc61af325093d3fc1fccf4067ed4cfee2264934c2de71b","tier":"starter_2024"},"version":441,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c29d0dcf18c494d3","login":"chaosalchemist","name":"Chaos Alchemist","avatar_url":"https://avatars-next.observableusercontent.com/29739a1b68a530a976fc61af325093d3fc1fccf4067ed4cfee2264934c2de71b","tier":null}],"members":[{"type":"individual","id":"c29d0dcf18c494d3","login":"chaosalchemist","name":"Chaos Alchemist","avatar_url":"https://avatars-next.observableusercontent.com/29739a1b68a530a976fc61af325093d3fc1fccf4067ed4cfee2264934c2de71b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"WASM Playground","cells":[{"id":0,"value":"# WASM Playground\nhttps://en.wikipedia.org/wiki/WebAssembly \nhttps://developer.mozilla.org/en-US/docs/WebAssembly\n\n## Toolchains\n### Runtime\nWasmer, Wasmtime, [more](https://v8.dev/blog/emscripten-standalone-wasm#running-in-wasm-runtimes)\n### Compiler\n[emscripten](https://github.com/emscripten-core/emscripten) \n[run emscripten on the web](https://github.com/emscripten-core/emscripten/issues/6432) : [clang-js](https://github.com/kripken/clang-js), [Emception](https://github.com/jprendes/emception), [wasm-clang](https://github.com/binji/wasm-clang)\n### Misc\nPrefer writing wasm by hand? -> [wasmtoy](https://c0de517e.com/004_wasmtoy/main.html)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"viewof triple = Inputs.text({ value: \"x86_64\", submit: true }) //_{---","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"viewof asm = compile_and_disasm`\n\nint fac(int n) {\n if (n < 1) return 1; \n return n * fac(n - 1); \n}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"canvas = DOM.canvas(960, 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"offscreenCanvas = canvas.transferControlToOffscreen &&\n canvas.transferControlToOffscreen();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"compile_and_run`\n// re-run it if error occurs\n#include \n#include \n#include \n\nconst int w = 960;\nconst int h = 500; \nCanvas c{w, h};\nImageData image{w, h};\n\nint main() {\n for (int y = 0; y < h; ++y) {\n for (int x = 0; x < w; ++x) {\n image.data[y * w + x] = RGB(x | y, 0, 0);\n }\n }\n image.commit();\n c.putImageData(image, 0, 0);\n\n const char* msg = \"x + y\";\n c.setFillStyle(\"white\");\n c.setFont(\"bold 200px sans\");\n c.fillText(msg, (w - c.measureText(msg)) / 2, (h + 100) / 2);\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"function compile_and_disasm(src) {\n let readStr = (u8, o, len = -1) => {\n let str = \"\";\n let end = u8.length;\n if (len != -1) end = o + len;\n for (let i = o; i < end && u8[i] != 0; ++i)\n str += String.fromCharCode(u8[i]);\n return str;\n };\n return Generators.observe((change) => {\n compiler.compileToAssembly(src.join(\" \")).then((asm) => {\n if (asm) {\n const u8 = new Uint8Array(asm);\n change(ansi_to_html(readStr(u8, 0, u8.length)));\n }\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"async function compile_to_asm(src) {\n let asm = await compiler.compileToAssembly(src.join(\" \"));\n\n let readStr = (u8, o, len = -1) => {\n let str = \"\";\n let end = u8.length;\n if (len != -1) end = o + len;\n for (let i = o; i < end && u8[i] != 0; ++i)\n str += String.fromCharCode(u8[i]);\n return str;\n };\n\n if (asm) {\n const u8 = new Uint8Array(asm);\n return ansi_to_html(readStr(u8, 0, u8.length));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"function compile_and_run(src) {\n let job = Generators.queue((change) => {\n let on_msg = (e) => {\n change(ansi_to_html(e.detail.data));\n };\n document.addEventListener(\"log\", on_msg);\n compiler.compileLinkRun(src.join(\" \"));\n\n return () => document.removeEventListener(\"log\", on_msg);\n });\n return job;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"ansi_to_html = {\n let convertor = new Ansi2Html();\n return function (ansitext) {\n // ansi-to-html doesn't reset colors by default, add wrapper div\n // with default colors\n let wrapper = convertor.toHtml(\"\\x1b[39;49mxxx\").replace(/span/g, \"div\");\n let [start, end] = wrapper.split(\"xxx\");\n start = start.replace(\"backg\", \"padding:2pt; backg\");\n let converted = convertor.toHtml(ansitext);\n return html`${start}${converted}${end}`;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"Ansi2Html = require(\"https://bundle.run/ansi-to-html@0.7.1\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}}
30:"$2f:body"}