targetj 1.0.250 → 1.0.251

package/README.md

@@ -56,7 +56,7 @@ npm install targetj
 
 **2. Example**
 
-This creates the following sequential sequence: appear → bounce → move → turn red → log. Notice how the code follows the UI sequence. There is only one state, and the animation transitions are part of that state.
+This creates the following sequence: appear → bounce → move → turn red → log. Notice how the code follows the UI sequence. There is only one state, and the animation transitions are part of that state.
 
 ```javascript
 import { App } from "targetj";
@@ -342,66 +342,79 @@ Lastly, `pause$$` adds a short pause before highlighting the first user with an
 import { App } from "targetj";
 
 App({
-    searchButton: {
+      containerOverflowMode: 'always',
+      searchButton: {
         element: 'button',
         type: 'button',
-        y: 20, x: 20,
-        width: 220, height: 60, lineHeight: 60,
-        borderRadius: 10, border: 0, backgroundColor: '#f5f5f5',
-        cursor: 'pointer', textAlign: 'center',
+        width: 220,
+        height: 60,
+        lineHeight: 60,
+        border: 0,
+        borderRadius: 10,
+        cursor: 'pointer',
+        textAlign: 'center',
+        backgroundColor: '#f5f5f5',
         html: 'Search',
         onClick() {
-            this.setTarget('scale', {value: [1, 1.15, 1], steps: 8, interval: 12 });
-            this.setTarget('backgroundColor', {value: [ '#ffe8ec', '#f5f5f5' ], steps: 12, interval: 12});
-            this.parent.getChild('users').activateTarget('fetch', { reset: true });
-        }
-    },
-    users: {
-        y: 90,
-        x: 20,
+          this.setTarget('html', 'Searching...');
+          const users = this.parent.getChild('users');
+          this.setTarget('scale', { value: [1, 1.15, 1], steps: 12 });
+          this.setTarget('backgroundColor', { value: ['#ffe8ec', '#f5f5f5'], steps: 12 });
+          users.activateTarget('search', { reset: true });
+        },
+      },
+      users: {
         gap: 10,
+        marginTop: 20,
         containerOverflowMode: 'always',
-        fetch: {
-            active: false,
-            value: 'https://targetjs.io/api/randomUsers'
-        },
-        removeChildren$$() {
+        search: {
+          active: false,
+          value() {
             this.removeChildren();
+          },
         },
+        fetch$$: 'https://targetjs.io/api/randomUsers',
         addChildren$$: {
-            cycles() { return this.val('fetch').length; },
-            value(i) {
-                const user = this.val('fetch')[i];
-                return {
-                    width: 360,
-                    backgroundColor: "#fafafa",
-                    scale: {value: {list: [0.8, 1]}, steps: 14},
-                    boxShadow: "0 6px 16px rgba(0,0,0,.08)",
-                    containerOverflowMode: 'always',
-                     userName: {
-                        padding: 10,
-                        height: 30,
-                        fontWeight: 600,
-                        opacity: { value: [0, 1], steps: 50 },
-                        html() { return user.name; }
-                    },
-                    userEmail: {
-                        padding: 10,
-                        opacity: { value: [0, 0.7], steps: 50 },
-                        html() { return user.email; }
-                    }
-                };
-            }
+          cycles() {
+            return this.val('fetch').length;
+          },
+          value(i) {
+            const user = this.val('fetch')[i];
+            return {
+              width: 340,
+              borderRadius: 10,
+              backgroundColor: '#fafafa',
+              boxShadow: '0 6px 16px rgba(0, 0, 0, 0.08)',
+              padding: 14,
+              containerOverflowMode: 'always',
+              scale: { value: [0.96, 1], steps: 10 },
+              userName: {
+                marginTop: 5,
+                html: user.name,
+                fontWeight: 700,
+              },
+              userEmail: {
+                marginTop: 5,
+                html: user.email,
+                opacity: 0.7,
+              },
+            };
+          },
+        },
+        relabelButton$$() {
+          const button = this.parent.getChild('searchButton');
+          button.setTarget('html', 'Search');
         },
         pause$$: { interval: 150 },
-        highlightOne$$() {
-            const user = this.getChild(0);
-            user.setTarget('backgroundColor', { value: ['#fff7cc', '#fff1a8'], steps: 14 });
-            user.setTarget('scale', { value: [1, 1.04, 1], steps: 14 });
-            user.setTarget('boxShadow', '0 10px 24px rgba(0,0,0,.14)');
-        }
-    }
-}).mount('#app');
+        highlightFirst$$() {
+          const firstUser = this.getChild(0);
+          if (firstUser) {
+            firstUser.setTarget('scale', { value: [1, 1.04, 1], steps: 10 });
+            firstUser.setTarget('backgroundColor', { value: '#fff1a8', steps: 10 });
+          }
+        },
+      },
+    }).mount('#app');
 ```
 
 ### Infinite Loading and Scrolling Example

