useProxy Hook

examples/react/functional-component-ts/package.json

@@ -8,6 +8,7 @@
     "@agile-ts/multieditor": "file:.yalc/@agile-ts/multieditor",
     "@agile-ts/react": "file:.yalc/@agile-ts/react",
     "@agile-ts/event": "file:.yalc/@agile-ts/event",
+    "@agile-ts/proxytree": "file:.yalc/@agile-ts/proxytree",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",

examples/react/functional-component-ts/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import './App.css';
-import { useAgile, useWatcher } from '@agile-ts/react';
+import { useAgile, useWatcher, useProxy } from '@agile-ts/react';
 import { useEvent } from '@agile-ts/event';
 import {
   COUNTUP,
@@ -10,8 +10,9 @@ import {
   MY_STATE,
   MY_STATE_2,
   MY_STATE_3,
+  STATE_OBJECT,
 } from './core';
-import { globalBind } from '@agile-ts/core';
+import { generateId, globalBind } from '@agile-ts/core';
 
 let rerenderCount = 0;
 let rerenderCountInCountupView = 0;
@@ -33,14 +34,23 @@ const App = (props: any) => {
   ] = useAgile([
     MY_STATE,
     MY_STATE_2,
-    MY_COLLECTION.getItem('1'),
+    MY_COLLECTION.getItem('id1'),
     MY_COLLECTION.getSelector('mySelector'),
     MY_STATE_3,
     undefined,
     MY_COLLECTION,
   ]);
   const [myGroup] = useAgile([MY_COLLECTION.getGroupWithReference('myGroup')]);
 
+  const [stateObject, item2, collection2] = useProxy([
+    STATE_OBJECT,
+    MY_COLLECTION.getItem('id2'),
+    MY_COLLECTION,
+  ]);
+
+  console.log('Item1: ', item2?.name);
+  console.log('Collection: ', collection2.slice(0, 2));
+
   // const myCollection2 = useAgile(MY_COLLECTION);
 
   const mySelector = useAgile(MY_COLLECTION.getSelector('mySelector'));
@@ -93,6 +103,25 @@ const App = (props: any) => {
           <p>{myComputed}</p>
         </div>
 
+        <div className={'Container'}>
+          <h3 className={'Title'}>My State Object</h3>
+          <p>
+            Deep Name: {stateObject.friends.hans.name} {stateObject.location}
+          </p>
+          <button
+            onClick={() => {
+              STATE_OBJECT.patch({ friends: { hans: { name: generateId() } } });
+            }}>
+            Change deep name
+          </button>
+          <button
+            onClick={() => {
+              STATE_OBJECT.patch({ name: generateId() });
+            }}>
+            Change shallow name
+          </button>
+        </div>
+
         <div className={'Container'}>
           <h3 className={'Title'}>My Event</h3>
           <button onClick={() => MY_EVENT.trigger({ name: 'test' })}>

examples/react/functional-component-ts/src/core/index.ts

@@ -1,5 +1,4 @@
 import { Agile, clone, Logger } from '@agile-ts/core';
-import API from '@agile-ts/api';
 import Event from '@agile-ts/event';
 
 export const myStorage: any = {};
@@ -30,7 +29,20 @@ App.registerStorage(
   })
 );
 
