{"id":28285355,"url":"https://github.com/forceuser/active-data","last_synced_at":"2025-06-16T07:31:11.632Z","repository":{"id":21004646,"uuid":"91554117","full_name":"forceuser/active-data","owner":"forceuser","description":"Reactive data manager","archived":false,"fork":false,"pushed_at":"2022-12-09T13:16:29.000Z","size":3939,"stargazers_count":0,"open_issues_count":28,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-21T18:17:02.473Z","etag":null,"topics":["data-binding","data-management","es6-proxies","javascript","observable","proxy","proxy-object","reactive-programming"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/forceuser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-17T08:46:22.000Z","updated_at":"2023-09-08T17:25:08.000Z","dependencies_parsed_at":"2023-01-11T21:03:13.229Z","dependency_job_id":null,"html_url":"https://github.com/forceuser/active-data","commit_stats":null,"previous_names":[],"tags_count":68,"template":false,"template_full_name":null,"purl":"pkg:github/forceuser/active-data","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forceuser%2Factive-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forceuser%2Factive-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forceuser%2Factive-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forceuser%2Factive-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forceuser","download_url":"https://codeload.github.com/forceuser/active-data/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forceuser%2Factive-data/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260119294,"owners_count":22961505,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-binding","data-management","es6-proxies","javascript","observable","proxy","proxy-object","reactive-programming"],"created_at":"2025-05-21T18:17:02.327Z","updated_at":"2025-06-16T07:31:11.624Z","avatar_url":"https://github.com/forceuser.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# active-data\n\n[![npm repository](https://img.shields.io/npm/v/active-data.svg)](https://www.npmjs.com/package/active-data)\n[![Build Status](https://travis-ci.org/forceuser/active-data.svg?branch=master)](https://travis-ci.org/forceuser/active-data)\n[![Coverage Status](https://img.shields.io/codecov/c/github/forceuser/active-data/master.svg)](https://codecov.io/gh/forceuser/active-data)\n[![Known Vulnerabilities](https://snyk.io/test/github/forceuser/active-data/badge.svg)](https://snyk.io/test/github/forceuser/active-data)\n[![Bundle size](https://badgen.net/bundlephobia/minzip/active-data)](https://bundlephobia.com/result?p=active-data)\n\nTiny 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\n\n## Installation\n\n#### Install as npm package\n\n```shell\nnpm i active-data --save\n```\n\n#### Or simply download \\*.js file\n\n[active-data.js@2.0.10](https://github.com/forceuser/active-data/releases/download/2.0.10/active-data.js)\n\n[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))*\n\n[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*\n\n#### Or just load from CDN\n\n```html\n\u003cscript 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\"\u003e\n\u003c/script\u003e\n```\n\n*if you need only modern browsers then use script below:*\n\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/active-data@2.0.10/dist/active-data.modern.js\" integrity=\"sha512-oui6N+Ib9SHIK4w4/vSa7qACemjg5uY0fPSLDIGIZcqBwFqZdGbSWQsgGqaBnjEP7inI3Vxp700gj1ddwAkoBw==\" crossorigin=\"anonymous\"\u003e\n\u003c/script\u003e\n```\n\nAnd then use **activeData** as global variable\n```html\n\u003cscript\u003e\n\tdata = activeData.makeObservable({c: 1});\n\tactiveData.makeReaction(() =\u003e {\n\t\tdocument.body.innerHTML = `\u003cbutton onclick=\"data.c++\"\u003e${data.c}\u003c/button\u003e`;\n\t});\n\u003c/script\u003e\n```\n\n*or if you want to import it as esm module*\n\n```html\n\u003cscript type=\"module\"\u003e\nimport {default as activeData, observable, reaction} from \"//cdn.jsdelivr.net/npm/active-data@2.0.10/dist/active-data.esm.mjs\";\n\nwindow.data = observable({c: 1});\nreaction(() =\u003e {\n\tdocument.body.innerHTML = `\u003cbutton onclick=\"data.c++\"\u003e${data.c}\u003c/button\u003e`;\n});\n\u003c/script\u003e\n```\n\n## [Documentation](./DOCUMENTATION.md)\n\n## Example\n\nRun example with [runkit](https://npm.runkit.com/active-data)\n\n```js\nconst ad = require(\"active-data\");\n\nad.setOptions({\n\timmediateReaction: true, // make recalculations for each change\n});\n\nconst data = ad.makeObservable({\n\twelcomeMessage: \"Hello,\",\n\tfirstName: \"Luke\",\n\tlastName: \"Skywalker\",\n});\n\nad.makeComputed(data, \"fullName\", self =\u003e `${self.firstName} ${self.lastName}`);\n\nad.makeReaction(() =\u003e {\n\tconsole.log(data.welcomeMessage + \" \" + data.fullName);\n});\n// \"Hello, Luke Skywalker\" will be printed immediately (can be configured)\n\ndata.firstName = \"Leia\"; // will print \"Hello, Leia Skywalker\"\n\nad.run(() =\u003e {\n\t// group changes together and run reaction functions only at the end\n\tdata.firstName = \"Anakin\";\n\tdata.welcomeMessage = \"Welcome to dark side,\";\n});\n\n```\n\n## Compatibility\n\n#### Browsers\n\n| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |\n| ------ | ---- | ------- | ----------------- | ----- | ------ |\n| 49     | 12   | 18      | *No support*      | 36    | 10     |\n\n#### Servers/runtimes\n\nSupported on **Node.js** version **6** and higher\n\n#### Proxy compatibility tables\n\nhttps://kangax.github.io/compat-table/es6/#test-Proxy\n\nhttp://caniuse.com/#feat=proxy\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforceuser%2Factive-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforceuser%2Factive-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforceuser%2Factive-data/lists"}