targetj 1.0.73 → 1.0.74

package/README.md

@@ -4,36 +4,44 @@ Welcome to TargetJ, a powerful JavaScript UI framework designed to simplify deve
 
 TargetJ distinguishes itself by introducing a novel concept known as 'targets', which forms its core. 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 enhance both variables and methods by giving them lifecycles and the autonomy to run independently, rather than always being controlled externally. They can execute under specific conditions, manage the number and timing of executions, and provide callbacks to oversee their life cycles.
+### Installation
 
-## What are targets?
+To install TargetJ, run the following command in your terminal:
 
-Targets provide a unified, autonomous approach for managing passive variables and methods, mimicking the behavior of live cells in living beings. They largely manage themselves autonomously, with various callbacks available to adjust for changes.
+```bash
+npm install targetj
+```
 
-For variables, targets enhance functionality by giving them the ability to iterate in steps until they reach the specified value, rather rather than being immediately assigned their values. They can introduce pauses between iterations and offer callbacks to monitor progress, track the progress of other variables, and manage their life cycles accordingly.
+## What are targets?
+
+Targets provide a unified interface for variables and methods, giving them life cycles and the autonomy to operate independently, with various callbacks to adapt to changes, mimicking the behavior of living cells.
 
-Similarly, targets enhance methods by allowing them to manage their own life cycles. They execute under specific conditions, control the number of executions, and offer the same capabilities as those provided to variables.
+For variables, targets enhance functionality by giving them the ability to iterate in steps until they reach the specified value, rather than being immediately assigned their values. They can introduce pauses between iterations and offer callbacks to monitor progress, track the progress of other variables, and manage their life cycles accordingly. Similarly, targets enhance methods by allowing them to manage their own life cycles. They can execute themselves under specific conditions, control the number of executions, and offer the same capabilities as those provided to variables.
 
 ## What does a target consist of?
 
 Each target consists of the following:
-1. Target Value and Actual Value. The target value represents a variable or the outcome of a method. The actual value reflects the transitional value between the previous target value and the current target value. 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 represents a variable or the outcome of 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.
 
-2. State: Targets have three states that control their lifecycle: Active, Updating, and Complete. Active: Indicates that the target value needs to be initialized from the variable or that the method needs to be executed to calculate its output. 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.
+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
 
-All targets are in the active state by default. 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. The target task monitors all active targets, and if a target is enabled, it will be executed. The target value is generated either from the result of a method or from a static value defined in the target. For simple targets without steps, cycles, or loops, the actual value is set immediately based on the target value. Once executed, the target’s state becomes complete, and it will not be executed again.
+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. 
+
+The target task monitors all active targets, and if a target is enabled, it will be executed. The target value is generated either from the result of a method or from a static value defined in the target. For simple targets without steps, cycles, or loops, the actual value is set immediately based on the target value. Once executed, the target’s state becomes complete, and it will not be executed again.
 
 If the target has loop or cycle methods defined, its value method will be re-executed after a pause specified by the interval. The number of executions will be determined by the cycles or will continue as long as the loop condition returns true. If the target has steps defined, its state changes to updating, and the actual value is updated iteratively until it reaches the target value, according to the number of steps and pauses specified by steps and intervals.
 
-A target can reactivate itself under various conditions, such as when all steps are completed, all imperative targets initiated by that target are completed, or the targets of the component’s children are completed. It can also be reactivated externally, either directly or through an event.
+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
 
-1. **Value**
+All methods and properties are optional, but they play integral roles in making targets useful for animation, API loading, event handling, and more:
+
+1. **value**
 If defined, value is the primary target method that will be executed. The target value will be calculated based on the result of value().
 
 2. **onEnabled**
@@ -66,10 +74,20 @@ onImperativeStep() This callback tracks the progress of imperative targets defin
 11. **onImperativeEnd**
 It is similar to onImperativeStep, but it is called when the imperative target is completed.
 
+12. **active**
+This is only property. It indicates that the target is in an inactive state and is ready to be executed.
+
+13. **initialValue**
+This is only property. It defines the initial value of the actual value.
+
+
 ### Simple example
 
 In the example below, we incrementally increase the value of width, height, and opacity in 30 steps, with a 50-milliseconds pause between each step.
 
