targetj 1.0.131 → 1.0.133

package/README.md

@@ -1,36 +1,74 @@
-# TargetJ: JavaScript UI framework and library - Programming the Front-End with a New Paradigm
-
-Welcome to TargetJ, a powerful JavaScript UI framework and library that you might find redefines front-end development. (https://targetj.io)
-
-TargetJ distinguishes itself by introducing a novel concept known as 'targets,' which forms its core. Targets give methods and variable assignments life cycles and the autonomy to operate independently, with various callbacks to adapt to changes, mimicking the behavior of living cells. This opens a new paradigm in programming.
+# TargetJS: JavaScript UI framework and library - Programming the Front-End with a New Paradigm
+
+Welcome to TargetJS, a powerful JavaScript UI framework and library that you might find redefines front-end development. (https://targetj.io)
+
+TargetJS distinguishes itself by introducing a novel concept known as 'targets,' which forms its core. Targets give methods and variable assignments life cycles and the autonomy to operate independently, with various callbacks to adapt to changes, mimicking the behavior of living cells. This opens a new paradigm in programming.
+
+---
+
+## Table of Contents
+
+1. [Installation](#installation)
+2. [What are Targets?](#what-are-targets)
+3. Quick Examples:
+   - [Draggable Animation Example](#draggable-animation-example)
+   - [Infinite Scrolling Example](#infinite-scrolling-example)
+4. [Why TargetJS?](#why-targetjs)
+5. [Integration with Existing Pages](#integration-with-existing-pages)
+6. [Anatomy of a Target](#anatomy-of-a-target)
+7. [How TargetJS Operates](#how-targetjs-operates)
+8. [Target Methods](#target-methods)
+9. Examples:
+   - [Simple Example](#simple-example)
+   - [Declarative and Imperative Targets Example](#declarative-and-imperative-targets-example)
+   - [Loading Data Example](#loading-data-example)
+   - [Animation API Comparison Example](#animation-api-comparison-example)
+   - [Simple Single Page App Example](#simple-single-page-app-example)
+   - [Using TargetJS as a Library Example](#using-targetjs-as-a-library-example)
+10. [Special Target Names](#special-target-names)
+11. [TargetJS Features](#features)
+12. [How to Debug in TargetJS](#how-to-debug-in-targetjs)
+13. [Documentation](#documentation)
+14. [License](#license)
+15. [Contact](#contact)
 
 ⭐ We appreciate your star, it helps!
 
-### Installation
+---
+
+## Installation
 
-To install TargetJ, run the following command in your terminal:
+To install TargetJS, run the following command in your terminal:
 
 ```bash
 npm install targetj
 ```
+---
+
 ## What are targets?
 
-Targets are used as the main building blocks of components instead of direct variables and methods. Each component in TargetJ is a set of targets. Targets are employed across all aspects of the program. They are used in animation, controlling program flow, loading data from external APIs, handling user events, and more.
+Targets are used as the main building blocks of components instead of direct variables and methods. Each component in TargetJS is a set of targets. Targets are employed across all aspects of the program. They are used in animation, controlling program flow, loading data from external APIs, handling user events, and more.
 
 Targets provide a unified interface for variable assignments and methods, enabling them to operate autonomously. For example, targets give variables the ability to iterate in steps until reaching a specified value, rather than being immediately assigned. Targets can include pauses between these steps, track the progress of other variables, and manage their life cycles dynamically. Methods can execute themselves under specific conditions, control the number of executions, and more.
 
-### Quick example
+---
+
+## Quick examples
+
+This section provides a few quick demonstrations of what TargetJS can do.
 
-In our first example, `color`, `html`, `textAlign`, `moves`, and `animate` are all targets. These targets are completed in the same order they appear in the program. The main target `animate` remains active with an indefinite lifecycle specified by the `loop` property. After each animation cycle, there is a one-second pause, defined by the `interval` property in the `animate` target. Both `loop` and `interval` can also be defined as methods, which will be explained further below. The `setTarget` method defines an imperative target, which is also explained in more detail below, executes the assigment in 30 steps. The `animate` target starts a new cycle after all the imperative targets have been completed.
+## Draggable Animation Example 
 
-You'll also find `quickStart`, the first argument in the `TModel` constructor. If an HTML element with the same ID already exists on the page, it will be used in the new instance of `TModel`, and the animation will be applied to it. If no such element exists, TargetJ will create one.
+In our first example, `color`, `html`, `textAlign`, `moves`, and `animate` are all targets. These targets are executed in the same order they appear in the program. `color`, `html`, `textAlign`, `moves` get competed and their life cycle end. The main target `animate` remains active with an indefinite lifecycle specified by the `loop` property. After each animation cycle, there is a one-second pause, defined by the `interval` property in the `animate` target. Both `loop` and `interval` can also be defined as methods, which will be explained further below. The `setTarget` method defines an imperative target, which is also explained in more detail below, executes the assigment in 30 steps. The `animate` target starts a new cycle after all the imperative targets have been completed or at least one second pass specified in the interval value given that the imperative targets get executed less than 1 second.
+
+You'll also find `quickStart`, the first argument in the `TModel` constructor. If an HTML element with the same ID already exists on the page, it will be used in the new instance of `TModel`, and the animation will be applied to it. If no such element exists, TargetJS will create one.
 
 You can view the live example at [https://targetj.io/examples/quick.html](https://targetj.io/examples/quick.html). Click on "Show Code" to see how the code is executed.
 
-![first example](https://targetj.io/img/quickExample2.gif)
+![first example](https://targetj.io/img/quickExample3.gif)
 
 ```bash
-import { App, TModel, getEvents } from "targetj";
+import { App, TModel, getEvents } from "targetjs";
 
 App(new TModel('quickStart', {
     color: '#fff',
@@ -61,25 +99,77 @@ App(new TModel('quickStart', {
 }));
 ```
 
+## Infinite Scrolling Example
+
+This example demonstrates how to handle scroll events and implement a simple infinite scrolling application. The `containerOverflowMode` system target ensures that all items in the scroller overflow and stack beneath each other seamlessly. The `children` system target dynamically adds items to the container's children. The `onVisibleChildrenChange` event function detects changes in the visible children and activates the `children` target to create new items that fill the gaps. 
+
+Internally, TargetJS maintains a tree-like structure to track the visible branches of the tree, optimizing the performance of the scroller. You can opt out of tree-structure optimization by setting shouldBeBracketed target to false.
+
+If you inspect the HTML elements in the browser's developer tools, you'll notice that the scroller's elements are not nested inside the container. This is because nesting is another target that can dynamically control how elements are nested.
+
+![Single page app](https://targetj.io/img/infiniteScrolling4.gif)
+
+```bash
+import { App, TModel, getEvents, getScreenHeight, getScreenWidth, } from "targetjs";
+
+App(new TModel({
+    containerOverflowMode: 'always',
+    children() { 
+        const childrenCount = this.getChildren().length;
+        return Array.from({ length: 10 }, (_, i) => 
+            new TModel('scrollItem', {                     
+                width: 300,
+                background: '#B388FF',                
+                height: 32,
+                color: '#C2FC61',
+                textAlign: 'center',
+                lineHeight: 32,               
+                bottomMargin: 2,
+                x() { return this.getCenterX(); },                
+                html: childrenCount + i
+            })
+        ); 
+    },          
+    width() { return getScreenWidth(); },
+    height() { return getScreenHeight(); },  
+    onResize: [ 'width', 'height' ],
+    onScroll() {
+        this.setTarget('scrollTop', Math.max(0, this.getScrollTop() + getEvents().deltaY()));
+    },
+    onVisibleChildrenChange() { 
+        if (getEvents().dir() !== 'up' && this.visibleChildren.length * 34 < this.getHeight()) {
+            this.activateTarget('children');
+        }
+    }
+}));
+```
+
+---
+
+## Why TargetJS?
 
-## Why TargetJ?
+Imagine building a single-page web app using a unified approach for API integration, animations, event handling, and more—without having to manage asynchronous calls, loops, callbacks, promises, timeouts, state management, CSS, HTML attributes, tags, or HTML nesting. That’s exactly what TargetJS offers: it simplifies the entire development process with a new, simplified approach.
 
-Imagine building a single-page web app using a unified approach for API integration, animations, event handling, and more—without having to manage asynchronous calls, loops, callbacks, promises, timeouts, state management, CSS, HTML attributes, tags, or HTML nesting. That’s exactly what TargetJ offers: it simplifies the entire development process with a new, simplified approach.
+---
 
-## Can I integrate TargetJ as a library into my existing page?
+## Integration with Existing Pages
 
-Yes, you can integrate TargetJ as a library into your existing page! TargetJ is designed to work as either a library or a framework. It was developed to be flexible and compatible with other libraries and frameworks, allowing you to enhance your page with minimal changes. You can find an example at the end of this page.
+Yes, you can integrate TargetJS as a library into your existing page! TargetJS is designed to work as either a library or a framework. It was developed to be flexible and compatible with other libraries and frameworks, allowing you to enhance your page with minimal changes. You can find an example at the end of this page.
 
-## What does a target consist of?
+---
+
+## Anatomy of a Target
 
 Each target consists of the following:
-1. Target Value and Actual Value. The target value is the value assigned to a variable or the result produced by a method. The actual value is typically the value used by the rest of the application. When the target value differs from the actual value, TargetJ iteratively updates the actual value until it matches the target value. This process is managed by two additional variables: Step, which dictates the number of iterations, and Interval, which specifies the duration (in milliseconds) the system waits before executing the next iteration.
+1. Target Value and Actual Value. The target value is the value assigned to a variable or the result produced by a method. The actual value is typically the value used by the rest of the application. When the target value differs from the actual value, TargetJS iteratively updates the actual value until it matches the target value. This process is managed by two additional variables: Step, which dictates the number of iterations, and Interval, which specifies the duration (in milliseconds) the system waits before executing the next iteration.
 
 2. State: Targets have four states that control their lifecycle: Active, Inactive, Updating, and Complete. Active: This is the default state for all targets. It indicates that the target is ready to be executed, and the target value needs to be initialized from the variable it represents or its value() method needs to be executed to calculate its output. Inactive: Indicates that the target is not ready to be executed. Updating: Indicates that the actual value is being adjusted to reach the target value. Complete: Indicates that the target execution is finished, and the actual value has matched the target value.
 
 3. Target Methods: All methods are optional. They are used to control the lifecycle of targets or serve as callbacks to reflect changes. The controlling methods are: enabledOn, loop, steps, cycles. The callbacks are: onValueChange, onStepsEnd, onImperativeStep, onImperativeEnd. More details in the method section.
 
-## Brief overview of how it operates
+---
+
+## How TargetJS Operates
 
 All targets are in the active state by default and ready to be executed. They can include an enabledOn function that delays their execution until the specified conditions are met. Targets can also be set to inactive and activated externally when needed. 
 
@@ -89,6 +179,8 @@ If the target has loop or cycle methods defined, its value method will be re-exe
 
 A target can reactivate itself in the `onStepsEnd` callback once all steps are completed, or in the `onImperativeEnd` callback when all imperative targets initiated by that target are finished, allowing it to re-execute. It can also be reactivated externally, either directly or through an event.
 
+---
+
 ## Target methods
 
 All methods and properties are optional, but they play integral roles in making targets useful for animation, API loading, event handling, and more:
@@ -132,8 +224,13 @@ This is only property. It indicates that the target is in an inactive state and
 13. **initialValue**
 This is only property. It defines the initial value of the actual value.
 
+---
 
-### Simple example
+## More examples
+
+Below are examples of various TargetJS use cases:
+
+## Simple example
 
 In the example below, we incrementally increase the values of width, height, and opacity in 30 steps, with a 50-millisecond pause between each step. You can view a live example here: https://targetj.io/examples/overview.html.
 
@@ -141,7 +238,7 @@ In the example below, we incrementally increase the values of width, height, and
 
 
 ```bash
-import { App, TModel } from 'targetj';
+import { App, TModel } from 'targetjs';
 
 App(new TModel({
     background: '#fff',
@@ -166,7 +263,7 @@ App(new TModel({
 It can also be written in a more compact form using arrays (view a live example at https://targetj.io/examples/overview2.html):
 
 ```bash
-import { App, TModel } from 'targetj';
+import { App, TModel } from 'targetjs';
 
 App(new TModel({
     background: '#fff',
@@ -176,22 +273,22 @@ App(new TModel({
  }));
 ```
 
-## Declarative and imperative targets
+---
 
-Targets in TargetJ can be defined in two ways: declaratively or imperatively.
+## Declarative and Imperative Targets Example
 
-The declarative approach offers a structured method for defining targets, as seen in the previous example. However, orchestrating multiple targets with varying speeds and timings can be challenging. For instance, tracking the completion of multiple targets to trigger a new set of targets is not easily done using only declarative targets. To address this, TargetJ provides the setTarget function, allowing you to define multiple imperative targets from within a single declarative target. Additionally, the onImperativeStep and onImperativeEnd callbacks, defined in the declarative target, enable you to track each step of the imperative targets or just their completion.
+Targets in TargetJS can be defined in two ways: declaratively or imperatively.
 
-By combining both declarative and imperative targets, you gain a powerful toolset for designing complex interactions.
+The declarative approach offers a structured method for defining targets, as seen in the previous example. However, orchestrating multiple targets with varying speeds and timings can be challenging. For instance, tracking the completion of multiple targets to trigger a new set of targets is not easily done using only declarative targets. To address this, TargetJS provides the setTarget function, allowing you to define multiple imperative targets from within a single declarative target. Additionally, the onImperativeStep and onImperativeEnd callbacks, defined in the declarative target, enable you to track each step of the imperative targets or just their completion.
 
-## Declarative an imperative example
+By combining both declarative and imperative targets, you gain a powerful toolset for designing complex interactions.
 
 The following example demonstrates both declarative and imperative approaches. In the `animate` target, two imperative targets are set to move a square across the screen. Once both `x` and `y` targets are completed, the `animate` target will re-execute because `loop` is defined as `true`, causing it to continue indefinitely. Additionally, we can add `onImperativeEnd()` to trigger when either the `x` or `y` target completes. We can also use `onXEnd` or `onYEnd` to listen specifically for the completion of the `x` or `y` target, respectively.
 
 ![declarative example](https://targetj.io/img/declarative.gif)
 
 ```bash
-import { App, TModel, getScreenWidth, getScreenHeight } from "targetj";
+import { App, TModel, getScreenWidth, getScreenHeight } from "targetjs";
 
 App(
   new TModel("declarative", {
@@ -220,9 +317,11 @@ App(
 );
 ```
 
+---
+
 ## Loading data example
 
-Calling backend APIs is simplified through the use of targets in TargetJ. Additionally, TargetJ provides a Loader class, accessible via getLoader(), which streamlines API integration.
+Calling backend APIs is simplified through the use of targets in TargetJS. Additionally, TargetJS provides a Loader class, accessible via getLoader(), which streamlines API integration.
 
 In the example below, we define a target named load. Inside the value function, we make the API call using fetch(). The second argument specifies the API URL, and the third argument contains the query parameters passed to the API. A fourth optional parameter, omitted in this example, can specify a cache ID if we want to cache the result. This cache ID can also be used to retrieve the cached data. If it’s not specified, the result will always come from the API. Once the API response is received, it triggers either onSuccess or onError, depending on the outcome.
 
@@ -231,7 +330,7 @@ In this example, we set the cycles to 9, triggering the API call 10 times at int
 ![api loading example](https://targetj.io/img/apiLoading4.gif)
 
 ```bash
-import { App, TModel, getLoader, getScreenHeight, getScreenWidth, Moves } from "targetj";
+import { App, TModel, getLoader, getScreenHeight, getScreenWidth, Moves } from "targetjs";
 
 App(new TModel("apiCall", {
   width: 160,
@@ -262,19 +361,20 @@ App(new TModel("apiCall", {
   }
 }));
 ```
+---
 
-## Animation API example
+## Animation API Comparison Example
 
-TargetJ provides efficient, easy-to-control UI animation and manipulation through special targets that reflect HTML style names, such as `width`, `height`, `scale`, `rotate`, and `opacity`. 
+TargetJS provides efficient, easy-to-control UI animation and manipulation through special targets that reflect HTML style names, such as `width`, `height`, `scale`, `rotate`, and `opacity`. 
 
-Below is a comparison between implementing animations in TargetJ versus using the Animation API. While the Animation API may still offer a slight performance edge, TargetJ comes very close.
+Below is a comparison between implementing animations in TargetJS versus using the Animation API. While the Animation API may still offer a slight performance edge, TargetJS comes very close.
 
 ![animation api example](https://targetj.io/img/animationComparison2.gif)
 
 ```bash
-import { App, TModel, getScreenHeight, getScreenWidth } from "targetj";
+import { App, TModel, getScreenHeight, getScreenWidth } from "targetjs";
 
-App(new TModel('TargetJ vs Animation Api', { 
+App(new TModel('TargetJS vs Animation Api', { 
     addAnimateChild() {
         this.addChild(new TModel('animation', {
             width: 150,
@@ -316,7 +416,7 @@ App(new TModel('TargetJ vs Animation Api', {
     addDomChild() {
         this.addChild(new TModel('dom', {
             color: 'white',
-            html: 'TargetJ',
+            html: 'TargetJS',
             animate: {
                 cycles: 3,
                 value(cycle) {
@@ -354,59 +454,21 @@ App(new TModel('TargetJ vs Animation Api', {
 }));
 ```
 
-## Infinite scrolling
-
-This example demonstrates how to handle scroll events and develop a simple infinite scrolling application.
+---
 
-![Single page app](https://targetj.io/img/infiniteScrolling4.gif)
 
-```bash
-import { App, TModel, getEvents, getScreenHeight, getScreenWidth, } from "targetj";
-
-App(new TModel("scroller", {
-    domHolder: true,
-    overflow: 'hidden',
-    containerOverflowMode: 'always',
-    children() { 
-        const childrenCount = this.getChildren().length;
-        return Array.from({ length: 10 }, (_, i) => 
-            new TModel('scrollItem', {                     
-                width: 300,
-                background: '#B388FF',                
-                height: 32,
-                color: '#C2FC61',
-                textAlign: 'center',
-                lineHeight: 32,               
-                bottomMargin: 2,
-                x() { return this.getCenterX(); },                
-                html: childrenCount + i
-            })
-        ); 
-    },          
-    width() { return getScreenWidth(); },
-    height() { return getScreenHeight(); },  
-    onResize: [ 'width', 'height' ],
-    onScroll() {
-        this.setTarget('scrollTop', Math.max(0, this.getScrollTop() + getEvents().deltaY()));
-    },
-    onVisibleChildrenChange() { 
-        if (getEvents().dir() !== 'up' && this.visibleChildren.length * 34 < this.getHeight()) {
-            this.activateTarget('children');
-        }
-    }
-}));
-```
+---
 
 ## Simple Single Page App Example
 
-Below is a simple single-page application that demonstrates how to build a fully-featured app using TargetJ. Each page is represented by a textarea. You’ll notice that when you type something, switch to another page, and then return to the same page, your input remains preserved. This also applies to the page's scroll position—when you return, the page will open at the same scroll position where you left it, rather than defaulting to the top.
+Below is a simple single-page application that demonstrates how to build a fully-featured app using TargetJS. Each page is represented by a textarea. You’ll notice that when you type something, switch to another page, and then return to the same page, your input remains preserved. This also applies to the page's scroll position—when you return, the page will open at the same scroll position where you left it, rather than defaulting to the top.
 
 You can now assemble your app by incorporating code segments from the examples on animation, event handling, API integration, and infinite scrolling provided above.
 
 ![Single page app](https://targetj.io/img/singlePage2.gif)
 
 ```bash
-import { App, TModel, getScreenHeight, getScreenWidth, getEvents, getPager } from "targetj";
+import { App, TModel, getScreenHeight, getScreenWidth, getEvents, getPager } from "targetjs";
 
 App(new TModel("simpleApp", {
     width() { return getScreenWidth(); },
@@ -490,17 +552,18 @@ App(new TModel("simpleApp", {
     onResize: ["width", "height"]
 }));
 ```
+---
 
-## Using TargetJ as a library into your page
+## Using TargetJS as a Library Example
 
 Here is an example that creates 1000 rows. The first argument, 'rows,' is used to find an element with the ID 'rows.' If no such element exists, it will be created at the top of the page. The OnDomEvent target activates the targets defined in its value when the DOM is found or created, eliminating the need for conditions to verify the DOM's availability before executing the target. Additionally, the parallel property creates subtasks, which improve browser performance.
 
-The `rectTop`, `absY`, and `onWindowScroll` targets are used to track the visible rows during scrolling. TargetJ automatically divides a long list into a tree structure, efficiently managing only the visible branch. The `onWindowScroll` target updates the `absY` of the table, enabling TargetJ to identify the branch visible to the user. You can opt out of this algorithm by setting the `shouldBeBracketed` target to `false`.
+The `rectTop`, `absY`, and `onWindowScroll` targets are used to track the visible rows during scrolling. TargetJS automatically divides a long list into a tree structure, efficiently managing only the visible branch. The `onWindowScroll` target updates the `absY` of the table, enabling TargetJS to identify the branch visible to the user. You can opt out of this algorithm by setting the `shouldBeBracketed` target to `false`.
 
-![animation api example](https://targetj.io/img/targetjAsLibrary.gif)
+![animation api example](https://targetj.io/img/targetjsAsLibrary.gif)
 
 ```bash
-import { App, TModel, $Dom } from "targetj";
+import { App, TModel, $Dom } from "targetjs";
 
 App(new TModel("rows", {
     isVisible: true,
@@ -530,6 +593,7 @@ App(new TModel("rows", {
     }
 }));
 ```
+---
 
 ## Special target names
 
@@ -552,7 +616,7 @@ In addition to styles and attribute names, we have the following special names:
 8. **children**: Sets the `TModel` children of the object.
 9. **domHolder**: Assigned by the container to hold children or descendants without a `domParent`.
 10. **domParent**: Set by the container or children to control which DOM container they are embedded in.
-11. **isVisible**: An optional boolean to explicitly control the visibility of the object, bypassing TargetJ’s automatic calculation.
+11. **isVisible**: An optional boolean to explicitly control the visibility of the object, bypassing TargetJS’s automatic calculation.
 12. **canHaveDom**: A boolean flag that determines if the object can have a DOM element on the page.
 13. **canHandleEvents**: Specifies which events the object can handle.
 14. **widthFromDom** and **heightFromDom**: Boolean flags to control if the width and height should be derived from the DOM element.
@@ -591,35 +655,45 @@ Here are all the event targets:
 14. **onChildrenChange**: Triggered when the children count changes.
 15. **onVisibleChildrenChange**: Triggered when the count of visible children changes.
 
+---
+
 ## Features
 
 As a result of using targets, we can develop web sites or apps with the following features:
 
 - **No HTML required**: HTML tags are seldom necessary.
 - **No CSS required**: Most popular styles are incorporated directly into targets.
-- **No HTML nesting**: HTML nesting is seldom required in TargetJ. If it is required, nesting is done at runtime. Elements can be dynamically detached and incorporated into other elements, facilitating the easy reuse of components regardless of their location or attachment. It also opens the door for a new user experiences.
+- **No HTML nesting**: HTML nesting is seldom required in TargetJS. If it is required, nesting is done at runtime. Elements can be dynamically detached and incorporated into other elements, facilitating the easy reuse of components regardless of their location or attachment. It also opens the door for a new user experiences.
 - **Next-level animation**: Users can program objects to move at varying speeds, pause at certain intervals, and repeat sequences based on various conditions. It allows the creation of complicated animations.
-- **Control the flow of execution with time**: TargetJ simplifies the execution of various program segments at specific times, making it easy to sequence or parallelize numerous actions.
-- **Handle events effortlessly**: In TargetJ, events are triggered synchronously and are designed so that any component can detect when an event occurs. Event handling can be simply implemented as conditions in the enabling functions of \'targets.\' This ensures that managing events is both simple and effective.
-- **Easy to learn**: TargetJ simplifies development by employing the single concept of \'targets\' making it easy to learn.
-- **Handle 100,000s of items**: TargetJ efficiently manages large collections of objects on a single page. This is done by its data structure and optimization algorithm. It divides a long list into a tree structure, monitoring only the branches that are visible to the user at any given time.
-- **AI friendly**: With a unified concept of targets for all development, the ability to add and remove targets at runtime, and the capability to inspect various statuses of running objects, TargetJ is a strong candidate for AI-powered UI development.
-
-
-## How to debug in TargetJ
-1. TargetJ.tApp.stop(): Stops the application.
-2. TargetJ.tApp.start(): Restarts the application
-3. TargetJ.tApp.throttle: Slows down the application. This represents the pause in milliseconds before starting another TargetJ task cycle. It is zero by default.
-4. TargetJ.tApp.debugLevel: Logs information about the TargetJ task cycle and its efficiency. It is zero by default. Set it to 1 to log the name of the caller of each cycle.
+- **Control the flow of execution with time**: TargetJS simplifies the execution of various program segments at specific times, making it easy to sequence or parallelize numerous actions.
+- **Handle events effortlessly**: In TargetJS, events are triggered synchronously and are designed so that any component can detect when an event occurs. Event handling can be simply implemented as conditions in the enabling functions of \'targets.\' This ensures that managing events is both simple and effective.
+- **Easy to learn**: TargetJS simplifies development by employing the single concept of \'targets\' making it easy to learn.
+- **Handle 100,000s of items**: TargetJS efficiently manages large collections of objects on a single page. This is done by its data structure and optimization algorithm. It divides a long list into a tree structure, monitoring only the branches that are visible to the user at any given time.
+- **AI friendly**: With a unified concept of targets for all development, the ability to add and remove targets at runtime, and the capability to inspect various statuses of running objects, TargetJS is a strong candidate for AI-powered UI development.
+
+---
+
+## How to debug in TargetJS
+1. TargetJS.tApp.stop(): Stops the application.
+2. TargetJS.tApp.start(): Restarts the application
+3. TargetJS.tApp.throttle: Slows down the application. This represents the pause in milliseconds before starting another TargetJS task cycle. It is zero by default.
+4. TargetJS.tApp.debugLevel: Logs information about the TargetJS task cycle and its efficiency. It is zero by default. Set it to 1 to log the name of the caller of each cycle.
 5. Use `t()` to find an object from the browser console using its `oid`.
-6. Inspect all the vital properities using `t(oid).bug()`.
+6. t(oid).bug(): Inspect all the vital properities of an object.
+7. t(oid).logTree(): allows you to inspect the internal children structure including brackets
+
+---
    
 ## Documentation
-Explore the full potential of TargetJ and dive into our interactive documentation at www.targetj.io.
+Explore the full potential of TargetJS and dive into our interactive documentation at www.targetj.io.
+
+---
 
 ## License
 Distributed under the MIT License. See LICENSE for more information.
 
+---
+
 ## Contact
 Ahmad Wasfi - wasfi2@gmail.com
 

package/build/BaseModel.js

@@ -685,15 +685,20 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
   }, {
     key: "deleteTargetValue",
     value: function deleteTargetValue(key) {
+      var targetValue = this.targetValues[key];
       delete this.targetValues[key];
       this.addToActiveTargets(key);
       this.removeFromUpdatingTargets(key);
-      (0, _App.getRunScheduler)().schedule(1, 'deleteTargetValue-' + this.oid + "-" + key);
+      if (targetValue) {
+        (0, _App.getRunScheduler)().schedule(1, 'deleteTargetValue-' + this.oid + "-" + key);
+      }
+      return this;
     }
   }, {
     key: "resetImperative",
     value: function resetImperative(key) {
       var targetValue = this.targetValues[key];
+      var isImperative = targetValue === null || targetValue === void 0 ? void 0 : targetValue.isImperative;
       if (targetValue) {
         targetValue.isImperative = false;
         targetValue.executionFlag = false;
@@ -704,7 +709,9 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         targetValue.cycles = 0;
         targetValue.interval = 0;
       }
-      (0, _App.getRunScheduler)().schedule(1, 'resetImperative-' + this.oid + "-" + key);
+      if (isImperative) {
+        (0, _App.getRunScheduler)().schedule(1, 'resetImperative-' + this.oid + "-" + key);
+      }
       return this;
     }
   }, {

package/build/Bracket.js

@@ -87,6 +87,11 @@ var Bracket = exports.Bracket = /*#__PURE__*/function (_TModel) {
     value: function isVisible() {
       return this.visibilityStatus.top && this.visibilityStatus.bottom;
     }
+  }, {
+    key: "getBracketThreshold",
+    value: function getBracketThreshold() {
+      return this.getRealParent().getBracketSize();
+    }
   }, {
     key: "addToParentVisibleChildren",
     value: function addToParentVisibleChildren() {}

package/build/RunScheduler.js

@@ -207,19 +207,16 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
   }, {
     key: "executeNextRun",
     value: function executeNextRun() {
-      var nextRun = this.nextRuns.length > 0 ? this.nextRuns.shift() : undefined;
-      if (nextRun) {
+      while (this.nextRuns.length > 0) {
+        var nextRun = this.nextRuns.shift();
         var now = _TUtil.TUtil.now();
         var newDelay = nextRun.delay - (now - nextRun.insertTime);
         if (newDelay >= 0 || this.nextRuns.length === 0) {
-          this.setDelayProcess(nextRun.runId, nextRun.insertTime, now + newDelay, newDelay);
-        } else {
-          this.delayProcess = undefined;
-          this.executeNextRun();
+          this.setDelayProcess(nextRun.runId, nextRun.insertTime, now + newDelay, Math.max(newDelay, 0));
+          return;
         }
-      } else {
-        this.delayProcess = undefined;
       }
+      this.delayProcess = undefined;
     }
   }, {
     key: "delayRun",

package/build/TModelUtil.js

@@ -46,7 +46,7 @@ var TModelUtil = exports.TModelUtil = /*#__PURE__*/function () {
         widthFromDom: false,
         heightFromDom: false,
         isIncluded: true,
-        bracketThreshold: 5,
+        bracketThreshold: 10,
         bracketSize: 5,
         keepEventDefault: undefined,
         canDeleteDom: undefined

package/build/TargetUtil.js

@@ -530,18 +530,29 @@ _defineProperty(TargetUtil, "internalEventMap", {
     var lastUpdateHeight = tmodel.getActualValueLastUpdate('height');
     var resizeLastUpdate = (0, _App.getLocationManager)().resizeLastUpdate;
     if (lastUpdateWidth && lastUpdateHeight) {
+      tmodel.setActualValueLastUpdate('width');
+      tmodel.setActualValueLastUpdate('height');
       return resizeLastUpdate > Math.max(lastUpdateWidth, lastUpdateHeight);
     }
     if (lastUpdateWidth) {
+      tmodel.setActualValueLastUpdate('width');
       return resizeLastUpdate > lastUpdateWidth;
     }
     if (lastUpdateHeight) {
+      tmodel.setActualValueLastUpdate('height');
       return resizeLastUpdate > lastUpdateHeight;
     }
     return (0, _App.getLocationManager)().resizeFlag;
   },
   onParentResize: function onParentResize(tmodel) {
-    return tmodel.getParent().getActualValueLastUpdate('width') > tmodel.getActualValueLastUpdate('width') || tmodel.getParent().getActualValueLastUpdate('height') > tmodel.getActualValueLastUpdate('height');
+    if (tmodel.getParent().getActualValueLastUpdate('width') > tmodel.getActualValueLastUpdate('width')) {
+      tmodel.setActualValueLastUpdate('width');
+      return true;
+    }
+    if (tmodel.getParent().getActualValueLastUpdate('height') > tmodel.getActualValueLastUpdate('height')) {
+      tmodel.setActualValueLastUpdate('height');
+      return true;
+    }
   }
 });
 _defineProperty(TargetUtil, "allEventMap", _objectSpread(_objectSpread({}, _TargetUtil.touchEventMap), {}, {

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "targetj",
-  "version": "1.0.131",
+  "version": "1.0.133",
   "keywords": [
-    "targetj"
+    "targetjs"
   ],
   "main": "Export.js",
   "contributors": [
     "ahmad.wasfi"
   ],
-  "description": "TargetJ is a JavaScript framework designed for creating animated and efficient web user interfaces.",
+  "description": "TargetJS is a JavaScript framework designed for creating animated and efficient web user interfaces.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/livetrails/targetj.io.git"
+    "url": "git+https://github.com/livetrails/targetjs.io.git"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/livetrails/targetj.io/issues"
+    "url": "https://github.com/livetrails/targetjs.io/issues"
   },
   "scripts": {
     "prod": "webpack --mode production",