Tree shakeable support

README.md

@@ -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 />
 

benchmark/benchmarks/react/1000fields/bench/agilets/collection.tsx

@@ -1,9 +1,11 @@
 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, shared } from '@agile-ts/core';
+import reactIntegration, { useAgile, useValue } from '@agile-ts/react';
+import { assignSharedAgileLoggerConfig } from '@agile-ts/logger';
 
-LogCodeManager.getLogger().isActive = false;
+assignSharedAgileLoggerConfig({ active: false });
+shared.integrate(reactIntegration);
 
 export default function (target: HTMLElement, fieldsCount: number) {
   const FIELDS = createCollection({

benchmark/benchmarks/react/1000fields/bench/agilets/nestedState.tsx

@@ -1,9 +1,11 @@
 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, shared, State } from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
+import { assignSharedAgileLoggerConfig } from '@agile-ts/logger';
 
-LogCodeManager.getLogger().isActive = false;
+assignSharedAgileLoggerConfig({ active: false });
+shared.integrate(reactIntegration);
 
 export default function (target: HTMLElement, fieldsCount: number) {
   const FIELDS = createState(

benchmark/benchmarks/react/1000fields/bench/agilets/state.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { createState, LogCodeManager } from '@agile-ts/core';
-import { useAgile } from '@agile-ts/react';
+import { createState, shared } from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
+import { assignSharedAgileLoggerConfig } from '@agile-ts/logger';
 
-LogCodeManager.getLogger().isActive = false;
+assignSharedAgileLoggerConfig({ active: false });
+shared.integrate(reactIntegration);
 
 export default function (target: HTMLElement, fieldsCount: number) {
   const FIELDS = createState(

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';

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

@@ -1,9 +1,12 @@
 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, shared } from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
+import { assignSharedAgileLoggerConfig } from '@agile-ts/logger';
+
+assignSharedAgileLoggerConfig({ active: false });
+shared.integrate(reactIntegration);
 
-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,9 +1,12 @@
 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, shared } from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
+import { assignSharedAgileLoggerConfig } from '@agile-ts/logger';
+
+assignSharedAgileLoggerConfig({ active: false });
+shared.integrate(reactIntegration);
 
-LogCodeManager.getLogger().isActive = false;
 const COUNT = createState(0);
 const COMPUTED_COUNT = createComputed(
   () => {

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';

benchmark/benchmarks/react/counter/bench/agilets.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { createState, LogCodeManager } from '@agile-ts/core';
-import { useAgile } from '@agile-ts/react';
+import { createState, shared } from '@agile-ts/core';
+import reactIntegration, { useAgile } from '@agile-ts/react';
+import { assignSharedAgileLoggerConfig } from '@agile-ts/logger';
+
+assignSharedAgileLoggerConfig({ active: 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>;
 };
 

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';

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';

benchmark/package.json

@@ -7,7 +7,7 @@
   "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",
@@ -45,13 +45,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"

benchmark/run.ts → benchmark/runtime/benchmarkTypes.ts

@@ -1,24 +1,10 @@
-import dotenv from 'dotenv';
+import chalk from 'chalk';
 import esbuild from 'esbuild';
 import playwright from 'playwright';
-import chalk from 'chalk';
-
-// Loads environment variables from the '.env' file
-dotenv.config();
-
-// https://nodejs.org/docs/latest/api/process.html#process_process_argv
-// Extract entry (at third parameter) from the executed command
-// yarn run ./path/to/entry -> './path/to/entry' is extracted
-const entry = process.argv.slice(2)[0];
-const dev = process.argv.slice(2)[1] === '--dev' || process.env.DEV === 'true';
-if (entry == null) {
-  throw new Error(
-    "No valid entry was provided! Valid entry example: 'yarn run ./benchmarks/react/counter'"
-  );
-}
+import fs from 'fs';
 
-const startBenchmark = async () => {
-  console.log(chalk.blue('Starting the benchmark server..\n'));
+export const startSpeedBench = async (entry: string, isDev: boolean) => {
+  console.log(chalk.blue('Starting the speed benchmark server..\n'));
 
   // Bundle Benchmark Test Suite
   // and launch the server on which the Test Suite is executed
@@ -33,9 +19,9 @@ const startBenchmark = async () => {
       entryPoints: [entry], // https://esbuild.github.io/api/#entry-points
       outfile: './public/bundle.js',
       target: 'es2015',
-      format: 'cjs', // https://esbuild.github.io/api/#format-commonjs
+      format: 'esm', // https://esbuild.github.io/api/#format-commonjs
       platform: 'browser',
-      minify: !dev, // https://esbuild.github.io/api/#minify
+      minify: !isDev, // https://esbuild.github.io/api/#minify
       bundle: true, // https://esbuild.github.io/api/#bundle
       sourcemap: 'external', // https://esbuild.github.io/api/#sourcemap// https://github.com/evanw/esbuild/issues/69
     }
@@ -54,7 +40,7 @@ const startBenchmark = async () => {
   const page = await context.newPage();
 
   // Option to open and test the Benchmark Test Suite in the browser manually
-  if (dev) {
+  if (isDev) {
     console.log(
       `${chalk.blue('[i]')} ${chalk.gray(
         `Development mode is ${chalk.green(`active`)}`
@@ -113,5 +99,52 @@ const startBenchmark = async () => {
   server.stop();
 };
 
-// Execute the Benchmark
-startBenchmark();
+export const startBundleBench = async (entry: string, isDev: boolean) => {
+  const bundle = await esbuild.build({
+    inject: ['./lodash.ts'], // https://esbuild.github.io/api/#inject
+    entryPoints: [entry], // https://esbuild.github.io/api/#entry-points
+    outfile: './public/bundle.js',
+    target: 'es2015',
+    format: 'esm', // https://esbuild.github.io/api/#format-commonjs
+    platform: 'browser',
+    minify: !isDev, // https://esbuild.github.io/api/#minify
+    bundle: true, // https://esbuild.github.io/api/#bundle
+    sourcemap: 'external', // https://esbuild.github.io/api/#sourcemap// https://github.com/evanw/esbuild/issues/69
+    metafile: true, // https://esbuild.github.io/api/#metafile
+  });
+
+  console.log(
+    `${chalk.blue('[i]')} ${chalk.gray(
+      `Entry was ${chalk.green(`successfully`)} bundled`
+    )}`
+  );
+
+  if (isDev) {
+    console.log(
+      `${chalk.blue('[i]')} ${chalk.gray(
+        `Development mode is ${chalk.green(`active`)}`
+      )}`
+    );
+  }
+
+  // Extract metafile from bundle (https://esbuild.github.io/api/#metafile)
+  const metafile = bundle.metafile;
+
+  // Calculate bundle file size
+  let bundleSize = 0;
+  bundle.outputFiles?.map((file) => {
+    const stats = fs.statSync(file.path);
+    const fileSizeInBytes = stats.size;
+    const fileSizeInKilobytes = fileSizeInBytes / 1024;
+    bundleSize += fileSizeInKilobytes;
+  });
+
+  console.log(
+    `${chalk.blue('[i]')} ${chalk.gray(
+      `Total bundle size of the bundle is ${chalk.blueBright.bold(bundleSize)}`
+    )}`
+  );
+
+  console.log(metafile);
+  // TODO analyze metafile
+};

benchmark/runtime/run.ts

@@ -0,0 +1,51 @@
+import dotenv from 'dotenv';
+import { startBundleBench, startSpeedBench } from './benchmarkTypes';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+
+// Loads environment variables from the '.env' file
+dotenv.config();
+
+// hideBind handles the 'process.argv.slice' logic
+const argv = yargs(hideBin(process.argv))
+  .option('_', {
+    type: 'string',
+    // default: ['./benchmarks/react/counter'],
+    description: 'What benchmark to execute',
+  })
+  .option('dev', {
+    type: 'boolean',
+    default: false,
+    description:
+      'Whether to start the benchmark/s in developer mode for better debugging.',
+  })
+  .option('type', {
+    type: 'string',
+    default: 'speed',
+    description: 'What type of benchmark to be executed',
+  }).argv as any;
+
+const entry = argv._[0];
+const isDev = argv.dev || process.env.DEV === 'true';
+const benchmarkType = argv.type;
+
+if (entry == null) {
+  throw new Error(
+    "No valid entry was provided! Valid entry example: 'yarn run ./benchmarks/react/counter'"
+  );
+}
+
+// Benchmarks that can be executed marked with a unique identifier
+const benchmarks: {
+  [key: string]: (entry: string, isDev: boolean) => Promise<void>;
+} = {
+  speed: startSpeedBench,
+  bundle: startBundleBench,
+};
+
+// Execute Benchmark based on the specified Benchmark type
+const toExecuteBenchmark = benchmarks[benchmarkType];
+if (toExecuteBenchmark != null) toExecuteBenchmark(entry, isDev);
+else {
+  benchmarks['speed'](entry, isDev);
+}