Tech Lead at Taktile.
Formerly Firebase, Google
Composing viewofs with the view literalScaling User Interface DevelopmentlocalStorageView: Non-invasive local persistanceDOM viewurlQueryFieldView: Non-invasive URL field persistenceDesign Guidelines and Linter for Reusable UI ComponentsSqueezing more Juice out of UI librariesReversible attachmentGlobally Synchronized ViewsTabbed Pane ViewMultiplayer Cursors👋 Hello, javascript-state-machine ⨯ PlotVertical SlidersDraggable LocalFile fileInputData EditorUI AnimationView Composition ExamplesHypertext literal reconciliation with nanomorphResponsive gridimgChooserDraggable Sticky viewHowto import a React component (Chonky Example)
Composing views across time: viewroutine
mutable nameOfThing = undefined
viewof newName = Inputs.text({
label: "please enter the name of the thing to create",
submit: true,
minlength: 1
})
sideEffect = {
yield md`<mark>updating`;
await new Promise(r => setTimeout(r, 1000));
mutable nameOfThing = newName;
yield md`<mark>updated!!!`;
}
function viewroutine(generator) {
let current;
const holder = Object.defineProperty(
document.createElement("span"),
"value",
{
get: () => current?.value,
set: (v) => (current ? (current.value = v) : null),
enumerable: true
}
);
new Promise(async () => {
const iterator = generator();
const n = await iterator.next();
let { done, value } = n;
while (!done) {
if (value instanceof Event) {
holder.dispatchEvent(value);
} else {
current = value;
if (holder.firstChild) holder.removeChild(holder.firstChild);
if (value) {
holder.appendChild(value);
}
}
({ done, value } = await iterator.next());
}
holder.remove();
});
return holder;
}
viewof example1 = viewroutine(async function*() {
let newName = undefined;
while (true) {
newName = yield* ask(
Inputs.text({
label: "please enter the name of the thing to create",
minlength: 1,
value: newName,
submit: true
})
);
yield md`<mark>updating to ${newName}`; // Note we can remember newName
await new Promise(r => setTimeout(r, 1000)); // Mock async action
yield* ask(htl.html`${md`<mark>updated`} ${Inputs.button("Again?")}`);
}
})
example1
choice
viewof choice = viewroutine(async function*() {
while (true) {
const choice = yield* choose();
if (choice == 'square') yield* flashSquare();
if (choice == 'star') yield* flashStar();
}
})
import { footer } from "@tomlarkworthy/footer"
footer
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.
