@agile-ts/core - npm Package Compare versions

Comparing version 0.2.0-alpha.0 to 0.2.0-alpha.1

dist/agile.d.ts

@@ -1,2 +0,2 @@
-import { Runtime, Integration, Integrations, SubController, IntegrationsConfigInterface } from './internal';
+import { Runtime, Integration, Storage, Integrations, SubController, Storages, RegisterConfigInterface, IntegrationsConfigInterface } from './internal';
 export declare class Agile {
@@ -7,2 +7,3 @@ config: AgileConfigInterface;
     subController: SubController;
+    storages: Storages;
     integrations: Integrations;
@@ -51,2 +52,16 @@ static globalKey: string;
     /**
+     * Registers the specified Storage with AgileTs.
+     *
+     * After a successful registration,
+     * [Agile Sub Instances](https://agile-ts.org/docs/introduction/#agile-sub-instance) such as States
+     * can be persisted in the external Storage.
+     *
+     * [Learn more..](https://agile-ts.org/docs/core/agile-instance/methods#registerstorage)
+     *
+     * @public
+     * @param storage - Storage to be registered.
+     * @param config - Configuration object
+     */
+    registerStorage(storage: Storage, config?: RegisterConfigInterface): this;
+    /**
      * Returns a boolean indicating whether any Integration
@@ -60,2 +75,11 @@ * has been registered with AgileTs or not.
     hasIntegration(): boolean;
+    /**
+     * Returns a boolean indicating whether any Storage
+     * has been registered with AgileTs or not.
+     *
+     * [Learn more..](https://agile-ts.org/docs/core/agile-instance/methods#hasstorage)
+     *
+     * @public
+     */
+    hasStorage(): boolean;
 }
@@ -62,0 +86,0 @@ export declare type AgileKey = string | number;

dist/agile.js

@@ -1,2 +0,2 @@
-import { Runtime, Integrations, SubController, globalBind, LogCodeManager, defineConfig, } from './internal';
+import { Runtime, Integrations, SubController, globalBind, Storages, LogCodeManager, defineConfig, } from './internal';
 export class Agile {
@@ -21,2 +21,5 @@ constructor(config = {}) {
         this.subController = new SubController(this);
+        this.storages = new Storages(this, {
+            localStorage: config.localStorage,
+        });
         LogCodeManager.log('10:00:00', [], this);
@@ -32,6 +35,13 @@ if (config.bindGlobal)
     }
+    registerStorage(storage, config = {}) {
+        this.storages.register(storage, config);
+        return this;
+    }
     hasIntegration() {
         return this.integrations.hasIntegration();
     }
+    hasStorage() {
+        return this.storages.hasStorage();
+    }
 }
 Agile.globalKey = '__agile__';

dist/internal.d.ts

@@ -14,5 +14,17 @@ export * from './utils';
 export * from './runtime/subscription/sub.controller';
+export * from './storages';
+export * from './storages/storage';
+export * from './storages/persistent';
 export * from './state';
 export * from './state/state.observer';
+export * from './state/state.persistent';
 export * from './state/state.runtime.job';
+export * from './computed';
+export * from './computed/computed.tracker';
+export * from './collection';
+export * from './collection/group';
+export * from './collection/group/group.observer';
+export * from './collection/item';
+export * from './collection/selector';
+export * from './collection/collection.persistent';
 export * from './shared';

dist/internal.js

@@ -14,5 +14,17 @@ export * from './utils';
 export * from './runtime/subscription/sub.controller';
+export * from './storages';
+export * from './storages/storage';
+export * from './storages/persistent';
 export * from './state';
 export * from './state/state.observer';
+export * from './state/state.persistent';
 export * from './state/state.runtime.job';
+export * from './computed';
+export * from './computed/computed.tracker';
+export * from './collection';
+export * from './collection/group';
+export * from './collection/group/group.observer';
+export * from './collection/item';
+export * from './collection/selector';
+export * from './collection/collection.persistent';
 export * from './shared';

dist/state/index.d.ts

 /// <reference types="node" />
