fixed typos

Author: bennobuilder

docs/Interfaces.md

@@ -1139,6 +1139,10 @@ interface AgileHookConfigInterface {
   key?: SubscriptionContainerKeyType;
   agileInstance?: Agile;
   proxyBased?: boolean;
+  selector?: SelectorMethodType;
+  componentId?: ComponentIdType;
+  observerType?: string;
+  deps?: any[];
 }
 ```
 
@@ -1177,38 +1181,17 @@ However, since each Observer has an instance to the Agile Instance, `useAgile()`
 
 #### `proxyBased`
 
-If the `useAgile()` hook should wrap a [Proxy()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) around its return value/s.
-Through this Proxy, AgileTs is able to track accessed properties of the returned object/s
-and can construct a path to these.
-The paths allow AgileTs to rerender the Component more efficiently
-by only causing a rerender when an actual accessed property value mutates.
-Normally, the Component is always rerendered on a State change,
-regardless of whether the changed property value is accessed in the Component.
-This is totally fine if the value is primitive or the whole object is displayed.
-However, as soon as we display only a tiny part of the bound State value object,
-the proxy feature can reduce the rerender count.
-```ts
-const MY_STATE = App.createState({name: 'frank', age: 10})
-
-// -- MyComponent.js ----------------------------------------
-
-// Bind State to 'MyComponent.js'
-const myState = useAgile(MY_STATE, {proxyBased: true});
-
-return <p>{myState.name}</p>
+:::warning
 
-// -- core.js  ----------------------------------------------
+Requires an additional package called `@agile-ts/proxytree`!
 
-// Causes rerender on 'MyComponent.js', 
-// since the '.name' property got accessed
-MY_STATE.patch({name: 'jeff'});
+:::
 
-// Doesn't cause rerender on 'MyComponent.js', 
-// since the '.age' property didn't got accessed
-MY_STATE.patch({age: 20});
-```
-To avoid having to set the `proxyBased` configuration to `true` every time we use the proxy functionality,
-we can use the [`useProxy()`](packages/react/api/Hooks.md#useproxy) hook which does that part for us.
+Whether to wrap a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+around the bound Agile Instance value object,
+to automatically constrain the way the selected Agile Instance
+is compared to determine whether the Component needs to be re-rendered
+based on the object's used properties.
 ```ts
 useProxy(MY_STATE);
 // equal to
@@ -1217,57 +1200,85 @@ useAgile(MY_STATE, {proxyBased: true});
 
 | Type                     | Default   | Required |
 |--------------------------|-----------|----------|
-| `string \| number`       | undefined | No       |
+| `boolean`                | false     | No       |
 
+<br/>
 
+#### `selector`
 
-<br/>
+:::warning
 
----
+Note that setting this property can destroy the useAgile type.
+-> should only be used internal!
 
-<br/>
+```ts
+useSelector(MY_STATE, (v.name) => v.name);
+// equal to
+useAgile(MY_STATE, {selector: (v.name) => v.name});
+```
 
+:::
 
+Equality comparison function
+that allows you to customize the way the selected Agile Instance
+is compared to determine whether the Component needs to be re-rendered.
 
-## `ProxyHookConfigInterface`
+| Type                     | Default   | Required |
+|--------------------------|-----------|----------|
+| `SelectorMethodType`     | undefined | No       |
 
