Software engineer, available for freelance work! • he/him/his
Published
Edited
Jul 30, 2022
1 fork
Importers
19 stars
interpret = new Interpreter()
{
const target = html`<div>`;
const runtime = new Runtime();
const main = runtime.module();
const observer = Inspector.into(target);
interpret.module(source, main, observer);
invalidation.then(() => runtime.dispose());
return target;
}
compile = new Compiler()
compile.module(source)
compile.module(circleSource)
compile.module(circleSource, { treeShake: ["circle"] })
cc = require("@alex.garcia/unofficial-observablehq-compiler@v0.6.0-alpha.6")
Compiler = cc.Compiler
Interpreter = cc.Interpreter
parser = cc.parser
r = require("@observablehq/runtime")
Inspector = r.Inspector
Runtime = r.Runtime
Library = r.Library
inputCompiledTreeShaked = compile.module(inputsSource, { treeShake: ["Table"] })
inputCompiledBefore = compile.module(inputsSource)
prettyBytes = (await import('https://cdn.skypack.dev/pretty-bytes')).default
timechartSource = timechartNotebook.nodes.map(d => d.value).join("\n\n")
ojs = timechartNotebook.nodes.map(d => d.value).join("\n\n")
x = timechartNotebook.nodes.map(d => parser.parseCell(d.value))
compiled = {
const compile = new Compiler();
return {
default: compile.module(ojs),
treeShaked: compile.module(ojs, {
treeShake: ["TimeChart", "TimeAxis"]
})
};
}
inputsSource = inputsNotebook.nodes.map(d => d.value).join("\n")
inputs = {
const src = inputsNotebook.nodes.map(d => d.value).join("\n");
const compile = new Compiler();
return {
default: compile.module(src),
treeShaked: compile.module(src, {
treeShake: ["Table"]
})
};
}
url = (source, invalidation) => {
const url = URL.createObjectURL(
new Blob([source], { type: "text/javascript" })
);
invalidation.then(() => URL.revokeObjectURL(url));
return url;
}
render(
(await import(url(compiled.default, invalidation))).default,
invalidation
)
render(
(await import(url(compiled.treeShaked, invalidation))).default,
invalidation
)
function render(define, invalidation) {
const container = html`<div style="border: 2px solid #ccc; max-height: 450px; overflow: auto;">
<div style="position: absolute; top: 0; left: 0; background-color: #ccc; font-weight: 700; padding: .02rem .5rem; border-radius: 0 0 .5rem 0; font-family: monospace; font-size: .875rem; z-index: 100;">RENDERED NOTEBOOK</div>
<div class="target"></div>
</div>`;
const target = container.querySelector(".target");
const observer = Inspector.into(target);
const runtime = new Runtime();
const main = runtime.module(define, observer);
invalidation.then(() => runtime.dispose());
return container;
}
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.
