Create packages

ReadMe.md

@@ -1,14 +1,23 @@
-# Agile Framework `1.0.2`
+# Agile Framework `v0.0.3`
 
 _Agile is a global state and logic framework for reactive Typescript & Javascript applications. Supporting frameworks like React and React Native._
 
 #### Agile is strongly inspired by [PulseJs](https://github.com/pulse-framework/pulse)
-It was mainly created to learn how Pulse works under the hood, and it was fun to 'copy' and optimize PulseJs.
-I will use this project mainly for my own projects because here the code style is after my taste..
-So I can change things quickly and don't have to deal with a big framework which is used by many people and must function perfectly.
+It was mainly created to learn how PulseJs works under the hood, and it was fun to 'copy' and optimize PulseJs.
+This framework will mainly be used for my own projects because here I can make changes quickly without having fear to damage big projects from other people.. 
+because nearly every app depends on a state-management framework.. and if that doesn't work properly the app won't too 
+
 
 ##### Feel free to use it but be aware that it is optimized to my needs and has no [docs](https://pulsejs.org/)
 
+| Name                                                                     |                                                                               Latest Version                                                                                |
+| ------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| [@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)                     |
+| [@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)                            |
+| [@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)                              |
+
 <div align="center">
   <img src="https://i.pinimg.com/originals/66/70/fd/6670fd61b91760bf8f04ca0479a2e0d1.gif">
 </div>
+
+

examples/react-typescript/package.json

@@ -14,7 +14,8 @@
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3",
     "typescript": "~3.7.2",
-    "agile-framework": "file:../../"
+    "@agile-ts/core": "file:../../packages/core",
+    "@agile-ts/react": "file:../../packages/react"
   },
   "scripts": {
     "start": "react-scripts start",

examples/react-typescript/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import {useAgile, useEvent} from 'agile-framework';
+import {useAgile, useEvent} from '@agile-ts/react';
 import {MY_COLLECTION, MY_COMPUTED, MY_EVENT, MY_STATE, MY_STATE_2} from "./core";
 
 const App = (props: any) => {
@@ -10,6 +10,7 @@ const App = (props: any) => {
     const [myCollection] = useAgile([MY_COLLECTION.getGroup('myGroup')]);
     const mySelector = useAgile(MY_COLLECTION.getSelector('mySelector'));
 
+    // @ts-ignore
     useEvent(MY_EVENT, () => {
         console.log("Triggered Event");
     });

examples/react-typescript/src/core/index.ts

@@ -1,13 +1,11 @@
-import Agile from 'agile-framework';
-import React from "react";
+import Agile from '@agile-ts/core';
 
 export const App = new Agile({
     logJobs: true,
-    framework: React
 });
 
-export const MY_STATE = App.State<string>("MyState", "my-state").persist();
-export const MY_STATE_2 = App.State<string>("MyState2").persist("my-state2");
+export const MY_STATE = App.State<string>("MyState", "my-state");//.persist();
+export const MY_STATE_2 = App.State<string>("MyState2");//.persist("my-state2");
 
 MY_STATE.watch("test", (value) => {
     console.log("Watch " + value);