targetj 1.0.140 → 1.0.142

package/README.md

@@ -6,15 +6,15 @@ Welcome to TargetJS, a powerful JavaScript UI framework and library that you mig
 
 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.  
+Targets cannot also 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.
+- **Von Neumann Execution Model**: Targets are executed in the order they appear in the code or based on their activation order. They cannot be called directly.
+- **Functional Programming**: Targets can be composed to transform data in a pipeline-like manner, similar to functional programming constructs. Each target can access the result of the previous target using this.prevTargetValue and determine if it has changed with isPrevTargetUpdate(), making targets easier to test.
 
 We believe TargetJS' new programming paradigm will enhance productivity and make the coding experience more enjoyable and user-centric.
 
@@ -54,7 +54,9 @@ We believe TargetJS' new programming paradigm will enhance productivity and make
 
 ### A Target-Based Approach  
 
-Unlike traditional UI frameworks that rely on methods and variables, **TargetJS** structures its code around **targets**. Targets execute 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 can 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.
+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  
 
@@ -72,7 +74,7 @@ TargetJS enables developers to control the execution timing of targets, allowing
 
 ### 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, 
+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
@@ -121,7 +123,8 @@ Targets provide a **unified approach** for addressing **animation**, **user inte
 ### 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 `moves` target prepares the data required for the `animate` target before execution. The `animate` target then generates a list of imperative targets for each style included in each move.
+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. Although it is not needed in this example, we can also use `isPrevTargetUpdated()` to check if the previous target value has been updated, allowing us to skip unnecessary execution and improve performance.
+
 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.
