targetj 1.0.214 → 1.0.216

package/README.md

@@ -18,9 +18,11 @@ Traditional frameworks model the UI as a function of state: change state, re-ren
 
 TargetJS is built for this reality. Instead of managing complex flags, your code structure mirrors these sequences directly.
 
-It achieves this through Targets. A Target is a self-contained unit that merges data (fields) and logic (methods) into a single reactive block. Each Target has its own internal state, timing, and lifecycle, acting like a living cell within your app. By simply ordering them in your code, you create complex asynchronous workflows without async/await or .then() chains.
+It achieves this through Targets. A Target is a self-contained unit that merges data (fields) and logic (methods) into a single reactive block. Each Target has its own internal state, timing, and lifecycle, acting like a living cell within your app. By simply ordering them in your code, you create complex asynchronous workflows without async/await or .then() chains. 
 
-By building animation directly into the logic of the framework and adopting a compact style, TargetJS makes the journey from A to B explicit and with significantly less code than traditional frameworks.
+In addition, animation is built directly into the framework’s logic. 
+
+By adopting a compact style, TargetJS makes the journey from A to B explicit, with significantly less code than traditional frameworks.
 
 ## ⚡ Quick Start (30 Seconds)
 
@@ -139,32 +141,30 @@ We handle UI, two animations, a POST request, and a cleanup.
 import { App } from "targetj";
 
 App({
-  likeButton: {
-    width: 220, height: 60, lineHeight: 60, textAlign: "center",
-    borderRadius: 10, backgroundColor: "#f5f5f5", cursor: "pointer", userSelect: "none",
-    role: "button", tabIndex: 0,
-    html: "♡ Like",
-    onClick() {
-      this.setTarget('scale', { value: [1.2, 1], steps: 8, interval: 12 });
-      this.setTarget('backgroundColor', { value: [ '#ffe8ec', '#f5f5f5' ], steps: 12, interval: 12 });
-    },
-    heart$$: {
-      html: "♥", color: "crimson", fontSize: 20,
-      fly() {
-        const cx = this.getCenterX(), cy = this.getCenterY();
-        this.setTarget({
-          opacity: { value: [0, 1, 1, 0.8, 0.1], steps: 20 },
-          scale:   { value: [0.8, 1.4, 1.1, 0.9, 0.8], steps: 20 },
-          rotate:  { value: [0, 12, -8, 6, 0], steps: 20 },
-          x:       { value: [cx, cx + 22, cx - 16, cx + 10, cx], steps: 30 },
-          y:       { value: [cy - 8, cy - 70, cy - 90, cy - 120, cy - 150], steps: 30 }
-        });
-      }
-    },
-    fetch$$: { method: "POST", id: 123, url: "/api/like" }, // Wait for hearts to finish, THEN fetch
-    removeHearts$$() { this.removeChildren(); }, // Wait for fetch to finish, THEN cleanup
-    onKey(e) { if (e.key === "Enter") this.activateTarget("onClick"); }
-  }
+  width: 220, height: 60, lineHeight: 60, textAlign: "center",
+  borderRadius: 10, backgroundColor: "#f5f5f5", cursor: "pointer", userSelect: "none",
+  role: "button", tabIndex: 0,
+  html: "♡ Like",
+  onClick() {
+    this.setTarget('scale', { value: [1.2, 1], steps: 8, interval: 12 });
+    this.setTarget('backgroundColor', { value: [ '#ffe8ec', '#f5f5f5' ], steps: 12, interval: 12 });
+  },
+  heart$$: {
+    html: "♥", color: "crimson", fontSize: 20,
+    fly() {
+      const cx = this.getCenterX(), cy = this.getCenterY();
+      this.setTarget({
+        opacity: { value: [0, 1, 1, 0.8, 0.1], steps: 20 },
+        scale:   { value: [0.8, 1.4, 1.1, 0.9, 0.8], steps: 20 },
+        rotate:  { value: [0, 12, -8, 6, 0], steps: 20 },
+        x:       { value: [cx, cx + 22, cx - 16, cx + 10, cx], steps: 30 },
+        y:       { value: [cy - 8, cy - 70, cy - 90, cy - 120, cy - 150], steps: 30 }
+      });
+    }
+  },
+  fetch$$: { method: "POST", id: 123, url: "/api/like" }, // Wait for hearts to finish, THEN fetch
+  removeHearts$$() { this.removeChildren(); }, // Wait for fetch to finish, THEN cleanup
+  onKey(e) { if (e.key === "Enter") this.activateTarget("onClick"); } 
 }).mount("#likeButton");
 ```
 

package/build/BaseModel.js

@@ -311,12 +311,6 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
       if (target.active !== false || _TUtil.TUtil.isDefined(target.initialValue)) {
         this.addToStyleTargetList(key);
       }
-      if (_TargetData.TargetData.coreTargetMap[key]) {
-        this.coreTargetMap || (this.coreTargetMap = new Map());
-        if (!this.coreTargetMap.has(key)) {
-          this.coreTargetMap.set(key, true);
-        }
-      }
       if (_TargetParser.TargetParser.isIntervalTarget(target)) {
         target.cycles = 1;
         target.isInterval = true;

package/build/DomInit.js

@@ -74,18 +74,33 @@ var DomInit = exports.DomInit = /*#__PURE__*/function () {
         if ($dom) {
           tmodel.targets.$dom = $dom;
           tmodel.val('$dom', $dom);
-          delete tmodel.targets.position;
+          var tag = $dom.getTagName().toLowerCase();
+          var patch = {};
+          if (tmodel.val('element') !== tag) {
+            patch.element = tag;
+          }
+          patch.position = $dom.getStyleValue('position') || 'relative';
+          patch.domIsland = true;
+          if (!_TUtil.TUtil.isDefined(tmodel.targets.reuseDomDefinition)) {
+            patch.reuseDomDefinition = true;
+            patch.domHolder = true;
+            if (!_TUtil.TUtil.isDefined(tmodel.targets.excludeXYCalc)) {
+              patch.excludeXYCalc = true;
+            }
+            if (!_TUtil.TUtil.isDefined(tmodel.targets.x) && !_TUtil.TUtil.isDefined(tmodel.targets.excludeX)) {
+              patch.excludeX = true;
+            }
+            if (!_TUtil.TUtil.isDefined(tmodel.targets.y) && !_TUtil.TUtil.isDefined(tmodel.targets.excludeY)) {
+              patch.excludeY = true;
+            }
+          }
+          tmodel.addTargets(patch);
           var id = $dom.getId();
-          if (id) {
-            var uniqueId = _App.App.getOid(id);
-            tmodel.type = id;
-            tmodel.oid = uniqueId.oid;
-            tmodel.oidNum = uniqueId.num;
+          if (id && id !== tmodel.oid) {
+            $dom.attr('tgjs-oid', tmodel.oid);
+            tmodel.domId = id;
           }
-          $dom.setSelector("#".concat(tmodel.oid));
-          $dom.setId(tmodel.oid);
           $dom.attr('tgjs', 'true');
-          tmodel.initTargets();
         }
       }
     }

package/build/EventListener.js

@@ -534,11 +534,13 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
   }, {
     key: "getTModelFromEvent",
     value: function getTModelFromEvent(event) {
-      var _event$currentTarget;
-      var oid = (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.id;
+      var el = event.currentTarget || event.target;
+      var oid;
+      if (el && el.nodeType === 1) {
+        oid = el.getAttribute('tgjs-oid') || el.id;
+      }
       if (!oid || !_App.tApp.manager.visibleOidMap[oid]) {
-        var _event$target;
-        oid = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.id;
+        oid = el === null || el === void 0 ? void 0 : el.id;
         if (!oid || !_App.tApp.manager.visibleOidMap[oid]) {
           oid = _$Dom.$Dom.findNearestParentWithId(event.target);
         }

package/build/TModelManager.js

@@ -445,9 +445,11 @@ var TModelManager = exports.TModelManager = /*#__PURE__*/function () {
         _step9;
       try {
         for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+          var _tmodel2$domId;
           var _tmodel2 = _step9.value;
-          if (_$Dom.$Dom.query("#".concat(_tmodel2.oid))) {
-            _tmodel2.$dom = new _$Dom.$Dom("#".concat(_tmodel2.oid));
+          var domId = (_tmodel2$domId = _tmodel2.domId) !== null && _tmodel2$domId !== void 0 ? _tmodel2$domId : _tmodel2.oid;
+          if (_$Dom.$Dom.query("#".concat(domId))) {
+            _tmodel2.$dom = new _$Dom.$Dom("#".concat(domId));
             _tmodel2.$dom.attr('tgjs', 'true');
             _tmodel2.hasDomNow = true;
             _tmodel2.markLayoutDirty('hasDomNow');

package/build/TargetData.js

@@ -266,16 +266,12 @@ _defineProperty(TargetData, "mustExecuteTargets", {
   fetch: true,
   fetchImage: true
 });
-_defineProperty(TargetData, "coreTargetMap", {
-  x: true,
-  y: true
-});
-_defineProperty(TargetData, "ignoreRerun", _objectSpread(_objectSpread({}, _TargetData.coreTargetMap), {}, {
+_defineProperty(TargetData, "ignoreRerun", {
   isVisible: true
-}));
-_defineProperty(TargetData, "ignoreTargetMethodNameMap", _objectSpread(_objectSpread({}, _TargetData.coreTargetMap), {}, {
+});
+_defineProperty(TargetData, "ignoreTargetMethodNameMap", {
   isVisible: true
-}));
+});
 _defineProperty(TargetData, "cssFunctionMap", {
   skew: {
     x: 0,