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
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
< 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 >
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, " ;
} ) ;
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
49
12
18
No support 36
10
Supported on Node.js version 6 and higher
https://kangax.github.io/compat-table/es6/#test-Proxy
http://caniuse.com/#feat=proxy
