targetj 1.0.120 → 1.0.122

package/README.md

@@ -1,6 +1,6 @@
-# TargetJ: JavaScript UI framework Redefining Front-End Development
+# TargetJ: JavaScript UI framework and library
 
-Welcome to TargetJ, a powerful JavaScript UI framework designed to simplify development and animation. (https://targetj.io)
+Welcome to TargetJ, a powerful JavaScript UI framework and library designed to simplify development and animation, and you might find that it redefines front-end development. (https://targetj.io)
 
 TargetJ distinguishes itself by introducing a novel concept known as 'targets', which forms its core. Targets are used as the main building blocks of components instead of direct variables and methods. Each component in TargetJ is a set of targets. Targets are employed across all aspects of the program. They are used in animation, controlling program flow, loading data from external APIs, handling user events, and more.
 
@@ -16,6 +16,9 @@ npm install targetj
 
 Imagine building a single-page web app using a unified approach for API integration, animations, event handling, and more—without having to manage asynchronous calls, loops, callbacks, promises, timeouts, state management, CSS, HTML attributes, tags, or HTML nesting. That’s exactly what TargetJ offers: it simplifies the entire development process with a new, simplified paradigm.
 
+## Can I integrate TargetJ as a library into my existing page?
+Yes, you can integrate TargetJ as a library into your existing page! TargetJ is designed to be flexible and works seamlessly with other libraries and frameworks, allowing you to enhance your page with minimal changes. You can find an example at the end of this page.
+
 ## What are targets?
 
 Targets provide a unified interface for variable assignments and methods, giving them life cycles and the autonomy to operate independently, with various callbacks to adapt to changes, mimicking the behavior of living cells.
@@ -447,6 +450,44 @@ App(new TModel("simpleApp", {
 }));
 ```
 
+## Using TargetJ as a library into your page
+
+Here is an example that creates 1000 rows. The first argument, 'rows,' is used to find an element with the ID 'rows.' If no such element exists, it will be created at the top of the page. The OnDomEvent target activates the targets defined in its value when the DOM is found or created, eliminating the need for conditions to verify the DOM's availability before executing the target. Additionally, the parallel property creates subtasks, which improve browser performance."
+
+![animation api example](https://targetj.io/img/targetjAsLibrary.gif)
+
+```bash
+import { App, TModel, $Dom } from "targetj";
+
+App(new TModel("rows", {
+    isVisible: true,
+    containerOverflowMode: "always",
+    rectTop() { return this.$dom.getBoundingClientRect().top; },
+    absY() { return this.val("rectTop") - $Dom.getWindowScrollTop(); },
+    defaultStyling: false,
+    domHolder: true,
+    onDomEvent: ["rectTop", "absY"],
+    onWindowScrollEvent: "absY",
+    createRows: {
+        parallel: true,
+        cycles: 9,
+        value() {
+            const childrenLength = this.getChildren().length;
+            Array.from({length: 100}, (_, i) => {
+                this.addChild(new TModel("row", {
+                    keepEventDefault: true,
+                    height: 36,
+                    width: [{list: [100, 500, 200]}, 30],
+                    background: "#b388ff",
+                    canDeleteDom: false,
+                    html: `row ${i + childrenLength}`,
+                }));
+            });
+        }
+    }
+}));
+```
+
 ## Special target names
 
 All HTML style names and attributes are treated as special target names. The most commonly used style names and attributes have already been added to the framework, with the possibility of adding more in the future.

package/build/BaseModel.js

@@ -185,24 +185,27 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
           this.asyncStyleTargetMap[key] = true;
         }
       } else if (this.isStyleTarget(key)) {
+        var styleFlag = true;
         if (_TargetUtil.TargetUtil.transformMap[key]) {
           if (this.getParent()) {
             this.calcAbsolutePosition(this.getX(), this.getY());
           }
           if (_TModelUtil.TModelUtil.getTransformValue(this, key) === this.transformMap[key]) {
-            return;
+            styleFlag = false;
           }
         } else if (key === 'width' || key === 'height') {
           var dimension = Math.floor(key === 'width' ? this.getWidth() : this.getHeight());
           if (this.styleMap[key] === dimension) {
-            return;
+            styleFlag = false;
           }
         } else if (_TUtil.TUtil.isDefined(this.val(key)) && this.styleMap[key] === this.val(key)) {
-          return;
+          styleFlag = false;
         }
-        this.styleTargetList.push(key);
-        this.styleTargetMap[key] = true;
-      } else if (this.useWindowFrame(key)) {
+        if (styleFlag && !this.styleTargetMap[key]) {
+          this.styleTargetList.push(key);
+          this.styleTargetMap[key] = true;
+        }
+      } else if (this.useWindowFrame(key) && !this.styleTargetMap[key]) {
         this.styleTargetList.push(key);
         this.styleTargetMap[key] = true;
       } else {

package/build/RunScheduler.js

@@ -146,6 +146,11 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
         this.processRerunQueue();
       }
     }
+  }, {
+    key: "doesExecuterNeedsRerun",
+    value: function doesExecuterNeedsRerun() {
+      return _TargetExecutor.TargetExecutor.needsRerun;
+    }
   }, {
     key: "processRerunQueue",
     value: function processRerunQueue() {
@@ -228,13 +233,14 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
     }
   }, {
     key: "insertRun",
-    value: function insertRun(runId, now, delay) {
+    value: function insertRun(newRunId, newInsertTime, newDelay) {
       var low = 0,
         high = this.nextRuns.length;
       while (low < high) {
         var mid = Math.floor((low + high) / 2);
-        var nextRunDelay = this.nextRuns[mid].delay;
-        var diff = nextRunDelay - delay;
+        var delay = this.nextRuns[mid].delay;
+        var insertTime = this.nextRuns[mid].insertTime;
+        var diff = insertTime + delay - (newInsertTime + newDelay);
         if (diff > 0) {
           high = mid;
         } else if (diff < 0) {
@@ -244,9 +250,9 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
         }
       }
       this.nextRuns.splice(low, 0, {
-        runId: runId,
-        insertTime: now,
-        delay: delay
+        runId: newRunId,
+        insertTime: newInsertTime,
+        delay: newDelay
       });
     }
   }]);

package/build/TargetManager.js

@@ -120,6 +120,9 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
           if (tmodel.isScheduledPending(key)) {
             continue;
           }
+          if (!tmodel.hasDom() && tmodel.allStyleTargetMap[key]) {
+            continue;
+          }
           schedulePeriod = _TargetUtil.TargetUtil.scheduleExecution(tmodel, key);
           if (schedulePeriod > 0) {
             (0, _App.getRunScheduler)().schedule(schedulePeriod, "setActualValues-".concat(tmodel.oid, "__").concat(key, "_").concat(schedulePeriod));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "targetj",
-  "version": "1.0.120",
+  "version": "1.0.122",
   "keywords": [
     "targetj"
   ],