Tiny and convenient reactive data manager, inspired by MobX. Automatically detects associated data and performs updates to your views or everything dependent on that data when it changes. Implemented with javascript Proxy objects
npm i active-data --save[email protected] for modern browsers only (see .browserlistrc)
[email protected] import as esm module
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/active-data.js" integrity="sha512-0fQ8PrMb8ndNXlnM/h8+6a0+WArgy6BT2kHi7aKJ19RgE1FPnNxrU0/xp/SFok6DDtyJIKz2GLyNr9+3vF5xqg==" crossorigin="anonymous">
</script>if you need only modern browsers then use script below:
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/active-data.modern.js" integrity="sha512-oui6N+Ib9SHIK4w4/vSa7qACemjg5uY0fPSLDIGIZcqBwFqZdGbSWQsgGqaBnjEP7inI3Vxp700gj1ddwAkoBw==" crossorigin="anonymous">
</script>And then use activeData as global variable
<script>
data = activeData.makeObservable({c: 1});
activeData.makeReaction(() => {
document.body.innerHTML = `<button onclick="data.c++">${data.c}</button>`;
});
</script>or if you want to import it as esm module
<script type="module">
import {default as activeData, observable, reaction} from "//cdn.jsdelivr.net/npm/[email protected]/dist/active-data.esm.mjs";
window.data = observable({c: 1});
reaction(() => {
document.body.innerHTML = `<button onclick="data.c++">${data.c}</button>`;
});
</script>Run example with runkit
const ad = require("active-data");
ad.setOptions({
immediateReaction: true, // make recalculations for each change
});
const data = ad.makeObservable({
welcomeMessage: "Hello,",
firstName: "Luke",
lastName: "Skywalker",
});
ad.makeComputed(data, "fullName", self => `${self.firstName} ${self.lastName}`);
ad.makeReaction(() => {
console.log(data.welcomeMessage + " " + data.fullName);
});
// "Hello, Luke Skywalker" will be printed immediately (can be configured)
data.firstName = "Leia"; // will print "Hello, Leia Skywalker"
ad.run(() => {
// group changes together and run reaction functions only at the end
data.firstName = "Anakin";
data.welcomeMessage = "Welcome to dark side,";
});| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 49 | 12 | 18 | No support | 36 | 10 |
Supported on Node.js version 6 and higher