https://github.com/forceuser/active-data
Reactive data manager
https://github.com/forceuser/active-data
data-binding data-management es6-proxies javascript observable proxy proxy-object reactive-programming
Last synced: 8 months ago
JSON representation
Reactive data manager
- Host: GitHub
- URL: https://github.com/forceuser/active-data
- Owner: forceuser
- License: mit
- Created: 2017-05-17T08:46:22.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T13:16:29.000Z (about 3 years ago)
- Last Synced: 2025-05-21T18:17:02.473Z (9 months ago)
- Topics: data-binding, data-management, es6-proxies, javascript, observable, proxy, proxy-object, reactive-programming
- Language: JavaScript
- Homepage:
- Size: 3.76 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# active-data
[](https://www.npmjs.com/package/active-data)
[](https://travis-ci.org/forceuser/active-data)
[](https://codecov.io/gh/forceuser/active-data)
[](https://snyk.io/test/github/forceuser/active-data)
[](https://bundlephobia.com/result?p=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
```shell
npm i active-data --save
```
#### Or simply download \*.js file
[active-data.js@2.0.10](https://github.com/forceuser/active-data/releases/download/2.0.10/active-data.js)
[active-data.modern.js@2.0.10](https://github.com/forceuser/active-data/releases/download/2.0.10/active-data.modern.js) *for modern browsers only (see [.browserlistrc](https://github.com/forceuser/active-data/blob/master/.browserslistrc))*
[active-data.esm.mjs@2.0.10](https://github.com/forceuser/active-data/releases/download/2.0.10/active-data.esm.mjs) *import as esm module*
#### Or just load from CDN
```html
```
*if you need only modern browsers then use script below:*
```html
```
And then use **activeData** as global variable
```html
data = activeData.makeObservable({c: 1});
activeData.makeReaction(() => {
document.body.innerHTML = `<button onclick="data.c++">${data.c}</button>`;
});
```
*or if you want to import it as esm module*
```html
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>`;
});
```
## [Documentation](./DOCUMENTATION.md)
## Example
Run example with [runkit](https://npm.runkit.com/active-data)
```js
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,";
});
```
## 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