targetj 1.0.169 → 1.0.170

package/Export.js

@@ -6,6 +6,7 @@ export * from "./build/TargetData.js";
 export * from "./build/TargetUtil.js";
 export * from "./build/TModelUtil.js";
 export * from "./build/TUtil.js";
+export * from "./build/DomInit.js"
 export * from "./build/$Dom.js";
 export * from "./build/Bracket.js";
 export * from "./build/BracketGenerator.js";
@@ -21,6 +22,7 @@ import * as TargetData from './build/TargetData.js';
 import * as TargetUtil from './build/TargetUtil.js';
 import * as TModelUtil from './build/TModelUtil.js';
 import * as TUtil from './build/TUtil.js';
+import * as DomInit from './build/DomInit.js';
 import * as Dom from './build/$Dom.js';
 import * as Bracket from './build/Bracket.js';
 import * as BracketGenerator from './build/BracketGenerator.js';
@@ -37,6 +39,7 @@ const TargetJS = {
   ...TargetUtil,
   ...TModelUtil,
   ...TUtil,
+  ...DomInit,
   ...Dom,
   ...Bracket,
   ...BracketGenerator,

package/README.md

@@ -5,96 +5,39 @@
 [![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. It introduces a unique paradigm: leveraging literal objects or HTML elements and extending their capabilities with built-in lifecycles and functional pipelines. The framework provides a unified solution for key aspects like UI rendering, animations, API interactions, state management, and event handling. This integrated approach leads to more compact code and allows for a stronger focus on user experience. TargetJS also supports backend generation of its specific HTML elements. 
+TargetJS is a modern JavaScript UI framework that simplifies front-end development. It provides a unified solution for key aspects like UI rendering, animations, APIs, state management, and event handling. This integrated approach leads to more compact code and allows for a stronger focus on user experience.
 Furthermore, it 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:
 
-1.  **Complexity of Asynchronous Operations:**  Traditional JavaScript often involves complex handling of asynchronous operations (Promises, callbacks, `async/await`). TargetJS addresses this by providing a structured, synchronous, and predictable execution flow, allowing developers to avoid asynchronous operations altogether.
-2.  **Scattered State Management:** Many frameworks require separate libraries or complex patterns for state management. In TargetJS, state management is inherently handled through its core concept of Targets, eliminating the need for direct state management.
-3.  **Boilerplate and Verbosity:** TargetJS aims to reduce boilerplate code. The code is compact and follows a predictable execution flow. Method calls are not allowed, and loops and conditional statements are rarely needed.
-4.  **Rigid Static Layer of HTML:** Many frameworks use HTML as the primary medium for generating the user interface. TargetJS minimizes reliance on traditional HTML and CSS, allowing JavaScript to be the primary player, resulting in a better and more dynamic user experience.
-5.  **Disjointed Development Workflow:**  Developers often juggle multiple tools and concepts (UI libraries, animation libraries, state managers, event handlers). TargetJS provides a *unified* solution, simplifying the learning curve and development process.
-6.  **Difficult Animation Control:**  TargetJS makes animations first-class citizens. It also provides fine-grained control without requiring external libraries.
-7.  **Complicated execution flow:** Other frameworks are based on reactive model which often lead to unpredictable execution flow while TargetJS execution is based on the order targets are written.
+1.  **Scattered State Management:** Many frameworks require separate libraries or complex patterns for state management. In TargetJS, state management is inherently handled through its core concept of unifying both methods and variables eliminating the need for direct state management.
+2.  **Complexity of Asynchronous Operations:**  Traditional JavaScript often involves complex handling of asynchronous operations (Promises, callbacks, `async/await`). TargetJS addresses this by providing a structured synchronous execution avoiding asynchronous operations altogether.
+3.  **Disjointed Development Workflow:**  Developers often juggle multiple tools and concepts (UI libraries, animation libraries, state managers, event handlers). TargetJS provides a unified solution simplifying the learning curve and development process.
+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, either by running directly or through a handful of HTML elements extended with superpowers.  
+5.  **Boilerplate and Verbosity:** TargetJS aims to reduce boilerplate code. The code is compact and follows a predictable execution flow. Direct method calls are not allowed, and loops and conditional statements are rarely needed.
+6.  **Difficult Animation Control:**  TargetJS makes animations first-class citizens with fine-grained control.
+7.  **Complicated execution flow:** Other frameworks are based on reactive model which often lead to unpredictable execution flow while TargetJS execution flow follows the order the code is written.
 8.  **Performance Bottlenecks with Large Lists:** TargetJS optimizes rendering for large lists by using a tree structure that renders only the visible branches.
 
-## Table of Contents
-
-1. [Installation](#installation)
-2. [Key Features and Concepts](#key-features-and-concepts)
-5. Examples:
-   - [Quick Example: Growing and Shrinking Box](#quick-example-growing-and-shrinking-box)   
-   - [Simple Loading API Example](#simple-loading-api-example)
-   - [Loading Two Users Example](#loading-two-users-example)
-6. [Comparison with Other UI Frameworks](#comparison-with-other-ui-frameworks)
-7. [The Core of TargetJS](#the-core-of-targetjs)
-8. [Anatomy of a Target](#anatomy-of-a-target)
-9. [Target Methods](#target-methods)
-10. [Target Variables](#target-variables)
-11. More Examples:
-    - [Basic Example](#basic-example)
-    - [Declarative and Imperative Targets Example](#declarative-and-imperative-targets-example)
-    - [Infinite Loading and Scrolling Example](#infinite-loading-and-scrolling-example)
-    - [Simple SPA Example](#simple-spa-example)
-    - [Using TargetJS as a Library Example](#using-targetjs-as-a-library-example) 
-12. [Special Target Names](#special-target-names)
-13. [How to Debug in TargetJS](#how-to-debug-in-targetjs)
-14. [Documentation](#documentation)
-15. [License](#license)
-16. [Contact](#contact)
-17. [Call to Action](#call-to-action)
-
-## **📦 Installation**
-
-Install TargetJS via npm (note that there is no 's' at the end):
-
-```bash
-npm install targetj
-```
-
-## Key Features and Concepts
-
-*   **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.
-    *   Control execution timing (useful for UI operations and advanced animations).
-    *   Form synchronous execution pipelines (similar to assembling Lego).
-    *   Track the execution progress of other targets.
-    *   Declarative execution (execution follows the way the code is written).
-    *   Compact code (No unnecessary function calls, minimal if statements and loops).
-    *   Manage their own state.
-
-*   **Unified Approach:**  Targets handle UI updates, API calls, animations, state, and events, reducing the need to learn and integrate multiple libraries.
-
-*  **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 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.
-
 ## Examples
-
 ### Quick Example: Growing and Shrinking Box
 
 💡 What's happening here?
 - Targets run initially in the order they appear in the code, so `background` runs first, followed by `width`. The `_` prefix indicates that a target is inactive by default, meaning `height` does not run initially.
 - `background` sets the background to purple, and its lifecycle ends.
 - `width` animates from 100 → 250 → 100px, in 50 steps with 10ms pauses.
-- `height` follows `width` and scales dynamically with its value. The `$` postfix means it is activated each time the preceding target executes. `prevTargetValue` refers to the previous target's value, which in this case is `width`.
+- `height` follows `width` and scales dynamically with its value. The `$` postfix creates a reactive pipeline where the target is triggered each time the preceding target runs. `prevTargetValue` refers to the previous target's value, which in this case is `width`.
 
 ![first example](https://targetjs.io/img/quick1_3.gif)
 
-```bash
+```javascript
 import { App } from "targetj";
 
 App({
     background: "mediumpurple",
-    width: [{ list: [100, 250, 100] }, 50, 10], // Target values, steps, interval
-    _height$() { // activated when width executes
+    width: [{ list: [100, 250, 100] }, 50, 10], //  width animates through 100 → 250 → 100, over 50 steps, 10ms interval
+    _height$() { // `$` creates a reactive pipeline: the `height` updates each time `width` executes
       return this.prevTargetValue / 2;
     } 
 });
@@ -119,7 +62,7 @@ In this example, we load one user and display its name.
 
 ![first example](https://targetjs.io/img/quick2_4.gif)
 
-```bash
+```javascript
 import { App } from "targetj";
 
 App({
@@ -145,11 +88,11 @@ In this example, we load two separate users and display two purple boxes, each c
 
 - `fetch` calls two APIs to retrieve details for two users.
 - `children` is a special target that adds new items to the parent each time it executes. Since the target name is prefixed with _, it is inactive by default. Because it ends with $, it executes every time an API call returns a result.
-TargetJS ensures that API results are processed in the same sequence as the API calls. For example, if the user1 API result arrives before user0, `children` will not execute until the result for user0 has been received.
+- TargetJS ensures that API results are processed in the same sequence as the API calls. For example, if the user1 API result arrives before user0, `children` will not execute until the result for user0 has been received.
   
 ![first example](https://targetjs.io/img/quick3_1.gif)
 
-```bash
+```javascript
 import { App, fetch } from "targetj";
 
 App({
@@ -178,6 +121,85 @@ Or in HTML:
     </div>
 ``` 
 
+## Table of Contents
+
+1. [Installation](#installation)
+2. [Key Features and Concepts](#key-features-and-concepts)
+6. [Comparison with Other UI Frameworks](#comparison-with-other-ui-frameworks)
+7. [The Core of TargetJS](#the-core-of-targetjs)
+8. [Anatomy of a Target](#anatomy-of-a-target)
+9. [Target Methods](#target-methods)
+10. [Target Variables](#target-variables)
+11. More Examples:
+    - [Basic Example](#basic-example)
+    - [Declarative and Imperative Targets Example](#declarative-and-imperative-targets-example)
+    - [Infinite Loading and Scrolling Example](#infinite-loading-and-scrolling-example)
+    - [Simple SPA Example](#simple-spa-example)
+    - [Using TargetJS as a Library Example](#using-targetjs-as-a-library-example) 
+12. [Special Target Names](#special-target-names)
+13. [How to Debug in TargetJS](#how-to-debug-in-targetjs)
+14. [Documentation](#documentation)
+15. [License](#license)
+16. [Contact](#contact)
+17. [Call to Action](#call-to-action)
+
+## **📦 Installation**
+
+**Via CDN**
+
+Add the following `<script>` tag to your HTML to load TargetJS from a CDN (only 44KB compressed):
+
+```html
+<script src="https://ltstaticfiles.s3.us-east-1.amazonaws.com/targetjs.js"></script>
+```
+
+This will add `TargetJS` to the global `window` object, making it accessible throughout your JavaScript such as `TargetJS.App(YourApp)`.
+You can also use it directly in your HTML with custom attributes:
+
+```html
+<div
+   tg-background="red"
+   tg-width="[100, 50, 10]"
+   tg-height="[100, 50, 10]">
+</div>
+```
+
+**Via package manager**
+
+Install TargetJS via npm (note: there's no "s" at the end):
+
+```bash
+npm install targetj
+```
+
+Then import it into your JavaScript code:
+
+```javascript
+import { App } from "targetj";
+```
+
+## Key Features and Concepts
+
+*   **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.
+    *   Control execution timing (useful for UI operations and advanced animations).
+    *   Form synchronous execution pipelines (similar to assembling Lego).
+    *   Track the execution progress of other targets.
+    *   Declarative execution (execution follows the way the code is written).
+    *   Compact code (No unnecessary function calls, minimal if statements and loops).
+    *   Manage their own state.
+
+*   **Unified Approach:**  Targets handle UI updates, API calls, animations, state, and events, reducing the need to learn and integrate multiple libraries.
+
+*  **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 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.
+
 ## Comparison with Other UI Frameworks  
 
 | Feature                               | TargetJS                                                              | Reactive Model Frameworks                                         |
@@ -202,13 +224,11 @@ Or in HTML:
 
 TargetJS utilizes literal JavaScript objects or HTML elements 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).
-
+- Properties and methods are unified via an internal wrapper called "targets."
+- Execute targets sequentially and predictably in the order they are written leveraging ES2015's guaranteed property order.
+- Enable reactive pipelines between adjacent targets.
+- Add lifecycles to targets enabling them to behave like living, responsive cells.
+  
 ## Anatomy of a Target
 
 Each target consists of the following:
@@ -312,7 +332,7 @@ You can view a live example here: https://targetjs.io/examples/overview.html.
 
 **Object**
 
-```bash
+```javascript
 import { App } from "targetj";
 
 App({
@@ -336,7 +356,7 @@ App({
 ```
 **Array**
 
-```bash
+```javascript
 import { App } from "targetj";
 
 App({
@@ -348,7 +368,7 @@ App({
 ```
 **Imperative** (more in the next example)
 
-```bash
+```javascript
 import { App } from "targetj";
 
 App({
@@ -362,7 +382,7 @@ App({
 ```
 **Imperative Multi-Targets**
 
-```bash
+```javascript
 import { App } from "targetj";
 
 App({
@@ -404,7 +424,7 @@ introducing a 1-second pause. After that, `repeat` is executed, reactivating the
 
 ![declarative example](https://targetjs.io/img/declarative3.gif)
 
-```bash
+```javascript
 import { App, getScreenWidth, getScreenHeight } from "targetj";
 
 App({
@@ -485,7 +505,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
+```javascript
 import { App, getEvents, fetch, getScreenWidth, getScreenHeight } from "targetj";
 
 App({
@@ -581,7 +601,7 @@ You can now assemble your app by incorporating code segments from the examples o
 
 ![Single page app](https://targetjs.io/img/singlePage2.gif)
 
-```bash
+```javascript
 import { App, getScreenHeight, getScreenWidth, getEvents, getPager } from "targetj";
 
 App({
@@ -756,7 +776,7 @@ The `rectTop`, `absY`, and `onWindowScroll` targets are used to track the visibl
 
 ![animation api example](https://targetjs.io/img/targetjsAsLibrary.gif) 
 
-```bash
+```javascript
 import { App, $Dom } from "targetj";
 
 App({

package/build/App.js

@@ -17,6 +17,7 @@ var _RunScheduler = require("./RunScheduler.js");
 var _TargetManager = require("./TargetManager.js");
 var _TargetExecutor = require("./TargetExecutor.js");
 var _TUtil = require("./TUtil.js");
+var _DomInit = require("./DomInit.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; }
 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); }
@@ -50,27 +51,27 @@ var AppFn = function AppFn() {
         styling: false,
         domHolder: true,
         isVisible: true,
-        width: function width() {
+        screenWidth: function screenWidth() {
           var width = _$Dom.$Dom.getScreenWidth();
-          if (width !== tmodel.val('width')) {
+          if (width !== tmodel.val('screenWidth')) {
             my.resizeLastUpdate = _TUtil.TUtil.now();
           }
           return width;
         },
-        height: function height() {
+        screenHeight: function screenHeight() {
           var height = _$Dom.$Dom.getScreenHeight();
-          if (height !== tmodel.val('height')) {
+          if (height !== tmodel.val('screenHeight')) {
             my.resizeLastUpdate = _TUtil.TUtil.now();
           }
           return height;
         },
         initPageDom: function initPageDom() {
-          _TUtil.TUtil.initPageDoms(this.$dom);
+          _DomInit.DomInit.initPageDoms(this.$dom);
         }
       });
       tmodel.$dom = _$Dom.$Dom.query('#tgjs-root') ? new _$Dom.$Dom('#tgjs-root') : new _$Dom.$Dom('body');
-      tmodel.val('width', _$Dom.$Dom.getScreenWidth());
-      tmodel.val('height', _$Dom.$Dom.getScreenHeight());
+      tmodel.val('screenWidth', _$Dom.$Dom.getScreenWidth());
+      tmodel.val('screenHeight', _$Dom.$Dom.getScreenHeight());
       if (my.tRoot) {
         my.tRoot.getChildren().forEach(function (t) {
           if (t.val('sourceDom')) {
@@ -93,8 +94,8 @@ var AppFn = function AppFn() {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           my.runningFlag = false;
-          _TargetExecutor.TargetExecutor.executeDeclarativeTarget(my.tRoot, 'width');
-          _TargetExecutor.TargetExecutor.executeDeclarativeTarget(my.tRoot, 'height');
+          _TargetExecutor.TargetExecutor.executeDeclarativeTarget(my.tRoot, 'screenWidth');
+          _TargetExecutor.TargetExecutor.executeDeclarativeTarget(my.tRoot, 'screenHeight');
           my.events.detachAll();
           my.events.detachWindowEvents();
           my.events.attachWindowEvents();
@@ -220,12 +221,12 @@ var getBrowser = exports.getBrowser = function getBrowser() {
   return (_tApp10 = tApp) === null || _tApp10 === void 0 ? void 0 : _tApp10.browser;
 };
 var getScreenWidth = exports.getScreenWidth = function getScreenWidth() {
-  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 _tApp$tRoot$val, _tApp11;
+  return (_tApp$tRoot$val = (_tApp11 = tApp) === null || _tApp11 === void 0 || (_tApp11 = _tApp11.tRoot) === null || _tApp11 === void 0 ? void 0 : _tApp11.val('screenWidth')) !== null && _tApp$tRoot$val !== void 0 ? _tApp$tRoot$val : 0;
 };
 var getScreenHeight = exports.getScreenHeight = function getScreenHeight() {
-  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 _tApp$tRoot$val2, _tApp12;
+  return (_tApp$tRoot$val2 = (_tApp12 = tApp) === null || _tApp12 === void 0 || (_tApp12 = _tApp12.tRoot) === null || _tApp12 === void 0 ? void 0 : _tApp12.val('screenHeight')) !== null && _tApp$tRoot$val2 !== void 0 ? _tApp$tRoot$val2 : 0;
 };
 var getVisibles = exports.getVisibles = function getVisibles() {
   var _tApp13;

package/build/DomInit.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DomInit = void 0;
+var _$Dom = require("./$Dom.js");
+var _TUtil = require("./TUtil.js");
+var _App = require("./App.js");
+var _TargetData = require("./TargetData.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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+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; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 
+ * Map and bind dom elements to model structures
+ */
+var DomInit = exports.DomInit = /*#__PURE__*/function () {
+  function DomInit() {
+    _classCallCheck(this, DomInit);
+  }
+  return _createClass(DomInit, null, [{
+    key: "initCacheDoms",
+    value: function initCacheDoms(visibleList) {
+      var elements = (0, _App.tRoot)().$dom.queryAll('[tg]');
+      visibleList.forEach(function (tmodel) {
+        tmodel.$dom = null;
+      });
+      var visibleMap = _TUtil.TUtil.list2map(visibleList.filter(function (item) {
+        return item.type !== 'BI';
+      }));
+      var _iterator = _createForOfIteratorHelper(elements),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var element = _step.value;
+          var id = element.getAttribute("id");
+          var tmodel = visibleMap[id];
+          if (tmodel) {
+            tmodel.$dom = new _$Dom.$Dom("#".concat(id));
+          } else {
+            _$Dom.$Dom.detach(element);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }, {
+    key: "initPageDoms",
+    value: function initPageDoms($dom) {
+      var elementToModel = new Map();
+      var elements = $dom.queryAll('*');
+      var _iterator2 = _createForOfIteratorHelper(elements),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var element = _step2.value;
+          var newModel = void 0;
+          var attrs = Array.from(element.attributes);
+          var isTargetElement = attrs.some(function (attr) {
+            return attr.name === 'tg' || attr.name.startsWith('tg-');
+          });
+          var attributeSet = {};
+          if (isTargetElement) {
+            var _iterator4 = _createForOfIteratorHelper(attrs),
+              _step4;
+            try {
+              for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+                var attr = _step4.value;
+                if (attr.name.startsWith("tg-")) {
+                  var rawKey = attr.name.slice(3);
+                  var key = _TargetData.TargetData.attributesToTargets[rawKey] || rawKey;
+                  var rawValue = attr.value.trim();
+                  var value = DomInit.parseString(rawValue);
+                  attributeSet[key] = value;
+                }
+              }
+            } catch (err) {
+              _iterator4.e(err);
+            } finally {
+              _iterator4.f();
+            }
+          }
+          var parentEl = element.parentElement;
+          var parentModel = elementToModel.get(parentEl);
+          var id = void 0;
+          if (Object.keys(attributeSet).length > 0) {
+            id = element.getAttribute('id');
+            if (!id && !parentModel) {
+              id = _App.App.getOid('blank').oid;
+              element.setAttribute('id', id);
+            }
+            if (!element.getAttribute('tg')) {
+              element.setAttribute('tg', true);
+            }
+            newModel = _objectSpread({
+              id: id,
+              $dom: new _$Dom.$Dom(element)
+            }, attributeSet);
+          }
+          if (parentModel) {
+            if (!newModel) {
+              newModel = {
+                textOnly: false,
+                html: element.outerHTML,
+                $dom: new _$Dom.$Dom(element)
+              };
+            }
+            var childrenKey = DomInit.getChildrenKey(parentModel);
+            if (childrenKey) {
+              if (Array.isArray(parentModel[childrenKey].value)) {
+                parentModel[childrenKey].value.push(newModel);
+              } else if (typeof parentModel[childrenKey] === 'string') {
+                parentModel[childrenKey] = {
+                  cycles: _TUtil.TUtil.isNumber(+parentModel[childrenKey]) ? +parentModel[childrenKey] : 0,
+                  value: [newModel]
+                };
+              } else if (_typeof(parentModel[childrenKey]) === 'object') {
+                parentModel[childrenKey].value = [newModel];
+              }
+            } else {
+              parentModel._children$ = {
+                cycles: 0,
+                value: [newModel]
+              };
+            }
+            elementToModel.set(element, newModel);
+          } else if (newModel) {
+            elementToModel.set(element, newModel);
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      var _iterator3 = _createForOfIteratorHelper(elementToModel.values()),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _value = _step3.value;
+          var _parentEl = _value.$dom.element.parentElement;
+          var _parentModel = elementToModel.get(_parentEl);
+          if (_parentModel) {
+            _value.$dom.detach();
+            delete _value.$dom;
+            delete _value.id;
+            _value.shouldBeBracketed = false;
+            _value.otype = _value.id || (_parentModel.id || _App.App.getOid('blank').oid) + "_";
+            _value.isVisible = !_TUtil.TUtil.isDefined(_value.isVisible) ? function () {
+              return this.getParent().isVisible();
+            } : _value.isVisible;
+            _value.domParent = !_TUtil.TUtil.isDefined(_value.domParent) ? function () {
+              return this.getParent();
+            } : _value.domParent;
+          } else {
+            _value.isVisible = !_TUtil.TUtil.isDefined(_value.isVisible) ? true : _value.isVisible;
+            _value.sourceDom = true;
+            (0, _App.tRoot)().addChild(_value);
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
+  }, {
+    key: "getChildrenKey",
+    value: function getChildrenKey(obj) {
+      for (var _i = 0, _Object$keys = Object.keys(obj); _i < _Object$keys.length; _i++) {
+        var key = _Object$keys[_i];
+        if (key.toLowerCase().includes("children")) {
+          return key;
+        }
+      }
+      return null;
+    }
+  }, {
+    key: "parseString",
+    value: function parseString(rawValue) {
+      if (typeof rawValue !== 'string') {
+        return rawValue;
+      }
+      var trimmed = rawValue.trim();
+      var isFunction = /^function\s*\([\s\S]*?\)\s*\{[\s\S]*\}$/m.test(trimmed) || /^\(?[\w\s,]*\)?\s*=>\s*(\{[\s\S]*\}|\S+)/m.test(trimmed);
+      var isObject = /^(\{[\s\S]*\}|\[[\s\S]*\])$/.test(trimmed);
+      if (!isObject && !isFunction && (trimmed.includes('return') || trimmed.includes('setTarget') || trimmed.includes('TargetJS.')) || trimmed.includes('addChild')) {
+        try {
+          return new Function(trimmed);
+        } catch (_unused) {}
+      }
+      if (isObject || isFunction) {
+        try {
+          return eval("(".concat(trimmed, ")"));
+        } catch (_unused2) {}
+      }
+      try {
+        return JSON.parse(trimmed);
+      } catch (_unused3) {}
+      return rawValue;
+    }
+  }]);
+}();

package/build/EventListener.js

@@ -452,8 +452,8 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
   }, {
     key: "resizeRoot",
     value: function resizeRoot() {
-      _TargetExecutor.TargetExecutor.executeDeclarativeTarget((0, _App.tRoot)(), 'width');
-      _TargetExecutor.TargetExecutor.executeDeclarativeTarget((0, _App.tRoot)(), 'height');
+      _TargetExecutor.TargetExecutor.executeDeclarativeTarget((0, _App.tRoot)(), 'screenWidth');
+      _TargetExecutor.TargetExecutor.executeDeclarativeTarget((0, _App.tRoot)(), 'screenHeight');
     }
   }, {
     key: "preventDefault",

package/build/LocationManager.js

@@ -138,9 +138,7 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
           }
           _this3.locationListStats.push(child.oid);
           viewport.setCurrentChild(child);
-          if (!child.targets['excludeXYCalc']) {
-            viewport.setLocation();
-          }
+          viewport.setLocation();
           if (child.isIncluded() && container.manageChildTargetExecution(child, shouldCalculateChildTargets)) {
             _this3.calculateTargets(child);
           }
@@ -191,11 +189,11 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
           if (child.shouldCalculateChildren()) {
             _this3.calculateContainer(child, shouldCalculateChildTargets && container.shouldCalculateChildTargets() !== false);
           }
-          if (!child.isTargetImperative('height') && !_TUtil.TUtil.isDefined(child.targets.height) && !_TUtil.TUtil.isDefined(child.targets.heightFromDom) && child.getContentHeight() > 0) {
+          if (!child.isTargetImperative('height') && !_TModelUtil.TModelUtil.isHeightDefined(child) && !_TUtil.TUtil.isDefined(child.targets.heightFromDom) && child.getContentHeight() > 0) {
             child.val('height', child.getContentHeight());
             child.addToStyleTargetList('height');
           }
-          if (!child.isTargetImperative('width') && !_TUtil.TUtil.isDefined(child.targets.width) && !_TUtil.TUtil.isDefined(child.targets.widthFromDom) && child.getContentWidth() > 0) {
+          if (!child.isTargetImperative('width') && !_TModelUtil.TModelUtil.isWidthDefined(child) && !_TUtil.TUtil.isDefined(child.targets.widthFromDom) && child.getContentWidth() > 0) {
             child.val('width', child.getContentWidth());
             child.addToStyleTargetList('width');
           }
@@ -241,14 +239,18 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
       this.checkInternalEvents(tmodel);
       _App.tApp.targetManager.applyTargetValues(tmodel);
       _App.tApp.targetManager.setActualValues(tmodel);
-      if (tmodel.hasDom()) {
-        if (_TModelUtil.TModelUtil.shouldMeasureWidthFromDom(tmodel)) {
+      if (_TModelUtil.TModelUtil.shouldMeasureWidthFromDom(tmodel)) {
+        if (tmodel.hasDom()) {
           _TModelUtil.TModelUtil.setWidthFromDom(tmodel);
+        } else {
+          tmodel.addToActiveTargets('width');
         }
       }
-      if (tmodel.hasDom()) {
-        if (_TModelUtil.TModelUtil.shouldMeasureHeightFromDom(tmodel)) {
+      if (_TModelUtil.TModelUtil.shouldMeasureHeightFromDom(tmodel)) {
+        if (tmodel.hasDom()) {
           _TModelUtil.TModelUtil.setHeightFromDom(tmodel);
+        } else {
+          tmodel.addToActiveTargets('height');
         }
       }
       tmodel.isNowVisible = false;

package/build/PageManager.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PageManager = void 0;
 var _TUtil = require("./TUtil.js");
 var _App = require("./App.js");
+var _DomInit = require("./DomInit.js");
 var _$Dom = require("./$Dom.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; }
@@ -40,7 +41,7 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
     value: function initPage(html) {
       _App.tApp.tRoot.$dom.outerHTML(html);
       _App.tApp.tRoot.$dom = _$Dom.$Dom.query('#tgjs-root') ? new _$Dom.$Dom('#tgjs-root') : new _$Dom.$Dom('body');
-      _TUtil.TUtil.initPageDoms(_App.tApp.tRoot.$dom);
+      _DomInit.DomInit.initPageDoms(_App.tApp.tRoot.$dom);
     }
   }, {
     key: "openPage",
@@ -66,7 +67,7 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
                 _App.App.oids = this.pageCache[link].oids;
                 _App.tApp.tRoot.$dom = _$Dom.$Dom.query('#tgjs-root') ? new _$Dom.$Dom('#tgjs-root') : new _$Dom.$Dom('body');
                 _App.tApp.tRoot.$dom.innerHTML(this.pageCache[link].html);
-                _TUtil.TUtil.initCacheDoms(this.pageCache[link].visibleList);
+                _DomInit.DomInit.initCacheDoms(this.pageCache[link].visibleList);
                 this.pageCache[link].visibleList.forEach(function (tmodel) {
                   tmodel.visibilityStatus = undefined;
                 });

package/build/TModelUtil.js

@@ -57,12 +57,24 @@ var TModelUtil = exports.TModelUtil = /*#__PURE__*/function () {
   }, {
     key: "shouldMeasureHeightFromDom",
     value: function shouldMeasureHeightFromDom(tmodel) {
-      return !tmodel.excludeDefaultStyling() && !_TUtil.TUtil.isDefined(tmodel.targetValues.height) && !_TUtil.TUtil.isDefined(tmodel.targets.height) && !tmodel.hasChildren() || !!tmodel.getTargetValue('heightFromDom');
+      return !tmodel.excludeDefaultStyling() && !_TUtil.TUtil.isDefined(tmodel.targetValues.height) && !TModelUtil.isHeightDefined(tmodel) && !tmodel.hasChildren() || !!tmodel.getTargetValue('heightFromDom');
     }
   }, {
     key: "shouldMeasureWidthFromDom",
     value: function shouldMeasureWidthFromDom(tmodel) {
-      return !tmodel.excludeDefaultStyling() && !tmodel.reuseDomDefinition() && !_TUtil.TUtil.isDefined(tmodel.targetValues.width) && !_TUtil.TUtil.isDefined(tmodel.targets.width) && !tmodel.hasChildren() || !!tmodel.getTargetValue('widthFromDom');
+      return !tmodel.excludeDefaultStyling() && !tmodel.reuseDomDefinition() && !_TUtil.TUtil.isDefined(tmodel.targetValues.width) && !TModelUtil.isWidthDefined(tmodel) && !tmodel.hasChildren() || !!tmodel.getTargetValue('widthFromDom');
+    }
+  }, {
+    key: "isHeightDefined",
+    value: function isHeightDefined(tmodel) {
+      var _tmodel$targets$style;
+      return _TUtil.TUtil.isDefined(tmodel.targets.height) || _TUtil.TUtil.isDefined((_tmodel$targets$style = tmodel.targets.style) === null || _tmodel$targets$style === void 0 ? void 0 : _tmodel$targets$style.height);
+    }
+  }, {
+    key: "isWidthDefined",
+    value: function isWidthDefined(tmodel) {
+      var _tmodel$targets$style2;
+      return _TUtil.TUtil.isDefined(tmodel.targets.width) || _TUtil.TUtil.isDefined((_tmodel$targets$style2 = tmodel.targets.style) === null || _tmodel$targets$style2 === void 0 ? void 0 : _tmodel$targets$style2.width);
     }
   }, {
     key: "createDom",
@@ -211,7 +223,13 @@ var TModelUtil = exports.TModelUtil = /*#__PURE__*/function () {
         if (key === 'style') {
           var style = tmodel.getStyle();
           if (_TUtil.TUtil.isDefined(style) && tmodel.styleMap.style !== style) {
-            tmodel.$dom.setStyleByMap(tmodel.getStyle());
+            tmodel.$dom.setStyleByMap(style);
+            if (style.height) {
+              tmodel.val('height', parseInt(style.height, 10));
+            }
+            if (style.width) {
+              tmodel.val('width', parseInt(style.width, 10));
+            }
             tmodel.styleMap.style = style;
           }
         } else if (key === 'attributes') {

package/build/TUtil.js

@@ -4,19 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TUtil = void 0;
-var _$Dom = require("./$Dom.js");
 var _App = require("./App.js");
-var _TargetData = require("./TargetData.js");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+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 _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; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-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; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
@@ -62,190 +57,6 @@ var TUtil = exports.TUtil = /*#__PURE__*/function () {
       child.val('isVisible', status.left && status.right && status.top && status.bottom);
       return child.val('isVisible');
     }
-  }, {
-    key: "initCacheDoms",
-    value: function initCacheDoms(visibleList) {
-      var elements = (0, _App.tRoot)().$dom.queryAll('[tg]');
-      visibleList.forEach(function (tmodel) {
-        tmodel.$dom = null;
-      });
-      var visibleMap = TUtil.list2map(visibleList.filter(function (item) {
-        return item.type !== 'BI';
-      }));
-      var _iterator = _createForOfIteratorHelper(elements),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var element = _step.value;
-          var id = element.getAttribute("id");
-          var tmodel = visibleMap[id];
-          if (tmodel) {
-            tmodel.$dom = new _$Dom.$Dom("#".concat(id));
-          } else {
-            _$Dom.$Dom.detach(element);
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-    }
-  }, {
-    key: "initPageDoms",
-    value: function initPageDoms($dom) {
-      var elementToModel = new Map();
-      var elements = $dom.queryAll('*');
-      var _iterator2 = _createForOfIteratorHelper(elements),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var element = _step2.value;
-          var newModel = void 0;
-          var attrs = Array.from(element.attributes);
-          var isTargetElement = attrs.some(function (attr) {
-            return attr.name === 'tg' || attr.name.startsWith('tg-');
-          });
-          var attributeSet = {};
-          if (isTargetElement) {
-            var _iterator4 = _createForOfIteratorHelper(attrs),
-              _step4;
-            try {
-              for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-                var attr = _step4.value;
-                if (attr.name.startsWith("tg-")) {
-                  var rawKey = attr.name.slice(3);
-                  var key = _TargetData.TargetData.attributesToTargets[rawKey] || rawKey;
-                  var rawValue = attr.value.trim();
-                  var value = TUtil.parseString(rawValue);
-                  attributeSet[key] = value;
-                }
-              }
-            } catch (err) {
-              _iterator4.e(err);
-            } finally {
-              _iterator4.f();
-            }
-          }
-          var parentEl = element.parentElement;
-          var parentModel = elementToModel.get(parentEl);
-          var id = void 0;
-          if (Object.keys(attributeSet).length > 0) {
-            id = element.getAttribute('id');
-            if (!id && !parentModel) {
-              id = _App.App.getOid('blank').oid;
-              element.setAttribute('id', id);
-            }
-            if (!element.getAttribute('tg')) {
-              element.setAttribute('tg', true);
-            }
-            newModel = _objectSpread({
-              id: id,
-              $dom: new _$Dom.$Dom(element)
-            }, attributeSet);
-          }
-          if (parentModel) {
-            if (!newModel) {
-              newModel = {
-                textOnly: false,
-                html: element.outerHTML,
-                $dom: new _$Dom.$Dom(element)
-              };
-            }
-            var childrenKey = TUtil.getChildrenKey(parentModel);
-            if (childrenKey) {
-              if (Array.isArray(parentModel[childrenKey].value)) {
-                parentModel[childrenKey].value.push(newModel);
-              } else if (typeof parentModel[childrenKey] === 'string') {
-                parentModel[childrenKey] = {
-                  cycles: TUtil.isNumber(+parentModel[childrenKey]) ? +parentModel[childrenKey] : 0,
-                  value: [newModel]
-                };
-              } else if (_typeof(parentModel[childrenKey]) === 'object') {
-                parentModel[childrenKey].value = [newModel];
-              }
-            } else {
-              parentModel._children$ = {
-                cycles: 0,
-                value: [newModel]
-              };
-            }
-            elementToModel.set(element, newModel);
-          } else if (newModel) {
-            elementToModel.set(element, newModel);
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-      var _iterator3 = _createForOfIteratorHelper(elementToModel.values()),
-        _step3;
-      try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var _value = _step3.value;
-          var _parentEl = _value.$dom.element.parentElement;
-          var _parentModel = elementToModel.get(_parentEl);
-          if (_parentModel) {
-            _value.$dom.detach();
-            delete _value.$dom;
-            delete _value.id;
-            _value.shouldBeBracketed = false;
-            _value.otype = _value.id || (_parentModel.id || _App.App.getOid('blank').oid) + "_";
-            _value.isVisible = function () {
-              return this.getParent().isVisible();
-            };
-            _value.domParent = function () {
-              return this.getParent();
-            };
-          } else {
-            _value.isVisible = true;
-            _value.sourceDom = true;
-            (0, _App.tRoot)().addChild(_value);
-          }
-        }
-      } catch (err) {
-        _iterator3.e(err);
-      } finally {
-        _iterator3.f();
-      }
-    }
-  }, {
-    key: "getChildrenKey",
-    value: function getChildrenKey(obj) {
-      for (var _i = 0, _Object$keys = Object.keys(obj); _i < _Object$keys.length; _i++) {
-        var key = _Object$keys[_i];
-        if (key.toLowerCase().includes("children")) {
-          return key;
-        }
-      }
-      return null;
-    }
-  }, {
-    key: "parseString",
-    value: function parseString(rawValue) {
-      if (typeof rawValue !== 'string') {
-        return rawValue;
-      }
-      var trimmed = rawValue.trim();
-      var isFunction = /^function\s*\([\s\S]*?\)\s*\{[\s\S]*\}$/m.test(trimmed) || /^\(?[\w\s,]*\)?\s*=>\s*(\{[\s\S]*\}|\S+)/m.test(trimmed);
-      var isObject = /^(\{[\s\S]*\}|\[[\s\S]*\])$/.test(trimmed);
-      if (!isObject && !isFunction && (trimmed.includes('return') || trimmed.includes('setTarget') || trimmed.includes('TargetJS.'))) {
-        try {
-          return new Function(trimmed);
-        } catch (_unused) {}
-      }
-      if (isObject || isFunction) {
-        try {
-          return eval("(".concat(trimmed, ")"));
-        } catch (_unused2) {}
-      }
-      try {
-        return JSON.parse(trimmed);
-      } catch (_unused3) {}
-      return rawValue;
-    }
   }, {
     key: "contains",
     value: function contains(container, tmodel) {
@@ -382,11 +193,11 @@ var TUtil = exports.TUtil = /*#__PURE__*/function () {
       var tmodel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _App.tRoot)();
       var tab = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
       var list = (0, _App.getLocationManager)().getChildren(tmodel);
-      var _iterator5 = _createForOfIteratorHelper(list),
-        _step5;
+      var _iterator = _createForOfIteratorHelper(list),
+        _step;
       try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var g = _step5.value;
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var g = _step.value;
           var gtab = g.isVisible() ? tab + '|  ' : tab + 'x  ';
           if (g.type === 'BI') {
             console.log("".concat(gtab).concat(g.oid, " v:").concat(g.isVisible(), " x:").concat(Math.floor(g.getX()), " y:").concat(Math.floor(g.getY()), ", absY:").concat(Math.floor(g.absY), " yy:").concat(Math.floor(g.absY + g.getDomParent().absY), " w:").concat(Math.floor(g.getWidth()), " h:").concat(Math.floor(g.getHeight()), " hc:").concat(Math.floor(g.getContentHeight())));
@@ -398,9 +209,9 @@ var TUtil = exports.TUtil = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator5.e(err);
+        _iterator.e(err);
       } finally {
-        _iterator5.f();
+        _iterator.f();
       }
     }
   }]);

package/build/Viewport.js

@@ -40,8 +40,10 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
   }, {
     key: "setLocation",
     value: function setLocation() {
-      this.currentChild.x = this.xNext + this.currentChild.getLeftMargin();
-      this.currentChild.y = this.yNext + this.currentChild.getTopMargin();
+      if (!this.currentChild.targets['excludeXYCalc']) {
+        this.currentChild.x = this.xNext + this.currentChild.getLeftMargin();
+        this.currentChild.y = this.yNext + this.currentChild.getTopMargin();
+      }
     }
   }, {
     key: "isOverflow",

package/build/index.js

@@ -91,6 +91,17 @@ Object.keys(_TUtil).forEach(function (key) {
     }
   });
 });
+var _DomInit = require("./DomInit.js");
+Object.keys(_DomInit).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DomInit[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DomInit[key];
+    }
+  });
+});
 var _$Dom = require("./$Dom.js");
 Object.keys(_$Dom).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "targetj",
-  "version": "1.0.169",
+  "version": "1.0.170",
   "description": "TargetJS is a JavaScript framework designed for creating animated and efficient web user interfaces.",
   "keywords": ["targetjs"],
   "main": "Export.js",
@@ -19,7 +19,7 @@
     }
   ],
   "scripts": {
-    "prod": "webpack --mode production",
+    "prod": "webpack --mode production && gzip -kf ./dist/targetjs.js",
     "dev": "webpack --mode development",
     "build": "babel src --out-dir build"
   },

package/build/Dim.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dim = void 0;
-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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var Dim = exports.Dim = /*#__PURE__*/function () {
-  function Dim() {
-    _classCallCheck(this, Dim);
-    this.screen = {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    };
-  }
-  return _createClass(Dim, [{
-    key: "measureScreen",
-    value: function measureScreen() {
-      this.screen.width = document.documentElement.clientWidth || document.body.clientWidth;
-      this.screen.height = document.documentElement.clientHeight || document.body.clientHeight;
-      return this;
-    }
-  }]);
-}();

package/build/Text.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Text = void 0;
-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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var Text = exports.Text = /*#__PURE__*/function () {
-  function Text(strings) {
-    for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      values[_key - 1] = arguments[_key];
-    }
-    _classCallCheck(this, Text);
-    var processedLiterals = strings.map(function (str, i) {
-      return "".concat(str.trim()).concat(values[i] !== undefined ? values[i] : '');
-    });
-    this.template = strings.raw[0];
-    this.text = processedLiterals.join('');
-    this.textLiterals = strings.join('');
-    this.literals = strings;
-    this.values = values;
-  }
-  return _createClass(Text, [{
-    key: "populateElement",
-    value: function populateElement(element) {
-      var _this = this;
-      var valuePointer = 0;
-      element.childNodes.forEach(function (node) {
-        if (node.nodeType === Node.TEXT_NODE) {
-          node.innerText = _this.values[valuePointer++];
-        } else if (node.nodeType === Node.ELEMENT_NODE) {
-          Text.populateElement(node);
-        }
-      });
-    }
-  }], [{
-    key: "match",
-    value: function match(tmodel, domTemplate) {
-      if (tmodel.getBaseElement() === domTemplate.baseElement) {
-        if (domTemplate.text instanceof Text && tmodel.getRawHtml() instanceof Text) {
-          return domTemplate.text.textLiterals === tmodel.getRawHtml().textLiterals;
-        } else if (domTemplate.text instanceof String && tmodel.getRawHtml() instanceof String) {
-          return domTemplate.text === tmodel.getRawHtml();
-        }
-      }
-      return false;
-    }
-  }]);
-}();