targetj 1.0.139 → 1.0.141

package/README.md

@@ -2,32 +2,44 @@
 
 Welcome to TargetJS, a powerful JavaScript UI framework and library that you might find redefines front-end development. (https://targetjs.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. 
+**TargetJS** distinguishes itself by introducing a novel concept known as **"targets,"** which form its core. Targets provide methods and variable assignments with life cycles, allowing them to operate independently and autonomously. They include various callbacks to adapt to changes, mimicking the behavior of living cells.  
 
-We believe TargetJS not only increases productivity but also enhances the development process by making it more enjoyable and user-experience-centered.
+Additionally, **TargetJS** executes targets in the exact order they appear in the code. Each target can process new data based on the outcome of the previous one, creating a structured flow. Each target can also conditionally opt out of execution or re-execute a number of times when specific conditions are met.
+
+Targets cannot be called directly; instead, they are **activated** and then executed sequentially in the order of their activation. This approach ensures **predictable execution** and a consistent flow.  
+
+## TargetJ: A Unique Computational Paradigm
+
+TargetJ introduces a unique paradigm by blending multiple computational models:
+
+- **Turing Completeness**: targets can execute continuously, modify values dynamically, and conditionally skip execution.
+- **Von Neumann Execution Model**: Targets are executed in the order they appear in the code or based on their activation order.
+- **Functional Programming**: Targets can be composed to transform data in a pipeline-like manner, similar to functional programming constructs.
+
+We believe TargetJS' new programming paradigm will enhance productivity and make the coding experience more enjoyable and user-centric.
 
 ---
 
 ## Table of Contents
 
 1. [Installation](#installation)
-2. [What are Targets?](#what-are-targets)
-3. Two Quick Examples:
+2. [Comparison with Other UI Frameworks](#Comparison-with-other-ui-frameworks)
+3. [What are Targets?](#what-are-targets)
+4. Two 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:
+5. [Why TargetJS?](#why-targetjs)
+6. [Integration with Existing Pages](#integration-with-existing-pages)
+7. [Anatomy of a Target](#anatomy-of-a-target)
+8. [How TargetJS Operates](#how-targetjs-operates)
+9. [Target Methods](#target-methods)
+10. 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. [Features](#features)     
+   - [Using TargetJS as a Library Example](#using-targetjs-as-a-library-example) 
 11. [Special Target Names](#special-target-names)
 12. [How to Debug in TargetJS](#how-to-debug-in-targetjs)
 13. [Documentation](#documentation)
@@ -38,6 +50,49 @@ We believe TargetJS not only increases productivity but also enhances the develo
 
 ---
 
+## Comparison with Other UI Frameworks  
+
+### A Target-Based Approach  
+
+Unlike traditional UI frameworks that rely on direct method calls and variables, TargetJS structures its code around targets. Targets get executed sequentially in the order they appear in the code, 
+which can also form an **assembly line** where each target processes data based on the results of the previous one.
+Additionally, targets operate autonomously, each with its own life cycle. There are also **no direct calls** to targets. They can only be **activated** for execution, and the **task cycle** executes targets in the order of activation, ensuring a consistent flow and predictable access to data.
+
+### Minimal Dependence on HTML and CSS  
+
+- **HTML is optional**: We believe traditional HTML introduces unnecessary complexity and rigidity. While **TargetJS** can be integrated into existing HTML pages, it is **not required** when developing new ones.  
+- **CSS is optional**: Instead of relying on external stylesheets, **styles can be incorporated directly as targets**. This allows styles to be **dynamically updated** and easily accessible from the rest of the code.  
+- **Dynamic HTML nesting**:  TargetJ generates a flat HTML structure by default. When HTML element nesting is necessary, it is handled as a **target**, making it **dynamic** and easy to update.
+
+### Synchronous Event Handling  
+
+Events in **TargetJS** are handled **synchronously** and made available to **all active targets** within visible components. This approach ensures **flexible, consistent event handling** and less error prone.
+
+### Execution Control with Time 
+
+TargetJS enables developers to control the execution timing of targets, allowing for the sequencing and parallelization of numerous actions, which simplifies the development of complex UI behaviors.
+
+### Unified Approach for Development  
+
+Targets offer a **unified solution** for UI, animation, event handling, API calls, and state management, rather than working with multiple technologies, 
+commands, and approaches. This simplifies development and makes **TargetJS** easier to learn.
+ 
+### High Performance for large Lists
+
+**TargetJS** optimizes performance by internally building a **tree structure** where there is a long list of components. The TargetJS task cycle monitors only 
+the **visible branch** of the tree, ensuring high performance of pages with large lists of UI items.
+
+### Enhanced User Experience  
+
+With its simplified and unified approach, eliminating the need for a static HTML layer and CSS files, along with the dynamic nature of targets, we believe TargetJS enables developers
+to focus on the user experience more than other frameworks.
+
+### Future Enhancements  
+
+Currently, TargetJ generates HTML elements with styles. We plan to support additional rendering APIs, such as the Canvas API and the Animation API, directly within targets to make them easily accessible. This will also enable highly interactive UIs capable of efficiently handling a large number of objects.
+
+---
+
 ## Installation
 
 To install TargetJS, run the following command in your terminal:
@@ -51,7 +106,7 @@ npm install targetj
 
 In TargetJS, **targets** serve as the core building blocks of components, replacing traditional variables and methods. Each component is composed of a set of targets.
 
-Targets provide a **unified approach** for solving challenges in **animation**, **user interface organization**, **program flow control**, **state management**, **event handling**, **API calls**, and more. They achieve this by offering a consistent interface for variable assignments and methods, enabling them to operate autonomously and manage their own life cycles.
+Targets provide a **unified approach** for addressing **animation**, **user interface**, **program flow control**, **state management**, **event handling**, **API calls**, and more. They achieve this by offering a consistent interface for variable assignments and methods, enabling them to operate autonomously and manage their own life cycles.
 
 ### For example:
 - **Variables**:
@@ -67,7 +122,9 @@ Targets provide a **unified approach** for solving challenges in **animation**,
 
 ### Draggable Animation Example 
 
-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.
+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 `moves` target prepares the data required for the `animate` target before execution. The `animate` target accesses the moves generated by the previous target using `this.prevTargetValue`, then generates a list of imperative targets for each style included in each move.
+The 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. 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.
 
@@ -91,8 +148,8 @@ App(new TModel('quickStart', {
         loop: true,
         cycles: 2,
         interval: 1000,
-        value() {
-            const move = this.val('moves')[this.getTargetCycle(this.key)];
+        value(cycle) {
+            const move = this.prevTargetValue[cycle];
             const x = (this.getParentValue('width') - move.width) / 2;
             const y = (this.getParentValue('height') - move.height) / 2;
             this.setTarget({ ...move, x, y }, 30);
@@ -115,7 +172,7 @@ Internally, TargetJS maintains a tree-like structure to track the visible branch
 
 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. This facilitates the reuse of HTML elements and opens the door to new user experiences.
 
-![Single page app](https://targetjs.io/img/infiniteScrolling4.gif)
+![Single page app](https://targetjs.io/img/infiniteScrolling5.gif)
 
 ```bash
 import { App, TModel, getEvents, getScreenHeight, getScreenWidth, } from "targetj";
@@ -573,7 +630,7 @@ Here is an example that creates 1000 rows. The first argument, 'rows,' is used t
 
 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://targetjs.io/img/targetjsAsLibrary.gif)
+![animation api example](https://targetjs.io/img/targetjsAsLibrary.gif) 
 
 ```bash
 import { App, TModel, $Dom } from "targetj";
@@ -582,7 +639,7 @@ App(new TModel("rows", {
     isVisible: true,
     containerOverflowMode: "always",
     rectTop() { return this.$dom.getBoundingClientRect().top; },
-    absY() { return this.val("rectTop") - $Dom.getWindowScrollTop(); },
+    absY() { return this.prevTargetValue - $Dom.getWindowScrollTop(); },
     defaultStyling: false,
     domHolder: true,
     onDomEvent: ["rectTop", "absY"],
@@ -608,22 +665,6 @@ App(new TModel("rows", {
 ```
 ---
 
-## 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 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**: 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.
-- **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.
-
----
-
 ## Special target names
 
 All HTML style names and attributes are treated as special target names. The most commonly used style names and attributes have already been added to the framework, with the possibility of adding more in the future.

package/build/BaseModel.js

@@ -112,7 +112,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         this.delVal('key');
         return;
       }
-      _TargetUtil.TargetUtil.bindTargetName(this.targets, key);
+      _TargetUtil.TargetUtil.bindTargetName(this, key);
       if (_TargetUtil.TargetUtil.allEventMap[key] || _TargetUtil.TargetUtil.internalEventMap[key]) {
         if (!this.eventTargetMap[key]) {
           this.eventTargetList.push(key);

package/build/EventListener.js

@@ -28,6 +28,8 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
     this.currentTouch = {
       deltaY: 0,
       deltaX: 0,
+      prevDeltaX: 0,
+      prevDeltaY: 0,
       pinchDelta: 0,
       key: '',
       manualMomentumFlag: false,
@@ -410,6 +412,8 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
   }, {
     key: "captureEvents",
     value: function captureEvents() {
+      this.currentTouch.prevDeltaX = 0;
+      this.currentTouch.prevDeltaY = 0;
       this.currentHandlers.enterEvent = undefined;
       this.currentHandlers.leaveEvent = undefined;
       this.currentHandlers.justFocused = undefined;
@@ -568,10 +572,8 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
           }
           this.end0 = this.getTouch(event);
           if (this.start0) {
-            var _deltaX = this.end0 ? Math.abs(this.end0.originalX - this.start0.originalX) : 0;
-            var _deltaY = this.end0 ? Math.abs(this.end0.originalY - this.start0.originalY) : 0;
-            var _period = this.end0 ? Math.abs(this.end0.timeStamp - this.start0.timeStamp) : 300;
-            if (_deltaX <= 1 && _deltaY <= 1 && _period <= 300) {
+            var touchHandler = _SearchUtil.SearchUtil.findFirstTouchHandler(tmodel);
+            if (touchHandler && touchHandler === this.currentHandlers.touch) {
               this.eventQueue.length = 0;
               this.eventQueue.push({
                 eventName: eventName,
@@ -648,6 +650,8 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
       this.currentTouch = {
         deltaY: 0,
         deltaX: 0,
+        prevDeltaX: 0,
+        prevDeltaY: 0,
         pinchDelta: 0,
         key: '',
         manualMomentumFlag: false,
@@ -982,8 +986,12 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
         this.currentTouch.dir = deltaY <= -1 ? "up" : deltaY >= 1 ? "down" : this.currentTouch.dir;
         this.currentTouch.source = source;
       }
-      this.currentTouch.deltaY = deltaY;
-      this.currentTouch.deltaX = deltaX;
+
+      // Accumulate movement deltas before they get reset in `captureEvents` to sync with the task cycle when movement is too fast
+      this.currentTouch.prevDeltaX += deltaX;
+      this.currentTouch.prevDeltaY += deltaY;
+      this.currentTouch.deltaX = this.currentTouch.prevDeltaX;
+      this.currentTouch.deltaY = this.currentTouch.prevDeltaY;
     }
   }, {
     key: "wheel",

package/build/SearchUtil.js

@@ -36,6 +36,9 @@ var SearchUtil = exports.SearchUtil = /*#__PURE__*/function () {
   }, {
     key: "findFirstHandler",
     value: function findFirstHandler(tmodel, options) {
+      if (!tmodel) {
+        return;
+      }
       var eventName = options.eventName,
         eventType = options.eventType;
       var handlerKey = "".concat(tmodel.oid, " ").concat(eventName, " ").concat(eventType);

package/build/TargetUtil.js

@@ -73,8 +73,28 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
     }
   }, {
     key: "bindTargetName",
-    value: function bindTargetName(targetInstance, key) {
-      var target = targetInstance[key];
+    value: function bindTargetName(instance, key) {
+      var target = instance.targets[key];
+      var keys = Object.keys(instance.targets);
+      var keyIndex = keys.indexOf(key);
+      var prevKey = keyIndex > 0 ? keys[keyIndex - 1] : undefined;
+      var getPrevValue = function getPrevValue() {
+        return prevKey !== undefined ? instance.val(prevKey) : undefined;
+      };
+      var lastPrevUpdateTime = prevKey !== undefined ? instance.getActualValueLastUpdate(prevKey) : undefined;
+      var getPrevUpdateTime = function getPrevUpdateTime() {
+        return prevKey !== undefined ? instance.getActualValueLastUpdate(prevKey) : undefined;
+      };
+      var isPrevTargetUpdated = function isPrevTargetUpdated() {
+        var currentPrevUpdateTime = getPrevUpdateTime();
+        if (lastPrevUpdateTime === undefined && currentPrevUpdateTime === undefined) {
+          return false;
+        }
+        if (lastPrevUpdateTime === undefined && currentPrevUpdateTime !== undefined) {
+          return true;
+        }
+        return currentPrevUpdateTime !== lastPrevUpdateTime;
+      };
       if (_typeof(target) === 'object') {
         var stepPattern = /^on[A-Za-z]+Step$/;
         var endPattern = /^on[A-Za-z]+End$/;
@@ -83,16 +103,26 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
           if (typeof target[method] === 'function' && (methods.includes(method) || stepPattern.test(method) || endPattern.test(method))) {
             var originalMethod = target[method];
             target[method] = function () {
+              var _getPrevUpdateTime;
               this.key = key;
-              return originalMethod.apply(this, arguments);
+              this.prevTargetValue = getPrevValue();
+              this.isPrevTargetUpdated = isPrevTargetUpdated;
+              var result = originalMethod.apply(this, arguments);
+              lastPrevUpdateTime = (_getPrevUpdateTime = getPrevUpdateTime()) !== null && _getPrevUpdateTime !== void 0 ? _getPrevUpdateTime : lastPrevUpdateTime;
+              return result;
             };
           }
         });
       } else if (typeof target === 'function') {
         var originalFunction = target;
-        targetInstance[key] = function () {
+        instance.targets[key] = function () {
+          var _getPrevUpdateTime2;
           this.key = key;
-          return originalFunction.apply(this, arguments);
+          this.prevTargetValue = getPrevValue();
+          this.isPrevTargetUpdated = isPrevTargetUpdated;
+          var result = originalFunction.apply(this, arguments);
+          lastPrevUpdateTime = (_getPrevUpdateTime2 = getPrevUpdateTime()) !== null && _getPrevUpdateTime2 !== void 0 ? _getPrevUpdateTime2 : lastPrevUpdateTime;
+          return result;
         };
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "targetj",
-  "version": "1.0.139",
+  "version": "1.0.141",
   "keywords": [
     "targetjs"
   ],