@@ -144,10 +147,10 @@ App(new TModel('quickStart', {
     ],
     animate: {
         loop: true,
-        cycles: 2,
+        cycles() { return this.prevTargetValue.length - 1; },
         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);
@@ -168,9 +171,11 @@ This example demonstrates how to handle scroll events and implement a simple inf
 
 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.
 
+Each item's width will start at 100px and expand to 250px over 15 steps, executed as quickly as the device allows. Simultaneously, the background will transition from yellow to purple in 15 steps, with each step occurring every 15 milliseconds.
+
 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/infiniteScrolling5.gif)
+![Single page app](https://targetjs.io/img/infiniteScrolling6.gif)
 
 ```bash
 import { App, TModel, getEvents, getScreenHeight, getScreenWidth, } from "targetj";
@@ -180,9 +185,9 @@ App(new TModel({
     children() { 
         const childrenCount = this.getChildren().length;
         return Array.from({ length: 10 }, (_, i) => 
-            new TModel('scrollItem', {                     
-                width: 300,
-                background: '#B388FF',                
+            new TModel('scrollItem', {
+                width: [{ list: [100, 250] }, 15],
+                background: [{ list: ["#FCE961", "#B388FF"] }, 15, 15],              
                 height: 32,
                 color: '#C2FC61',
                 textAlign: 'center',
@@ -637,7 +642,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"],

package/build/BaseModel.js

@@ -77,9 +77,10 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
       this.targetValues = {};
       this.activeTargetMap = {};
       this.activeTargetList = [];
+      var targetNames = Object.keys(this.targets);
       var domExists = _$Dom.$Dom.query("#".concat(this.oid));
       if (!domExists && !this.excludeDefaultStyling()) {
-        Object.entries(_TModelUtil.TModelUtil.defaultTargets()).forEach(function (_ref) {
+        Object.entries(_TModelUtil.TModelUtil.defaultTargetStyles()).forEach(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
             key = _ref2[0],
             value = _ref2[1];
@@ -91,28 +92,32 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         this.targets['reuseDomDefinition'] = true;
       }
       Object.keys(this.targets).forEach(function (key) {
-        _this.processNewTarget(key);
+        _this.processNewTarget(key, targetNames);
       });
     }
   }, {
     key: "processNewTarget",
-    value: function processNewTarget(key) {
+    value: function processNewTarget(key, targetNames) {
+      if (!_TUtil.TUtil.isDefined(this.targets[key])) {
+        this.delVal('key');
+        return;
+      }
+      _TargetUtil.TargetUtil.bindTarget(this, key, targetNames);
+      var cleanKey = _TargetUtil.TargetUtil.getTargetName(key);
       var isInactiveKey = key.startsWith('_');
-      if (isInactiveKey) {
-        var newKey = key.slice(1);
-        this.targets[newKey] = _typeof(this.targets[key]) === 'object' && this.targets[key].value ? this.targets[key] : {
-          value: this.targets[key]
-        };
-        this.targets[newKey].active = false;
+      if (cleanKey !== key) {
+        if (isInactiveKey) {
+          this.targets[cleanKey] = _typeof(this.targets[key]) === 'object' && this.targets[key].value ? this.targets[key] : {
+            value: this.targets[key]
+          };
+          this.targets[cleanKey].active = false;
+        } else {
+          this.targets[cleanKey] = this.targets[key];
+        }
         delete this.targets[key];
-        key = newKey;
+        key = cleanKey;
       }
       var target = this.targets[key];
-      if (!_TUtil.TUtil.isDefined(target)) {
-        this.delVal('key');
-        return;
-      }
-      _TargetUtil.TargetUtil.bindTargetName(this, key);
       if (_TargetUtil.TargetUtil.allEventMap[key] || _TargetUtil.TargetUtil.internalEventMap[key]) {
         if (!this.eventTargetMap[key]) {
           this.eventTargetList.push(key);

package/build/LoadingManager.js

@@ -7,6 +7,7 @@ exports.LoadingManager = void 0;
 var _$Dom = require("./$Dom.js");
 var _TUtil = require("./TUtil.js");
 var _App = require("./App.js");
+var _TargetUtil = require("./TargetUtil.js");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -23,6 +24,7 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
   function LoadingManager() {
     _classCallCheck(this, LoadingManager);
     this.cacheMap = {};
+    this.tmodelKeyMap = {};
     this.fetchingAPIMap = {};
     this.fetchingImageMap = {};
   }
@@ -37,11 +39,13 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
           }));
         }
       } else if (fetchMap[fetchId]) {
+        this.addToTModelKeyMap(tmodel, tmodel.key);
         fetchMap[fetchId].targets.push({
           tmodel: tmodel,
           targetName: tmodel.key
         });
       } else {
+        this.addToTModelKeyMap(tmodel, tmodel.key);
         fetchMap[fetchId] = {
           fetchId: fetchId,
           cacheId: cacheId,
@@ -57,6 +61,24 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
       }
       return fetchId;
     }
+  }, {
+    key: "addToTModelKeyMap",
+    value: function addToTModelKeyMap(tmodel, targetName) {
+      var key = "".concat(tmodel.oid, " ").concat(targetName);
+      this.tmodelKeyMap[key] = true;
+    }
+  }, {
+    key: "removeFromTModelKeyMap",
+    value: function removeFromTModelKeyMap(tmodel, targetName) {
+      var key = "".concat(tmodel.oid, " ").concat(targetName);
+      delete this.tmodelKeyMap[key];
+    }
+  }, {
+    key: "isInTModelKeyMap",
+    value: function isInTModelKeyMap(tmodel, targetName) {
+      var key = "".concat(tmodel.oid, " ").concat(targetName);
+      return this.tmodelKeyMap[key];
+    }
   }, {
     key: "fetch",
     value: function fetch(tmodel, url, query, cacheId) {
@@ -100,6 +122,7 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
   }, {
     key: "handleSuccess",
     value: function handleSuccess(fetchStatus, result) {
+      var _this3 = this;
       var fetchTime = _TUtil.TUtil.now();
       var fetchId = fetchStatus.fetchId,
         cacheId = fetchStatus.cacheId,
@@ -115,9 +138,12 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
         var _tmodel$targets$targe;
         var tmodel = _ref.tmodel,
           targetName = _ref.targetName;
+        _this3.removeFromTModelKeyMap(tmodel, targetName);
         if (typeof ((_tmodel$targets$targe = tmodel.targets[targetName]) === null || _tmodel$targets$targe === void 0 ? void 0 : _tmodel$targets$targe.onSuccess) === 'function' && tmodel.isTargetEnabled(targetName)) {
           tmodel.targets[targetName].onSuccess.call(tmodel, res);
         }
+        tmodel.val(targetName, result);
+        _TargetUtil.TargetUtil.shouldActivateNextTarget(tmodel, targetName);
       });
       delete fetchMap[fetchId];
       if (cacheId) {
@@ -128,6 +154,7 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
   }, {
     key: "handleError",
     value: function handleError(fetchStatus, error) {
+      var _this4 = this;
       var fetchTime = _TUtil.TUtil.now();
       var fetchId = fetchStatus.fetchId,
         cacheId = fetchStatus.cacheId,
@@ -143,9 +170,12 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
         var _tmodel$targets$targe2;
         var tmodel = _ref2.tmodel,
           targetName = _ref2.targetName;
+        _this4.removeFromTModelKeyMap(tmodel, targetName);
         if (typeof ((_tmodel$targets$targe2 = tmodel.targets[targetName]) === null || _tmodel$targets$targe2 === void 0 ? void 0 : _tmodel$targets$targe2.onError) === 'function') {
           tmodel.targets[targetName].onError.call(tmodel, res);
         }
+        tmodel.actualValues[targetName] = res;
+        _TargetUtil.TargetUtil.shouldActivateNextTarget(tmodel, targetName);
       });
       delete fetchMap[fetchId];
       if (cacheId) {
@@ -156,15 +186,15 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
   }, {
     key: "ajaxAPI",
     value: function ajaxAPI(url, query, fetchStatus) {
-      var _this3 = this;
+      var _this5 = this;
       var defaultQuery = {
         dataType: "json",
         type: "GET",
         success: function success(dataList) {
-          return _this3.handleSuccess(fetchStatus, dataList);
+          return _this5.handleSuccess(fetchStatus, dataList);
         },
         error: function error(textStatus) {
-          return _this3.handleError(fetchStatus, textStatus);
+          return _this5.handleError(fetchStatus, textStatus);
         }
       };
       _$Dom.$Dom.ajax(_objectSpread(_objectSpread({}, defaultQuery), {}, {
@@ -176,7 +206,7 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
   }, {
     key: "loadImage",
     value: function loadImage(src, fetchStatus) {
-      var _this4 = this;
+      var _this6 = this;
       var image = new Image();
       image.src = src;
       image.onload = function () {
@@ -185,10 +215,10 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
           height: image.height,
           src: image.src
         };
-        _this4.handleSuccess(fetchStatus, result);
+        _this6.handleSuccess(fetchStatus, result);
       };
       image.onerror = image.onerror = function () {
-        _this4.handleError(fetchStatus, "not found");
+        _this6.handleError(fetchStatus, "not found");
       };
     }
   }]);

package/build/TModelUtil.js

@@ -53,8 +53,8 @@ var TModelUtil = exports.TModelUtil = /*#__PURE__*/function () {
       };
     }
   }, {
-    key: "defaultTargets",
-    value: function defaultTargets() {
+    key: "defaultTargetStyles",
+    value: function defaultTargetStyles() {
       return {
         position: 'absolute',
         left: 0,

package/build/TargetExecutor.js

@@ -29,6 +29,7 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
     value: function executeDeclarativeTarget(tmodel, key) {
       TargetExecutor.resolveTargetValue(tmodel, key);
       TargetExecutor.updateTarget(tmodel, tmodel.targetValues[key], key);
+      _TargetUtil.TargetUtil.shouldActivateNextTarget(tmodel, key);
     }
   }, {
     key: "executeImperativeTarget",

package/build/TargetManager.js

@@ -191,6 +191,7 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
         }
         tmodel.incrementTargetStep(key);
         tmodel.updateTargetStatus(key);
+        _TargetUtil.TargetUtil.shouldActivateNextTarget(tmodel, key);
         if (tmodel.getTargetStep(key) < steps) {
           (0, _App.getRunScheduler)().schedule(interval, "".concat(tmodel.oid, "---").concat(key, "-").concat(step, "/").concat(steps, "-").concat(cycle, "-").concat(interval));
           return;

package/build/TargetUtil.js

@@ -72,15 +72,52 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
       return autoHandleEvents;
     }
   }, {
-    key: "bindTargetName",
-    value: function bindTargetName(instance, key) {
-      var target = instance.targets[key];
-      var keys = Object.keys(instance.targets);
+    key: "getTargetName",
+    value: function getTargetName(key) {
+      if (!key) {
+        return key;
+      }
+      var cleanKey = key.startsWith('_') ? key.slice(1) : key;
+      cleanKey = cleanKey.endsWith('$') ? cleanKey.slice(0, -1) : cleanKey;
+      return cleanKey;
+    }
+  }, {
+    key: "bindTarget",
+    value: function bindTarget(tmodel, key) {
+      var keys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Object.keys(tmodel.targets);
+      var target = tmodel.targets[key];
       var keyIndex = keys.indexOf(key);
-      var prevKey = keyIndex > 0 ? keys[keyIndex - 1] : undefined;
+      var prevKey = keyIndex > 0 ? TargetUtil.getTargetName(keys[keyIndex - 1]) : undefined;
+      var nextKey = keyIndex < keys.length - 1 ? keys[keyIndex + 1] : undefined;
       var getPrevValue = function getPrevValue() {
-        return prevKey !== undefined ? instance.val(prevKey) : undefined;
+        return prevKey !== undefined ? tmodel.val(prevKey) : undefined;
+      };
+      var lastPrevUpdateTime = prevKey !== undefined ? tmodel.getActualValueLastUpdate(prevKey) : undefined;
+      var getPrevUpdateTime = function getPrevUpdateTime() {
+        return prevKey !== undefined ? tmodel.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;
       };
+      var doesNextTargetUsePrevValue = nextKey && nextKey.endsWith('$') ? true : false;
+      if (doesNextTargetUsePrevValue) {
+        if (_typeof(target) === 'object' && !Array.isArray(target)) {
+          target.activateNextTarget = TargetUtil.getTargetName(nextKey);
+        } else {
+          tmodel.targets[key] = {
+            value: target,
+            activateNextTarget: TargetUtil.getTargetName(nextKey)
+          };
+          target = tmodel.targets[key];
+        }
+      }
       if (_typeof(target) === 'object') {
         var stepPattern = /^on[A-Za-z]+Step$/;
         var endPattern = /^on[A-Za-z]+End$/;
@@ -89,21 +126,44 @@ 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 () {
-              this.key = key;
+              var _getPrevUpdateTime;
+              this.key = TargetUtil.getTargetName(key);
               this.prevTargetValue = getPrevValue();
-              return originalMethod.apply(this, arguments);
+              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;
-        instance.targets[key] = function () {
-          this.key = key;
+        tmodel.targets[key] = function () {
+          var _getPrevUpdateTime2;
+          this.key = TargetUtil.getTargetName(key);
           this.prevTargetValue = getPrevValue();
-          return originalFunction.apply(this, arguments);
+          this.isPrevTargetUpdated = isPrevTargetUpdated;
+          var result = originalFunction.apply(this, arguments);
+          lastPrevUpdateTime = (_getPrevUpdateTime2 = getPrevUpdateTime()) !== null && _getPrevUpdateTime2 !== void 0 ? _getPrevUpdateTime2 : lastPrevUpdateTime;
+          return result;
         };
       }
     }
+  }, {
+    key: "shouldActivateNextTarget",
+    value: function shouldActivateNextTarget(tmodel, key) {
+      var _tmodel$targets$key;
+      if ((_tmodel$targets$key = tmodel.targets[key]) !== null && _tmodel$targets$key !== void 0 && _tmodel$targets$key.activateNextTarget) {
+        var _tmodel$targets$key2;
+        var targetName = (_tmodel$targets$key2 = tmodel.targets[key]) === null || _tmodel$targets$key2 === void 0 ? void 0 : _tmodel$targets$key2.activateNextTarget;
+        if (!(0, _App.getLoader)().isInTModelKeyMap(tmodel, key)) {
+          if (tmodel.isTargetImperative(targetName)) {
+            tmodel.targetValues[targetName].isImperative = false;
+          }
+          tmodel.activate(targetName);
+        }
+      }
+    }
   }, {
     key: "isValueStepsCycleArray",
     value: function isValueStepsCycleArray(arr) {

package/package.json

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