targetj 1.0.258 → 1.0.260

package/build/StateUtil.js

@@ -17,6 +17,7 @@ function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r),
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { TUtil } from "./TUtil.js";
+import { TModelFactory } from "./TModelFactory.js";
 var TMODEL_REF_KEY = "__targetjsTModelRef";
 
 /*
@@ -390,8 +391,9 @@ var StateUtil = /*#__PURE__*/function () {
     value: function exportRuntimeState(tmodel) {
       var fields = {};
       for (var _i8 = 0, _Object$keys4 = Object.keys(tmodel); _i8 < _Object$keys4.length; _i8++) {
+        var _tmodel$excludeRuntim;
         var key = _Object$keys4[_i8];
-        if (EXCLUDED_RUNTIME_FIELDS.has(key)) {
+        if (EXCLUDED_RUNTIME_FIELDS.has(key) || (_tmodel$excludeRuntim = tmodel.excludeRuntimeSnapshotField) !== null && _tmodel$excludeRuntim !== void 0 && _tmodel$excludeRuntim.call(tmodel, key)) {
           continue;
         }
         fields[key] = tmodel[key];
@@ -406,6 +408,7 @@ var StateUtil = /*#__PURE__*/function () {
   }, {
     key: "importRuntimeState",
     value: function importRuntimeState(tmodel, runtime, tmodelIdMap) {
+      var _tmodel$restoreRuntim;
       var _ref2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
         _ref2$timeOffset = _ref2.timeOffset,
         timeOffset = _ref2$timeOffset === void 0 ? 0 : _ref2$timeOffset;
@@ -422,15 +425,7 @@ var StateUtil = /*#__PURE__*/function () {
         tmodel[key] = value;
       }
       StateUtil.clearMaterializedChildOperations(tmodel._state);
-
-      /*
-       * The child tree has already been reconstructed directly.
-       */
       tmodel.childrenUpdateFlag = false;
-
-      /*
-       * DOM and Web Animation objects belong to the old runtime.
-       */
       tmodel.$dom = null;
       tmodel.viewport = undefined;
       tmodel.hasDomNow = false;
@@ -438,20 +433,21 @@ var StateUtil = /*#__PURE__*/function () {
       tmodel.waapiBatch = undefined;
       tmodel.finalKeyframe = undefined;
       tmodel.finalRawFrame = undefined;
+      (_tmodel$restoreRuntim = tmodel.restoreRuntimeDerivedState) === null || _tmodel$restoreRuntim === void 0 || _tmodel$restoreRuntim.call(tmodel);
       return tmodel;
     }
   }, {
     key: "createRuntimeSnapshot",
     value: function createRuntimeSnapshot(tmodel) {
-      var _tmodel$oidNum, _tmodel$targets, _tmodel$targets2, _tmodel$originalTarge;
-      var children = _toConsumableArray(tmodel.getChildren());
+      var _tmodel$allChildrenLi, _tmodel$oidNum, _tmodel$targets, _tmodel$targets2, _tmodel$originalTarge;
+      var children = _toConsumableArray((_tmodel$allChildrenLi = tmodel.allChildrenList) !== null && _tmodel$allChildrenLi !== void 0 ? _tmodel$allChildrenLi : []);
       var targetDefinitions = TUtil.cloneTargetDefinition(tmodel.targetDefinitions);
       return {
         oid: tmodel.oid,
         oidNum: (_tmodel$oidNum = tmodel.oidNum) !== null && _tmodel$oidNum !== void 0 ? _tmodel$oidNum : 0,
         originalId: tmodel.originalId,
         type: tmodel.type,
-        usesExistingDom: ((_tmodel$targets = tmodel.targets) === null || _tmodel$targets === void 0 ? void 0 : _tmodel$targets.domIsland) === true || ((_tmodel$targets2 = tmodel.targets) === null || _tmodel$targets2 === void 0 ? void 0 : _tmodel$targets2.reuseDomDefinition) === true || ((_tmodel$originalTarge = tmodel.originalTargetNames) === null || _tmodel$originalTarge === void 0 ? void 0 : _tmodel$originalTarge.includes('$dom')),
+        usesExistingDom: ((_tmodel$targets = tmodel.targets) === null || _tmodel$targets === void 0 ? void 0 : _tmodel$targets.domIsland) === true || ((_tmodel$targets2 = tmodel.targets) === null || _tmodel$targets2 === void 0 ? void 0 : _tmodel$targets2.reuseDomDefinition) === true || ((_tmodel$originalTarge = tmodel.originalTargetNames) === null || _tmodel$originalTarge === void 0 ? void 0 : _tmodel$originalTarge.includes("$dom")),
         targets: StateUtil.encodeValue(targetDefinitions),
         targetRuntime: StateUtil.exportTargetRuntime(tmodel),
         runtime: StateUtil.exportRuntimeState(tmodel),
@@ -468,10 +464,13 @@ var StateUtil = /*#__PURE__*/function () {
         throw new TypeError("A TModel constructor is required.");
       }
       var targets = StateUtil.encodeValue(snapshot.targets);
-      var tmodel = new TModelClass(snapshot.type, targets, snapshot.oid, {
+      var options = {
         restoringRuntime: true,
         usesExistingDom: snapshot.usesExistingDom === true
-      });
+      };
+      var tmodel = TModelFactory.create(snapshot.type, targets, function (type, targets, oid, options) {
+        return new TModelClass(type, targets, oid, options);
+      }, snapshot.oid, options);
       tmodel.type = snapshot.type;
       tmodel.oid = snapshot.oid;
       tmodel.oidNum = (_snapshot$oidNum = snapshot.oidNum) !== null && _snapshot$oidNum !== void 0 ? _snapshot$oidNum : 0;

package/build/TModel.js

@@ -29,6 +29,7 @@ import { TargetUtil } from "./TargetUtil.js";
 import { TModelUtil } from "./TModelUtil.js";
 import { DomInit } from "./DomInit.js";
 import { StateUtil } from "./StateUtil.js";
+import { TModelFactory } from "./TModelFactory.js";
 
 /**
  * It provides the base class for all objects in an app where targets are defined. 
@@ -156,35 +157,35 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
     value: function addChild(child) {
       var _this2 = this;
       var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.addedChildren.length + this.allChildrenList.length;
-      if (_typeof(child) === 'object') {
-        this.childrenUpdateFlag = true;
-        if (!(child instanceof TModel)) {
-          var foundKey = Object.keys(this.actualValues).find(function (key) {
-            return _this2.actualValues[key] === child;
-          });
-          var childDefinition = TUtil.cloneTargetDefinition(child);
-          if (foundKey) {
-            child = new TModel(childDefinition.id || foundKey, childDefinition);
-          } else {
-            child = new TModel("".concat(this.oid, "_"), childDefinition);
-          }
+      if (!child || _typeof(child) !== 'object') {
+        return this;
+      }
+      if (!(child instanceof TModel)) {
+        var childDefinition = TUtil.cloneTargetDefinition(child);
+        var foundKey = Object.keys(this.actualValues).find(function (key) {
+          return _this2.actualValues[key] === child;
+        });
+        var type = foundKey ? childDefinition.id || foundKey : "".concat(this.oid, "_");
+        child = TModelFactory.create(type, childDefinition, function (type, targets) {
+          return new TModel(type, targets);
+        });
+      }
+      this.childrenUpdateFlag = true;
+      if (!child.toDiscard) {
+        App.tmodelIdMap[child.oid] = child;
+        this.addedChildren.push({
+          index: index,
+          child: child
+        });
+        child.parent = this;
+        child.markLayoutDirty('addChild');
+        if (child.updatingTargetList.length > 0) {
+          this.addToUpdatingChildren(child);
         }
-        if (!child.toDiscard) {
-          App.tmodelIdMap[child.oid] = child;
-          this.addedChildren.push({
-            index: index,
-            child: child
-          });
-          child.parent = this;
-          child.markLayoutDirty('addChild');
-          if (child.updatingTargetList.length > 0) {
-            this.addToUpdatingChildren(child);
-          }
-          if (child.activeTargetList.length > 0) {
-            this.addToActiveChildren(child);
-          }
-          TargetUtil.markChildAction(this, TargetUtil.currentTargetName, child);
+        if (child.activeTargetList.length > 0) {
+          this.addToActiveChildren(child);
         }
+        TargetUtil.markChildAction(this, TargetUtil.currentTargetName, child);
       }
       return this;
     }
@@ -1081,6 +1082,16 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
       var _ref14, _this$val16;
       return (_ref14 = (_this$val16 = this.val("paddingBottom")) !== null && _this$val16 !== void 0 ? _this$val16 : this.val("bottomPadding")) !== null && _ref14 !== void 0 ? _ref14 : TModelUtil.getPaddingValue(this, "bottom");
     }
+  }, {
+    key: "setLayoutX",
+    value: function setLayoutX(value) {
+      this.x = value;
+    }
+  }, {
+    key: "setLayoutY",
+    value: function setLayoutY(value) {
+      this.y = value;
+    }
   }, {
     key: "getWidth",
     value: function getWidth() {
@@ -1165,6 +1176,29 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
     value: function createRuntimeSnapshot() {
       return StateUtil.createRuntimeSnapshot(this);
     }
+  }, {
+    key: "handleSpecialTarget",
+    value: function handleSpecialTarget() {
+      return false;
+    }
+  }, {
+    key: "handleSpecialTargetStep",
+    value: function handleSpecialTargetStep() {
+      return false;
+    }
+  }, {
+    key: "handleSpecialTargetEnd",
+    value: function handleSpecialTargetEnd() {
+      return false;
+    }
+  }, {
+    key: "finalizeChildrenTarget",
+    value: function finalizeChildrenTarget() {
+      return false;
+    }
+  }, {
+    key: "onDomReady",
+    value: function onDomReady() {}
   }]);
 }(BaseModel);
 export { TModel };

package/build/TModelFactory.js

@@ -0,0 +1,48 @@
+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; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var TModelFactory = /*#__PURE__*/function () {
+  function TModelFactory() {
+    _classCallCheck(this, TModelFactory);
+  }
+  return _createClass(TModelFactory, null, [{
+    key: "register",
+    value: function register(match, create) {
+      TModelFactory.factories.push({
+        match: match,
+        create: create
+      });
+    }
+  }, {
+    key: "create",
+    value: function create(type, targets, defaultCreator) {
+      for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+        args[_key - 3] = arguments[_key];
+      }
+      var _iterator = _createForOfIteratorHelper(this.factories),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          if (entry.match(targets)) {
+            return entry.create.apply(entry, [type, targets].concat(args));
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return defaultCreator.apply(void 0, [type, targets].concat(args));
+    }
+  }]);
+}();
+_defineProperty(TModelFactory, "factories", []);
+export { TModelFactory };

package/build/TModelManager.js

@@ -94,6 +94,14 @@ var TModelManager = /*#__PURE__*/function () {
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var tmodel = _step.value;
+          if (tmodel.isLightweightChild) {
+            delete lastVisibleMap[tmodel.oid];
+            delete lastPreservedMap[tmodel.oid];
+            delete this.visibleOidMap[tmodel.oid];
+            delete this.preservedDomMap[tmodel.oid];
+            this.domPolicyMap.delete(tmodel.oid);
+            continue;
+          }
           lastVisibleMap[tmodel.oid] = undefined;
           lastPreservedMap[tmodel.oid] = undefined;
           if (!tmodel.exists()) {
@@ -121,9 +129,12 @@ var TModelManager = /*#__PURE__*/function () {
           if (tmodel.hasDom()) {
             if (!tmodel.canHaveDom() || !tmodel.isIncluded() || tmodel.canDeleteDom() && !visible && !preserveDom) {
               this.addToDeletedDom(tmodel);
-              tmodel.getChildren().forEach(function (tmodel) {
-                if (!tmodel.managesOwnScroll()) {
-                  _this.addToRecursiveDeletedDom(tmodel);
+              tmodel.getChildren().forEach(function (child) {
+                if (child.isLightweightChild) {
+                  return;
+                }
+                if (!child.managesOwnScroll()) {
+                  _this.addToRecursiveDeletedDom(child);
                 }
               });
             }
@@ -284,15 +295,18 @@ var TModelManager = /*#__PURE__*/function () {
     key: "addToRecursiveDeletedDom",
     value: function addToRecursiveDeletedDom(tmodel) {
       var _this2 = this;
+      if (tmodel.isLightweightChild) {
+        return;
+      }
       delete this.visibleOidMap[tmodel.oid];
       delete this.preservedDomMap[tmodel.oid];
       if (!this.lists.deletedDom.includes(tmodel)) {
         if (tmodel.hasDom()) {
           this.lists.deletedDom.push(tmodel);
         }
-        tmodel.getChildren().forEach(function (tmodel) {
-          if (!tmodel.managesOwnScroll()) {
-            _this2.addToRecursiveDeletedDom(tmodel);
+        tmodel.getChildren().forEach(function (child) {
+          if (!child.isLightweightChild && !child.managesOwnScroll()) {
+            _this2.addToRecursiveDeletedDom(child);
           }
         });
       }
@@ -336,6 +350,9 @@ var TModelManager = /*#__PURE__*/function () {
   }, {
     key: "addDeletedTree",
     value: function addDeletedTree(tmodel) {
+      if (tmodel.isLightweightChild) {
+        return;
+      }
       delete this.visibleOidMap[tmodel.oid];
       delete this.preservedDomMap[tmodel.oid];
       this.domPolicyMap.delete(tmodel.oid);
@@ -347,7 +364,9 @@ var TModelManager = /*#__PURE__*/function () {
       try {
         for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
           var child = _step3.value;
-          this.addDeletedTree(child);
+          if (!child.isLightweightChild) {
+            this.addDeletedTree(child);
+          }
         }
       } catch (err) {
         _iterator3.e(err);
@@ -624,6 +643,14 @@ var TModelManager = /*#__PURE__*/function () {
       }
       for (var _i4 = 0, _arr3 = _toConsumableArray(tmodel.noDomUpdatingTargets); _i4 < _arr3.length; _i4++) {
         var key = _arr3[_i4];
+        var targetValue = tmodel.targetValues[key];
+        if (!targetValue) {
+          continue;
+        }
+        getTargetManager().catchupTargetByElapsed(tmodel, key, {
+          fireEnd: false
+        });
+        delete targetValue.catchupAt;
         var newStatus = getTargetManager().calculateTargetStatus(tmodel, key);
         tmodel.setTargetStatus(key, newStatus);
       }
@@ -646,26 +673,26 @@ var TModelManager = /*#__PURE__*/function () {
         _step11;
       try {
         for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-          var _tmodel3$domId;
-          var _tmodel3 = _step11.value;
-          var domId = (_tmodel3$domId = _tmodel3.domId) !== null && _tmodel3$domId !== void 0 ? _tmodel3$domId : _tmodel3.oid;
+          var _tmodel4$domId;
+          var _tmodel4 = _step11.value;
+          var domId = (_tmodel4$domId = _tmodel4.domId) !== null && _tmodel4$domId !== void 0 ? _tmodel4$domId : _tmodel4.oid;
           if ($Dom.query("#".concat(domId))) {
-            _tmodel3.$dom = new $Dom("#".concat(domId));
-            _tmodel3.$dom.attr('tgjs', 'true');
-            _tmodel3.hasDomNow = true;
-            _tmodel3.markLayoutDirty('hasDomNow');
-            attached.push(_tmodel3);
-            if (this.needsRerender(_tmodel3)) {
-              this.lists.rerender.push(_tmodel3);
+            _tmodel4.$dom = new $Dom("#".concat(domId));
+            _tmodel4.$dom.attr('tgjs', 'true');
+            _tmodel4.hasDomNow = true;
+            _tmodel4.markLayoutDirty('hasDomNow');
+            attached.push(_tmodel4);
+            if (this.needsRerender(_tmodel4)) {
+              this.lists.rerender.push(_tmodel4);
             }
-            if (this.needsRestyle(_tmodel3)) {
-              this.lists.restyle.push(_tmodel3);
+            if (this.needsRestyle(_tmodel4)) {
+              this.lists.restyle.push(_tmodel4);
             }
-            if (this.needsReasyncStyle(_tmodel3)) {
-              this.lists.reasyncStyle.push(_tmodel3);
+            if (this.needsReasyncStyle(_tmodel4)) {
+              this.lists.reasyncStyle.push(_tmodel4);
             }
           } else {
-            needsDom.push(_tmodel3);
+            needsDom.push(_tmodel4);
           }
         }
       } catch (err) {
@@ -723,16 +750,22 @@ var TModelManager = /*#__PURE__*/function () {
         var _tmodel = _attached[_i6];
         this.catchupNoDomTargetsBeforeStyle(_tmodel);
       }
+      var domReady = [];
       for (var _i7 = 0, _styleBatch = styleBatch; _i7 < _styleBatch.length; _i7++) {
         var _tmodel2 = _styleBatch[_i7];
         if (_tmodel2.hasDom()) {
           _tmodel2.hasDomNow = true;
           _tmodel2.markLayoutDirty('hasDomNow');
+          domReady.push(_tmodel2);
         }
         TModelUtil.initStyleMaps(_tmodel2);
         TModelUtil.fixStyle(_tmodel2);
         TModelUtil.fixAsyncStyle(_tmodel2);
       }
+      for (var _i8 = 0, _domReady = domReady; _i8 < _domReady.length; _i8++) {
+        var _tmodel3 = _domReady[_i8];
+        _tmodel3.onDomReady();
+      }
       this.activatePendingTargetsAfterDom(attached);
       getEvents().attachEvents(attached.filter(function (t) {
         var _t$externalEventMap;

package/build/TUtil.js

@@ -237,14 +237,19 @@ var TUtil = /*#__PURE__*/function () {
   }, {
     key: "runTargetValue",
     value: function runTargetValue(tmodel, target, key, cycle, lastValue) {
+      var instance = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : undefined;
       var cleanKey = TargetUtil.getTargetName(key);
       var isExternalEvent = TargetData.allEventMap[cleanKey];
+      var instanceArgs = TUtil.isDefined(instance) ? [instance] : [];
       if (isExternalEvent) {
-        return typeof target.value === 'function' ? target.value.call(tmodel, getEvents().getCurrentOriginalEvent(), cycle, lastValue) : TUtil.isDefined(target.value) ? target.value : target;
+        var _target$value;
+        return typeof target.value === 'function' ? (_target$value = target.value).call.apply(_target$value, [tmodel].concat(instanceArgs, [getEvents().getCurrentOriginalEvent(), cycle, lastValue])) : TUtil.isDefined(target.value) ? target.value : target;
       } else if (tmodel.val("___".concat(key))) {
-        return typeof target.value === 'function' ? target.value.call(tmodel, tmodel.val("___".concat(key)), cycle, lastValue) : TUtil.isDefined(target.value) ? target.value : target;
+        var _target$value2;
+        return typeof target.value === 'function' ? (_target$value2 = target.value).call.apply(_target$value2, [tmodel].concat(instanceArgs, [tmodel.val("___".concat(key)), cycle, lastValue])) : TUtil.isDefined(target.value) ? target.value : target;
       } else {
-        return typeof target.value === 'function' ? target.value.call(tmodel, cycle, lastValue) : TUtil.isDefined(target.value) ? target.value : target;
+        var _target$value3;
+        return typeof target.value === 'function' ? (_target$value3 = target.value).call.apply(_target$value3, [tmodel].concat(instanceArgs, [cycle, lastValue])) : TUtil.isDefined(target.value) ? target.value : target;
       }
     }
   }, {

package/build/TargetData.js

@@ -235,7 +235,7 @@ _defineProperty(TargetData, "attributeTargetMap", {
   minLength: true,
   max: true,
   min: true,
-  readonly: true,
+  readOnly: true,
   required: true,
   alt: true,
   disabled: true,
@@ -708,7 +708,7 @@ _defineProperty(TargetData, "attributesToTargets", {
   oninput: 'onInput',
   onsubmit: 'onSubmit',
   onvisible: 'onVisible',
-  oninvisible: 'oInVisible',
+  oninvisible: 'oInvisible',
   onresize: 'onResize',
   textalign: 'textAlign',
   preventdefault: 'preventDefault',
@@ -811,7 +811,7 @@ _defineProperty(TargetData, "internalEventMap", {
   onVisible: function onVisible(tmodel) {
     return tmodel.isNowVisible;
   },
-  onInVisible: function onInVisible(tmodel) {
+  onInvisible: function onInvisible(tmodel) {
     return tmodel.isNowInvisible;
   },
   onResize: function onResize(tmodel) {
@@ -923,6 +923,6 @@ _defineProperty(TargetData, "lifecyclePatterns", {
 });
 _defineProperty(TargetData, "eventSet", new Set([].concat(_toConsumableArray(Object.keys(_TargetData.allEventMap)), _toConsumableArray(Object.keys(_TargetData.internalEventMap)))));
 _defineProperty(TargetData, "styleSet", new Set([].concat(_toConsumableArray(Object.keys(_TargetData.styleTargetMap)), _toConsumableArray(Object.keys(_TargetData.asyncStyleTargetMap)), _toConsumableArray(Object.keys(_TargetData.attributeTargetMap)))));
-_defineProperty(TargetData, "reservedKeywordSet", new Set([].concat(_toConsumableArray(_TargetData.styleSet), _toConsumableArray(Object.keys(_TargetData.defaultActualValues())), _toConsumableArray(Object.keys(_TargetData.allEventMap)), _toConsumableArray(Object.keys(_TargetData.internalEventMap)), _toConsumableArray(Object.keys(_TargetData.mustExecuteTargets)), ['html', 'isInFlow', 'domHolder', 'domParent', 'gap', 'widthFromDom', 'heightFromDom', 'requiresDom', 'preventDefault', 'canDeleteDom', 'textOnly', 'styling', '$dom', 'defaultStyling', 'reuseDomDefinition', 'canHaveDom', 'excludeXYCalc', 'excludeX', 'excludeY', 'containerOverflowMode', 'itemOverflowMode', 'baseElement', 'element', 'otype', 'calculateChildren', 'domIsland', 'bracketThreshold', 'bracketSize', 'shouldBeBracketed', 'sourceDom'])));
+_defineProperty(TargetData, "reservedKeywordSet", new Set([].concat(_toConsumableArray(_TargetData.styleSet), _toConsumableArray(Object.keys(_TargetData.defaultActualValues())), _toConsumableArray(Object.keys(_TargetData.allEventMap)), _toConsumableArray(Object.keys(_TargetData.internalEventMap)), _toConsumableArray(Object.keys(_TargetData.mustExecuteTargets)), ['children', 'addChildren', 'addParticles', 'html', 'isInFlow', 'domHolder', 'domParent', 'gap', 'widthFromDom', 'heightFromDom', 'requiresDom', 'preventDefault', 'canDeleteDom', 'textOnly', 'styling', '$dom', 'defaultStyling', 'reuseDomDefinition', 'canHaveDom', 'excludeXYCalc', 'excludeX', 'excludeY', 'containerOverflowMode', 'itemOverflowMode', 'baseElement', 'element', 'otype', 'calculateChildren', 'domIsland', 'bracketThreshold', 'bracketSize', 'shouldBeBracketed', 'sourceDom'])));
 _defineProperty(TargetData, "activationKeywordSet", new Set(['originalTModel', 'originalTargetName', 'activateNextTarget']));
 export { TargetData };

package/build/TargetExecutor.js

@@ -25,6 +25,7 @@ import { TUtil } from "./TUtil.js";
 import { AnimationUtil } from "./AnimationUtil.js";
 import { Easing } from "./Easing.js";
 import { getLoader, getRunScheduler, getAnimationManager } from "./App.js";
+import { TModelFactory } from "./TModelFactory.js";
 
 /**
  * It is responsible for executing both declarative and imperative targets.
@@ -315,7 +316,23 @@ var TargetExecutor = /*#__PURE__*/function () {
         return;
       }
       var targetInitial = !tmodel.targetValues[key] && TUtil.isDefined(tmodel.targets[key].initialValue) ? tmodel.targets[key].initialValue : undefined;
-      var valueArray = TargetParser.getValueStepsCycles(tmodel, key, tmodel.targets[key], cycle);
+      var target = tmodel.targets[key];
+      var hasInstances = target && _typeof(target) === 'object' && TUtil.isDefined(target.instances);
+      var instances = hasInstances ? TargetParser.getTargetInstances(tmodel, key, target, cycle) : 1;
+      var valueArray;
+      if (hasInstances) {
+        var values = new Array(instances);
+        valueArray = TargetParser.getValueStepsCycles(tmodel, key, target, cycle, 0);
+        values[0] = valueArray[0];
+        valueArray[0] = values;
+        var lastValues = tmodel.val(key);
+        for (var instance = 1; instance < instances; instance++) {
+          var lastValue = Array.isArray(lastValues) ? lastValues[instance] : lastValues;
+          values[instance] = TargetParser.getInstanceTargetValue(tmodel, key, target, cycle, lastValue, instance);
+        }
+      } else {
+        valueArray = TargetParser.getValueStepsCycles(tmodel, key, target, cycle);
+      }
       var newValue = valueArray[0];
       var newSteps = valueArray[1] || 0;
       var newInterval = valueArray[2] || 0;
@@ -324,20 +341,42 @@ var TargetExecutor = /*#__PURE__*/function () {
       var targetValue = tmodel.targetValues[key] || TargetUtil.emptyValue();
       tmodel.targetValues[key] = targetValue;
       var easing = TUtil.isDefined(newEasing) ? newEasing : TUtil.isDefined(tmodel.targets[key].easing) ? tmodel.targets[key].easing : undefined;
+      var specialTarget;
       if (TargetParser.isIntervalTarget(newValue)) {
         TargetExecutor.assignSingleTarget(targetValue, undefined, targetInitial, 0, 2, newValue.interval, easing);
+      } else if (specialTarget = tmodel.handleSpecialTarget(key, newValue, {
+        steps: newSteps,
+        cycles: newCycles,
+        interval: newInterval,
+        easing: easing
+      })) {
+        var _options$steps, _options$cycles, _options$interval, _options$easing;
+        var options = specialTarget === true ? {} : specialTarget;
+        TargetExecutor.assignSingleTarget(targetValue, newValue, undefined, (_options$steps = options.steps) !== null && _options$steps !== void 0 ? _options$steps : newSteps, (_options$cycles = options.cycles) !== null && _options$cycles !== void 0 ? _options$cycles : newCycles, (_options$interval = options.interval) !== null && _options$interval !== void 0 ? _options$interval : newInterval, (_options$easing = options.easing) !== null && _options$easing !== void 0 ? _options$easing : easing);
       } else if (TargetParser.isChildTarget(key, newValue)) {
         tmodel.addChild(newValue);
         TargetExecutor.assignSingleTarget(targetValue, newValue, undefined, 0, newCycles, newInterval, easing);
       } else if (TargetParser.isChildrenTarget(key, newValue)) {
-        var values = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
-        values.forEach(function (child) {
+        var _options$steps2, _options$cycles2, _options$interval2, _options$easing2;
+        var _values = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+        _values.forEach(function (child) {
+          var addedChildrenCount = tmodel.addedChildren.length;
           tmodel.addChild(child);
-          TargetUtil.markAddChild(tmodel, TargetUtil.currentTargetName, tmodel.addedChildren[tmodel.addedChildren.length - 1].child);
+          if (tmodel.addedChildren.length > addedChildrenCount) {
+            var addedChild = tmodel.addedChildren[tmodel.addedChildren.length - 1].child;
+            TargetUtil.markAddChild(tmodel, TargetUtil.currentTargetName, addedChild);
+          }
         });
-        TargetExecutor.assignSingleTarget(targetValue, newValue, undefined, 0, newCycles, newInterval, easing);
+        var result = tmodel.finalizeChildrenTarget(key, {
+          steps: newSteps,
+          cycles: newCycles,
+          interval: newInterval,
+          easing: easing
+        });
+        var _options = result && _typeof(result) === "object" ? result : {};
+        TargetExecutor.assignSingleTarget(targetValue, newValue, undefined, (_options$steps2 = _options.steps) !== null && _options$steps2 !== void 0 ? _options$steps2 : 0, (_options$cycles2 = _options.cycles) !== null && _options$cycles2 !== void 0 ? _options$cycles2 : newCycles, (_options$interval2 = _options.interval) !== null && _options$interval2 !== void 0 ? _options$interval2 : newInterval, (_options$easing2 = _options.easing) !== null && _options$easing2 !== void 0 ? _options$easing2 : easing);
       } else if (TargetParser.isChildObjectTarget(key, tmodel.targets[key])) {
-        var child = new TModel(key, tmodel.targets[key]);
+        var child = TargetExecutor.createTModel(key, tmodel.targets[key]);
         tmodel.addChild(child);
         var filteredValue = Object.fromEntries(Object.entries(newValue).filter(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 1),
@@ -365,6 +404,13 @@ var TargetExecutor = /*#__PURE__*/function () {
         TargetExecutor.assignSingleTarget(targetValue, newValue, targetInitial, newSteps, newCycles, newInterval, easing);
       }
     }
+  }, {
+    key: "createTModel",
+    value: function createTModel(key, targets) {
+      return TModelFactory.create(key, targets, function (type, targets) {
+        return new TModel(type, targets);
+      });
+    }
   }]);
 }();
 export { TargetExecutor };

package/build/TargetManager.js

@@ -99,7 +99,7 @@ var TargetManager = /*#__PURE__*/function () {
           }
           schedulePeriod = ScheduleUtil.scheduleExecution(tmodel, key);
           if (schedulePeriod > 0) {
-            getRunScheduler().schedule(schedulePeriod, "setActualValues-".concat(tmodel.oid));
+            getRunScheduler().schedule(schedulePeriod, "setActualValues-".concat(tmodel.oid, "-").concat(key));
           } else {
             tmodel.resetScheduleTimeStamp(key);
             this.setActualValue(tmodel, key);
@@ -161,7 +161,8 @@ var TargetManager = /*#__PURE__*/function () {
           }
         }
       } else {
-        needsRefire = TUtil.handleValueChange(tmodel, key);
+        needsRefire = tmodel.handleSpecialTargetStep(key, step, steps) || needsRefire;
+        needsRefire = TUtil.handleValueChange(tmodel, key) || needsRefire;
         if (target !== null && target !== void 0 && target.activateNextTarget && !target.activateNextTarget.endsWith('$$') && target.activateNextTarget.endsWith('$')) {
           needsRefire = true;
           TargetUtil.shouldActivateNextTarget(tmodel, key);
@@ -188,6 +189,7 @@ var TargetManager = /*#__PURE__*/function () {
       }
       var newStatus = this.calculateTargetStatus(tmodel, key);
       tmodel.setTargetStatus(key, newStatus);
+      tmodel.handleSpecialTargetEnd(key);
       if (tmodel.isTargetImperative(key)) {
         var capKey = TargetUtil.getTargetName(TUtil.capitalizeFirstLetter(key));
         if (originalTarget && typeof originalTarget["on".concat(capKey, "End")] === "function") {
@@ -371,6 +373,7 @@ var TargetManager = /*#__PURE__*/function () {
     key: "animateActualValue",
     value: function animateActualValue(tmodel, key, targetValue, state, step, valuePointer) {
       if (!tmodel.hasDom()) {
+        tmodel.addToNoDomUpdatingTargets(key);
         return;
       }
       var newValue = step > 0 ? TModelUtil.easingMorph(tmodel, key, state.initialValue, state.theValue, step, state.steps) : state.initialValue;

package/build/TargetParser.js

@@ -98,7 +98,23 @@ var TargetParser = /*#__PURE__*/function () {
       if (!value || _typeof(value) !== 'object' || Array.isArray(value) || Object.getPrototypeOf(value) !== Object.prototype) {
         return false;
       }
-      return Object.prototype.hasOwnProperty.call(value, 'value') || Object.prototype.hasOwnProperty.call(value, 'steps') || Object.prototype.hasOwnProperty.call(value, 'interval') || Object.prototype.hasOwnProperty.call(value, 'easing') || Object.prototype.hasOwnProperty.call(value, 'cycles');
+      return Object.prototype.hasOwnProperty.call(value, 'value') || Object.prototype.hasOwnProperty.call(value, 'steps') || Object.prototype.hasOwnProperty.call(value, 'interval') || Object.prototype.hasOwnProperty.call(value, 'easing') || Object.prototype.hasOwnProperty.call(value, 'cycles') || Object.prototype.hasOwnProperty.call(value, 'instances');
+    }
+  }, {
+    key: "getTargetInstances",
+    value: function getTargetInstances(tmodel, key) {
+      var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : tmodel.targets[key];
+      var cycle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : tmodel.getTargetCycle(key);
+      if (!target || _typeof(target) !== 'object' || !TUtil.isDefined(target.instances)) {
+        return 1;
+      }
+      var instances = typeof target.instances === 'function' ? target.instances.call(tmodel, cycle) : target.instances;
+      return Math.max(1, Math.floor(Number(instances) || 1));
+    }
+  }, {
+    key: "getInstanceTargetValue",
+    value: function getInstanceTargetValue(tmodel, key, target, cycle, lastValue, instance) {
+      return TUtil.runTargetValue(tmodel, target, key, cycle, lastValue, instance);
     }
   }, {
     key: "isChildrenTarget",
@@ -215,6 +231,7 @@ var TargetParser = /*#__PURE__*/function () {
     value: function getValueStepsCycles(tmodel, key) {
       var _target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : tmodel.targets[key];
       var cycle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : tmodel.getTargetCycle(key);
+      var instance = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
       var valueOnly = _target && _target.valueOnly;
       var lastValue = tmodel.val(key);
       var value = null,
@@ -256,7 +273,7 @@ var TargetParser = /*#__PURE__*/function () {
 
         // Plain objects: compute value + params (steps/interval/easing/cycles)
         if (_typeof(target) === "object" && target !== null && Object.getPrototypeOf(target) === Object.prototype) {
-          var valueResult = TUtil.runTargetValue(tmodel, target, key, cycle, lastValue);
+          var valueResult = TUtil.runTargetValue(tmodel, target, key, cycle, lastValue, instance);
           if (TargetParser.isPrimitiveArray(valueResult) && (TUtil.isDefined(target.steps) || TUtil.isDefined(target.interval) || TUtil.isDefined(target.easing) || TUtil.isDefined(target.cycles))) {
             value = {
               list: valueResult