-import { Agile, StateObserver, Observer, StateIngestConfigInterface, CreateAgileSubInstanceInterface } from '../internal';
+import { Agile, StorageKey, StateObserver, StatePersistent, Observer, PersistentKey, StateIngestConfigInterface, CreateAgileSubInstanceInterface } from '../internal';
 export declare class State<ValueType = any> {
@@ -20,2 +20,3 @@ agileInstance: () => Agile;
     isPersisted: boolean;
+    persistent: StatePersistent | undefined;
     watchers: {
@@ -202,2 +203,61 @@ [key: string]: StateWatcherCallback<ValueType>;
     /**
+     * Preserves the State `value` in the corresponding external Storage.
+     *
+     * The State key/name is used as the unique identifier for the Persistent.
+     * If that is not desired or the State has no unique identifier,
+     * please specify a separate unique identifier for the Persistent.
+     *
+     * [Learn more..](https://agile-ts.org/docs/core/state/methods/#persist)
+     *
+     * @public
+     * @param config - Configuration object
+     */
+    persist(config?: StatePersistentConfigInterface): this;
+    /**
+     * Preserves the State `value` in the corresponding external Storage.
+     *
+     * The specified key is used as the unique identifier for the Persistent.
+     *
+     * [Learn more..](https://agile-ts.org/docs/core/state/methods/#persist)
+     *
+     * @public
+     * @param key - Key/Name identifier of Persistent.
+     * @param config - Configuration object
+     */
+    persist(key?: PersistentKey, config?: StatePersistentConfigInterface): this;
+    /**
+     * Fires immediately after the persisted `value`
+     * is loaded into the State from a corresponding external Storage.
+     *
+     * Registering such callback function makes only sense
+     * when the State is [persisted](https://agile-ts.org/docs/core/state/methods/#persist).
+     *
+     * [Learn more..](https://agile-ts.org/docs/core/state/methods/#onload)
+     *
+     * @public
+     * @param callback - A function to be executed after the externally persisted `value` was loaded into the State.
+     */
+    onLoad(callback: (success: boolean) => void): this;
+    /**
+     * Repeatedly calls the specified callback function,
+     * with a fixed time delay between each call.
+     *
+     * [Learn more..](https://agile-ts.org/docs/core/state/methods/#interval)
+     *
+     * @public
+     * @param handler - A function to be executed every delay milliseconds.
+     * @param delay - The time, in milliseconds (thousandths of a second),
+     * the timer should delay in between executions of the specified function.
+     */
+    interval(handler: (value: ValueType) => ValueType, delay?: number): this;
+    /**
+     * Cancels a active timed, repeating action
+     * which was previously established by a call to `interval()`.
+     *
+     * [Learn more..](https://agile-ts.org/docs/core/state/methods/#clearinterval)
+     *
+     * @public
+     */
+    clearInterval(): void;
+    /**
      * Returns a boolean indicating whether the State exists.
@@ -379,2 +439,18 @@ *
     loadValue?: boolean;
+    /**
+     * Key/Name identifier of Storages
+     * in which the State value should be or is persisted.
+     * @default [`defaultStorageKey`]
+     */
+    storageKeys?: StorageKey[];
+    /**
+     * Key/Name identifier of the default Storage of the specified Storage keys.
+     *
+     * The State value is loaded from the default Storage by default
+     * and is only loaded from the remaining Storages (`storageKeys`)
+     * if the loading from the default Storage failed.
+     *
+     * @default first index of the specified Storage keys or the AgileTs default Storage key
+     */
+    defaultStorageKey?: StorageKey;
 }
@@ -381,0 +457,0 @@ export declare type StateWatcherCallback<T = any> = (value: T, key: string) => void;

dist/state/index.js

@@ -1,2 +0,2 @@
-import { copy, flatMerge, isValidObject, StateObserver, equal, isFunction, notEqual, generateId, removeProperties, LogCodeManager, defineConfig, shared, } from '../internal';
+import { copy, flatMerge, isValidObject, StateObserver, StatePersistent, equal, isFunction, notEqual, generateId, ComputedTracker, removeProperties, LogCodeManager, defineConfig, shared, } from '../internal';
 export class State {
@@ -35,2 +35,3 @@ constructor(agileInstance, initialValue, config = {}) {
     get value() {
+        ComputedTracker.tracked(this.observers['value']);
         return copy(this._value);
@@ -45,2 +46,3 @@ }
     setKey(value) {
+        var _a, _b;
         const oldKey = this._key;
@@ -50,2 +52,4 @@ this._key = value;
             this.observers[observerKey]._key = value;
+        if (value != null && ((_a = this.persistent) === null || _a === void 0 ? void 0 : _a._key) === oldKey)
+            (_b = this.persistent) === null || _b === void 0 ? void 0 : _b.setKey(value);
         return this;
@@ -151,2 +155,60 @@ }
     }
+    persist(keyOrConfig = {}, config = {}) {
+        let _config;
+        let key;
+        if (isValidObject(keyOrConfig)) {
+            _config = keyOrConfig;
+            key = this._key;
+        }
+        else {
+            _config = config || {};
+            key = keyOrConfig;
+        }
+        _config = defineConfig(_config, {
+            loadValue: true,
+            storageKeys: [],
+            defaultStorageKey: null,
+        });
+        if (this.persistent != null && this.isPersisted)
+            return this;
+        this.persistent = new StatePersistent(this, {
+            instantiate: _config.loadValue,
+            storageKeys: _config.storageKeys,
+            key: key,
+            defaultStorageKey: _config.defaultStorageKey,
+        });
+        return this;
+    }
+    onLoad(callback) {
+        if (!this.persistent)
+            return this;
+        if (!isFunction(callback)) {
+            LogCodeManager.log('00:03:01', ['OnLoad Callback', 'function']);
+            return this;
+        }
+        this.persistent.onLoad = callback;
+        if (this.isPersisted)
+            callback(true);
+        return this;
+    }
+    interval(handler, delay) {
+        if (!isFunction(handler)) {
+            LogCodeManager.log('00:03:01', ['Interval Callback', 'function']);
+            return this;
+        }
+        if (this.currentInterval) {
+            LogCodeManager.log('14:03:03', [], this.currentInterval);
+            return this;
+        }
+        this.currentInterval = setInterval(() => {
+            this.set(handler(this._value));
+        }, delay !== null && delay !== void 0 ? delay : 1000);
+        return this;
+    }
+    clearInterval() {
+        if (this.currentInterval) {
+            clearInterval(this.currentInterval);
+            delete this.currentInterval;
+        }
+    }
     get exists() {
@@ -153,0 +215,0 @@ return !this.isPlaceholder && this.computeExistsMethod(this.value);

dist/state/state.observer.js

@@ -1,2 +0,2 @@
-import { Observer, copy, equal, notEqual, isFunction, StateRuntimeJob, createArrayFromObject, generateId, defineConfig, } from '../internal';
+import { Observer, Computed, copy, equal, notEqual, isFunction, StateRuntimeJob, createArrayFromObject, generateId, defineConfig, } from '../internal';
 export class StateObserver extends Observer {
@@ -12,3 +12,10 @@ constructor(state, config = {}) {
         const state = this.state();
-        this.ingestValue(state.nextStateValue, config);
+        if (state instanceof Computed) {
+            state.compute().then((result) => {
+                this.ingestValue(result, config);
+            });
+        }
+        else {
+            this.ingestValue(state.nextStateValue, config);
+        }
     }
@@ -15,0 +22,0 @@ ingestValue(newStateValue, config = {}) {

package.json

 {
   "name": "@agile-ts/core",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.0-alpha.1",
   "author": "BennoDev",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -1,82 +0,235 @@
-# 🎭 Fake Readme
+ <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/header_background.png" alt="AgileTs">
 
-This readme was created to fool the [npms-analyzer](https://npms.io/) into thinking that this is the actual readme.
-We had to do such a dirty trick in order to get the ranking points for an existing readme.
-This was necessary due the fact, that the npms-analyzer searches the readme in the GitHub repository 
-and not in the actual package that got published.
-Since, we copy the readme from the main tree into the `core` package during the build,
-in order to avoid two redundant readmes, it of course can't find the readme.
+> Global State and Logic Library
 
-https://github.com/npms-io/npms-analyzer/issues/258
+ <br />
 
-# ✅ [Actual Readme](../../README.md)
+<p align="left">
+ <a href="https://github.com/agile-ts/agile">
+   <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/>
+ </a>
+ <a href="https://npm.im/@agile-ts/core">
+   <img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg?label=bundle%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/>
+ </a>
+ <a href="https://npm.im/@agile-ts/core">
+   <img src="https://img.shields.io/npm/dt/@agile-ts/core.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/>
+ </a>
+</p>
 
-# Lorem ipsum
+<p align="left">
+ <a href="https://github.com/agile-ts/agile/actions?query=workflow%3ARelease">
+   <img src="https://github.com/agile-ts/agile/workflows/Release/badge.svg" alt="Build Status"/>
+ </a>
+ <a href="https://github.com/agile-ts/agile/actions?query=workflow%3A%22Test+All+Packages%22">
+   <img src="https://github.com/agile-ts/agile/workflows/Test%20All%20Packages/badge.svg" alt="Build Status"/>
+ </a>
+ <a href="https://coveralls.io/github/agile-ts/agile?branch=master">
+   <img src="https://coveralls.io/repos/github/agile-ts/agile/badge.svg?branch=master" alt="Coverage Badge"/>
+ </a>
+</p>
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
-labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores 
-et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
-ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo d
+<p align="left">
+ <a href="https://twitter.com/intent/tweet?text=I%20just%20discovered%20AgileTs%3B%20a%20global%2C%20spacy%20and%20overall%20easy%20to%20use%20State%20Manager.%0A%60%60%60ts%0Aconst%20MY_STATE%20%3D%20App.createState(%22Hello%20stranger%22)%3B%0AMY_STATE.set(%22Hello%20friend%22)%3B%0A%60%60%60%0Ahttps%3A%2F%2Fgithub.com%2Fagile-ts%2Fagile%2F%20%0A%0A%40AgileTypescript%20%0A%23agilets%20%23statemanagement%20%23webdev%20"><img src="http://randojs.com/images/tweetShield.svg" alt="Tweet" height="20"/>
+ </a>
+ <a href="https://discord.gg/T9GzreAwPH">
+   <img src="https://img.shields.io/discord/795291052897992724.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" alt="Join Discord"/>
+ </a>
+</p> 
 
-olores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
-amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
-ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores 
-et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
-eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril 
-delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
-sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/how_to_create_state_header.png" alt="How to create a State?"/>
 
-Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
-aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
-esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
-iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+```tsx
+// -- core.js ------------------------------------------
 
-Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat 
-facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
-euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 
-nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+// 1️⃣ Create State with the initial value "Hello Friend!"
+const MY_FIRST_STATE = createState("Hello Friend!");
 
-Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
-illum dolore eu feugiat nulla facilisis.
 
-At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
-Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
-tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
-duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, 
-et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata 
-ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
-eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+// -- MyComponent.whatever ------------------------------------------
 
-Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
-sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
-takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
-accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
-dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
-Stet clita kasd gubergren, no sea takimata sanctus.
+// 2️⃣ Bind initialized State to the desired UI-Component.
+// And wolla, the Component is reactive. 
+// Everytime the State mutates the Component re-renders.
+const myFirstState = useAgile(MY_FIRST_STATE);
+console.log(myFirstState); // Returns "Hello Friend!"
+```
+Want to learn how to implement AgileTs in your preferred UI-Framework?
+Check out our [Quick Start Guides](https://agile-ts.org/docs/Installation.md).
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore m
-agna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
-Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
-consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
-no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
-sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+### ⛳️ Sandbox
+Test AgileTs yourself in a [codesandbox](https://codesandbox.io/s/agilets-first-state-f12cz).
+It's only one click away. Just select your preferred Framework below.
 
-Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
-vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
-qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, 
-consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+- [React](https://codesandbox.io/s/agilets-first-state-f12cz)
+- [React-Native](https://snack.expo.io/@bennodev/agilets-first-state)
+- [Vue](https://codesandbox.io/s/agilets-first-state-i5xxs)
+- Svelte (coming soon)
 
-Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
-Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
-at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+More examples can be found in the [Example section](https://agile-ts.org/docs/examples).
 
-Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
-Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
+
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/why_should_i_use_agile.png" alt="Why should I use AgileTs?"/>
+
+AgileTs is a global State and Logic Library implemented in Typescript.
+It offers a reimagined API that focuses on **developer experience**
+and allows you to **easily** and **flexible** manage your application States.
+Besides [States](https://agile-ts.org/docs/core/state),
+AgileTs offers some other powerful APIs that make your life easier,
+such as [Collections](https://agile-ts.org/docs/core/collection)
+and [Computed States](https://agile-ts.org/docs/core/computed).
+The philosophy behind AgileTs is simple:
+
+### 🚅 Straightforward
+
+Write minimalistic, boilerplate-free code that captures your intent.
+```ts
+// Create State with the inital value 'frank'
+const MY_STATE = createState('frank');
+
+// Update the State value from 'frank' to 'jeff'
+MY_STATE.set('jeff');
+
+// Undo the latest State value change
+MY_STATE.undo();
+
+// Reset the State value to its initial value
+MY_STATE.reset();
+
+// Permanently store the State value in an external Storage
+MY_STATE.persist("storage-key"); 
+```
+
+### 🤸‍ Flexible
+
+- Works in nearly any UI-Framework (currently supported are [React](https://reactjs.org/), [React-Native](https://reactnative.dev/) and [Vue](https://vuejs.org/)).
+- Surly behaves with the workflow that suits you best.
+  No need for _reducers_, _actions_, ..
+- Has **0** external dependencies.
+
+### ⛳️ Centralize
+
+AgileTs is designed to take all business logic out of the UI-Components
+and put them in a central place, often called `core`.
+The advantage of keeping logic separate to UI-Components,
+is that your code is more decoupled, portable, scalable,
+and above all, easily testable.
+
+You can learn more about ways to centralize your application logic with AgileTs
+in our [Style Guides](https://agile-ts.org/docs/style-guide).
+
+### 🎯 Easy to Use
+
+Learn the powerful tools of AgileTs in a short period of time.
+An excellent place to start are our [Quick Start Guides](https://agile-ts.org/docs/Installation),
+or if you don't like to follow tutorials,
+you can jump straight into the [Example section](https://agile-ts.org/docs/examples/Introduction).
+
+
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/installation_header.png" alt="Installation"/>
+
+In order to use AgileTs in a UI-Framework, we need to install **two packages**.
+
+- The [`core`](https://agile-ts.org/docs/core) package contains the State Management Logic of AgileTs
+  and therefore provides powerful classes like the [`State Class`](https://agile-ts.org/docs/core/state).
+  ```
+  npm install @agile-ts/core
+  ```
+
+- A _fitting Integration_ for the UI-Framework of your choice, on the other hand,
+  is an interface to the actual UI and provides useful functionalities 
+  to bind States to UI-Components for reactivity.
+  I prefer React, so let's go with the [React Integration](https://www.npmjs.com/package/@agile-ts/react) for now.
+  ```
+  npm install @agile-ts/react
+  ```
+
+
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/documentation_header.png" alt="Documentation"/>
+
+Does AgileTs sound interesting to you?
+Take a look at our **[documentation](https://agile-ts.org/docs/introduction)**, 
+to learn more about its functionalities and capabilities.
+If you have any further questions, 
+feel free to join our [Community Discord](https://discord.gg/T9GzreAwPH).
+We will be happy to help you.
+
+- Overview
+  - [Introduction](https://agile-ts.org/docs/introduction/)
+  - [Installation](https://agile-ts.org/docs/installation)  
+  - [Style Guides](https://agile-ts.org/docs/style-guide)
+  - [Supported Frameworks](https://agile-ts.org/docs/frameworks)
+  - [Contributing](https://agile-ts.org/docs/contributing)
+- Quick Start
+  - [React](https://agile-ts.org/docs/quick-start/react)
+  - [Vue](https://agile-ts.org/docs/quick-start/vue)
+- Packages
+  - [core](https://agile-ts.org/docs/core)
+    - [Agile Instance](https://agile-ts.org/docs/core/agile-instance)
+    - [State](https://agile-ts.org/docs/core/state)
+    - [Collection](https://agile-ts.org/docs/core/collection)
+    - [Computed](https://agile-ts.org/docs/core/computed)
+    - [Storage](https://agile-ts.org/docs/core/storage)
+    - [Integration](https://agile-ts.org/docs/core/integration)
+  - [react](https://agile-ts.org/docs/react)
+    - [React Hooks](https://agile-ts.org/docs/react/hooks)
+    - [AgileHOC](https://agile-ts.org/docs/react/AgileHOC)
+- Examples
+  - [React](https://agile-ts.org/docs/examples/react)
+  - [React-Native](https://agile-ts.org/docs/examples/react-native)  
+  - [Vue](https://agile-ts.org/docs/examples/vue)
+- [Typescript Interfaces](https://agile-ts.org/docs/interfaces)  
+
+
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/contribute_header.png" alt="Contribute"/>
+
+Get a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀
+To find out more about contributing, check out the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
+
+<a href="https://codeclimate.com/github/agile-ts/agile/coverage.svg">
+   <img src="https://codeclimate.com/github/agile-ts/agile/badges/gpa.svg" alt="Maintainability"/>
+</a>
+
+
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/packages_of_agile.png" alt="Packages of Agile"/>
+
+| Name                                                                     |                                                                               Latest Version                                                                                | Description                                 |
+| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+| [@agile-ts/core](/packages/core)                                         |               [![badge](https://img.shields.io/npm/v/@agile-ts/core.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/core)                                   | State Manager Logic                         |
+| [@agile-ts/react](/packages/react)                                       |               [![badge](https://img.shields.io/npm/v/@agile-ts/react.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/react)                                 | React Integration                           |
+| [@agile-ts/vue](/packages/vue)                                           |               [![badge](https://img.shields.io/npm/v/@agile-ts/vue.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/vue)                                     | Vue Integration                             |
+| [@agile-ts/api](/packages/api)                                           |               [![badge](https://img.shields.io/npm/v/@agile-ts/api.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/api)                                     | Promise based API                           |
+| [@agile-ts/multieditor](/packages/multieditor)                           |               [![badge](https://img.shields.io/npm/v/@agile-ts/multieditor.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/multieditor)                     | Simple Form Manager                         |
+| [@agile-ts/event](/packages/event)                                       |               [![badge](https://img.shields.io/npm/v/@agile-ts/event.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/event)                                 | Handy class for emitting UI Events          |
+| [@agile-ts/logger](/packages/logger)                                     |               [![badge](https://img.shields.io/npm/v/@agile-ts/logger.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/logger)                               | Logging API of AgileTs                      |
+| [@agile-ts/utils](/packages/utils)                                       |               [![badge](https://img.shields.io/npm/v/@agile-ts/utils.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/utils)                                 | Utilities of AgileTs                        |
+| [@agile-ts/proxytree](/packages/proxytree)                               |               [![badge](https://img.shields.io/npm/v/@agile-ts/proxytree.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/proxytree)                         | Proxy Tree for tracking accessed properties |                         |
+
+<br />
+
+
+<br />
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/credits_header.png" alt="Credits"/>
+
+AgileTs is inspired by [MVVM Libraries](https://de.wikipedia.org/wiki/Model_View_ViewModel) 
+like [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

302989

increased by128.66%

Number of package files

64

increased by64.1%

Lines of code

7020

increased by136.44%

Number of lines in readme file

236

increased by187.8%

No dependency changes