targetj 1.0.153 → 1.0.155

package/README.md

@@ -5,7 +5,7 @@
 [![Stars](https://img.shields.io/github/stars/livetrails/targetjs.svg)](https://github.com/livetrails/targetjs/stargazers)
 [![npm version](https://img.shields.io/npm/v/targetj.svg)](https://www.npmjs.com/package/targetj)
 
-TargetJS is a modern JavaScript UI framework designed to simplify front-end development by introducing a unique paradigm centered around Targets, which function as **enhanced variables and methods** with **lifecycles**.  This approach provides a unified solution for UI rendering, animations, API interactions, state management, and event handling, leading to more compact code and a stronger focus on user experience. TargetJS is also a highly performant web framework, as shown in the [framework benchmark](https://krausest.github.io/js-framework-benchmark/current.html).
+TargetJS is a modern JavaScript UI framework designed to simplify front-end development by introducing a unique paradigm based on literal objects and extending their properties and methods with lifecycles and functional pipelines.  The framework provides a unified solution for UI rendering, animations, API interactions, state management, and event handling, leading to more compact code and a stronger focus on user experience. TargetJS is also a highly performant web framework, as shown in the [framework benchmark](https://krausest.github.io/js-framework-benchmark/current.html).
 ## What Problems Does TargetJS Solve?
 
 TargetJS addresses several common pain points in front-end development:
@@ -55,7 +55,7 @@ npm install targetj
 
 ## Key Features and Concepts
 
-*   **Targets:** The fundamental building blocks of TargetJS. Targets provide a unified interface for variables and methods with built-in lifecycles. They can:
+*   **Targets:** The fundamental building blocks of TargetJS. Targets provide a unified interface for properties and methods with built-in lifecycles. They can:
     *   Iterate towards values (useful for animations and transitions).
     *   Execute conditionally.
     *   Manage repeated executions.
@@ -70,7 +70,7 @@ npm install targetj
 
 *  **Unique computational paradigm:** TargetJS introduces a novel computational model by integrating multiple paradigms: Turing Completeness, the Von Neumann Execution Model, and Functional Programming. This results in:
 
-   * Deterministic Execution Flow: Targets execute based on their activation order, initially following their order in the code. They run in sequence as part of the task processing cycle. Everything in TargetJS is synchronous, and targets cannot be called directly.
+   * Deterministic Execution Flow: Targets execute based on their activation order, initially following their order in the code. They run in sequence as part of the framework execution cycle. Everything in TargetJS is synchronous, and targets cannot be called directly.
    * Powerful Functional Pipeline: Targets can be structured as a functional pipeline with enhanced capabilities.
 
 *   **Easy Integration:** Can be used as a library within existing projects.
@@ -83,7 +83,7 @@ npm install targetj
 - Targets run initially in the order they appear in the code, so `background` runs first, followed by `width`. The `_` prefix indicates that a target is inactive by default, meaning `height` does not run initially.
 - `background` sets the background to purple, and its lifecycle ends.
 - `width` animates from 100 → 250 → 100px, in 50 steps with 10ms pauses.
-- `height` follows `width` and scales dynamically with its value. The `$` postfix means it is activated each time the proceding target executes. `prevTargetValue` refers to the previous target's value, which in this case is `width`.
+- `height` follows `width` and scales dynamically with its value. The `$` postfix means it is activated each time the preceding target executes. `prevTargetValue` refers to the previous target's value, which in this case is `width`.
 
 ![first example](https://targetjs.io/img/quick1_3.gif)
 
@@ -154,9 +154,9 @@ App({
 
 | Feature                               | TargetJS                        | Reactive Model Frameworks             |
 |--------------------------------------|-----------------------------------------------------------------|------------------------------------------------------|
-| **Component Basic Structure**     | Components consist of Targets, providing a unified interface for methods and variables. | Components consist of methods and variables.
-| **Execution Order**                   | Components consist of Targets, providing a unified interface for methods and variables. | Primarily data-driven, less predictable. |
-| **Function Calls**                    | Targets cannot be called directly. Execution is part of a task cycle. | Functions execute reactively or are called imperatively. |
+| **Component Basic Structure**     | Components consist of Targets, providing a unified interface for methods and properties. | Components consist of methods and variables.
+| **Execution Order**                   | Targets are executed based on their activation order, which initially follows their appearance in the code. They run in a sequential and predictable manner | Primarily data-driven, less predictable. |
+| **Function Calls**                    | Targets cannot be called directly. Execution is part of a framework execution cycle. | Functions execute reactively or are called imperatively. |
 | **Autonomous Execution**              | Targets can self-activate and operate autonomously. | Functions do not execute autonomously. |
 | **Execution Pipeline**                | Targets can form controlled pipelines; a target can activate when the preceding target executes or completes. | Functions are called whenever dependencies update. Execution order is not based on code appearance. |
 | **Event Handling**                    | Primarily by activating Targets, making event handling consistent with the core execution model. | Events are handled through event listeners, subscriptions, or reactive bindings. |
@@ -177,7 +177,7 @@ TargetJS leverages ES2015's guaranteed property order to ensure that target exec
 ## Anatomy of a Target
 
 Each target consists of the following:
-1. Target Value and Actual Value. The target value refers to the value assigned to a variable or the output produced by the `value()` method associated with the target defined in your program. The actual value is the value used by the rest of the application. When the target value differs from the actual value, TargetJS iteratively updates the actual value until it matches the target value. This process is managed by two additional variables: `step`, which dictates the number of iterations, and `interval`, which specifies the duration (in milliseconds) the system waits before executing the next iteration.
+1. Target Value and Actual Value. The target value refers to the value assigned to a property or the output produced by the `value()` method associated with the target defined in your program. The actual value is the value used by the rest of the application. When the target value differs from the actual value, TargetJS iteratively updates the actual value until it matches the target value. This process is managed by two additional variables: `step`, which dictates the number of iterations, and `interval`, which specifies the duration (in milliseconds) the system waits before executing the next iteration.
 
 2. State: Targets have four states that control their lifecycles: `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.
@@ -407,26 +407,25 @@ If you inspect the HTML elements in the browser's developer tools, you'll notice
 ![Single page app](https://targetjs.io/img/infiniteScrolling11.gif)
 
 ```bash
-import { App, TModel, getEvents, getLoader, getScreenWidth, getScreenHeight } from "targetj";
+import { App, getEvents, getLoader, getScreenWidth, getScreenHeight } from "targetj";
 
 App({
     containerOverflowMode: "always",
     children() {
         const childrenCount = this.getChildren().length;
-        return Array.from({ length: 20 }, (_, i) =>
-            new TModel("scrollItem", {
-                width: [{list: [100, 250]}, 15],
-                background: [{list: ["#FCE961", "#B388FF"]}, 15, 15],
-                height: 48,
-                color: "#C2FC61",
-                textAlign: "center",
-                lineHeight: 48,
-                bottomMargin: 2,
-                x() { return this.getCenterX(); },
-                validateVisibilityInParent: true,
-                html: childrenCount + i
-            })
-        );
+        return Array.from({ length: 20 }, (_, i) => ({
+             id: 'scrollItem',
+             width: [{list: [100, 250]}, 15],
+             background: [{list: ["#FCE961", "#B388FF"]}, 15, 15],
+             height: 48,
+             color: "#C2FC61",
+             textAlign: "center",
+             lineHeight: 48,
+             bottomMargin: 2,
+             x() { return this.getCenterX(); },
+             validateVisibilityInParent: true,
+             html: childrenCount + i
+         }));
     },
     _load$() {
         this.prevTargetValue.forEach(data =>
@@ -520,7 +519,7 @@ App({
     },
     page2() {
         return {
-            ...this.val('page').targets,
+            ...this.val('page'),
             background: "#B388FF",
             html: 'page2'
         };         

package/build/App.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tRoot = exports.tApp = exports.isRunning = exports.getVisibles = exports.getScreenWidth = exports.getScreenHeight = exports.getRunScheduler = exports.getResizeLastUpdate = exports.getPager = exports.getManager = exports.getLocationManager = exports.getLoader = exports.getEvents = exports.getBrowser = exports.App = void 0;
+exports.tRoot = exports.tApp = exports.isRunning = exports.getVisibles = exports.getScreenWidth = exports.getScreenHeight = exports.getRunScheduler = exports.getResizeLastUpdate = exports.getPager = exports.getManager = exports.getLocationManager = exports.getLoader = exports.getEvents = exports.getBrowser = exports.fetchImage = exports.fetch = exports.App = void 0;
 var _$Dom = require("./$Dom.js");
 var _TModel = require("./TModel.js");
 var _Browser = require("./Browser.js");
@@ -194,36 +194,44 @@ var getLoader = exports.getLoader = function getLoader() {
   var _tApp4;
   return (_tApp4 = tApp) === null || _tApp4 === void 0 ? void 0 : _tApp4.loader;
 };
-var getManager = exports.getManager = function getManager() {
+var fetch = exports.fetch = function fetch(tmodel, url, query, cacheId) {
   var _tApp5;
-  return (_tApp5 = tApp) === null || _tApp5 === void 0 ? void 0 : _tApp5.manager;
+  return (_tApp5 = tApp) === null || _tApp5 === void 0 || (_tApp5 = _tApp5.loader) === null || _tApp5 === void 0 ? void 0 : _tApp5.fetch(tmodel, url, query, cacheId);
 };
-var getRunScheduler = exports.getRunScheduler = function getRunScheduler() {
+var fetchImage = exports.fetchImage = function fetchImage(tmodel, src) {
   var _tApp6;
-  return (_tApp6 = tApp) === null || _tApp6 === void 0 ? void 0 : _tApp6.runScheduler;
+  return (_tApp6 = tApp) === null || _tApp6 === void 0 || (_tApp6 = _tApp6.loader) === null || _tApp6 === void 0 ? void 0 : _tApp6.fetchImage(tmodel, src);
 };
-var getLocationManager = exports.getLocationManager = function getLocationManager() {
+var getManager = exports.getManager = function getManager() {
   var _tApp7;
-  return (_tApp7 = tApp) === null || _tApp7 === void 0 ? void 0 : _tApp7.locationManager;
+  return (_tApp7 = tApp) === null || _tApp7 === void 0 ? void 0 : _tApp7.manager;
 };
-var getBrowser = exports.getBrowser = function getBrowser() {
+var getRunScheduler = exports.getRunScheduler = function getRunScheduler() {
   var _tApp8;
-  return (_tApp8 = tApp) === null || _tApp8 === void 0 ? void 0 : _tApp8.browser;
+  return (_tApp8 = tApp) === null || _tApp8 === void 0 ? void 0 : _tApp8.runScheduler;
+};
+var getLocationManager = exports.getLocationManager = function getLocationManager() {
+  var _tApp9;
+  return (_tApp9 = tApp) === null || _tApp9 === void 0 ? void 0 : _tApp9.locationManager;
+};
+var getBrowser = exports.getBrowser = function getBrowser() {
+  var _tApp10;
+  return (_tApp10 = tApp) === null || _tApp10 === void 0 ? void 0 : _tApp10.browser;
 };
 var getScreenWidth = exports.getScreenWidth = function getScreenWidth() {
-  var _tApp$tRoot$getWidth, _tApp9;
-  return (_tApp$tRoot$getWidth = (_tApp9 = tApp) === null || _tApp9 === void 0 || (_tApp9 = _tApp9.tRoot) === null || _tApp9 === void 0 ? void 0 : _tApp9.getWidth()) !== null && _tApp$tRoot$getWidth !== void 0 ? _tApp$tRoot$getWidth : 0;
+  var _tApp$tRoot$getWidth, _tApp11;
+  return (_tApp$tRoot$getWidth = (_tApp11 = tApp) === null || _tApp11 === void 0 || (_tApp11 = _tApp11.tRoot) === null || _tApp11 === void 0 ? void 0 : _tApp11.getWidth()) !== null && _tApp$tRoot$getWidth !== void 0 ? _tApp$tRoot$getWidth : 0;
 };
 var getScreenHeight = exports.getScreenHeight = function getScreenHeight() {
-  var _tApp$tRoot$getHeight, _tApp10;
-  return (_tApp$tRoot$getHeight = (_tApp10 = tApp) === null || _tApp10 === void 0 || (_tApp10 = _tApp10.tRoot) === null || _tApp10 === void 0 ? void 0 : _tApp10.getHeight()) !== null && _tApp$tRoot$getHeight !== void 0 ? _tApp$tRoot$getHeight : 0;
+  var _tApp$tRoot$getHeight, _tApp12;
+  return (_tApp$tRoot$getHeight = (_tApp12 = tApp) === null || _tApp12 === void 0 || (_tApp12 = _tApp12.tRoot) === null || _tApp12 === void 0 ? void 0 : _tApp12.getHeight()) !== null && _tApp$tRoot$getHeight !== void 0 ? _tApp$tRoot$getHeight : 0;
 };
 var getVisibles = exports.getVisibles = function getVisibles() {
-  var _tApp11;
-  return (_tApp11 = tApp) === null || _tApp11 === void 0 || (_tApp11 = _tApp11.manager) === null || _tApp11 === void 0 ? void 0 : _tApp11.lists.visible;
+  var _tApp13;
+  return (_tApp13 = tApp) === null || _tApp13 === void 0 || (_tApp13 = _tApp13.manager) === null || _tApp13 === void 0 ? void 0 : _tApp13.lists.visible;
 };
 var getResizeLastUpdate = exports.getResizeLastUpdate = function getResizeLastUpdate() {
-  var _tApp12;
-  return (_tApp12 = tApp) === null || _tApp12 === void 0 ? void 0 : _tApp12.resizeLastUpdate;
+  var _tApp14;
+  return (_tApp14 = tApp) === null || _tApp14 === void 0 ? void 0 : _tApp14.resizeLastUpdate;
 };
 window.t = window.t || _SearchUtil.SearchUtil.find;

package/build/BaseModel.js

@@ -168,7 +168,6 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
     key: "deactivate",
     value: function deactivate() {
       this.currentStatus = undefined;
-      this.activatedTargets.length = 0;
     }
   }, {
     key: "shouldExecuteCyclesInParallel",

package/build/LocationManager.js

@@ -90,6 +90,7 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
         if (!_this2.hasLocationMap[child.oid]) {
           _this2.addToLocationList(child);
         }
+        child.activatedTargets.length = 0;
       };
       while (i < this.activatedList.length) {
         _loop();
@@ -226,12 +227,12 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
       _App.tApp.targetManager.setActualValues(tmodel);
       if (tmodel.hasDom()) {
         if (_TModelUtil.TModelUtil.shouldMeasureWidthFromDom(tmodel)) {
-          _TargetUtil.TargetUtil.setWidthFromDom(tmodel);
+          _TModelUtil.TModelUtil.setWidthFromDom(tmodel);
         }
       }
       if (tmodel.hasDom()) {
         if (_TModelUtil.TModelUtil.shouldMeasureHeightFromDom(tmodel)) {
-          _TargetUtil.TargetUtil.setHeightFromDom(tmodel);
+          _TModelUtil.TModelUtil.setHeightFromDom(tmodel);
         }
       }
       tmodel.isNowVisible = false;
@@ -274,7 +275,14 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
         var target = tmodel.targets[targetName];
         if (tmodel.isTargetEnabled(targetName)) {
           if (typeof target.value === 'function') {
-            target.value.call(tmodel, originalEventTarget);
+            var result = target.value.call(tmodel, originalEventTarget);
+            if (Array.isArray(result)) {
+              result.forEach(function (t) {
+                return _TargetUtil.TargetUtil.activateSingleTarget(tmodel, t);
+              });
+            } else if (typeof result === 'string') {
+              _TargetUtil.TargetUtil.activateSingleTarget(tmodel, result);
+            }
           } else if (Array.isArray(target.value)) {
             target.value.forEach(function (t) {
               return _TargetUtil.TargetUtil.activateSingleTarget(tmodel, t);

package/build/TModelUtil.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.TModelUtil = void 0;
 var _TUtil = require("./TUtil.js");
 var _TargetData = require("./TargetData.js");
+var _App = require("./App.js");
 var _$Dom = require("./$Dom.js");
+var _ColorUtil = require("./ColorUtil.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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
@@ -148,6 +150,70 @@ var TModelUtil = exports.TModelUtil = /*#__PURE__*/function () {
       tmodel.styleTargetMap = {};
       tmodel.styleTargetList.length = 0;
     }
+  }, {
+    key: "setWidthFromDom",
+    value: function setWidthFromDom(child) {
+      var timestamp = child.domWidthTimestamp;
+      var parent = child.getParent();
+      var domParent = child.getDomParent();
+      var rerender = false;
+      if ((0, _App.getManager)().needsRerender(child)) {
+        child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
+        rerender = true;
+      }
+      if (rerender || parent && timestamp <= parent.getDimLastUpdate() || domParent && timestamp <= domParent.getDimLastUpdate()) {
+        child.$dom.width('auto');
+        var width = child.$dom.width();
+        child.domWidthTimestamp = _TUtil.TUtil.now();
+        child.val('width', width);
+        if (width > 0 || width === 0 && child.lastVal('width') > 0) {
+          child.addToStyleTargetList('width');
+        }
+        (0, _App.getRunScheduler)().schedule(15, 'resize');
+      }
+    }
+  }, {
+    key: "setHeightFromDom",
+    value: function setHeightFromDom(child) {
+      var timestamp = child.domHeightTimestamp;
+      var parent = child.getParent();
+      var domParent = child.getDomParent();
+      var rerender = false;
+      if ((0, _App.getManager)().needsRerender(child)) {
+        child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
+        rerender = true;
+      }
+      if (rerender || parent && timestamp <= parent.getDimLastUpdate() || domParent && timestamp <= domParent.getDimLastUpdate()) {
+        child.$dom.height('auto');
+        var height = child.$dom.height();
+        child.domHeightTimestamp = _TUtil.TUtil.now();
+        child.val('height', height);
+        if (height > 0 || height === 0 && child.lastVal('height') > 0) {
+          child.addToStyleTargetList('height');
+        }
+        (0, _App.getRunScheduler)().schedule(15, 'resize');
+      }
+    }
+  }, {
+    key: "morph",
+    value: function morph(tmodel, key, fromValue, toValue, step) {
+      var easing = tmodel.getTargetEasing(key);
+      var easingStep = easing ? easing(tmodel.getTargetStepPercent(key, step)) : tmodel.getTargetStepPercent(key, step);
+      if (_TargetData.TargetData.colorMap[key]) {
+        var targetColors = _ColorUtil.ColorUtil.color2Integers(toValue);
+        var lastColors = fromValue ? _ColorUtil.ColorUtil.color2Integers(fromValue) : _ColorUtil.ColorUtil.color2Integers('#fff');
+        if (targetColors && lastColors) {
+          var red = Math.floor(targetColors[0] * easingStep + lastColors[0] * (1 - easingStep));
+          var green = Math.floor(targetColors[1] * easingStep + lastColors[1] * (1 - easingStep));
+          var blue = Math.floor(targetColors[2] * easingStep + lastColors[2] * (1 - easingStep));
+          return "rgb(".concat(red, ",").concat(green, ",").concat(blue, ")");
+        } else {
+          return toValue;
+        }
+      } else {
+        return typeof toValue === 'number' ? toValue * easingStep + fromValue * (1 - easingStep) : toValue;
+      }
+    }
   }, {
     key: "fixAsyncStyle",
     value: function fixAsyncStyle(tmodel) {

package/build/TargetManager.js

@@ -8,6 +8,7 @@ var _TargetExecutor = require("./TargetExecutor.js");
 var _App = require("./App.js");
 var _TUtil = require("./TUtil.js");
 var _TargetUtil = require("./TargetUtil.js");
+var _TModelUtil = require("./TModelUtil.js");
 var _SearchUtil = require("./SearchUtil.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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
@@ -175,7 +176,7 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
           initialValue = _TUtil.TUtil.isDefined(tmodel.val(key)) ? tmodel.val(key) : typeof theValue === 'number' ? 0 : undefined;
           tmodel.setTargetInitialValue(key, initialValue);
         }
-        tmodel.val(key, _TargetUtil.TargetUtil.morph(tmodel, key, initialValue, theValue, step, steps));
+        tmodel.val(key, _TModelUtil.TModelUtil.morph(tmodel, key, initialValue, theValue, step, steps));
         tmodel.addToStyleTargetList(key);
         tmodel.setActualValueLastUpdate(key);
         tmodel.setTargetMethodName(key, 'value');

package/build/TargetUtil.js

@@ -7,7 +7,6 @@ exports.TargetUtil = void 0;
 var _TargetData = require("./TargetData.js");
 var _App = require("./App.js");
 var _TUtil = require("./TUtil.js");
-var _ColorUtil = require("./ColorUtil.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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
@@ -111,26 +110,40 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
       var doesNextTargetUsePrevValue = nextKey && nextKey.endsWith('$') ? true : false;
       target.originalTargetName = TargetUtil.currentTargetName;
       target.originalTModel = TargetUtil.currentTModel;
-      if (doesNextTargetUsePrevValue) {
+      var cleanKey = TargetUtil.getTargetName(key);
+      if (doesNextTargetUsePrevValue && !target.activateNextTarget) {
         target.activateNextTarget = nextKey.slice(0, -1);
       }
       var stepPattern = /^on[A-Za-z]+Step$/;
       var endPattern = /^on[A-Za-z]+End$/;
       var methods = ['value', 'enabledOn', 'onStepsEnd', 'onValueChange', 'loop', 'onImperativeEnd', 'onImperativeStep', 'onSuccess', 'onError'];
       Object.keys(target).forEach(function (method) {
-        if (typeof target[method] === 'function' && (methods.includes(method) || stepPattern.test(method) || endPattern.test(method))) {
+        if (method === 'value') {
           var originalMethod = target[method];
           target[method] = function () {
             var _getPrevUpdateTime;
-            TargetUtil.currentTargetName = TargetUtil.getTargetName(key);
+            TargetUtil.currentTargetName = cleanKey;
             TargetUtil.currentTModel = tmodel;
-            this.key = TargetUtil.getTargetName(key);
+            this.key = cleanKey;
             this.prevTargetValue = getPrevValue();
             this.isPrevTargetUpdated = isPrevTargetUpdated;
-            var result = originalMethod.apply(this, arguments);
+            var result = typeof originalMethod === 'function' ? originalMethod.apply(this, arguments) : originalMethod;
             lastPrevUpdateTime = (_getPrevUpdateTime = getPrevUpdateTime()) !== null && _getPrevUpdateTime !== void 0 ? _getPrevUpdateTime : lastPrevUpdateTime;
             return result;
           };
+        } else if (typeof target[method] === 'function' && (methods.includes(method) || stepPattern.test(method) || endPattern.test(method))) {
+          var _originalMethod = target[method];
+          target[method] = function () {
+            var _getPrevUpdateTime2;
+            TargetUtil.currentTargetName = cleanKey;
+            TargetUtil.currentTModel = tmodel;
+            this.key = cleanKey;
+            this.prevTargetValue = getPrevValue();
+            this.isPrevTargetUpdated = isPrevTargetUpdated;
+            var result = typeof _originalMethod === 'function' ? _originalMethod.apply(this, arguments) : _originalMethod;
+            lastPrevUpdateTime = (_getPrevUpdateTime2 = getPrevUpdateTime()) !== null && _getPrevUpdateTime2 !== void 0 ? _getPrevUpdateTime2 : lastPrevUpdateTime;
+            return result;
+          };
         }
       });
     }
@@ -366,69 +379,5 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
         }
       }
     }
-  }, {
-    key: "morph",
-    value: function morph(tmodel, key, fromValue, toValue, step) {
-      var easing = tmodel.getTargetEasing(key);
-      var easingStep = easing ? easing(tmodel.getTargetStepPercent(key, step)) : tmodel.getTargetStepPercent(key, step);
-      if (_TargetData.TargetData.colorMap[key]) {
-        var targetColors = _ColorUtil.ColorUtil.color2Integers(toValue);
-        var lastColors = fromValue ? _ColorUtil.ColorUtil.color2Integers(fromValue) : _ColorUtil.ColorUtil.color2Integers('#fff');
-        if (targetColors && lastColors) {
-          var red = Math.floor(targetColors[0] * easingStep + lastColors[0] * (1 - easingStep));
-          var green = Math.floor(targetColors[1] * easingStep + lastColors[1] * (1 - easingStep));
-          var blue = Math.floor(targetColors[2] * easingStep + lastColors[2] * (1 - easingStep));
-          return "rgb(".concat(red, ",").concat(green, ",").concat(blue, ")");
-        } else {
-          return toValue;
-        }
-      } else {
-        return typeof toValue === 'number' ? toValue * easingStep + fromValue * (1 - easingStep) : toValue;
-      }
-    }
-  }, {
-    key: "setWidthFromDom",
-    value: function setWidthFromDom(child) {
-      var timestamp = child.domWidthTimestamp;
-      var parent = child.getParent();
-      var domParent = child.getDomParent();
-      var rerender = false;
-      if ((0, _App.getManager)().needsRerender(child)) {
-        child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
-        rerender = true;
-      }
-      if (rerender || parent && timestamp <= parent.getDimLastUpdate() || domParent && timestamp <= domParent.getDimLastUpdate()) {
-        child.$dom.width('auto');
-        var width = child.$dom.width();
-        child.domWidthTimestamp = _TUtil.TUtil.now();
-        child.val('width', width);
-        if (width > 0 || width === 0 && child.lastVal('width') > 0) {
-          child.addToStyleTargetList('width');
-        }
-        (0, _App.getRunScheduler)().schedule(15, 'resize');
-      }
-    }
-  }, {
-    key: "setHeightFromDom",
-    value: function setHeightFromDom(child) {
-      var timestamp = child.domHeightTimestamp;
-      var parent = child.getParent();
-      var domParent = child.getDomParent();
-      var rerender = false;
-      if ((0, _App.getManager)().needsRerender(child)) {
-        child.isTextOnly() ? child.$dom.text(child.getHtml()) : child.$dom.html(child.getHtml());
-        rerender = true;
-      }
-      if (rerender || parent && timestamp <= parent.getDimLastUpdate() || domParent && timestamp <= domParent.getDimLastUpdate()) {
-        child.$dom.height('auto');
-        var height = child.$dom.height();
-        child.domHeightTimestamp = _TUtil.TUtil.now();
-        child.val('height', height);
-        if (height > 0 || height === 0 && child.lastVal('height') > 0) {
-          child.addToStyleTargetList('height');
-        }
-        (0, _App.getRunScheduler)().schedule(15, 'resize');
-      }
-    }
   }]);
 }();

package/package.json

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