Outsourced utils and logger

.changeset/shy-jars-cry.md

@@ -0,0 +1,16 @@
+---
+'@agile-ts/api': patch
+'@agile-ts/core': patch
+'@agile-ts/event': patch
+'@agile-ts/logger': patch
+'@agile-ts/multieditor': patch
+'@agile-ts/proxytree': patch
+'@agile-ts/react': patch
+'@agile-ts/utils': patch
+'@agile-ts/vue': patch
+---
+
+- Outsourced Logger and Utils from the `core` package.
+- Created Proxy Tree
+- Added `useProxy` Hook to `react` package
+- Updated `core` to work with Proxy KeyMap

README.md

@@ -1,9 +1,9 @@
  <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/header_background.png" alt="AgileTs">
- 
- > Global, simple, spacy State and Logic Framework
- 
+
+> Global, simple, spacy State and Logic Framework
+
  <br />
-  
+
 <p align="left">
  <a href="https://github.com/agile-ts/agile">
    <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/>
@@ -76,8 +76,8 @@ More examples can be found in the [Example Section](https://agile-ts.org/docs/ex
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/why_should_i_use_agile.png" alt="Why should I use AgileTs?"/>
 
 AgileTs is a global, simple, well-tested State Management Framework implemented in Typescript.
-It offers a reimagined API that focus on **developer experience** and allows you to **quickly** and **easily** manage your States.
-Besides States, AgileTs offers some other powerful apis that make your life easier.
+It offers a reimagined API that focuses on **developer experience** and allows you to **quickly** and **easily** manage your States.
+Besides States, AgileTs offers some other powerful APIs that make your life easier.
 The philosophy behind AgileTs is simple:
 
 ### 🚅 Straightforward
@@ -116,8 +116,8 @@ Write minimalistic, boilerplate-free code that captures your intent.
 
 ### ⛳️ Centralize
 
-AgileTs is designed to take all business logic out of UI-Components and put them in a central place often called `core`.
-The benefit of keeping logic separate to UI-Components is to make your code more decoupled, portable and above all easily testable.
+AgileTs is designed to take all business logic out of UI-Components and put them in a central place, often called `core`.
+The benefit of keeping logic separate to UI-Components is to make your code more decoupled, portable, and above all, easily testable.
 
 ### 🎯 Easy to Use
 
@@ -132,19 +132,19 @@ you can jump straight into our [Example](https://agile-ts.org/docs/examples/Intr
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/installation_header.png" alt="Installation"/>
 
-To properly use AgileTs, in a UI-Framework we need to install **two** packages.
+To properly use AgileTs, in a UI-Framework, we need to install **two** packages.
 
 - The _Core Package_, which acts as the brain of AgileTs and manages all your States
   ```
   npm install @agile-ts/core
   ```
 
-- and a _fitting Integration_ for your preferd UI-Framework. In my case the [React Integration](https://www.npmjs.com/package/@agile-ts/react).
+- and a _fitting Integration_ for your preferred UI-Framework. In my case, the [React Integration](https://www.npmjs.com/package/@agile-ts/react).
   Check [here](https://agile-ts.org/docs/frameworks) if your desired Framework is supported, too.
   ```
   npm install @agile-ts/react
   ```
-  
+
 
 <br />
 
@@ -154,8 +154,8 @@ To properly use AgileTs, in a UI-Framework we need to install **two** packages.
 
 Sounds AgileTs interesting to you?
 Checkout our **[documentation](https://agile-ts.org/docs/introduction)**, to learn more.
-And I promise you, you will be able to use AgileTs in no time.
-In case you have any further questions don't hesitate joining our [Community Discord](https://discord.gg/T9GzreAwPH).
+And I promise you. You will be able to use AgileTs in no time.
+In case you have any further questions, don't hesitate to join our [Community Discord](https://discord.gg/T9GzreAwPH).
 
 
 <br />
@@ -164,8 +164,8 @@ In case you have any further questions don't hesitate joining our [Community Dis
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/contribute_header.png" alt="Contribute"/>
 
-Get a part of AgileTs and start contributing. We welcome any meaningful contribution 😀
-To find out more checkout the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
+Get a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀
+To find out more, check out the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
 
 <a href="https://codeclimate.com/github/agile-ts/agile/coverage.svg">
    <img src="https://codeclimate.com/github/agile-ts/agile/badges/gpa.svg" alt="Maintainability"/>
@@ -193,5 +193,4 @@ To find out more checkout the [CONTRIBUTING.md](https://github.com/agile-ts/agil
 <br />
 <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/credits_header.png" alt="Credits"/>
 
-AgileTs is inspired by [MVVM Frameworks](https://de.wikipedia.org/wiki/Model_View_ViewModel) like [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).
-
+AgileTs is inspired by [MVVM Frameworks](https://de.wikipedia.org/wiki/Model_View_ViewModel) like [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).

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

@@ -5,6 +5,7 @@
   "dependencies": {
     "@agile-ts/api": "file:.yalc/@agile-ts/api",
     "@agile-ts/core": "file:.yalc/@agile-ts/core",
+    "@agile-ts/event": "file:.yalc/@agile-ts/event",
     "@agile-ts/multieditor": "file:.yalc/@agile-ts/multieditor",
     "@agile-ts/react": "file:.yalc/@agile-ts/react",
     "react": "^16.13.1",

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

@@ -1,7 +1,9 @@
 import { Agile, clone, Logger } from '@agile-ts/core';
+import { Event } from '@agile-ts/event';
 
 export const App = new Agile({
   logConfig: { level: Logger.level.DEBUG, timestamp: true },
+  waitForMount: false,
 });
 
 export const MY_STATE = App.createState<string>('MyState'); //.persist();
@@ -46,7 +48,7 @@ MY_COLLECTION.getGroup('myGroup')?.persist({
 
 console.log('Initial: myCollection ', clone(MY_COLLECTION));
 
-export const MY_EVENT = App.createEvent<{ name: string }>({
+export const MY_EVENT = new Event<{ name: string }>(App, {
   delay: 3000,
   key: 'myEvent',
 });

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,18 +1,21 @@
 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,
   MY_COLLECTION,
   MY_COMPUTED,
   MY_EVENT,
   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;
 
 const App = (props: any) => {
   // Note: Rerenders twice because of React Strickt Mode (also useState does trigger a rerender twice)
@@ -31,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'));
@@ -56,6 +68,19 @@ const App = (props: any) => {
     globalBind('__core__', { ...require('./core') });
   }, []);
 
+  const CountupView = () => {
+    const countup = useAgile(COUNTUP);
+    rerenderCountInCountupView++;
+    return (
+      <div style={{ backgroundColor: 'white', padding: 10 }}>
+        <p style={{ color: 'black' }}>Countup: {countup}</p>
+        <p style={{ color: 'black' }}>
+          Rerender Count of count up View: {rerenderCountInCountupView}
+        </p>
+      </div>
+    );
+  };
+
   return (
     <div className="App">
       <header className="App-header">
@@ -78,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' })}>
@@ -124,7 +168,8 @@ const App = (props: any) => {
           }>
           Update mySelector value
         </button>
-        <p>{rerenderCount}</p>
+        <p>Rerender Count: {rerenderCount}</p>
+        <CountupView />
       </header>
     </div>
   );