package/build/TModel.js

@@ -1,3 +1,4 @@
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 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; } }
@@ -18,7 +19,7 @@ function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? O
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 import { BaseModel } from "./BaseModel.js";
-import { App, getLocationManager, getRunScheduler, getEvents } from "./App.js";
+import { App, getLocationManager, getRunScheduler, getEvents, getManager } from "./App.js";
 import { Viewport } from "./Viewport.js";
 import { TUtil } from "./TUtil.js";
 import { VisibilityUtil } from "./VisibilityUtil.js";
@@ -120,6 +121,7 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
         return;
       }
       TargetUtil.resetBeforeDeletion(child);
+      getManager().markTModelDeleted(child);
       this.deletedChildren.push(child);
       this.removeFromUpdatingChildren(child);
       this.removeFromActiveChildren(child);
@@ -300,22 +302,49 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "removeChildren",
     value: function removeChildren() {
-      if (!this.hasChildren()) {
+      var children = _toConsumableArray(this.getChildren());
+      if (children.length === 0) {
         return this;
       }
-      this.markLayoutDirty('removeChildren');
-      this.allChildrenList.forEach(function (t) {
-        TargetUtil.resetBeforeDeletion(t);
-        t.$dom = undefined;
-      });
+      this.markLayoutDirty("removeChildren");
+      var manager = getManager();
+      var _iterator = _createForOfIteratorHelper(children),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var child = _step.value;
+          TargetUtil.resetBeforeDeletion(child);
+          child.cancelAnimation();
+          delete manager.visibleOidMap[child.oid];
+          delete manager.preservedDomMap[child.oid];
+          manager.domPolicyMap.delete(child.oid);
+          manager.deletedTModelRoots.delete(child);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (this.hasDom()) {
+        this.$dom.deleteAll();
+      }
+      var _iterator2 = _createForOfIteratorHelper(children),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _child = _step2.value;
+          manager.resetTModelDom(_child);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
       this.allChildrenList = [];
       this.allChildrenMap = {};
       this.clearUpdatingChildren();
       this.clearActiveChildren();
       this.clearAnimatingChildren();
-      if (this.hasDom()) {
-        this.$dom.deleteAll();
-      }
       return this;
     }
   }, {

package/build/TModelManager.js

@@ -52,6 +52,7 @@ var TModelManager = /*#__PURE__*/function () {
       this.targetMethodMap = {};
       this.noDomMap = {};
       this.domPolicyMap = new Map();
+      this.deletedTModelRoots = new Set();
     }
   }, {
     key: "clearFrameLists",
@@ -86,6 +87,7 @@ var TModelManager = /*#__PURE__*/function () {
       var lastVisibleMap = _objectSpread({}, this.visibleOidMap);
       var lastPreservedMap = _objectSpread({}, this.preservedDomMap);
       this.clearFrameLists();
+      this.collectDeletedTModels();
       var activated = [];
       var _iterator = _createForOfIteratorHelper(getLocationManager().hasLocationList),
         _step;
@@ -294,6 +296,55 @@ var TModelManager = /*#__PURE__*/function () {
         this.lists.deletedDom.push(tmodel);
       }
     }
+  }, {
+    key: "markTModelDeleted",
+    value: function markTModelDeleted(tmodel) {
+      if (tmodel) {
+        this.deletedTModelRoots.add(tmodel);
+      }
+    }
+  }, {
+    key: "collectDeletedTModels",
+    value: function collectDeletedTModels() {
+      var _iterator2 = _createForOfIteratorHelper(this.deletedTModelRoots),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var root = _step2.value;
+          if (root.exists()) {
+            continue;
+          }
+          this.addDeletedTree(root);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      this.deletedTModelRoots.clear();
+    }
+  }, {
+    key: "addDeletedTree",
+    value: function addDeletedTree(tmodel) {
+      delete this.visibleOidMap[tmodel.oid];
+      delete this.preservedDomMap[tmodel.oid];
+      this.domPolicyMap.delete(tmodel.oid);
+      if (tmodel.hasDom() && !this.lists.deletedDom.includes(tmodel)) {
+        this.lists.deletedDom.push(tmodel);
+      }
+      var _iterator3 = _createForOfIteratorHelper(tmodel.getChildren()),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var child = _step3.value;
+          this.addDeletedTree(child);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
   }, {
     key: "getVisibles",
     value: function getVisibles() {
@@ -344,32 +395,32 @@ var TModelManager = /*#__PURE__*/function () {
   }, {
     key: "renderTModels",
     value: function renderTModels() {
-      var _iterator2 = _createForOfIteratorHelper(this.lists.rerender),
-        _step2;
+      var _iterator4 = _createForOfIteratorHelper(this.lists.rerender),
+        _step4;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
           var _tmodel$$dom, _tmodel$$dom2;
-          var tmodel = _step2.value;
+          var tmodel = _step4.value;
           tmodel.isTextOnly() ? (_tmodel$$dom = tmodel.$dom) === null || _tmodel$$dom === void 0 ? void 0 : _tmodel$$dom.text(tmodel.getHtml()) : (_tmodel$$dom2 = tmodel.$dom) === null || _tmodel$$dom2 === void 0 ? void 0 : _tmodel$$dom2.html(tmodel.getHtml());
           tmodel.setLastUpdate('html');
           tmodel.domHeightTimestamp = 0;
           tmodel.domWidthTimestamp = 0;
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator2.f();
+        _iterator4.f();
       }
     }
   }, {
     key: "reattachTModels",
     value: function reattachTModels() {
       var reattached = [];
-      var _iterator3 = _createForOfIteratorHelper(this.lists.reattach),
-        _step3;
+      var _iterator5 = _createForOfIteratorHelper(this.lists.reattach),
+        _step5;
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var tmodel = _step3.value;
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var tmodel = _step5.value;
           var changed = tmodel.hasBaseElementChanged();
           var domParent = tmodel.getDomParent();
           if (!domParent || !domParent.$dom) {
@@ -393,9 +444,9 @@ var TModelManager = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator3.f();
+        _iterator5.f();
       }
       this.activatePendingTargetsAfterDom(reattached);
     }
@@ -405,11 +456,11 @@ var TModelManager = /*#__PURE__*/function () {
       this.lists.relocation.sort(function (a, b) {
         return b.domOrderIndex - a.domOrderIndex;
       });
-      var _iterator4 = _createForOfIteratorHelper(this.lists.relocation),
-        _step4;
+      var _iterator6 = _createForOfIteratorHelper(this.lists.relocation),
+        _step6;
       try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var tmodel = _step4.value;
+        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          var tmodel = _step6.value;
           var domParent = tmodel.getDomParent();
           if (!domParent || !domParent.$dom) {
             continue;
@@ -418,9 +469,9 @@ var TModelManager = /*#__PURE__*/function () {
           tmodel.domOrderIndex = undefined;
         }
       } catch (err) {
-        _iterator4.e(err);
+        _iterator6.e(err);
       } finally {
-        _iterator4.f();
+        _iterator6.f();
       }
     }
   }, {
@@ -435,20 +486,20 @@ var TModelManager = /*#__PURE__*/function () {
   }, {
     key: "deleteDoms",
     value: function deleteDoms() {
-      var _iterator5 = _createForOfIteratorHelper(this.lists.deletedDom),
-        _step5;
+      var _iterator7 = _createForOfIteratorHelper(this.lists.deletedDom),
+        _step7;
       try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var tmodel = _step5.value;
+        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+          var tmodel = _step7.value;
           if (tmodel.val('sourceDom')) {
             continue;
           }
           this.deleteDom(tmodel);
         }
       } catch (err) {
-        _iterator5.e(err);
+        _iterator7.e(err);
       } finally {
-        _iterator5.f();
+        _iterator7.f();
       }
       this.lists.deletedDom.length = 0;
     }
@@ -467,37 +518,37 @@ var TModelManager = /*#__PURE__*/function () {
   }, {
     key: "fixStyles",
     value: function fixStyles() {
-      var _iterator6 = _createForOfIteratorHelper(this.lists.restyle),
-        _step6;
+      var _iterator8 = _createForOfIteratorHelper(this.lists.restyle),
+        _step8;
       try {
-        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-          var tmodel = _step6.value;
+        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+          var tmodel = _step8.value;
           if (tmodel.hasDom()) {
             TModelUtil.fixStyle(tmodel);
           }
         }
       } catch (err) {
-        _iterator6.e(err);
+        _iterator8.e(err);
       } finally {
-        _iterator6.f();
+        _iterator8.f();
       }
     }
   }, {
     key: "fixAsyncStyles",
     value: function fixAsyncStyles() {
-      var _iterator7 = _createForOfIteratorHelper(this.lists.reasyncStyle),
-        _step7;
+      var _iterator9 = _createForOfIteratorHelper(this.lists.reasyncStyle),
+        _step9;
       try {
-        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-          var tmodel = _step7.value;
+        for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+          var tmodel = _step9.value;
           if (tmodel.hasDom()) {
             TModelUtil.fixAsyncStyle(tmodel);
           }
         }
       } catch (err) {
-        _iterator7.e(err);
+        _iterator9.e(err);
       } finally {
-        _iterator7.f();
+        _iterator9.f();
       }
     }
   }, {
@@ -506,11 +557,11 @@ var TModelManager = /*#__PURE__*/function () {
       var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
         _ref$restoredDoneTarg = _ref.restoredDoneTargets,
         restoredDoneTargets = _ref$restoredDoneTarg === void 0 ? true : _ref$restoredDoneTarg;
-      var _iterator8 = _createForOfIteratorHelper(tmodels),
-        _step8;
+      var _iterator10 = _createForOfIteratorHelper(tmodels),
+        _step10;
       try {
-        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-          var tmodel = _step8.value;
+        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+          var tmodel = _step10.value;
           if (!tmodel.hasDom()) {
             tmodel.markLayoutDirty('noDom');
             continue;
@@ -549,9 +600,9 @@ var TModelManager = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator8.e(err);
+        _iterator10.e(err);
       } finally {
-        _iterator8.f();
+        _iterator10.f();
       }
     }
   }, {
@@ -580,12 +631,12 @@ var TModelManager = /*#__PURE__*/function () {
       this.lists.noDom.sort(function (a, b) {
         return a.getUIDepth() < b.getUIDepth() ? -1 : 1;
       });
-      var _iterator9 = _createForOfIteratorHelper(this.lists.noDom),
-        _step9;
+      var _iterator11 = _createForOfIteratorHelper(this.lists.noDom),
+        _step11;
       try {
-        for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
           var _tmodel2$domId;
-          var _tmodel2 = _step9.value;
+          var _tmodel2 = _step11.value;
           var domId = (_tmodel2$domId = _tmodel2.domId) !== null && _tmodel2$domId !== void 0 ? _tmodel2$domId : _tmodel2.oid;
           if ($Dom.query("#".concat(domId))) {
             _tmodel2.$dom = new $Dom("#".concat(domId));
@@ -606,9 +657,9 @@ var TModelManager = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator9.e(err);
+        _iterator11.e(err);
       } finally {
-        _iterator9.f();
+        _iterator11.f();
       }
       for (var _i5 = 0, _needsDom = needsDom; _i5 < _needsDom.length; _i5++) {
         var tmodel = _needsDom[_i5];
@@ -640,31 +691,31 @@ var TModelManager = /*#__PURE__*/function () {
           entry.tmodels.push(tmodel);
         }
       }
-      var _iterator10 = _createForOfIteratorHelper(holdersMap.values()),
-        _step10;
+      var _iterator12 = _createForOfIteratorHelper(holdersMap.values()),
+        _step12;
       try {
-        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-          var _step10$value = _step10.value,
-            _domHolder = _step10$value.domHolder,
-            fragment = _step10$value.fragment;
+        for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
+          var _step12$value = _step12.value,
+            _domHolder = _step12$value.domHolder,
+            fragment = _step12$value.fragment;
           _domHolder.appendElement(fragment);
         }
       } catch (err) {
-        _iterator10.e(err);
+        _iterator12.e(err);
       } finally {
-        _iterator10.f();
+        _iterator12.f();
       }
-      var _iterator11 = _createForOfIteratorHelper(this.lists.noDom),
-        _step11;
+      var _iterator13 = _createForOfIteratorHelper(this.lists.noDom),
+        _step13;
       try {
-        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-          var _tmodel3 = _step11.value;
+        for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
+          var _tmodel3 = _step13.value;
           this.catchupNoDomTargetsBeforeStyle(_tmodel3);
         }
       } catch (err) {
-        _iterator11.e(err);
+        _iterator13.e(err);
       } finally {
-        _iterator11.f();
+        _iterator13.f();
       }
       for (var _i6 = 0, _styleBatch = styleBatch; _i6 < _styleBatch.length; _i6++) {
         var _tmodel = _styleBatch[_i6];