Purescript, Local First
viewof fakeSource = Inputs.input()
// set helper
function set(input, value) {
input.value = value;
// in this case firing this event seems to be interfering with localStorageView
input.dispatchEvent(new Event("input", {bubbles: true}));
}
Inputs.button([
["Set to example", () => set(viewof fakeSource, 'example')],
["Set to ''", () => set(viewof fakeSource, '')]
])
viewof inputView = Inputs.textarea()
viewof inputStorage = localStorageView("inputStorage", {defaultValue: "default"})
Inputs.bind(viewof inputView, viewof fakeSource)
// according to the docs this should be this way round to have the page load work correctly
// but it yields this error:
// Uncaught TypeError: e.closest is not a function
// at inputs.min.js:40:1444
Inputs.bind(viewof fakeSource, viewof inputStorage)
// The other way round doesn't error, but indeed it doesn't load the default value on page load.
// Inputs.bind(viewof inputStorage, viewof fakeSource)
viewof example1 = Inputs.range()
viewof example1storage = localStorageView("example1")
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.
