targetj 1.0.154 → 1.0.156

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 designed to simplify front-end development by introducing a unique paradigm centered around Targets, which function as **enhanced variables and methods** with **lifecycles**.  This approach provides a unified solution for UI rendering, animations, API interactions, state management, and event handling, leading to more compact code and a stronger focus on user experience. TargetJS is also a highly performant web framework, as shown in the [framework benchmark](https://krausest.github.io/js-framework-benchmark/current.html).
+TargetJS is a modern JavaScript UI framework designed to simplify front-end development by introducing a unique paradigm based on literal objects and extending their properties and methods with lifecycles and functional pipelines.  The framework provides a unified solution for UI rendering, animations, API interactions, state management, and event handling, leading to more compact code and a stronger focus on user experience. TargetJS is also a highly performant web framework, as shown in the [framework benchmark](https://krausest.github.io/js-framework-benchmark/current.html).
 ## What Problems Does TargetJS Solve?
 
 TargetJS addresses several common pain points in front-end development:
@@ -55,7 +55,7 @@ npm install targetj
 
 ## Key Features and Concepts
 
-*   **Targets:** The fundamental building blocks of TargetJS. Targets provide a unified interface for variables and methods with built-in lifecycles. They can:
+*   **Targets:** The fundamental building blocks of TargetJS. Targets provide a unified interface for properties and methods with built-in lifecycles. They can:
     *   Iterate towards values (useful for animations and transitions).
     *   Execute conditionally.
     *   Manage repeated executions.
@@ -70,7 +70,7 @@ npm install targetj
 
 *  **Unique computational paradigm:** TargetJS introduces a novel computational model by integrating multiple paradigms: Turing Completeness, the Von Neumann Execution Model, and Functional Programming. This results in:
 
-   * Deterministic Execution Flow: Targets execute based on their activation order, initially following their order in the code. They run in sequence as part of the task processing cycle. Everything in TargetJS is synchronous, and targets cannot be called directly.
+   * Deterministic Execution Flow: Targets execute based on their activation order, initially following their order in the code. They run in sequence as part of the framework execution cycle. Everything in TargetJS is synchronous, and targets cannot be called directly.
    * Powerful Functional Pipeline: Targets can be structured as a functional pipeline with enhanced capabilities.
 
 *   **Easy Integration:** Can be used as a library within existing projects.
@@ -109,11 +109,11 @@ In this example, we load one user and display its name.
 ![first example](https://targetjs.io/img/quick2_4.gif)
 
 ```bash
-import { App, getLoader } from "targetj";
+import { App, fetch } from "targetj";
 
 App({
     loadUser() {
-      getLoader().fetch(this, "https://targetjs.io/api/randomUser", { id: "user0" });
+      fetch(this, "https://targetjs.io/api/randomUser", { id: "user0" });
     },
     _html$() {
       return this.prevTargetValue.name;
@@ -132,12 +132,12 @@ TargetJS ensures that API results are processed in the same sequence as the API
 ![first example](https://targetjs.io/img/quick3_1.gif)
 
 ```bash
-import { App, getLoader } from "targetj";
+import { App, fetch } from "targetj";
 
 App({
     loadUsers() {
-      getLoader().fetch(this, "https://targetjs.io/api/randomUser", { id: "user0" });
-      getLoader().fetch(this, "https://targetjs.io/api/randomUser", { id: "user1" });
+      fetch(this, "https://targetjs.io/api/randomUser", { id: "user0" });
+      fetch(this, "https://targetjs.io/api/randomUser", { id: "user1" });
     },
     _children$() {
       return {
@@ -152,32 +152,39 @@ App({
 
 ## Comparison with Other UI Frameworks  
 
-| Feature                               | TargetJS                        | Reactive Model Frameworks             |
-|--------------------------------------|-----------------------------------------------------------------|------------------------------------------------------|
-| **Component Basic Structure**     | Components consist of Targets, providing a unified interface for methods and variables. | Components consist of methods and variables.
-| **Execution Order**                   | Components consist of Targets, providing a unified interface for methods and variables. | Primarily data-driven, less predictable. |
-| **Function Calls**                    | Targets cannot be called directly. Execution is part of a task cycle. | Functions execute reactively or are called imperatively. |
-| **Autonomous Execution**              | Targets can self-activate and operate autonomously. | Functions do not execute autonomously. |
-| **Execution Pipeline**                | Targets can form controlled pipelines; a target can activate when the preceding target executes or completes. | Functions are called whenever dependencies update. Execution order is not based on code appearance. |
-| **Event Handling**                    | Primarily by activating Targets, making event handling consistent with the core execution model. | Events are handled through event listeners, subscriptions, or reactive bindings. |
-| **State Management**                  | Unified within Targets; no external state libraries needed. | State is often managed through reactive stores. |
-| **UI Organization and Animation**      | UI controlled by Targets; styles incorporated directly. Animations handled directly by Targets, with step-by-step updates. | Component-based rendering and reactivity. Animations via CSS transitions, JavaScript, or external libraries. |
-| **HTML and Nesting**                   | Minimal HTML reliance; code is the primary driver. Dynamic nesting. | HTML structure is an integral part of UI frameworks. Components and templates define static layouts; JSX or templates are used.|
-| **CSS Handling**                       | CSS is optional; styles can be incorporated directly as Targets. | External stylesheets, CSS-in-JS, or utility-first CSS (e.g., Tailwind). Styles are often separate from logic. |
-| **API Calls**                          | Can be chained in a pipeline; the bottom target activates only when each call is completed in the order invoked or when all calls are complete. | Usually handled with Promises, async/await, or reactive effects; less structured execution. |
-| **Large List Performance**             | Optimized with an internal tree structure; monitors only the visible branch. | Can require careful optimization for very large lists (e.g., virtualization).
-| **Workflow development**               | Targets offer a unified solution for UI , animation, event handling, API calls, and state management. | Multiple technologies, commands, and approaches.
-| **Execution control by time**          | TargetJS enables easy sequencing and parallelization for complex UI behaviors. | Not easily accomplished.
+| Feature                               | TargetJS                                                              | Reactive Model Frameworks                                         |
+|--------------------------------------|------------------------------------------------------------------------|-------------------------------------------------------------------|
+| **Component Basic Structure**        | Provides a unified interface where methods and properties are treated identically.       | Methods and variables are distinct.                               |
+| **Execution Order**                  | Targets are executed based on their activation order, which initially follows their appearance in the code. They run in a sequential and predictable manner. | Less predictable.                                                |
+| **Function Calls**                   | Targets cannot be called directly. Execution is part of a framework execution cycle, ensuring synchronization. | Functions can be called directly and are less synchronous.        |
+| **Autonomous Execution**             | Targets can self-activate and operate autonomously, and have the ability to schedule their execution by time. | Functions do not execute autonomously. Control flow with time is difficult.                          |
+| **Execution Pipeline**               | Targets can form controlled pipelines; a target can activate when the preceding target executes or completes. | Function pipelines are limited.                                   |
+| **Event Handling**                   | By activating targets, event handling becomes synchronous and consistent with the core execution model. | Events are handled asynchronously.                                |
+| **State Management**                 | Unified within targets; no external state libraries needed.            | State management is often an issue.                               |
+| **Animations**                       | Animations are handled directly by targets and are consistent with the rest of the program. | CSS transitions or external libraries.                            |
+| **HTML and Nesting**                 | Built to enhance HTML elements with any logic and is less reliant on HTML blocks. | HTML structure is an integral part of UI frameworks.              |
+| **CSS Handling**                     | CSS is optional; styles can be incorporated directly as targets.       | Styles are often separate from logic.                             |
+| **API Calls**                        | API results are synchronous and can be chained in a pipeline.          | Usually handled with Promises, async/await, less structured execution. |
+| **Large List Performance**           | Optimized with an internal tree structure; monitors only the visible branch. | Can require careful optimization.                                 |
+| **Workflow Development**             | Targets offer a unified solution for UI, animation, event handling, API calls, and state management. | Multiple technologies and approaches.                             |
+| **Execution Control by Time**        | TargetJS enables easy sequencing and parallelization for complex UI behaviors. | Not easily accomplished.                                          |
+
 
 ## The Core of TargetJS
 
-TargetJS utilizes literal JavaScript objects for target definitions, providing a compact and readable format. Targets offer a unified interface that encompasses both properties and functions. 
-TargetJS leverages ES2015's guaranteed property order to ensure that target execution follows the order in which the code is written.
+TargetJS utilizes literal JavaScript objects for target definitions, providing a compact and readable format. The core principles are:
+
+- Provide an internal wrapper (called "targets") for both properties and methods of the literal object.
+- Execute targets sequentially, in the order they are written leveraging ES2015's guaranteed property order.
+- Enable functional pipelines between adjacent targets.
+- Add lifecycles, looping, and timing to targets, enabling them to execute or re-execute based on conditions or time.
+
+That's the basic idea. Learn more [here](https://dev.to/ahmad_wasfi_f88513699c56d/targetjs-rethinking-ui-with-declarative-synchronous-pipelines-5bbi).
 
 ## Anatomy of a Target
 
 Each target consists of the following:
-1. Target Value and Actual Value. The target value refers to the value assigned to a variable or the output produced by the `value()` method associated with the target defined in your program. The actual value is the value used by the rest of the application. When the target value differs from the actual value, TargetJS iteratively updates the actual value until it matches the target value. This process is managed by two additional variables: `step`, which dictates the number of iterations, and `interval`, which specifies the duration (in milliseconds) the system waits before executing the next iteration.
+1. Target Value and Actual Value. The target value refers to the value assigned to a property or the output produced by the `value()` method associated with the target defined in your program. The actual value is the value used by the rest of the application. When the target value differs from the actual value, TargetJS iteratively updates the actual value until it matches the target value. This process is managed by two additional variables: `step`, which dictates the number of iterations, and `interval`, which specifies the duration (in milliseconds) the system waits before executing the next iteration.
 
 2. State: Targets have four states that control their lifecycles: `active`, `inactive`, `updating`, and `complete`.
    - `active`: This is the default state for all targets. It indicates that the target is ready to be executed, and the target value needs to be initialized from the variable it represents or its `value()` method needs to be executed to calculate its output.
@@ -196,7 +203,7 @@ All methods and properties are optional, but they play integral roles in making
 If defined, value is the primary target method that will be executed. The target value will be calculated based on the result of this method.
 
 2. **Prefix `_` to the target name**
-It indicates that the target is in an inactive state and must be activated by an event or ther targets.
+It indicates that the target is in an inactive state and must be activated by an event or other targets.
 
 3. **active**
 This is only a property. It indicates whether the target is ready for execution. When set to false, it behaves similarly to a `_ `prefix. By default, all targets are active, so setting it to true is unnecessary.
@@ -229,7 +236,7 @@ By default, the actual value is updated immediately after the target value. The
 An easing function that operates when steps are defined. It controls how the actual value is updated in relation to the steps.
 
 9. **onValueChange**
-This callbak is triggered whenever there is a change returned by the target method, which is called value().
+This callback is triggered whenever there is a change returned by the target method, which is called value().
 
 10. **onStepsEnd**
 This method is invoked only after the final step of updating the actual value is completed, assuming the target has a defined steps value.
@@ -407,7 +414,7 @@ If you inspect the HTML elements in the browser's developer tools, you'll notice
 ![Single page app](https://targetjs.io/img/infiniteScrolling11.gif)
 
 ```bash
-import { App, getEvents, getLoader, getScreenWidth, getScreenHeight } from "targetj";
+import { App, getEvents, fetch, getScreenWidth, getScreenHeight } from "targetj";
 
 App({
     containerOverflowMode: "always",
@@ -429,7 +436,7 @@ App({
     },
     _load$() {
         this.prevTargetValue.forEach(data =>
-            getLoader().fetch(this, "https://targetjs.io/api/randomUser", { id: data.oid }));
+            fetch(this, "https://targetjs.io/api/randomUser", { id: data.oid }));
     },
     _populate$$() {
         this.prevTargetValue.forEach((data) => this.getChildByOid(data.id).setTarget("html", data.name));
@@ -519,7 +526,7 @@ App({
     },
     page2() {
         return {
-            ...this.val('page').targets,
+            ...this.val('page'),
             background: "#B388FF",
             html: 'page2'
         };         

package/build/$Dom.js

@@ -302,6 +302,11 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
     value: function outerHTML(html) {
       this.element.outerHTML = html;
     }
+  }, {
+    key: "isEmpty",
+    value: function isEmpty() {
+      return this.element.innerHTML === '';
+    }
   }, {
     key: "innerHTML",
     value: function innerHTML(html) {
@@ -391,7 +396,7 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
   }, {
     key: "stamp",
     value: function stamp() {
-      this.attr('data-tgt', 'true');
+      this.attr('data-tgjs', 'true');
     }
   }], [{
     key: "createTemplate",
@@ -404,7 +409,7 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
   }, {
     key: "getAllStamped",
     value: function getAllStamped() {
-      return document.querySelectorAll('[data-tgt="true"]');
+      return document.querySelectorAll('[data-tgjs="true"]');
     }
   }, {
     key: "query",

package/build/App.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tRoot = exports.tApp = exports.isRunning = exports.getVisibles = exports.getScreenWidth = exports.getScreenHeight = exports.getRunScheduler = exports.getResizeLastUpdate = exports.getPager = exports.getManager = exports.getLocationManager = exports.getLoader = exports.getEvents = exports.getBrowser = exports.App = void 0;
+exports.tRoot = exports.tApp = exports.isRunning = exports.getVisibles = exports.getScreenWidth = exports.getScreenHeight = exports.getRunScheduler = exports.getResizeLastUpdate = exports.getPager = exports.getManager = exports.getLocationManager = exports.getLoader = exports.getEvents = exports.getBrowser = exports.fetchImage = exports.fetch = exports.App = void 0;
 var _$Dom = require("./$Dom.js");
 var _TModel = require("./TModel.js");
 var _Browser = require("./Browser.js");
@@ -15,6 +15,7 @@ var _PageManager = require("./PageManager.js");
 var _TModelManager = require("./TModelManager.js");
 var _RunScheduler = require("./RunScheduler.js");
 var _TargetManager = require("./TargetManager.js");
+var _TargetExecutor = require("./TargetExecutor.js");
 var _TUtil = require("./TUtil.js");
 var _SearchUtil = require("./SearchUtil.js");
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
@@ -27,6 +28,7 @@ var AppFn = function AppFn(firstChild) {
   my.debugLevel = 0;
   my.runningFlag = false;
   my.resizeLastUpdate = 0;
+  my.pageIsEmpty = false;
   my.init = function () {
     my.browser = new _Browser.Browser();
     my.browser.setup();
@@ -46,15 +48,15 @@ var AppFn = function AppFn(firstChild) {
     my.tRootFactory = function () {
       var tmodel = new _TModel.TModel('tRoot', {
         start: function start() {
-          if (!_$Dom.$Dom.query('#tj-root')) {
+          if (!_$Dom.$Dom.query('#tgjs-root')) {
             this.$dom = new _$Dom.$Dom();
             this.$dom.create('div');
-            this.$dom.setSelector('#tj-root');
-            this.$dom.setId('#tj-root');
+            this.$dom.setSelector('#tgjs-root');
+            this.$dom.setId('#tgjs-root');
             this.$dom.attr("tabindex", "0");
             new _$Dom.$Dom('body').insertFirst$Dom(this.$dom);
           } else {
-            this.$dom = new _$Dom.$Dom('#tj-root');
+            this.$dom = new _$Dom.$Dom('#tgjs-root');
           }
         },
         styling: false,
@@ -102,17 +104,20 @@ var AppFn = function AppFn(firstChild) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           my.runningFlag = false;
+          _TargetExecutor.TargetExecutor.executeDeclarativeTarget(my.tRoot, 'width');
+          _TargetExecutor.TargetExecutor.executeDeclarativeTarget(my.tRoot, 'height');
           my.events.detachAll();
           my.events.detachWindowEvents();
           my.events.attachWindowEvents();
           my.events.clearAll();
-          _context.next = 7;
+          my.events.attachEvents(my.manager.lists.visible);
+          _context.next = 10;
           return my.runScheduler.resetRuns();
-        case 7:
+        case 10:
           my.runningFlag = true;
           my.runScheduler.schedule(0, "appStart");
           return _context.abrupt("return", my);
-        case 10:
+        case 13:
         case "end":
           return _context.stop();
       }
@@ -164,8 +169,7 @@ var App = exports.App = function App(tmodel) {
 };
 App.oids = {};
 App.getOid = function (type) {
-  var _App$tRoot;
-  var oids = type === 'Bracket' ? App.oids : (App === null || App === void 0 || (_App$tRoot = App.tRoot) === null || _App$tRoot === void 0 ? void 0 : _App$tRoot.oids) || App.oids;
+  var oids = App.oids;
   if (!_TUtil.TUtil.isDefined(oids[type])) {
     oids[type] = 0;
   }
@@ -194,36 +198,44 @@ var getLoader = exports.getLoader = function getLoader() {
   var _tApp4;
   return (_tApp4 = tApp) === null || _tApp4 === void 0 ? void 0 : _tApp4.loader;
 };
-var getManager = exports.getManager = function getManager() {
+var fetch = exports.fetch = function fetch(tmodel, url, query, cacheId) {
   var _tApp5;
-  return (_tApp5 = tApp) === null || _tApp5 === void 0 ? void 0 : _tApp5.manager;
+  return (_tApp5 = tApp) === null || _tApp5 === void 0 || (_tApp5 = _tApp5.loader) === null || _tApp5 === void 0 ? void 0 : _tApp5.fetch(tmodel, url, query, cacheId);
 };
-var getRunScheduler = exports.getRunScheduler = function getRunScheduler() {
+var fetchImage = exports.fetchImage = function fetchImage(tmodel, src, cacheId) {
   var _tApp6;
-  return (_tApp6 = tApp) === null || _tApp6 === void 0 ? void 0 : _tApp6.runScheduler;
+  return (_tApp6 = tApp) === null || _tApp6 === void 0 || (_tApp6 = _tApp6.loader) === null || _tApp6 === void 0 ? void 0 : _tApp6.fetchImage(tmodel, src, cacheId);
 };
-var getLocationManager = exports.getLocationManager = function getLocationManager() {
+var getManager = exports.getManager = function getManager() {
   var _tApp7;
-  return (_tApp7 = tApp) === null || _tApp7 === void 0 ? void 0 : _tApp7.locationManager;
+  return (_tApp7 = tApp) === null || _tApp7 === void 0 ? void 0 : _tApp7.manager;
 };
-var getBrowser = exports.getBrowser = function getBrowser() {
+var getRunScheduler = exports.getRunScheduler = function getRunScheduler() {
   var _tApp8;
-  return (_tApp8 = tApp) === null || _tApp8 === void 0 ? void 0 : _tApp8.browser;
+  return (_tApp8 = tApp) === null || _tApp8 === void 0 ? void 0 : _tApp8.runScheduler;
+};
+var getLocationManager = exports.getLocationManager = function getLocationManager() {
+  var _tApp9;
+  return (_tApp9 = tApp) === null || _tApp9 === void 0 ? void 0 : _tApp9.locationManager;
+};
+var getBrowser = exports.getBrowser = function getBrowser() {
+  var _tApp10;
+  return (_tApp10 = tApp) === null || _tApp10 === void 0 ? void 0 : _tApp10.browser;
 };
 var getScreenWidth = exports.getScreenWidth = function getScreenWidth() {
-  var _tApp$tRoot$getWidth, _tApp9;
-  return (_tApp$tRoot$getWidth = (_tApp9 = tApp) === null || _tApp9 === void 0 || (_tApp9 = _tApp9.tRoot) === null || _tApp9 === void 0 ? void 0 : _tApp9.getWidth()) !== null && _tApp$tRoot$getWidth !== void 0 ? _tApp$tRoot$getWidth : 0;
+  var _tApp$tRoot$getWidth, _tApp11;
+  return (_tApp$tRoot$getWidth = (_tApp11 = tApp) === null || _tApp11 === void 0 || (_tApp11 = _tApp11.tRoot) === null || _tApp11 === void 0 ? void 0 : _tApp11.getWidth()) !== null && _tApp$tRoot$getWidth !== void 0 ? _tApp$tRoot$getWidth : 0;
 };
 var getScreenHeight = exports.getScreenHeight = function getScreenHeight() {
-  var _tApp$tRoot$getHeight, _tApp10;
-  return (_tApp$tRoot$getHeight = (_tApp10 = tApp) === null || _tApp10 === void 0 || (_tApp10 = _tApp10.tRoot) === null || _tApp10 === void 0 ? void 0 : _tApp10.getHeight()) !== null && _tApp$tRoot$getHeight !== void 0 ? _tApp$tRoot$getHeight : 0;
+  var _tApp$tRoot$getHeight, _tApp12;
+  return (_tApp$tRoot$getHeight = (_tApp12 = tApp) === null || _tApp12 === void 0 || (_tApp12 = _tApp12.tRoot) === null || _tApp12 === void 0 ? void 0 : _tApp12.getHeight()) !== null && _tApp$tRoot$getHeight !== void 0 ? _tApp$tRoot$getHeight : 0;
 };
 var getVisibles = exports.getVisibles = function getVisibles() {
-  var _tApp11;
-  return (_tApp11 = tApp) === null || _tApp11 === void 0 || (_tApp11 = _tApp11.manager) === null || _tApp11 === void 0 ? void 0 : _tApp11.lists.visible;
+  var _tApp13;
+  return (_tApp13 = tApp) === null || _tApp13 === void 0 || (_tApp13 = _tApp13.manager) === null || _tApp13 === void 0 ? void 0 : _tApp13.lists.visible;
 };
 var getResizeLastUpdate = exports.getResizeLastUpdate = function getResizeLastUpdate() {
-  var _tApp12;
-  return (_tApp12 = tApp) === null || _tApp12 === void 0 ? void 0 : _tApp12.resizeLastUpdate;
+  var _tApp14;
+  return (_tApp14 = tApp) === null || _tApp14 === void 0 ? void 0 : _tApp14.resizeLastUpdate;
 };
 window.t = window.t || _SearchUtil.SearchUtil.find;

package/build/BaseModel.js

@@ -51,8 +51,10 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
     this.updatingChildrenMap = {};
     this.activeChildrenList = [];
     this.activeChildrenMap = {};
-    this.eventTargetList = [];
-    this.eventTargetMap = {};
+    this.externalEventList = [];
+    this.externalEventMap = {};
+    this.internalEventList = [];
+    this.internalEventMap = {};
     this.coreTargets = [];
     this.allStyleTargetList = [];
     this.allStyleTargetMap = {};
@@ -78,10 +80,10 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
       this.targetValues = {};
       this.activeTargetMap = {};
       this.activeTargetList = [];
-      var targetNames = Object.keys(this.targets);
+      this.originalTargetNames = Object.keys(this.targets);
       var domExists = _$Dom.$Dom.query("#".concat(this.oid));
       if (!domExists && !this.excludeDefaultStyling()) {
-        Object.entries(_TModelUtil.TModelUtil.defaultTargetStyles()).forEach(function (_ref) {
+        Object.entries(_TargetData.TargetData.defaultTargetStyles).forEach(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
             key = _ref2[0],
             value = _ref2[1];
@@ -91,14 +93,17 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         });
       } else if (domExists && !_TUtil.TUtil.isDefined(this.targets['reuseDomDefinition'])) {
         this.targets['reuseDomDefinition'] = true;
+        this.targets['excludeX'] = true;
+        this.targets['excludeY'] = true;
+        this.targets['position'] = 'relative';
       }
       Object.keys(this.targets).forEach(function (key) {
-        _this.processNewTarget(key, targetNames);
+        _this.processNewTarget(key);
       });
     }
   }, {
     key: "processNewTarget",
-    value: function processNewTarget(key, targetNames) {
+    value: function processNewTarget(key) {
       var target = this.targets[key];
       var cleanKey = _TargetUtil.TargetUtil.getTargetName(key);
       if (!_TUtil.TUtil.isDefined(target)) {
@@ -112,12 +117,19 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
           };
           target = this.targets[key];
         }
-        _TargetUtil.TargetUtil.bindTarget(this, key, targetNames);
+        _TargetUtil.TargetUtil.bindTarget(this, key, this.originalTargetNames);
       }
-      if (_TargetData.TargetData.allEventMap[cleanKey] || _TargetData.TargetData.internalEventMap[cleanKey]) {
-        if (!this.eventTargetMap[cleanKey]) {
-          this.eventTargetList.push(cleanKey);
-          this.eventTargetMap[cleanKey] = true;
+      if (_TargetData.TargetData.allEventMap[cleanKey]) {
+        if (!this.externalEventMap[cleanKey]) {
+          this.externalEventList.push(cleanKey);
+          this.externalEventMap[cleanKey] = true;
+          target.active = false;
+        }
+      }
+      if (_TargetData.TargetData.internalEventMap[cleanKey]) {
+        if (!this.internalEventMap[cleanKey]) {
+          this.internalEventList.push(cleanKey);
+          this.internalEventMap[cleanKey] = true;
           target.active = false;
         }
       }
@@ -136,9 +148,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
       if (_TUtil.TUtil.isDefined(target.initialValue)) {
         this.val(key, target.initialValue);
       }
-      if (!isInactiveKey) {
-        this.addToStyleTargetList(key);
-      }
+      this.addToStyleTargetList(key);
       if (_TargetData.TargetData.coreTargetMap[key] && !this.coreTargets.includes(key)) {
         this.coreTargets.push(key);
       }
@@ -168,7 +178,6 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
     key: "deactivate",
     value: function deactivate() {
       this.currentStatus = undefined;
-      this.activatedTargets.length = 0;
     }
   }, {
     key: "shouldExecuteCyclesInParallel",
@@ -480,11 +489,16 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
     }
   }, {
     key: "incrementTargetStep",
-    value: function incrementTargetStep(key) {
-      if (this.targetValues[key]) {
-        this.targetValues[key].step++;
+    value: function incrementTargetStep(key, now, lastUpdate, interval, steps) {
+      var targetValue = this.targetValues[key];
+      if (!targetValue) {
+        return;
       }
-      return this.targetValues[key].step;
+      var stepInterval = interval || 8;
+      var elapsed = now - lastUpdate;
+      var stepIncrement = Math.max(1, Math.floor(elapsed / stepInterval));
+      targetValue.step = Math.min(steps, targetValue.step + stepIncrement);
+      return targetValue.step;
     }
   }, {
     key: "getTargetCycles",
@@ -544,11 +558,6 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
       var targetValue = this.targetValues[key];
       return (targetValue === null || targetValue === void 0 ? void 0 : targetValue.interval) || 0;
     }
-  }, {
-    key: "getTargetEventFunctions",
-    value: function getTargetEventFunctions(key) {
-      return this.targetValues[key] ? this.targetValues[key].events : undefined;
-    }
   }, {
     key: "setTarget",
     value: function setTarget(key, value, steps, interval, easing) {
@@ -773,6 +782,26 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
     value: function getCoreTargets() {
       return _TUtil.TUtil.isDefined(this.val('coreTargets')) ? this.val('coreTargets') : this.coreTargets;
     }
+  }, {
+    key: "getExternalEventList",
+    value: function getExternalEventList() {
+      return this.externalEventList;
+    }
+  }, {
+    key: "getInternalEventList",
+    value: function getInternalEventList() {
+      return this.internalEventList;
+    }
+  }, {
+    key: "hasExternalEvents",
+    value: function hasExternalEvents() {
+      return this.getExternalEventList().length > 0;
+    }
+  }, {
+    key: "getExternalEventMap",
+    value: function getExternalEventMap() {
+      return this.externalEventMap;
+    }
   }, {
     key: "setTargetMethodName",
     value: function setTargetMethodName(targetName, methodName) {