Tech Lead at Taktile.
Formerly Firebase, Google
Composing viewofs with the view literalScaling User Interface DevelopmentDOM 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 ExamplesComposing views across time: viewroutineHypertext literal reconciliation with nanomorphResponsive gridimgChooserDraggable Sticky viewHowto import a React component (Chonky Example)
localStorageView: Non-invasive local persistance
viewof example1storage = localStorageView("example1")
localStorageView = (
key,
{ bindTo = undefined, defaultValue = null, json = false } = {}
) => {
const id = DOM.uid().id;
const ui = htl.html`<div class="observablehq--inspect" style="display:flex">
<code>localStorageView(<span class="observablehq--string">"${key}"</span>): </code><span id="${id}">${inspect(
localStorage.getItem(key) || defaultValue
)}</span>
</div>`;
const holder = ui.querySelector(`#${id}`);
const view = Object.defineProperty(ui, "value", {
get: () => {
const val = json
? JSON.parse(localStorage.getItem(key))
: localStorage.getItem(key);
return val || defaultValue;
},
set: (value) => {
value = json ? JSON.stringify(value) : value;
holder.removeChild(holder.firstChild);
holder.appendChild(inspect(localStorage.getItem(key) || defaultValue));
localStorage.setItem(key, value);
},
enumerable: true
});
if (bindTo) {
Inputs.bind(bindTo, view);
}
return view;
}
localStorageView.value
// Note you need to get these the right way round to have the page load work correctly
Inputs.bind(viewof example1, viewof example1storage)
viewof jsonView = localStorageView("json", {
json: true
})
jsonView
viewof jsonView.value
{
viewof jsonView.value = {
rnd: Math.random()
};
viewof jsonView.dispatchEvent(new Event("input", { bubbles: true }));
}
viewof example2 = Inputs.textarea()
localStorageView("example2", {
bindTo: viewof example2
})
viewof example3 = Inputs.bind(Inputs.textarea(), localStorageView("example3"))
//import { footer } from "@endpointservices/endpoint-services-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.
