diff --git a/examples/react/functional-component-ts/package.json b/examples/react/functional-component-ts/package.json index c9627edb..be742bb8 100644 --- a/examples/react/functional-component-ts/package.json +++ b/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", diff --git a/examples/react/functional-component-ts/src/App.tsx b/examples/react/functional-component-ts/src/App.tsx index c69e67cc..66e894a6 100644 --- a/examples/react/functional-component-ts/src/App.tsx +++ b/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,7 +34,7 @@ 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, @@ -41,6 +42,15 @@ const App = (props: any) => { ]); 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) => {

{myComputed}

+
+

My State Object

+

+ Deep Name: {stateObject.friends.hans.name} {stateObject.location} +

+ + +
+

My Event