Merge pull request #94 from agile-ts/develop

Updated Algolia Config

Author: bennobuilder

docs/Interfaces.md

@@ -303,8 +303,11 @@ Here is a Typescript Interface for quick reference. However,
 each property is explained in more detail below.
 ```ts
 export interface StatePersistentConfigInterface {
+   key?: string | number; 
    loadValue?: boolean;
    storageKeys?: StorageKey[];
+   onMigrate?: (value: any) => ValueType;
+   onSave?: (value: ValueType) => any;
 }
 ```
 
@@ -317,12 +320,12 @@ Or, if the State isn't persisted yet, it stores the State value in the correspon
 Be aware that if we don't allow the `Persistent` to load/store the value, we have to do it ourselves.
 ```ts {2}
 myState.persist({
-   instantiate: false,
+    loadValue: false,
 });
 
 if (myState.persistent?.ready) {
    await myState.persistent?.initialLoading();
-    myState.isPersisted = true;
+   myState.isPersisted = true;
 }
 ```
 Loading the value manually has one advantage.

docs/main/Contributing.md

@@ -1,7 +1,7 @@
 ---
 id: contributing
-title: Contributing
-sidebar_label: Contributing to AgileTs
+title: Contributing to AgileTs
+sidebar_label: Contributing
 slug: /contributing
 description: Contributions to AgileTs are not hard and very welcome.
 image: img/meta.png

docs/main/Introduction.md

@@ -2,18 +2,18 @@
 id: introduction
 title: Introducing AgileTs
 sidebar_label: Introduction
-slug: /introduction/
-description: A global State and Logic Library implemented in Typescript, offering a reimagined API that focuses on developer experience. The AgileTs state management functionality can be used in various frameworks like React, Vue and plain Javascript.
+slug: /introduction
+description: An atom based global State and Logic Library implemented in Typescript, offering a reimagined API that focuses on developer experience. The AgileTs state management functionality can be used in various frameworks like React, Vue and plain Javascript.
 image: img/meta.png
 ---
 
 ## 👋 Introduction {#introduction}
 
-AgileTs is a global State and Logic Library implemented in Typescript.
+AgileTs is an atom based 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 and tree shakable APIs that make your life easier,
+AgileTs offers some other powerful 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:
@@ -35,7 +35,7 @@ MY_STATE.undo();
 MY_STATE.reset();
 
 // Permanently store the State value in an external Storage
-MY_STATE.persist("storage-key"); 
+MY_STATE.persist({key: "storage-key"}); 
 ```
 
 ### 🤸‍ Flexible {#flexible}

docs/main/StyleGuides.md

@@ -382,13 +382,13 @@ and mutate its entities as wished without further thinking.
 For example when we want to add a Todo-Item to the TODO Collection
 we simply call `core.todo.addTodo(/* new todo */);`.
 ```ts title="index.ts"
-import todo from "./controllers/todo";
-import user from "./controllers/user";
+import todo from "./entities/todo";
+import user from "./entities/user";
 import {globalBind} from "@agile-ts/core";
 
 const core = {
-    todo: todo,
-    user: user,
+    todo,
+    user,
 };
 
 // For better debugging we bind the core globally 

docs/packages/api/Introduction.md

@@ -10,7 +10,7 @@ slug: /api
 <a href="https://npm.im/@agile-ts/api">
   <img src="https://img.shields.io/npm/v/@agile-ts/api.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
 <a href="https://npm.im/@agile-ts/api">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/api.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
+  <img src="https://img.shields.io/bundlephobia/minzip/@agile-ts/api.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
 <a href="https://npm.im/@agile-ts/api">
   <img src="https://img.shields.io/npm/dt/@agile-ts/api.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 

docs/packages/core/Introduction.md

@@ -10,7 +10,7 @@ slug: /core
 <a href="https://npm.im/@agile-ts/core">
   <img src="https://img.shields.io/npm/v/@agile-ts/core.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
 <a href="https://npm.im/@agile-ts/core">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
+  <img src="https://img.shields.io/bundlephobia/minzip/@agile-ts/core.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
 <a href="https://npm.im/@agile-ts/core">
   <img src="https://img.shields.io/npm/dt/@agile-ts/core.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 

docs/packages/core/api/state/Methods.md

@@ -495,7 +495,7 @@ Returns the [State](./Introduction.md) it was called on.
 
 Preserves the State `value` in the appropriate local Storage for the current environment.
 ```ts
-MY_STATE.perist("myStorageKey");
+MY_STATE.perist({key: "myStorageKey"});
 ```
 
 ### 🤓 Learn more
