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
npm i active-data --saveactive-data.modern.js@{{version}} for modern browsers only (see .browserlistrc)
active-data.esm.mjs@{{version}} import as esm module
<script src="//cdn.jsdelivr.net/npm/active-data@{{version}}/dist/active-data.js" integrity="{{#ssri}}../dist/active-data.js{{/ssri}}" crossorigin="anonymous">
</script>if you need only modern browsers then use script below:
<script src="//cdn.jsdelivr.net/npm/active-data@{{version}}/dist/active-data.modern.js" integrity="{{#ssri}}../dist/active-data.modern.js{{/ssri}}" 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@{{version}}/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
{{#file}}../tonic-example.js{{/file}}| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 49 | 12 | 18 | No support | 36 | 10 |
Supported on Node.js version 6 and higher