agile-ts · bennobuilder · Mar 30, 2021 · Mar 29, 2021 · Mar 29, 2021 · Mar 29, 2021
diff --git a/.changeset/warm-terms-help.md b/.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
diff --git a/CONTRIBUTING.md b/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

diff --git a/README.md b/README.md
@@ -97,14 +97,14 @@ Write minimalistic, boilerplate free code that captures your intent.
   ```
 
 ### 🤸‍ Flexible
-- Works in nearly any UI-Framework. 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 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](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).
+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 />
@@ -121,7 +121,7 @@ To properly use AgileTs, in a UI-Framework we need to install **two** packages.
   ```
 
 - 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.
+  Check [here](https://agile-ts.org/docs/frameworks) if your desired Framework is supported, too.
   ```
   npm install @agile-ts/react
   ```
@@ -165,6 +165,7 @@ To find out more checkout the [CONTRIBUTING.md](https://github.com/agile-ts/agil
 | [@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 />

diff --git a/examples/react-native/AwesomeTSProject/README.md b/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.

diff --git a/examples/react-native/AwesomeTSProject/core/index.ts b/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(

diff --git a/examples/react-native/AwesomeTSProject/package.json b/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"
   },

diff --git a/examples/react/class-component-ts/README.md b/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.

diff --git a/examples/react/class-component-ts/package.json b/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"

diff --git a/examples/react/functional-component-ts/README.md b/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.

diff --git a/examples/react/functional-component-ts/package.json b/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"

diff --git a/examples/react/functional-component-ts/src/App.tsx b/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,

diff --git a/examples/react/functional-component-ts/src/core/index.ts b/examples/react/functional-component-ts/src/core/index.ts
@@ -1,5 +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 },
@@ -51,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',
 });

diff --git a/examples/react/functional-component-ts/yarn.lock b/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"

diff --git a/examples/react/multieditor-ts/README.md b/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.

diff --git a/examples/react/multieditor-ts/package.json b/examples/react/multieditor-ts/package.json
@@ -26,7 +26,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/multieditor & yarn install"
+    "install:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/multieditor & yarn install"
   },
   "eslintConfig": {
     "extends": [

diff --git a/jest.config.base.js b/jest.config.base.js
@@ -1,9 +1,15 @@
 module.exports = {
   testEnvironment: 'node',
   coveragePathIgnorePatterns: ['(tests/.*.mock).(jsx?|tsx?)$'],
-  modulePathIgnorePatterns: ['dist'],
+  modulePathIgnorePatterns: ['dist', 'examples', 'node_modules'],
   testMatch: ['<rootDir>/packages/**/tests/**/*.test.ts'],
   transform: {
     '^.+\\.ts?$': 'ts-jest',
   },
+  /* https://stackoverflow.com/questions/63904196/esmoduleinterop-flag-set-still-getting-default-import-error */
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/packages/tsconfig.default.json',
+    },
+  },
 };
diff --git a/package.json b/package.json
@@ -21,20 +21,22 @@
     "watch:react": "cd packages/core && yarn run watch",
     "watch:multieditor": "cd packages/core && yarn run watch",
     "watch:api": "cd packages/core && yarn run watch",
+    "watch:event": "cd packages/event && yarn run watch",
     "test": "jest --passWithNoTests",
     "test:coverage": "jest --coverage",
-    "dev-publish": "lerna run build && lerna run dev-publish",
-    "dev-push": "lerna run build && lerna run dev-push",
+    "dev:publish": "lerna run build && lerna run dev:publish",
+    "dev:push": "lerna run build && lerna run dev:push",
     "install:packages": "lerna exec yarn install",
-    "bump-version": "changeset",
+    "version:bump": "changeset",
     "release": "lerna run release && changeset publish",
     "prettier": "prettier --config .prettierrc --write \"**/*.{js,ts}\"",
     "lint": "eslint --cache \"**/*.{js,jsx,ts,tsx}\"",
     "pack": "lerna run prepare && lerna run preview",
     "pack:core": "cd packages/core && yarn run prepare && yarn run preview",
     "pack:react": "cd packages/react && yarn run prepare && yarn run preview",
     "pack:multieditor": "cd packages/multieditor && yarn run prepare && yarn run preview",
-    "pack:api": "cd packages/api && yarn run prepare && yarn run preview"
+    "pack:api": "cd packages/api && yarn run prepare && yarn run preview",
+    "pack:event": "cd packages/event && yarn run prepare && yarn run preview"
   },
   "repository": {
     "type": "git",

diff --git a/packages/api/README.md b/packages/api/README.md
@@ -12,7 +12,8 @@
   <img src="https://img.shields.io/npm/dt/@agile-ts/api.svg" alt="npm total downloads"/></a>
 <a href="https://npm.im/@agile-ts/api">
   <img src="https://img.shields.io/bundlephobia/min/@agile-ts/api.svg" alt="npm minified size"/></a>
-
+
+
 ## ⏰ Short Example
 ```ts
 // Let't create our API
@@ -36,6 +37,7 @@ console.log(response);
 */
 ```
 
+
 ## ❓ Why Agile Api
 
 #### 🚅 Straightforward
@@ -44,28 +46,31 @@ Write minimalistic, boilerplate free code that captures your intent. <br />
 - Automatic transform for JSON data
 - Configurable Timeout
 
+
 #### 🎯 Easy to Use
 Learn the powerful and simple tools of Agile Api in a short amount of time.
 
+
 #### 🍃 Lightweight
 Agile Api has an unpacked size of [2kB](https://bundlephobia.com/result?p=@agile-ts/api@0.0.6) 
 and [0 external dependencies](https://www.npmjs.com/package/@agile-ts/api).
 
+
 ## ⬇️ Installation
 ```
 npm install @agile-ts/api
 ```
-_Be aware that this is no standalone package!_ <br />
-To use the Agile Api you have to install the [Agile Core](https://www.npmjs.com/package/@agile-ts/core). <br />
-To find out more take a look into the [docs](https://www.agile-ts.org/docs).
-
+The `api` package is an extension of AgileTs and doesn't work without the [`core`](https://agile-ts.org/docs/core) package,
+which functions as the brain of AgileTs and is indispensable.
+Unfortunately, we can't combine each `core` with `api` version.
+Therefore, we have created a table which shows which versions fit together without restrictions.
 
-## 🔑 Fitting Versions
-| @agile-ts/api   | @agile-ts/core          | NPM Version              | 
-| --------------- | ----------------------- | ------------------------ | 
-| v0.0.7          | v0.0.1+                 | v6+                      | 
-| v0.0.6          | v0.0.1+                 | v6+                      | 
+| @agile-ts/api         | @agile-ts/core          | NPM Version              |
+| ----------------------| ----------------------- | ------------------------ |
+| v0.0.7+               | v0.0.7+                 | v6+                      |
+| v0.0.6                | v0.0.3 - v0.0.6         | v6+                      |
 _Other Versions aren't supported anymore_
 
+
 ## 📄 Documentation
-The Agile Api Docs are located [here](https://agile-ts.org/docs/)
+The Agile Api Docs are located [here](https://agile-ts.org/docs/)
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -17,9 +17,9 @@
   "scripts": {
     "build": "tsc",
     "prepare": "tsc && tsc -p ./tsconfig.production.json",
-    "dev-publish": "yalc publish",
-    "dev-push": "yalc push",
-    "watch": "tsc-watch --onSuccess \"yarn run dev-push\"",
+    "dev:publish": "yalc publish",
+    "dev:push": "yalc push",
+    "watch": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "release": "yarn run prepare",
     "preview": "npm pack"
   },