Active-data NPM

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

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>

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