Merge pull request #92 from agile-ts/develop

Optimized docs

Author: bennobuilder

docs/Interfaces.md

@@ -102,7 +102,7 @@ During the overwrite process, the following properties are overwritten:
 
 Whether to apply the State value changes to the corresponding external [Storage/s](packages/core/api/storage/Introduction.md).
 ```ts {1}
-const MY_STATE = App.creacteState('jeff').persist('storageKey');
+const MY_STATE = createState('jeff').persist('storageKey');
 // Storage at 'storageKey': 'jeff'
 MY_STATE.set("hans", {storage: true});
 // Storage at 'storageKey': 'hans'
@@ -188,7 +188,7 @@ or _updating the persisted State value in the corresponding external Storage_.
 
 When set to `true`, the Job is forced through the `runtime` no matter what happens.
 ```ts {7}
-const MY_STATE = App.createState('myValue');
+const MY_STATE = createState('myValue');
 
 // Won't be executed by the runtime because the State value hasn't changed
 MY_STATE.set('myValue');
@@ -275,7 +275,7 @@ export interface PatchConfigInterface extends StateIngestConfigInterface {
 
 If `true`, new properties are added to the State value, although they might not yet be present there.
 ```ts {2,4}
-const MY_STATE = App.createState({id: 1, name: "frank"});
+const MY_STATE = createState({id: 1, name: "frank"});
 MY_STATE.patch({location: "Germany"}, {addNewProperties: false}); 
 MY_STATE.value; // Returns {id: 1, name: "frank"}
 MY_STATE.patch({location: "Germany"}, {addNewProperties: true});
@@ -395,7 +395,7 @@ We recommend giving each Group a unique `key` since it has only advantages:
 
 Defines whether the Group is a `placeholder`.
 ```ts
-const MY_GROUP = App.createGroup([1, 2, 3], {
+const MY_GROUP = createGroup([1, 2, 3], {
     isPlaceholder: true
 });
 
@@ -463,7 +463,7 @@ We recommend giving each Selector a unique `key` since it has only advantages:
 
 Defines whether the Selector is a `placeholder`.
 ```ts
-const MY_SELECTOR = App.creaateSelector(1, {
+const MY_SELECTOR = MY_COLLECTION.createSelector(1, {
     isPlaceholder: true
 });
 
@@ -522,7 +522,7 @@ if we collect a data object with an already existing `primaryKey` in order to up
 
 If `true`, the passed data object is merged into the found Item data instead of overwriting it entirely.
 ```ts {6,9}
-const MY_COLLECTION = App.createCollection({
+const MY_COLLECTION = createCollection({
     initialData: [{id: 1, name: 'frank', age: 10}]
 });
 

docs/examples/react/Introduction.md

@@ -23,6 +23,7 @@ slug: /examples/react
 
 ## 👾 Performance
 - [Large State](./react/large-state)
+- [Large Collection](./react/large-collection)
 - [Frequent Updates](./react/frequent-updates)
 
 You can get an overview of all performance examples in [this](https://github.com/agile-ts/performance-compare) repository

docs/examples/react/examples/LargeCollection.mdx

@@ -0,0 +1,12 @@
+---
+id: large-collection
+title: Large Collection
+sidebar_label: Large Collection
+slug: /examples/react/large-collection
+---
+
+import {CodeSandBoxEmbed} from "../../../../src/components/docs/CodeSandBoxEmbed";
+
+<CodeSandBoxEmbed uri={'agilets-large-collection-1kr4z'} />
+
+[Back](../react)

docs/examples/react/examples/LargeState.mdx

@@ -7,6 +7,6 @@ slug: /examples/react/large-state
 
 import {CodeSandBoxEmbed} from "../../../../src/components/docs/CodeSandBoxEmbed";
 
-<CodeSandBoxEmbed uri={'agilets-large-state-1kr4z'} />
+<CodeSandBoxEmbed uri={'agilets-large-state-pyo63'} />
 
 [Back](../react)

docs/main/Installation.md

@@ -21,11 +21,10 @@ Below you find quick start guides for already supported UI-Frameworks.
 
 - [React / React-Native](../quick_start/React.md)
 - [Vue](../quick_start/Vue.md)
-- Angular (coming soon)
 
 ### 📁 Packages
 
-Separate installation guides for single AgileTs packages.
+Separate installation guides for particular AgileTs packages.
 
 - [@agile-ts/core](../packages/core/Installation.md)
 - [@agile-ts/react](../packages/react/Installation.md)

docs/main/Introduction.md

@@ -21,13 +21,20 @@ slug: /introduction/
 <br />
 <br />
 
+:::info
+
+Want to get a quick overview of AgileTs?
+Checkout the [AgileTs Introduction Blogpost](https://dev.to/bennodev19/createstate-introducing-agilets-a-flexible-state-manager-91f).
+
+:::
+
 ## 👋 Introduction {#introduction}
 
 AgileTs is a global State and Logic Library implemented in Typescript.
 It offers a reimagined API that focuses on **developer experience**
 and allows you to **easily** and **flexible** manage your application States.
 Besides [States](../packages/core/api/state/Introduction.md), 
-AgileTs offers some other powerful APIs that make your life easier,
+AgileTs offers some other powerful and tree shakable APIs that make your life easier,
 such as [Collections](../packages/core/api/collection/Introduction.md) 
 and [Computed States](../packages/core/api/computed/Introduction.md).
 The philosophy behind AgileTs is simple:
@@ -36,19 +43,19 @@ The philosophy behind AgileTs is simple:
 
 Write minimalistic, boilerplate-free code that captures your intent.
 ```ts
-// Create State with inital value 'frank'
+// Create State with the inital value 'frank'
 const MY_STATE = createState('frank');
 
-// Update State value from 'frank' to 'jeff'
+// Update the State value from 'frank' to 'jeff'
 MY_STATE.set('jeff');
 
-// Undo latest State value change
+// Undo the latest State value change
 MY_STATE.undo();
 
-// Reset State value to its initial value
+// Reset the State value to its initial value
 MY_STATE.reset();
 
-// Permanently store State value in an external Storage
+// Permanently store the State value in an external Storage
 MY_STATE.persist("storage-key"); 
 ```
 
@@ -111,7 +118,6 @@ It's only one click away. Just select your preferred UI-Framework below.
 - [React](https://codesandbox.io/s/agilets-first-state-f12cz)
 - [React-Native](https://snack.expo.io/@bennodev/agilets-first-state)
 - [Vue](https://codesandbox.io/s/agilets-first-state-i5xxs)
-- Angular (coming soon)
 
 More examples can be found in the [Example section](../examples/Introduction.md).
 

docs/main/StyleGuides.md

@@ -37,8 +37,8 @@ Feel free to choose one of them and adapt it to your needs.
 ## 🚀 Inspiration 1
 
 The `Style Guide 1` is intended for **smaller and medium size applications** 
-with about `1-3` entities. In AgileTs, `entities` are things with distinct 
-and independent existence like users, posts, or todos.
+with about `1-3` entities. (In AgileTs, `entities` are things with distinct 
+and independent existence like users, posts, or todos.)
 We put everything related to these entities 
 into a single file of truth called `store.js` or `core.js`.
 In the end, the `core` file contains all the business logic of your application,
@@ -72,25 +72,20 @@ how it can be constructed.
 
 ### 📝 store.ts
 
-In the `store.ts` file, we instantiate the Agile Instance (`Agile`) 
-and define all [Agile Sub Instances](../main/Introduction.md#agile-sub-instance) (`MY_TODOS`).
-In addition, all actions (`updateTodo()`, `toogleTodo()`, ..) 
-and if you are using Typescript interfaces (`TodoInterface`) are located here.
+In the `store.ts` file, we instantiate all [Agile Sub Instances](../main/Introduction.md#agile-sub-instance) (`MY_TODOS`),
+define all actions (`updateTodo()`, `toogleTodo()`, ..) 
+and if you are using Typescript interfaces (`TodoInterface`) are located here too.
 ```ts title="store.ts"
-import { Agile, assignSharedAgileInstance } from "@agile-ts/core";
-import reactIntegration from "@agile-ts/react";
+import { createCollection } from "@agile-ts/core";
 
-export interface TodoInterface {
+export interface TodoItemInterface {
   id: number;
   text: string;
   done: boolean;
 }
 
-// Create Agile Instance
-const App = new Agile().integrate(reactIntegration);
-
 // Create Collection (a dynamic set of States)
-export const MY_TODOS = App.createCollection<TodoInterface>({
+export const MY_TODOS = createCollection<TodoItemInterface>({
   key: "todos"
 }).persist(); // perist does store the Collection in the Local Storage
 
@@ -138,7 +133,7 @@ We can easily differentiate between global and local States in our UI-Components
 
 The `Style Guide 2` is intended for **medium size and large applications** 
 with more than `3` entities. 
-In AgileTs, `entities` are things with distinct and independent existence like users, posts, or todos.
+(In AgileTs, `entities` are things with distinct and independent existence like users, posts, or todos.)
 At first glance, this way of organizing your application looks very boiler-late-ey. 
 Each entity has its own directory with a bunch of files.
 However, there is a system behind it,
@@ -194,7 +189,6 @@ core
 |       └── user.controller.ts
 |       └── user.interfaces.ts
 |       └── user.routes.ts
-|── app.ts
 |── index.ts
 .
 ```
@@ -309,15 +303,15 @@ and contains the [Agile Sub Instances](../main/Introduction.md#agile-sub-instanc
 These Agile Sub Instances can and should then only be modified by the actions ([actions.ts](#1-actionsts))
 or bound to UI-Components in the UI-Layer for reactivity.
 ```ts title="todo.controller.ts in 📁todo"
-import {App} from '../../app';
+import {createCollection, createComputed} from "@agile-ts/core";
 import {TodoInterface} from './todo.interfaces';
 import {CURRENT_USER} from '../user'
 
 // Contains all existing TODO's
-export const TODOS = App.createCollection<TodoInterface>()();
+export const TODOS = createCollection<TodoInterface>()();
 
 // Contains all TODO's that belong to the current logged in USER
-export const USER_TODOS = App.createComputed(() => {
+export const USER_TODOS = createComputed(() => {
     return TodosCollection.getGroup(CURRENT_USER.value.id).output;
 });
 ```
@@ -377,33 +371,6 @@ export const ADD_TODO = async (payload: AddTodoPayloadInterface): Promise<TodoIn
 // ..
 ```
 
-## 📝 app.ts
-
-:::note
-
-If you decided to use the 
-[shared Agile Instance](../packages/core/api/agile-instance/Introduction.md#-shared-agile-instance) 
-you can skip this part.
-
-:::
-
-In the `app.ts` file, we create our main `Agile Instance` and configure it to meet our needs.
-For example, we determine here with which UI-Framework AgileTs should work together.
-
-```ts title="app.ts"
-import {Agile, Logger, assignSharedAgileInstance} from "@agile-ts/core";
-import reactIntegration from "@agile-ts/react";
-
-export const App = new Agile({
-    logConfig: {
-        level: Logger.level.WARN
-    }
-}).integrate(reactIntegration);
-
-// Assign created Agile Instance as shared Agile Instance
-assignSharedAgileInstance(App);
-```
-
 ## 📝 index.ts
 
 Here we export our `core` entities, so that each entity 

docs/packages/core/Introduction.md

@@ -44,7 +44,7 @@ which includes, for example, handy classes like:
   that we need to remember globally at a later point in time.
   While offering a toolkit to use and mutate this _set_ of Information.
   ```ts
-  const MY_COLLECTION = App.createCollection();
+  const MY_COLLECTION = createCollection();
 
   // Add Data to Collection
   MY_COLLECTION.collect({id: 1, name: "frank"});
@@ -57,7 +57,7 @@ which includes, for example, handy classes like:
   A `Computed` is an extension of the `State Class` that computes
   its value from a specified function.
   ```ts
-   const MY_COMPUTED = App.createComputed(() => {
+   const MY_COMPUTED = createComputed(() => {
      return MY_STATE_1.value + MY_STATE_2.value;
   });
   ```