-The `ProxyHookConfigInterface` is used as configuration object in functions like [`useProxy()`](packages/react/api/Hooks.md#useproxy).
-Here is a Typescript Interface for quick reference. However,
-each property is explained in more detail below.
+<br/>
+
+#### `componentId`
+
+Key/Name identifier of the UI-Component the Subscription Container is bound to.
 ```ts
-interface ProxyHookConfigInterface {
-    key?: SubscriptionContainerKeyType;
-    agileInstance?: Agile;
-}
+useAgile(MY_STATE, {componentId: 'User.tsx'});
 ```
+In future re-render events 
+with the same `componentId` are batched,
+in addition to batching re-render events based on the `SubscriptionContainer`.
+
+| Type                     | Default   | Required |
+|--------------------------|-----------|----------|
+| `string\|number`         | undefined | No       |
 
 <br/>
 
-#### `key`
+#### `observerType`
+
+:::warning
+
+Note that setting this property can destroy the useAgile type.
+-> should only be used internal!
 
-The `key/name` of the [SubscriptionContainer](packages/core/api/integration/Introduction.md#-subscriptions) that is created and added to the Observers.
-```ts
-useProxy(MY_STATE, {key: 'jeff'});
-```
-Such key can be very useful during debug sessions
-in order to analyse when which SubscriptionContainer triggered a rerender on a Component.
 ```ts
-// Agile Debug: Registered Callback/Component based Subscription 'jeff', SubscriptionContainer('jeff')
-// Agile Debug: Updated/Rerendered Subscriptions, [SubscriptionContainer('jeff'), ..]
-// Agile Debug: Unregistered Callback/Component based Subscription 'jeff', SubscriptionContainer('jeff')
+useOutput(MY_STATE);
+// equal to
+useAgile(MY_STATE, {observerType: 'output'});
+
+useValue(MY_STATE);
+// equal to
+useAgile(MY_STATE, {observerType: 'value'});
 ```
 
+:::
+
+What type of Observer to be bound to the UI-Component.
+
 | Type                     | Default   | Required |
 |--------------------------|-----------|----------|
-| `string \| number`       | undefined | No       |
+| `string`                 | false     | No       |
 
 <br/>
 
-#### `agileInstance`
+#### `deps`
 
-The [Agile Instance](packages/core/api/agile-instance/Introduction.md) to which the created [SubscriptionContainer](packages/core/api/integration/Introduction.md#-subscriptions) belongs to.
-However, since each Observer has an instance to the Agile Instance, `useProxy()` can automatically derive the Agile Instance from that.
+Dependencies that determine, in addition to unmounting and remounting the React-Component,
+when the specified Agile Sub Instances should be re-subscribed to the React-Component.
 
-| Type                                                                            | Default   | Required |
-|---------------------------------------------------------------------------------|-----------|----------|
-| [Agile Instance](packages/core/api/agile-instance/Introduction.md)       | undefined | No       |
+Related to [github issue](https://github.com/agile-ts/agile/issues/170).
+
+| Type                     | Default   | Required |
+|--------------------------|-----------|----------|
+| `any[]`                  | []        | No       |

docs/packages/react/Installation.md

@@ -9,7 +9,7 @@ The `react` package can be installed over [npm](https://www.npmjs.com/).
 
 :::warning
 
-Be aware that this is no standalone package!
+Note that the `react` package is no standalone package!
 
 :::
 
@@ -24,6 +24,6 @@ Therefore, we have created a table that shows which versions fit together withou
 
 | @agile-ts/react  | @agile-ts/core          | NPM Version              | Supported React versions | Supports hook based components    |
 | ---------------- | ----------------------- | ------------------------ | -------------------------|---------------------------------- |
-| v0.1.1+          | v0.1.1+                 | v6+                      | 16.8+                    | Yes                               |
+| v0.1.2+          | v0.1.2+                 | v6+                      | 16.8+                    | Yes                               |
 
 _Older Versions aren't supported anymore_

docs/packages/react/Introduction.md

@@ -5,7 +5,7 @@ sidebar_label: Introduction
 slug: /react
 ---
 
-> Integration for React or React-Native
+> Integration for React and React-Native
 
  <br />
 
@@ -20,47 +20,48 @@ slug: /react
 
 ## ❓ `react`
 
-The `react` package helps us to integrate AgileTs into a [React](https://reactjs.org/) environment
-and serves as an Interface to React.
-Its main task is to bind States to React Components.
-This binding ensures that AgileTs rerender the Component whenever a bound State mutates.
-It also offers some other valuable functionalities 
-that optimize the workflow using AgileTs in a React project.
+The `react` package is a set of utilities that simplifies the way AgileTs is integrated into a [React](https://reactjs.org/) environment.
+Think of it as an extension of AgileTs in the context of React
+that serves as an interface to React Components.
+The main task of the `react` integration is to bind AgileTs States to React Components.
+This ensures that AgileTs will re-render the Component when the bound State changes.
+It also provides some other valuable functionalities
+that optimize the workflow with AgileTs in a React project.
 
-A distinction is made between `Functional` and `Class` Components.
-As we prefer to use [`React Hooks`](https://reactjs.org/docs/hooks-intro.html) in Functional Components
-but Hooks aren't supported in Class Components.
-Therefore, we have created alternatives for Class Components 
-in order to offer the same functionalities there as well.
+A distinction is made between `Functional` and `Class` React Components.
+As we prefer to use [`React Hooks`](https://reactjs.org/docs/hooks-intro.html) in Functional Components,
+however, Hooks aren't supported in Class Components.
+Therefore, we have created alternatives for Class Components
+in order to offer the most essential functionalities there as well.
 
 ### 🐆 Functional Component
 
-In Functional Components we recommend using AgileTs Hooks like [`useAgile()`](api/Hooks.md#useagile).
-The `useAgile()` Hook binds [Agile Sub Instances](../../main/Introduction.md#agile-sub-instance) 
-(like States or Collections) to React Components.
+In `Functional Components` we recommend using AgileTs Hooks like [`useAgile()`](api/Hooks.md#useagile).
+The `useAgile()` Hook binds [Agile Sub Instances](../../main/Introduction.md#agile-sub-instance)
+(like States or Collections) to React Components for reactivity.
 ```ts
 // -- MyComponent.jsx ------------------------------------------
 
-// Binds MY_FIRST_STATE to 'MyComponent.jsx'
+// Binds MY_FIRST_STATE to 'MyComponent.jsx' for reactivity
 const myFirstState = useAgile(MY_FIRST_STATE);
 ```
 To find out more about `useAgile()`, and other Hooks provided by AgileTs,
 checkout the [AgileTs Hook documentation](api/Hooks.md).
 
 ### 🦖 Class Component
 
-For Class Components, we provide the `AgileHOC`.
+For `Class Components`, we provide the `AgileHOC`.
 The `AgileHOC` is a Higher Order Component that is wrapped around a React Component.
-It takes care of binding [Agile Sub Instances](../../main/Introduction.md#agile-sub-instance) 
-(like States or Collections) to wrapped React Components.
+It takes care of binding [Agile Sub Instances](../../main/Introduction.md#agile-sub-instance)
+(like States or Collections) to the wrapped React Components for reactivity.
 ```ts
 // -- MyComponent.jsx ------------------------------------------
 
-// Binds MY_FIRST_STATE to 'MyComponent.jsx'
+// Binds MY_FIRST_STATE to 'MyComponent.jsx' for reactivyty
 export default AgileHOC(myComponent, [MY_FIRST_STATE]);
 ```
-To find out more about the `AgileHOC` and AgileTs in Class Components,
-checkout the [AgileHOC documentation](api/AgileHoc.md).
+To find out more about the `AgileHOC` and how to correctly use AgileTs in Class Components,
+take a look at the [AgileHOC documentation](api/AgileHoc.md).
 
 ## 🚀 Quick Links
 - [Installation](./Installation.md)