{"_id":"@cadolabs/observable","_rev":"5-2cf2f88cf7c70fff92de391dfe83bd32","name":"@cadolabs/observable","dist-tags":{"latest":"3.0.2"},"versions":{"2.0.0":{"name":"@cadolabs/observable","version":"2.0.0","author":{"name":"Aleksei Bespalov","email":"nulldefiner@gmail.com"},"license":"MIT","_id":"@cadolabs/observable@2.0.0","maintainers":[{"name":"cadolabs","email":"oss@cadolabs.io"}],"homepage":"https://github.com/Cado-Labs/observable","bugs":{"url":"https://github.com/Cado-Labs/observable/issues"},"dist":{"shasum":"eb700e6b166616a1c088e1c408e9244bbd770c43","tarball":"https://registry.npmjs.org/@cadolabs/observable/-/observable-2.0.0.tgz","fileCount":28,"integrity":"sha512-+S/S/8ZP+xvGsRT40x7y4GxhVSLixcVv/ukEevMhBV3w54QR0f6vEYi1fe1ruGdbWCZvwpMQmnwy9mXZRhmUFw==","signatures":[{"sig":"MEQCIAgzgj43wy4ga5tcLgdQaGowwS9nugNLnQsAS8jBM9jIAiBYCDnu4xbrSPG89xraw/ujn2vWmgVi4UFvx9ZieMJEtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67373},"main":"dist/observable.cjs.js","types":"dist/observable.d.ts","unpkg":"dist/observable.iife.js","module":"dist/observable.es.js","gitHead":"1fd025d162311e1995b3255de44acf9b31e0acf4","scripts":{"lint":"eslint .","test":"jest","build":"rollup -c","test:coverage":"jest --coverage"},"_npmUser":{"name":"cadolabs","email":"oss@cadolabs.io"},"repository":{"url":"git+https://github.com/Cado-Labs/observable.git","type":"git"},"_npmVersion":"9.5.1","description":"Observable library","directories":{},"_nodeVersion":"18.16.1","_hasShrinkwrap":false,"devDependencies":{"jest":"^28.1.1","react":"^18.3.1","enzyme":"^3.11.0","eslint":"^8.17.0","rollup":"^2.75.6","coveralls":"^3.1.1","react-dom":"^18.3.1","@babel/cli":"^7.17.10","babel-jest":"^28.1.1","typescript":"^4.8.4","@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","rollup-plugin-dts":"^4.2.3","eslint-plugin-jest":"^26.5.3","eslint-plugin-node":"^11.1.0","eslint-plugin-react":"^7.30.0","@babel/eslint-parser":"^7.18.2","@rollup/plugin-babel":"^5.3.1","eslint-plugin-import":"^2.26.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-jsx-a11y":"^6.5.1","jest-environment-jsdom":"^28.1.1","eslint-config-umbrellio":"^5.0.1","@rollup/plugin-node-resolve":"^13.3.0","@babel/plugin-transform-react-jsx":"^7.17.12","@cfaester/enzyme-adapter-react-18":"^0.8.0","eslint-plugin-prefer-object-spread":"^1.2.1","@babel/plugin-proposal-class-properties":"^7.17.12"},"peerDependencies":{"react":"^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/observable_2.0.0_1729772163730_0.04833433571762846","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@cadolabs/observable","version":"3.0.0","author":{"name":"Aleksei Bespalov","email":"nulldefiner@gmail.com"},"license":"MIT","_id":"@cadolabs/observable@3.0.0","maintainers":[{"name":"cadolabs","email":"oss@cadolabs.io"}],"homepage":"https://github.com/Cado-Labs/observable","bugs":{"url":"https://github.com/Cado-Labs/observable/issues"},"dist":{"shasum":"994f773195429134a2441bf02b22f3478ddbf24d","tarball":"https://registry.npmjs.org/@cadolabs/observable/-/observable-3.0.0.tgz","fileCount":28,"integrity":"sha512-mrdxRb/plHLLlXCrULquZy8M/XfxmrVmkpPnmv+lB4b+WR1wSnmeRqgW3HC8Du0F6OKd/urzpQWU1Y278qWEAQ==","signatures":[{"sig":"MEUCIQDgpE+MKXwsLKu64FGMMRKVhodmiyGYWUXEeR+yB4pEZQIgVdZPkN7BnXETZ0a6Bh5tOlr0mwiDGs5Fj2df8ybKltU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67319},"main":"dist/observable.cjs.js","types":"dist/observable.d.ts","unpkg":"dist/observable.iife.js","module":"dist/observable.es.js","gitHead":"ee9b737ca1af455f494c9b325f5dc6fbed8cda10","scripts":{"lint":"eslint .","test":"jest","build":"rollup -c","test:coverage":"jest --coverage"},"_npmUser":{"name":"cadolabs","email":"oss@cadolabs.io"},"repository":{"url":"git+https://github.com/Cado-Labs/observable.git","type":"git"},"_npmVersion":"9.5.1","description":"Observable library","directories":{},"_nodeVersion":"18.16.1","_hasShrinkwrap":false,"devDependencies":{"jest":"^28.1.1","react":"^18.3.1","enzyme":"^3.11.0","eslint":"^8.17.0","rollup":"^2.75.6","coveralls":"^3.1.1","react-dom":"^18.3.1","@babel/cli":"^7.17.10","babel-jest":"^28.1.1","typescript":"^4.8.4","@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","rollup-plugin-dts":"^4.2.3","eslint-plugin-jest":"^26.5.3","eslint-plugin-node":"^11.1.0","eslint-plugin-react":"^7.30.0","@babel/eslint-parser":"^7.18.2","@rollup/plugin-babel":"^5.3.1","eslint-plugin-import":"^2.26.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-jsx-a11y":"^6.5.1","jest-environment-jsdom":"^28.1.1","eslint-config-umbrellio":"^5.0.1","@rollup/plugin-node-resolve":"^13.3.0","@babel/plugin-transform-react-jsx":"^7.17.12","@cfaester/enzyme-adapter-react-18":"^0.8.0","eslint-plugin-prefer-object-spread":"^1.2.1","@babel/plugin-proposal-class-properties":"^7.17.12"},"peerDependencies":{"react":"^18"},"_npmOperationalInternal":{"tmp":"tmp/observable_3.0.0_1742304682102_0.7539757296024145","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@cadolabs/observable","version":"3.0.1","author":{"name":"Aleksei Bespalov","email":"nulldefiner@gmail.com"},"license":"MIT","_id":"@cadolabs/observable@3.0.1","maintainers":[{"name":"cadolabs","email":"oss@cadolabs.io"}],"homepage":"https://github.com/Cado-Labs/observable","bugs":{"url":"https://github.com/Cado-Labs/observable/issues"},"dist":{"shasum":"3dd45035d10a36b97987038c30bb9f1ba8abe917","tarball":"https://registry.npmjs.org/@cadolabs/observable/-/observable-3.0.1.tgz","fileCount":28,"integrity":"sha512-S/PopL30JzpBcqEpBQFUs/jrLigSErtgK8oJTZfNUjohoiLTSI4xlDL8y/JpaTk0989iDHvbEV/CHGJ0vfFS0g==","signatures":[{"sig":"MEUCIQCyLO6Y0bOSAI7Zi6gyLuUV+6olcbnXjr0tNSQOLkgS1gIgb3trDEv6ZPJOxvySQsX1nI068jcQ9Lc8HTtf/wiGbHE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":61683},"main":"dist/observable.cjs.js","types":"dist/observable.d.ts","unpkg":"dist/observable.iife.js","module":"dist/observable.es.js","gitHead":"08d649846ade4f109cb9c3e2fbe8dba15665a38d","scripts":{"lint":"eslint .","test":"jest","build":"rollup -c","test:coverage":"jest --coverage","prepublishOnly":"yarn build"},"_npmUser":{"name":"cadolabs","email":"oss@cadolabs.io"},"repository":{"url":"git+https://github.com/Cado-Labs/observable.git","type":"git"},"_npmVersion":"9.5.1","description":"Observable library","directories":{},"_nodeVersion":"18.16.1","_hasShrinkwrap":false,"devDependencies":{"jest":"^28.1.1","react":"^18.3.1","enzyme":"^3.11.0","eslint":"^8.17.0","rollup":"^2.75.6","coveralls":"^3.1.1","react-dom":"^18.3.1","@babel/cli":"^7.17.10","babel-jest":"^28.1.1","typescript":"^4.8.4","@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","rollup-plugin-dts":"^4.2.3","eslint-plugin-jest":"^26.5.3","eslint-plugin-node":"^11.1.0","eslint-plugin-react":"^7.30.0","@babel/eslint-parser":"^7.18.2","@rollup/plugin-babel":"^5.3.1","eslint-plugin-import":"^2.26.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-jsx-a11y":"^6.5.1","jest-environment-jsdom":"^28.1.1","eslint-config-umbrellio":"^5.0.1","@rollup/plugin-node-resolve":"^13.3.0","@babel/plugin-transform-react-jsx":"^7.17.12","@cfaester/enzyme-adapter-react-18":"^0.8.0","eslint-plugin-prefer-object-spread":"^1.2.1","@babel/plugin-proposal-class-properties":"^7.17.12"},"peerDependencies":{"react":"^18"},"_npmOperationalInternal":{"tmp":"tmp/observable_3.0.1_1742306155970_0.18575741756194897","host":"s3://npm-registry-packages-npm-production"}},"3.0.2":{"name":"@cadolabs/observable","version":"3.0.2","description":"Observable library","repository":{"type":"git","url":"git+https://github.com/Cado-Labs/observable.git"},"author":{"name":"Aleksei Bespalov","email":"nulldefiner@gmail.com"},"license":"MIT","homepage":"https://github.com/Cado-Labs/observable","main":"dist/observable.cjs.js","module":"dist/observable.es.js","unpkg":"dist/observable.iife.js","types":"dist/observable.d.ts","scripts":{"build":"rollup -c","lint":"eslint .","test":"jest","test:coverage":"jest --coverage","prepublishOnly":"yarn build"},"devDependencies":{"@babel/cli":"^7.17.10","@babel/core":"^7.18.2","@babel/eslint-parser":"^7.18.2","@babel/plugin-proposal-class-properties":"^7.17.12","@babel/plugin-transform-react-jsx":"^7.17.12","@babel/preset-env":"^7.18.2","@cfaester/enzyme-adapter-react-18":"^0.8.0","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-node-resolve":"^13.3.0","babel-jest":"^28.1.1","coveralls":"^3.1.1","enzyme":"^3.11.0","eslint":"^8.17.0","eslint-config-umbrellio":"^5.0.1","eslint-plugin-import":"^2.26.0","eslint-plugin-jest":"^26.5.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-node":"^11.1.0","eslint-plugin-prefer-object-spread":"^1.2.1","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.30.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^2.75.6","rollup-plugin-dts":"^4.2.3","typescript":"^4.8.4"},"peerDependencies":{"react":"^18"},"_id":"@cadolabs/observable@3.0.2","gitHead":"0183aea48c3b0fe702dd0050e543f08e435e0f0b","bugs":{"url":"https://github.com/Cado-Labs/observable/issues"},"_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-J8afmaXaKI4tP/1ghTx5clwl+ZKCfePl9MJp29jHoYH7tInXbeLrseR1JiahASqPp9Z3fPdf6HX3IgmiuZrz/A==","shasum":"c36691255b008a599939840ad931c00819d4e47d","tarball":"https://registry.npmjs.org/@cadolabs/observable/-/observable-3.0.2.tgz","fileCount":29,"unpackedSize":62171,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCH8U9dT9+LcmtGngKUTrYiMUeVfAL94uaPgyuXbsBSRQIhAKTZXzyT1TSrxJsEfdyEhIeUTFOGrF7kCuTiibLel2sW"}]},"_npmUser":{"name":"cadolabs","email":"oss@cadolabs.io"},"directories":{},"maintainers":[{"name":"cadolabs","email":"oss@cadolabs.io"},{"name":"alexander.baz","email":"alexander.baz@cadolabs.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/observable_3.0.2_1786358546623_0.8207982662434969"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-24T12:16:03.628Z","modified":"2026-08-10T10:42:27.032Z","2.0.0":"2024-10-24T12:16:03.923Z","3.0.0":"2025-03-18T13:31:22.320Z","3.0.1":"2025-03-18T13:55:56.250Z","3.0.2":"2026-08-10T10:42:26.761Z"},"bugs":{"url":"https://github.com/Cado-Labs/observable/issues"},"author":{"name":"Aleksei Bespalov","email":"nulldefiner@gmail.com"},"license":"MIT","homepage":"https://github.com/Cado-Labs/observable","repository":{"type":"git","url":"git+https://github.com/Cado-Labs/observable.git"},"description":"Observable library","maintainers":[{"name":"cadolabs","email":"oss@cadolabs.io"},{"name":"alexander.baz","email":"alexander.baz@cadolabs.io"}],"readme":"# @cadolabs/observable &middot; <a target=\"_blank\" href=\"https://github.com/Cado-Labs\"><img src=\"https://github.com/Cado-Labs/cado-labs-logos/raw/main/cado_labs_badge.svg\" alt=\"Supported by Cado Labs\" style=\"max-width: 100%; height: 20px\"></a>\n\n[![Coverage Status](https://coveralls.io/repos/github/Cado-Labs/observable/badge.svg?branch=master)](https://coveralls.io/github/cadolabs/observable?branch=master)\n[![Build Status](https://github.com/Cado-Labs/observable/actions/workflows/ci.yml/badge.svg)](https://github.com/cadolabs/observable)\n\n## Install\n\n```sh\n$ yarn add @cadolabs/observable\n```\n\n## Usage\n\nThe library contains of 4 parts - `observable`, `observer`, `multipleObserver` and `useStore`.\n\n```js\nimport { observable, observer, multipleObserver, useStore } from \"@cadolabs/observable\"\n```\n\n### Structures\n\n```js\ntype InitialObject = Object\ntype State = Object\ntype Subscription = () => void\ntype ObserverFunction = Component => Observer<Component>\n\ntype ObservableStore = {\n  set: (Object) => void, // set stored state (merge)\n  observer: (ObserverOptions) => ObserverFunction // see observer\n  getState: () => State, // returns current state\n  subscribe: (Function) => Subscription, // subscribe on changes\n  reset: () => void, // reset store to initial state\n  ...InitialObject, // getters for the initial state keys\n}\n\ntype ObserverOptions = {\n  key: String, // property name\n  map: (State => Object)? // function for mapping state\n}\n\ntype MultipleObserverOptionItem = {\n  store: ObservableStore, // store object\n  key: String, // property name\n  map: (State => Object)?, // function for mapping state\n}\n\ntype UseStoreOptions = {\n  map: (State => Object)?, // function for mapping state\n}\n```\n\n### `observable`\n\nCreates observable store.\n\n```js\nobservable(initial: InitialObject): ObservableStore\n```\n\n```js\nimport { observable } from \"@cadolabs/observable\"\n\nconst listStore = observable({ list: [] })\n```\n\n*IMPORTANT: the store will have keys only from `initial` object*\n\n```js\nlistStore.set({ otherKey: \"value\" })\nlistStore.otherKey // => undefined\nlistStore.set({ list: [1, 2,3] })\nlistStore.list // => [1, 2, 3]\n```\n\n### `observer`\n\nSubscribes React component on observable store.\n\n```js\nobserver(store: ObservableStore, options: ObserverOptions): ObserverFunction\n```\n\n```js\nimport { observer } from \"@cadolabs/observable\"\n\n@observer(listStore, {\n  key: \"categories\",\n  map: state => state.list\n}) // or @listStore.observer({ key: \"categories\" })\nclass List extends React.Component {\n  render () {\n    const { categories } = this.props\n\n    return <ul>{categories.map(item => <li key={item}>{item}</li>)}</ul>\n  }\n}\n```\n\n### `multipleObserver`\n\nSubscribes React component on multiple observable stores.\n\n```js\nmultipleObserver(stores: MultipleObserverOptionItem[]): ObserverFunction\n```\n\n```js\nimport { multipleObserver } from \"@cadolabs/observable\"\n\n@multipleObserver([\n  { store: listStore, key: \"categories\", map: state => state.list },\n  { store: userStore, key: \"user\" },\n])\nclass List extends React.Component {\n  render () {\n    const { categories, user } = this.props\n\n    return (\n      <React.Fragment>\n        <h2>{user.name}</h2>\n        <ul>{categories.map(item => <li key={item}>{item}</li>)}</ul>\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### `useStore`\n\nReact hook that keeps track of the observable store.\n\n```js\nuseStore(store: ObservableStore, options: UseStoreOptions): State\n```\n\n```js\nimport { useStore } from \"@cadolabs/observable\"\n\nconst List = () => {\n  const categories = useStore(listStore, { map: state => state.list })\n\n  return <ul>{categories.map(item => <li key={item}>{item}</li>)}</ul>\n}\n```\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/cadolabs/observable.\n\n## License\n\nReleased under MIT License.\n\n## Authors\n\nCreated by [Aleksei Bespalov](https://github.com/nulldef),\ninspired by idea of [Aleksandr Komarov](https://github.com/akxcv).\n\n<a href=\"https://github.com/Cado-Labs\">\n  <img src=\"https://github.com/Cado-Labs/cado-labs-resources/blob/main/cado_labs_supporting_rounded.svg\" alt=\"Supported by Cado Labs\" />\n</a>\n","readmeFilename":"README.md"}