agile-ts · bennobuilder · Jan 13, 2022 · Oct 18, 2021 · Nov 25, 2021 · Jan 13, 2022
diff --git a/docs/Interfaces.md b/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.

diff --git a/docs/main/Contributing.md b/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

diff --git a/docs/main/Introduction.md b/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}

diff --git a/docs/main/StyleGuides.md b/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 

diff --git a/docs/packages/api/Introduction.md b/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>
 

diff --git a/docs/packages/core/Introduction.md b/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>
 

diff --git a/docs/packages/core/api/state/Methods.md b/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

diff --git a/docs/packages/core/api/storage/Introduction.md b/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'

diff --git a/docs/packages/core/api/storage/PersistingData.md b/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
+          }
+        }
+    );
+```
+
diff --git a/docs/packages/event/Introduction.md b/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>
 

diff --git a/docs/packages/logger/Introduction.md b/docs/packages/logger/Introduction.md
@@ -10,7 +10,7 @@ slug: /logger
 <a href="https://npm.im/@agile-ts/logger">
   <img src="https://img.shields.io/npm/v/@agile-ts/logger.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
 <a href="https://npm.im/@agile-ts/logger">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/logger.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/logger.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
 <a href="https://npm.im/@agile-ts/logger">
   <img src="https://img.shields.io/npm/dt/@agile-ts/logger.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 

diff --git a/docs/packages/multieditor/Introduction.md b/docs/packages/multieditor/Introduction.md
@@ -10,7 +10,7 @@ slug: /multieditor
 <a href="https://npm.im/@agile-ts/multieditor">
   <img src="https://img.shields.io/npm/v/@agile-ts/multieditor.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
 <a href="https://npm.im/@agile-ts/multieditor">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/multieditor.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/multieditor.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
 <a href="https://npm.im/@agile-ts/multieditor">
   <img src="https://img.shields.io/npm/dt/@agile-ts/multieditor.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 

diff --git a/docs/packages/react/Introduction.md b/docs/packages/react/Introduction.md
@@ -10,7 +10,7 @@ slug: /react
 <a href="https://npm.im/@agile-ts/react">
   <img src="https://img.shields.io/npm/v/@agile-ts/react.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
 <a href="https://npm.im/@agile-ts/react">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/react.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/react.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
 <a href="https://npm.im/@agile-ts/react">
   <img src="https://img.shields.io/npm/dt/@agile-ts/react.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 

diff --git a/docs/packages/vue/Introduction.md b/docs/packages/vue/Introduction.md
@@ -10,7 +10,7 @@ slug: /vue
 <a href="https://npm.im/@agile-ts/vue">
   <img src="https://img.shields.io/npm/v/@agile-ts/vue.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
 <a href="https://npm.im/@agile-ts/vue">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/vue.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/vue.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
 <a href="https://npm.im/@agile-ts/vue">
   <img src="https://img.shields.io/npm/dt/@agile-ts/vue.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -21,12 +21,12 @@ const domain = 'https://agile-ts.org';
 const npmOrgUrl = 'https://www.npmjs.com/package/@agile-ts';
 
 const customFields = {
-  copyright: `Made with  💜  in Germany     |    Copyright © 2020-${new Date().getFullYear()} <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/DevBenno">BennoDev</a>`,
+  copyright: `Made with  💜 by <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/DevBenno">BennoDev</a> and <a target="_blank" rel="noopener noreferrer" href="https://github.com/agile-ts/agile/graphs/contributors">these awesome people</a>`,
   meta: {
     title: 'An atom based state manager for JavaScript apps.',
     image: '/img/meta.png',
     description:
-      'A global State and Logic Library implemented in Typescript, ' +
+      'An atom based global State and Logic Library implemented in Typescript, ' +
       'offering a reimagined API that focuses on developer experience. ' +
       'AgileTs is a more straightforward alternative to Redux ' +
       'and allows you to easily manage your application States in React, Vue and plain Javascript.',
@@ -109,8 +109,10 @@ const config = {
   customFields: { ...customFields },
   themeConfig: {
     hideableSidebar: false,
+    // https://docusaurus.io/docs/search#using-algolia-docsearch
     algolia: {
-      apiKey: '6b7b98565bb82e16996fd185f378d618',
+      appId: '64P3EOD5L9',
+      apiKey: '461e97fe74b935316bf63af4a6a93345',
       indexName: 'agile-ts',
     },
     colorMode: {
@@ -183,7 +185,7 @@ const config = {
         {
           label: 'Documentation',
           position: 'left',
-          to: 'docs/introduction/',
+          to: 'docs/introduction',
         },
       ],
     },

diff --git a/package.json b/package.json
@@ -19,18 +19,18 @@
     "install:prod:agile": "yarn add @agile-ts/core @agile-ts/react @agile-ts/api @agile-ts/event @agile-ts/proxytree @agile-ts/logger @agile-ts/utils  & yarn install"
   },
   "dependencies": {
-    "@agile-ts/api": "^0.0.24",
-    "@agile-ts/core": "^0.2.6",
-    "@agile-ts/event": "^0.0.13",
-    "@agile-ts/logger": "^0.0.10",
-    "@agile-ts/proxytree": "^0.0.8",
-    "@agile-ts/react": "^0.2.2",
-    "@agile-ts/utils": "^0.0.10",
-    "@docusaurus/core": "2.0.0-beta.6",
-    "@docusaurus/module-type-aliases": "2.0.0-beta.6",
-    "@docusaurus/preset-classic": "2.0.0-beta.6",
-    "@docusaurus/remark-plugin-npm2yarn": "2.0.0-beta.6",
-    "@docusaurus/theme-live-codeblock": "2.0.0-beta.6",
+    "@agile-ts/api": "^0.0.25",
+    "@agile-ts/core": "^0.2.7",
+    "@agile-ts/event": "^0.0.14",
+    "@agile-ts/logger": "^0.0.11",
+    "@agile-ts/proxytree": "^0.0.9",
+    "@agile-ts/react": "^0.2.3",
+    "@agile-ts/utils": "^0.0.11",
+    "@docusaurus/core": "^2.0.0-beta.14",
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.14",
+    "@docusaurus/preset-classic": "^2.0.0-beta.14",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.14",
+    "@docusaurus/theme-live-codeblock": "^2.0.0-beta.14",
     "@mdx-js/react": "^1.6.22",
     "@tsconfig/docusaurus": "^1.0.4",
     "clsx": "^1.1.1",
@@ -39,10 +39,10 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-live": "^2.3.0",
-    "react-spring": "^8.0.27",
+    "react-spring": "^9.3.2",
     "react-swipeable": "^6.2.0",
-    "react-toastify": "^6.2.0",
-    "sass": "^1.39.2",
+    "react-toastify": "^8.1.0",
+    "sass": "^1.43.5",
     "webpack-bundle-analyzer": "^4.4.2"
   },
   "devDependencies": {

diff --git a/src/_pages/LandingPage/components/HeaderView/components/Astronaut/index.tsx b/src/_pages/LandingPage/components/HeaderView/components/Astronaut/index.tsx
@@ -15,6 +15,8 @@ const Astronaut: React.FC<Props> = (props) => {
   const [inAnimation, setInAnimation] = useState(false);
   const [triggeredAnimationColor, setTriggeredAnimationColor] = useState(false);
   const dark = useAgile(core.ui.ASTRONAUT_DARK);
+
+  // Animation
   const animatedAstronautProps = useSpring({
     to: { x: isRaised ? 0 : 1 },
     config: {
@@ -29,8 +31,8 @@ const Astronaut: React.FC<Props> = (props) => {
         setTriggeredAnimationColor(false);
       }
     },
-    onFrame: (frame) => {
-      if (frame.x >= 0.45 && frame.x <= 0.5 && !triggeredAnimationColor) {
+    onChange: ({ value }) => {
+      if (value.x >= 0.45 && value.x <= 0.5 && !triggeredAnimationColor) {
         core.ui.toggleAstronautColor(!dark);
         setTriggeredAnimationColor(true);
       }
@@ -48,7 +50,7 @@ const Astronaut: React.FC<Props> = (props) => {
     <div className={clsx(styles.Container, className)}>
       <animated.div
         style={{
-          transform: (animatedAstronautProps as any).x.interpolate({
+          transform: (animatedAstronautProps as any).x.to({
             range: [0, 0.5, 1],
             output: [
               `translateY(${0}px)`,

diff --git a/...nents/StraightforwardView/components/SectionScroller/components/SectionLeftItem/index.tsx b/...nents/StraightforwardView/components/SectionScroller/components/SectionLeftItem/index.tsx
@@ -20,7 +20,7 @@ const SectionLeftItem: React.FC<Props> = (props) => {
       className={clsx(styles.Container, {
         [styles.Container_Active]: active,
       })}>
-      <CodeBlock className={'javascript'}>{code}</CodeBlock>
+      <CodeBlock className="jsx">{code}</CodeBlock>
     </div>
   );
 };

diff --git a/src/core/app.ts b/src/core/app.ts
diff --git a/src/core/entities/stats/stats.controller.ts b/src/core/entities/stats/stats.controller.ts
@@ -1,5 +1,5 @@
 import { createState } from '@agile-ts/core';
 
-export const NPM_DOWNLOADS = createState(0).persist('npm-downloads');
-export const GITHUB_STARS = createState(0).persist('github-stars');
-export const GITHUB_FORKS = createState(0).persist('github-forks');
+export const NPM_DOWNLOADS = createState(0).persist({ key: 'npm-downloads' });
+export const GITHUB_STARS = createState(0).persist({ key: 'github-stars' });
+export const GITHUB_FORKS = createState(0).persist({ key: 'github-forks' });
diff --git a/src/core/entities/ui/ui.controller.ts b/src/core/entities/ui/ui.controller.ts
@@ -1,3 +1,3 @@
 import { createState } from '@agile-ts/core';
 
-export const ASTRONAUT_DARK = createState<boolean>(false);
+export const ASTRONAUT_DARK = createState(false);