agile-ts · bennobuilder · Apr 13, 2021 · Mar 30, 2021 · Mar 31, 2021 · Mar 31, 2021
diff --git a/.changeset/twelve-bobcats-beam.md b/.changeset/twelve-bobcats-beam.md
@@ -0,0 +1,15 @@
+---
+'@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
+---
+
+- extracted fromatDeps
+- made globalBind optional
+- optimized internal classes
+- optimized packages.json for better npm ranking score
+- fixed collection type issue
diff --git a/.eslintignore b/.eslintignore
@@ -2,6 +2,6 @@ dist
 node_modules
 .eslintrc.js
 jest.config.js
-jest.config.base.js
+jest.base.config.js
 scripts/
 examples/
diff --git a/README.md b/README.md
@@ -42,24 +42,27 @@
 ```tsx
 // -- core.js ------------------------------------------
 
-// Let's start by creating an Instance of AgileTs
+// 1️⃣ Create Instance of AgileTs
 const App = new Agile();
 
-// Now we are able to build our first State 😃
-const MY_FIRST_STATE = App.createState("Hello Stranger!");
+// 2️⃣ Create State with help of before defined Agile Instance
+const MY_FIRST_STATE = App.createState("Hello Friend!");
 
 
 // -- myComponent.whatever ------------------------------------------
 
-// Finally, we bind our just created State to our desired UI-Component
-// And wolla its reactive. Everytime the State mutates the Component gets rerendered
-const myFirstState = useAgile(MY_FIRST_STATE); // returns value of State ("Hello Stranger!")
+// 3️⃣ Bind initialized State to desired UI-Component
+// And wolla, it's reactive. Everytime the State mutates the Component rerenders
+const myFirstState = useAgile(MY_FIRST_STATE); // Returns value of State ("Hello Friend!")
 ```
