Merge pull request #3 from agile-ts/develop

Develop

Author: bennobuilder

.npmignore

@@ -1,13 +1,13 @@
-# Agile Framework `1.0`
+# Agile Framework `1.0.2`
 
 _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 project because here the code style is after my taste..
+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.
 
-##### Feel free to use it but be aware that it is optimized to my needs and has no docs
+##### Feel free to use it but be aware that it is optimized to my needs and has no [docs](https://pulsejs.org/)
 
 <div align="center">
   <img src="https://i.pinimg.com/originals/66/70/fd/6670fd61b91760bf8f04ca0479a2e0d1.gif">

ReadMe.md

@@ -1,21 +1,24 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
-import {useAgile} from 'agile-framework';
-import {MY_COLLECTION, MY_COMPUTED, MY_STATE, MY_STATE_2} from "./core";
+import {useAgile, useEvent} from 'agile-framework';
+import {MY_COLLECTION, MY_COMPUTED, MY_EVENT, MY_STATE, MY_STATE_2} from "./core";
 
 const App = (props: any) => {
 
     const [myComputed] = useAgile([MY_COMPUTED]);
     const [myState, myState2] = useAgile([MY_STATE, MY_STATE_2]);
     const [myCollection] = useAgile([MY_COLLECTION.getGroup('myGroup')]);
-    const [mySelector] = useAgile([MY_COLLECTION.getSelector('mySelector')]);
+    const mySelector = useAgile(MY_COLLECTION.getSelector('mySelector'));
 
+    useEvent(MY_EVENT, () => {
+        console.log("Triggered Event");
+    });
 
     console.log("myComputed", MY_COMPUTED);
     console.log("myState", MY_STATE);
     console.log("myState2", MY_STATE_2);
     console.log("myCollection", MY_COLLECTION);
+    console.log("myEvent", MY_EVENT);
 
 
     return (
@@ -47,6 +50,15 @@ const App = (props: any) => {
                     </p>
                 </div>
 
+                <div className={"Container"}>
+                    <h3 className={"Title"}>My Event</h3>
+                    <button onClick={() => setTimeout(() => {
+                        MY_EVENT.trigger({name: 'test'})
+                    }, 1000)}>
+                        Trigger
+                    </button>
+                </div>
+
                 <div className={"Container"}>
                     <h3 className={"Title"}>My Collection</h3>
                     <div>
@@ -72,11 +84,11 @@ const App = (props: any) => {
                     <button onClick={() => setTimeout(() => {
                         MY_COLLECTION.remove("newId3").everywhere();
                     }, 1000)}>
-                       Remove newId3
+                        Remove newId3
                     </button>
                 </div>
 
-                <p>MySelector: {mySelector.name}</p>
+                <p>MySelector: {mySelector?.name}</p>
 
             </header>
         </div>

examples/react-typescript/src/App.tsx

@@ -35,3 +35,5 @@ export const MY_COLLECTION = App.Collection<collectionValueInterface>(collection
 MY_COLLECTION.collect({id: 'id1', name: 'test'});
 MY_COLLECTION.collect({id: 'id2', name: 'test2'}, 'myGroup');
 console.log("Initial: myCollection ", MY_COLLECTION);
+
+export const MY_EVENT = App.Event<{name: string}>();

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

@@ -1,15 +1,27 @@
 {
-  "name": "agile-framework",
-  "version": "1.0.0",
+  "name": "agile",
+  "version": "1.0.2",
   "description": "Global state and logic framework for reactive React applications.",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "tsc",
     "dev": "tsc-watch",
-    "test": "mocha -r ts-node/register --exit test/**/*.spec.ts"
+    "test": "mocha -r ts-node/register --exit test/**/*.spec.ts",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test",
+    "version": "npm run format && git add -A src",
+    "postversion": "git push && git push --tags"
   },
-  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/agile-architecture/agile.git"
+  },
+  "keywords": [
+    "React",
+    "State-Management"
+  ],
   "author": "BennoDev",
   "license": "ISC",
   "dependencies": {
@@ -24,5 +36,8 @@
     "tsc-watch": "^4.1.0",
     "tslib": "^2.0.0",
     "typescript": "^3.9.7"
-  }
+  },
+  "files": [
+    "dist/**/*"
+  ]
 }

package-lock.json

@@ -1,11 +1,12 @@
 import Runtime from "./runtime";
 import use, {Integration} from "./integrations/use";
 import SubController from "./sub";
-import {State} from "./state";
+import State from "./state";
 import Storage, {StorageConfigInterface} from "./storage";
-import {Collection, Config, DefaultDataItem} from "./collection";
-import {Computed} from "./computed";
-import API, {apiConfig} from "./api/api";
+import Collection, {CollectionConfig, DefaultDataItem} from "./collection";
+import Computed from "./computed";
+import API, {apiConfig} from "./api";
+import Event, {EventConfig, DefaultEventPayload} from "./event";
 
 export interface AgileConfigInterface {
     framework?: Integration | any // Integration = for custom frameworks | any = for existing frameworks like react
@@ -87,7 +88,7 @@ export default class Agile {
     /**
      * Create Agile Collection
      */
-    public Collection = <DataType = DefaultDataItem>(config?: Config<DataType>) => new Collection<DataType>(this, config);
+    public Collection = <DataType = DefaultDataItem>(config?: CollectionConfig<DataType>) => new Collection<DataType>(this, config);
 
 
     //=========================================================================================================
@@ -98,7 +99,16 @@ export default class Agile {
      * @param deps Array - An array of state items to depend on
      * @param computeFunction Function - A function where the return value is the state, ran every time a dep changes
      */
-    public Computed = <T = any>(computeFunction: () => T, deps?: Array<State>) => new Computed<T>(this, computeFunction, deps);
+    public Computed = <ComputedValueType = any>(computeFunction: () => ComputedValueType, deps?: Array<State>) => new Computed<ComputedValueType>(this, computeFunction, deps);
+
+
+    //=========================================================================================================
+    // Event
+    //=========================================================================================================
+    /**
+     * Create a Pulse Event
+     */
+    public Event = <PayloadType = DefaultEventPayload>(config?: EventConfig) => new Event<PayloadType>(this, config);
 
 
     //=========================================================================================================

package.json

@@ -1,5 +1,5 @@
-import {Collection, DefaultDataItem, ItemKey} from "./index";
-import {State} from "../state";
+import Collection, {DefaultDataItem, ItemKey} from "./index";
+import State from "../state";
 import Agile from "../agile";
 import {defineConfig, normalizeArray} from "../utils";
 import {updateGroup} from "./perstist";
@@ -16,7 +16,7 @@ export interface GroupConfigInterface {
     key?: GroupKey // should be a unique key/name which identifies the group
 }
 
-export class Group<DataType = DefaultDataItem> extends State<Array<ItemKey>> {
+export default class Group<DataType = DefaultDataItem> extends State<Array<ItemKey>> {
     collection: () => Collection<DataType>;
 
     _output: Array<DataType> = []; // Output of the group (Note: _value are only the keys of the collection items)

src/agile.ts

@@ -1,9 +1,9 @@
 import Agile from "../agile";
 import Item from "./item";
-import {Group, GroupConfigInterface, GroupKey} from "./group";
-import {Selector, SelectorKey} from "./selector";
+import Group, {GroupConfigInterface, GroupKey} from "./group";
+import Selector, {SelectorKey} from "./selector";
 import {copy, defineConfig, flatMerge, isValidObject, normalizeArray} from "../utils";
-import {State, StateKey} from "../state";
+import State, {StateKey} from "../state";
 import {StorageKey} from "../storage";
 import {persistValue, removeItem, setItem} from "./perstist";
 
@@ -26,11 +26,11 @@ export interface CollectOptionsInterface<DataType = any> {
     background?: boolean // If the action should happen in the background -> no rerender
 }
 
-export type Config<DataType = DefaultDataItem> =
+export type CollectionConfig<DataType = DefaultDataItem> =
     | CollectionConfigInterface
     | ((collection: Collection<DataType>) => CollectionConfigInterface);
 
-export class Collection<DataType = DefaultDataItem> {
+export default class Collection<DataType = DefaultDataItem> {
     public agileInstance: () => Agile;
 
     public config: CollectionConfigInterface;
@@ -43,7 +43,7 @@ export class Collection<DataType = DefaultDataItem> {
     public groups: { [key: string]: Group<any> } = {};
     public selectors: { [key: string]: Selector<any> } = {};
 
-    constructor(agileInstance: Agile, config: Config<DataType> = {}) {
+    constructor(agileInstance: Agile, config: CollectionConfig<DataType> = {}) {
         this.agileInstance = () => agileInstance;
 
         // If collection config is a function, execute and assign to config
@@ -61,10 +61,10 @@ export class Collection<DataType = DefaultDataItem> {
         // Set Key
         this._key = this.config.key;
 
-        // Create Groups
+        // Init Groups
         this.initSubInstances('groups');
 
-        // Create Selectors
+        // Init Selectors
         this.initSubInstances('selectors');
     }
 
@@ -315,7 +315,7 @@ export class Collection<DataType = DefaultDataItem> {
         console.warn(`Agile: Group with name '${groupName}' doesn't exist!`);
 
         // Return empty group because it might get annoying to handle with undefined (can check if it exists with group.exists)
-        const group = new Group(this.agileInstance(), this, [], {key: 'dummy'});
+        const group = new Group<DataType>(this.agileInstance(), this, [], {key: 'dummy'});
         group.isPlaceholder = true;
         return group;
     }