Public
Edited
Apr 4, 2023
Importers
3 stars
Insert cell
Insert cell
Insert cell
example = assemblyscript.compileString(
`export function add(a: i32, b: i32): i32 { return a + b; }`
)
Insert cell
Insert cell
viewof broken = asc`
export default 42;
`
Insert cell
viewof hello = asc`
export function add(a: i32, b: i32): i32 {
return a + b;
}
`
Insert cell
{
const instance = await WebAssembly.instantiate(hello);
return instance.exports.add(1, 2);
}
Insert cell
hexDump(viewof hello.result.binary)
Insert cell
asc = async (...args) => {
const src = String.raw(...args);
const result = await assemblyscript.compileString(src);
if (result.error) {
throw new Error(result.stderr);
}
const module = await WebAssembly.compile(result.binary);
return Object.assign(hl`${result.text}`, { value: module, result });
}
Insert cell
hl`${example.text}`
Insert cell
isTemplate = (x) =>
Array.isArray(x) &&
Object.isFrozen(x) &&
Object.hasOwn(x, "raw") &&
Object.isFrozen(x.raw)
Insert cell
hl = (...args) => {
if (isTemplate(args[0])) {
// We're being used as a template tag
let txt = String.raw(...args);
return highlight(txt);
} else {
// We're being called to fill in some defaults
const [language] = args;
return (...args) => {
let txt = String.raw(...args);
return highlight(txt, language);
};
}
}
Insert cell
function highlight(code, language = null) {
let t = document.createTextNode(code);
let ele = htl.html`<code ${language ? { class: language } : {}}>${t}`;
hljs.highlightElement(ele);
return htl.html`<pre class=observablehq--md-pre>${ele}`;
}
Insert cell
hljs = import("https://esm.run/highlight.js").then((mod) => mod.default)
Insert cell
WebAssembly.compile(example.binary)
.then((mod) => WebAssembly.instantiate(mod))
.then((int) => int.exports.add(1, 2))
Insert cell
assemblyscript
Insert cell
viewof assemblyscript = htl.html`<iframe
${{
srcdoc: `
<script src="https://cdn.jsdelivr.net/npm/assemblyscript/dist/web.js"></script>
<script type=module>window.import=moduleName=>import(moduleName)</script>
<script type=module>import{version}from"assemblyscript/asc";document.body.textContent=version</script>`,
onload() {
this.value = this.contentWindow.import("assemblyscript/asc");
this.dispatchEvent(new CustomEvent("input"));
},
height: 48
}}>`
Insert cell
Insert cell
import { hexDump } from "@jleedev/hex-dump"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more