/active-data

Reactive data manager

Primary LanguageJavaScriptMIT LicenseMIT

active-data

npm repository Build Status Coverage Status Known Vulnerabilities Bundle size

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

active-data.js@2.0.10

active-data.modern.js@2.0.10 for modern browsers only (see .browserlistrc)

active-data.esm.mjs@2.0.10 import as esm module

Or just load from CDN

<script src="//cdn.jsdelivr.net/npm/active-data@2.0.10/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/active-data@2.0.10/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/active-data@2.0.10/dist/active-data.esm.mjs";

window.data = observable({c: 1});
reaction(() => {
	document.body.innerHTML = `<button onclick="data.c++">${data.c}</button>`;
});
</script>

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