@seyacat/reactive
v1.0.12
Published
Reactive proxy object with subscribe tree features
Downloads
8
Readme
Reactive function returns proxy object with subcription system
Install
npm install @seyacat/rective
const {Reactive} = require("@seyacat/reactive");
const myReactive = Reactive();
Browser usage
<script src="https://seyacat.github.io/reactive/reactive.js"></script>
<script>
const myReactive = Reactive();
</script>
Examples
html examples
https://seyacat.github.io/reactive/test/basictest.html
https://seyacat.github.io/reactive/test/visualTest.html
Simple example
const games = Reactive();
//SUBSCRIBE to test property changes
games.subscribe("test", (data) => {
const { base, prop, path, pathValues, value, oldValue } = data;
assert.equal(prop, "test");
assert.equal(path.length, 1);
assert.equal(pathValues[0], 1);
assert.equal(value, 1);
assert.equal(oldValue, undefined);
});
games.test = 1;
Chain example
const games = Reactive(
{
level1: Reactive([Reactive({ level3: "OK" }, { prefix: "level2" })], {
prefix: "level1",
}),
},
{ prefix: "base" }
);
//SUBSCRIBE to every change in Reactive chain
games.subscribe(null, (data) => {
const { base, prop, path, pathValues, value, oldValue } = data;
assert.equal(prop, "level3");
assert.equal(JSON.stringify(path), JSON.stringify(["level1", 0, "level3"]));
assert.equal(value, "KO");
assert.equal(oldValue, "OK");
});
assert.equal(games.level1[0].level3, "OK");
games.level1[0].level3 = "KO";
More examples
please review in tests cases https://github.com/seyacat/reactive/blob/main/test/reactive.test.js