added bucket option

Author: bennobuilder

benchmark/README.md

@@ -4,6 +4,9 @@ The `Benchmark Test Suites` are supposed to showcase where AgileTs is roughly lo
 I know a counter doesn't really show real world app performance, 
 but it is better than nothing.
 
+### What do the results from benchmark js mean?
+https://stackoverflow.com/questions/28524653/what-do-the-results-from-benchmark-js-mean
+
 ## Counter Benchmark
 
 ```ts

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

@@ -4,7 +4,9 @@ import { Agile, Logger, State } from '@agile-ts/core';
 import { useAgile } from '@agile-ts/react';
 
 export default function (target: HTMLElement, fieldsCount: number) {
-  const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
+  const AgileApp = new Agile({
+    logConfig: { level: Logger.level.ERROR },
+  });
 
   const FIELDS = AgileApp.createState(
     Array.from(Array(fieldsCount).keys()).map((i) =>

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

@@ -3,7 +3,9 @@ import ReactDom from 'react-dom';
 import { Agile, Logger } from '@agile-ts/core';
 import { useAgile } from '@agile-ts/react';
 
-const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
+const AgileApp = new Agile({
+  logConfig: { level: Logger.level.ERROR },
+});
 const COUNT = AgileApp.createState(0);
 
 const App = () => {

packages/core/src/agile.ts

@@ -89,9 +89,11 @@ export class Agile {
       logConfig: {},
       bindGlobal: false,
       autoIntegrate: true,
+      bucket: true,
     });
     this.config = {
       waitForMount: config.waitForMount as any,
+      bucket: config.bucket as any,
     };
     this.key = config.key;
     this.integrations = new Integrations(this, {
@@ -368,6 +370,15 @@ export interface CreateAgileConfigInterface
    * @default undefined
    */
   key?: AgileKey;
+  /**
+   * Whether to put render events into "The bucket" of the browser,
+   * where all events are first put in wait for the UI thread
+   * to be done with whatever it's doing.
+   *
+   * [Learn more](https://stackoverflow.com/questions/9083594/call-settimeout-without-delay)
+   * @default true
+   */
+  bucket?: boolean;
 }
 
 export interface AgileConfigInterface {
@@ -377,4 +388,13 @@ export interface AgileConfigInterface {
    * @default true
    */
   waitForMount: boolean;
+  /**
+   * Whether to put render events into "The bucket" of the browser,
+   * where all events are first put in wait for the UI thread
+   * to be done with whatever it's doing.
+   *
+   * [Learn more](https://stackoverflow.com/questions/9083594/call-settimeout-without-delay)
+   * @default true
+   */
+  bucket: boolean;
 }

packages/core/src/runtime/index.ts

@@ -123,10 +123,12 @@ export class Runtime {
     } else {
       this.isPerformingJobs = false;
       if (this.jobsToRerender.length > 0) {
-        // https://stackoverflow.com/questions/9083594/call-settimeout-without-delay
-        setTimeout(() => {
-          this.updateSubscribers();
-        });
+        if (this.agileInstance().config.bucket) {
+          // https://stackoverflow.com/questions/9083594/call-settimeout-without-delay
+          setTimeout(() => {
+            this.updateSubscribers();
+          });
+        } else this.updateSubscribers();
       }
     }
   }

packages/core/tests/unit/agile.test.ts

@@ -88,6 +88,7 @@ describe('Agile Tests', () => {
 
     expect(agile.config).toStrictEqual({
       waitForMount: true,
+      bucket: true,
     });
     expect(agile.key).toBeUndefined();
     expect(IntegrationsMock).toHaveBeenCalledWith(agile, {
@@ -111,6 +112,7 @@ describe('Agile Tests', () => {
   it('should instantiate Agile (specific config)', () => {
     const agile = new Agile({
       waitForMount: false,
+      bucket: false,
       localStorage: false,
       logConfig: {
         level: Logger.level.DEBUG,
@@ -125,6 +127,7 @@ describe('Agile Tests', () => {
 
     expect(agile.config).toStrictEqual({
       waitForMount: false,
+      bucket: false,
     });
     expect(agile.key).toBe('jeff');
     expect(IntegrationsMock).toHaveBeenCalledWith(agile, {

packages/core/tests/unit/runtime/runtime.test.ts

@@ -9,6 +9,7 @@ import {
 } from '../../../src';
 import * as Utils from '@agile-ts/utils';
 import { LogMock } from '../../helper/logMock';
+import waitForExpect from 'wait-for-expect';
 
 describe('Runtime Tests', () => {
   let dummyAgile: Agile;
@@ -111,8 +112,10 @@ describe('Runtime Tests', () => {
 
       it(
         "should perform specified Job and all remaining Jobs in the 'jobQueue' " +
-          "and call 'updateSubscribers' if at least one performed Job needs to rerender",
+          "and call 'updateSubscribers' in a setTimeout " +
+          'if at least one performed Job needs to rerender (config.bucket = true)',
         async () => {
+          runtime.agileInstance().config.bucket = true;
           runtime.jobQueue.push(dummyJob2);
           runtime.jobQueue.push(dummyJob3);
 
@@ -129,8 +132,23 @@ describe('Runtime Tests', () => {
           expect(runtime.jobQueue).toStrictEqual([]);
           expect(runtime.jobsToRerender).toStrictEqual([dummyJob1, dummyJob2]);
 
-          // Sleep 5ms because updateSubscribers is called in a timeout
-          await new Promise((resolve) => setTimeout(resolve, 5));
+          // Because 'updateSubscribers' is called in a timeout
+          await waitForExpect(() => {
+            expect(runtime.updateSubscribers).toHaveBeenCalledTimes(1);
+          });
+        }
+      );
+
+      it(
+        "should perform specified Job and all remaining Jobs in the 'jobQueue' " +
+          "and call 'updateSubscribers' " +
+          'if at least one performed Job needs to rerender (config.bucket = false)',
+        async () => {
+          runtime.agileInstance().config.bucket = false;
+          runtime.jobQueue.push(dummyJob2);
+          runtime.jobQueue.push(dummyJob3);
+
+          runtime.perform(dummyJob1);
 
           expect(runtime.updateSubscribers).toHaveBeenCalledTimes(1);
         }
@@ -151,7 +169,8 @@ describe('Runtime Tests', () => {
 
       it(
         "should perform specified Job and all remaining Jobs in the 'jobQueue' " +
-          "and shouldn't call 'updateSubscribes' if no performed Job needs to rerender",
+          "and shouldn't call 'updateSubscribes' " +
+          'if no performed Job needs to rerender',
         async () => {
           dummyJob1.rerender = false;
           runtime.jobQueue.push(dummyJob3);