-To find out more checkout our [documentation](https://agile-ts.org/docs/introduction).
+To learn out more, check out our [Quick Start Guides](https://agile-ts.org/docs/Installation.md).
 
 ### ⛳️ Sandbox
-Test AgileTs yourself, it's only one click away. Just select your preferred Framework below.
+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.
+
 - [React](https://codesandbox.io/s/agilets-first-state-f12cz)
+- [React-Native](https://snack.expo.io/@bennodev/agilets-first-state)
 - Vue (coming soon)
 - Angular (coming soon)
 
@@ -72,39 +75,55 @@ More examples can be found in the [Example Section](https://agile-ts.org/docs/ex
 <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, 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:
+AgileTs is a global, simple, well-tested State Management Framework implemented in Typescript.
+It offers a reimagined API that focus on **developer experience** and allows you to **quickly** and **easily** manage your States.
+Besides States, AgileTs offers some other powerful apis that make your life easier.
+The philosophy behind AgileTs is simple:
 
 ### 🚅 Straightforward
-Write minimalistic, boilerplate free code that captures your intent.
+Write minimalistic, boilerplate-free code that captures your intent.
 
 **Some straightforward syntax examples:**
+
+- 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"}'
+  MY_STATE.watch((value) => {console.log(value);}); // Watch on State changes
+  ```
 - Store State in any Storage, like [Local Storage](https://www.w3schools.com/html/html5_webstorage.asp)
   ```ts
-  MY_STATE.persist("storage-key")
+  MY_STATE.persist("storage-key");
   ```
 - Create a reactive Array of States
   ```ts
   const MY_COLLECTION = App.createCollection();
   MY_COLLECTION.collect({id: 1, name: "Frank"});
   MY_COLLECTION.collect({id: 2, name: "Dieter"});
   ```
-- Mutate and Check States with simple Functions
+- Compute State depending on other States
   ```ts
-  MY_STATE.undo(); // Undo latest change
-  MY_STATE.is({hello: "jeff"}); // Check if State has the Value '{hello: "jeff"}'
+  const MY_INTRODUCTION = App.createComputed(() => {
+     return `Hello I am '${MY_NAME.vale}' and I use ${MY_STATE_MANAGER.value} for State Management.`;
+  });
   ```
 
 ### 🤸‍ Flexible
-- 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.
+
+- 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 for _reducers_, _actions_, ..
 - Has **0** external dependencies
 
+### ⛳️ Centralize
+
+AgileTs is designed to take all business logic out of UI-Components and put them in a central place often called `core`.
+The benefit of keeping logic separate to UI-Components is to make your code more decoupled, portable and above all easily testable.
+
 ### 🎯 Easy to Use
-Learn the powerful tools of AgileTs in a short amount of time.
-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).
+
+Learn the powerful tools of AgileTs in a short amount of time. An excellent place to start are
+our [Quick Start](https://agile-ts.org/docs/Installation) Guides, or if you don't like to follow any tutorials,
+you can jump straight into our [Example](https://agile-ts.org/docs/examples/Introduction) Section.
 
 
 <br />
@@ -115,12 +134,12 @@ or if you are no fan of following any tutorial, checkout your [Examples](https:/
 
 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
+- The _Core Package_, which acts as the brain of AgileTs and manages all your 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).
+- and a _fitting Integration_ for your 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
@@ -136,7 +155,7 @@ To properly use AgileTs, in a UI-Framework we need to install **two** packages.
 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).
+In case you have any further questions don't hesitate joining our [Community Discord](https://discord.gg/T9GzreAwPH).
 
 
 <br />
@@ -161,9 +180,9 @@ To find out more checkout the [CONTRIBUTING.md](https://github.com/agile-ts/agil
 
 | 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)                                   | Brain of Agile                            |
+| [@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                             |
 | [@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/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        |
 

diff --git a/examples/react/class-component-ts/src/App.tsx b/examples/react/class-component-ts/src/App.tsx
@@ -111,7 +111,7 @@ const FinalApp = AgileHOC(App, {
   myState3: MY_STATE_3,
   myUndefined: undefined,
   myComputed: MY_COMPUTED,
-  myCollection: MY_COLLECTION as any,
+  myCollection: MY_COLLECTION,
   myGroup: MY_COLLECTION.getGroupWithReference('myGroup'),
 });
 

diff --git a/examples/react/class-component-ts/yarn.lock b/examples/react/class-component-ts/yarn.lock
@@ -3,16 +3,16 @@
 
 
 "@agile-ts/api@file:.yalc/@agile-ts/api":
-  version "0.0.9"
+  version "0.0.14"
 
 "@agile-ts/core@file:.yalc/@agile-ts/core":
-  version "0.0.9"
+  version "0.0.13"
 
 "@agile-ts/multieditor@file:.yalc/@agile-ts/multieditor":
-  version "0.0.9"
+  version "0.0.13"
 
 "@agile-ts/react@file:.yalc/@agile-ts/react":
-  version "0.0.9"
+  version "0.0.14"
 
 "@babel/code-frame@7.8.3":
   version "7.8.3"

diff --git a/examples/react/functional-component-ts/src/App.tsx b/examples/react/functional-component-ts/src/App.tsx
@@ -35,7 +35,7 @@ const App = (props: any) => {
     MY_COLLECTION.getSelector('mySelector'),
     MY_STATE_3,
     undefined,
-    MY_COLLECTION as any,
+    MY_COLLECTION,
   ]);
   const [myGroup] = useAgile([MY_COLLECTION.getGroupWithReference('myGroup')]);
 

diff --git a/jest.config.base.js → jest.base.config.js b/jest.config.base.js → jest.base.config.js
@@ -3,10 +3,13 @@ module.exports = {
   coveragePathIgnorePatterns: ['(tests/.*.mock).(jsx?|tsx?)$'],
   modulePathIgnorePatterns: ['dist', 'examples', 'node_modules'],
   collectCoverageFrom: ['**/*.ts', '!**/node_modules/**', '!**/dist/**'],
+  coverageDirectory: '<rootDir>/coverage/',
   testMatch: ['<rootDir>/packages/**/tests/**/*.test.ts'],
   transform: {
     '^.+\\.ts?$': 'ts-jest',
   },
+  // https://github.com/bpedersen/jest-mock-console#readme
+  setupFilesAfterEnv: ['jest-mock-console/dist/setupTestFramework.js'],
   /* https://stackoverflow.com/questions/63904196/esmoduleinterop-flag-set-still-getting-default-import-error */
   globals: {
     'ts-jest': {

diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,8 @@
-const baseConfig = require('./jest.config.base.js');
+const baseConfig = require('./jest.base.config.js');
 
 module.exports = {
   ...baseConfig,
+  // * = only one directory between (for instance packages/react/jest.config.js)
+  // ** = x directories between (for instance packages/core/node_modules/@agile-ts/core/jest.config.js)
   projects: ['<rootDir>/packages/*/jest.config.js'],
 };
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "jest": "^26.6.3",
+    "jest-mock-console": "^1.0.1",
     "lerna": "^3.22.1",
     "nodemon": "^2.0.6",
     "prettier": "2.1.2",

diff --git a/packages/api/jest.config.js b/packages/api/jest.config.js
@@ -1,7 +1,11 @@
-const baseConfig = require('../../jest.config.base');
+const baseConfig = require('../../jest.base.config.js');
+const packageJson = require('./package.json');
+const packageName = packageJson.name.split('@agile-ts/').pop();
 
 module.exports = {
   ...baseConfig,
   rootDir: '../..',
-  name: 'API',
+  roots: [`<rootDir>/packages/${packageName}`],
+  name: packageName,
+  displayName: packageName,
 };
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -6,11 +6,11 @@
   "homepage": "https://agile-ts.org/",
   "description": "Promise based HTTP request API for Node.js",
   "keywords": [
-    "agile",
-    "agile-ts",
     "api",
     "promise-api",
-    "http-request"
+    "http-request",
+    "agile",
+    "agile-ts"
   ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,10 @@
     "dev:push": "yalc push",
     "watch": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "release": "yarn run prepare",
-    "preview": "npm pack"
+    "preview": "npm pack",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint src/**/*"
   },
   "devDependencies": {
     "@agile-ts/core": "file:../core"
@@ -36,9 +39,13 @@
     "type": "git",
     "url": "https://github.com/agile-ts/agile.git"
   },
+  "bugs": {
+    "url": "https://github.com/agile-ts/agile/issues"
+  },
   "files": [
     "dist",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ]
 }
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
@@ -1,10 +1,4 @@
-import {
-  clone,
-  copy,
-  defineConfig,
-  isValidObject,
-  isValidUrl,
-} from '@agile-ts/core';
+import { clone, copy, defineConfig, isValidObject } from '@agile-ts/core';
 
 export default class API {
   public config: ApiConfig;

diff --git a/packages/core/.gitignore b/packages/core/.gitignore
@@ -0,0 +1,3 @@
+# Both are copied during the build
+README.md
+LICENSE
diff --git a/packages/core/jest.config.js b/packages/core/jest.config.js
@@ -1,7 +1,11 @@
-const baseConfig = require('../../jest.config.base');
+const baseConfig = require('../../jest.base.config.js');
+const packageJson = require('./package.json');
+const packageName = packageJson.name.split('@agile-ts/').pop();
 
 module.exports = {
   ...baseConfig,
   rootDir: '../..',
-  name: 'Core',
+  roots: [`<rootDir>/packages/${packageName}`],
+  name: packageName,
+  displayName: packageName,
 };
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -6,12 +6,22 @@
   "homepage": "https://agile-ts.org/",
   "description": "Spacy, Simple, Scalable State Management Framework",
   "keywords": [
-    "agile",
-    "agile-ts",
-    "state-management",
+    "state management",
+    "react",
+    "vue",
     "state",
+    "management",
     "typescript",
-    "reactive"
+    "javascript",
+    "reactive",
+    "modular",
+    "simple",
+    "redux",
+    "replace redux",
+    "state-machine",
+    "functional-reactive-programming",
+    "agile",
+    "agile-ts"
   ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,7 +32,10 @@
     "dev:push": "yalc push",
     "watch": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "release": "node ./scripts/prepublish.js && yarn run prepare",
-    "preview": "npm pack"
+    "preview": "npm pack",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint src/**/*"
   },
   "publishConfig": {
     "access": "public"
@@ -31,9 +44,13 @@
     "type": "git",
     "url": "https://github.com/agile-ts/agile.git"
   },
+  "bugs": {
+    "url": "https://github.com/agile-ts/agile/issues"
+  },
   "files": [
     "dist",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ]
 }