targetj 1.0.210 → 1.0.212

package/README.md

@@ -5,7 +5,7 @@
 [![Stars](https://img.shields.io/github/stars/livetrails/targetjs.svg)](https://github.com/livetrails/targetjs/stargazers)
 [![npm version](https://img.shields.io/npm/v/targetj.svg)](https://www.npmjs.com/package/targetj)
 
-TargetJS is a modern JavaScript UI framework that simplifies front-end development with a code-ordered reactivity model and a compact, Rebol-like syntax. It provides a unified solution for key aspects like UI rendering, animations, APIs, state management, and event handling.
+TargetJS is a modern JavaScript UI framework that simplifies front-end development with a code-ordered reactivity model and an ultra-compact syntax. It provides a unified solution for key aspects like UI rendering, animations, APIs, state management, and event handling.
 It can be used as a full-featured framework or as a lightweight library alongside other frameworks. It is also a highly performant web framework, as shown in the [framework benchmark](https://krausest.github.io/js-framework-benchmark/current.html).
 
 ## The Philosophy Behind TargetJS
@@ -47,7 +47,7 @@ App({
   lineHeight: 60,
   textAlign: "center",
   borderRadius: 10,
-  background: "#f5f5f5",
+  backgroundColor: "#f5f5f5",
   html: "♡ Like"
 });
 ```
@@ -57,7 +57,7 @@ App({
 
 ### 2) Animation
 
-**What this shows:** A mount-time animation that scales and changes the background over 12 steps, with 12ms pauses between steps. Targets without (`$`, `$$`, `_`) execute immediately in the order they are defined.
+**What this shows:** A mount-time animation that scales and changes the `backgroundColor` over 12 steps, with 12ms pauses between steps. Targets without (`$`, `$$`, `_`) execute immediately in the order they are defined.
 
   <img src="https://targetjs.io/img/likeButton6.gif" width="130" />
 
@@ -71,8 +71,8 @@ App({
   textAlign: "center",
   borderRadius: 10, 
   html: "♡ Like",
-  scale: [ { list: [1.2, 1] }, 12, 12 ],
-  background: [ { list: ["#ffe8ec", "#f5f5f5"] }, 12, 12 ]
+  scale: { value: [1.2, 1], steps: 12, interval: 12 },
+  backgroundColor: { value: ["#ffe8ec", "#f5f5f5"], steps: 12, interval: 12 }
 });
 ```
 
@@ -87,14 +87,13 @@ import { App } from "targetj";
 
 App({
   width: 220, height: 60, lineHeight: 60, textAlign: "center",
-  borderRadius: 10, background: "#f5f5f5",
+  borderRadius: 10, backgroundColor: "#f5f5f5",
   cursor: "pointer", userSelect: "none",
   html: "♡ Like",
 
   onClick() {
-    this.setTarget("scale",      { list: [1.2, 1] }, 12, 12);
-    this.setTarget("background", { list: ["#ffe8ec", "#f5f5f5"] }, 12, 12);
-    this.setTarget("html", "♥ Liked");
+    this.setTarget('scale', { value: [1.2, 1], steps: 8, interval: 12 });
+    this.setTarget('backgroundColor', { value: [ '#ffe8ec', '#f5f5f5' ], steps: 12, interval: 12 });
   }
 });
 ```
@@ -112,12 +111,11 @@ import { App } from "targetj";
 
 App({
   width: 220, height: 60, lineHeight: 60, textAlign: "center",
-  borderRadius: 10, background: "#f5f5f5", cursor: "pointer", userSelect: "none",
+  borderRadius: 10, backgroundColor: "#f5f5f5", cursor: "pointer", userSelect: "none",
   html: "♡ Like",
   onClick() {
-    this.setTarget("scale",      { list: [1.2, 1] }, 12, 12);
-    this.setTarget("background", { list: ["#ffe8ec", "#f5f5f5"] }, 12, 12);
-    this.setTarget("html", "♥ Liked");
+    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,
@@ -148,13 +146,12 @@ import { App } from "targetj";
 
 App({
   width: 220, height: 60, lineHeight: 60, textAlign: "center",
-  borderRadius: 10, background: "#f5f5f5", cursor: "pointer", userSelect: "none",
+  borderRadius: 10, backgroundColor: "#f5f5f5", cursor: "pointer", userSelect: "none",
   html: "♡ Like",
 
   onClick() {
-    this.setTarget("scale",      { list: [1.2, 1] }, 12, 12);
-    this.setTarget("background", { list: ["#ffe8ec", "#f5f5f5"] }, 12, 12);
-    this.setTarget("html", "♥ Liked");
+    this.setTarget('scale', { value: [1.2, 1], steps: 8, interval: 12 });
+    this.setTarget('backgroundColor', { value: [ '#ffe8ec', '#f5f5f5' ], steps: 12, interval: 12 });
   },
 
   heart$$: {
@@ -214,13 +211,12 @@ import { App } from "targetj";
 App({
   likeButton: {
     width: 220, height: 60, lineHeight: 60, textAlign: "center",
-    borderRadius: 10, background: "#f5f5f5", cursor: "pointer", userSelect: "none",
+    borderRadius: 10, backgroundColor: "#f5f5f5", cursor: "pointer", userSelect: "none",
     role: "button", tabIndex: 0,
     html: "♡ Like",
     onClick() {
-      this.setTarget("scale",      { list: [1.2, 1] }, 12, 12);
-      this.setTarget("background", { list: ["#ffe8ec", "#f5f5f5"] }, 12, 12);
-      this.setTarget("html", "♥ Liked");
+      this.setTarget('scale', { value: [1.2, 1], steps: 8, interval: 12 });
+      this.setTarget('backgroundColor', { value: [ '#ffe8ec', '#f5f5f5' ], steps: 12, interval: 12 });
     },
   
     heart$$: {
@@ -251,7 +247,7 @@ App({
       }
     },  
     fetch$$: { method: "POST", id: 123, url: "/api/like" },
-    removeHearts$$() { this.removeAll(); },
+    removeHearts$$() { this.removeChildren(); },
     onKey(e) { if (e.key === "Enter") this.activateTarget("onClick"); }
   }
 });
@@ -327,23 +323,25 @@ import { App } from "targetj";
 
 **Via CDN**
 
-Add the following `<script>` tag to your HTML to load TargetJS from a CDN (only 54KB):
+Add the following `<script>` tag to your HTML to load TargetJS from a CDN:
 
 ```html
 <script src="https://unpkg.com/targetj@latest/dist/targetjs.js"></script>
 ```
 
-This exposes `TargetJS` on `window`, so you can initialize your app with `TargetJS.App(...)`. Make sure your code runs after the TargetJS script loads (use `defer` or place your script below it).
+This exposes `TargetJS` on `window`, so you can initialize your app with `TargetJS.App(...)`. Make sure your code runs after the TargetJS script and the DOM are ready (use defer, place your script below it, or wait for `DOMContentLoaded`).
 
 You can also use it without `App` by mounting a `TModel` object to an HTML element, for example:
 
 ```html
+<div id='redbox'></div>
+
 <script>
     new TargetJS.TModel({
-        background: 'red',
-        width: [100, 50, 10],
-        height: [100, 50, 10]
-    }).mount(document.body);
+        backgroundColor: 'red',
+        width: { value: [100, 250, 100], steps: 20 },
+        height: { value: [100, 250, 100], steps: 20 }
+    }).mount('#redbox');
 </script>
 ```
 Or, directly in your HTML with `tg-` attributes:
@@ -351,8 +349,8 @@ Or, directly in your HTML with `tg-` attributes:
 ```html
 <div
    tg-background="red"
-   tg-width="[100, 50, 10]"
-   tg-height="[100, 50, 10]">
+   tg-width="{ value: [100, 250, 100], steps: 20 }"
+   tg-height="{ value: [100, 250, 100], steps: 20 }">
 </div>
 ```
 
@@ -368,7 +366,7 @@ TargetJS addresses several common pain points in front-end development:
 4.  **Rigid Static Layer of HTML:** Many frameworks use HTML as the primary medium for generating the user interface. TargetJS makes JavaScript the primary driver.  
 5.  **Boilerplate and Verbosity:** TargetJS aims to reduce boilerplate code. The code is compact and follows a predictable execution flow.
 6.  **Difficult Animation Control:**  TargetJS makes animations first-class citizens with fine-grained control.
-8.  **Performance Bottlenecks with Large Lists:** TargetJS optimizes rendering for large lists by using a tree structure that renders only the visible branches.
+7.  **Performance Bottlenecks with Large Lists:** TargetJS optimizes rendering for large lists by using a tree structure that renders only the visible branches.
 
 ---
 
@@ -398,19 +396,28 @@ App({
     child$() {
         const user = this.prevTargetValue;
         return {
-            width: 200,
-            height: 65,
-            borderRadius: 10,
+          width: 200,
+          height: 65,
+          borderRadius: 10,
+          boxSizing: "border-box",
+          padding: 10,
+          fontSize: 14,
+          backgroundColor: "#f0f0f0",
+          scale: { value: [0.8, 1], steps: 14, interval: 12 },
+          userName$$: {
+            padding: "10px 0 5px 10px",
             boxSizing: "border-box",
-            padding: 10,
-            fontSize: 14,
-            background: "#f0f0f0",
-            scale: [{ list: [0.8, 1] }, 14, 12],
-            html$() {
-              return `<div style="font-weight:600">${user.name}</div>
-                <div style="opacity:.65">${user.email}</div>`;
-            },
-        };
+            fontWeight: 600,
+            opacity: { value: [0, 1], steps: 50 },
+            html: user.name
+          },
+          userEmail$$: {
+            paddingLeft: 10,
+            boxSizing: "border-box",
+            opacity: { value: [0, 0.7], steps: 50 },
+            html: user.email
+          }
+       };
     }
 });
 ```
@@ -438,92 +445,85 @@ App({
 
 ### Infinite Loading and Scrolling Example
 
-In this advanced example, we implement an infinite-scrolling application. The asynchronous flow that we want to achieve:
-1. Insert new items, and animate their width and background.
-2. On animation completion, trigger the API request for the visible items.
-3. Await for all API responses of all the items and then populate their names.
-
-This example could use other flows such as calling the API as soon as items are added, or populating each item’s name as its result arrives instead of waiting for all visible items. 
-All of these are doable, but we chose the above to showcase a more complex, sequential async flow.
+In this advanced example, we implement an infinite-scrolling application.
 
 **Explanation:**
 
-- children: `children` is a special target that adds several items to the container's children each time it is executed. The `onVisibleChildrenChange` event function detects changes in the visible children and activates the `children` target to add new items that fill the gaps.  
-
-- _loadItems: Because the target name starts with `_`, it executes only when explicitly activated, which happens inside the `onVisibleChildrenChange` event function. TargetJS guarantees that this array preserves the order in which API calls were made, not the order in which responses were received.
-
-- populate: Since the target name ends with `$$`, it executes only after all API calls have completed. It updates the content of each scrollable item with the name returned by the API.
+* `addChildren` is a special target that adds multiple items to the container’s children each time it executes. The `onVisibleChildrenChange` event detects changes in the visible children and activates `addChildren` to insert new items and fill any gaps.
 
-TargetJS employs a tree-like structure to track visible branches, optimizing the scroller performance.
+* `photo` and `userName` each add a `div` element inside every item, serving as placeholders for the photo and user name.
 
+* `pause$$` delays the execution of all targets that follow it by 100 ms.
 
-  <img src="https://targetjs.io/img/infiniteScrolling.gif" width="130" />
+* `fetch$$` retrieves the user’s details.
 
-```javascript
-import { App, TModel, getEvents, fetch, getScreenWidth, getScreenHeight } from "targetj";
+* `reveal$$` executes after `fetch$$`, revealing the user name and populating the photo with a random color.
 
-App({
-    preventDefault: true,
-    containerOverflowMode: "always",
-    _loadItems() {
-        this.visibleChildren.filter(child => !child.loaded).forEach(child => {
-            child.loaded = true;
-            fetch(this, `https://targetjs.io/api/randomUser?id=${child.oid}`);
-        });
-    },
-    populate$$() {
-        if (this.prevTargetValue) {
-            this.prevTargetValue.forEach(data => this.getChildByOid(data.id).setTarget("html", data.name));
-        }
-    },
-    children() {
-        const childrenCount = this.getChildren().length;
-        return Array.from({length: 20}, (_, i) => ({
-            animate() {
-                const pWidth = this.parent.getWidth();
-                this.setTarget({ width: {list: [100, 250, 100]}, x: { list: [ (pWidth - 100) / 2, (pWidth - 250) / 2, (pWidth - 100) / 2 ] } }, 100);
-            },
-            backgroundColor: [{list: ["#FCE961", "#B388FF"]}, 15, 15],
-            height: 48,
-            color: "#C2FC61",
-            textAlign: "center",
-            lineHeight: 48,
-            bottomMargin: 2,
-            html: childrenCount + i,
-            validateVisibilityInParent: true,
-        }));
-    },
-    onScroll() {
-        this.setTarget("scrollTop", Math.max(0, this.getScrollTop() + getEvents().deltaY()));
-    },
-    onVisibleChildrenChange() {
-        this.activateTarget("loadItems");
+* `wave$$` executes only after all preceding children have completed their targets, giving each user item a coordinated animation.
 
-        if (getEvents().dir() === "down" && this.visibleChildren.length * 50 < this.getHeight()) {
-            this.activateTarget("children");
-        }
-    },
-    width: getScreenWidth,
-    height: getScreenHeight,
-    onResize: "width"
-});
+TargetJS employs a tree-like structure to track visible branches, optimizing scroller performance.
 
