Develop

.changeset/warm-terms-help.md

@@ -0,0 +1,11 @@
+---
+'@agile-ts/api': patch
+'@agile-ts/core': patch
+'cra-template-agile': patch
+'cra-template-agile-typescript': patch
+'@agile-ts/event': patch
+'@agile-ts/multieditor': patch
+'@agile-ts/react': patch
+---
+
+fixed bugs and increased versions

CONTRIBUTING.md

@@ -75,17 +75,17 @@ Don't take this personally if this happens, and feel free to open a new issue on
 ## ⏳ Installation
 
 1. Ensure you have [Yarn](https://yarnpkg.com/) installed
-2. After cloning the repository, run `yarn run install-packages` in the root of the repository,
+2. After cloning the repository, run `yarn run install:agile` in the root of the repository,
    which simply runs `yarn install` in each package to ensure all dependencies are installed.
 
 ### Run Example Project's
 
 1. Follow the [Installation](#Installation) steps above
 2. Ensure you have [Yalc](https://www.google.com/search?client=firefox-b-d&q=yalc) installed
-3. Run `yarn run dev-publish` to publish all packages in your local 'npm store'
+3. Run `yarn run dev:publish` to publish all packages in your local 'npm store'
 4. Execute `yarn install` in the Example Project to install its dependencies like AgileTs
-5. If you made your desired changes. Run `yarn run dev-push` to push your updated changes into your local 'npm store' <br />
-   _ProTip:_ To make realtime changes, run `yarn run watch`, which automatically runs `yarn run dev-push` everytime you update a file in a package.
+5. If you made your desired changes. Run `yarn run dev:push` to push your updated changes into your local 'npm store' <br />
+   _ProTip:_ To make realtime changes, run `yarn run watch`, which automatically runs `yarn run dev:push` everytime you update a file in a package.
 
 
 ## ☄️ Pull Request

README.md

@@ -1,6 +1,6 @@
  <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/header_background.png" alt="AgileTs">
 
- > **AgileTs is a spacy, fast, simple State Management Framework**
+ > Global, simple, spacy State and Logic Framework
 
  <br />
 
@@ -29,7 +29,7 @@
 </p>
 
 <p align="left">
- <a href="https://twitter.com/intent/tweet?text=I%20just%20discovered%20AgileTs%3B%20an%20awesome%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"><img src="http://randojs.com/images/tweetShield.svg" alt="Tweet" height="20"/>
+ <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%40AgileFramework%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"/>
@@ -55,15 +55,15 @@ const MY_FIRST_STATE = App.createState("Hello Stranger!");
 // And wolla its reactive. Everytime the State mutates the Component gets rerendered
 const myFirstState = useAgile(MY_FIRST_STATE); // returns value of State ("Hello Stranger!")
 ```
-To find out more checkout our [documentation](https://agile-ts.org/docs/installation).
+To find out more checkout our [documentation](https://agile-ts.org/docs/introduction).
 
 ### ⛳️ Sandbox
 Test AgileTs yourself, it's only one click away. Just select your preferred Framework below.
 - [React](https://codesandbox.io/s/agilets-first-state-f12cz)
 - Vue (coming soon)
 - Angular (coming soon)
 
-More examples can be found in the [Example Section](../examples/Indroduction.md).
+More examples can be found in the [Example Section](https://agile-ts.org/docs/examples).
 
 
 <br />
@@ -72,10 +72,9 @@ More examples can be found in the [Example Section](../examples/Indroduction.md)
 <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 simple, fast and well tested State Management Framework which is implemented in TypeScript.
-It's more flexible and boilerplate free than Redux and has an interesting approach to reducing 
-the size of a codebase through a centralized memory design pattern.
-The philosophy behind AgileTs is simple:
+AgileTs is a global, simple, well-tested State Management Framework implemented in TypeScript. 
+It's more flexible and boilerplate-free than frameworks like Redux and has a powerful approach to reducing the codebase size through a
+centralized memory design pattern. The philosophy behind AgileTs is simple:
 
 ### 🚅 Straightforward
 Write minimalistic, boilerplate free code that captures your intent.
@@ -91,22 +90,21 @@ Write minimalistic, boilerplate free code that captures your intent.
   MY_COLLECTION.collect({id: 1, name: "Frank"});
   MY_COLLECTION.collect({id: 2, name: "Dieter"});
   ```
-- Mutate or Check States with simple Functions
+- Mutate and Check States with simple Functions
   ```ts
   MY_STATE.undo(); // Undo latest change
   MY_STATE.is({hello: "jeff"}); // Check if State has the Value '{hello: "jeff"}'
   ```
 
 ### 🤸‍ Flexible
-- Works in nearly every UI-Framework. Check [here](https://agile-ts.org/docs/frameworks) if your preferred framework is supported too.
-- Surly behaves with the workflow that suits you best.
-  No need for _reducers_, _actions_, ..
-- Has **no** external dependencies
+- Works in nearly any UI-Layer. Check [here](https://agile-ts.org/docs/frameworks) if your preferred Framework is supported too.
+- Surly behaves with the workflow which suits you best. No need boilerplate code.
+- Has **0** external dependencies
 
 ### 🎯 Easy to Use
 Learn the powerful tools of AgileTs in a short amount of time.
-A good place to start are our [Quick Starts](./Installation.md) 
-or if you are no fan of following any tutorial, checkout your [examples](../examples).
+A good place to start are our [Quick Start Guides](https://agile-ts.org/docs/installation) 
+or if you are no fan of following any tutorial, checkout your [Examples](https://agile-ts.org/docs/examples).
 
 
 <br />
@@ -115,15 +113,15 @@ or if you are no fan of following any tutorial, checkout your [examples](../exam
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/installation_header.png" alt="Installation"/>
 
-To properly use AgileTs, in a UI-Framework we need **two** packages.
+To properly use AgileTs, in a UI-Framework we need to install **two** packages.
 
 - The _Core Package_, which acts as the brain of AgileTs and manages all our States
   ```
   npm install @agile-ts/core
   ```
 
-- and a _fitting Integration_ for our preferd UI-Framework.. in my case the [React Integration](https://www.npmjs.com/package/@agile-ts/react).
-  Check [here](https://agile-ts.org/docs/installation) if your desired Framework is supported, too.
+- and a _fitting Integration_ for our preferd UI-Framework. In my case the [React Integration](https://www.npmjs.com/package/@agile-ts/react).
+  Check [here](https://agile-ts.org/docs/frameworks) if your desired Framework is supported, too.
   ```
   npm install @agile-ts/react
   ```
@@ -135,10 +133,10 @@ To properly use AgileTs, in a UI-Framework we need **two** packages.
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/documentation_header.png" alt="Documentation"/>
 
-If AgileTs sounds interesting to you.
-Checkout our **[docs](https://agile-ts.org/docs/)**. 
-And I am sure you will be able to use it in no time.
-In case you have any questions don't mind joining our [Discord Community](https://discord.gg/FTqeMNCxw7).
+Sounds AgileTs interesting to you?
+Checkout our **[documentation](https://agile-ts.org/docs/introduction)**, to learn more.
+And I promise you, you will be able to use AgileTs in no time.
+In case you have any further questions don't mind joining our [Community Discord](https://discord.gg/T9GzreAwPH).
 
 
 <br />
@@ -147,9 +145,8 @@ In case you have any questions don't mind joining our [Discord Community](https:
 <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. 
+Get a part of AgileTs and start contributing. We welcome any meaningful contribution 😀
 To find out more checkout the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
-We welcome any meaningful contribution 😀
 
 <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"/>
@@ -168,6 +165,7 @@ We welcome any meaningful contribution 😀
 | [@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/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        |
 
 
 <br />
@@ -176,5 +174,5 @@ We welcome any meaningful contribution 😀
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/credits_header.png" alt="Credits"/>
 
-AgileTs is inspired by MVVM frameworks like [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).
+AgileTs is inspired by [MVVM Frameworks](https://de.wikipedia.org/wiki/Model_View_ViewModel) like [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).
 

examples/react-native/AwesomeTSProject/README.md

@@ -14,18 +14,18 @@ This Example represents the basic features of the `core` package in a **function
 #### 1. Run `npm install` at the root of Agile
 At first, we have to install some 'global' dependencies of AgileTs.
 
-#### 2. Run `npm run install-all` at the root of Agile
+#### 2. Run `npm run install:agile` at the root of Agile
 Then we install the dependencies of all AgileTs Packages (core, react, api, ..)
 
-#### 3. Run `npm run dev-publish` at the root of Agile
+#### 3. Run `npm run dev:publish` at the root of Agile
 As next step we `publish` all AgileTs Packages to our local `yalc` repository,
 to import them later in our examples.
 
-#### 4. Run `npm run install-agile` in this Project
+#### 4. Run `npm run install:agile` in this Project
 To run the example we have to install the dependencies of it, too.
 We aren't using `npm install`, because we want to add the just published AgileTs Packages properly.
 
-#### 5. Run `npm run dev-push` at the root of Agile
+#### 5. Run `npm run dev:push` at the root of Agile
 After 'publishing' the AgileTs Packages and installing the dependencies of the example, we can push our changes,
 which we might have made for instance in the core package, to yalc by running this command.
 All projects having a dependency of the pushed package will receive the changes immediately.

examples/react-native/AwesomeTSProject/core/index.ts

@@ -1,4 +1,5 @@
 import { Agile } from '@agile-ts/core';
+import { Event } from '@agile-ts/event';
 import { Alert } from 'react-native';
 
 export const App = new Agile({
@@ -42,7 +43,7 @@ MY_COLLECTION.getGroup('myGroup')?.persist({
 
 console.log('Initial: myCollection ', MY_COLLECTION);
 
-export const MY_EVENT = App.createEvent<{ name: string }>();
+export const MY_EVENT = new Event<{ name: string }>(App);
 
 MY_EVENT.on('Test', (payload) => {
   Alert.alert(

examples/react-native/AwesomeTSProject/package.json

@@ -8,12 +8,13 @@
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "install-agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api & yarn install"
+    "install:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api & yarn install"
   },
   "dependencies": {
     "@agile-ts/api": "file:.yalc/@agile-ts/api",
     "@agile-ts/core": "file:.yalc/@agile-ts/core",
     "@agile-ts/react": "file:.yalc/@agile-ts/react",
+    "@agile-ts/event": "file:.yalc/@agile-ts/event",
     "react": "16.13.1",
     "react-native": "0.63.3"
   },

examples/react/class-component-ts/README.md

@@ -14,18 +14,18 @@ This Example represents the basic features of the `core` package in a **class co
 #### 1. Run `npm install` at the root of Agile
 At first, we have to install some 'global' dependencies of AgileTs.
 
-#### 2. Run `npm run install-all` at the root of Agile
+#### 2. Run `npm run install:agile` at the root of Agile
 Then we install the dependencies of all AgileTs Packages (core, react, api, ..)
 
-#### 3. Run `npm run dev-publish` at the root of Agile
+#### 3. Run `npm run dev:publish` at the root of Agile
 As next step we `publish` all AgileTs Packages to our local `yalc` repository,
 to import them later in our examples.
 
-#### 4. Run `npm run install-agile` in this Project
+#### 4. Run `npm run install:agile` in this Project
 To run the example we have to install the dependencies of it, too.
 We aren't using `npm install`, because we want to add the just published AgileTs Packages properly.
 
-#### 5. Run `npm run dev-push` at the root of Agile
+#### 5. Run `npm run dev:push` at the root of Agile
 After 'publishing' the AgileTs Packages and installing the dependencies of the example, we can push our changes,
 which we might have made for instance in the core package, to yalc by running this command.
 All projects having a dependency of the pushed package will receive the changes immediately.

examples/react/class-component-ts/package.json

@@ -28,7 +28,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "install-agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api @agile-ts/multieditor & yarn install"
+    "install:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api @agile-ts/multieditor @agile-ts/event & yarn install"
   },
   "eslintConfig": {
     "extends": "react-app"

examples/react/functional-component-ts/README.md

@@ -14,18 +14,18 @@ This Example represents the basic features of the `core` package in a **function
 #### 1. Run `npm install` at the root of Agile
 At first, we have to install some 'global' dependencies of AgileTs.
 
-#### 2. Run `npm run install-all` at the root of Agile
+#### 2. Run `npm run install:agile` at the root of Agile
 Then we install the dependencies of all AgileTs Packages (core, react, api, ..)
 
-#### 3. Run `npm run dev-publish` at the root of Agile
+#### 3. Run `npm run dev:publish` at the root of Agile
 As next step we `publish` all AgileTs Packages to our local `yalc` repository,
 to import them later in our examples.
 
-#### 4. Run `npm run install-agile` in this Project
+#### 4. Run `npm run install:agile` in this Project
 To run the example we have to install the dependencies of it, too.
 We aren't using `npm install`, because we want to add the just published AgileTs Packages properly.
 
-#### 5. Run `npm run dev-push` at the root of Agile
+#### 5. Run `npm run dev:push` at the root of Agile
 After 'publishing' the AgileTs Packages and installing the dependencies of the example, we can push our changes,
 which we might have made for instance in the core package, to yalc by running this command.
 All projects having a dependency of the pushed package will receive the changes immediately.

examples/react/functional-component-ts/package.json

@@ -7,6 +7,7 @@
     "@agile-ts/core": "file:.yalc/@agile-ts/core",
     "@agile-ts/multieditor": "file:.yalc/@agile-ts/multieditor",
     "@agile-ts/react": "file:.yalc/@agile-ts/react",
+    "@agile-ts/event": "file:.yalc/@agile-ts/event",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
@@ -28,7 +29,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "install-agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api @agile-ts/multieditor & yarn install"
+    "install:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/api @agile-ts/multieditor @agile-ts/event & yarn install"
   },
   "eslintConfig": {
     "extends": "react-app"

examples/react/functional-component-ts/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import './App.css';
-import { useAgile, useEvent, useWatcher } from '@agile-ts/react';
+import { useAgile, useWatcher } from '@agile-ts/react';
+import { useEvent } from '@agile-ts/event';
 import {
   MY_COLLECTION,
   MY_COMPUTED,

examples/react/functional-component-ts/src/core/index.ts

@@ -1,4 +1,6 @@
 import { Agile, clone, Logger } from '@agile-ts/core';
+import API from '@agile-ts/api';
+import Event from '@agile-ts/event';
 
 export const App = new Agile({
   logConfig: { level: Logger.level.DEBUG },
@@ -50,7 +52,7 @@ MY_COLLECTION.onLoad(() => {
 
 console.log('Initial: myCollection ', clone(MY_COLLECTION));
 
-export const MY_EVENT = App.createEvent<{ name: string }>({
+export const MY_EVENT = new Event<{ name: string }>(App, {
   delay: 3000,
   key: 'myEvent',
 });
@@ -94,3 +96,24 @@ logger.trace('This is a Trace');
 logger.if.tag(['coreWarning']).warn('My core Warning');
 logger.if.tag(['randomDebug']).debug('My random Debug');
 logger.table('Test Table', { test: 'test', test1: 'test1' });
+
+const api = new API({
+  timeout: 10000,
+  options: {
+    credentials: undefined,
+  },
+});
+
+// testing some urls
+api
+  .with({
+    baseURL: `https://api.npmjs.org/downloads/point/2020-08-24:2020-09-24/@agile-ts/core`,
+  })
+  .get('');
+
+// testing some urls
+api
+  .with({
+    baseURL: `https://api`,
+  })
+  .get('');

examples/react/functional-component-ts/yarn.lock

@@ -3,16 +3,19 @@
 
 
 "@agile-ts/api@file:.yalc/@agile-ts/api":
-  version "0.0.11"
+  version "0.0.13"
 
 "@agile-ts/core@file:.yalc/@agile-ts/core":
-  version "0.0.11"
+  version "0.0.12"
+
+"@agile-ts/event@file:.yalc/@agile-ts/event":
+  version "0.0.1"
 
 "@agile-ts/multieditor@file:.yalc/@agile-ts/multieditor":
-  version "0.0.11"
+  version "0.0.12"
 
 "@agile-ts/react@file:.yalc/@agile-ts/react":
-  version "0.0.11"
+  version "0.0.12"
 
 "@babel/code-frame@7.8.3":
   version "7.8.3"

examples/react/multieditor-ts/README.md

@@ -14,18 +14,18 @@ This Example represents the basic features of the `multieditor` package in a **f
 #### 1. Run `npm install` at the root of Agile
 At first, we have to install some 'global' dependencies of AgileTs.
 
-#### 2. Run `npm run install-all` at the root of Agile
+#### 2. Run `npm run install:agile` at the root of Agile
 Then we install the dependencies of all AgileTs Packages (core, react, api, ..)
 
-#### 3. Run `npm run dev-publish` at the root of Agile
+#### 3. Run `npm run dev:publish` at the root of Agile
 As next step we `publish` all AgileTs Packages to our local `yalc` repository,
 to import them later in our examples.
 
-#### 4. Run `npm run install-agile` in this Project
+#### 4. Run `npm run install:agile` in this Project
 To run the example we have to install the dependencies of it, too.
 We aren't using `npm install`, because we want to add the just published AgileTs Packages properly.
 
-#### 5. Run `npm run dev-push` at the root of Agile
+#### 5. Run `npm run dev:push` at the root of Agile
 After 'publishing' the AgileTs Packages and installing the dependencies of the example, we can push our changes,
 which we might have made for instance in the core package, to yalc by running this command.
 All projects having a dependency of the pushed package will receive the changes immediately.