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
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 ,
} ) ;
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 ) ;
} ) ;
data . firstName = " Leia " ;
ad . run ( ( ) => {
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