Merge pull request #81 from agile-ts/develop

added dynamic announcementBar

Author: bennobuilder

docs/Interfaces.md

@@ -172,68 +172,6 @@ For example Agile Logs are by default purple.
 
 
 
-## `StorageMethods`
-
-The `StorageMethodsInterface` is used in the creation of a Agile [Storage](./packages/core/features/storage/Introduction.md) Interface.
-Here is a Typescript Interface for quick reference, 
-however each property will be explained in more detail below.
-```ts
-export interface StorageMethodsInterface {
-  get: (key: string) => any;
-  set: (key: string, value: any) => void;
-  remove: (key: string) => void;
-}
-```
-
-<br/>
-
-#### `get`
-
-Method to get a specific value at `primaryKey` from the external Storage.
-```ts
-myStorage.get("item1"); // Calls the here defined get method
-```
-
-| Type                     | Default   | Required |
-|--------------------------|-----------|----------|
-| `(key:  string) => any`  | undefined | Yes      |
-
-<br/>
-
-#### `set`
-
-Method to set a specific value at `primaryKey` into the external Storage.
-```ts
-myStorage.set("item1", {my: "value"}); // Calls the here defined set method
-```
-
-| Type                                  | Default   | Required |
-|---------------------------------------|-----------|----------|
-| `(key:  string, value: any) => void`  | undefined | Yes      |
-
-<br/>
-
-#### `remove`
-
-Method to remove a specific value at `primaryKey` from the external Storage.
-```ts
-myStorage.remove("item1"); // Calls the here defined remove method
-```
-
-| Type                       | Default   | Required |
-|----------------------------|-----------|----------|
-| `(key:  string) => void`   | undefined | Yes      |
-
-
-
-<br/>
-
----
-
-<br/>
-
-
-
 ## `StateIngestConfig`
 
 The `StateIngestConfigInterface` is used as configuration object in functions like `set()` or `undo()`.
@@ -247,7 +185,7 @@ export interface StateIngestConfigInterface
 }
 ```
 The `StateIngestConfigInterface` extends some other Interfaces:
-- [StateRuntimeJobConfigInterface](#stateruntimejobconfiginterface)
+- [StateRuntimeJobConfigInterface](#stateruntimejobconfig)
 - [IngestConfigInterface](#ingestconfiginterface)
 
 <br/>
@@ -280,7 +218,7 @@ to see when which change has been passed through the `runtime`.
 
 
 
-## `StateRuntimeJobConfigInterface`
+## `StateRuntimeJobConfig`
 
 The `StateRuntimeJobConfigInterface` is used as configuration object in functions like `replace()` or `select()`.
 Here is a Typescript Interface for quick reference, 
@@ -935,12 +873,14 @@ The `GroupAddConfigInterface` is used as configuration object in functions like
 Here is a Typescript Interface for quick reference,
 however each property will be explained in more detail below.
 ```ts
