Public
Edited
Jan 17, 2024
firstName = signia.atom("firstName", "David")
lastName = signia.atom("lastName", "Bowie")
fullName = signia.computed("fullName", () => {
return `${firstName.value} ${lastName.value}`;
})
firstName.set("John")
firstName.update((value) => value.toUpperCase())
signia.transact((rollback) => {
firstName.set("John");
lastName.set("Lennon");
rollback();
})
fullName.value
firstName.lastChangedEpoch
fullName.lastChangedEpoch
// [[{op:"replace",path:[1],value:"Abhiti"}]]
data = {
immer.enablePatches();
const names = signia.atom("names", ["Bob", "Alice"], {
historyLength: 10,
computeDiff: (prev, next) => {
console.log(prev, next);
return immer.produceWithPatches(prev, (draft) => {
return next;
})[1];
}
});
const startEpoch = names.lastChangedEpoch;
names.set(["Bob", "Abhiti"]);
return JSON.stringify(names.getDiffSince(startEpoch));
}
{
const prev = ["bob", "alice"];
const next = ["bob", "abhiti"];
immer.enablePatches();
const diffs = immer.produceWithPatches(prev, (draft) => next);
return diffs.slice(1).map((it) => JSON.stringify(it).replaceAll('"', "'"));
}
{
const prev = ["bob", "alice"];
const next = ["bob", "abhiti"];
const diffs = fastArrayDiff.getPatch(prev, next);
return diffs.map((it) => JSON.stringify(it).replaceAll('"', "'"));
}
fastArrayDiff = import("https://cdn.jsdelivr.net/npm/fast-array-diff/+esm")
immerVersion = "7.0.15" // latest: 10.0.3
immer = import(
`https://cdn.jsdelivr.net/npm/immer@9.0.21/dist/immer.cjs.development.js/+esm`
)
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.
