agile-ts · bennobuilder · Sep 13, 2021 · Jul 28, 2021 · Jul 28, 2021 · Jul 30, 2021
diff --git a/.changeset/calm-pets-attend.md b/.changeset/calm-pets-attend.md
@@ -0,0 +1,27 @@
+---
+'@agile-ts/api': patch
+'@agile-ts/core': patch
+'cra-template-agile': patch
+'cra-template-agile-typescript': 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
+---
+
+#### :rocket: New Feature
+* `core`, `event`, `logger`, `multieditor`, `react`, `utils`
+    * [#188](https://github.com/agile-ts/agile/pull/188) Tree shakeable support ([@bennodev19](https://github.com/bennodev19))
+
+#### :nail_care: Polish
+* `core`
+    * [#189](https://github.com/agile-ts/agile/pull/189) Optimize collection rebuilds ([@bennodev19](https://github.com/bennodev19))
+* `api`, `core`, `cra-template-agile-typescript`, `cra-template-agile`, `event`, `logger`, `multieditor`, `proxytree`, `react`, `utils`, `vue`
+    * [#187](https://github.com/agile-ts/agile/pull/187) Tree shakeable support ([@bennodev19](https://github.com/bennodev19))
+
+#### Committers: 1
+- BennoDev ([@bennodev19](https://github.com/bennodev19))
+
diff --git a/README.md b/README.md
@@ -79,7 +79,7 @@ AgileTs is a global State and Logic Library implemented in Typescript.
 It offers a reimagined API that focuses on **developer experience**
 and allows you to **easily** and **flexible** manage your application States.
 Besides [States](https://agile-ts.org/docs/core/state),
-AgileTs offers some other powerful APIs that make your life easier,
+AgileTs offers some other powerful and tree shakable APIs that make your life easier,
 such as [Collections](https://agile-ts.org/docs/core/collection)
 and [Computed States](https://agile-ts.org/docs/core/computed).
 The philosophy behind AgileTs is simple:
@@ -88,19 +88,19 @@ The philosophy behind AgileTs is simple:
 
 Write minimalistic, boilerplate-free code that captures your intent.
 ```ts
-// Create State with inital value 'frank'
+// Create State with the inital value 'frank'
 const MY_STATE = createState('frank');
 
-// Update State value from 'frank' to 'jeff'
+// Update the State value from 'frank' to 'jeff'
 MY_STATE.set('jeff');
 
-// Undo latest State value change
+// Undo the latest State value change
 MY_STATE.undo();
 
-// Reset State value to its initial value
+// Reset the State value to its initial value
 MY_STATE.reset();
 
-// Permanently store State value in an external Storage
+// Permanently store the State value in an external Storage
 MY_STATE.persist("storage-key"); 
 ```
 
@@ -206,6 +206,14 @@ To find out more about contributing, check out the [CONTRIBUTING.md](https://git
    <img src="https://codeclimate.com/github/agile-ts/agile/badges/gpa.svg" alt="Maintainability"/>
 </a>
 
+### ♥️ Contributors 
+
+<a href="https://github.com/agile-ts/agile/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=agile-ts/agile" />
+</a>
+
+[Become a contributor](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md)
+
 
 <br />
 

diff --git a/benchmark/.env b/benchmark/.env
@@ -1 +1 @@
-MANUAL_BENCHMARK=false
+DEV=false
diff --git a/benchmark/README.md b/benchmark/README.md
@@ -121,10 +121,18 @@ Execute the benchmark located in `./benchmarks/react/counter`.
 ```ts
 yarn run test:counter
 ```
+If you want to test it manually, enable the `dev mode`.
+```ts
+yarn run test:counter --dev
+```
+The difference to the 'normal' mode is that:
+- the executed bundle isn't `minified`
+- the test has to be started manually by opening `localhost:3003`
+- the test results are printed in the `browser console`
 
 ## ⭐️ Contribute
 
-Get a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀
+Feel free to add more tests and State Managers to be tested. We welcome any meaningful contribution. 😀
 To find out more about contributing, 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">

diff --git a/benchmark/benchmarkManager.ts → benchmark/benchmarks/benchmarkManager.ts b/benchmark/benchmarkManager.ts → benchmark/benchmarks/benchmarkManager.ts
diff --git a/benchmark/benchmarks/react/1000fields/bench/agilets/collection.tsx b/benchmark/benchmarks/react/1000fields/bench/agilets/collection.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { createCollection, LogCodeManager } from '@agile-ts/core';
-import { useAgile, useValue } from '@agile-ts/react';
+import { createCollection, LogCodeManager, shared } from '@agile-ts/core';
+import reactIntegration, { useAgile, useValue } from '@agile-ts/react';
 
-LogCodeManager.getLogger().isActive = false;
+LogCodeManager.setAllowLogging(false);
+shared.integrate(reactIntegration);
 
 export default function (target: HTMLElement, fieldsCount: number) {
   const FIELDS = createCollection({

diff --git a/benchmark/benchmarks/react/1000fields/bench/agilets/nestedState.tsx b/benchmark/benchmarks/react/1000fields/bench/agilets/nestedState.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
-import { createState, LogCodeManager, State } from '@agile-ts/core';
-import { useAgile } from '@agile-ts/react';
+import { createState, LogCodeManager, shared, State } from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
 
-LogCodeManager.getLogger().isActive = false;
+LogCodeManager.setAllowLogging(false);
+shared.integrate(reactIntegration);
 
 export default function (target: HTMLElement, fieldsCount: number) {
   const FIELDS = createState(

diff --git a/benchmark/benchmarks/react/1000fields/bench/agilets/state.tsx b/benchmark/benchmarks/react/1000fields/bench/agilets/state.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { createState, LogCodeManager } from '@agile-ts/core';
-import { useAgile } from '@agile-ts/react';
+import { createState, LogCodeManager, shared } from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
 
-LogCodeManager.getLogger().isActive = false;
+LogCodeManager.setAllowLogging(false);
+shared.integrate(reactIntegration);
 
 export default function (target: HTMLElement, fieldsCount: number) {
   const FIELDS = createState(

diff --git a/benchmark/benchmarks/react/1000fields/index.ts b/benchmark/benchmarks/react/1000fields/index.ts
@@ -6,7 +6,7 @@ import {
   endBenchmarkLog,
   getCycleResult,
   startBenchmarkLog,
-} from '../../../benchmarkManager';
+} from '../../benchmarkManager';
 
 // Files to run the Benchmark on
 import agileCollection from './bench/agilets/collection';
@@ -81,8 +81,8 @@ suite
   .add('Agile State', configTest(agileState))
   .add('Agile nested State', configTest(agileNestedState))
   .add('Pulse Collection', configTest(pulseCollection))
-  // .add('Pulse State', configTest(pulseState))
-  // .add('Pulse nested State', configTest(pulseNestedState))
+  .add('Pulse State', configTest(pulseState))
+  .add('Pulse nested State', configTest(pulseNestedState))
   .add('Hookstate', configTest(hookstate))
   .add('Jotai', configTest(jotai))
   .add('Mobx', configTest(mobx))

diff --git a/benchmark/benchmarks/react/computed/bench/agilets/autoTracking.tsx b/benchmark/benchmarks/react/computed/bench/agilets/autoTracking.tsx
@@ -1,9 +1,16 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { createComputed, createState, LogCodeManager } from '@agile-ts/core';
-import { useAgile } from '@agile-ts/react';
+import {
+  createComputed,
+  createState,
+  LogCodeManager,
+  shared,
+} from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
+
+LogCodeManager.setAllowLogging(false);
+shared.integrate(reactIntegration);
 
-LogCodeManager.getLogger().isActive = false;
 const COUNT = createState(0);
 const COMPUTED_COUNT = createComputed(() => {
   return COUNT.value * 5;

diff --git a/benchmark/benchmarks/react/computed/bench/agilets/hardCoded.tsx b/benchmark/benchmarks/react/computed/bench/agilets/hardCoded.tsx
@@ -1,9 +1,16 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { createComputed, createState, LogCodeManager } from '@agile-ts/core';
-import { useAgile } from '@agile-ts/react';
+import {
+  createComputed,
+  createState,
+  LogCodeManager,
+  shared,
+} from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
+
+LogCodeManager.setAllowLogging(false);
+shared.integrate(reactIntegration);
 
-LogCodeManager.getLogger().isActive = false;
 const COUNT = createState(0);
 const COMPUTED_COUNT = createComputed(
   () => {

diff --git a/benchmark/benchmarks/react/computed/index.ts b/benchmark/benchmarks/react/computed/index.ts
@@ -6,7 +6,7 @@ import {
   endBenchmarkLog,
   getCycleResult,
   startBenchmarkLog,
-} from '../../../benchmarkManager';
+} from '../../benchmarkManager';
 
 // Files to run the Benchmark on
 import agileAutoTracking from './bench/agilets/autoTracking';

diff --git a/benchmark/benchmarks/react/counter/bench/agilets.tsx b/benchmark/benchmarks/react/counter/bench/agilets.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { createState, LogCodeManager } from '@agile-ts/core';
-import { useAgile } from '@agile-ts/react';
+import { createState, LogCodeManager, shared } from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
+
+LogCodeManager.setAllowLogging(false);
+shared.integrate(reactIntegration);
 
-LogCodeManager.getLogger().isActive = false;
 const COUNT = createState(0);
 
 const App = () => {
-  const count = useAgile(COUNT, undefined);
+  const count = useAgile(COUNT);
   return <h1 onClick={() => COUNT.set((state) => state + 1)}>{count}</h1>;
 };
 

diff --git a/benchmark/benchmarks/react/counter/index.ts b/benchmark/benchmarks/react/counter/index.ts
@@ -6,7 +6,7 @@ import {
   endBenchmarkLog,
   getCycleResult,
   startBenchmarkLog,
-} from '../../../benchmarkManager';
+} from '../../benchmarkManager';
 
 // Files to run the Benchmark on
 import agilets from './bench/agilets';

diff --git a/benchmark/benchmarks/typescript/cloneDeep/bench/lodash.ts b/benchmark/benchmarks/typescript/cloneDeep/bench/lodash.ts
@@ -0,0 +1,6 @@
+// @ts-ignore
+import _ from 'lodash';
+
+export function cloneDeep<T = any>(value: T): T {
+  return _.cloneDeep(value);
+}
diff --git a/benchmark/benchmarks/typescript/cloneDeep/bench/looper.ts b/benchmark/benchmarks/typescript/cloneDeep/bench/looper.ts
@@ -0,0 +1,19 @@
+export function cloneDeep<T = any>(value: T): T {
+  // Extra checking 'value == null' because 'typeof null === object'
+  if (value == null || typeof value !== 'object') return value;
+
+  // Ignore everything that is no object or array but has the type of an object (e.g. classes)
+  const valConstructorName = Object.getPrototypeOf(
+    value
+  ).constructor.name.toLowerCase();
+  if (valConstructorName !== 'object' && valConstructorName !== 'array')
+    return value;
+
+  let temp;
+  const newObject: any = Array.isArray(value) ? [] : {};
+  for (const property in value) {
+    temp = value[property];
+    newObject[property] = cloneDeep(temp);
+  }
+  return newObject as T;
+}
diff --git a/benchmark/benchmarks/typescript/cloneDeep/bench/stringify.ts b/benchmark/benchmarks/typescript/cloneDeep/bench/stringify.ts
@@ -0,0 +1,3 @@
+export function cloneDeep<T = any>(value: T): T {
+  return JSON.parse(JSON.stringify(value));
+}
diff --git a/benchmark/benchmarks/typescript/cloneDeep/index.ts b/benchmark/benchmarks/typescript/cloneDeep/index.ts
@@ -0,0 +1,56 @@
+import Benchmark, { Suite } from 'benchmark';
+import {
+  cycleLog,
+  CycleResultInterface,
+  endBenchmarkLog,
+  getCycleResult,
+  startBenchmarkLog,
+} from '../../benchmarkManager';
+
+// Files to run the Benchmark on
+import * as lodash from './bench/lodash';
+import * as looper from './bench/looper';
+import * as stringify from './bench/stringify';
+
+const toClone = { x1: true, x2: undefined };
+
+// @ts-ignore
+// Benchmark.js requires an instance of itself globally
+window.Benchmark = Benchmark;
+
+// Create new Benchmark Test Suite
+const suite = new Suite('clone deep');
+
+const results: CycleResultInterface[] = [];
+
+// Add Tests to the Benchmark Test Suite
+suite
+  .add('Lodash', function () {
+    lodash.cloneDeep(toClone);
+  })
+  .add('Looper', function () {
+    looper.cloneDeep(toClone);
+  })
+  .add('Stringify', function () {
+    stringify.cloneDeep(toClone);
+  })
+
+  // Add Listener
+  .on('start', function (this: any) {
+    startBenchmarkLog(this.name);
+  })
+  .on('cycle', (event: any) => {
+    const cycleResult = getCycleResult(event);
+    cycleLog(cycleResult);
+    results.push(cycleResult);
+  })
+  .on('complete', function (this: any) {
+    endBenchmarkLog(this.name, results, this.filter('fastest').map('name'));
+
+    // @ts-ignore
+    // Notify server that the Benchmark Test Suite has ended
+    window.TEST.ended = true;
+  })
+
+  // Run Benchmark Test Suite
+  .run({ async: true });
diff --git a/benchmark/benchmarks/typescript/defineConfig/index.ts b/benchmark/benchmarks/typescript/defineConfig/index.ts
@@ -5,7 +5,7 @@ import {
   endBenchmarkLog,
   getCycleResult,
   startBenchmarkLog,
-} from '../../../benchmarkManager';
+} from '../../benchmarkManager';
 
 // Files to run the Benchmark on
 import * as referencer from './bench/referencer';

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -7,11 +7,12 @@
   "homepage": "https://agile-ts.org/",
   "description": "Benchmark Tests",
   "scripts": {
-    "test": "node -r esbuild-register run.ts",
+    "test": "node -r esbuild-register runtime/run.ts",
     "test:counter": "yarn test ./benchmarks/react/counter",
     "test:1000fields": "yarn test ./benchmarks/react/1000fields",
     "test:computed": "yarn test ./benchmarks/react/computed",
     "test:defineConfig": "yarn test ./benchmarks/typescript/defineConfig",
+    "test:cloneDeep": "yarn test ./benchmarks/typescript/cloneDeep",
     "install:dev:agile": "yalc add @agile-ts/core @agile-ts/react & yarn install",
     "install:prod:agile": "yarn add @agile-ts/core @agile-ts/react & yarn install"
   },
@@ -21,8 +22,9 @@
   },
   "dependencies": {
     "@agile-ts/core": "file:.yalc/@agile-ts/core",
+    "@agile-ts/logger": "file:.yalc/@agile-ts/logger",
     "@agile-ts/react": "file:.yalc/@agile-ts/react",
-    "@hookstate/core": "^3.0.8",
+    "@hookstate/core": "^3.0.11",
     "@pulsejs/core": "^4.0.0-beta.3",
     "@pulsejs/react": "^4.0.0-beta.3",
     "@reduxjs/toolkit": "^1.6.0",
@@ -45,13 +47,15 @@
     "redux": "^4.1.0",
     "typescript": "^4.3.5",
     "valtio": "^1.0.6",
+    "yargs": "^17.1.0",
     "zustand": "^3.5.5"
   },
   "devDependencies": {
     "@types/benchmark": "^2.1.0",
     "@types/node": "^16.0.0",
     "@types/react": "^17.0.13",
-    "@types/react-dom": "^17.0.8"
+    "@types/react-dom": "^17.0.8",
+    "@types/yargs": "^17.0.2"
   },
   "bugs": {
     "url": "https://github.com/agile-ts/agile/issues"