Add deps array to useAgile() hook

benchmark/benchmarks/react/computed/bench/agilets/autoTracking.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { createComputed, createState } from '@agile-ts/core';
+import { createComputed, createState, LogCodeManager } from '@agile-ts/core';
 import { useAgile } from '@agile-ts/react';
 
+LogCodeManager.getLogger().isActive = false;
 const COUNT = createState(0);
 const COMPUTED_COUNT = createComputed(() => {
   return COUNT.value * 5;

benchmark/benchmarks/react/computed/bench/agilets/hardCoded.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { createComputed, createState } from '@agile-ts/core';
+import { createComputed, createState, LogCodeManager } from '@agile-ts/core';
 import { useAgile } from '@agile-ts/react';
 
+LogCodeManager.getLogger().isActive = false;
 const COUNT = createState(0);
 const COMPUTED_COUNT = createComputed(
   () => {

examples/react/release/boxes/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@agile-ts/core": "file:.yalc/@agile-ts/core",
+    "@agile-ts/logger": "file:.yalc/@agile-ts/logger",
     "@agile-ts/proxytree": "file:.yalc/@agile-ts/proxytree",
     "@agile-ts/react": "file:.yalc/@agile-ts/react",
     "@chakra-ui/react": "^1.6.3",
@@ -32,8 +33,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "install:dev:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/proxytree & yarn install",
-    "install:prod:agile": "yarn add @agile-ts/core @agile-ts/react @agile-ts/proxytree"
+    "install:dev:agile": "yalc add @agile-ts/core @agile-ts/react @agile-ts/proxytree @agile-ts/logger & yarn install",
+    "install:prod:agile": "yarn add @agile-ts/core @agile-ts/react @agile-ts/proxytree @agile-ts/logger & yarn install"
   },
   "eslintConfig": {
     "extends": [

examples/react/release/boxes/src/components/EditProperties/index.tsx

@@ -136,8 +136,8 @@ const Property = ({
   id: number | string;
 }) => {
   const ELEMENT = core.ui.ELEMENTS.getItem(id);
-  const element = useProxy(ELEMENT, { componentId: 'Property' });
-  console.log('Element', ELEMENT);
+  const element = useProxy(ELEMENT, { componentId: 'Property', deps: [id] });
+
   return (
     <PropertyInput
       label={label}

examples/react/release/boxes/src/core/app.ts

@@ -1,6 +1,6 @@
-import { Agile, Logger } from '@agile-ts/core';
-import reactIntegration from '@agile-ts/react';
+import { Agile, assignSharedAgileInstance } from '@agile-ts/core';
+import { assignSharedAgileLoggerConfig, Logger } from '@agile-ts/logger';
 
-export const App = new Agile({
-  logConfig: { level: Logger.level.WARN },
-}).integrate(reactIntegration);
+export const App = new Agile();
+assignSharedAgileInstance(App);
+assignSharedAgileLoggerConfig({ level: Logger.level.WARN });

examples/react/release/boxes/yarn.lock

@@ -3,28 +3,25 @@
 
 
 "@agile-ts/core@file:.yalc/@agile-ts/core":
-  version "0.0.17"
+  version "0.1.0"
   dependencies:
-    "@agile-ts/logger" "^0.0.4"
-    "@agile-ts/utils" "^0.0.4"
+    "@agile-ts/utils" "^0.0.5"
 
-"@agile-ts/logger@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@agile-ts/logger/-/logger-0.0.4.tgz#7f4d82ef8f03b13089af0878c360575c43f0962d"
-  integrity sha512-qm0obAKqJMaPKM+c76gktRXyw3OL1v39AnhMZ0FBGwJqHWU+fLRkCzlQwjaROCr3F1XP01Lc/Ls3efF0WzyEPw==
+"@agile-ts/logger@file:.yalc/@agile-ts/logger":
+  version "0.0.5"
   dependencies:
-    "@agile-ts/utils" "^0.0.4"
+    "@agile-ts/utils" "^0.0.5"
 
 "@agile-ts/proxytree@file:.yalc/@agile-ts/proxytree":
-  version "0.0.3"
+  version "0.0.4"
 
 "@agile-ts/react@file:.yalc/@agile-ts/react":
-  version "0.0.18"
+  version "0.1.0"
 
-"@agile-ts/utils@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@agile-ts/utils/-/utils-0.0.4.tgz#66e9536e561796489a37155da6b74ce2dc482697"
-  integrity sha512-GiZyTYmCm4j2N57oDjeMuPpfQdgn9clb0Cxpfuwi2Bq5T/KPXlaROLsVGwHLjwwT+NX7xxr5qNJH8pZTnHnYRQ==
+"@agile-ts/utils@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@agile-ts/utils/-/utils-0.0.5.tgz#23cc83e60eb6b15734247fac1d77f1fd629ffdb6"
+  integrity sha512-R86X9MjMty14eoQ4djulZSdHf9mIF9dPcj4g+SABqdA6AqbewS0/BQGNGR5p6gXhqc4+mT8rzkutywdPnMUNfA==
 
 "@babel/code-frame@7.10.4":
   version "7.10.4"

packages/react/src/hooks/useAgile.ts

@@ -73,6 +73,7 @@ export function useAgile<
     agileInstance: null,
     componentId: undefined,
     observerType: undefined,
+    deps: [],
   });
   const depsArray = extractRelevantObservers(
     normalizeArray(deps),
@@ -202,7 +203,7 @@ export function useAgile<
     return () => {
       agileInstance?.subController.unsubscribe(subscriptionContainer);
     };
-  }, []);
+  }, config.deps);
 
   return getReturnValue(depsArray);
 }
@@ -261,4 +262,13 @@ export interface AgileHookConfigInterface {
    * @default undefined
    */
   observerType?: string;
+  /**
+   * 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.
+   *
+   * [Github issue](https://github.com/agile-ts/agile/issues/170)
+   *
+   * @default []
+   */
+  deps?: any[];
 }