Published
Edited
Sep 12, 2020
1 star
o = ({a: 10, b: {c: 20, d: 2}} )
o.a += 1
o
deepObserve.show()
deepObserve.update(o, x => {
x.a += 1;
})
deepObserve = {
const elt = document.createElement("div");
function show(test = () => true, map = x => x) {
return Generators.observe(notify => {
function messaged(event) {
console.log(event);
console.log(event.detail);
const message = event.detail;
if (test(message)) {
notify(map(message));
}
}
elt.addEventListener("message", messaged);
return () => elt.removeEventListener("message", messaged);
});
}
function update(obj, modif) {
modif(obj);
elt.dispatchEvent(new CustomEvent("message", { detail: obj }));
}
return { show, update };
}
o2 = ({ a: 10, b: { c: 20, d: 2 } })
o2
a + 1
// define reactive property
mutable a = o2.a
// run several times to see mutable "a" update
{
o2.a += 1;
// update reactive property
mutable a = o2.a;
}
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.
