The avatar for @tomlarkworthy
Tom Larkworthy
Tech Lead at Taktile. Formerly Firebase, Google
Published
ui
Edited
Aug 12, 2022
Importers
19 stars
3
ui
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 attachment
Globally Synchronized Views
Tabbed Pane ViewMultiplayer Cursors👋 Hello, javascript-state-machine ⨯ PlotVertical SlidersDraggable LocalFile fileInputData EditorUI AnimationView Composition ExamplesComposing views across time: viewroutineHypertext literal reconciliation with nanomorphResponsive gridimgChooserDraggable Sticky viewHowto import a React component (Chonky Example)
Insert cell
Insert cell
Insert cell
Insert cell
share("range", viewof range)
Insert cell
Insert cell
Insert cell
async function share(
key, // Key is notebook scoped storage location to use (typically unique within a notebook)
view // View is a viewof component like Range. Should be writable
) {
if (typeof key !== 'string')
throw new Error("First arg of share, 'key', must be a string");
if (view.value === undefined)
throw new Error("Sencond arg of share, 'view', must be a viewof");

const dbRef = db.ref(
`/shareinput/${FKEY.encode(
html`<a href>`.href.split('?')[0]
)}/${FKEY.encode(key)}`
);

const inputListener = e => {
// update the value in firebase only if the user triggered it via user interaction
if (e.isTrusted || e.isUser) dbRef.set(view.value);
};

const dbListener = snapshot => {
const val = snapshot.val();
if (val) {
// val can be null when first used
view.value = val;
view.dispatchEvent(new Event('input'));
}
};

view.addEventListener("input", inputListener);
dbRef.on('value', dbListener);

invalidation.then(() => {
view.removeEventListener("input", inputListener);
dbRef.off('value', dbListener);
});

return html`<a target="_blank" href="${dbRef.toString() +
".json"}">${key}</a>`;
}
Insert cell
Insert cell
viewof differentRange = html`<input type="range">`
Insert cell
share("range", viewof differentRange)
Insert cell
Insert cell
Insert cell
share("sliders", viewof sliders)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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