targetj 1.0.252 → 1.0.254

package/README.md

@@ -56,7 +56,7 @@ npm install targetj
 
 **2. Example**
 
-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.
+This creates the following sequence: bounce → move → turn red → log. Notice how the code read like the UI sequence. The `$$` suffix makes each step wait for the preceding ones. There is only one state. The transitions are part of that state.
 
 ```javascript
 import { App } from "targetj";
@@ -66,7 +66,7 @@ App({
   height: 100,
   backgroundColor: "blue",
 
-  // Starts immediately: bounce in.
+  // Starts immediately: bounce.
   scale: { value: [0.5, 1.2, 1], steps: 24, interval: 12 },
 
   // Waits for scale to finish, then moves right.

package/build/$Dom.js

@@ -30,6 +30,7 @@ var $Dom = /*#__PURE__*/function () {
     this.textOnly = true;
     this.transformProp = null;
     this.initTransformProp();
+    this.restoreSlotState();
   }
   return _createClass($Dom, [{
     key: "create",
@@ -67,7 +68,8 @@ var $Dom = /*#__PURE__*/function () {
   }, {
     key: "exists",
     value: function exists() {
-      return this.selector ? !!$Dom.query(this.selector) : false;
+      var _this$element;
+      return !!((_this$element = this.element) !== null && _this$element !== void 0 && _this$element.isConnected);
     }
   }, {
     key: "getElement",
@@ -79,6 +81,23 @@ var $Dom = /*#__PURE__*/function () {
     value: function supportsWAAPI() {
       return !!(this.element && typeof this.element.animate === 'function');
     }
+  }, {
+    key: "restoreSlotState",
+    value: function restoreSlotState() {
+      var _this$element2;
+      if (((_this$element2 = this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.nodeType) !== 1 || this.isNoSlotHost()) {
+        return;
+      }
+      var slot = this.element.querySelector(':scope > [data-tj-slot="content"]');
+      if (!slot) {
+        return;
+      }
+      this.contentSlot = slot;
+      this.slotModeEnabled = true;
+      this.hasRealChildren = Array.from(this.element.childNodes).some(function (child) {
+        return child !== slot && child.getAttribute("tgjs") === "true";
+      });
+    }
   }, {
     key: "findContentSlot",
     value: function findContentSlot() {
@@ -97,8 +116,8 @@ var $Dom = /*#__PURE__*/function () {
   }, {
     key: "isNoSlotHost",
     value: function isNoSlotHost() {
-      var _this$element;
-      return this.getTagName() === 'body' || ((_this$element = this.element) === null || _this$element === void 0 ? void 0 : _this$element.getAttribute('data-tj-no-slot')) === 'true';
+      var _this$element3;
+      return ((_this$element3 = this.element) === null || _this$element3 === void 0 ? void 0 : _this$element3.nodeType) !== 1 || this.getTagName() === "body" || this.element.getAttribute("data-tj-no-slot") === "true";
     }
   }, {
     key: "ensureContentSlotFirst",
@@ -117,7 +136,7 @@ var $Dom = /*#__PURE__*/function () {
   }, {
     key: "enableSlotMode",
     value: function enableSlotMode() {
-      var _this$element2;
+      var _this$element4;
       if (this.slotModeEnabled) {
         return;
       }
@@ -125,17 +144,31 @@ var $Dom = /*#__PURE__*/function () {
         this.slotModeEnabled = true;
         return;
       }
-      if (!((_this$element2 = this.element) !== null && _this$element2 !== void 0 && _this$element2.firstChild)) {
+      var existingSlot = this.findContentSlot();
+      if (existingSlot) {
+        if (this.element.firstChild !== existingSlot) {
+          this.element.insertBefore(existingSlot, this.element.firstChild);
+        }
+        this.contentSlot = existingSlot;
         this.slotModeEnabled = true;
+        this.hasRealChildren = Array.from(this.element.childNodes).some(function (node) {
+          return node !== existingSlot;
+        });
         return;
       }
-      var slot = this.ensureContentSlotFirst();
-      var n = slot.nextSibling;
-      while (n) {
-        var next = n.nextSibling;
-        slot.appendChild(n);
-        n = next;
+      if (!((_this$element4 = this.element) !== null && _this$element4 !== void 0 && _this$element4.firstChild)) {
+        this.slotModeEnabled = true;
+        return;
       }
+      var existingNodes = Array.from(this.element.childNodes);
+      var slot = document.createElement("div");
+      slot.setAttribute("data-tj-slot", "content");
+      this.element.insertBefore(slot, this.element.firstChild);
+      for (var _i = 0, _existingNodes = existingNodes; _i < _existingNodes.length; _i++) {
+        var node = _existingNodes[_i];
+        slot.appendChild(node);
+      }
+      this.contentSlot = slot;
       this.slotModeEnabled = true;
     }
   }, {
@@ -168,8 +201,8 @@ var $Dom = /*#__PURE__*/function () {
   }, {
     key: "getTagName",
     value: function getTagName() {
-      var _this$element3;
-      return (_this$element3 = this.element) === null || _this$element3 === void 0 || (_this$element3 = _this$element3.tagName) === null || _this$element3 === void 0 ? void 0 : _this$element3.toLowerCase();
+      var _this$element5;
+      return (_this$element5 = this.element) === null || _this$element5 === void 0 || (_this$element5 = _this$element5.tagName) === null || _this$element5 === void 0 ? void 0 : _this$element5.toLowerCase();
     }
   }, {
     key: "setSelector",
@@ -545,14 +578,14 @@ var $Dom = /*#__PURE__*/function () {
   }, {
     key: "getScrollTop",
     value: function getScrollTop() {
-      var _this$element$scrollT, _this$element4;
-      return (_this$element$scrollT = (_this$element4 = this.element) === null || _this$element4 === void 0 ? void 0 : _this$element4.scrollTop) !== null && _this$element$scrollT !== void 0 ? _this$element$scrollT : 0;
+      var _this$element$scrollT, _this$element6;
+      return (_this$element$scrollT = (_this$element6 = this.element) === null || _this$element6 === void 0 ? void 0 : _this$element6.scrollTop) !== null && _this$element$scrollT !== void 0 ? _this$element$scrollT : 0;
     }
   }, {
     key: "getScrollLeft",
     value: function getScrollLeft() {
-      var _this$element$scrollL, _this$element5;
-      return (_this$element$scrollL = (_this$element5 = this.element) === null || _this$element5 === void 0 ? void 0 : _this$element5.scrollLeft) !== null && _this$element$scrollL !== void 0 ? _this$element$scrollL : 0;
+      var _this$element$scrollL, _this$element7;
+      return (_this$element$scrollL = (_this$element7 = this.element) === null || _this$element7 === void 0 ? void 0 : _this$element7.scrollLeft) !== null && _this$element$scrollL !== void 0 ? _this$element$scrollL : 0;
     }
   }], [{
     key: "createTemplate",

package/build/EventListener.js

@@ -94,6 +94,7 @@ var EventListener = /*#__PURE__*/function () {
     this.bindedHandleWindowEvent = this.handleWindowEvent.bind(this);
     this.bindedHandleEvent = this.handleEvent.bind(this);
     this.bindedParentHandleEvent = this.handleDocEvent.bind(this);
+    this.maxPointerMoveDistance = 0;
   }
   return _createClass(EventListener, [{
     key: "detachWindowEvents",
@@ -223,38 +224,43 @@ var EventListener = /*#__PURE__*/function () {
   }, {
     key: "resetEventsOnTimeout",
     value: function resetEventsOnTimeout() {
-      if (this.scrollEndTimeStamp.x > 0 || this.scrollEndTimeStamp.y > 0 || this.currentTouch.pinchDelta) {
-        var now = TUtil.now();
-        var diff = Math.max(this.scrollEndTimeStamp.x - now, this.scrollEndTimeStamp.y - now);
-        if (diff > 100) {
-          this.currentTouch.deltaY *= 0.95;
-          this.currentTouch.deltaX *= 0.95;
-          this.currentTouch.pinchDelta *= 0.95;
-          if (Math.abs(this.currentTouch.deltaY) < 0.1) {
-            this.currentTouch.deltaY = 0;
-          }
-          if (Math.abs(this.currentTouch.deltaX) < 0.1) {
-            this.currentTouch.deltaX = 0;
-          }
-          if (Math.abs(this.currentTouch.pinchDelta) < 0.1) {
-            this.currentTouch.pinchDelta = 0;
-          }
-        }
-        if (diff <= 0) {
+      var hasPendingScroll = this.scrollEndTimeStamp.x > 0 || this.scrollEndTimeStamp.y > 0 || this.currentTouch.pinchDelta !== 0;
+      if (!hasPendingScroll) {
+        return;
+      }
+      if (this.touchCount > 0) {
+        return;
+      }
+      var now = TUtil.now();
+      var diff = Math.max(this.scrollEndTimeStamp.x - now, this.scrollEndTimeStamp.y - now);
+      if (diff > 100) {
+        this.currentTouch.deltaY *= 0.95;
+        this.currentTouch.deltaX *= 0.95;
+        this.currentTouch.pinchDelta *= 0.95;
+        if (Math.abs(this.currentTouch.deltaY) < 0.1) {
           this.currentTouch.deltaY = 0;
-          this.currentTouch.deltaX = 0;
-          this.currentTouch.pinchDelta = 0;
         }
-        if (!this.currentTouch.deltaX && this.scrollEndTimeStamp.x && now >= this.scrollEndTimeStamp.x && this.touchCount === 0) {
-          this.scrollEndTimeStamp.x = 0;
-          this.queueScrollEndEvent('x', this.currentHandlers.scrollLeft);
+        if (Math.abs(this.currentTouch.deltaX) < 0.1) {
+          this.currentTouch.deltaX = 0;
         }
-        if (!this.currentTouch.deltaY && this.scrollEndTimeStamp.y && now >= this.scrollEndTimeStamp.y && this.touchCount === 0) {
-          this.queueScrollEndEvent('y', this.currentHandlers.scrollTop);
-          this.scrollEndTimeStamp.y = 0;
+        if (Math.abs(this.currentTouch.pinchDelta) < 0.1) {
+          this.currentTouch.pinchDelta = 0;
         }
-        getRunScheduler().schedule(10, 'scroll decay');
       }
+      if (diff <= 0) {
+        this.currentTouch.deltaY = 0;
+        this.currentTouch.deltaX = 0;
+        this.currentTouch.pinchDelta = 0;
+      }
+      if (!this.currentTouch.deltaX && this.scrollEndTimeStamp.x && now >= this.scrollEndTimeStamp.x) {
+        this.scrollEndTimeStamp.x = 0;
+        this.queueScrollEndEvent('x', this.currentHandlers.scrollLeft);
+      }
+      if (!this.currentTouch.deltaY && this.scrollEndTimeStamp.y && now >= this.scrollEndTimeStamp.y) {
+        this.queueScrollEndEvent('y', this.currentHandlers.scrollTop);
+        this.scrollEndTimeStamp.y = 0;
+      }
+      getRunScheduler().schedule(10, 'scroll decay');
     }
   }, {
     key: "findEventHandlers",
@@ -448,6 +454,7 @@ var EventListener = /*#__PURE__*/function () {
       switch (eventName) {
         case 'mousedown':
         case 'touchstart':
+          this.maxPointerMoveDistance = 0;
           this.clearStart();
           this.clearEnd();
           this.clearTouch();
@@ -509,7 +516,7 @@ var EventListener = /*#__PURE__*/function () {
             }
             this.end0 = this.getTouch(event);
             var clickHandler = SearchUtil.findFirstClickHandler(tmodel);
-            var canAcceptClick = !this.start0 || clickHandler === this.currentHandlers.click && (clickHandler !== this.currentHandlers.swipe || this.getSwipeDistance() < 5);
+            var canAcceptClick = !this.start0 || clickHandler === this.currentHandlers.click && this.maxPointerMoveDistance < EventListener.CLICK_MOVE_THRESHOLD;
             if (clickHandler && canAcceptClick) {
               this.eventQueue.length = 0;
               this.eventQueue.push({
@@ -524,6 +531,7 @@ var EventListener = /*#__PURE__*/function () {
             }
             this.clearEnd();
             this.clearStart();
+            this.maxPointerMoveDistance = 0;
             this.touchCount = 0;
             event.stopPropagation();
             break;
@@ -555,6 +563,7 @@ var EventListener = /*#__PURE__*/function () {
           this.clearStart();
           this.clearEnd();
           this.clearTouch();
+          this.maxPointerMoveDistance = 0;
           this.touchCount = 0;
           event.stopPropagation();
           break;
@@ -726,6 +735,7 @@ var EventListener = /*#__PURE__*/function () {
       this.windowScrollEndTimer = 0;
       this.scrollEndTimeStamp.x = 0;
       this.scrollEndTimeStamp.y = 0;
+      this.maxPointerMoveDistance = 0;
       this.currentHandlers = {
         touch: null,
         click: null,
@@ -773,14 +783,6 @@ var EventListener = /*#__PURE__*/function () {
     value: function swipeY() {
       return this.cursor.y - this.swipeStartY;
     }
-  }, {
-    key: "getSwipeDistance",
-    value: function getSwipeDistance() {
-      if (this.start0 && this.end0) {
-        return TUtil.distance(this.start0.originalX, this.start0.originalY, this.end0.x, this.end0.y);
-      }
-      return 0;
-    }
   }, {
     key: "pinchDelta",
     value: function pinchDelta() {
@@ -1040,6 +1042,8 @@ var EventListener = /*#__PURE__*/function () {
         this.start0.x = this.end0 ? this.end0.x : this.start0.x;
         this.end0 = this.getTouch(event);
         if (TUtil.isDefined(this.end0)) {
+          var distance = TUtil.distance(this.start0.originalX, this.start0.originalY, this.end0.x, this.end0.y);
+          this.maxPointerMoveDistance = Math.max(this.maxPointerMoveDistance, distance);
           var deltaX = this.start0.x - this.end0.x;
           var deltaY = this.start0.y - this.end0.y;
           this.setDeltaXDeltaY(deltaX, deltaY, 'touch');
@@ -1144,4 +1148,5 @@ var EventListener = /*#__PURE__*/function () {
 }();
 _defineProperty(EventListener, "MAX_EVENT_QUEUE_SIZE", 10);
 _defineProperty(EventListener, "MAX_EVENT_TYPE_CAPACITY", 2);
+_defineProperty(EventListener, "CLICK_MOVE_THRESHOLD", 10);
 export { EventListener };

package/build/TModelManager.js

@@ -188,13 +188,22 @@ var TModelManager = /*#__PURE__*/function () {
       activated.forEach(function (t) {
         return t.deactivate();
       });
-      Object.values(_objectSpread(_objectSpread({}, lastVisibleMap), lastPreservedMap)).filter(function (v) {
-        return v !== undefined;
-      }).forEach(function (tmodel) {
-        if (tmodel.hasDom()) {
-          if (!tmodel.exists() || !tmodel.isIncluded()) {
+      Object.values(_objectSpread(_objectSpread({}, lastVisibleMap), lastPreservedMap)).filter(Boolean).forEach(function (tmodel) {
+        var exists = tmodel.exists();
+        var included = exists && tmodel.isIncluded();
+        if (!exists || !included) {
+          if (tmodel.hasDom()) {
             _this.addToDeletedDom(tmodel);
+          } else {
+            delete _this.visibleOidMap[tmodel.oid];
+            delete _this.preservedDomMap[tmodel.oid];
+            _this.domPolicyMap.delete(tmodel.oid);
           }
+        } else if (!tmodel.hasDom() && tmodel.canHaveDom()) {
+          delete _this.visibleOidMap[tmodel.oid];
+          delete _this.preservedDomMap[tmodel.oid];
+          tmodel.visibilityStatus = undefined;
+          tmodel.markLayoutDirty("noDom");
         }
       });
       return this.lists.noDom.length > 0 ? 0 : this.lists.reattach.length > 0 ? 1 : this.lists.relocation.length > 0 ? 2 : this.lists.rerender.length > 0 ? 3 : this.lists.reasyncStyle.length > 0 ? 4 : this.lists.deletedDom.length > 0 ? 5 : this.lists.restyle.length > 0 ? 10 : -1;
@@ -224,18 +233,19 @@ var TModelManager = /*#__PURE__*/function () {
       return false;
     }
   }, {
-    key: "shouldCreateDom",
-    value: function shouldCreateDom(tmodel, visible) {
-      if (!tmodel.canHaveDom() || !tmodel.isIncluded() || tmodel.hasDom()) {
+    key: "shouldHaveDom",
+    value: function shouldHaveDom(tmodel) {
+      var visible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : tmodel.isVisible();
+      if (!tmodel.canHaveDom() || !tmodel.isIncluded()) {
         return false;
       }
-      if (visible) {
-        return true;
-      }
-      if (tmodel.requiresDom()) {
-        return true;
-      }
-      return this.getDomPolicy(tmodel) === "keep";
+      return visible || tmodel.requiresDom() || this.getDomPolicy(tmodel) === "keep";
+    }
+  }, {
+    key: "shouldCreateDom",
+    value: function shouldCreateDom(tmodel) {
+      var visible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : tmodel.isVisible();
+      return !tmodel.hasDom() && this.shouldHaveDom(tmodel, visible);
     }
   }, {
     key: "getDomPolicy",
@@ -628,32 +638,34 @@ var TModelManager = /*#__PURE__*/function () {
       var holdersMap = new Map();
       var styleBatch = [];
       var needsDom = [];
+      var attached = [];
       this.lists.noDom.sort(function (a, b) {
-        return a.getUIDepth() < b.getUIDepth() ? -1 : 1;
+        return a.getUIDepth() - b.getUIDepth();
       });
       var _iterator11 = _createForOfIteratorHelper(this.lists.noDom),
         _step11;
       try {
         for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-          var _tmodel2$domId;
-          var _tmodel2 = _step11.value;
-          var domId = (_tmodel2$domId = _tmodel2.domId) !== null && _tmodel2$domId !== void 0 ? _tmodel2$domId : _tmodel2.oid;
+          var _tmodel3$domId;
+          var _tmodel3 = _step11.value;
+          var domId = (_tmodel3$domId = _tmodel3.domId) !== null && _tmodel3$domId !== void 0 ? _tmodel3$domId : _tmodel3.oid;
           if ($Dom.query("#".concat(domId))) {
-            _tmodel2.$dom = new $Dom("#".concat(domId));
-            _tmodel2.$dom.attr('tgjs', 'true');
-            _tmodel2.hasDomNow = true;
-            _tmodel2.markLayoutDirty('hasDomNow');
-            if (this.needsRerender(_tmodel2)) {
-              this.lists.rerender.push(_tmodel2);
+            _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);
             }
-            if (this.needsRestyle(_tmodel2)) {
-              this.lists.restyle.push(_tmodel2);
+            if (this.needsRestyle(_tmodel3)) {
+              this.lists.restyle.push(_tmodel3);
             }
-            if (this.needsReasyncStyle(_tmodel2)) {
-              this.lists.reasyncStyle.push(_tmodel2);
+            if (this.needsReasyncStyle(_tmodel3)) {
+              this.lists.reasyncStyle.push(_tmodel3);
             }
           } else {
-            needsDom.push(_tmodel2);
+            needsDom.push(_tmodel3);
           }
         }
       } catch (err) {
@@ -674,22 +686,24 @@ var TModelManager = /*#__PURE__*/function () {
           if (!tmodel.hasDom()) {
             domHolder.appendTModel$Dom(tmodel);
           }
-        } else {
-          TModelUtil.createDom(tmodel);
-          TModelUtil.patchDom(tmodel);
-          styleBatch.push(tmodel);
-          var entry = holdersMap.get(domHolder);
-          if (!entry) {
-            entry = {
-              domHolder: domHolder,
-              fragment: $Dom.createDocumentFragment(),
-              tmodels: []
-            };
-            holdersMap.set(domHolder, entry);
-          }
-          entry.fragment.appendChild(tmodel.$dom.element);
-          entry.tmodels.push(tmodel);
+          attached.push(tmodel);
+          continue;
+        }
+        TModelUtil.createDom(tmodel);
+        TModelUtil.patchDom(tmodel);
+        styleBatch.push(tmodel);
+        attached.push(tmodel);
+        var entry = holdersMap.get(domHolder);
+        if (!entry) {
+          entry = {
+            domHolder: domHolder,
+            fragment: $Dom.createDocumentFragment(),
+            tmodels: []
+          };
+          holdersMap.set(domHolder, entry);
         }
+        entry.fragment.appendChild(tmodel.$dom.element);
+        entry.tmodels.push(tmodel);
       }
       var _iterator12 = _createForOfIteratorHelper(holdersMap.values()),
         _step12;
@@ -705,30 +719,22 @@ var TModelManager = /*#__PURE__*/function () {
       } finally {
         _iterator12.f();
       }
-      var _iterator13 = _createForOfIteratorHelper(this.lists.noDom),
-        _step13;
-      try {
-        for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
-          var _tmodel3 = _step13.value;
-          this.catchupNoDomTargetsBeforeStyle(_tmodel3);
-        }
-      } catch (err) {
-        _iterator13.e(err);
-      } finally {
-        _iterator13.f();
+      for (var _i6 = 0, _attached = attached; _i6 < _attached.length; _i6++) {
+        var _tmodel = _attached[_i6];
+        this.catchupNoDomTargetsBeforeStyle(_tmodel);
       }
-      for (var _i6 = 0, _styleBatch = styleBatch; _i6 < _styleBatch.length; _i6++) {
-        var _tmodel = _styleBatch[_i6];
-        if (_tmodel.hasDom()) {
-          _tmodel.hasDomNow = true;
-          _tmodel.markLayoutDirty('hasDomNow');
+      for (var _i7 = 0, _styleBatch = styleBatch; _i7 < _styleBatch.length; _i7++) {
+        var _tmodel2 = _styleBatch[_i7];
+        if (_tmodel2.hasDom()) {
+          _tmodel2.hasDomNow = true;
+          _tmodel2.markLayoutDirty('hasDomNow');
         }
-        TModelUtil.initStyleMaps(_tmodel);
-        TModelUtil.fixStyle(_tmodel);
-        TModelUtil.fixAsyncStyle(_tmodel);
+        TModelUtil.initStyleMaps(_tmodel2);
+        TModelUtil.fixStyle(_tmodel2);
+        TModelUtil.fixAsyncStyle(_tmodel2);
       }
-      this.activatePendingTargetsAfterDom(this.lists.noDom);
-      getEvents().attachEvents(this.lists.noDom.filter(function (t) {
+      this.activatePendingTargetsAfterDom(attached);
+      getEvents().attachEvents(attached.filter(function (t) {
         var _t$externalEventMap;
         return ((_t$externalEventMap = t.externalEventMap) === null || _t$externalEventMap === void 0 ? void 0 : _t$externalEventMap.size) > 0;
       }));

package/build/TargetUtil.js

@@ -590,7 +590,7 @@ var TargetUtil = /*#__PURE__*/function () {
         if (getManager().needsReattach(tmodel)) {
           return "needs Reattach";
         }
-        if (tmodel.canHaveDom() && !tmodel.hasDom()) {
+        if (getManager().shouldHaveDom(tmodel) && !tmodel.hasDom()) {
           return "no dom";
         }
         if (!tmodel.isTargetComplete(key) && !tmodel.isTargetDone(key)) {