@@ -507,7 +507,6 @@ checkout the [Persisting Data](../storage/PersistingData.md) Section.
 
 | Prop                 | Type                                                                       | Default    | Description                                                                           | Required |
 |----------------------|----------------------------------------------------------------------------|------------|---------------------------------------------------------------------------------------|----------|
-| `key`                | string \| number                                                           | undefined  | Key/Name of created Persistent (Note: Key is required if State has no set Key!)       | No       |
 | `config`             | [StatePersistentConfig](../../../../Interfaces.md#statepersistentconfig)   | {}         | Configuration                                                                         | No       |
 
 ### 📄 Return

docs/packages/core/api/storage/Introduction.md

@@ -202,10 +202,10 @@ The prefix will be added before each `Storage Key`
 and is intended to highlight the items stored by AgileTs.
 A `Storage Key` identifies the stored value in the corresponding Storage.
 ```ts
-MY_STATE.persist('myState');
+MY_STATE.persist({key: 'myState'});
 // Storage Key: '_prefix_myState'
 
-MY_COLLECTION.persist('myCollection');
+MY_COLLECTION.persist({key: 'myCollection'});
 // Storage Keys: 
 // Collection Indicator: '_prefix_myCollection'
 // Default Group: '_prefix__myCollection_group_default'

docs/packages/core/api/storage/PersistingData.md

@@ -8,20 +8,20 @@ slug: /core/persisting-data
 It's common for applications to store data on the client browser.
 AgileTs makes it pretty easy to achieve such goal.
 ```ts
-MY_STATE.persist('storage-key-here');
+MY_STATE.persist({key: 'storage-key-here'});
 ```
 Besides [States](../state/Introduction.md), we can persist nearly any [Agile Sub Instance](../../../../main/Introduction.md#agile-sub-instance).
 - [Collections](../collection/Introduction.md)
   ```ts
-  MY_COLLECTION.persist('storage-key-here');
+  MY_COLLECTION.persist({key: 'storage-key-here'});
   ```
 - [Selectors](../collection/selector/Introduction.md)
   ```ts
-  MY_SELECTOR.persist('storage-key-here');
+  MY_SELECTOR.persist({key: 'storage-key-here'});
   ```
 - [Groups](../collection/group/Introduction.md)
   ```ts
-  MY_GROUP.persist('storage-key-here');
+  MY_GROUP.persist({key: 'storage-key-here'});
   ```
 
 Since many [Agile Sub Instance](../../../../main/Introduction.md#agile-sub-instance) can be persisted, 
@@ -70,7 +70,7 @@ There are several ways to provide such required `storageKey` to the `persist()`
   ```
 - **2.** Pass the `storageKey` directly into the `persist()` method.
   ```ts {1}
-  MY_INSTANCE.persist("myCoolPassedKey"); // Success (storageKey = 'myCoolPassedKey')
+  MY_INSTANCE.persist({key: "myCoolPassedKey"}); // Success (storageKey = 'myCoolPassedKey')
   ```
 
 If AgileTs couldn't find any fitting `storageKey`,
@@ -103,3 +103,31 @@ By default, the AgilePersistInstance will be stored in the [default Storage](#-d
 ```ts
 storageManager.config.defaultStorageKey; // Returns key of current default Storage
 ```
+
+## 🌈 Migration
+
+In rare cases it is necessary to format the State value 
+before it is persisted in an external Storage and migrated back later. 
+When working with the `Date` class such formatting is required,
+since a javascript class can't be persisted.
+```ts
+const MY_STATE = createState(
+    {
+      // ..
+      birthday: new Date('08.10.202')
+    }
+    ).persist(
+        {
+          key: 'jeff', 
+          onSave: (value) => {
+              value.date = value.date.getTime()
+              return value;
+          },
+          onMigrate: (value) => {
+              value.date = new Date(value.date);
+              return value
+          }
+        }
+    );
+```
+

docs/packages/event/Introduction.md

@@ -10,7 +10,7 @@ slug: /event
 <a href="https://npm.im/@agile-ts/event">
   <img src="https://img.shields.io/npm/v/@agile-ts/event.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
 <a href="https://npm.im/@agile-ts/event">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/event.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
+  <img src="https://img.shields.io/bundlephobia/minzip/@agile-ts/event.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
 <a href="https://npm.im/@agile-ts/event">
   <img src="https://img.shields.io/npm/dt/@agile-ts/event.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>