@hpcc-js/Visualization

Compiler

Observable HQ Notebook Compiler and Interpreter

Minimal JSON Notebook

While the compiler supports and persists the entire Observable HQ Notebook (v3), it only needs a minimal subset to actually function:

interface Notebook {
    files: File[];
    nodes: Node[];
}

interface Node {
    id: number | string;
    mode: "js" | "md";
    value: string;
}

interface File {
    name: string;
    url: string;
    mime_type?: string;
}

# compile(notebook) => Promise<function> ยท <>

Hello World Example

First take a simple hello world notebook

const notebook = {
    files: [],
    nodes: [
        {
            id: 1,
            value: "md`# ${h} ${w}`",
            mode: "js"
        },
        {
            id: 2,
            value: "h = \"Hello\"",
            mode: "js"
        },
        {
            id: 3,
            value: "w = \"World\"",
            mode: "js"
        }
    ]
}

Then import the compiler and invoke it:

import { compile } from "@hpcc-js/observablehq-compiler";

const compiledNotebook = await compile(notebook);

To render it to a web page, simply follow the same steps as if you had downloaded a compiled version from ObservableHQ site:


import { Library, Runtime, Inspector } from "https://cdn.skypack.dev/@observablehq/runtime";

const placeholder = document.getElementById("placeholder");

const library = new Library();
const runtime = new Runtime(library);

compiledNotebook(runtime, name => {
    const div = document.createElement("div");
    placeholder.appendChild(div);
    return new Inspector(div);
});

Putting it all together:

To output the generated code simply call toString on the compiled function:

MoreExamples