`we can create single line strings`
`but they can also
stretch over multiple lines`
`we can also interpolate an ${"ARBITRARY EXPRESSION".toLowerCase()} into these template literals`
function ourTagFunction(string, ...args) {
// can capture interpolation data...
// ...and return arbitrary data
return { string, args };
}
ourTagFunction`can intercept ${"arbitrary"} interpolations of ${"expression"}s and return arbitrary data`
dot`digraph { "parse GraphViz DOT" -> "return SVG"; }`
// this implements a fullblown HTML parser (https://github.com/observablehq/htl)
htl.html`
<form>
<label>
${["parse HTML", "and return HTML elements"].map((entry) => htl.html`<button>${entry}</button>`)}
</form>
`
tex`\text{or parse} ~ \TeX \wedge \text{return HTML elements}`
xs[Symbol.iterator]()
{
const iter = xs[Symbol.iterator]();
return [iter.next(), iter.next(), iter.next(), iter.next()];
}
function* generator() {
yield 1;
yield 2;
yield 3;
return "return";
}
{
const gen = generator();
return [gen.next(), gen.next(), gen.next(), gen.next()];
}
function* echo() {
/* resume next(0) -> */
const a = /* resume next(1) <- suspension point */ yield undefined;
const b = /* resume next(2) <- suspension point */ yield a;
const c = /* resume next(3) <- suspension point */ yield b;
return { a, b, c };
}
{
const gen = echo();
return [gen.next(0), gen.next(1), gen.next(2), gen.next(3) ];
}
[...generator()]
function* anotherGenerator() {
yield* [4, 5, 6];
}
[...anotherGenerator()]
function* yetAnotherGenerator() {
yield "prior";
const lvalue = yield* generator();
yield "interleave";
yield lvalue;
}
[...yetAnotherGenerator()]
function* asyncGenerator() {
yield 1;
yield Promises.delay(2000).then(() => 2);
yield Promises.delay(3000).then(() => 3);
yield 4;
yield Promises.delay(5000).then(() => 5);
}
asyncGenerator()
[...asyncGenerator()]
async function* accumulate(g) {
const xs = [];
for await (const v of g) {
xs.push(v);
yield xs;
}
}
accumulate(asyncGenerator())
async function* paginateGithubAPI(url, pageLimit) {
do {
const result = await fetch(url);
yield result.json();
const linkHeader = result.headers.get("link");
if (!linkHeader) return;
url = linkHeader.match(captureNextPageLink)[1];
} while (--pageLimit);
}
pages = accumulate(
paginateGithubAPI(
"https://api.github.com/orgs/github/repos",
/*pageLimit=*/ 10
)
)
function makeChannel() {
let input;
// https://github.com/observablehq/stdlib/blob/main/src/generators/observe.js
const output = Generators.observe((change) => {
input = change;
});
return { input, output };
}
chan = makeChannel()
chan.input(Date.now())
accumulate(chan.output)
target = ({
key: "value"
})
handler = ({
get(target, prop) {
return { target, prop };
}
})
debugProxy = new Proxy(target, handler)
debugProxy.key
debugProxy.arbitrary
validator = ({
set(obj, prop, value) {
if (prop === "age") {
if (!Number.isInteger(value)) {
// Indicate failure
return false;
}
if (value > 200) {
throw new RangeError("The age seems invalid");
}
}
// The default behavior to store the value
obj[prop] = value;
// Indicate success
return true;
}
})
user = new Proxy({ age: 30 }, validator)
(user.age = 53)
(user.age = "young")
(user.age = 201)
function range(start, finish) {
function* go() {
for (; start < finish; ++start) {
yield start;
}
return;
}
const handler = {
has(target, key) {
return start <= key && key < finish;
}
};
return new Proxy(go(), handler);
}
5 in range(1, 10)
Promises.delay(1000).then(() => 1)
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.