-export interface GroupAddConfig {
+export interface GroupAddConfig extends StateIngestConfigInterface {
     method?: 'unshift' | 'push';
     overwrite?: boolean;
-    background?: boolean;
 }
 ```
+The `GroupAddConfig` extends some other Interfaces:
+- [StateIngestConfigInterface](#stateingestconfig)
+
 
 <br/>
 
@@ -982,24 +922,6 @@ MY_GROUP.add(5); // Group value is '[1, 5, 6, 2]'
 |--------------------------|-----------|----------|
 | `boolean`                | false     | No       |
 
-<br/>
-
-#### `background`
-
-If the `itemKey` should be added in `background`,
-so that no Component rerender which has bound the Group to itself.
-```ts {5}
-// Causes rerender on Components
-MY_GROUP.add(1);
-
-// Doesn't cause rerender on Components
-MY_GROUP.add(1, {background: true});
-```
-
-| Type                     | Default   | Required |
-|--------------------------|-----------|----------|
-| `boolean`                | false     | No       |
-
 
 
 <br/>
@@ -1049,31 +971,96 @@ MY_COLLECTION.updateItemKey([1, 3], {background: true});
 
 
 
-## `GroupRemoveConfig`
+## `ComputeConfig`
 
-The `GroupRemoveConfigInterface` is used as configuration object in functions like `remove()`.
+The `RecomputeConfigInterface` is used as configuration object in functions like `compute()`.
 Here is a Typescript Interface for quick reference,
 however each property will be explained in more detail below.
 ```ts
-export interface GroupRemoveConfigInterface {
-    background?: boolean;
+export interface ComputeConfigInterface {
+    autodetect?: boolean;
 }
 ```
 
 <br/>
 
-#### `background`
+#### `autodetect`
 
-If the `itemKey` should be removed in `background`,
-so that no Component rerender which has bound the Group to itself.
-```ts {5}
-// Causes rerender on Components
-MY_GROUP.remove(1);
+If the Computed should autodetect dependencies used in the `computeFunction`.
+```ts {2,4}
+MY_COMPUTED.computeFunction = () => MY_NAME.value + MY_AGE.value;
+MY_COMPUTED.recompute({autodetect: false});
+MY_COMPUTED.deps; // Returns '[]'
+MY_COMPUTED.recompute({autodetect: true});
+MY_COMPUTED.deps; // Returns '[Obserrver(MY_NAME), Observer(MY_AGE)]'
+```
 
-// Doesn't cause rerender on Components
-MY_GROUP.remove(1, {background: true});
+| Type                     | Default   | Required |
+|--------------------------|-----------|----------|
+| `boolean`                | true      | No       |
+
+
+
+<br/>
+
+---
+
+<br/>
+
+
+
+## `RecomputeConfig`
+
+The `RecomputeConfigInterface` is used as configuration object in functions like `recompute()`.
+Here is a Typescript Interface for quick reference,
+however each property will be explained in more detail below.
+```ts
+export interface RecomputeConfigInterface
+    extends StateIngestConfigInterface,
+        ComputeConfigInterface {}
+```
+The `RecomputeConfig` extends some other Interfaces:
+- [StateIngestConfigInterface](#stateingestconfig)
+- [ComputeConfigInterface](#computeconfig)
+
+
+
+<br/>
+
+---
+
+<br/>
+
+
+
+## `UpdateComputeFunctionConfig`
+
+The `UpdateComputeFunctionConfigInterface` is used as configuration object in functions like `updateComputeFunction()`.
+Here is a Typescript Interface for quick reference,
+however each property will be explained in more detail below.
+```ts
+export interface UpdateComputeFunctionConfigInterface
+    extends RecomputeConfigInterface {
+    overwriteDeps?: boolean;
+}
+```
+The `RecomputeConfig` extends some other Interfaces:
+- [RecomputeConfigInterface](#recomputeconfig)
+
+<br/>
+
+#### `overwriteDeps`
+
+If the new hard coded dependencies should entirely overwrite the old hard coded dependencies or get merged into them.
+```ts {2,4}
+MY_COMPUTED.deps; // // Returns '[Obserrver(MY_NAME), Observer(MY_AGE)]'
+MY_COMPUTED.updateComputeFunction(() => {}, [MY_LOCATION], {overwriteDeps: false});
+MY_COMPUTED.deps; // // Returns '[Obserrver(MY_NAME), Observer(MY_AGE), Observer(MY_LOCATION)]'
+MY_COMPUTED.updateComputeFunction(() => {}, [MY_LOCATION], {overwriteDeps: true});
+MY_COMPUTED.deps; // // Returns '[Observer(MY_LOCATION)]'
 ```
 
 | Type                     | Default   | Required |
 |--------------------------|-----------|----------|
-| `boolean`                | false     | No       |
+| `boolean`                | true      | No       |
+

docs/examples/react-native/All.md

@@ -9,4 +9,6 @@ slug: /examples/react-native
 
 WIP Docs!
 
-:::
+:::
+
+https://snack.expo.io/@bennodev/agilets-first-state

docs/examples/react/All.mdx

@@ -26,14 +26,21 @@ export const CodeSandBoxEmbed = ({ uri, height }) => (
 );
 
 ## 😎 First State
-
 <CodeSandBoxEmbed uri={"agilets-first-state-f12cz"}/>
 
-## 👨‍👩‍👦‍ First Collection
 
+## 👨‍👩‍👦‍ First Collection
 <CodeSandBoxEmbed uri={"agilets-first-collection-uyi9g"} />
 
 
+## ⚙️‍ First Computed
+<CodeSandBoxEmbed uri={"agilets-first-computed-kisgr"} />
+
+
 ## 📝 Multieditor
+<CodeSandBoxEmbed uri={"multieditor-yxt4x"} height={800}/>
+
+
+## 👴 First State [Class Component]
+<CodeSandBoxEmbed uri={"agilets-first-state-with-hoc-1qdew"}/>
 
-<CodeSandBoxEmbed uri={"multieditor-yxt4x"} height={800}/>

docs/main/Frameworks.md

@@ -0,0 +1,28 @@
+---
+id: frameworks
+title: Frameworks
+sidebar_label: Frameworks
+slug: /frameworks
+---
+
+### 👾 UI-Layers
+
+| Framework                        | Supported | Planned |
+|----------------------------------|-----------|---------|
+| [React](https://reactjs.org)     | true      | -       |
+| [Angular](https://angular.io/) | false     | true    |
+| [Vue](https://vuejs.org/)        | false     | true    |
+| [Svelte](https://svelte.dev/)    | false     | false   |
+
+### 🤖 SSR-Frameworks
+
+| Framework                           | Supported | Planned |
+|-------------------------------------|-----------|---------|
+| [NextJS](https://nextjs.org/)       | false     | true    |
+| [Gatsby](https://www.gatsbyjs.com/) | false     | true    |
+
+### ❓ Something missing
+
+If you find issues with the documentation or have suggestions on how to improve the documentation or the project in
+general, please [file an issue](https://github.com/agile/agile-ts/issues) for us or join
+our [Discord Community](https://discord.gg/T9GzreAwPH).

docs/main/Installation.md

@@ -5,7 +5,7 @@ sidebar_label: Installation
 slug: /installation
 ---
 
-AgileTs is essentially a set of npm [packages](https://github.com/agile-ts/agile/tree/master/packages) that can be installed over [npm](https://www.npmjs.com/).
+`AgileTs` is essentially a set of node modules [packages](https://github.com/agile-ts/agile/tree/master/packages) that can be installed over [npm](https://www.npmjs.com/).
 
 ### 🔑 Requirements
 

docs/main/Introduction.md

@@ -39,6 +39,11 @@ 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"}'
+  ```
 - Store State in any Storage, like [Local Storage](https://www.w3schools.com/html/html5_webstorage.asp)
   ```ts
   MY_STATE.persist("storage-key")
@@ -49,28 +54,28 @@ Write minimalistic, boilerplate-free code that captures your intent.
   MY_COLLECTION.collect({id: 1, name: "Frank"});
   MY_COLLECTION.collect({id: 2, name: "Dieter"});
   ```
-- 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"}'
-  ```
 
 ### 🤸‍ Flexible
 
-- Works in nearly any UI-Framework. Check [here](https://agile-ts.org/docs/frameworks) if your preferred Framework is supported too.
+- Works in nearly any UI-Layer. Check [here](Frameworks.md) 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
+- 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. An excellent place to start are
-our [Quick Start](./Installation.md) Guides, or if you are no fan of following any tutorial, check out
-the [Example](../examples) section.
+our [Quick Start](./Installation.md) Guides, or if you are no fan of following any tutorial, 
+jump straight into our [Example](../examples) section.
 
 
 ## ⏳ Quick Example
 
-Instead of talking too much about the advantages of AgileTs, we should start coding.
+Instead of talking too much about the benefits of AgileTs, let's start programming.
 
 ### 😎 Our first State
 
@@ -98,11 +103,17 @@ To find out more, check out our [Quick Start Guides](./Installation.md).
 Test AgileTs yourself. 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)
 
 More examples can be found in the [Example](../examples/Indroduction.md) Section.
 
+## 👨‍💻 When use AgileTs
+
+AgileTs is thought to handle the business logic and logic in general that isn't explicitly bound to a Component of your application.
+So you should use AgileTs if you have to handle any global State and logic that you want to manage at a central place.
+
 ## 👨‍🏫 Learn AgileTs
 
 We have a variety of resources available to help you learn AgileTs. An excellent place to start are
@@ -132,6 +143,8 @@ the [api](../packages/api/Introduction.md) package. If you click on one of them,
 about the package, an Installation Guide and all its features. In case of the [core](../packages/core/Introduction.md)
 package you find the [State](../packages/core/features/state/Introduction.md)
 and [Collection](../packages/core/features/collection/Introduction.md) docs in the Features Section.
+Be aware that `⚠️ WIP` isn't an actual package. It is meant to separate packages that are currently `work in progress` 
+and not ready for the outer world.
 
 ### 📁 Examples