Public
Edited
Oct 17, 2022
Importers
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
statewalkerStore = import("@statewalker/store@0.4")
Insert cell
statewalkerStoreUi = import("@statewalker/store-ui@2")
Insert cell
formatMethod(newStore, { title: "`newStore` method" })
Insert cell
newStore = statewalkerStore.newStore
Insert cell
formatMethod(observeStore, { title: "`observeStore` method" })
Insert cell
observeStore = statewalkerStore.observeStore
Insert cell
Insert cell
formatMethod(sync, { title: "`sync` method" })
Insert cell
sync = statewalkerStore.sync
Insert cell
formatMethod(syncFields, { title: "`syncFields` method" })
Insert cell
syncFields = statewalkerStore.syncFields
Insert cell
Insert cell
function newInputsStore(...args) {
const store = newStore(...args);
statewalkerStore.extendStore(store);
statewalkerStoreUi.extendInputsStore(store);
return store;
}
Insert cell
function bindStoreView(store, view, keys, action) {
if (action === undefined) {
action = keys;
keys = view;
view = "div";
}
view = view || "div";
if (typeof view === "string") view = document.createElement(view);
else if (typeof view === "function") view = toDomNode(view());
if (typeof keys === "string") keys = keys.split(",");
const invalidation = getElementInvalidation(view);
let prev;
invalidation.then(
store.useAll(keys, (values) =>
replaceDomContent(view, (prev = toDomNode(action(values, view, prev))))
)
);
return view;
}
Insert cell
function bindStoreInput(store, key, input) {
if (typeof input === "function") input = input();
input = toDomNode(input);
const [get, set, use] = Array.isArray(key)
? [store.getAll, store.setAll, store.useAll]
: [store.get, store.set, store.use];
const mutex = newMutex();
const handler = () => mutex(() => set(key, input.value));
input.addEventListener("input", handler);
const invalidation = getElementInvalidation(input);
invalidation.then(() => input.removeEventListener("input", handler));
invalidation.then(use(key, (value) => mutex(() => (input.value = value))));
input.value = get(key);
return input;
}
Insert cell
function bindConfigurableStoreInput(store, configKey, valueKey, input) {
return bindStoreView(store, configKey, (config, parent, view) =>
bindStoreInput(store, valueKey, input(config, parent, view))
);
}
Insert cell
Insert cell
statewalkerUtils = import("@statewalker/utils@0.3")
Insert cell
newEventEmitter = statewalkerUtils.newEventEmitter
Insert cell
newMutex = statewalkerUtils.newMutex
Insert cell
newRegistry = statewalkerUtils.newRegistry
Insert cell
iterate = statewalkerUtils.iterate
Insert cell
observe = statewalkerUtils.observe
Insert cell
Insert cell
statewalkerDomUtils = import("@statewalker/utils-dom@0.3")
Insert cell
toDomNode = statewalkerDomUtils.toDomNode
Insert cell
replaceDomContent = statewalkerDomUtils.replaceDomContent
Insert cell
getElementInvalidation = statewalkerDomUtils.getElementInvalidation
Insert cell
bindView = statewalkerDomUtils.bindView
Insert cell
function syncInputs(...inputs) {
const [register, clean] = newRegistry();
const mutex = newMutex();
inputs.forEach((source) => {
const handler = (ev) =>
mutex(() => {
const value = source.value;
inputs.forEach((input) => {
if (input === source) return;
input.value = value;
});
});
source.addEventListener("input", handler);
register(() => source.removeEventListener("input", handler));
});
return clean;
}
Insert cell
Insert cell
import { toc } from "@nebrius/indented-toc"
Insert cell
function formatMethod(method, { title } = {}) {
title = title ? `\n### ${title}\n` : "";
return md`
${title}
\`\`\`javascript
${method.toString()}
\`\`\`
`;
}
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