deprecated useOutput

Author: bennobuilder

packages/react/README.md

@@ -1,6 +1,6 @@
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/packages/react/static/header_background.png" alt="React Integration">
 
-> Integrate AgileTs into React or React-Native
+> Integration for React and React-Native
 
  <br />
 
@@ -20,43 +20,46 @@
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/packages/react/static/what_does_this_integration_header.png" alt="What does this Integration?"/>
 
-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()`](https://agile-ts.org/docs/react/hooks/#useagile).
+In `Functional Components` we recommend using AgileTs Hooks like [`useAgile()`](https://agile-ts.org/docs/react/hooks/#useagile).
 The `useAgile()` Hook binds [Agile Sub Instances](https://agile-ts.org/docs/introduction#agile-sub-instance) 
-(like States or Collections) to React Components.
+(like States or Collections) to React Components for reactivity.
 ```ts
-// -- myComponent.jsx ------------------------------------------
+// -- MyComponent.jsx ------------------------------------------
 
-// Binds MY_FIRST_STATE to myComponent
+// 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](https://agile-ts.org/docs/react/hooks).
 
 ### 🦖 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](https://agile-ts.org/docs/introduction#agile-sub-instance) 
-(like States or Collections) to the wrapped React Component.
+It takes care of binding [Agile Sub Instances](https://agile-ts.org/docs/introduction#agile-sub-instance)
+(like States or Collections) to the wrapped React Components for reactivity.
 ```ts
-// -- myComponent.jsx ------------------------------------------
+// -- MyComponent.jsx ------------------------------------------
 
-// Binds MY_FIRST_STATE to myComponent
+// 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](https://agile-ts.org/docs/react/AgileHOC).
+To find out more about the `AgileHOC` and how to correctly use AgileTs in Class Components,
+take a look at the [AgileHOC documentation](https://agile-ts.org/docs/react/AgileHOC).
 
 
 <br />
@@ -75,7 +78,7 @@ 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_
 

packages/react/src/hooks/useAgile.ts

@@ -16,9 +16,9 @@ import {
   LogCodeManager,
   normalizeArray,
   defineConfig,
+  Group,
 } from '@agile-ts/core';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-import { AgileOutputHookArrayType, AgileOutputHookType } from './useOutput';
 
 // TODO https://stackoverflow.com/questions/68148235/require-module-inside-a-function-doesnt-work
 let proxyPackage: any = null;
@@ -241,15 +241,15 @@ export interface AgileHookConfigInterface {
    * 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.
+   *
+   *  * Note that setting this property can destroy the useAgile type.
+   * -> should only be used internal!
+   *
    * @default undefined
    */
   selector?: SelectorMethodType;
   /**
    * Key/Name identifier of the UI-Component the Subscription Container is bound to.
-   *
-   * Note that setting this property can destroy the useAgile type.
-   * -> should only be used internal!
-   *
    * @default undefined
    */
   componentId?: ComponentIdType;
@@ -272,3 +272,34 @@ export interface AgileHookConfigInterface {
    */
   deps?: any[];
 }
+
+// Array Type
+// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html
+export type AgileOutputHookArrayType<T> = {
+  [K in keyof T]: T[K] extends Collection<infer U> | Group<infer U>
+    ? U[]
+    : T[K] extends State<infer U> | Observer<infer U>
+    ? U
+    : T[K] extends undefined
+    ? undefined
+    : T[K] extends Collection<infer U> | Group<infer U> | undefined
+    ? U[] | undefined
+    : T[K] extends State<infer U> | Observer<infer U> | undefined
+    ? U | undefined
+    : never;
+};
+
+// No Array Type
+export type AgileOutputHookType<T> = T extends
+  | Collection<infer U>
+  | Group<infer U>
+  ? U[]
+  : T extends State<infer U> | Observer<infer U>
+  ? U
+  : T extends undefined
+  ? undefined
+  : T extends Collection<infer U> | Group<infer U> | undefined
+  ? U[] | undefined
+  : T extends State<infer U> | Observer<infer U> | undefined
+  ? U | undefined
+  : never;

packages/react/src/hooks/useOutput.ts

@@ -2,8 +2,9 @@ import {
   AgileHookConfigInterface,
   SubscribableAgileInstancesType,
   useAgile,
+  AgileOutputHookArrayType,
+  AgileOutputHookType,
 } from './useAgile';
-import { AgileOutputHookArrayType, AgileOutputHookType } from './useOutput';
 import { defineConfig } from '@agile-ts/core';
 
 export function useProxy<X extends Array<SubscribableAgileInstancesType>>(

packages/react/src/hooks/useProxy.ts

@@ -11,13 +11,13 @@ export function useSelector<
   X extends SubscribableAgileInstancesType,
   ValueType extends AgileValueHookType<X>
 >(
-  deps: X,
+  dep: X,
   selector: SelectorMethodType<ValueType>,
   config?: AgileHookConfigInterface
 ): ReturnType;
 
 export function useSelector<ValueType = any, ReturnType = any>(
-  deps: SubscribableAgileInstancesType,
+  dep: SubscribableAgileInstancesType,
   selector: SelectorMethodType<ValueType>,
   config?: AgileHookConfigInterface
 ): ReturnType;
@@ -27,12 +27,12 @@ export function useSelector<
   ValueType extends AgileValueHookType<X>,
   ReturnType = any
 >(
-  deps: X,
+  dep: X,
   selector: SelectorMethodType<ValueType>,
   config: AgileHookConfigInterface = {}
 ): ReturnType {
   return useAgile(
-    deps as any,
+    dep as any,
     defineConfig(config, {
       selector: selector,
     })

packages/react/src/hooks/useSelector.ts

@@ -4,7 +4,6 @@ export { useAgile } from './hooks/useAgile';
 export { AgileHOC } from './hocs/AgileHOC';
 export { useWatcher } from './hooks/useWatcher';
 export { useProxy } from './hooks/useProxy';
-export { useOutput } from './hooks/useOutput';
 export { useValue } from './hooks/useValue';
 export { useSelector } from './hooks/useSelector';
 

packages/react/src/index.ts

@@ -48,6 +48,5 @@ const myCollection11 = useAgile(
 );
 
 const myGroupValue = useValue(MY_COLLECTION.getGroup('test'));
-const myGroupOutput = useOutput(MY_COLLECTION.getGroup('test'));
 const myGroupAgile = useAgile(MY_COLLECTION.getGroup('test'));
  */