+![first example](https://targetj.io/img/firstExample.png)
+
+
 ```bash
 import { App, TModel } from 'targetj';
 
@@ -110,166 +128,350 @@ App(new TModel({
 
 Targets in TargetJ can be defined in two ways: declaratively or imperatively.
 
-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 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.
+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.
 
 By combining both declarative and imperative targets, you gain a powerful toolset for designing complex interactions.
 
-## Special target names used by TargetJ
-
-The following are special target names to impact the UI or control properties of TargetJ objects (called TModel):
-
-1. x, y, width, height: Set the location and dimensions of the object.
-2. opacity, scale, rotate: Set the opacity, scale, and rotation of the object.
-3. zIndex: Sets the z-order of the object.
-4. html: Sets the content of the object. By default, it will be interpreted as text.
-5. style: An object that sets the style of the object.
-6. css: A string that sets the CSS of the object.
-7. scrollLeft and scrollTop: Used for scrolling the object.
-8. leftMargin, rightMargin, topMargin, bottomMargin: Set the margins between objects.
-9. children: Sets the TModel children of the object.
-10. domHolder and domParent: Set to control the HTML element containment and how HTML is nested.
-11. isVisible: An optional boolean flag to explicitly control the visibility of the object instead of leaving it to TargetJ to calculate.
-12. canHaveDom: A boolean flag that sets if the object can have a DOM element in the page.
-13. canHandleEvents: Sets what events the object can handle
-14. widthFromDom and heightFromDom: Boolean flags that control if the width and height should be calculated from the DOM element.
-15. textOnly: A boolean flag that sets the type of content to be text or HTML.
-16. canBeBracketed: A boolean flag that controls if the object will be optimized and included in the TargetJ task process only when visible.
-17. isInFlow: A boolean flag that determines if the object will be used to calculate the content height and width of its parent.
-18. onResize: An array of targets that will be reset and re-executed after a resize event.
-19. onClickEvent: An array of targets that will be reset and re-executed after a click event.
-20. onTouchEvent: An array of targets that will be reset and re-executed after a touch event.
-21. onScrollEvent: An array of targets that will be reset and re-executed after a scroll event.
-22. onKeyEvent: An array of targets that will be reset and re-executed after a key event.
-
-## 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 except for images.
-- **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.
-- **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.
-  
-## Getting Started
+## Declarative an imperative example
 
-### Installation
+The following example demonstrates the use of both declarative and imperative approaches. In the animate target, we set two imperative targets to move a square across the screen. When x reaches the end of the screen, onImperativeEnd is triggered, reactivating the target and restarting the animation.
 
-To install TargetJ, run the following command in your terminal:
+![declarative example](https://targetj.io/img/declarative.png)
 
 ```bash
-npm install targetj
+import { App, TModel, getScreenWidth, getScreenHeight } from "targetj";
+
+App(new TModel('declarative', {     
+    add() { 
+        for (var i = 0; i < 10; i++) {
+            this.addChild(new TModel("square", {
+                width: 50,
+                height: 50,
+                background: 'brown',
+                animate: {
+                    value() {
+                        var width = this.getWidth();
+                        var parentWidth = this.getParentValue('width');
+                        this.setTarget('x', { list: [ -width, parentWidth + width ] }, Math.floor(30 + parentWidth * Math.random()));
+                        this.setTarget('y',  Math.floor(Math.random() * (this.getParentValue('height') - this.getHeight())), 30);
+                    },
+                    onImperativeEnd(key) {
+                        if (key === 'x') {
+                            this.activateTarget(this.key);
+                        }
+                    }
+                }
+            }));
+        }
+    },
+    width() { return getScreenWidth(); },
+    height() { return getScreenHeight(); }         
+}));
 ```
 
-## Examples
+## Loading data example
 
-### Hello World example
+Calling backend APIs is simplified through the use of targets in TargetJ. It includes a loader that streamlines API integration.
 
-```bash
-import { App, TModel } from 'targetj';
+In the example below, we define a target named 'load' that attempts to fetch a random user. Within the value() function, we initialize the API call. The first parameter specifies an ID that identifies the API call, which can also be used to access cached data.
 
-App(new TModel({ html: 'Hello World'}));
-```
+The target will remain active using the loop function, with value() continuing to return undefined while polling the system every 20ms (as specified in the interval property) until the loader retrieves the API result. When the API result arrives, it triggers onValueChange, which creates a user object based on the retrieved data. Additionally, we define two targets to handle scenarios for both fast and slow connections. The slow target is enabled if polling exceeds 100 times, while the fast target is enabled if the API result is retrieved in less than 600ms. If you restart the example, the result will be fetched from the cache instead of the API.
+
+![api loading example](https://targetj.io/img/apiLoading.png)
 
-### Simple animation example
 ```bash
-import { App, TModel } from 'targetj';
+import { App, TModel, getLoader, browser } from "targetj";
 
-App(new TModel({
-    style: { backgroundColor: '#f00' },
-    width: {
-        value: 250,        
-        steps: 30,
-        stepInterval: 50
+App(
+  new TModel("apiCall", {
+    load: {
+      loop() { return !this.val(this.key); },
+      interval: 20,
+      value: function () {
+        var fetchId = "user";
+        getLoader().initSingleLoad(fetchId, { url: "https://targetj.io/api/randomUser", data: { id: fetchId } });
+        return getLoader().fetchResult(fetchId);
+      },
+      onValueChange(newValue) {
+        var user = newValue.result;
+        this.addChild(new TModel("userApi", {
+            width: 60,
+            height: 30,
+            html: user.name,
+            background: "#f00",
+        }));
+      },
     },
-    height: {
-        value: 250,        
-        steps: 30,
-        stepInterval: 50
+    slowLoad: {
+      value() {
+        console.log("Connection issue: please try again later.");
+      },
+      enabledOn() {
+        return this.getTargetExecutionCount("load") > 100;
+      }
     },
-    opacity: {
-        value: 0.15,        
-        steps: 30,
-        stepInterval: 50
+    fastLoad: {
+      value() {
+        //Loading is fast: We can load additional details about the user.
+        console.log(`Loading time was only ${this.val("load").loadingTime}ms`);
+        console.log(`Load target execution time was ${browser.now() - this.getTargetCreationTime("load")}ms`);
+        console.log(`Load target was executed ${this.getTargetExecutionCount("load")} times`);
+      },
+      enabledOn() {
+        return this.val("load") && this.val("load").loadingTime < 600;
+      }
     }
- }));
+  })
+);
 ```
 
-It can also be written in a more compact form using arrays:
+## Event handling example
+
+In the following example, the background color of the pane changes randomly whenever you click on it. The `canHandleEvents` target ensures that the object can handle touch events, such as clicks. However, we’ve set a limit of 10 executions for the background change. After reaching this limit, the component will no longer respond to click events. The `onClickEvent` is a system target that activates all associated targets when a click occurs. The `html` target tracks the number of executions and displays it within the pane.
+
+![event handling example](https://targetj.io/img/eventHandling2.png)
 
 ```bash
-import { App, TModel } from 'targetj';
+import { App, TModel } from "targetj";
 
-App(new TModel({
-    style: { backgroundColor: '#f00' },
-    width: [ 250, 30, 50],
-    height: [ 250, 30, 50],
-    opacity: [ 0.15, 30, 50]
- }));
+App(
+  new TModel("events", {
+    canHandleEvents() {
+      return this.getTargetExecutionCount("background") < 10 ? "touch" : "";
+    },
+    width: 120,
+    height: 120,
+    background: {
+      active: false,
+      initialValue: "#f00",
+      value() {
+        return "#" + Math.random().toString(16).slice(-6);
+      },
+    },
+    html() {
+      return this.getTargetExecutionCount("background");
+    },
+    onClickEvent: ["background", "canHandleEvents", "html"],
+  })
+);
 ```
 
-### More complicated example
+## Animation API example
+
+TargetJ offers efficient and easy-to-control UI animation and manipulation through special targets such as x, y, width, height, scale, rotate, and opacity, which directly impact the UI. A complete list of these targets can be found in the "Special target names" section. For very intensive UI animations, you can leverage the Animation API. An example is provided below.
 
-You can find a running example, which also demonstrates how the code operates, at https://targetj.io/docs/declarative.html
+![animation api example](https://targetj.io/img/animationApi.png)
 
 ```bash
-import { App, TModel, getScreenWidth, getScreenHeight } from "targetj";
+import { App, TModel } from "targetj";
 
 App(
-  new TModel({
-    add() {
-      for (var i = 0; i < 10; i++) {
-        this.addChild(
-          new TModel("square", {
-            width: 50,
-            height: 50,
-            style: { backgroundColor: "#f00" },
-            rotate: {
-              cycles: 1000,
-              steps: 15,
-              stepInterval: 50,
-              value(key, cycle) {
-                return [360, 0][cycle % 2];
-              },
-            },
-          })
-        );
-      }
-    },
+  new TModel("TargetJ vs Animation Api", {
+    x: 0,
+    y: 0,
+    width: 150,
+    height: 150,
     animate: {
-      loop: true,
-      stepInterval: 1600,
       value() {
-        this.getChildren().forEach((child) => {
-          child.setTargetValue("x", -child.getWidth());
-          child.setTargetValue("x", getScreenWidth() + child.getWidth(), 30, 50);
-          child.setTargetValue("y", Math.random() * getScreenHeight(), 30, 50);
+        const keyframes = [
+          {
+            transform: "translate(0, 0) rotate(0deg) scale(1)",
+            width: "80px",
+            height: "80px",
+            background: "orange",
+          },
+          {
+            transform: "translate(50px, 100px) rotate(180deg) scale(1.5)",
+            width: "120px",
+            height: "120px",
+            background: "brown",
+          },
+          {
+            transform: "translate(200px, 0) rotate(360deg) scale(1)",
+            width: "100px",
+            height: "100px",
+            background: "crimson",
+          },
+          {
+            transform: "translate(0, 0) rotate(360deg) scale(1)",
+            width: "150px",
+            height: "150px",
+            background: "purple",
+          },
+        ];
+
+        return this.$dom.animate(keyframes, {
+          duration: 5000,
+          iterations: 1,
+          easing: "ease-in-out",
         });
       },
       enabledOn() {
-        return this.isTargetComplete("add");
+        return this.hasDom();
       },
     },
-    width() {
-      return getScreenWidth();
+    trackProgress: {
+      loop: true,
+      interval: 100,
+      value() {
+        const currentTime = this.val("animate").currentTime;
+        this.setTarget("html", (currentTime / 5000).toFixed(1));
+        return currentTime < 5000 ? false : true;
+      },
+      onValueChange(newValue) {
+        if (newValue) {
+          this.activateTarget("animate");
+        }
+      },
+      enabledOn() {
+        return this.isTargetComplete("animate");
+      },
+    },
+  })
+);
+```
+
+## Simple Single Page App Example
+
+Below is a simple single-page app that demonstrates how to develop a full application using TargetJ.
+
+![Single page app](https://targetj.io/img/singlePageApp2.png)
+
+```bash
+import { App, TModel, getScreenHeight, getScreenWidth, getEvents, getPager } from "targetj";
+
+App(
+  new TModel("app", {
+    start() {
+      const urlParts = window.location.href.split("/");
+      this.pageName = urlParts[urlParts.length - 1];
     },
-    height() {
-      return getScreenHeight();
+    canHandleEvents: "touch",
+    width: () => getScreenWidth(),
+    height: () => getScreenHeight(),
+    children() {
+      switch (this.pageName) {
+        case "page1":
+          return [Toolbar(), Page1()];
+        case "page2":
+          return [Toolbar(), Page2()];
+        default:
+          return [Toolbar(), HomePage()];
+      }
     },
+    onResize: ["width", "height"]
   })
 );
+
+const Toolbar = () =>
+  new TModel("toolbar", {
+    start() {
+      ["home", "page1", "page2"].forEach((menu) => {
+        this.addChild(
+          new TModel("toolItem", {
+            canHandleEvents: "touch",
+            background: "bisque",
+            width: 100,
+            height: 50,
+            lineHeight: 50,
+            outerXEast: 0,
+            opacity: {
+              loop() { return this.getOpacity() === 1; },
+              value () { return getEvents().isTouchHandler(this) ? [1, 20] : [0.5, 20]; }
+            },
+            activePage: {
+              active: false,
+              value: () => getPager().openLink(menu),
+            },
+            onTouchEvent: ["opacity"],
+            onClickEvent: ["activePage"],
+            html: menu
+          })
+        );
+      });
+    },
+    height: 50,
+    width: () => getScreenWidth(),
+    onResize: ["width"],
+  });
+
+const HomePage = () =>
+  new TModel("homePage", {
+    background: "yellow",
+    width: () => getScreenWidth(),
+    height: () => getScreenHeight(),
+    html: "home page",
+    onResize: ["width", "height"]
+  });
+
+const Page1 = () =>
+  new TModel("page1", {
+    background: "blue",
+    width: () => getScreenWidth(),
+    height: () => getScreenHeight(),
+    html: "page 1",
+    onResize: ["width", "height"]
+  });
+
+const Page2 = () =>
+  new TModel("page2", {
+    background: "green",
+    width: () => getScreenWidth(),
+    height: () => getScreenHeight(),
+    html: "page 2",
+    onResize: ["width", "height"]
+  });
 ```
 
+## Special target names
+
+The following are special target names to impact the UI or control properties of TargetJ objects (called TModel):
+
+1. x, y, width, height: Set the location and dimensions of the object.
+2. opacity, scale, rotate: Set the opacity, scale, and rotation of the object.
+3. zIndex: Sets the z-order of the object.
+4. html: Sets the content of the object. By default, it will be interpreted as text.
+5. style: An object that sets the style of the object.
+6. css: A string that sets the CSS of the object.
+7. scrollLeft and scrollTop: Used for scrolling the object.
+8. leftMargin, rightMargin, topMargin, bottomMargin: Set the margins between objects.
+9. children: Sets the TModel children of the object.
+10. domHolder and domParent: Set to control the HTML element containment and how HTML is nested.
+11. isVisible: An optional boolean flag to explicitly control the visibility of the object instead of leaving it to TargetJ to calculate.
+12. canHaveDom: A boolean flag that sets if the object can have a DOM element in the page.
+13. canHandleEvents: Sets what events the object can handle
+14. widthFromDom and heightFromDom: Boolean flags that control if the width and height should be calculated from the DOM element.
+15. textOnly: A boolean flag that sets the type of content to be text or HTML.
+16. canBeBracketed: A boolean flag that controls if the object will be optimized and included in the TargetJ task process only when visible.
+17. isInFlow: A boolean flag that determines if the object will be used to calculate the content height and width of its parent.
+18. onResize: An array of targets that will be activated and executed after a resize event.
+19. onClickEvent: An array of targets that will be activated and executed after a click event.
+20. onTouchEvent: An array of targets that will be activated and executed after a touch event.
+21. onScrollEvent: An array of targets that will be activated and executed after a scroll event.
+22. onKeyEvent: An array of targets that will be activated and executed after a key event.
+22. onInvisibleEvent: An array of targets that will be activated and executed after the component becomes invisisble.
+
+## 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 except for images.
+- **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.
+- **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 basic information and 2 to log more detailed information.
-5. Use `t()` to find an object from the browser console using its `oid`: Inspect its targetValues to display the status of its targets.
-
+5. Use `t()` to find an object from the browser console using its `oid`. Inspect all the vital properities using `t(oid).bug`.
+   
 ## Documentation
 Explore the full potential of TargetJ and dive into our interactive documentation at www.targetj.io.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "targetj",
-  "version": "1.0.73",
+  "version": "1.0.74",
   "keywords": [
     "targetj"
   ],
@@ -24,6 +24,7 @@
   "devDependencies": {
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "wepback": "^1.0.0"
+    "wepback": "^1.0.0",
+    "eslint-webpack-plugin": "^4.2.0"
   }
 }

package/src/$Dom.js

@@ -41,7 +41,9 @@ $Dom.prototype.focus = function() {
 };
 
 $Dom.prototype.attr = function(name, value) {
-    if (!this.element) return;
+    if (!this.element) {
+        return;
+    }
     
     if (TUtil.isDefined(value)) {
         this.element.setAttribute(name, value);
@@ -51,8 +53,10 @@ $Dom.prototype.attr = function(name, value) {
 };
 
 $Dom.prototype.value = function(value) {
-    if (!this.element) return;
-    
+    if (!this.element) {
+        return;
+    }
+
     if (TUtil.isDefined(value)) {
         this.element.value = value;
     } else {
@@ -61,8 +65,9 @@ $Dom.prototype.value = function(value) {
 };
 
 $Dom.prototype.select = function() {
-    if (!this.element || typeof this.element.select !== 'function') return;
-    
+    if (!this.element || typeof this.element.select !== 'function') {
+        return;
+    }
     
     this.element.select();
 };
@@ -138,7 +143,9 @@ $Dom.prototype.parent = function() {
 
 $Dom.prototype.detach = function() {
     $Dom.detach(this.element);
-    if (this.$domParent && this.$domParent.childrenCount > 0) this.$domParent.childrenCount--;
+    if (this.$domParent && this.$domParent.childrenCount > 0) {
+        this.$domParent.childrenCount--;
+    }
 };
 
 $Dom.prototype.append$Dom = function($dom) {

package/src/Bracket.js

@@ -1,7 +1,6 @@
 import { TModel } from "./TModel.js";
 import { TUtil } from "./TUtil.js";
 import { tapp } from "./App.js";
-import { browser } from "./Browser.js";
 
 function Bracket(parent) {
 

package/src/Browser.js

@@ -2,29 +2,12 @@ var browser = {
     style: undefined,
     delayProcess: {},
     setup: function () {
-
-        if (typeof String.prototype.trim !== 'function') {
-            String.prototype.trim = function () {
-                return this.replace(/^\s+|\s+$/g, '');
-            };
-        }     
-        if (typeof String.prototype.startsWith !== 'function') {
-            String.prototype.startsWith = function (str) {
-                return this.indexOf(str) === 0;
-            };
-        }
-
-        if (typeof String.prototype.endsWith !== 'function') {
-            String.prototype.endsWith = function (suffix) {
-                return this.indexOf(suffix, this.length - suffix.length) !== -1;
-            };
-        }
-
         if (typeof String.prototype.hashCode !== 'function') {
             String.prototype.hashCode = function () {
                 var hash = 0, i, chr, len;
-                if (this.length === 0)
+                if (this.length === 0) {
                     return hash;
+                }
                 for (i = 0, len = this.length; i < len; i++) {
                     chr = this.charCodeAt(i);
                     hash = ((hash << 5) - hash) + chr;
@@ -39,69 +22,21 @@ var browser = {
                 return this.map(function(o) { return o.oid; }).join(separator || " ");
             };
         }
-        
-        if (!Array.spaces)  {
-            Array.spaces = function(count)   {
-                return Array(count).join(' ');
-            };
-        }
-        
-        
-
-        if (!Array.prototype.find) {
-          Object.defineProperty(Array.prototype, 'find', {
-            value: function(predicate) {
-              if (this === null) {
-                throw new TypeError('"this" is null or not defined');
-              }
-
-              var o = Object(this);
-
-              var len = o.length >>> 0;
-
-              if (typeof predicate !== 'function') {
-                throw new TypeError('predicate must be a function');
-              }
-
-              var thisArg = arguments[1];
-
-              var k = 0;
-
-              while (k < len) {
-                var kValue = o[k];
-                if (predicate.call(thisArg, kValue, k, o)) {
-                  return kValue;
-                }
-                k++;
-              }
-
-              return undefined;
-            },
-            configurable: true,
-            writable: true
-          });
-        }
-
 
         if (!document.getElementsByClassName) {
-            var indexOf = [].indexOf || function (prop) {
-                for (var i = 0; i < this.length; i++) {
-                    if (this[i] === prop)
-                        return i;
-                }
-                return -1;
-            };
             var getElementsByClassName = function (className, context) {
-                var elems = document.querySelectorAll ? context.querySelectorAll("." + className) : (function () {
-                    var all = context.getElementsByTagName("*"),
-                            elements = [],
-                            i = 0;
-                    for (; i < all.length; i++) {
-                        if (all[i].className && (" " + all[i].className + " ").indexOf(" " + className + " ") > -1 && indexOf.call(elements, all[i]) === -1)
-                            elements.push(all[i]);
+                var elems;
+                if (document.querySelectorAll) {
+                   elems = context.querySelectorAll("." + className);
+                } else {
+                    var all = context.getElementsByTagName("*");
+                    elems = [];
+                    for (var i = 0; i < all.length; i++) {
+                        if (all[i].className && (" " + all[i].className + " ").indexOf(" " + className + " ") > -1 && elems.indexOf(all[i]) === -1) {
+                            elems.push(all[i]);
+                        }
                     }
-                    return elements;
-                })();
+                }
                 return elems;
             };
             document.getElementsByClassName = function (className) {
@@ -112,39 +47,11 @@ var browser = {
             };
         }
 
-        var lastTime = 0;
-        var vendors = ['ms', 'moz', 'webkit', 'o'];
-        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
-            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
-                    window[vendors[x] + 'CancelRequestAnimationFrame'];
-        }
-
-        if (!window.requestAnimationFrame) {
-            window.requestAnimationFrame = function (callback, element) {
-                var currTime = new Date().getTime();
-                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-                var id = window.setTimeout(function () {
-                    callback(currTime + timeToCall);
-                },
-                        timeToCall);
-                lastTime = currTime + timeToCall;
-                return id;
-            };
-        }
-
-        if (!window.cancelAnimationFrame) {
-            window.cancelAnimationFrame = function (id) {
-                clearTimeout(id);
-            };
-        }
-
         this.style = {
             transform: this.prefixStyle('transform'),
             transitionTimingFunction: this.prefixStyle('transitionTimingFunction'),
             transitionDuration: this.prefixStyle('transitionDuration')
         };
-        
     },
     log: function(condition) {
         if (condition === true) {
@@ -156,9 +63,7 @@ var browser = {
     prefixStyle: function (style) {
         var elementStyle = document.createElement('div').style;
         
-        var vendor = '';
-        
-        var vendors = ['webkitT', 'MozT', 'msT', 'OT', 't'];
+        var vendor = '', vendors = ['webkitT', 'MozT', 'msT', 'OT', 't'];
 
         for (var i = 0; i < vendors.length; i++) {
             var transform = vendors[i] + 'ransform';
@@ -171,12 +76,6 @@ var browser = {
         
         return style;
     },
-    getParameterByName: function (name) {
-        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
-        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
-                results = regex.exec(location.search);
-        return results === null ? 0 : decodeURIComponent(results[1].replace(/\+/g, " "));
-    },
     now: Date.now || function () {
         return new Date().getTime();
     },

package/src/ColorUtil.js

@@ -148,7 +148,9 @@ ColorUtil.color2Integers = function(color) {
     color = color ? color + '' : '';
     color = ColorUtil.colors[color.toLowerCase()] ? ColorUtil.colors[color.toLowerCase()] : color;
         
-    if (!color) return;
+    if (!color) {
+        return;
+    }
     
     if (color.startsWith('#')) {
         color = color.slice(1);

package/src/EventListener.js

@@ -120,7 +120,9 @@ EventListener.prototype.captureEvents = function() {
 };
     
 EventListener.prototype.handleEvent = function (event) {
-    if (!event) return;
+    if (!event) {
+        return;
+    }
     
     var eventName, inputType, eventType, eventOrder;
     
@@ -167,7 +169,9 @@ EventListener.prototype.handleEvent = function (event) {
             this.clearTouch(); 
             
             this.touchCount = this.countTouches(event);
-            if (this.preventDefault(tmodel, eventName)) event.preventDefault();
+            if (this.preventDefault(tmodel, eventName)) {
+                event.preventDefault();
+            }
             
             this.start0 = this.getTouch(event);
             this.start1 = this.getTouch(event, 1);
@@ -184,7 +188,9 @@ EventListener.prototype.handleEvent = function (event) {
             var touch = this.getTouch(event);
             this.cursor.x = touch.x;
             this.cursor.y = touch.y;
-            if (this.preventDefault(tmodel, eventName)) event.preventDefault();
+            if (this.preventDefault(tmodel, eventName)) {
+                event.preventDefault();
+            }
             if (this.touchCount > 0) {                
                 this.move(event);
                 event.stopPropagation();
@@ -194,7 +200,9 @@ EventListener.prototype.handleEvent = function (event) {
         case 'mouseup':
         case 'touchend':
                         
-            if (this.preventDefault(tmodel, eventName)) event.preventDefault();
+            if (this.preventDefault(tmodel, eventName)) {
+                event.preventDefault();
+            }
             this.end(event);
                         
             if (this.start0) {
@@ -219,7 +227,9 @@ EventListener.prototype.handleEvent = function (event) {
 
         case 'wheel':
             
-            if (this.preventDefault(tmodel, eventName)) event.preventDefault();   
+            if (this.preventDefault(tmodel, eventName)) {
+                event.preventDefault();
+            }   
             this.wheel(event);
             break;
 

package/src/LoadingManager.js

@@ -20,7 +20,9 @@ function LoadingManager() {
 
 LoadingManager.prototype.initSingleLoad = function (fetchId, query, forceLoad)  {
     
-    if (this.isLoading(fetchId) || (this.isLoaded(fetchId) && !forceLoad) || this.getLoadingAttempts(fetchId) > this.stopLoadingAfterAttempts) return;
+    if (this.isLoading(fetchId) || (this.isLoaded(fetchId) && !forceLoad) || this.getLoadingAttempts(fetchId) > this.stopLoadingAfterAttempts) {
+        return;
+    }
 
     this.initLoadingMap(fetchId);
      
@@ -31,7 +33,9 @@ LoadingManager.prototype.initSingleLoad = function (fetchId, query, forceLoad)
 LoadingManager.prototype.initGroupLoad = function (fetchId, dataId, query, idKey, separator)  {
     var groupId = JSON.stringify({ query: query, idKey: idKey, separator: separator });
                
-    if (this.isLoading(fetchId) || this.isLoaded(fetchId) || this.getLoadingAttempts(fetchId) > this.stopLoadingAfterAttempts) return;
+    if (this.isLoading(fetchId) || this.isLoaded(fetchId) || this.getLoadingAttempts(fetchId) > this.stopLoadingAfterAttempts) {
+        return;
+    }
     
     this.initLoadingMap(fetchId);
         
@@ -45,7 +49,9 @@ LoadingManager.prototype.initGroupLoad = function (fetchId, dataId, query, idKey
 
 LoadingManager.prototype.initImgLoad = function (fetchId, src) {
     
-    if (this.isLoading(fetchId) || this.isLoaded(fetchId) || this.getLoadingAttempts(fetchId) > this.stopLoadingAfterAttempts) return;
+    if (this.isLoading(fetchId) || this.isLoaded(fetchId) || this.getLoadingAttempts(fetchId) > this.stopLoadingAfterAttempts) {
+        return;
+    }
     
     this.initLoadingMap(fetchId, 'image');
     
@@ -110,7 +116,9 @@ LoadingManager.prototype.initLoadingMap = function(fetchId, category) {
 };
 
 LoadingManager.prototype.groupLoad = function () {
-    if (!this.groupLoadList) return;
+    if (!this.groupLoadList) {
+        return;
+    }
     
     var groupIds = Object.keys(this.groupLoadList);
     
@@ -140,7 +148,9 @@ LoadingManager.prototype.groupLoad = function () {
 };
 
 LoadingManager.prototype.singleLoad = function () {
-    if (!this.singleLoadList) return;
+    if (!this.singleLoadList) {
+        return;
+    }
     
     var keys = Object.keys(this.singleLoadList);
         
@@ -154,7 +164,9 @@ LoadingManager.prototype.singleLoad = function () {
 };
 
 LoadingManager.prototype.imgLoad = function () {  
-    if (!this.imgLoadList) return;
+    if (!this.imgLoadList) {
+        return;
+    }
 
     var keys = Object.keys(this.imgLoadList);
         

package/src/LocationManager.js

@@ -63,7 +63,9 @@ LocationManager.prototype.calculateContainer = function(container) {
     while (i < length && tapp.isRunning()) {
         
         var child = allChildren[i++];
-        if (!child) continue;
+        if (!child) {
+            continue;
+        }
                       
         var outerXEast = undefined, innerXEast = undefined;
         
@@ -137,7 +139,9 @@ LocationManager.prototype.calculateContainer = function(container) {
             child.val('contentHeight').forEach(function(key) {
                 var preVal = child.val(key);
                 child.val(key, child.getContentHeight());
-                if (preVal !== child.val(key)) child.addToStyleTargetList(key);
+                if (preVal !== child.val(key)) {
+                    child.addToStyleTargetList(key);
+                }
             });
         }
 
@@ -145,7 +149,9 @@ LocationManager.prototype.calculateContainer = function(container) {
             child.val('contentWidth').forEach(function(key) {
                 var preVal = child.val(key);                
                 child.val(key, child.getContentWidth());
-                if (preVal !== child.val(key)) child.addToStyleTargetList(key);                
+                if (preVal !== child.val(key)) {
+                    child.addToStyleTargetList(key);
+                }                
             });
         }
         

package/src/Moves.js

@@ -1,4 +1,3 @@
-import { Easing } from "./Easing.js";
 import {  getScreenWidth } from "./App.js";
 
 function Moves() {}

package/src/PageManager.js

@@ -1,4 +1,3 @@
-import { $Dom } from "./$Dom.js";
 import { TUtil } from "./TUtil.js";
 import { tapp } from "./App.js";
 

package/src/SearchUtil.js

@@ -92,7 +92,9 @@ SearchUtil.findByType = function (type) {
     
     function search(container) {
         
-        if (container.type === type) return container;
+        if (container.type === type) {
+            return container;
+        }
         
         var children = container.getChildren();
         var found;
@@ -101,7 +103,9 @@ SearchUtil.findByType = function (type) {
 
             tmodel = children[i];
             
-            if (!tmodel) continue;
+            if (!tmodel) {
+                continue;
+            }
 
             if (tmodel.hasChildren()) {
                 found = search(tmodel);
@@ -128,7 +132,9 @@ SearchUtil.findByTarget = function (target) {
     
     function search(container) {
 
-        if (container.targets[target]) return container;
+        if (container.targets[target]) {
+            return container;
+        }
         
         var children = container.getChildren();
         var found;
@@ -137,7 +143,9 @@ SearchUtil.findByTarget = function (target) {
 
             tmodel = children[i];
 
-            if (!tmodel) continue;
+            if (!tmodel) {
+                continue;
+            }
 
             if (tmodel.hasChildren()) {
                 found = search(tmodel);
@@ -164,7 +172,9 @@ SearchUtil.find = function (oid) {
     
     function search(container) {
         
-        if (container.oid === oid) return container;
+        if (container.oid === oid) {
+            return container;
+        }
         
         var children = container.getChildren();
         var found;
@@ -173,7 +183,9 @@ SearchUtil.find = function (oid) {
             
             tmodel = children[i];
 
-            if (!tmodel) continue;
+            if (!tmodel) {
+                continue;
+            }
 
             if (tmodel.hasChildren()) {
                 found = search(tmodel);

package/src/TModel.js

@@ -5,8 +5,6 @@ import { TUtil } from "./TUtil.js";
 import { TargetUtil } from "./TargetUtil.js";
 import { TargetExecutor } from "./TargetExecutor";
 import { Viewport } from "./Viewport.js";
-import { Easing } from "./Easing.js";
-import { $Dom } from "./$Dom.js";
 
 function TModel(type, targets) {
       
@@ -119,7 +117,9 @@ TModel.prototype.getDomHolder = function() {
 };
 
 TModel.prototype.addToStyleTargetList = function(key) {
-    if (!TargetUtil.styleTargetMap[key]) return;
+    if (!TargetUtil.styleTargetMap[key]) {
+        return;
+    }
     
     key = TargetUtil.transformMap[key] ? 'transform' : TargetUtil.dimMap[key] ? 'dim' : key;
     
@@ -541,7 +541,9 @@ TModel.prototype.resetTargetInitialValue = function(key)   {
 TModel.prototype.updateTargetStatus = function(key) {
     var targetValue = this.targetValues[key];
     
-    if (!targetValue) return;
+    if (!targetValue) {
+        return;
+    }
     
     var cycle = this.getTargetCycle(key);
     var cycles = this.getTargetCycles(key);

package/src/TModelManager.js

@@ -67,8 +67,7 @@ TModelManager.prototype.clear = function() {
     this.targetMethodMap = {};      
 };
 
-TModelManager.prototype.visibles = function(type, list) {
-    list = !list ? this.lists.visible : list;
+TModelManager.prototype.visibles = function(type) {
     return this.lists.visible.filter(function(tmodel) { return tmodel.type === type || !type ; }).map(function(tmodel) { return tmodel.oid; });
 };
   

package/src/TUtil.js

@@ -132,7 +132,9 @@ TUtil.limit = function (num, low, high) {
 };
 
 TUtil.formatNum = function (num, precision) {
-    if (!num) return 0;
+    if (!num) {
+        return 0;
+    }
     var s = num.toString();
     var n = parseFloat(s);
     return n.toFixed(precision);
@@ -143,7 +145,9 @@ TUtil.distance = function(x1, y1, x2, y2) {
 };
 
 TUtil.getFullLink = function(link) {
-    if (!TUtil.isDefined(link)) return;
+    if (!TUtil.isDefined(link)) {
+        return;
+    }
     
     if (link.indexOf('http') === 0) {
         return link;

package/src/TargetExecutor.js

@@ -1,7 +1,6 @@
 import { TargetUtil } from "./TargetUtil.js";
 import { TUtil } from "./TUtil.js";
 import { Easing } from "./Easing.js";
-import { browser } from "./Browser.js";
 
 function TargetExecutor() {}
 

package/src/TargetManager.js

@@ -1,4 +1,3 @@
-import { browser } from "./Browser.js";
 import { TUtil } from "./TUtil.js";
 import { TargetUtil } from "./TargetUtil.js";
 import { TargetExecutor } from "./TargetExecutor";
@@ -80,7 +79,9 @@ TargetManager.prototype.setActualValues = function(tmodel) {
 TargetManager.prototype.setActualValue = function(tmodel, key) {
     var targetValue = tmodel.targetValues[key];
 
-    if (!targetValue) return;
+    if (!targetValue) {
+        return;
+    }
     
     if (!tmodel.isTargetEnabled(key)) {
         tapp.manager.scheduleRun(10, "setActualValue-disabled-" + tmodel.oid + "__" + key);

package/src/TargetUtil.js

@@ -3,7 +3,6 @@ import { TModel } from "./TModel.js";
 import { getManager } from "./App.js";
 import { TUtil } from "./TUtil.js";
 import { ColorUtil } from "./ColorUtil.js";
-import { Easing } from "./Easing.js";
 
 function TargetUtil() {}
 
@@ -228,7 +227,7 @@ TargetUtil.handleValueChange = function(tmodel, key, newValue, lastValue, step,
     }    
 };
 
-TargetUtil.morph = function(tmodel, key, fromValue, toValue, step, steps)  {
+TargetUtil.morph = function(tmodel, key, fromValue, toValue, step)  {
     
     var easing = tmodel.getTargetEasing(key);
     var easingStep = easing ? easing(tmodel.getTargetStepPercent(key, step)) : tmodel.getTargetStepPercent(key, step); 

package/src/Viewport.js

@@ -1,6 +1,4 @@
-import { browser } from "./Browser.js";
 import { TUtil } from "./TUtil.js";
-import { tapp } from "./App.js";
 import { getScreenWidth, getScreenHeight } from "./App.js";
 
 function Viewport(tmodel) {

package/webpack.config.js

@@ -1,13 +1,43 @@
- const path = require('path');
+const path = require('path');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
-  entry: './Exports.js',
-  output: {
-    library: {
-      name: 'TargetJ',
-      type: 'window'
+    entry: './Exports.js',
+    output: {
+        library: {
+            name: 'TargetJ',
+            type: 'window'
+        },
+        path: path.resolve(__dirname, './dist'),
+        filename: 'targetj.js'
     },
-    path: path.resolve(__dirname, './dist'),
-    filename: 'targetj.js'
-  }
-};
+    plugins: [
+        new ESLintPlugin({
+            extensions: ['js'],
+            exclude: 'node_modules',
+            overrideConfig: {
+                env: {
+                    browser: true,
+                    es2021: true
+                },
+                extends: [
+                    'eslint:recommended'
+                ],
+                parserOptions: {
+                    ecmaVersion: 12,
+                    sourceType: 'module'
+                },
+                rules: {
+                    'curly': 'error',
+                    'eqeqeq': 'error',
+                    'dot-notation': 'off',
+                    'no-console': 'warn',
+                    'no-loop-func': 'off'
+                }
+            }
+        })
+    ],
+    resolve: {
+        extensions: ['.js']
+    }
+};