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.10for modern browsers only (see .browserlistrc)

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

Or just load from CDN

<scriptsrc="//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:

<scriptsrc="//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

<scripttype="module">import{defaultasactiveData,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

constad=require("active-data");ad.setOptions({immediateReaction: true,// make recalculations for each change});constdata=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 enddata.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