Published
Edited
Jun 12, 2022
1 star
{
const renderer = newNotebookRenderer();
const { id } = DOM.uid();
const element = htl.html`<div>
<div id="${id}">
<div class="title" data-cell="hello">Loading the "hello" cell...</div>
<div class="body">
This is the <span class="name" data-cell="name"></span>!
</div>
</div>
<style>
#${id} {
border: 3px solid silver;
border-radius: 0.5em;
margin: auto;
max-width: 20em;
}
#${id} .title {
border-bottom: 1px solid silver;
padding: 0.5em;
}
#${id} .body {
padding: 1.5em 0.5em;
}
#${id} .name {
color: red;
}
</style>
</div>`;
// This method call will load the application and attach the data cells to the template element:
return renderer({
notebookUrl,
element
});
}
{
const { id } = DOM.uid();
const element = htl.html`<div >
<div id="${id}">
<div class="title" data-cell="hello">Loading the "hello" cell...</div>
<div class="body">
This is the <span class="name" data-cell="name"></span>!
</div>
</div>
<style>
#${id} {
border: 3px solid silver;
border-radius: 0.5em;
margin: auto;
max-width: 20em;
}
#${id} .title {
border-bottom: 1px solid silver;
padding: 0.5em;
}
#${id} .body {
padding: 1.5em 0.5em;
}
#${id} .name {
color: orange ;
}
</style>
</div>`;
const renderer = newNotebookRenderer();
return renderer({
notebookUrl,
element,
data: {
// We use a promise to re-define value because the strings are interpreted as URL
// containing data to load
name: Promise.resolve("John Smith")
}
});
}
{
const renderer = newNotebookRenderer();
const { id } = DOM.uid();
const element = htl.html`<div >
<div id="${id}">
<div class="title" data-cell="hello">Loading the "hello" cell...</div>
<div class="body">
This is the <span class="name" data-cell="name"></span>!
</div>
</div>
<style>
#${id} {
border: 3px solid silver;
border-radius: 0.5em;
margin: auto;
max-width: 20em;
}
#${id} .title {
border-bottom: 1px solid silver;
padding: 0.5em;
}
#${id} .body {
padding: 1.5em 0.5em;
}
#${id} .name {
color: navy;
}
</style>
</div>`;
// This notebook function creates "manually" individual cells:
const notebook = (runtime, observer) => {
const main = runtime.module();
async function* generateName(Promises, invalidation) {
let stop = false;
invalidation.then(() => (stop = true));
const stamp = Date.now();
for (let i = 0; !stop && i < 100; i++) {
yield "World-" + i;
// console.log(">", stamp, i);
await Promises.delay(100);
}
}
main
.variable(observer("name"))
.define("name", ["Promises", "invalidation"], generateName);
function renderName(md, name) {
return md`# Hello ${name}`;
}
main
.variable(observer("hello"))
.define("hello", ["md", "name"], renderName);
return main;
};
// This method call will load the application and attach the data cells to the template element:
return renderer({
notebook,
element,
invalidation
});
}
import { newNotebookRenderer } from "@kotelnikov/notebook-renderer-method"
import { toc } from "@nebrius/indented-toc"
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.
