fixed typos

Author: bennobuilder

packages/event/tests/unit/event.observer.test.ts

@@ -9,7 +9,7 @@ describe('EventObserver Tests', () => {
   beforeEach(() => {
     LogMock.mockLogs();
 
-    dummyAgile = new Agile({ localStorage: false });
+    dummyAgile = new Agile();
     dummyEvent = new Event(dummyAgile);
 
     jest.clearAllMocks();

packages/event/tests/unit/event.test.ts

@@ -9,7 +9,7 @@ describe('Event Tests', () => {
   beforeEach(() => {
     LogMock.mockLogs();
 
-    dummyAgile = new Agile({ localStorage: false });
+    dummyAgile = new Agile();
 
     jest.clearAllMocks();
   });

packages/react/src/hooks/useAgile.ts

@@ -59,15 +59,16 @@ export function useAgile<
     componentId: undefined,
     observerType: undefined,
     deps: [],
-    handleReturn: (dep: Observer | undefined) => {
-      return dep != null ? dep.value : undefined;
-    },
   });
   const depsArray = extractRelevantObservers(
     normalizeArray(deps),
     config.observerType
   );
 
+  const handleReturn = (dep: Observer | undefined) => {
+    return dep != null ? dep.value : undefined;
+  };
+
   useBaseAgile(
     depsArray,
     () => ({
@@ -79,38 +80,10 @@ export function useAgile<
     config.agileInstance
   );
 
-  return getReturnValue(
-    depsArray,
-    config.handleReturn as any,
-    Array.isArray(deps)
-  );
+  return getReturnValue(depsArray, handleReturn, Array.isArray(deps));
 }
 
 export interface AgileHookConfigInterface extends BaseAgileHookConfigInterface {
-  /**
-   * 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.
-   *
-   * Requires an additional package called `@agile-ts/proxytree`!
-   *
-   * @default false
-   */
-  // proxyBased?: boolean;
-  /**
-   * 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;
-
   /**
    * What type of Observer to be bound to the UI-Component.
    *
@@ -120,10 +93,6 @@ export interface AgileHookConfigInterface extends BaseAgileHookConfigInterface {
    * @default undefined
    */
   observerType?: string;
-  /**
-   * TODO
-   */
-  handleReturn?: (dep: Observer | undefined) => any;
 }
 
 // Array Type

packages/react/src/hooks/useBaseAgile.ts

@@ -11,6 +11,19 @@ import Agile, {
 } from '@agile-ts/core';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
+/**
+ * An internal used React Hook
+ * to create a Callback based Subscription Container
+ * based on the specified depsArray
+ * and thus bind these dependencies to a Functional React Component.
+ *
+ * @internal
+ * @param depsArray - Observers to be bound to the Functional Component.
+ * @param getSubContainerConfig - Method to get the Subscription Container configuration object.
+ * @param deps - 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.
+ * @param agileInstance - Agile Instance the to create Subscription Container belongs to.
+ */
 export const useBaseAgile = (
   depsArray: (Observer | undefined)[],
   getSubContainerConfig: (
@@ -30,11 +43,18 @@ export const useBaseAgile = (
 
     const subContainerConfig = getSubContainerConfig(observers);
 
-    const _agileInstance = extractAgileInstance(observers, agileInstance);
-    if (_agileInstance == null) return;
+    // Try to extract Agile Instance from the specified Instance/s
+    if (agileInstance == null) agileInstance = getAgileInstance(observers[0]);
+    if (agileInstance == null || agileInstance.subController == null) {
+      LogCodeManager.getLogger()?.error(
+        'Failed to subscribe Component with deps because of missing valid Agile Instance.',
+        deps
+      );
+      return;
+    }
 
     // Create Callback based Subscription
-    const subscriptionContainer = _agileInstance.subController.subscribe(
+    const subscriptionContainer = agileInstance.subController.subscribe(
       () => {
         forceRender();
       },
@@ -44,31 +64,20 @@ export const useBaseAgile = (
 
     // Unsubscribe Callback based Subscription on unmount
     return () => {
-      _agileInstance.subController.unsubscribe(subscriptionContainer);
+      agileInstance?.subController.unsubscribe(subscriptionContainer);
     };
   }, deps);
 };
 
-export const extractAgileInstance = (
-  observers: Observer[],
-  agileInstance?: Agile
-): Agile | undefined => {
-  if (agileInstance != null) return agileInstance;
-
-  // Try to extract Agile Instance from the specified Observers
-  agileInstance = getAgileInstance(observers[0]);
-  if (!agileInstance || !agileInstance.subController) {
-    LogCodeManager.getLogger()?.error(
-      'Failed to subscribe to React Component because of missing valid Agile Instance.',
-      observers
-    );
-    return undefined;
-  }
-  return agileInstance;
-};
-
-// Builds return value,
-// depending on whether the deps were provided in array shape or not
+/**
+ * Builds return value for Agile Instance 'binding' Hooks,
+ * depending on whether the dependencies were provided in array shape or not.
+ *
+ * @internal
+ * @param depsArray - Dependencies to extract the return value from.
+ * @param handleReturn - Method to handle the return value.
+ * @param wasProvidedAsArray - Whether the specified depsArray was provided as array in the Hook.
+ */
 export const getReturnValue = (
   depsArray: (Observer | undefined)[],
   handleReturn: (dep: Observer | undefined) => any,

packages/react/src/hooks/useProxy.ts

@@ -24,11 +24,48 @@ try {
   // empty catch block
 }
 
+/**
+ * A React Hook for binding the most relevant value of multiple Agile Instances
+ * (like the Collection's output or the State's value)
+ * to a React Functional Component.
+ *
+ * This binding ensures that the Component re-renders
+ * whenever the most relevant Observer of an Agile Instance mutates.
+ *
+ * In addition the the default 'useAgile' Hook,
+ * the useProxy Hooks wraps a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+ * around the to bind Agile Instance value objects,
+ * to automatically constraint the way the selected Agile Instances
+ * are compared to determine whether the React Component needs to be re-rendered
+ * based on the object's used properties.
+ *
+ * @public
+ * @param deps - Agile Sub Instances to be bound to the Functional Component.
+ * @param config - Configuration object
+ */
 export function useProxy<X extends Array<SubscribableAgileInstancesType>>(
   deps: X | [],
   config?: AgileHookConfigInterface
 ): AgileOutputHookArrayType<X>;
-
+/**
+ * A React Hook for binding the most relevant Agile Instance value
+ * (like the Collection's output or the State's value)
+ * to a React Functional Component.
+ *
+ * This binding ensures that the Component re-renders
+ * whenever the most relevant Observer of the Agile Instance mutates.
+ *
+ * In addition the the default 'useAgile' Hook,
+ * the useProxy Hooks wraps a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+ * around the to bind Agile Instance value objects,
+ * to automatically constraint the way the selected Agile Instances
+ * are compared to determine whether the React Component needs to be re-rendered
+ * based on the object's used properties.
+ *
+ * @public
+ * @param dep - Agile Sub Instance to be bound to the Functional Component.
+ * @param config - Configuration object
+ */
 export function useProxy<X extends SubscribableAgileInstancesType>(
   dep: X,
   config?: AgileHookConfigInterface
@@ -63,6 +100,7 @@ export function useProxy<
         proxyTreeWeakMap.set(dep, proxyTree);
         return proxyTree.proxy;
       } else {
+        // TODO add LogCode Manager logcode
         console.error(
           'In order to use the Agile proxy functionality, ' +
             `the installation of an additional package called '@agile-ts/proxytree' is required!`

packages/react/src/hooks/useSelector.ts

@@ -24,6 +24,21 @@ export function useSelector<
   config?: BaseAgileHookConfigInterface
 ): ReturnType;
 
+/**
+ * A React Hook for binding a selected value of an Agile Instance
+ * (like the Collection's output or the State's value)
+ * to a React Functional Component.
+ *
+ * This binding ensures that the Component re-renders
+ * whenever the selected value of an Agile Instance mutates.
+ *
+ * @public
+ * @param dep - Agile Sub Instance to be bound to the Functional Component.
+ * @param selector - 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.
+ * @param config - Configuration object
+ */
 export function useSelector<ValueType = any, ReturnType = any>(
   dep: SubscribableAgileInstancesType,
   selector: SelectorMethodType<ValueType>,