Public
Edited
Mar 15, 2023
Insert cell
Insert cell
{
const self = this || htl.html`<details>`;
self.replaceChildren(htl.html.fragment`
<summary>${Date.now()}
`/* htl.html.fragment */);
return self;
}
Insert cell
viewof request = {
const pending = [];
const cancel = invalidation.then((value) => ({ ok: false, value }));
const self = htl.html`<details>`;
const generator = Generators.queue((enqueue) => {
Object.assign(self, { enqueue });
});
setTimeout(async () => {
for (let promise of generator) {
promise = promise.then((value) => ({ ok: true, value }));
promise = Promise.race([promise, cancel]);
const { ok, value } = await promise;
if (!ok) return;
const { url, options, resolve, reject } = value;
const id = Symbol();

const ybutton = htl.html.fragment`
<button onclick=${() => {
resolve('accept: ' + url);
const index = pending.findIndex((d) => d.id === id);
pending.splice(index, 1);
RENDER();
}}>Accept</button>
`/* htl.html.fragment */;
const nbutton = htl.html.fragment`
<button onclick=${() => {
resolve('reject:' + url);
const index = pending.findIndex((d) => d.id === id);
pending.splice(index, 1);
RENDER();
}}>Reject</button>
`/* htl.html.fragment */;

pending.push({ id, url, options, ybutton, nbutton });
RENDER();
}
}, 0);
Object.defineProperties(self, {
value: {
get: () => (url, options={}) => new Promise((resolve, reject) => self.enqueue({ url, options, resolve, reject })),
},
});

return self;

function RENDER() {
self.replaceChildren(htl.html.fragment`
<summary>${pending.length} pending requests</summary>
<ol>
${pending.map(({ url, ybutton, nbutton }) => htl.html.fragment`
<li>${ybutton}${nbutton}${url}
`/* htl.html.fragment */)}
`/* htl.html.fragment */);
}
}
Insert cell
{
const ret = [];
for (const x of [1, 2, 3]) {
const response = await request(x);
ret.push(response);
yield ret;
}
return yield ret;
}
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