Counter: {counter}
\n \n\n \n \n
\n )\n}\n```\n\nUpdates will be shallow-merged with the current state, meaning that top-level properties will be replaced, and properties you don't update will not be touched.\n\n### Reading from a Store (with React)\n\nWithin a React component, use the `useStore` hook to read data from the store:\n\n```tsx\nimport { useStore } from \"statery\"\n\nconst Wood = () => {\n const { wood } = useStore(store)\n\n returnWood: {wood}
\n}\n```\n\nWhen any of the data your components access changes in the store, they will automatically re-render.\n\n### Reading from a Store (without React)\n\nA Statery store provides access to its current state through its `state` property:\n\n```ts\nconst store = makeStore({ count: 0 })\nconsole.log(store.state.count)\n```\n\nYou can also imperatively [subscribe to updates](#subscribing-to-updates-imperatively).\n\n## ADVANCED USAGE\n\n### Deriving Values from a Store\n\nJust like mutations, functions that derive values from the store's state can be written as standalone functions:\n\n```tsx\nconst canBuyHouse = ({ wood, gold }) => wood >= 5 && gold >= 5\n```\n\nThese will work from within plain imperative JavaScript code...\n\n```tsx\nif (canBuyHouse(store.state)) {\n console.log(\"Let's buy a house!\")\n}\n```\n\n...mutation code...\n\n```tsx\nconst buyHouse = () =>\n store.set((state) =>\n canBuyHouse(state)\n ? {\n wood: state.wood - 5,\n gold: state.gold - 5,\n houses: state.houses + 1\n }\n : {}\n )\n```\n\n...as well as React components, which will automatically be rerendered if any of the underlying data changes:\n\n```tsx\nconst BuyHouseButton = () => {\n const proxy = useStore(store)\n\n return (\n \n )\n}\n```\n\n### Subscribing to updates (imperatively)\n\nUse a store's `subscribe` function to register a callback that will be executed every time the store is changed.\nThe callback will receive both an object containing of the changes, as well as the store's current state.\n\n```ts\nconst store = makeStore({ count: 0 })\n\nconst listener = (changes, state) => {\n console.log(\"Applying changes:\", changes)\n}\n\nstore.subscribe(console.log)\nstore.set((state) => ({ count: state.count + 1 }))\nstore.unsubscribe(console.log)\n```\n\n### Async updates\n\nYour Statery store doesn't know or care about asynchronicity -- simply call `set` whenever your data is ready:\n\n```ts\nconst fetchPosts = async () => {\n const posts = await loadPosts()\n store.set({ posts })\n}\n```\n\n### TypeScript support\n\nStatery is written in TypeScript, and its stores are fully typed. `useStore` knows about the structure of your store, and if you're about to update a store with a property that it doesn't know about, TypeScript will warn you.\n\nIf the state structure `makeStore` infers from its initial state argument is not what you want, you can explicitly pass a store type to `makeStore`:\n\n```tsx\nconst store = makeStore<{ name?: string }>({})\nstore.set({ name: \"Statery\" }) // โ All good\nstore.set({ foo: 123 }) // ๐ญ TypeScript warning\n```\n\n## NOTES\n\n### Stuff that probably needs work\n\n- [ ] No support for middleware yet. Haven't decided on an API that is adequately simple.\n- [ ] I have yet to try how Statery behaves in React's upcoming Concurrent Mode. It does work fine within React's StrictMode, though, so chances are it'll be okay.\n- [ ] Probably other bits and pieces I haven't even encountered yet.\n\n### Prior Art & Credits\n\nStatery was born after spending a lot of time with the excellent state management libraries provided by the [Poimandres](https://github.com/pmndrs) collective, [Zustand] and [Valtio]. Statery started out as an almost-clone of Zustand, but with the aim of providing an even simpler API. The `useStore` hook API was inspired by Valtio's very nice `useProxy`.\n\nStatery is written and maintained by Hendrik Mans. [Get in touch on Twitter](https://twitter.com/hmans)!\n\n[demo]: https://codesandbox.io/s/statery-clicker-game-hjxk3?file=/src/App.tsx\n[zustand]: https://github.com/pmndrs/zustand\n[valtio]: https://github.com/pmndrs/valtio\n[immer]: https://github.com/immerjs/immer\n","licenseText":"Copyright (c) 2020 Hendrik Mans\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","_id":"statery@0.6.0-0","dist":{"shasum":"3fc37819977a8bf1cc2f607af5c897eee7d3e11e","integrity":"sha512-AVtl86PdI2tOq64Ea6CNy2YmyTHqGyMXotePhkJDlhZzLf8mT7tEsUd2HndhpH1Xkk1JYxvsWDL0qC2iQkScaQ==","tarball":"https://registry.npmjs.org/statery/-/statery-0.6.0-0.tgz","fileCount":64,"unpackedSize":1032062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVf1aCRA9TVsSAnZWagAAmFMQAJjHB55ZLAn0QgkyUJJ/\ng07O4oa5LD3wdCAXT8+EOt2mQc0USAGBd2gKocA1E0hi0wCyjb0nknlCxhV1\n3icexWnPc01JdiOJhsfp5COtxpNxzY3hqarNGeS9n2qt+bWw+0LPGB5Dq0d4\nOa003XBKs0Kw7+5UL8sfcHJxCtFtozd/CY9dBwA1FNhw0D8V57SFcGijzMlf\nNJCJaiiRX/SEk3rlxvEO1j6d0eh6xVHo6xSrAwJ/SGkIzY2VpfT0b7syCAXM\ndmMnsScWOMCGrWNPZsWl/IslsxWDa2Gy2IenF8WuGxBE8r3ZGnSNT7pkczkb\nW0yb5LGlGrxaGJXBaFZWjxYqpSRTHLuaGGdimEQEycwgj0I6jIMYHMpAUuUu\nMue/u5MIDfL5E4N6oCZDPRLN/TJCDGdHaud0k64APVCulpgeZpTqzGy6SAQn\nDNiIF/LR9SKXu1QzvUp2kxRwH6RNrvc+rvgV/5p+EREIWA25hh6MLR80fB1E\nw2FebCAjXFXwRFYEqNGsJhyqakLgjFo6Oh3d1TnOEv2E67ULAU2lHPsEf5+I\nJxZ7LTsfqpeIvdJdWaICnY/yGyy+qQn0hhwPIvdSHJ51W2WhdiuvW2hI0Qxo\nzEA52ZCYDBLiqhcK2KaKq0T7z9JxcTLNbVfnPmTg9omzVsgec+IGdxYCnRqj\nPpeP\r\n=Rw8c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuMx9Ty8UM9cxqeAvIwxqD094eKZ60SQcgjwzDnOxkAAIhAM400dD2j3HaGYVXoXkX3bPnPQiY1EYpzxTmSibeMaDf"}]},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.6.0-0_1616248153864_0.24595844095250619"},"_hasShrinkwrap":false},"0.6.0-next.0":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.6.0-next.0","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","license":"MIT","scripts":{"clean":"rimraf dist","dev":"yarn clean && rollup -c -w","build":"yarn clean && rollup -c","test":"jest","docs":"typedoc src/index.ts","release":"yarn build && yarn test && yarn changeset publish"},"devDependencies":{"@changesets/cli":"^2.24.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","rollup":"^2.35.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.32.1","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"readme":"[](https://www.npmjs.com/package/statery)\n[](https://github.com/hmans/statery/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/statery)\n[](https://bundlephobia.com/result?p=statery)\n\n```\n ๐ฅ โญ๏ธ ๐ฅ โจ\n โจ โจ\n โโโโโโโโโโโโโโโโโ โโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โโโ โโโโโโ โจ\n โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโโโ โโโ โญ๏ธ โจ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโ โโโ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ ๐ฅ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ\n โจ โจ โญ๏ธ\n SURPRISE-FREE STATE MANAGEMENT! ๐ฅ\n โจ\n```\n\n### Features ๐\n\n- Simple, **noise- and surprise-free API**. Check out the [demo]!\n- **Extremely compact**, both in bundle size as well as API surface (2 exported functions!)\n- Fully **tested**, fully **typed**!\n- **Designed for React** (with functional components and hooks), but can also be used **without it**.\n\n### Non-Features ๐งค\n\n- Doesn't use **React Context** (but you can easily use it to provide a context-specific store!)\n- Provides a simple `set` function for updating a store and not much else (have you checked out the [demo] yet?) If you want to use **reducers** or libraries like [Immer], these can easily sit on top of your Statery store.\n- Currently no support for (or concept of) **middlewares**, but this may change in the future.\n- While the `useStore` hook makes use of **proxies**, the store contents themselves are never wrapped in proxy objects. (If you're looking for a fully proxy-based solution, I recommend [Valtio].)\n- **React Class Components** are not supported (but PRs welcome!)\n\n## SUMMARY\n\n```ts\nimport * as React from \"react\"\nimport { makeStore, useStore } from \"statery\"\n\n/* Make a store */\nconst store = makeStore({ counter: 0 })\n\n/* Write some code that updates it */\nconst increment = () =>\n store.set((state) => ({\n counter: state.counter + 1\n }))\n\nconst Counter = () => {\n /* Fetch data from the store (and automatically re-render\n when it changes!) */\n const { counter } = useStore(store)\n\n return (\nCounter: {counter}
\n \n\n \n \n
\n )\n}\n```\n\nUpdates will be shallow-merged with the current state, meaning that top-level properties will be replaced, and properties you don't update will not be touched.\n\n### Reading from a Store (with React)\n\nWithin a React component, use the `useStore` hook to read data from the store:\n\n```tsx\nimport { useStore } from \"statery\"\n\nconst Wood = () => {\n const { wood } = useStore(store)\n\n returnWood: {wood}
\n}\n```\n\nWhen any of the data your components access changes in the store, they will automatically re-render.\n\n### Reading from a Store (without React)\n\nA Statery store provides access to its current state through its `state` property:\n\n```ts\nconst store = makeStore({ count: 0 })\nconsole.log(store.state.count)\n```\n\nYou can also imperatively [subscribe to updates](#subscribing-to-updates-imperatively).\n\n## ADVANCED USAGE\n\n### Deriving Values from a Store\n\nJust like mutations, functions that derive values from the store's state can be written as standalone functions:\n\n```tsx\nconst canBuyHouse = ({ wood, gold }) => wood >= 5 && gold >= 5\n```\n\nThese will work from within plain imperative JavaScript code...\n\n```tsx\nif (canBuyHouse(store.state)) {\n console.log(\"Let's buy a house!\")\n}\n```\n\n...mutation code...\n\n```tsx\nconst buyHouse = () =>\n store.set((state) =>\n canBuyHouse(state)\n ? {\n wood: state.wood - 5,\n gold: state.gold - 5,\n houses: state.houses + 1\n }\n : {}\n )\n```\n\n...as well as React components, which will automatically be rerendered if any of the underlying data changes:\n\n```tsx\nconst BuyHouseButton = () => {\n const proxy = useStore(store)\n\n return (\n \n )\n}\n```\n\n### Subscribing to updates (imperatively)\n\nUse a store's `subscribe` function to register a callback that will be executed every time the store is changed.\nThe callback will receive both an object containing of the changes, as well as the store's current state.\n\n```ts\nconst store = makeStore({ count: 0 })\n\nconst listener = (changes, state) => {\n console.log(\"Applying changes:\", changes)\n}\n\nstore.subscribe(console.log)\nstore.set((state) => ({ count: state.count + 1 }))\nstore.unsubscribe(console.log)\n```\n\n### Async updates\n\nYour Statery store doesn't know or care about asynchronicity -- simply call `set` whenever your data is ready:\n\n```ts\nconst fetchPosts = async () => {\n const posts = await loadPosts()\n store.set({ posts })\n}\n```\n\n### TypeScript support\n\nStatery is written in TypeScript, and its stores are fully typed. `useStore` knows about the structure of your store, and if you're about to update a store with a property that it doesn't know about, TypeScript will warn you.\n\nIf the state structure `makeStore` infers from its initial state argument is not what you want, you can explicitly pass a store type to `makeStore`:\n\n```tsx\nconst store = makeStore<{ name?: string }>({})\nstore.set({ name: \"Statery\" }) // โ All good\nstore.set({ foo: 123 }) // ๐ญ TypeScript warning\n```\n\n## NOTES\n\n### Stuff that probably needs work\n\n- [ ] No support for middleware yet. Haven't decided on an API that is adequately simple.\n- [ ] I have yet to try how Statery behaves in React's upcoming Concurrent Mode. It does work fine within React's StrictMode, though, so chances are it'll be okay.\n- [ ] Probably other bits and pieces I haven't even encountered yet.\n\n### Prior Art & Credits\n\nStatery was born after spending a lot of time with the excellent state management libraries provided by the [Poimandres](https://github.com/pmndrs) collective, [Zustand] and [Valtio]. Statery started out as an almost-clone of Zustand, but with the aim of providing an even simpler API. The `useStore` hook API was inspired by Valtio's very nice `useProxy`.\n\nStatery is written and maintained by Hendrik Mans. [Get in touch on Twitter](https://twitter.com/hmans)!\n\n[demo]: https://codesandbox.io/s/statery-clicker-game-hjxk3?file=/src/App.tsx\n[zustand]: https://github.com/pmndrs/zustand\n[valtio]: https://github.com/pmndrs/valtio\n[immer]: https://github.com/immerjs/immer\n","readmeFilename":"README.md","gitHead":"96a49227965d1dc896852b11224f148d98ef103c","_id":"statery@0.6.0-next.0","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-/pv5E7VbowqEOORDD/4nXTj4CRxE33pWFxhHZKGzJqoPYAsXe3zaIAWDFTjqHBkErCBjfmxVSk42csY5KY90Zg==","shasum":"687cc678752427aab78e0cf62e1aa7ccd8ed8b63","tarball":"https://registry.npmjs.org/statery/-/statery-0.6.0-next.0.tgz","fileCount":27,"unpackedSize":228656,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgFMZ6GYc87goeArxzRk2RNR5vzGJBLcG5D5mG/adLzQIgD8vmnFhgUxtPtAbOIjqwz8BWFVN5AGE1zl7+frxAutY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi3/X3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQnw/8DUdWYTtiK6QGJZIt21JcHGTMMDH7VEBtZi4svdur7lwfNdWg\r\nT/cV2J6dmptR2oVGSZM8dzlJJ8lHBzItPoGZJY5vznYPRozM099hZs4GwRhE\r\n/Cm4Nu+N4GegLzYKq6AjqbrokYyU4RxxwF+6uLuoyMVzYVj36Z/tVSMh2GuR\r\nI3zcVL/rcJ7D22sM0ztEaBK6wyVDDgzYf3cMBoe+boPUhT2+7T0YXHGJO6rZ\r\n13AcYPYCVuaT1q9hr1dcPWYdmuOE6d6OcXwU75xjn0pFdFEu5knxKfW0jGtl\r\n1KmJICPtikbtaEe0CzIs6RQM76uN8MFFMUeHs/Aa3SFCaP6ElG931jkv7em0\r\n3Z9VzgR5mgqdnSLyvMB+p/pT31CAfsQYAIBtvvdncpbJV1hDyPzqxWWw7AoW\r\nD/9VGGKwzIY3qCFZz5wnYJck/l0HpHZyLm+53kGNcxeGLvVbNhro+tej+1kH\r\nRPE327pZfKHulnYf9n1kmSy8C59zTuxsAc9uR8MnjT+vg6BX1NDtZ6ZDNGAl\r\nUtIW+ZZ+qDPaAN60rQ0OCVOjvUQHTE/sK8RS3AK99e2+mTESMxx0WVtgbidB\r\nIrqggNMSPC+yZMcbmoIDpkIUBdyhtnLVCkK5pVZzffA6ZxQdqZCHjaj2afAO\r\njm7yGbJK9i1CIm+QupXs5e5cNlOq9JFYzeo=\r\n=jbWZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.6.0-next.0_1658844662854_0.9158261572209989"},"_hasShrinkwrap":false},"0.6.0-next.1":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.6.0-next.1","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","license":"MIT","scripts":{"clean":"rimraf dist","dev":"yarn clean && rollup -c -w","build":"yarn clean && rollup -c","test":"jest","docs":"typedoc src/index.ts","release":"yarn build && yarn test && yarn changeset publish"},"devDependencies":{"@changesets/cli":"^2.24.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","rollup":"^2.35.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.32.1","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"readme":"[](https://www.npmjs.com/package/statery)\n[](https://github.com/hmans/statery/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/statery)\n[](https://bundlephobia.com/result?p=statery)\n\n```\n ๐ฅ โญ๏ธ ๐ฅ โจ\n โจ โจ\n โโโโโโโโโโโโโโโโโ โโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โโโ โโโโโโ โจ\n โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโโโ โโโ โญ๏ธ โจ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโ โโโ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ ๐ฅ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ\n โจ โจ โญ๏ธ\n SURPRISE-FREE STATE MANAGEMENT! ๐ฅ\n โจ\n```\n\n### Features ๐\n\n- Simple, **noise- and surprise-free API**. Check out the [demo]!\n- **Extremely compact**, both in bundle size as well as API surface (2 exported functions!)\n- Fully **tested**, fully **typed**!\n- **Designed for React** (with functional components and hooks), but can also be used **without it**.\n\n### Non-Features ๐งค\n\n- Doesn't use **React Context** (but you can easily use it to provide a context-specific store!)\n- Provides a simple `set` function for updating a store and not much else (have you checked out the [demo] yet?) If you want to use **reducers** or libraries like [Immer], these can easily sit on top of your Statery store.\n- Currently no support for (or concept of) **middlewares**, but this may change in the future.\n- While the `useStore` hook makes use of **proxies**, the store contents themselves are never wrapped in proxy objects. (If you're looking for a fully proxy-based solution, I recommend [Valtio].)\n- **React Class Components** are not supported (but PRs welcome!)\n\n## SUMMARY\n\n```tsx\nimport { makeStore, useStore } from \"statery\"\n\n/* Make a store */\nconst store = makeStore({ counter: 0 })\n\n/* Write some code that updates it */\nconst increment = () =>\n store.set((state) => ({\n counter: state.counter + 1\n }))\n\nconst Counter = () => {\n /* Fetch data from the store (and automatically re-render\n when it changes!) */\n const { counter } = useStore(store)\n\n return (\nCounter: {counter}
\n \n\n \n \n
\n )\n}\n```\n\nUpdates will be shallow-merged with the current state, meaning that top-level properties will be replaced, and properties you don't update will not be touched.\n\n### Reading from a Store (with React)\n\nWithin a React component, use the `useStore` hook to read data from the store:\n\n```tsx\nimport { useStore } from \"statery\"\n\nconst Wood = () => {\n const { wood } = useStore(store)\n\n returnWood: {wood}
\n}\n```\n\nWhen any of the data your components access changes in the store, they will automatically re-render.\n\n### Reading from a Store (without React)\n\nA Statery store provides access to its current state through its `state` property:\n\n```ts\nconst store = makeStore({ count: 0 })\nconsole.log(store.state.count)\n```\n\nYou can also imperatively [subscribe to updates](#subscribing-to-updates-imperatively).\n\n## ADVANCED USAGE\n\n### Deriving Values from a Store\n\nJust like mutations, functions that derive values from the store's state can be written as standalone functions:\n\n```tsx\nconst canBuyHouse = ({ wood, gold }) => wood >= 5 && gold >= 5\n```\n\nThese will work from within plain imperative JavaScript code...\n\n```tsx\nif (canBuyHouse(store.state)) {\n console.log(\"Let's buy a house!\")\n}\n```\n\n...mutation code...\n\n```tsx\nconst buyHouse = () =>\n store.set((state) =>\n canBuyHouse(state)\n ? {\n wood: state.wood - 5,\n gold: state.gold - 5,\n houses: state.houses + 1\n }\n : {}\n )\n```\n\n...as well as React components, which will automatically be rerendered if any of the underlying data changes:\n\n```tsx\nconst BuyHouseButton = () => {\n const proxy = useStore(store)\n\n return (\n \n )\n}\n```\n\n### Forcing a store update\n\nWhen the store is updated, Statery will check which of the properties within the update object are actually different objects (or scalar values) from the previous state, and will only notify listeners to those properties.\n\nIn some cases, you may want to force a store update even though the property has not changed to a new object. For these situations, the `set` function allows you to pass a second argument; if this is set to `true`, Statery will ignore the equality check and notify all listeners to the properties included in the update.\n\nExample:\n\n```tsx\nconst store = makeStore({\n rotation: new THREE.Vector3()\n})\n\nexport const randomizeRotation = () =>\n store.set(\n (state) => ({\n rotation: state.rotation.randomRotation()\n }),\n true\n )\n```\n\n### Subscribing to updates (imperatively)\n\nUse a store's `subscribe` function to register a callback that will be executed every time the store is changed.\nThe callback will receive both an object containing of the changes, as well as the store's current state.\n\n```ts\nconst store = makeStore({ count: 0 })\n\nconst listener = (changes, state) => {\n console.log(\"Applying changes:\", changes)\n}\n\nstore.subscribe(console.log)\nstore.set((state) => ({ count: state.count + 1 }))\nstore.unsubscribe(console.log)\n```\n\n### Async updates\n\nYour Statery store doesn't know or care about asynchronicity -- simply call `set` whenever your data is ready:\n\n```ts\nconst fetchPosts = async () => {\n const posts = await loadPosts()\n store.set({ posts })\n}\n```\n\n### TypeScript support\n\nStatery is written in TypeScript, and its stores are fully typed. `useStore` knows about the structure of your store, and if you're about to update a store with a property that it doesn't know about, TypeScript will warn you.\n\nIf the state structure `makeStore` infers from its initial state argument is not what you want, you can explicitly pass a store type to `makeStore`:\n\n```tsx\nconst store = makeStore<{ name?: string }>({})\nstore.set({ name: \"Statery\" }) // โ All good\nstore.set({ foo: 123 }) // ๐ญ TypeScript warning\n```\n\n## NOTES\n\n### Stuff that probably needs work\n\n- [ ] No support for middleware yet. Haven't decided on an API that is adequately simple.\n\n### Prior Art & Credits\n\nStatery was born after spending a lot of time with the excellent state management libraries provided by the [Poimandres](https://github.com/pmndrs) collective, [Zustand] and [Valtio]. Statery started out as an almost-clone of Zustand, but with the aim of providing an even simpler API. The `useStore` hook API was inspired by Valtio's very nice `useProxy`.\n\nStatery is written and maintained by Hendrik Mans. [Get in touch on Twitter](https://twitter.com/hmans)!\n\n[demo]: https://codesandbox.io/s/statery-clicker-game-hjxk3?file=/src/App.tsx\n[zustand]: https://github.com/pmndrs/zustand\n[valtio]: https://github.com/pmndrs/valtio\n[immer]: https://github.com/immerjs/immer\n","readmeFilename":"README.md","gitHead":"4ffc7fcf96670faea96f87efa78b596662e9d272","_id":"statery@0.6.0-next.1","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-MzIHxYdw+TxoSMHh5mP3r5Wv8lJsJZmLziA8+qqqacD6RNXSXQbrlb4+BbgqTXu1whBw2X480uVh1VirICOsbg==","shasum":"11b97aaa6895fa7b60622e0ae672af435f45b7de","tarball":"https://registry.npmjs.org/statery/-/statery-0.6.0-next.1.tgz","fileCount":29,"unpackedSize":230688,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx18Em781AJVRju0WEkHFU9jYBJ2P6s44CBXiS6Ubv6wIhAPmozoRaHIzx13yyetvpGbkY/9nOzPIf4jtEJqlIYSvm"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4BOKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmVhAAmPSNgNbkWBhCZ+G/KMXUJseCQ4PWlrZuMs5FfJZgJUoKtPbf\r\nmeYcPWiL4VgOx2r6aYmsDkQ0TUn3cesJRMyjQsKh360ujshWxmsjDyYy+j1o\r\nENQ1IBzVkguXyqydVxXfIwwAbKVXAjGk74qiglU2rMSjVpZcTUkJXdGncH42\r\n9mDK+bZXgLyLGtIT0+iIYcL6dxnMwWhuS5L8WIHSpRJQy+v5FTmqxo4dbd9s\r\nWpucW0kn714PGhsxUYlYsF59bU9GVD45rKqq3xLtwMpKN9FCDKNyd9cI2bh7\r\ncMq/Trn3TomYQEg5gO7poNOlgGTDpPhoOVakR3OBbD7kqr5PLwBoT1phqpjY\r\n3v73ZxGwzGyTSp2m+shrBoEPqFF7o+MJUy1OAmQBYOwfh4aNTD/7HmXm1Rp2\r\niDTwYO04Z3Xwqllgh2eTR+VwMmMXrLw0TwBTMeESQgfte5JB3GLSkShzQku6\r\n/QtFSEjiogeM8nPjF+Lg2N9BIipeJtkZecwOX+aiVjGDopNW5VvRJL4EIyxo\r\nCK2ZxQJUKdXFcFbtq83Jm1jqLgbkwUitGNoYXIblHN6f6p+Z+Uk3U8nfdgJ8\r\nGQB8YweVMd82iCEljnkrJSim1yViuf2yCsGZ/MWGWjVJKqxNXTJj59PpnC0c\r\nKRFTpKqfQiyFAoUJr50wyWwj7AdSUaym/0E=\r\n=QD/9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.6.0-next.1_1658852234240_0.15936472779501987"},"_hasShrinkwrap":false},"0.0.0-canary-20220820183424":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.0.0-canary-20220820183424","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","license":"MIT","scripts":{"clean":"rimraf dist","dev":"yarn clean && rollup -c -w","build":"yarn clean && rollup -c","test":"jest","docs":"typedoc src/index.ts","release":"yarn build && yarn test && yarn changeset publish"},"devDependencies":{"@changesets/cli":"^2.24.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","rollup":"^2.35.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.32.1","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"readme":"[](https://www.npmjs.com/package/statery)\n[](https://github.com/hmans/statery/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/statery)\n[](https://bundlephobia.com/result?p=statery)\n\n```\n ๐ฅ โญ๏ธ ๐ฅ โจ\n โจ โจ\n โโโโโโโโโโโโโโโโโ โโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โโโ โโโโโโ โจ\n โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโโโ โโโ โญ๏ธ โจ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโ โโโ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ ๐ฅ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ\n โจ โจ โญ๏ธ\n SURPRISE-FREE STATE MANAGEMENT! ๐ฅ\n โจ\n```\n\n### Features ๐\n\n- Simple, **noise- and surprise-free API**. Check out the [demo]!\n- **Extremely compact**, both in bundle size as well as API surface (2 exported functions!)\n- Fully **tested**, fully **typed**!\n- **Designed for React** (with functional components and hooks), but can also be used **without it**.\n\n### Non-Features ๐งค\n\n- Doesn't use **React Context** (but you can easily use it to provide a context-specific store!)\n- Provides a simple `set` function for updating a store and not much else (have you checked out the [demo] yet?) If you want to use **reducers** or libraries like [Immer], these can easily sit on top of your Statery store.\n- Currently no support for (or concept of) **middlewares**, but this may change in the future.\n- While the `useStore` hook makes use of **proxies**, the store contents themselves are never wrapped in proxy objects. (If you're looking for a fully proxy-based solution, I recommend [Valtio].)\n- **React Class Components** are not supported (but PRs welcome!)\n\n## SUMMARY\n\n```tsx\nimport { makeStore, useStore } from \"statery\"\n\n/* Make a store */\nconst store = makeStore({ counter: 0 })\n\n/* Write some code that updates it */\nconst increment = () =>\n store.set((state) => ({\n counter: state.counter + 1\n }))\n\nconst Counter = () => {\n /* Fetch data from the store (and automatically re-render\n when it changes!) */\n const { counter } = useStore(store)\n\n return (\nCounter: {counter}
\n \n\n \n \n
\n )\n}\n```\n\nUpdates will be shallow-merged with the current state, meaning that top-level properties will be replaced, and properties you don't update will not be touched.\n\n### Reading from a Store (with React)\n\nWithin a React component, use the `useStore` hook to read data from the store:\n\n```tsx\nimport { useStore } from \"statery\"\n\nconst Wood = () => {\n const { wood } = useStore(store)\n\n returnWood: {wood}
\n}\n```\n\nWhen any of the data your components access changes in the store, they will automatically re-render.\n\n### Reading from a Store (without React)\n\nA Statery store provides access to its current state through its `state` property:\n\n```ts\nconst store = makeStore({ count: 0 })\nconsole.log(store.state.count)\n```\n\nYou can also imperatively [subscribe to updates](#subscribing-to-updates-imperatively).\n\n## ADVANCED USAGE\n\n### Deriving Values from a Store\n\nJust like mutations, functions that derive values from the store's state can be written as standalone functions:\n\n```tsx\nconst canBuyHouse = ({ wood, gold }) => wood >= 5 && gold >= 5\n```\n\nThese will work from within plain imperative JavaScript code...\n\n```tsx\nif (canBuyHouse(store.state)) {\n console.log(\"Let's buy a house!\")\n}\n```\n\n...mutation code...\n\n```tsx\nconst buyHouse = () =>\n store.set((state) =>\n canBuyHouse(state)\n ? {\n wood: state.wood - 5,\n gold: state.gold - 5,\n houses: state.houses + 1\n }\n : {}\n )\n```\n\n...as well as React components, which will automatically be rerendered if any of the underlying data changes:\n\n```tsx\nconst BuyHouseButton = () => {\n const proxy = useStore(store)\n\n return (\n \n )\n}\n```\n\n### Forcing a store update\n\nWhen the store is updated, Statery will check which of the properties within the update object are actually different objects (or scalar values) from the previous state, and will only notify listeners to those properties.\n\nIn some cases, you may want to force a store update even though the property has not changed to a new object. For these situations, the `set` function allows you to pass a second argument; if this is set to `true`, Statery will ignore the equality check and notify all listeners to the properties included in the update.\n\nExample:\n\n```tsx\nconst store = makeStore({\n rotation: new THREE.Vector3()\n})\n\nexport const randomizeRotation = () =>\n store.set(\n (state) => ({\n rotation: state.rotation.randomRotation()\n }),\n true\n )\n```\n\n### Subscribing to updates (imperatively)\n\nUse a store's `subscribe` function to register a callback that will be executed every time the store is changed.\nThe callback will receive both an object containing of the changes, as well as the store's current state.\n\n```ts\nconst store = makeStore({ count: 0 })\n\nconst listener = (changes, state) => {\n console.log(\"Applying changes:\", changes)\n}\n\nstore.subscribe(console.log)\nstore.set((state) => ({ count: state.count + 1 }))\nstore.unsubscribe(console.log)\n```\n\n### Async updates\n\nYour Statery store doesn't know or care about asynchronicity -- simply call `set` whenever your data is ready:\n\n```ts\nconst fetchPosts = async () => {\n const posts = await loadPosts()\n store.set({ posts })\n}\n```\n\n### TypeScript support\n\nStatery is written in TypeScript, and its stores are fully typed. `useStore` knows about the structure of your store, and if you're about to update a store with a property that it doesn't know about, TypeScript will warn you.\n\nIf the state structure `makeStore` infers from its initial state argument is not what you want, you can explicitly pass a store type to `makeStore`:\n\n```tsx\nconst store = makeStore<{ name?: string }>({})\nstore.set({ name: \"Statery\" }) // โ All good\nstore.set({ foo: 123 }) // ๐ญ TypeScript warning\n```\n\n## NOTES\n\n### Stuff that probably needs work\n\n- [ ] No support for middleware yet. Haven't decided on an API that is adequately simple.\n\n### Prior Art & Credits\n\nStatery was born after spending a lot of time with the excellent state management libraries provided by the [Poimandres](https://github.com/pmndrs) collective, [Zustand] and [Valtio]. Statery started out as an almost-clone of Zustand, but with the aim of providing an even simpler API. The `useStore` hook API was inspired by Valtio's very nice `useProxy`.\n\nStatery is written and maintained by Hendrik Mans. [Get in touch on Twitter](https://twitter.com/hmans)!\n\n[demo]: https://codesandbox.io/s/statery-clicker-game-hjxk3?file=/src/App.tsx\n[zustand]: https://github.com/pmndrs/zustand\n[valtio]: https://github.com/pmndrs/valtio\n[immer]: https://github.com/immerjs/immer\n","readmeFilename":"README.md","gitHead":"1b1e34ef1f37d792fe479ba7c5f14236fb6d984f","_id":"statery@0.0.0-canary-20220820183424","_nodeVersion":"18.7.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-32/eMCsVQ+bmKbWTb/seG2u4pGBNSEr8btmltmE+Mv17mI1IqOdUdBow0DM00rK32MgcmCcXRDTWjj+/FM3Mnw==","shasum":"c18bb11b7a3bd6bb5ab907dec24f25d0ea2245b8","tarball":"https://registry.npmjs.org/statery/-/statery-0.0.0-canary-20220820183424.tgz","fileCount":2275,"unpackedSize":19576195,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz2cjbmxHrds75ypGrfIGfZftePUvC2EIkRw4fUcxEiQIgJm88pkAbwOewUWOBg1TDATcuYBpDj0Ezef/3kKWDXFg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjASloACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA+A//Yz7U8INCF3Zc9LhkFf0wOAxnCX1KhbOAn/r5LQKn8Vm5BISY\r\nyA7G1cwkfhGBQqjT07rmjzTx/V9vaxjemBVH1BoTjYFBJ9hVAXPZuZVuGSrI\r\nBNpBAd3i9CyTI1M1uEa1yKCRgpFCwdEQSigIxCPJ36zcQlZqI73h6YB2wR+e\r\n1pOaUassoAcuSjVwpSUVNp/ZRiioh9h1SYgvcTyqTiJJqLAPefxZ7Na6iTX3\r\nVGMyzELbSJYobcNfCod8rHtWtnKPUYhMiwXiP/+uKnEVOnLPmEdT9xlx93cf\r\n098BZvPglo4fK6vC7v6XKEgAI0yjetuEGe1xscamxHF3ak8obZNpdm9tAKgt\r\n/4Hyj03TNT9Ssia/GJPUQgAqUD+swVkMq5D7Bh5qX0xStwRiU/rI3KaKN7Zr\r\n7ogZ5qudu/anXAH/TX3aXDICkGIwS3Rd+3kJo08xwCvC35/y7n9kpRudZuCM\r\nMpLC/d8bbv32AhNpySOPY0eIQrAZcS5Dk26pizBBX0/nuX4+CcnC3I+33K6l\r\nUVNOQp1ok1bQT3SapeZBP9pSlykEzK7M4M0a+Uqw7QkwaerJffPfzqgfQImC\r\njmGwhVyu60bJoKTH5fpE14mbYi9Dds6iJCcwBVh3Lughz4dZaJb5U58Csrrg\r\nKBhGrzoO+czBP7xoNphKYXP9qUVy3fAnSYQ=\r\n=98V6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.0.0-canary-20220820183424_1661020520704_0.37608343057556315"},"_hasShrinkwrap":false},"0.6.0-next.2":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.6.0-next.2","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","license":"MIT","scripts":{"clean":"rimraf dist","dev":"yarn clean && rollup -c -w","build":"yarn clean && rollup -c","test":"jest","docs":"typedoc src/index.ts","release":"yarn build && yarn test && yarn changeset publish"},"devDependencies":{"@changesets/cli":"^2.24.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","rollup":"^2.35.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.32.1","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"readme":"[](https://www.npmjs.com/package/statery)\n[](https://github.com/hmans/statery/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/statery)\n[](https://bundlephobia.com/result?p=statery)\n\n```\n ๐ฅ โญ๏ธ ๐ฅ โจ\n โจ โจ\n โโโโโโโโโโโโโโโโโ โโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โโโ โโโโโโ โจ\n โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโโโ โโโ โญ๏ธ โจ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโ โโโ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ ๐ฅ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ\n โจ โจ โญ๏ธ\n SURPRISE-FREE STATE MANAGEMENT! ๐ฅ\n โจ\n```\n\n### Features ๐\n\n- Simple, **noise- and surprise-free API**. Check out the [demo]!\n- **Extremely compact**, both in bundle size as well as API surface (2 exported functions!)\n- Fully **tested**, fully **typed**!\n- **Designed for React** (with functional components and hooks), but can also be used **without it**.\n\n### Non-Features ๐งค\n\n- Doesn't use **React Context** (but you can easily use it to provide a context-specific store!)\n- Provides a simple `set` function for updating a store and not much else (have you checked out the [demo] yet?) If you want to use **reducers** or libraries like [Immer], these can easily sit on top of your Statery store.\n- Currently no support for (or concept of) **middlewares**, but this may change in the future.\n- While the `useStore` hook makes use of **proxies**, the store contents themselves are never wrapped in proxy objects. (If you're looking for a fully proxy-based solution, I recommend [Valtio].)\n- **React Class Components** are not supported (but PRs welcome!)\n\n## SUMMARY\n\n```tsx\nimport { makeStore, useStore } from \"statery\"\n\n/* Make a store */\nconst store = makeStore({ counter: 0 })\n\n/* Write some code that updates it */\nconst increment = () =>\n store.set((state) => ({\n counter: state.counter + 1\n }))\n\nconst Counter = () => {\n /* Fetch data from the store (and automatically re-render\n when it changes!) */\n const { counter } = useStore(store)\n\n return (\nCounter: {counter}
\n \n\n \n \n
\n )\n}\n```\n\nUpdates will be shallow-merged with the current state, meaning that top-level properties will be replaced, and properties you don't update will not be touched.\n\n### Reading from a Store (with React)\n\nWithin a React component, use the `useStore` hook to read data from the store:\n\n```tsx\nimport { useStore } from \"statery\"\n\nconst Wood = () => {\n const { wood } = useStore(store)\n\n returnWood: {wood}
\n}\n```\n\nWhen any of the data your components access changes in the store, they will automatically re-render.\n\n### Reading from a Store (without React)\n\nA Statery store provides access to its current state through its `state` property:\n\n```ts\nconst store = makeStore({ count: 0 })\nconsole.log(store.state.count)\n```\n\nYou can also imperatively [subscribe to updates](#subscribing-to-updates-imperatively).\n\n## ADVANCED USAGE\n\n### Deriving Values from a Store\n\nJust like mutations, functions that derive values from the store's state can be written as standalone functions:\n\n```tsx\nconst canBuyHouse = ({ wood, gold }) => wood >= 5 && gold >= 5\n```\n\nThese will work from within plain imperative JavaScript code...\n\n```tsx\nif (canBuyHouse(store.state)) {\n console.log(\"Let's buy a house!\")\n}\n```\n\n...mutation code...\n\n```tsx\nconst buyHouse = () =>\n store.set((state) =>\n canBuyHouse(state)\n ? {\n wood: state.wood - 5,\n gold: state.gold - 5,\n houses: state.houses + 1\n }\n : {}\n )\n```\n\n...as well as React components, which will automatically be rerendered if any of the underlying data changes:\n\n```tsx\nconst BuyHouseButton = () => {\n const proxy = useStore(store)\n\n return (\n \n )\n}\n```\n\n### Forcing a store update\n\nWhen the store is updated, Statery will check which of the properties within the update object are actually different objects (or scalar values) from the previous state, and will only notify listeners to those properties.\n\nIn some cases, you may want to force a store update even though the property has not changed to a new object. For these situations, the `set` function allows you to pass a second argument; if this is set to `true`, Statery will ignore the equality check and notify all listeners to the properties included in the update.\n\nExample:\n\n```tsx\nconst store = makeStore({\n rotation: new THREE.Vector3()\n})\n\nexport const randomizeRotation = () =>\n store.set(\n (state) => ({\n rotation: state.rotation.randomRotation()\n }),\n true\n )\n```\n\n### Subscribing to updates (imperatively)\n\nUse a store's `subscribe` function to register a callback that will be executed every time the store is changed.\nThe callback will receive both an object containing of the changes, as well as the store's current state.\n\n```ts\nconst store = makeStore({ count: 0 })\n\nconst listener = (changes, state) => {\n console.log(\"Applying changes:\", changes)\n}\n\nstore.subscribe(console.log)\nstore.set((state) => ({ count: state.count + 1 }))\nstore.unsubscribe(console.log)\n```\n\n### Async updates\n\nYour Statery store doesn't know or care about asynchronicity -- simply call `set` whenever your data is ready:\n\n```ts\nconst fetchPosts = async () => {\n const posts = await loadPosts()\n store.set({ posts })\n}\n```\n\n### TypeScript support\n\nStatery is written in TypeScript, and its stores are fully typed. `useStore` knows about the structure of your store, and if you're about to update a store with a property that it doesn't know about, TypeScript will warn you.\n\nIf the state structure `makeStore` infers from its initial state argument is not what you want, you can explicitly pass a store type to `makeStore`:\n\n```tsx\nconst store = makeStore<{ name?: string }>({})\nstore.set({ name: \"Statery\" }) // โ All good\nstore.set({ foo: 123 }) // ๐ญ TypeScript warning\n```\n\n## NOTES\n\n### Stuff that probably needs work\n\n- [ ] No support for middleware yet. Haven't decided on an API that is adequately simple.\n\n### Prior Art & Credits\n\nStatery was born after spending a lot of time with the excellent state management libraries provided by the [Poimandres](https://github.com/pmndrs) collective, [Zustand] and [Valtio]. Statery started out as an almost-clone of Zustand, but with the aim of providing an even simpler API. The `useStore` hook API was inspired by Valtio's very nice `useProxy`.\n\nStatery is written and maintained by Hendrik Mans. [Get in touch on Twitter](https://twitter.com/hmans)!\n\n[demo]: https://codesandbox.io/s/statery-clicker-game-hjxk3?file=/src/App.tsx\n[zustand]: https://github.com/pmndrs/zustand\n[valtio]: https://github.com/pmndrs/valtio\n[immer]: https://github.com/immerjs/immer\n","readmeFilename":"README.md","gitHead":"987c656ae069d35d55658cc279e39d03915896f5","_id":"statery@0.6.0-next.2","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-R52hnY8TWIOh2EQf5/uXAUHHEXiK2JgFQQ0NCQZeyCscmkrwrqmVYpau62xd7ZOhsAlwNd7CTrUX6tKvi1tDgQ==","shasum":"487460ae2fff44c3e4ab90d9e31a6ea375409097","tarball":"https://registry.npmjs.org/statery/-/statery-0.6.0-next.2.tgz","fileCount":30,"unpackedSize":232419,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCQCrPBSOjkqr1Q3oQhIG/N0c+ipfeIOBgCwUvjWK5NgIhAMJ1/6GobmkN992iHZoo8YqxgOvvNy8669Vi6z+QnHIH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjATjwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoyng/+P4GvN6IOKCgOU9VCulcFNa+fqQjtmEMpd8JOIObfnZSU+LCb\r\ncYKT3/0hhNO6+NZZaGwf54/4kEXpbAPQ835ghk8YZPbxkwTwiN2OcfwP0Zq9\r\nXV5cUWA03pml0o3+0nGHqaaKV9kbzi/1tcG1P3JW8MkOyB8ofjc5iTTPvgIA\r\ndzLuJV8GifulNblpwJmp/mC+tcqcZ4s90sNVGoprT2QPSOCXe3WKpgApXr9c\r\nyvP42ldhtNDbeKV0ekcVCbosf02BKWvRJA7kNf8nLIAT7mYgUs14VZb1Mf8N\r\nZHok8MLgI+iti5fyPkVS01XKB333ASBNPooMZ1Lf1nwT7ko/feb4cG9Nceby\r\nrWOT9hLmhw8s0JZVT3xoM/Sm5eaJtitndsMjk/n5hMMFxnotIMCl5TtWVVvn\r\nTPZLAIDssdtsNkiazQdGnmJrsAyBiYBoQ4L3JVoliSiJJprx2AeBNUdvz6Vx\r\nxIvWv81ZRMI7uRmd6/pFE7E3HNoU5mLTQAT+jDjUes0gIMDQ12AyJagfmcAj\r\nSiPfIE/Fo5402Juwak5ME1ls7x/hgZjEHyjsfoUTC4QZbdkIHQfctsJ5wGB3\r\ncMQGN/iypvzVRGlHeQv/xwOMI1l//LAO9WEFdcEuf6TPnVitpprQ+1/HXGyo\r\nMYMLdmZbIaeO1UxCu2dwma4CV/fwfyFMu6I=\r\n=ZyBx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.6.0-next.2_1661024496602_0.5784947513782417"},"_hasShrinkwrap":false},"0.6.0-next.3":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.6.0-next.3","main":"dist/statery.cjs.js","module":"dist/statery.esm.js","types":"dist/statery.cjs.js","license":"MIT","babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"devDependencies":{"@babel/core":"^7.19.0","@babel/preset-env":"^7.19.0","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@changesets/cli":"^2.24.1","@preconstruct/cli":"^2.2.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"scripts":{"clean":"rimraf dist","dev":"preconstruct dev","build":"preconstruct build","test":"jest","docs":"typedoc src/index.ts","ci":"preconstruct validate && pnpm build && pnpm test","ci:version":"changeset version && pnpm install --no-frozen-lockfile","ci:release":"pnpm ci && pnpm changeset publish"},"readme":"[](https://www.npmjs.com/package/statery)\n[](https://github.com/hmans/statery/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/statery)\n[](https://bundlephobia.com/result?p=statery)\n\n```\n ๐ฅ โญ๏ธ ๐ฅ โจ\n โจ โจ\n โโโโโโโโโโโโโโโโโ โโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โโโ โโโโโโ โจ\n โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโโโ โโโ โญ๏ธ โจ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโ โโโ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ ๐ฅ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ\n โจ โจ โญ๏ธ\n SURPRISE-FREE STATE MANAGEMENT! ๐ฅ\n โจ\n```\n\n### Features ๐\n\n- Simple, **noise- and surprise-free API**. Check out the [demo]!\n- **Extremely compact**, both in bundle size as well as API surface (2 exported functions!)\n- Fully **tested**, fully **typed**!\n- **Designed for React** (with functional components and hooks), but can also be used **without it**.\n\n### Non-Features ๐งค\n\n- Doesn't use **React Context** (but you can easily use it to provide a context-specific store!)\n- Provides a simple `set` function for updating a store and not much else (have you checked out the [demo] yet?) If you want to use **reducers** or libraries like [Immer], these can easily sit on top of your Statery store.\n- Currently no support for (or concept of) **middlewares**, but this may change in the future.\n- While the `useStore` hook makes use of **proxies**, the store contents themselves are never wrapped in proxy objects. (If you're looking for a fully proxy-based solution, I recommend [Valtio].)\n- **React Class Components** are not supported (but PRs welcome!)\n\n## SUMMARY\n\n```tsx\nimport { makeStore, useStore } from \"statery\"\n\n/* Make a store */\nconst store = makeStore({ counter: 0 })\n\n/* Write some code that updates it */\nconst increment = () =>\n store.set((state) => ({\n counter: state.counter + 1\n }))\n\nconst Counter = () => {\n /* Fetch data from the store (and automatically re-render\n when it changes!) */\n const { counter } = useStore(store)\n\n return (\nCounter: {counter}
\n \n\n \n \n
\n )\n}\n```\n\nUpdates will be shallow-merged with the current state, meaning that top-level properties will be replaced, and properties you don't update will not be touched.\n\n### Reading from a Store (with React)\n\nWithin a React component, use the `useStore` hook to read data from the store:\n\n```tsx\nimport { useStore } from \"statery\"\n\nconst Wood = () => {\n const { wood } = useStore(store)\n\n returnWood: {wood}
\n}\n```\n\nWhen any of the data your components access changes in the store, they will automatically re-render.\n\n### Reading from a Store (without React)\n\nA Statery store provides access to its current state through its `state` property:\n\n```ts\nconst store = makeStore({ count: 0 })\nconsole.log(store.state.count)\n```\n\nYou can also imperatively [subscribe to updates](#subscribing-to-updates-imperatively).\n\n## ADVANCED USAGE\n\n### Deriving Values from a Store\n\nJust like mutations, functions that derive values from the store's state can be written as standalone functions:\n\n```tsx\nconst canBuyHouse = ({ wood, gold }) => wood >= 5 && gold >= 5\n```\n\nThese will work from within plain imperative JavaScript code...\n\n```tsx\nif (canBuyHouse(store.state)) {\n console.log(\"Let's buy a house!\")\n}\n```\n\n...mutation code...\n\n```tsx\nconst buyHouse = () =>\n store.set((state) =>\n canBuyHouse(state)\n ? {\n wood: state.wood - 5,\n gold: state.gold - 5,\n houses: state.houses + 1\n }\n : {}\n )\n```\n\n...as well as React components, which will automatically be rerendered if any of the underlying data changes:\n\n```tsx\nconst BuyHouseButton = () => {\n const proxy = useStore(store)\n\n return (\n \n )\n}\n```\n\n### Forcing a store update\n\nWhen the store is updated, Statery will check which of the properties within the update object are actually different objects (or scalar values) from the previous state, and will only notify listeners to those properties.\n\nIn some cases, you may want to force a store update even though the property has not changed to a new object. For these situations, the `set` function allows you to pass a second argument; if this is set to `true`, Statery will ignore the equality check and notify all listeners to the properties included in the update.\n\nExample:\n\n```tsx\nconst store = makeStore({\n rotation: new THREE.Vector3()\n})\n\nexport const randomizeRotation = () =>\n store.set(\n (state) => ({\n rotation: state.rotation.randomRotation()\n }),\n true\n )\n```\n\n### Subscribing to updates (imperatively)\n\nUse a store's `subscribe` function to register a callback that will be executed every time the store is changed.\nThe callback will receive both an object containing of the changes, as well as the store's current state.\n\n```ts\nconst store = makeStore({ count: 0 })\n\nconst listener = (changes, state) => {\n console.log(\"Applying changes:\", changes)\n}\n\nstore.subscribe(console.log)\nstore.set((state) => ({ count: state.count + 1 }))\nstore.unsubscribe(console.log)\n```\n\n### Async updates\n\nYour Statery store doesn't know or care about asynchronicity -- simply call `set` whenever your data is ready:\n\n```ts\nconst fetchPosts = async () => {\n const posts = await loadPosts()\n store.set({ posts })\n}\n```\n\n### TypeScript support\n\nStatery is written in TypeScript, and its stores are fully typed. `useStore` knows about the structure of your store, and if you're about to update a store with a property that it doesn't know about, TypeScript will warn you.\n\nIf the state structure `makeStore` infers from its initial state argument is not what you want, you can explicitly pass a store type to `makeStore`:\n\n```tsx\nconst store = makeStore<{ name?: string }>({})\nstore.set({ name: \"Statery\" }) // โ All good\nstore.set({ foo: 123 }) // ๐ญ TypeScript warning\n```\n\n## NOTES\n\n### Stuff that probably needs work\n\n- [ ] No support for middleware yet. Haven't decided on an API that is adequately simple.\n\n### Prior Art & Credits\n\nStatery was born after spending a lot of time with the excellent state management libraries provided by the [Poimandres](https://github.com/pmndrs) collective, [Zustand] and [Valtio]. Statery started out as an almost-clone of Zustand, but with the aim of providing an even simpler API. The `useStore` hook API was inspired by Valtio's very nice `useProxy`.\n\nStatery is written and maintained by Hendrik Mans. [Get in touch on Twitter](https://twitter.com/hmans)!\n\n[demo]: https://codesandbox.io/s/statery-clicker-game-hjxk3?file=/src/App.tsx\n[zustand]: https://github.com/pmndrs/zustand\n[valtio]: https://github.com/pmndrs/valtio\n[immer]: https://github.com/immerjs/immer\n","readmeFilename":"README.md","gitHead":"8b2580410d047ad7031b7fcd9e3d9c04bab8ecd5","_id":"statery@0.6.0-next.3","_integrity":"sha512-ryFCmW+8wb31UL/O2HynXt3bggB8vyiBYHSD0Hmaatb8EESnwlp+I8BtiQLMsiN4sorhJx21jRtu8J7VBtGr1A==","_resolved":"/tmp/4d04d5bd00366c22e063b3280f495b5d/statery-0.6.0-next.3.tgz","_from":"file:statery-0.6.0-next.3.tgz","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-ryFCmW+8wb31UL/O2HynXt3bggB8vyiBYHSD0Hmaatb8EESnwlp+I8BtiQLMsiN4sorhJx21jRtu8J7VBtGr1A==","shasum":"b0da39cd11d0dac8afd5ea60e8974ea7a4c6a7f8","tarball":"https://registry.npmjs.org/statery/-/statery-0.6.0-next.3.tgz","fileCount":378,"unpackedSize":6195825,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8mk4rvc5MeuVZ9APzzkT1h+AOVE8leJG8ZbSgs9hidAiEA09GBJGtRNcyfh0DOfmoRc8Nyrb4SUHhDZ9sYB/16tP0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG3hpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcsRAAiRyVvtApJ3e3HraKsyM+cIexcVqifuHVMa7zSLwDelP+P0ez\r\nW/8nS2wVZl24fPDxZmcxpoUSo9yJpdn3muL0EPK5vzKBJ7uocdpG6JiXm5rL\r\nQClIUhoL535FfmQPW5IVI+ZOIveA6OQyUgoj7I/txt+urtSBadT93RwKemyl\r\nR8nQXFwFJ1p1E9Hbk0TPJtYP+CBQPwrMFG80GUE1HE78WkMiOg3tJTJfWI/O\r\nAya7gy0k1s4fhhdXBqyoVh1x7V0amWLRi9JI2SPGKFZeoMTzl7KMHHJxVd4t\r\ndWdK9tnaZOI8jDGDaik6vKvIPclhGVtPyIg7Q0IiAar+s/zI7xLCCBo65YFX\r\n4V7BYYm8QtagyMU8TfJZBpKGoFo4mp4p+Y1DtK+36V1GRLUkjNRyrSJKz7a4\r\ncImyAsCrpmcwZtFpCOWadXwWoqMsnquScsgGy5T248fTPBuFgMI23w3lmxFX\r\nJMG2HPGt4j2wBiQv51unkNCFDZ4AgMuUhkH5kmMltCCH94lwW98O50vnGXsX\r\nJthH91Nht92ZB+AL0FDrjr5Z4mvO/OITNrKsoW/+/YIIwKO4QhqEbt9zrluq\r\nzAqO/d+yVIiG+dKvqMiGw2k5ffC7kGIiUEO3Zd7ZSKWNc3aGKZ83Zi/plwOf\r\nFJy1gu1QCyzo8+AFDzdFkVVe2AtYfyJmzm4=\r\n=6B3R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.6.0-next.3_1662744681123_0.2614968281791701"},"_hasShrinkwrap":false},"0.6.0":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.6.0","main":"dist/statery.cjs.js","module":"dist/statery.esm.js","types":"dist/statery.cjs.js","license":"MIT","babel":{"comments":false,"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"devDependencies":{"@babel/core":"^7.19.0","@babel/preset-env":"^7.19.0","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@changesets/cli":"^2.24.1","@preconstruct/cli":"^2.2.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.19","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"scripts":{"clean":"rimraf dist","dev":"preconstruct dev","build":"preconstruct build","test":"jest","docs":"typedoc src/index.ts","ci":"preconstruct validate && pnpm build && pnpm test","ci:version":"changeset version && pnpm install --no-frozen-lockfile","ci:release":"pnpm ci && pnpm changeset publish"},"_id":"statery@0.6.0","_integrity":"sha512-5JrgU+Jrc1YI/UFIl9XwJ38Brvu613jo5JnUVsDjQo3dM/XVBtZdjJxPYMHQXNEZqDmwvL8B0iGzzDz7u7Zx0Q==","_resolved":"/tmp/90d36fa6f805696c759acf7c7bc5486a/statery-0.6.0.tgz","_from":"file:statery-0.6.0.tgz","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-5JrgU+Jrc1YI/UFIl9XwJ38Brvu613jo5JnUVsDjQo3dM/XVBtZdjJxPYMHQXNEZqDmwvL8B0iGzzDz7u7Zx0Q==","shasum":"d08e8db234ec9346c8b498599a51304b0cfd0760","tarball":"https://registry.npmjs.org/statery/-/statery-0.6.0.tgz","fileCount":9,"unpackedSize":37459,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCf5ZuDgWyoz/5cnoewIMrcSHaNQ8DGlZiYB/wwXi2AFQIhAJ8Crbf+UUjyVZobgCRfyI8UJPlJwJ66iXYhcfauf6ev"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIIJHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSNRAAhFWpmpkrt/iun0qAk+aUrOhy9O0T7XSbIQapyZyT10W8UKrb\r\npuBUi326A6lF5D7B6IpNZwu9mvqGD7OQ+d5yGmOJRchqvS/c98bm1Tf/gQw0\r\nOQBO7IwCTv5bo3Qu21OZkFHG6+QJfYe4GUGHjN9gh+0sPFyalp30FTvxVmz6\r\noObAfvrPGLUqMi76bLNeYRxS83DpNegFZoEkqh2ZjAsYcnQ42w/aerat3lg0\r\n7ym6XgA5jkeddmNMUFkczFS5oaFLz0aGYLahEV3G/1yC++VOOV4KXutUiQMT\r\nX3N/0GMXc/6UGuZp4xhSXIpZqrM3HSkOe+f7eTCbDDH2VP1IqQG8lEzanDNE\r\n1mET3+XqUZGWjHc2nyp34lt4+R5rEw7jqnm0mf7FulRNdLhVp6yf2vKE37XG\r\nCB1/pXgDVE/MoIzUpSl5z/xjrrBvTEp8haClGGgVXum+sJTjl5QriMPyzMgW\r\numZ2EAIXwG5LAuZ0rG2qaoLbqcrVJSS4xJkPlvrgrtmno9h3v4tXyB3CldFF\r\ngi98pnFF92q+uQcpPjmbhtV3T7STYtwoLZHI96V7mvRRqFP4S5GdV2GVQEV1\r\nfxU04rN/RKi9Y7CfY/LVqWelG7bEf/iF90B0lew0+iEMDbBFl9cNBn//2fGS\r\nbioSBn8b1hdn939wdGRHGVH4yXMyZS3UwtA=\r\n=xHPd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.6.0_1663074887149_0.5865814161454264"},"_hasShrinkwrap":false},"0.6.1":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.6.1","main":"dist/statery.cjs.js","module":"dist/statery.esm.js","types":"dist/statery.cjs.js","license":"MIT","babel":{"comments":false,"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"devDependencies":{"@babel/core":"^7.19.0","@babel/preset-env":"^7.19.0","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@changesets/cli":"^2.24.1","@preconstruct/cli":"^2.2.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.19","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"scripts":{"clean":"rimraf dist","dev":"preconstruct dev","build":"preconstruct build","test":"jest","docs":"typedoc src/index.ts","ci":"preconstruct validate && pnpm build && pnpm test","ci:version":"changeset version && pnpm install --no-frozen-lockfile","ci:release":"pnpm ci && pnpm changeset publish"},"_id":"statery@0.6.1","_integrity":"sha512-aeMcn95qlZk7MsK3ZYzL4i/KgN+BKa1zGnNyothqQgyktg9DiUZvERVsxgP7Ah0xBKqjLXiRQ9mmRoak0d+vsg==","_resolved":"/tmp/a47d7cc48b257868e29190d086543fb6/statery-0.6.1.tgz","_from":"file:statery-0.6.1.tgz","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-aeMcn95qlZk7MsK3ZYzL4i/KgN+BKa1zGnNyothqQgyktg9DiUZvERVsxgP7Ah0xBKqjLXiRQ9mmRoak0d+vsg==","shasum":"6ca8bb8cd704a3ed7c0e82f747084bdeb9767e19","tarball":"https://registry.npmjs.org/statery/-/statery-0.6.1.tgz","fileCount":9,"unpackedSize":37285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEToFAiqjMGEY4XGbiVKBbR4tXJ1gwiHD0cE8PGGxdZSAiEA+vEr9F2XIlzI13ESRLLbyIozVco4K0eGl29m0rDtOuA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJMRrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFpw/6Ao+1hJedaiFjk94NolTU+52AqiwPli3H3qajzfXMpatReD1L\r\naAA5R3mltfuH4/xK72PkgR3GA4KDQm+bHsroVjv8bWsinTnWrMnA//LzYb5d\r\nbOaX8RxoJBsvOQZK/Abu1zdFvNlD7sfUXLSLYJdNpJlGFkVRM2zIwm91EIfT\r\n7VaKhIuqxGxs6gMjVqUeEZihzmNQrOTVtDb4y7REDkCqwpYv9RJYaDYfICFo\r\n9onqHnqjQOQqfnQVVzAtRnmc8qHAWqCGfM8AROsm3lERcYJ9FizlYJ1sXmLL\r\nbxTB72pjz4cCNGifqjuO4figwzQZOPWuZyl5QXcKa0zFpjiZIbBdoXflg3BA\r\nhW6IT4JoyPJ8w99p44g/FVjC7EZ/nhgdQvy5eO3MjiKFqa+OmYxKQxwJQzji\r\nJQZ9VlI9eFhBOqIc698ttxjJuMsyf8XEmXKkghvFZznHOaSE/XX2yY3cheK2\r\n/5dD3EBsHky36jq8RnuL9VQr4IGywGdpr8qxt6O+7LeYXUSob7mlWnpGVDb6\r\np5et+bplGX90xch2ZBjNMmJQvC7A2AkdlrgpilblMIhpH8t0rQyJf4pG9ybc\r\npzkOrWqMei86+XoJniBcjpyM41vPBemJcnPHSIylswvapKqPk66EhrTudZGz\r\nL8WCJbWZR3bjSgJafArWqu1uTw1zKqMLaWw=\r\n=gAjh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.6.1_1663353963186_0.28374347077758055"},"_hasShrinkwrap":false},"0.6.2":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.6.2","main":"dist/statery.cjs.js","module":"dist/statery.esm.js","types":"dist/statery.cjs.js","license":"MIT","babel":{"comments":false,"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"devDependencies":{"@babel/core":"^7.19.0","@babel/preset-env":"^7.19.0","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@changesets/cli":"^2.24.1","@preconstruct/cli":"^2.2.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.19","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"scripts":{"clean":"rimraf dist","dev":"preconstruct dev","build":"preconstruct build","test":"jest","docs":"typedoc src/index.ts","ci":"preconstruct validate && pnpm build && pnpm test","ci:version":"changeset version && pnpm install --no-frozen-lockfile","ci:release":"pnpm ci && pnpm changeset publish"},"_id":"statery@0.6.2","_integrity":"sha512-mO5ZMjDTZOpIMDM/wry8SDQ6pDyQaJTnBsDC2DvEfMfG44SCldw8sDuqMOjc2gLtFShuG0TZ6Ysbithzzq5T8g==","_resolved":"/tmp/a37d41df6c741018a2119d00bf9e9977/statery-0.6.2.tgz","_from":"file:statery-0.6.2.tgz","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-mO5ZMjDTZOpIMDM/wry8SDQ6pDyQaJTnBsDC2DvEfMfG44SCldw8sDuqMOjc2gLtFShuG0TZ6Ysbithzzq5T8g==","shasum":"ca44096b15c85f7c8314cf59a08fff48fb096f94","tarball":"https://registry.npmjs.org/statery/-/statery-0.6.2.tgz","fileCount":9,"unpackedSize":37534,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGhCgh6+4uVeFLkfIAsjkZdWMgiyInWpsw60LE5rGNmgIhAPR4k9qx9w0YjObXUxhfLGhsJWUbdypDlsYw1kUyGU+F"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJWNJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrPQ//ehqMAK5Rno8c6VPZ+3a5l+FrWlGsnGx8Tb0S2ktFaEvg6mL1\r\nW0Tga8xSMDk4WJchZ+L+p30Ksn/EkF3PkEXcHgWcD8s4tyraNXJThhEsodAC\r\n392QjxxoZrEYlRF5g8wfZ+jp4505J6a9DfWCUQ4wE6ED4jIgzk6xbyQHMLEZ\r\n6oOcyrou67wWTVykDkXJbLN0yJo4KZN1WUym0E2W5Zm3EMlevZLLF7/psUCk\r\nIU/xbfrBgRahhjD7nMtabgANQo41IsUT1N16KO9NC6g0/7fSuZJsJ+Sfz9FS\r\nerOCeTilh0FQvMDcnLYVgmqzNw2bpduyM6vbE1XMNkKzb7B//zjti79d6HA4\r\nnp7iHVVsEb4ljsk/h8jGnvLmf4bDXIGVoUrNEUpfbWDqW7X1VYE0iuD4lDcd\r\nXZ+W3VQevN7Ee+YjT3eRQGzgMoAkVXG1PhYHBRJONcB8XI3pjsqNRSLitmS/\r\nss5pGoXO99swMmbiJzPCS69gnGKzNJCtb0MPJZxfWwo4ctC7X0zSfEH6y3IH\r\nYupN6K7FJyGokr2E+bDQ/ZLvy5DmJ6+myiQLKY/RzZXGOB9JltDUR9pp37qI\r\nRw3yMt/tgb40vAk20WVpGsy54OA617B4UvmyrnOZKJ3E+a9Y07aUpolPUl8V\r\nLM1T62uoSnlHLiDiTff3dOlXg+pwd7tvKxE=\r\n=VtsK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.6.2_1663394633453_0.8983388675659953"},"_hasShrinkwrap":false},"0.6.3":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.6.3","main":"dist/statery.cjs.js","module":"dist/statery.esm.js","types":"dist/statery.cjs.js","license":"MIT","babel":{"comments":false,"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"devDependencies":{"@babel/core":"^7.19.0","@babel/preset-env":"^7.19.0","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@changesets/cli":"^2.24.1","@preconstruct/cli":"^2.2.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.19","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"scripts":{"clean":"rimraf dist","dev":"preconstruct dev","build":"preconstruct build","test":"jest","docs":"typedoc src/index.ts","ci":"preconstruct validate && pnpm build && pnpm test","ci:version":"changeset version && pnpm install --no-frozen-lockfile","ci:release":"pnpm ci && pnpm changeset publish"},"_id":"statery@0.6.3","_integrity":"sha512-l4lrLF79kslh+tAnJXu8C5/N4VjPDqdR3KibPpCoFoNOj9H/U4+YaTcUN++CKMg9dz95uGypuVXeE5bzRFK4tQ==","_resolved":"/tmp/96822ce4ad2d83d9f4ee2b367d36bc1b/statery-0.6.3.tgz","_from":"file:statery-0.6.3.tgz","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-l4lrLF79kslh+tAnJXu8C5/N4VjPDqdR3KibPpCoFoNOj9H/U4+YaTcUN++CKMg9dz95uGypuVXeE5bzRFK4tQ==","shasum":"b0cd615c0de324e641f06013298b5438e354ed59","tarball":"https://registry.npmjs.org/statery/-/statery-0.6.3.tgz","fileCount":9,"unpackedSize":37884,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIELkbxKlE9xFNZx9XhTOQdKmUuXA7QWZWgiqyJnBSuh3AiEAvdnl7jaQMaS16FDTLjXxrBi7uCdQ9t6jCW9yspOAr7o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSkXdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC7w//eiDsLoDbQp48ldUzcc6cWq4V3tpEJ+npxSV426eJXeq87g5N\r\nYhAAoPdkJ9f/aPtIhZlQhRnTLRA+TVcQasnZ4UyU4r29JwSW2R9V/veZMJMM\r\nPD3BnaCoH+xG/2gm1w6IzLnsp+67uFVBrjk5kS8hqkWcepx2itvuyfdvhHBG\r\noVPQO5buxdhQzj987BHV9XuuymwpSSSdH3ZfSrlnqDthyZ6RJD1A8sadjkYk\r\nZWh7P4rJmNgd4kRaTznimFm2SZwpUH2Jj+T+gmV210ypkcIZMjf0rYo6Cm/h\r\nG+bMVgGo5B/9B9iPtpMo3SKY6TYST3GjmDmY7kqbTtCSNj6byqxh4iCerRb5\r\nTyPgjar03c2e0vB5JGvyohV2jzNqqriv465cid5kPwEhTU6d1rSLhbY8B30K\r\n76YtuxbCNziiRfXZe7wF8298tiIZe6O/gKOOgApP3K7p4P9b5B0UhCb+g7Gf\r\nk5XqxOI8TWcIv5wjGu00CT5WHRs+OKYAEDsLat1nAEE4RB4v7txPt5Tx0fNk\r\n9Y1cPp4Qp2dzrB9bq2m+Cmr2VQocehCH54Br4BOZqFPZeGyuk1hmAVU3eUuz\r\nhIcevdixSb+FxZfv+Kn7n59yiuuwABjhOhj4BDwqc+f5ELWlfCSgD8OqCBAw\r\nHNShRO7BMm8GPuHKYbUc61NPCBzXHxfGGC8=\r\n=4E5s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.6.3_1665811933185_0.5700867772193634"},"_hasShrinkwrap":false},"0.0.0-canary-20230726060214":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.0.0-canary-20230726060214","main":"dist/statery.cjs.js","module":"dist/statery.esm.js","types":"dist/statery.cjs.js","license":"MIT","babel":{"comments":false,"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"devDependencies":{"@babel/core":"^7.19.0","@babel/preset-env":"^7.19.0","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@changesets/cli":"^2.24.1","@preconstruct/cli":"^2.2.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.6","@types/react":"^18.0.19","@types/react-dom":"^18.0.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","ts-jest":"^28.0.7","tslib":"^2.0.3","typedoc":"^0.23.9","typescript":"^4.1.3"},"peerDependencies":{"react":">=18.0"},"scripts":{"clean":"rimraf dist","dev":"preconstruct dev","build":"preconstruct build","test":"jest","docs":"typedoc src/index.ts","ci":"preconstruct validate && pnpm build && pnpm test","ci:version":"changeset version && pnpm install --no-frozen-lockfile","ci:release":"pnpm ci && pnpm changeset publish"},"readme":"```\n ๐ฅ โญ๏ธ ๐ฅ โจ\n โจ โจ\n โโโโโโโโโโโโโโโโโ โโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โโโ โโโโโโ โจ\n โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโโโ โโโ โญ๏ธ โจ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโ โโโ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ ๐ฅ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ\n โจ โจ โญ๏ธ\n SURPRISE-FREE STATE MANAGEMENT! ๐ฅ\n โจ\n```\n\n[](https://www.npmjs.com/package/statery)\n[](https://github.com/hmans/statery/actions?query=workflow%3ACI)\n[](https://www.npmjs.com/package/statery)\n[](https://bundlephobia.com/result?p=statery)\n\n### Features ๐\n\n- Simple, **noise- and surprise-free API**. Check out the [demo]!\n- **Extremely compact**, both in bundle size as well as API surface (2 exported functions!)\n- Fully **tested**, fully **typed**!\n- **Designed for React** (with functional components and hooks), but can also be used **without it**.\n\n### Non-Features ๐งค\n\n- Doesn't use **React Context** (but you can easily use it to provide a context-specific store!)\n- Provides a simple `set` function for updating a store and not much else (have you checked out the [demo] yet?) If you want to use **reducers** or libraries like [Immer], these can easily sit on top of your Statery store.\n- Currently no support for (or concept of) **middlewares**, but this may change in the future.\n- While the `useStore` hook makes use of **proxies**, the store contents themselves are never wrapped in proxy objects. (If you're looking for a fully proxy-based solution, I recommend [Valtio].)\n- **React Class Components** are not supported (but PRs welcome!)\n\n### Comparison to Zustand\n\n[Zustand](https://github.com/pmndrs/zustand) is a lovely minimal state management library for React, and Statery may feel very similar to it. Here are the key differences:\n\n- In Zustand, **data and the functions that modify it are all stored in the same object**. I believe this to be architecturally unwise (the README even warns the user not to accidentally overwrite their store's API.) Furthermore, this leads to Zustand [not being able to infer the type](https://github.com/pmndrs/zustand/blob/main/docs/guides/typescript.md) of the state data from the `create` function's first argument, forcing you to provide it explicitly (including the API, because it's part of the state... and so on.)\n\n Statery doesn't share these problems; **stores _only_ contain data**. The store's type is inferred from the initial state passed into `makeStore`. You can either modify the state directly through `set`, or โ the recommended approach โ export an API for your store as a set of functions (see the examples in this document or the [demo] for what this looks like.)\n\n- When accessing data using Zustand's `useStore` hook, **it expects you to provide a selector function** that returns the data you want. Statery's `useStore` instead uses a **transparent proxy** that automatically registers all state properties you acceess. **You don't have to do anything special** to use this, and you never have to worry about causing re-renders for updated data your component isn't actually interested in.\n\n- Not that it matters much with packages this tiny, but Statery is _even smaller_ than Zustand (at roughly 50% the size.)\n\n## SUMMARY\n\n```tsx\nimport { value makeStore, value useStore } from \"statery\"\n\nconst store = makeStore({ counter: 0 })\n\nconst increment = () =>\n store.set((state) => ({\n counter: state.counter + 1\n }))\n\nconst Counter = () => {\n const { counter } = useStore(store)\n\n return (\nCounter: {counter}
\n \n\n \n \n
\n )\n}\n```\n\nUpdates will be shallow-merged with the current state, meaning that top-level properties will be replaced, and properties you don't update will not be touched.\n\n### Reading from a Store (with React)\n\nWithin a React component, use the `useStore` hook to read data from the store:\n\n```tsx\nimport { value useStore } from \"statery\"\n\nconst Wood = () => {\n const { wood } = useStore(store)\n\n returnWood: {wood}
\n}\n```\n\nWhen any of the data your components access changes in the store, they will automatically re-render.\n\n### Reading from a Store (without React)\n\nA Statery store provides access to its current state through its `state` property:\n\n```ts\nconst store = makeStore({ count: 0 })\nconsole.log(store.state.count)\n```\n\nYou can also imperatively [subscribe to updates](#subscribing-to-updates-imperatively).\n\n## ADVANCED USAGE\n\n### Deriving Values from a Store\n\nJust like mutations, functions that derive values from the store's state can be written as standalone functions:\n\n```tsx\nconst canBuyHouse = ({ wood, gold }) => wood >= 5 && gold >= 5\n```\n\nThese will work from within plain imperative JavaScript code...\n\n```tsx\nif (canBuyHouse(store.state)) {\n console.log(\"Let's buy a house!\")\n}\n```\n\n...mutation code...\n\n```tsx\nconst buyHouse = () =>\n store.set((state) =>\n canBuyHouse(state)\n ? {\n wood: state.wood - 5,\n gold: state.gold - 5,\n houses: state.houses + 1\n }\n : {}\n )\n```\n\n...as well as React components, which will automatically be rerendered if any of the underlying data changes:\n\n```tsx\nconst BuyHouseButton = () => {\n const proxy = useStore(store)\n\n return (\n \n )\n}\n```\n\n### Forcing a store update\n\nWhen the store is updated, Statery will check which of the properties within the update object are actually different objects (or scalar values) from the previous state, and will only notify listeners to those properties.\n\nIn some cases, you may want to force a store update even though the property has not changed to a new object. For these situations, the `set` function allows you to pass a second argument; if this is set to `true`, Statery will ignore the equality check and notify all listeners to the properties included in the update.\n\nExample:\n\n```tsx\nconst store = makeStore({\n rotation: new THREE.Vector3()\n})\n\nexport const randomizeRotation = () =>\n store.set(\n (state) => ({\n rotation: state.rotation.randomRotation()\n }),\n true\n )\n```\n\n### Subscribing to updates (imperatively)\n\nUse a store's `subscribe` function to register a callback that will be executed every time the store is changed.\nThe callback will receive both an object containing of the changes, as well as the store's current state.\n\n```ts\nconst store = makeStore({ count: 0 })\n\nconst listener = (changes, state) => {\n console.log(\"Applying changes:\", changes)\n}\n\nstore.subscribe(console.log)\nstore.set((state) => ({ count: state.count + 1 }))\nstore.unsubscribe(console.log)\n```\n\n### Async updates\n\nYour Statery store doesn't know or care about asynchronicity -- simply call `set` whenever your data is ready:\n\n```ts\nconst fetchPosts = async () => {\n const posts = await loadPosts()\n store.set({ posts })\n}\n```\n\n### TypeScript support\n\nStatery is written in TypeScript, and its stores are fully typed. `useStore` knows about the structure of your store, and if you're about to update a store with a property that it doesn't know about, TypeScript will warn you.\n\nIf the state structure `makeStore` infers from its initial state argument is not what you want, you can explicitly pass a store type to `makeStore`:\n\n```tsx\nconst store = makeStore<{ name?: string }>({})\nstore.set({ name: \"Statery\" })\nstore.set({ foo: 123 })\n```\n\n## NOTES\n\n### Stuff that probably needs work\n\n- [ ] No support for middleware yet. Haven't decided on an API that is adequately simple.\n\n### Prior Art & Credits\n\nStatery was born after spending a lot of time with the excellent state management libraries provided by the [Poimandres](https://github.com/pmndrs) collective, [Zustand] and [Valtio]. Statery started out as an almost-clone of Zustand, but with the aim of providing an even simpler API. The `useStore` hook API was inspired by Valtio's very nice `useProxy`.\n\nStatery is written and maintained by Hendrik Mans. [Get in touch on Twitter](https://twitter.com/hmans)!\n\n[demo]: https://codesandbox.io/s/statery-clicker-game-hjxk3?file=/src/App.tsx\n[zustand]: https://github.com/pmndrs/zustand\n[valtio]: https://github.com/pmndrs/valtio\n[immer]: https://github.com/immerjs/immer\n","readmeFilename":"README.md","_id":"statery@0.0.0-canary-20230726060214","_integrity":"sha512-0zUhE3SRYn2DHgElbuRev+wEJKIRVwXoH2gBV6lPttp0Ri+Kk8LRse00aGQ7ApZD+aemNXS02ydZHXxoO4tezA==","_resolved":"/private/var/folders/q0/yr9cgrlx4nj_87sv6bdwh02h0000gn/T/0891fe79a3bdd9f6ab7a1b3dcf664311/statery-0.0.0-canary-20230726060214.tgz","_from":"file:statery-0.0.0-canary-20230726060214.tgz","_nodeVersion":"20.4.0","_npmVersion":"9.7.2","dist":{"integrity":"sha512-0zUhE3SRYn2DHgElbuRev+wEJKIRVwXoH2gBV6lPttp0Ri+Kk8LRse00aGQ7ApZD+aemNXS02ydZHXxoO4tezA==","shasum":"870f4d52e907b75234846b1725ecc5f0e72fd283","tarball":"https://registry.npmjs.org/statery/-/statery-0.0.0-canary-20230726060214.tgz","fileCount":9,"unpackedSize":34403,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF4Wx8cSjcQ+NL5up7PGJjfJ9d+dEhEXINUloJx4/2bHAiAxpmRHDEUdEupCst+Ofr59M4Mjf/BB4ltBG+5pdUeTzw=="}]},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.0.0-canary-20230726060214_1690351360872_0.6520178280938871"},"_hasShrinkwrap":false},"0.7.0":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hmans.dev"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.7.0","main":"dist/statery.cjs.js","module":"dist/statery.esm.js","types":"dist/statery.cjs.d.ts","license":"MIT","babel":{"comments":false,"presets":["@babel/preset-env","@babel/preset-react","@babel/preset-typescript"]},"devDependencies":{"@babel/core":"^7.22.9","@babel/preset-env":"^7.22.9","@babel/preset-react":"^7.22.5","@babel/preset-typescript":"^7.22.5","@changesets/cli":"^2.26.2","@preconstruct/cli":"^2.8.1","@testing-library/react":"^14.0.0","@types/jest":"^29.5.3","@types/react":"^18.2.18","@types/react-dom":"^18.2.7","jest":"^29.6.2","jest-environment-jsdom":"^29.6.2","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^5.0.1","ts-jest":"^29.1.1","tslib":"^2.6.1","typescript":"^5.1.6"},"peerDependencies":{"react":">=18.0"},"peerDependenciesMeta":{"react":{"optional":true}},"scripts":{"clean":"rimraf dist","dev":"preconstruct dev","build":"preconstruct build","test":"jest","ci:test":"preconstruct validate && pnpm build && pnpm test","ci:version":"changeset version && pnpm install --no-frozen-lockfile","ci:release":"pnpm ci:test && pnpm changeset publish"},"_id":"statery@0.7.0","_integrity":"sha512-eB8Y2LNXOPcwavRgPLNpdTrYql8cOJF2cg6Q9JgIA3/vBa+0yJEUOBQcM5ayxCoptzmgr5/fBl4TKZa1yFOqRw==","_resolved":"/tmp/c8ddaeb9a22734944721e2d24134e83a/statery-0.7.0.tgz","_from":"file:statery-0.7.0.tgz","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-eB8Y2LNXOPcwavRgPLNpdTrYql8cOJF2cg6Q9JgIA3/vBa+0yJEUOBQcM5ayxCoptzmgr5/fBl4TKZa1yFOqRw==","shasum":"9d60da0a873290f472f78a0ae240c1b5b6896b9a","tarball":"https://registry.npmjs.org/statery/-/statery-0.7.0.tgz","fileCount":10,"unpackedSize":34034,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJ0wKoxfKYzg2hI+D1FVW9uFKnrgSn9bi7aQlvYsEzLAiEA2eCLZhTN3Oz382eHqTIRznqx36u919KryMGA5VuZ9oY="}]},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.7.0_1690872467256_0.9044688543456241"},"_hasShrinkwrap":false},"0.7.1":{"name":"statery","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hmans.dev"},"description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"],"sideEffects":false,"version":"0.7.1","main":"dist/statery.cjs.js","module":"dist/statery.esm.js","types":"dist/statery.cjs.d.ts","license":"MIT","babel":{"comments":false,"presets":["@babel/preset-env","@babel/preset-react","@babel/preset-typescript"]},"devDependencies":{"@babel/core":"^7.22.9","@babel/preset-env":"^7.22.9","@babel/preset-react":"^7.22.5","@babel/preset-typescript":"^7.22.5","@changesets/cli":"^2.26.2","@preconstruct/cli":"^2.8.1","@testing-library/react":"^14.0.0","@types/jest":"^29.5.3","@types/react":"^18.2.18","@types/react-dom":"^18.2.7","jest":"^29.6.2","jest-environment-jsdom":"^29.6.2","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^5.0.1","ts-jest":"^29.1.1","tslib":"^2.6.1","typescript":"^5.1.6"},"peerDependencies":{"react":">=18.0"},"peerDependenciesMeta":{"react":{"optional":true}},"scripts":{"clean":"rimraf dist","dev":"preconstruct dev","build":"preconstruct build","test:client":"jest --testPathIgnorePatterns=.server.test","test:server":"jest --testPathPattern=.server.test --env=node","test":"pnpm test:client && pnpm test:server","ci:test":"preconstruct validate && pnpm build && pnpm test","ci:version":"changeset version && pnpm install --no-frozen-lockfile","ci:release":"pnpm ci:test && pnpm changeset publish"},"_id":"statery@0.7.1","_integrity":"sha512-lx51dik6NMZc5Sc5QSqdkN/yrSjog3S6DKyToyxlq2Gs2pt9FNbBLv5EoY49uH/vWCBp6qXKmHfsalE2QDuxfg==","_resolved":"/tmp/3c01594eef911869f0d6adc8441dbf85/statery-0.7.1.tgz","_from":"file:statery-0.7.1.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-lx51dik6NMZc5Sc5QSqdkN/yrSjog3S6DKyToyxlq2Gs2pt9FNbBLv5EoY49uH/vWCBp6qXKmHfsalE2QDuxfg==","shasum":"54d0b5f0903897e097fdce57841e9c3f955679dd","tarball":"https://registry.npmjs.org/statery/-/statery-0.7.1.tgz","fileCount":10,"unpackedSize":34239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZ4g+XnVV43hhjycvxmyEaLaGs5aBhblwIAWOYW69wYAiAhDGMaFufG6z6Y6Zg6pS1s2A7282lerQRF5dJcL2yovw=="}]},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/statery_0.7.1_1693417344660_0.2265687177958129"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-16T12:29:27.570Z","0.0.1":"2020-12-16T12:29:27.721Z","modified":"2023-08-30T17:42:25.013Z","0.0.2":"2020-12-16T12:53:23.726Z","0.0.3":"2020-12-16T13:14:13.489Z","0.0.4":"2020-12-16T13:15:58.144Z","0.0.5":"2020-12-16T13:16:21.980Z","0.0.6":"2020-12-16T13:23:30.645Z","0.0.7":"2020-12-16T13:28:26.134Z","0.0.8":"2020-12-16T15:06:00.805Z","0.1.0":"2020-12-16T15:07:23.446Z","0.2.0":"2020-12-16T16:18:19.410Z","0.3.0":"2020-12-16T19:26:49.138Z","0.4.0-0":"2020-12-17T15:32:34.977Z","0.4.0":"2020-12-17T18:14:04.369Z","0.5.0":"2020-12-18T12:29:49.276Z","0.5.1":"2020-12-18T12:30:08.898Z","0.5.2":"2020-12-22T15:25:41.731Z","0.5.3":"2021-03-20T11:46:48.770Z","0.5.4":"2021-03-20T11:49:37.252Z","0.6.0-0":"2021-03-20T13:49:14.053Z","0.6.0-next.0":"2022-07-26T14:11:02.991Z","0.6.0-next.1":"2022-07-26T16:17:14.409Z","0.0.0-canary-20220820183424":"2022-08-20T18:35:20.953Z","0.6.0-next.2":"2022-08-20T19:41:36.777Z","0.6.0-next.3":"2022-09-09T17:31:21.464Z","0.6.0":"2022-09-13T13:14:47.351Z","0.6.1":"2022-09-16T18:46:03.348Z","0.6.2":"2022-09-17T06:03:53.621Z","0.6.3":"2022-10-15T05:32:13.448Z","0.0.0-canary-20230726060214":"2023-07-26T06:02:41.017Z","0.7.0":"2023-08-01T06:47:47.402Z","0.7.1":"2023-08-30T17:42:24.835Z"},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hmans.dev"},"license":"MIT","readme":"```\n ๐ฅ โญ๏ธ ๐ฅ โจ\n โจ โจ\n โโโโโโโโโโโโโโโโโ โโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โโโ โโโโโโ โจ\n โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโโโ โโโ โญ๏ธ โจ\n โโโโโโโโ โโโ โโโโโโโโ โโโ โโโโโโ โโโโโโโโ โโโโโ โโโ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ ๐ฅ\n โโโโโโโโ โโโ โโโ โโโ โโโ โโโโโโโโโโโ โโโ โโโ โโโ โจ\n โจ โจ โญ๏ธ\n SURPRISE-FREE STATE MANAGEMENT! ๐ฅ\n โจ\n```\n\n[](https://www.npmjs.com/package/statery)\n\n[](https://www.npmjs.com/package/statery)\n[](https://bundlephobia.com/result?p=statery)\n\n### Features ๐\n\n- Simple, **noise- and surprise-free API**. Check out the [demo]!\n- **Extremely compact**, both in bundle size as well as API surface (2 exported functions!)\n- Fully **tested**, fully **typed**!\n- **Designed for React** (with functional components and hooks), but can also be used **without it**, or with other frameworks (but you may need to bring your own glue.)\n\n### Non-Features ๐งค\n\n- Doesn't use **React Context** (but you can easily use it to provide a context-specific store!)\n- Provides a simple `set` function for updating a store and not much else (have you checked out the [demo] yet?) If you want to use **reducers** or libraries like [Immer], these can easily sit on top of your Statery store.\n- Currently no support for (or concept of) **middlewares**, but this may change in the future.\n- While the `useStore` hook makes use of **proxies**, the store contents themselves are never wrapped in proxy objects. (If you're looking for a fully proxy-based solution, I recommend [Valtio].)\n- **React Class Components** are not supported (but PRs welcome!)\n\n## SUMMARY\n\n```tsx\nimport { makeStore, useStore } from \"statery\"\n\nconst store = makeStore({ counter: 0 })\n\nconst increment = () =>\n store.set((state) => ({\n counter: state.counter + 1\n }))\n\nconst Counter = () => {\n const { counter } = useStore(store)\n\n return (\nCounter: {counter}
\n \n\n \n \n
\n )\n}\n```\n\nUpdates will be shallow-merged with the current state, meaning that top-level properties will be replaced, and properties you don't update will not be touched.\n\n### Reading from a Store (with React)\n\nWithin a React component, use the `useStore` hook to read data from the store:\n\n```tsx\nimport { value useStore } from \"statery\"\n\nconst Wood = () => {\n const { wood } = useStore(store)\n\n returnWood: {wood}
\n}\n```\n\nWhen any of the store's properties that your component accesses are updated, they will automatically re-render, automatically receiving the new state.\n\n### Reading from a Store (without React)\n\nA Statery store provides access to its current state through its `state` property:\n\n```ts\nconst store = makeStore({ count: 0 })\nconsole.log(store.state.count)\n```\n\nYou can also imperatively [subscribe to updates](#subscribing-to-updates-imperatively).\n\n## ADVANCED USAGE\n\n### Deriving Values from a Store\n\nJust like mutations, functions that derive values from the store's state can be written as standalone functions:\n\n```tsx\nconst canBuyHouse = ({ wood, gold }) => wood >= 5 && gold >= 5\n```\n\nThese will work from within plain imperative JavaScript code...\n\n```tsx\nif (canBuyHouse(store.state)) {\n console.log(\"Let's buy a house!\")\n}\n```\n\n...mutation code...\n\n```tsx\nconst buyHouse = () =>\n store.set((state) =>\n canBuyHouse(state)\n ? {\n wood: state.wood - 5,\n gold: state.gold - 5,\n houses: state.houses + 1\n }\n : {}\n )\n```\n\n...as well as React components, which will automatically be re-rendered if any of the underlying data changes:\n\n```tsx\nconst BuyHouseButton = () => {\n const store = useStore(store)\n\n return (\n \n )\n}\n```\n\n### Forcing a store update\n\nWhen the store is updated, Statery will check which of the properties within the update object are actually different objects (or scalar values) from the previous state, and will only notify listeners to those properties.\n\nIn some cases, you may want to force a store update even though the property has not changed to a new object. For these situations, the `set` function allows you to pass a second argument; if this is set to `true`, Statery will ignore the equality check and notify all listeners to the properties included in the update.\n\nExample:\n\n```tsx\nconst store = makeStore({\n rotation: new THREE.Vector3()\n})\n\nexport const randomizeRotation = () =>\n store.set(\n (state) => ({\n rotation: state.rotation.randomRotation()\n }),\n true\n )\n```\n\n### Subscribing to updates (imperatively)\n\nUse a store's `subscribe` function to register a callback that will be executed every time the store is changed.\nThe callback will receive both an object containing of the changes, as well as the store's current state.\n\n```ts\nconst store = makeStore({ count: 0 })\n\nconst listener = (changes, state) => {\n console.log(\"Applying changes:\", changes)\n}\n\nstore.subscribe(console.log)\nstore.set((state) => ({ count: state.count + 1 }))\nstore.unsubscribe(console.log)\n```\n\n## NOTES\n\n### Stuff that probably needs work\n\n- [ ] No support for middleware yet. Haven't decided on an API that is adequately simple.\n\n### Prior Art & Credits\n\nStatery was born after spending a lot of time with the excellent state management libraries provided by the [Poimandres](https://github.com/pmndrs) collective, [Zustand] and [Valtio]. Statery started out as an almost-clone of Zustand, but with the aim of providing an even simpler API. The `useStore` hook API was inspired by Valtio's very nice `useProxy`.\n\nStatery is written and maintained by [Hendrik Mans](https://www.hmans.dev/).\n\n[demo]: https://codesandbox.io/s/statery-clicker-game-hjxk3?file=/src/App.tsx\n[zustand]: https://github.com/pmndrs/zustand\n[valtio]: https://github.com/pmndrs/valtio\n[immer]: https://github.com/immerjs/immer\n","readmeFilename":"README.md","description":"A happy little state management library for React and friends.","homepage":"https://github.com/hmans/statery","keywords":["react","state","state-management","hooks"]}