-export const COUNTUP = App.createState(1).interval((value) => value + 1, 1000);
+export const STATE_OBJECT = App.createState(
+  {
+    name: 'frank',
+    age: 10,
+    location: 'de',
+    friends: {
+      hans: {
+        name: 'hans',
+      },
+    },
+  },
+  { key: 'state-object' }
+);
+export const COUNTUP = App.createState(1); // .interval((value) => value + 1, 1000);
 export const MY_STATE = App.createState<string>('MyState', { key: 'my-state' }); //.persist();
 export const MY_STATE_2 = App.createState<string>('MyState2', {
   key: 'my-state2',
@@ -95,53 +107,53 @@ MY_EVENT.on('Test', () => {
 
 // LOGGER tests
 
-const logger = new Logger((l) => ({
-  prefix: 'Tests',
-  allowedTags: ['coreWarning', 'randomDebug'],
-  level: Logger.level.DEBUG,
-  timestamp: true,
-}));
-logger.watch({
-  callback: (loggerCategory, data) => {
-    console.log('--- CALLED WATCHER ', loggerCategory, data);
-  },
-  level: Logger.level.WARN,
-});
-logger.createLoggerCategory({
-  key: 'coreLog',
-  level: 100,
-  customStyle: 'color: purple; font-weight: bold;',
-  prefix: 'Core Log',
-});
-logger.custom('coreLog', 'This is a cool Log', { object: 'yeet' });
-logger.log('This is a Log');
-logger.debug('This is a Debug');
-logger.info('This is an Info');
-logger.info('This is an Info with Object', { empty: 'object' });
-logger.error('This is an Error');
-logger.warn('This is a Warning');
-logger.trace('This is a Trace');
-logger.if.tag(['coreWarning']).warn('My core Warning');
-logger.if.tag(['randomDebug']).debug('My random Debug');
-logger.table('Test Table', { test: 'test', test1: 'test1' });
-
-const api = new API({
-  timeout: 10000,
-  options: {
-    credentials: undefined,
-  },
-});
-
-// testing some urls
-api
-  .with({
-    baseURL: `https://api.npmjs.org/downloads/point/2020-08-24:2020-09-24/@agile-ts/core`,
-  })
-  .get('');
-
-// testing some urls
-api
-  .with({
-    baseURL: `https://api`,
-  })
-  .get('');
+// const logger = new Logger((l) => ({
+//   prefix: 'Tests',
+//   allowedTags: ['coreWarning', 'randomDebug'],
+//   level: Logger.level.DEBUG,
+//   timestamp: true,
+// }));
+// logger.watch({
+//   callback: (loggerCategory, data) => {
+//     console.log('--- CALLED WATCHER ', loggerCategory, data);
+//   },
+//   level: Logger.level.WARN,
+// });
+// logger.createLoggerCategory({
+//   key: 'coreLog',
+//   level: 100,
+//   customStyle: 'color: purple; font-weight: bold;',
+//   prefix: 'Core Log',
+// });
+// logger.custom('coreLog', 'This is a cool Log', { object: 'yeet' });
+// logger.log('This is a Log');
+// logger.debug('This is a Debug');
+// logger.info('This is an Info');
+// logger.info('This is an Info with Object', { empty: 'object' });
+// logger.error('This is an Error');
+// logger.warn('This is a Warning');
+// logger.trace('This is a Trace');
+// logger.if.tag(['coreWarning']).warn('My core Warning');
+// logger.if.tag(['randomDebug']).debug('My random Debug');
+// logger.table('Test Table', { test: 'test', test1: 'test1' });
+//
+// const api = new API({
+//   timeout: 10000,
+//   options: {
+//     credentials: undefined,
+//   },
+// });
+//
+// // testing some urls
+// api
+//   .with({
+//     baseURL: `https://api.npmjs.org/downloads/point/2020-08-24:2020-09-24/@agile-ts/core`,
+//   })
+//   .get('');
+//
+// // testing some urls
+// api
+//   .with({
+//     baseURL: `https://api`,
+//   })
+//   .get('');

examples/react/functional-component-ts/yarn.lock

@@ -3,19 +3,22 @@
 
 
 "@agile-ts/api@file:.yalc/@agile-ts/api":
-  version "0.0.13"
+  version "0.0.15"
 
 "@agile-ts/core@file:.yalc/@agile-ts/core":
-  version "0.0.12"
+  version "0.0.14"
 
 "@agile-ts/event@file:.yalc/@agile-ts/event":
-  version "0.0.1"
+  version "0.0.4"
 
 "@agile-ts/multieditor@file:.yalc/@agile-ts/multieditor":
-  version "0.0.12"
+  version "0.0.14"
+
+"@agile-ts/proxytree@file:.yalc/@agile-ts/proxytree":
+  version "0.0.1"
 
 "@agile-ts/react@file:.yalc/@agile-ts/react":
-  version "0.0.12"
+  version "0.0.15"
 
 "@babel/code-frame@7.8.3":
   version "7.8.3"

packages/core/src/agile.ts

@@ -83,7 +83,7 @@ export class Agile {
     if (config.bindGlobal) {
       if (!globalBind(Agile.globalKey, this))
         Agile.logger.warn(
-          'Be careful with binding multiple Agile Instances global in one Application!'
+          'Be careful with binding multiple Agile Instances globally in one Application!'
         );
     }
   }
@@ -124,7 +124,7 @@ export class Agile {
    * Collection - Class that holds a List of Objects with key and causes rerender on subscribed Components
    * @param config - Config
    */
-  public createCollection<DataType = DefaultItem>(
+  public createCollection<DataType extends object = DefaultItem>(
     config?: CollectionConfig<DataType>
   ): Collection<DataType> {
     return new Collection<DataType>(this, config);

packages/core/src/collection/collection.persistent.ts

@@ -3,6 +3,7 @@ import {
   Collection,
   CollectionKey,
   CreatePersistentConfigInterface,
+  DefaultItem,
   defineConfig,
   Group,
   GroupKey,
@@ -12,7 +13,9 @@ import {
   StorageKey,
 } from '../internal';
 
-export class CollectionPersistent<DataType = any> extends Persistent {
+export class CollectionPersistent<
+  DataType extends object = DefaultItem
+> extends Persistent {
   public collection: () => Collection<DataType>;
 
   static defaultGroupSideEffectKey = 'rebuildGroupStorageValue';

packages/core/src/collection/group.ts

@@ -18,7 +18,9 @@ import {
   removeProperties,
 } from '../internal';
 
-export class Group<DataType = DefaultItem> extends State<Array<ItemKey>> {
+export class Group<DataType extends object = DefaultItem> extends State<
+  Array<ItemKey>
+> {
   static rebuildGroupSideEffectKey = 'rebuildGroup';
   collection: () => Collection<DataType>;
 

packages/core/src/collection/index.ts

@@ -19,7 +19,7 @@ import {
   SelectorConfigInterface,
 } from '../internal';
 
-export class Collection<DataType = DefaultItem> {
+export class Collection<DataType extends object = DefaultItem> {
   public agileInstance: () => Agile;
 
   public config: CollectionConfigInterface;
@@ -29,7 +29,7 @@ export class Collection<DataType = DefaultItem> {
   public data: { [key: string]: Item<DataType> } = {}; // Collection Data
   public _key?: CollectionKey;
   public isPersisted = false; // If Collection can be stored in Agile Storage (-> successfully integrated persistent)
-  public persistent: CollectionPersistent | undefined; // Manages storing Collection Value into Storage
+  public persistent: CollectionPersistent<DataType> | undefined; // Manages storing Collection Value into Storage
 
   public groups: { [key: string]: Group<DataType> } = {};
   public selectors: { [key: string]: Selector<DataType> } = {};
@@ -1300,7 +1300,7 @@ export interface SetDataConfigInterface {
   background?: boolean;
 }
 
-export type CollectionConfig<DataType = DefaultItem> =
+export type CollectionConfig<DataType extends object = DefaultItem> =
   | CreateCollectionConfigInterface<DataType>
   | ((
       collection: Collection<DataType>

packages/core/src/collection/item.ts

@@ -7,7 +7,9 @@ import {
   defineConfig,
 } from '../internal';
 
-export class Item<DataType = DefaultItem> extends State<DataType> {
+export class Item<DataType extends object = DefaultItem> extends State<
+  DataType
+> {
   static updateGroupSideEffectKey = 'rebuildGroup';
   public isSelected = false; // If Item is selected by a Selector
   public collection: () => Collection<DataType>;

packages/core/src/collection/selector.ts

@@ -9,7 +9,7 @@ import {
   StateRuntimeJobConfigInterface,
 } from '../internal';
 
-export class Selector<DataType = DefaultItem> extends State<
+export class Selector<DataType extends object = DefaultItem> extends State<
   DataType | undefined
 > {
   static dummyItemKey = 'unknown';