-```
 
-We can reduce the number of API calls by triggering them only after scrolling stops as follows:
+  <img src="https://targetjs.io/img/infiniteScrolling20.gif" width="130" />
 
 ```javascript
-    _loadItems: {
-        value() {
-            this.visibleChildren.filter(child => !child.loaded).forEach(child => {
-                child.loaded = true;
-                fetch(this, `https://targetjs.io/api/randomUser?id=${child.oid}`);
-            });
-        },
-        enabledOn() {
-            return getEvents().deltaY() === 0;
-        }
+import { App, getEvents, getScreenWidth, getScreenHeight } from "targetj";
+
+App({
+  preventDefault: true,
+  width: 250,
+  height() { return getScreenHeight(); },
+  x() { return (getScreenWidth() - this.getWidth()) / 2; },
+  containerOverflowMode: "always",
+  addChildren() {
+    return Array.from({ length: 10 }, (_, i) => ({
+      height: 56,
+      width() { return this.parent.getWidth(); },
+      bottomMargin: 8,
+      borderRadius: 12,
+      backgroundColor: "white",
+      validateVisibilityInParent: true,
+      boxShadow: "0 8px 20px rgba(0,0,0,0.08)",
+      photo: {
+        x: 10, y: 10, width: 34, height: 34,
+        borderRadius: "50%",
+        backgroundColor: "#ddd"
+      },
+      userName: {
+        x: 60, y: 10, width: 180, height: 30,
+        overflow: "hidden",
+        borderRadius: 5,
+        backgroundColor: "#ddd"
+      },
+      pause$$: { interval: 100 },
+      fetch$$: "https://targetjs.io/api/randomUser",
+      reveal$$() {
+        const userName = this.getChild("userName");
+        userName.setTarget("html", this.val("fetch$$").name);
+        userName.setTarget("backgroundColor", { value: "white", steps: 20 });
+        this.getChild("photo").setTarget("backgroundColor", { value: "#" + Math.random().toString(16).slice(-6), steps: 20 });
+      },
+    }));
+  },
+  wave$$: {
+    interval: 30,
+    cycles() { return this.visibleChildren.length - 1; },
+    value(i) {
+      const child = this.visibleChildren[i];
+      child.setTarget("scale", { value: [1, 1.06, 1], steps: 18 });
+      child.setTarget("opacity", { value: [1, 0.92, 1], steps: 18 });
     }
+  },
+  onScroll() {
+    this.setTarget("scrollTop", Math.max(0, this.getScrollTop() + getEvents().deltaY()));
+  },
+  onVisibleChildrenChange() {
+    const visibleCount = this.visibleChildren.length;
+    if (getEvents().dir() !== "up" && visibleCount * 64 < this.getHeight()) {
+      this.activateTarget("addChildren");
+    }
+  }
+});
 ```
 ---
 
@@ -541,12 +541,15 @@ each time an API response is received, while ensuring the order of API calls is
 then the second, and so on.
   
 1. **Postfix `$$` to the target name** (Deferred): 
-A target name ending with `$$` indicates that it will be activated only after all the preceding target has completed, along with all its imperative targets,
+A target name ending with `$$` indicates that it will be activated only after all the preceding targets have completed, along with all its imperative targets,
 and after all API results have been received.
 
 1. **Prefix `_` to the target name** (Inactive): 
 It indicates that the target is in an inactive state and must be activated by an event or other targets explicitly.
 
+1. **onComplete**
+It gets executed when the target and all proceeding targets fully complete their execution. It is equivalent to `$$`, but is executed from the same target.
+
 1. **enabledOn**
 Determines whether the target is eligible for execution. If enabledOn() returns false, the target remains active until it is enabled and gets executed.
 
@@ -563,7 +566,7 @@ It specifies the pause between each target execution or each actual value update
 By default, the actual value is updated immediately after the target value. The steps option allows the actual value to be updated in iterations specified by the number of steps.
 
 1. **easing**
-An easing function that operates when steps are defined. It controls how the actual value is updated in relation to the steps.
+A string that defines a predefined easing function that controls how the actual value is updated in relation to the steps.
 
 1. **onValueChange**
 This callback is triggered whenever there is a change returned by the target method/property `value`.

package/build/App.js

@@ -30,7 +30,7 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 var tApp;
-var queuedAppCall = null;
+var queuedAppCalls = [];
 var AppFn = function AppFn() {
   var my = {};
   my.throttle = 0;
@@ -67,10 +67,13 @@ var AppFn = function AppFn() {
           return height;
         },
         initPageDom: function initPageDom() {
+          var _this = this;
           _DomInit.DomInit.initPageDoms(this.$dom);
-          if (queuedAppCall) {
-            this.addChild(queuedAppCall);
-            queuedAppCall = undefined;
+          if (queuedAppCalls.length) {
+            queuedAppCalls.forEach(function (child) {
+              return _this.addChild(child);
+            });
+            queuedAppCalls.length = 0;
           }
         }
       });
@@ -190,12 +193,23 @@ var AppFn = function AppFn() {
 };
 var App = exports.App = function App(firstChild) {
   var _tApp;
+  if (!firstChild) {
+    return;
+  }
+  var tmodel = firstChild instanceof _TModel.TModel ? firstChild : new _TModel.TModel('App', firstChild);
   if (!((_tApp = tApp) !== null && _tApp !== void 0 && _tApp.tRoot)) {
-    queuedAppCall = firstChild;
-  } else if (firstChild) {
-    var _tApp2;
-    (_tApp2 = tApp) === null || _tApp2 === void 0 || _tApp2.tRoot.addChild(firstChild);
+    queuedAppCalls.push(tmodel);
+  } else {
+    tApp.tRoot.addChild(tmodel);
+  }
+  return tmodel;
+};
+App.mount = function (child, elemTarget) {
+  var tmodel = App(child);
+  if (tmodel) {
+    tmodel.mount(elemTarget);
   }
+  return tmodel;
 };
 App.oids = {};
 App.tmodelIdMap = {};
@@ -214,64 +228,64 @@ var isRunning = exports.isRunning = function isRunning() {
   return tApp ? tApp.runningFlag : false;
 };
 var tRoot = exports.tRoot = function tRoot() {
-  var _tApp3;
-  return (_tApp3 = tApp) === null || _tApp3 === void 0 ? void 0 : _tApp3.tRoot;
+  var _tApp2;
+  return (_tApp2 = tApp) === null || _tApp2 === void 0 ? void 0 : _tApp2.tRoot;
 };
 var getEvents = exports.getEvents = function getEvents() {
-  var _tApp4;
-  return (_tApp4 = tApp) === null || _tApp4 === void 0 ? void 0 : _tApp4.events;
+  var _tApp3;
+  return (_tApp3 = tApp) === null || _tApp3 === void 0 ? void 0 : _tApp3.events;
 };
 var getPager = exports.getPager = function getPager() {
-  var _tApp5;
-  return (_tApp5 = tApp) === null || _tApp5 === void 0 ? void 0 : _tApp5.pager;
+  var _tApp4;
+  return (_tApp4 = tApp) === null || _tApp4 === void 0 ? void 0 : _tApp4.pager;
 };
 var getLoader = exports.getLoader = function getLoader() {
-  var _tApp6;
-  return (_tApp6 = tApp) === null || _tApp6 === void 0 ? void 0 : _tApp6.loader;
+  var _tApp5;
+  return (_tApp5 = tApp) === null || _tApp5 === void 0 ? void 0 : _tApp5.loader;
 };
 var fetch = exports.fetch = function fetch(tmodel, url, query, cacheId) {
-  var _tApp7;
-  return (_tApp7 = tApp) === null || _tApp7 === void 0 || (_tApp7 = _tApp7.loader) === null || _tApp7 === void 0 ? void 0 : _tApp7.fetch(tmodel, url, query, cacheId);
+  var _tApp6;
+  return (_tApp6 = tApp) === null || _tApp6 === void 0 || (_tApp6 = _tApp6.loader) === null || _tApp6 === void 0 ? void 0 : _tApp6.fetch(tmodel, url, query, cacheId);
 };
 var fetchImage = exports.fetchImage = function fetchImage(tmodel, src, cacheId) {
-  var _tApp8;
-  return (_tApp8 = tApp) === null || _tApp8 === void 0 || (_tApp8 = _tApp8.loader) === null || _tApp8 === void 0 ? void 0 : _tApp8.fetchImage(tmodel, src, cacheId);
+  var _tApp7;
+  return (_tApp7 = tApp) === null || _tApp7 === void 0 || (_tApp7 = _tApp7.loader) === null || _tApp7 === void 0 ? void 0 : _tApp7.fetchImage(tmodel, src, cacheId);
 };
 var getManager = exports.getManager = function getManager() {
-  var _tApp9;
-  return (_tApp9 = tApp) === null || _tApp9 === void 0 ? void 0 : _tApp9.manager;
+  var _tApp8;
+  return (_tApp8 = tApp) === null || _tApp8 === void 0 ? void 0 : _tApp8.manager;
 };
 var getTargetManager = exports.getTargetManager = function getTargetManager() {
-  var _tApp10;
-  return (_tApp10 = tApp) === null || _tApp10 === void 0 ? void 0 : _tApp10.targetManager;
+  var _tApp9;
+  return (_tApp9 = tApp) === null || _tApp9 === void 0 ? void 0 : _tApp9.targetManager;
 };
 var getAnimationManager = exports.getAnimationManager = function getAnimationManager() {
-  var _tApp11;
-  return (_tApp11 = tApp) === null || _tApp11 === void 0 ? void 0 : _tApp11.animationManager;
+  var _tApp10;
+  return (_tApp10 = tApp) === null || _tApp10 === void 0 ? void 0 : _tApp10.animationManager;
 };
 var getRunScheduler = exports.getRunScheduler = function getRunScheduler() {
-  var _tApp12;
-  return (_tApp12 = tApp) === null || _tApp12 === void 0 ? void 0 : _tApp12.runScheduler;
+  var _tApp11;
+  return (_tApp11 = tApp) === null || _tApp11 === void 0 ? void 0 : _tApp11.runScheduler;
 };
 var getLocationManager = exports.getLocationManager = function getLocationManager() {
-  var _tApp13;
-  return (_tApp13 = tApp) === null || _tApp13 === void 0 ? void 0 : _tApp13.locationManager;
+  var _tApp12;
+  return (_tApp12 = tApp) === null || _tApp12 === void 0 ? void 0 : _tApp12.locationManager;
 };
 var getScreenWidth = exports.getScreenWidth = function getScreenWidth() {
-  var _tApp$tRoot$val, _tApp14;
-  return (_tApp$tRoot$val = (_tApp14 = tApp) === null || _tApp14 === void 0 || (_tApp14 = _tApp14.tRoot) === null || _tApp14 === void 0 ? void 0 : _tApp14.val('screenWidth')) !== null && _tApp$tRoot$val !== void 0 ? _tApp$tRoot$val : 0;
+  var _tApp$tRoot$val, _tApp13;
+  return (_tApp$tRoot$val = (_tApp13 = tApp) === null || _tApp13 === void 0 || (_tApp13 = _tApp13.tRoot) === null || _tApp13 === void 0 ? void 0 : _tApp13.val('screenWidth')) !== null && _tApp$tRoot$val !== void 0 ? _tApp$tRoot$val : 0;
 };
 var getScreenHeight = exports.getScreenHeight = function getScreenHeight() {
-  var _tApp$tRoot$val2, _tApp15;
-  return (_tApp$tRoot$val2 = (_tApp15 = tApp) === null || _tApp15 === void 0 || (_tApp15 = _tApp15.tRoot) === null || _tApp15 === void 0 ? void 0 : _tApp15.val('screenHeight')) !== null && _tApp$tRoot$val2 !== void 0 ? _tApp$tRoot$val2 : 0;
+  var _tApp$tRoot$val2, _tApp14;
+  return (_tApp$tRoot$val2 = (_tApp14 = tApp) === null || _tApp14 === void 0 || (_tApp14 = _tApp14.tRoot) === null || _tApp14 === void 0 ? void 0 : _tApp14.val('screenHeight')) !== null && _tApp$tRoot$val2 !== void 0 ? _tApp$tRoot$val2 : 0;
 };
 var getVisibles = exports.getVisibles = function getVisibles() {
-  var _tApp16;
-  return (_tApp16 = tApp) === null || _tApp16 === void 0 || (_tApp16 = _tApp16.manager) === null || _tApp16 === void 0 ? void 0 : _tApp16.getVisibles();
+  var _tApp15;
+  return (_tApp15 = tApp) === null || _tApp15 === void 0 || (_tApp15 = _tApp15.manager) === null || _tApp15 === void 0 ? void 0 : _tApp15.getVisibles();
 };
 var getResizeLastUpdate = exports.getResizeLastUpdate = function getResizeLastUpdate() {
-  var _tApp17;
-  return (_tApp17 = tApp) === null || _tApp17 === void 0 ? void 0 : _tApp17.resizeLastUpdate;
+  var _tApp16;
+  return (_tApp16 = tApp) === null || _tApp16 === void 0 ? void 0 : _tApp16.resizeLastUpdate;
 };
 var getTModelById = exports.getTModelById = function getTModelById(id) {
   return App.tmodelIdMap[id];

package/build/BaseModel.js

@@ -1150,7 +1150,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         if (this.getParent() === invokerTModel) {
           _TargetUtil.TargetUtil.markChildAction(invokerTModel, invokerTarget, this);
         }
-        targetValue.invokerModel = invokerTModel;
+        targetValue.invokerTModel = invokerTModel;
         targetValue.invokerTarget = invokerTarget;
         if (this.targetValues[key]) {
           targetValue.activationTime = _TUtil.TUtil.now();

package/build/DomInit.js

@@ -8,6 +8,7 @@ var _$Dom = require("./$Dom.js");
 var _TUtil = require("./TUtil.js");
 var _App = require("./App.js");
 var _TargetData = require("./TargetData.js");
+var _TModelUtil = require("./TModelUtil.js");
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -65,6 +66,29 @@ var DomInit = exports.DomInit = /*#__PURE__*/function () {
       }
       return newVisibles;
     }
+  }, {
+    key: "mount",
+    value: function mount(tmodel, elemTarget) {
+      if (elemTarget !== undefined) {
+        var $dom = _TModelUtil.TModelUtil.normalizeDomHolder(elemTarget);
+        if ($dom) {
+          tmodel.targets.$dom = $dom;
+          tmodel.val('$dom', $dom);
+          delete tmodel.targets.position;
+          var id = $dom.getId();
+          if (id) {
+            var uniqueId = _App.App.getOid(id);
+            tmodel.type = id;
+            tmodel.oid = uniqueId.oid;
+            tmodel.oidNum = uniqueId.num;
+          }
+          $dom.setSelector("#".concat(tmodel.oid));
+          $dom.setId(tmodel.oid);
+          $dom.attr('tgjs', 'true');
+          tmodel.initTargets();
+        }
+      }
+    }
   }, {
     key: "initPageDoms",
     value: function initPageDoms($dom) {

package/build/TModel.js

@@ -12,6 +12,7 @@ var _TargetData = require("./TargetData.js");
 var _SearchUtil = require("./SearchUtil.js");
 var _TargetUtil = require("./TargetUtil.js");
 var _TModelUtil = require("./TModelUtil.js");
+var _DomInit = require("./DomInit.js");
 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; } }
@@ -633,14 +634,9 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
     }
   }, {
     key: "mount",
-    value: function mount(target) {
-      if (target !== undefined) {
-        var domHolder = _TModelUtil.TModelUtil.normalizeDomHolder(target);
-        if (domHolder) {
-          this.val('domHolder', domHolder);
-        }
-      }
-      (0, _App.tRoot)().addChild(this);
+    value: function mount(elemTarget) {
+      _DomInit.DomInit.mount(this, elemTarget);
+      return this;
     }
   }, {
     key: "hasDom",

package/build/TargetData.js

@@ -880,8 +880,8 @@ _defineProperty(TargetData, "allEventMap", {
     return (0, _App.getEvents)().getEventType() === 'submit';
   }
 });
-_defineProperty(TargetData, "excludedTargetKeys", new Set(['originalTargetName', 'originalTModel', 'activateNextTarget', 'active', 'childAction', 'fetchAction']));
-_defineProperty(TargetData, "lifecycleCallbackSet", new Set(['onValueChange', 'onImperativeEnd', 'onImperativeStep', 'onStepsEnd', 'onSuccess', 'onError']));
+_defineProperty(TargetData, "excludedTargetKeys", new Set(['originalTargetName', 'originalTModel', 'activateNextTarget', 'invokerTarget', 'invokerTModel', 'active', 'addChildAction', 'childAction', 'fetchAction']));
+_defineProperty(TargetData, "lifecycleCallbackSet", new Set(['onComplete', 'onValueChange', 'onImperativeEnd', 'onImperativeStep', 'onStepsEnd', 'onSuccess', 'onError']));
 _defineProperty(TargetData, "lifecycleCoreSet", new Set(['value', 'steps', 'cycles', 'enabledOn', 'loop', 'interval']));
 _defineProperty(TargetData, "lifecycleMethodSet", new Set([].concat(_toConsumableArray(_TargetData.lifecycleCallbackSet), _toConsumableArray(_TargetData.lifecycleCoreSet))));
 _defineProperty(TargetData, "lifecyclePatterns", {

package/build/TargetUtil.js

@@ -292,13 +292,13 @@ var TargetUtil = exports.TargetUtil = /*#__PURE__*/function () {
       if (!targetValue) {
         return;
       }
-      var invokerModel = tmodel.isTargetImperative(key) ? targetValue.originalTModel : targetValue.invokerModel;
+      var invokerTModel = tmodel.isTargetImperative(key) ? targetValue.originalTModel : targetValue.invokerTModel;
       var invokerTarget = tmodel.isTargetImperative(key) ? targetValue.originalTargetName : targetValue.invokerTarget;
-      if (!invokerModel || !invokerTarget) {
+      if (!invokerTModel || !invokerTarget) {
         return;
       }
-      TargetUtil.cleanupTarget(invokerModel, invokerTarget);
-      TargetUtil.bubbleInvokerCompletion(invokerModel, invokerTarget, visited, levelUp + 1);
+      TargetUtil.cleanupTarget(invokerTModel, invokerTarget);
+      TargetUtil.bubbleInvokerCompletion(invokerTModel, invokerTarget, visited, levelUp + 1);
     }
   }, {
     key: "activateTargets",