active-data

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

Installation

Install as npm package

npm i active-data --save

Or simply download *.js file

[email protected]

[email protected] for modern browsers only (see .browserlistrc)

[email protected] import as esm module

Or just load from CDN

<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>

Documentation

Example

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,";
});

Compatibility

Browsers

| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | | ------ | ---- | ------- | ----------------- | ----- | ------ | | 49 | 12 | 18 | No support | 36 | 10 |

Servers/runtimes

Supported on Node.js version 6 and higher

Proxy compatibility tables

https://kangax.github.io/compat-table/es6/#test-Proxy

http://caniuse.com/#feat=proxy