Merge pull request #76 from agile-ts/develop

Develop

Author: bennobuilder

docs/Interfaces.md

@@ -681,7 +681,7 @@ export interface UpdateConfigInterface {
 
 If the update data object should be merged into the existing data or overwrite it completely.
 In case we want to merge the data into the existing data, 
-we can decide wether new properties are added to the data object or not.
+we can decide whether new properties are added to the data object or not.
 ```ts {2}
 MY_COLLECTION.collect({id: 1, name: "jeff"});
 MY_COLLECTION.update(1, {name: "hans", age: 12}, {patch: {addNewProperties: false}}); // Item at '1' has value '{name: "hans"}'

docs/main/Introduction.md

@@ -156,6 +156,7 @@ and [PulseJs](https://github.com/pulse-framework/pulse).
 
 ## 💬 What others say
 
-Actually nothing, hehe
+Actually nothing, yet. If you want to be the first one, don't mind tweeting what ever you think about AgileTs.
+But don't forget to tag [@AgileFramework](https://twitter.com/AgileFramework), otherwise we can't find your tweet.
 
 

docs/packages/core/features/agile-instance/Introduction.md

@@ -103,7 +103,7 @@ since there the `localStorage` doesn't exists. With `App.registerStorage()` we c
 
 #### `waitForMount`
 
-This flag declares wether AgileTs should wait until unmounted
+This flag declares whether AgileTs should wait until unmounted
 components get mounted before rerendering them.
 ```ts
 const App = new Agile({

docs/packages/core/features/agile-instance/Methods.md

@@ -15,7 +15,7 @@ Here all methods of the `Agile Instance` are described.
 ## `createState()`
 
 Creates a new [State](../state/Introduction.md),
-which gets automatically bound to the [Agile Instance](../agile-instance/Introduction.md) it was created from.
+which is automatically bound to the [Agile Instance](../agile-instance/Introduction.md) it was created from.
 ```ts
 const State = App.createState('jeff', {
     key: 'dummyState',
@@ -30,6 +30,10 @@ const State = App.createState('jeff', {
 | `config`       | [StateConfigInterface](../../../../Interfaces.md#stateconfig)              | {}        | Configuration                                         | No       |
 
 ### 📄 Return
+
+```ts
+State
+```
 Returns a fresh [State](../state/Introduction.md).
 
 
@@ -45,7 +49,7 @@ Returns a fresh [State](../state/Introduction.md).
 ## `createCollection()`
 
 Creates a new [Collection](../collection/Introduction.md),
-which gets automatically bound to the [Agile Instance](../agile-instance/Introduction.md) it was created from.
+which is automatically bound to the [Agile Instance](../agile-instance/Introduction.md) it was created from.
 ```ts {1-4,8-13}
 const Collection = App.createCollection({
     key: 'dummyCollection',
@@ -70,6 +74,10 @@ const Collection2 = App.createCollection((collection) => ({
 
 
 ### 📄 Return
+
+```ts
+Collection
+```
 Returns a fresh [Collection](../collection/Introduction.md).
 
 
@@ -85,7 +93,7 @@ Returns a fresh [Collection](../collection/Introduction.md).
 ## `createComputed()`
 
 Creates a new [Computed](../computed/Introduction.md),
-which gets automatically bound to the [Agile Instance](../agile-instance/Introduction.md) it was created from.
+which is automatically bound to the [Agile Instance](../agile-instance/Introduction.md) it was created from.
 ```ts {1,5-7}
 const Computed = App.createComputed(() => {/* Computed Method */}, [/* hard coded deps */])
 
@@ -105,6 +113,10 @@ const ComputedWithConfig = App.createComputed(() => {/* Computed Method */}, {
 | `deps`            | Array<Observer \| State \| Event \| Group\>                       | []        | Dependencies of Computed                           | No       |
 
 ### 📄 Return
+
+```ts
+Computed
+```
 Returns a fresh [Computed](../computed/Introduction.md).
 
 
@@ -120,7 +132,7 @@ Returns a fresh [Computed](../computed/Introduction.md).
 ## `createEvent()`
 
 Creates a new [Event](../event/Introduction.md),
-which gets automatically bound to the [Agile Instance](../agile-instance/Introduction.md) it was created from.
+which is automatically bound to the [Agile Instance](../agile-instance/Introduction.md) it was created from.
 ```ts
 const Event = App.createEvent({
     key: 'dummyEvent',
@@ -135,6 +147,10 @@ const Event = App.createEvent({
 
 
 ### 📄 Return
+
+```ts
+Event
+```
 Returns a fresh [Event](../event/Introduction.md).
 
 
@@ -149,10 +165,18 @@ Returns a fresh [Event](../event/Introduction.md).
 
 ## `integrate()`
 
-Allows us to integrate AgileTs into nearly any [Framework/Integration](../integration/Introduction.md).
-For instance in case of [React](https://reactjs.org/), AgileTs offers a [React Integration](../integration/Introduction.md),
-which allows us to integrate it into AgileTs.
-```ts {29}
+With `integrate()` we can integrate any Framework [Integration](../integration/Introduction.md) into AgileTs.
+An Integration simply tells AgileTs, howto mutate a particular Component,
+whenever a State changes. To bind States to Components and thus be reactive,
+any Framework using AgileTs needs an Integration for AgileTs.
+For example, to use AgileTs in a [React](https://reactjs.org/) environment, 
+we have to register a React Integration to AgileTs.
+```ts
+App.integrate(reactIntegration);
+```
+To give you some reference, how such an Integration might look like.
+Here is the React Integration:
+```ts
 const reactIntegration = new Integration<typeof React, AgileReactComponent>({
   key: 'react',
   frameworkInstance: React,
@@ -177,11 +201,7 @@ const reactIntegration = new Integration<typeof React, AgileReactComponent>({
 });
 
 // Each initialIntegraion gets integrated into AgileTs automatically during initialation
-// Note: Only useful if you create your own integration
 Agile.initialIntegrations.push(reactIntegration);
-
-// Or we integrate it manually (mostly the case if the auto integration doesn't work)
-App.integrate(reactIntegration);
 ```
 
 ### 📭 Props
@@ -191,6 +211,10 @@ App.integrate(reactIntegration);
 | `integration`   | [Integration](../integration/Introduction.md)                     | undefined | Integration that gets registered/integrated into AgileTs    | Yes      |
 
 ### 📄 Return
+
+```ts
+Agile
+```
 Returns the [Agile Instance](./Introduction.md) it was called from
 
 
@@ -204,10 +228,14 @@ Returns the [Agile Instance](./Introduction.md) it was called from
 
 
 ## `hasIntegration()`
+
 Checks if AgileTs has any registered [Integration](../integration/Introduction.md).
 
 ### 📄 Return
-`boolean`
+
+```ts
+boolean
+```
 
 
 
@@ -221,7 +249,9 @@ Checks if AgileTs has any registered [Integration](../integration/Introduction.m
 
 ## `createStorage()`
 
-Creates a new [Storage](../storage/Introduction.md).
+Creates a new [Storage](../storage/Introduction.md) Interface for AgileTs,
+that allows AgileTs to work with the Storage that the Interface represents.
+The Interface allows AgileTs to permanently store States in the Storage.
 ```ts
 const Storage = App.createStorage({
     key: 'dummyStorage',
@@ -232,7 +262,8 @@ const Storage = App.createStorage({
     }
 })
 ```
-To register a newly created Storage, we use the [registerStorage](#registerstorage) function.
+Such Storage can be registered in AgileTs with the [registerStorage()](#registerstorage) method.
+After a successful registration we can store/[persist](../state/Methods.md#persist) any State in the Storage.
 
 ### 📭 Props
 
@@ -242,6 +273,10 @@ To register a newly created Storage, we use the [registerStorage](#registerstora
 | `methods`   | [StorageMethodsInterface](../../../../Interfaces.md#storagemethods)          | {}        | Methods with which the Storage get mutated        | Yes      |
 
 ### 📄 Return
+
+```ts
+Storage
+```
 Returns a fresh [Storage](../storage/Introduction.md).
 
 
@@ -256,12 +291,13 @@ Returns a fresh [Storage](../storage/Introduction.md).
 
 ## `registerStorage()`
 
-Adds a new [Storage](../storage/Introduction.md) to AgileTs, 
-which later can store persisted Instances (`.persist()`).
-The [Local Storage](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage) is registered by default.
+Registers a new [Storage](../storage/Introduction.md) Interface to AgileTs.
+It is used to permanently store persisted Instances ([`.persist()`](../state/Methods.md)) in the Storage that the Interface represents.
+By default, the [Local Storage](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage) is registered.
+Below you can see how the `localStorage` is registered internally.
 ```ts {13}
-  // Here we create our Storage
-const _localStorage = new Storage({
+// create localStorage Interface with help of the Agile Storage
+const _localStorage = App.createStorage({
     key: 'localStorage',
     async: false,
     methods: {
@@ -271,7 +307,7 @@ const _localStorage = new Storage({
     },
 });
 
-// Here we register our Storage
+// Register Storage to current Agile Instance (App)
 App.register(_localStorage, { default: true }); 
 ```
 
@@ -282,6 +318,10 @@ App.register(_localStorage, { default: true });
 | `integration`   | [Integration](../integration/Introduction.md)                     | undefined | Integration that gets registered/integrated into AgileTs    | Yes      |
 
 ### 📄 Return
+
+```ts
+Agile
+```
 Returns the [Agile Instance](./Introduction.md) it was called from
 
 
@@ -295,8 +335,12 @@ Returns the [Agile Instance](./Introduction.md) it was called from
 
 
 ## `hasStorage()`
+
 Checks if AgileTs has any registered [Storage](../storage/Introduction.md).
-If AgileTs couldn't find any Storage, we aren't able to use the `.persist()` functionality in any Agile Sub Instance.
+If AgileTs couldn't find any Storage, the `.persist()` method can not store any value permanently.
 
 ### 📄 Return
-`boolean`
+
+```ts
+boolean
+```

docs/packages/core/features/agile-instance/Properties.md

@@ -13,13 +13,22 @@ Here useful properties of the `Agile Instance` are described.
 
 ## `logger`
 
-The `logger` is a static property of the `Agile Class`.
-It is an Instance of a handy Class that gets used to Log something in the console, like warnings, errors.
-Feel free to use the Agile Logger in your Application for logging too,
-it is pretty handy.
+The `logger` is a static property of the `Agile Class`, 
+which is internally used to Log warnings, errors, messages, .. into the console.
 ```ts
 Agile.logger.warn("This is a Warning");
 Agile.logger.log("This is a normal Log");
 Agile.logger.if.tag(["render"]).warn("Logs this Warning if the Logger has the Tag 'rerender' active");
 ```
+![Log Custom Styles Example](../../../../../static/img/docs/logger_example.png)
+It can be configured during the creation of the `Agile Class`.
+```ts
+const App = new Agile({
+    logConfig: {
+        level: Logger.level.WARN,
+        active: true,
+        timestamp: true
+    }
+})
+```