![\"GitHub](\"https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872\")
\r\n \r\n \r\n ![\"npm](\"https://img.shields.io/bundlephobia/min/@agile-ts/core.svg?label=bundle%20size&style=flat&colorA=293140&colorB=4a4872\")
\r\n \r\n \r\n ![\"npm](\"https://img.shields.io/npm/dt/@agile-ts/core.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872\")
\r\n \r\n![\"AgileTs\"](\"https://raw.githubusercontent.com/agile-ts/agile/master/static/header_background.png\")
\r\n\r\n> π **Global State and Logic Library**\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n ![\"Status\"/](\"https://img.shields.io/badge/Status-Beta-green.svg\"){kind=icon}
\r\n \r\n \r\n ![\"Build](\"https://github.com/agile-ts/agile/workflows/Release/badge.svg\"){kind=icon}
\r\n \r\n \r\n ![\"Build](\"https://github.com/agile-ts/agile/workflows/Test%20All%20Packages/badge.svg\"){kind=icon}
\r\n \r\n \r\n ![\"Coverage](\"https://coveralls.io/repos/github/agile-ts/agile/badge.svg?branch=master\"){kind=icon}
\r\n \r\n
![\"How](\"https://raw.githubusercontent.com/agile-ts/agile/master/static/how_to_create_state_header.png\")
\r\n\r\n```tsx\r\n// -- core.js ------------------------------------------\r\n\r\n// 1οΈβ£ Create State with the initial value \"Hello Friend!\"\r\nconst MY_FIRST_STATE = createState(\"Hello Friend!\");\r\n\r\n\r\n// -- MyComponent.whatever ------------------------------------------\r\n\r\n// 2οΈβ£ Bind initialized State to the desired UI-Component.\r\n// And wolla, the Component is reactive. \r\n// Everytime the State mutates the Component re-renders.\r\nconst myFirstState = useAgile(MY_FIRST_STATE);\r\nconsole.log(myFirstState); // Returns \"Hello Friend!\"\r\n```\r\nWant to learn how to implement AgileTs in your preferred UI-Framework?\r\nCheck out our [Quick Start Guides](https://agile-ts.org/docs/Installation.md).\r\n\r\n### β³οΈ Sandbox\r\nTest AgileTs yourself in a [codesandbox](https://codesandbox.io/s/agilets-first-state-f12cz).\r\nIt's only one click away. Just select your preferred Framework below.\r\n\r\n- [React](https://codesandbox.io/s/agilets-first-state-f12cz)\r\n- [React-Native](https://snack.expo.io/@bennodev/agilets-first-state)\r\n- [Vue](https://codesandbox.io/s/agilets-first-state-i5xxs)\r\n- Svelte (coming soon)\r\n\r\nMore examples can be found in the [Example section](https://agile-ts.org/docs/examples).\r\n\r\n\r\n![\"Why](\"https://raw.githubusercontent.com/agile-ts/agile/master/static/why_should_i_use_agile.png\")
\r\n\r\nAgileTs is an atom based global State and Logic Library implemented in Typescript.\r\nIt offers a reimagined API that focuses on **developer experience**\r\nand allows you to **easily** and **flexible** manage your application States.\r\nBesides [States](https://agile-ts.org/docs/core/state),\r\nAgileTs offers some other powerful APIs that make your life easier,\r\nsuch as [Collections](https://agile-ts.org/docs/core/collection)\r\nand [Computed States](https://agile-ts.org/docs/core/computed).\r\nThe philosophy behind AgileTs is simple:\r\n\r\n### π
Straightforward\r\n\r\nWrite minimalistic, boilerplate-free code that captures your intent.\r\n```ts\r\n// Create State with the inital value 'frank'\r\nconst MY_STATE = createState('frank');\r\n\r\n// Update the State value from 'frank' to 'jeff'\r\nMY_STATE.set('jeff');\r\n\r\n// Undo the latest State value change\r\nMY_STATE.undo();\r\n\r\n// Reset the State value to its initial value\r\nMY_STATE.reset();\r\n\r\n// Permanently store the State value in an external Storage\r\nMY_STATE.persist(\"storage-key\"); \r\n```\r\n\r\n### π€Έβ Flexible\r\n\r\n- Works in nearly any UI-Framework (currently supported are [React](https://reactjs.org/), [React-Native](https://reactnative.dev/) and [Vue](https://vuejs.org/)).\r\n- Surly behaves with the workflow that suits you best.\r\n No need for _reducers_, _actions_, ..\r\n- Has **0** external dependencies.\r\n\r\n### β³οΈ Centralize\r\n\r\nAgileTs is designed to take all business logic out of the UI-Components\r\nand put them in a central place, often called `core`.\r\nThe advantage of keeping logic separate to UI-Components,\r\nis that your code is more decoupled, portable, scalable,\r\nand above all, easily testable.\r\n\r\nYou can learn more about ways to centralize your application logic with AgileTs\r\nin our [Style Guides](https://agile-ts.org/docs/style-guide).\r\n\r\n### π― Easy to Use\r\n\r\nLearn the powerful tools of AgileTs in a short period of time.\r\nAn excellent place to start are our [Quick Start Guides](https://agile-ts.org/docs/Installation),\r\nor if you don't like to follow tutorials,\r\nyou can jump straight into the [Example section](https://agile-ts.org/docs/examples/Introduction).\r\n\r\n\r\n![\"Installation\"/](\"https://raw.githubusercontent.com/agile-ts/agile/master/static/installation_header.png\")
\r\n\r\nIn order to use AgileTs in a UI-Framework, we need to install **two packages**.\r\n\r\n- The [`core`](https://agile-ts.org/docs/core) package contains the State Management Logic of AgileTs\r\n and therefore provides powerful classes like the [`State Class`](https://agile-ts.org/docs/core/state).\r\n ```\r\n npm install @agile-ts/core\r\n ```\r\n\r\n- A _fitting Integration_ for the UI-Framework of your choice, on the other hand,\r\n is an interface to the actual UI and provides useful functionalities \r\n to bind States to UI-Components for reactivity.\r\n I prefer React, so let's go with the [React Integration](https://www.npmjs.com/package/@agile-ts/react) for now.\r\n ```\r\n npm install @agile-ts/react\r\n ```\r\n\r\n\r\n![\"Documentation\"/](\"https://raw.githubusercontent.com/agile-ts/agile/master/static/documentation_header.png\")
\r\n\r\nDoes AgileTs sound interesting to you?\r\nTake a look at our **[documentation](https://agile-ts.org/docs/introduction)**, \r\nto learn more about its functionalities and capabilities.\r\nIf you have any further questions, \r\nfeel free to join our [Community Discord](https://discord.gg/T9GzreAwPH).\r\nWe will be happy to help you.\r\n\r\n- Overview\r\n - [Introduction](https://agile-ts.org/docs/introduction/)\r\n - [Installation](https://agile-ts.org/docs/installation) \r\n - [Style Guides](https://agile-ts.org/docs/style-guide)\r\n - [Supported Frameworks](https://agile-ts.org/docs/frameworks)\r\n - [Contributing](https://agile-ts.org/docs/contributing)\r\n- Quick Start\r\n - [React](https://agile-ts.org/docs/quick-start/react)\r\n - [Vue](https://agile-ts.org/docs/quick-start/vue)\r\n- Packages\r\n - [core](https://agile-ts.org/docs/core)\r\n - [Agile Instance](https://agile-ts.org/docs/core/agile-instance)\r\n - [State](https://agile-ts.org/docs/core/state)\r\n - [Collection](https://agile-ts.org/docs/core/collection)\r\n - [Computed](https://agile-ts.org/docs/core/computed)\r\n - [Storage](https://agile-ts.org/docs/core/storage)\r\n - [Integration](https://agile-ts.org/docs/core/integration)\r\n - [react](https://agile-ts.org/docs/react)\r\n - [React Hooks](https://agile-ts.org/docs/react/hooks)\r\n - [AgileHOC](https://agile-ts.org/docs/react/AgileHOC)\r\n- Examples\r\n - [React](https://agile-ts.org/docs/examples/react)\r\n - [React-Native](https://agile-ts.org/docs/examples/react-native) \r\n - [Vue](https://agile-ts.org/docs/examples/vue)\r\n- [Typescript Interfaces](https://agile-ts.org/docs/interfaces) \r\n\r\n\r\n![\"Contribute\"/](\"https://raw.githubusercontent.com/agile-ts/agile/master/static/contribute_header.png\")
\r\n\r\nGet a part of AgileTs and start contributing. We welcome any meaningful contribution. π\r\nTo find out more about contributing, check out the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).\r\n\r\n\r\n ![\"Maintainability\"/](\"https://codeclimate.com/github/agile-ts/agile/coverage.svg\")
\r\n\r\n\r\n### β₯οΈ Contributors \r\n\r\n\r\n ![\"Packages](\"https://raw.githubusercontent.com/agile-ts/agile/master/static/packages_of_agile.png\")
\r\n\r\n| Name | Latest Version | Description |\r\n| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |\r\n| [@agile-ts/core](/packages/core) | [](https://www.npmjs.com/package/@agile-ts/core) | State Manager Logic |\r\n| [@agile-ts/react](/packages/react) | [](https://www.npmjs.com/package/@agile-ts/react) | React Integration |\r\n| [@agile-ts/vue](/packages/vue) | [](https://www.npmjs.com/package/@agile-ts/vue) | Vue Integration |\r\n| [@agile-ts/api](/packages/api) | [](https://www.npmjs.com/package/@agile-ts/api) | Promise based API |\r\n| [@agile-ts/multieditor](/packages/multieditor) | [](https://www.npmjs.com/package/@agile-ts/multieditor) | Simple Form Manager |\r\n| [@agile-ts/event](/packages/event) | [](https://www.npmjs.com/package/@agile-ts/event) | Handy class for emitting UI Events |\r\n| [@agile-ts/logger](/packages/logger) | [](https://www.npmjs.com/package/@agile-ts/logger) | Logging API of AgileTs |\r\n| [@agile-ts/utils](/packages/utils) | [](https://www.npmjs.com/package/@agile-ts/utils) | Utilities of AgileTs |\r\n| [@agile-ts/proxytree](/packages/proxytree) | [](https://www.npmjs.com/package/@agile-ts/proxytree) | Proxy Tree for tracking accessed properties | |\r\n\r\n![\"Credits\"/](\"https://raw.githubusercontent.com/agile-ts/agile/master/static/credits_header.png\")
\r\n\r\nAgileTs is inspired by [MVVM Libraries](https://de.wikipedia.org/wiki/Model_View_ViewModel) \r\nlike [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).\r\n\r\n### π Time spent building this project\r\n[](https://wakatime.com/badge/user/aa5a8ce7-1c57-4f26-a159-ea57ec5ea7c1/project/6d1a7308-89b1-4e95-9623-64c0c6116d0a)\r\n","readmeFilename":"README.md"}![\"Tweet\"](\"http://randojs.com/images/tweetShield.svg\")
\r\n ![\"Join](\"https://img.shields.io/discord/795291052897992724.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2\")
\r\n