targetj 1.0.231 → 1.0.233

package/README.md

@@ -1,11 +1,13 @@
-# TargetJS: State as Destination, UI as Sequence
+# TargetJS: State as Destination, Code Order as UI Sequence
 
 **[targetjs.io](https://targetjs.io)** 
 [![MIT LICENSE](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/livetrails/targetjs/blob/main/LICENSE) 
 [![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 high-performance JavaScript UI framework with ultra-compact syntax. It replaces the "State → Render" model with "State → transition → Render". It unifies UI, animations, APIs, event handling, and state into self-contained "Targets" that stack together like intelligent Lego pieces using Code-Ordered Reactivity.
+Most frameworks are great at rendering the next state. TargetJS is designed for the journey between states.
+
+TargetJS is a JavaScript UI framework that replaces the "State → Render" model with "State → transition → Render". It also lets code order directly define the UI sequence. It unifies UI, animations, API calls, event handling, and state into self-contained "Targets" that stack together like intelligent Lego pieces using Code-Ordered Reactivity.
 
 It can be used as a full-featured framework or as a lightweight library alongside other frameworks. It is also a highly performant web framework, as shown in the [framework benchmark](https://krausest.github.io/js-framework-benchmark/current.html).
 
@@ -36,6 +38,14 @@ TargetJS code order and target reactivity allow the implementation to more close
 
 With its compact style, TargetJS makes the journey from A → B explicit and efficient, with significantly less code than traditional frameworks.
 
+## 🚀 Why TargetJS?
+
+1. Unified State: State isn't "elsewhere". It is built into every Target.
+2. Animation by Default: High-performance animations are baked into the logic.
+3. Ultra-Compact: Write 30% to 70% less code than standard frameworks.
+4. UI as Sequence: Code describes the UI story from top to bottom, exactly how the user experiences the interaction: "When this finishes, do that."
+5. Zero Boilerplate Async: Targets can handle waiting for asynchronous operations automatically.
+
 ## ⚡ Quick Start (30 Seconds)
 
 **1. Install**
@@ -65,18 +75,21 @@ App({
 In TargetJS, targets are the fundamental unit of behavior instead of methods. 
 Methods and properties both are internally transformed into targets that the framework schedules and executes.
 
+### Mental Model
 
-### Execution Syntax
-
-Target names can include special symbols that determine **when they execute**.
-
-| Symbol | Name | Behavior |
-|------|------|------|
-| `name` | Standard | Runs immediately in the order it appears. |
-| `name$` | Reactive | Runs every time the previous sibling target runs. |
-| `name$$` | Deferred | Runs only after the entire preceding target chain (including children, animations, and API calls) completes. |
-| `_name` | Inactive | Does not run automatically. Trigger it manually via `.activateTarget()`. |
+A target can:
+- execute a method
+- hold a value
+- move toward that value over time
+- wait for previous targets
+- react when previous targets update
+- fetch data
+- react to an event
+- create children
+- run callbacks
+- control its own lifecycle
 
+This lets UI code follow the same order as the user experience.
 
 ### Target Controls
 
@@ -94,10 +107,24 @@ A target can also be defined as an object with optional controls that manage its
 | `easing` | Predefined easing function controlling how values update over steps. |
 | `onComplete` | Callback triggered when this target (and its children) finishes. |
 | `onValueChange` | Callback triggered when the target emits a new value. |
+| `onChange` | Callback triggered when the target emits a new value. |
+| `on<PropertyName>Step` | Callback triggered on every step of a specific property. |
+
+### Compact Execution Syntax
+
+Target names can include special symbols that define when they execute. This provides a compact alternative to implementing the same behavior with callbacks.
+
+| Symbol | Name | Behavior |
+|------|------|------|
+| `name` | Standard | Runs immediately in the order it appears. |
+| `name$` | Reactive | Runs every time the previous sibling target updates. Equivalent to using `on<PropertyName>Step()` or `onValueChange()` to activate the next target . |
+| `name$$` | Deferred | Runs only after the entire preceding target chain, including children, animations, and API calls, completes. Equivalent to using `onComplete()` to activate the next target. |
+| `_name` | Inactive | Does not run automatically. Trigger it manually with `.activateTarget()`. Equivalent to `{ active: false }`. |
+
 
 ## Examples: Like Button → Animated Like (in 3 Steps)
 
-Let’s see how TargetJS handles a complex interaction that would usually require 50+ lines of React/CSS. The example demonstrates how to run four asynchronous operations in a strict sequential sequence. In other words, each step has to wait for all the previous ones to complete.
+Let’s see how TargetJS handles a complex interaction that would usually require 50+ lines of React/CSS. The example demonstrates how to run four asynchronous operations in a strict sequence. In other words, each step has to wait for all the previous ones to complete.
 
 ### 1) Like button
 
@@ -203,9 +230,8 @@ Each target has its own state and lifecycle. Targets execute automatically in th
 
 1. [📦 Alternative Installation Via CDN](#-alternative-installation-via-cdn)
 1. [Using TargetJS as a Library](#using-targetjs-as-a-library)
-1. [🚀 Why TargetJS?](#-why-targetjs)
 1. Deeper Examples:
-    - [Loading Five Users Example](#loading-five-users-example)
+    - [Search → Fetch → Replace → Highlight Example](#search--fetch--replace--highlight)
     - [Infinite Loading and Scrolling Example](#infinite-loading-and-scrolling-example)
 1. [Special Target Names](#special-target-names)
 1. [How to Debug in TargetJS](#how-to-debug-in-targetjs)
@@ -283,90 +309,86 @@ export default function TargetIsland() {
 }
 ```
 
-## 🚀 Why TargetJS?
-
-1. Zero Boilerplate Async: The $$ postfix handles the "wait" for you.
-2. Unified State: State isn't "elsewhere". It's built into every Target.
-3. Animation by Default: High-performance animations are baked into the logic.
-4. Ultra-Compact: Write 70% less code than standard frameworks.
-5. Lower Cognitive Load: Code reads from top to bottom, exactly how the user experiences the interaction.
-
 ## Deeper Examples
 
-### Loading Five Users Example
+### Search → Fetch → Replace → Highlight
 
-In this example, we load five separate users and display five boxes, each containing a user's name and email.
+This example shows how TargetJS models a UI workflow directly in code order:
+Click → animate button → fetch users → remove old results → add new results → pause → highlight one result
 
-- `fetch` calls five APIs to retrieve details for five users.
-- `child` is a special target that adds a new item to the parent each time it executes. Because it ends with `$` in this example, 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, `child` will not execute until the result for user0 has been received.
+The `fetch` target is initially set to `active: false`, which means it waits for an explicit trigger. When the user clicks, the `fetch` target is activated. TargetJS understands that fetching data is an asynchronous operation.
 
-  <img src="https://targetjs.io/img/fetch-5-users.gif" width="130" />
+The `$$` postfix means that a target waits for the preceding sibling targets to complete before running. In this example, `removeChildren$$` waits for `fetch` to complete before it begins. `addChildren$$` begins after both `fetch` and `removeChildren$$` are completed.
 
-```html
-<div id="users"></div>
-```
-```javascript
-import { App } from "targetj";
+Notice how `fetch`, `removeChildren$$`, and `addChildren$$` appear in the same order as the UI sequence. The code is organized around the experience itself.
 
-App({
-    gap: 10,
-    fetch: ['https://targetjs.io/api/randomUser?id=user0',
-        'https://targetjs.io/api/randomUser?id=user1',
-        'https://targetjs.io/api/randomUser?id=user2',
-        'https://targetjs.io/api/randomUser?id=user3',
-        'https://targetjs.io/api/randomUser?id=user4'
-    ],
-    child$() {
-        // prevTargetValue Holds the previous target’s value. For fetch targets, this is each API result in code order,
-        // not the order in which responses arrive in the browser.
-        const user = this.prevTargetValue;
-        return {
-          width: 200,
-          height: 65,
-          borderRadius: 10,
-          boxSizing: "border-box",
-          padding: 10,
-          fontSize: 14,
-          backgroundColor: "#f0f0f0",
-          scale: { value: [0.8, 1], steps: 14, interval: 12 },
-          userName$$: {
-            padding: "10px 0 5px 10px",
-            boxSizing: "border-box",
-            fontWeight: 600,
-            opacity: { value: [0, 1], steps: 50 },
-            html: user.name
-          },
-          userEmail$$: {
-            paddingLeft: 10,
-            boxSizing: "border-box",
-            opacity: { value: [0, 0.7], steps: 50 },
-            html: user.email
-          }
-       };
-    }
-}).mount("#users");
-```
-
-It can also be written using a target’s `cycles` and `interval` properties/methods to fetch users at intervals instead of in a single batch. In this example, we set interval to 1000, making the API call once every second.
+Lastly, `pause$$` adds a short pause before highlighting the first user with an animation. `setTarget` is an imperative way to implement targets within methods.
 
-  <img src="https://targetjs.io/img/fetch-5-users2.gif" width="130" />
 
+```js
+import { App } from "targetj";
 
-```javascript
 App({
-    gap: 10,
-    fetch: {
-        interval: 1000,
-        cycles: 5,
-        value(i) { return `https://targetjs.io/api/randomUser?id=user${i}`; }
+    searchButton: {
+        element: 'button',
+        type: 'button',
+        y: 20, x: 20,
+        width: 220, height: 60, lineHeight: 60,
+        borderRadius: 10, border: 0, backgroundColor: '#f5f5f5',
+        cursor: 'pointer', textAlign: 'center',
+        html: 'Search',
+        onClick() {
+            this.setTarget('scale', {value: [1, 1.15, 1], steps: 8, interval: 12 });
+            this.setTarget('backgroundColor', {value: [ '#ffe8ec', '#f5f5f5' ], steps: 12, interval: 12});
+            this.parent.getChild('users').activateTarget('fetch', { reset: true });
+        }
     },
-    child$() {   
-        return {
-          // …same as the previous example…
-        };
+    users: {
+        y: 90,
+        x: 20,
+        gap: 10,
+        containerOverflowMode: 'always',
+        fetch: {
+            active: false,
+            value: 'https://targetjs.io/api/randomUsers'
+        },
+        removeChildren$$() {
+            this.removeChildren();
+        },
+        addChildren$$: {
+            cycles() { return this.val('fetch').length; },
+            value(i) {
+                const user = this.val('fetch')[i];
+                return {
+                    width: 360,
+                    backgroundColor: "#fafafa",
+                    scale: {value: {list: [0.8, 1]}, steps: 14},
+                    boxShadow: "0 6px 16px rgba(0,0,0,.08)",
+                    containerOverflowMode: 'always',
+                     userName: {
+                        padding: 10,
+                        height: 30,
+                        fontWeight: 600,
+                        opacity: { value: [0, 1], steps: 50 },
+                        html() { return user.name; }
+                    },
+                    userEmail: {
+                        padding: 10,
+                        opacity: { value: [0, 0.7], steps: 50 },
+                        html() { return user.email; }
+                    }
+                };
+            }
+        },
+        pause$$: { interval: 150 },
+        highlightOne$$() {
+            const user = this.getChild(0);
+            user.setTarget('backgroundColor', { value: ['#fff7cc', '#fff1a8'], steps: 14 });
+            user.setTarget('scale', { value: [1, 1.04, 1], steps: 14 });
+            user.setTarget('boxShadow', '0 10px 24px rgba(0,0,0,.14)');
+        }
     }
-}).mount("#users");
+}).mount('#app');
 ```
 
 ### Infinite Loading and Scrolling Example
@@ -403,42 +425,47 @@ App({
   height() { return getScreenHeight(); },
   x() { return (getScreenWidth() - this.getWidth()) / 2; },
   containerOverflowMode: "always",
-  addChildren() {
-    return Array.from({ length: 10 }, (_, i) => ({
-      height: 56,
-      width() { return this.parent.getWidth(); },
-      bottomMargin: 8,
-      borderRadius: 12,
-      backgroundColor: "white",
-      boxShadow: "0 8px 20px rgba(0,0,0,0.08)",
-      photo: {
-        x: 10, y: 10, width: 34, height: 34,
-        borderRadius: "50%",
-        backgroundColor: "#ddd"
-      },
-      userName: {
-        x: 60, y: 10, width: 180, height: 30,
-        overflow: "hidden",
-        borderRadius: 5,
-        backgroundColor: "#ddd"
-      },
-      pause$$: { interval: 100 },
-      fetch$$: "https://targetjs.io/api/randomUser",
-      reveal$$() {
-        const userName = this.getChild("userName");
-        userName.setTarget("html", this.val("fetch$$").name);
-        userName.setTarget("backgroundColor", { value: "white", steps: 20 });
-        this.getChild("photo").setTarget("backgroundColor", { value: "#" + Math.random().toString(16).slice(-6), steps: 20 });
-      },
-    }));
+  addChildren: {
+    waitForChildren: 'visible',
+    value() {
+      return Array.from({ length: 10 }, (_, i) => ({
+        height: 56,
+        width() { return this.parent.getWidth(); },
+        bottomMargin: 8,
+        borderRadius: 12,
+        backgroundColor: "white",
+        boxShadow: "0 8px 20px rgba(0,0,0,0.08)",
+        photo: {
+          x: 10, y: 10, width: 34, height: 34,
+          borderRadius: "50%",
+          backgroundColor: "#ddd"
+        },
+        userName: {
+          x: 60, y: 10, width: 180, height: 30,
+          overflow: "hidden",
+          borderRadius: 5,
+          backgroundColor: "#ddd"
+        },
+        pause$$: { interval: 100 },
+        fetch$$: "https://targetjs.io/api/randomUser",
+        reveal$$() {
+          const userName = this.getChild("userName");
+          userName.setTarget("html", this.val("fetch$$").name);
+          userName.setTarget("backgroundColor", { value: "white", steps: 20 });
+          this.getChild("photo").setTarget("backgroundColor", { value: "#" + Math.random().toString(16).slice(-6), steps: 20 });
+        },
+      }));
+    }
   },
   wave$$: {
     interval: 30,
     cycles() { return this.visibleChildren.length; },
     value(i) {
       const child = this.visibleChildren[i];
-      child.setTarget("scale", { value: [1, 1.06, 1], steps: 18 });
-      child.setTarget("opacity", { value: [1, 0.92, 1], steps: 18 });
+      if (child) {
+        child.setTarget("scale", { value: [1, 1.06, 1], steps: 18 });
+        child.setTarget("opacity", { value: [1, 0.92, 1], steps: 18 });
+      }  
     }
   },
   onScroll() {

package/build/LocationManager.js

@@ -452,6 +452,7 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
         } else {
           nowVisible = !!tmodel.targets.isVisible;
         }
+        tmodel.actualValues.isVisible = nowVisible;
         tmodel.isNowVisible = !wasVisible && nowVisible;
         tmodel.isNowInvisible = (wasVisible || wasVisible === undefined) && !nowVisible;
       } else {

package/build/PageManager.js

@@ -68,33 +68,42 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
               return _App.tApp.reset();
             case 4:
               link = _TUtil.TUtil.getFullLink(link);
-              if (!this.pageCache[link]) {
-                _App.tApp.tRoot.$dom.innerHTML("");
-                _App.App.oids = {};
-                _App.App.tmodelIdMap = {};
-                _App.tApp.tRoot = _App.tApp.tRootFactory();
-                this.lastLink = link;
-                _App.tApp.start();
-              } else {
-                _App.tApp.tRoot = this.pageCache[link].tRoot;
-                _App.App.oids = this.pageCache[link].oids;
-                _App.App.tmodelIdMap = this.pageCache[link].tmodelIdMap;
-                _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);
-                visibles = Object.values(this.pageCache[link].visibleOidMap);
-                newVisibles = _DomInit.DomInit.initCacheDoms(visibles);
-                visibles.forEach(function (tmodel) {
-                  tmodel.visibilityStatus = undefined;
-                });
-                _App.tApp.manager.visibleOidMap = _objectSpread({}, this.pageCache[link].visibleOidMap);
-                newVisibles.forEach(function (visible) {
-                  _App.tApp.manager.visibleOidMap[visible.oid] = visible;
-                });
-                window.scrollTo(this.pageCache[link].scrollLeft, this.pageCache[link].scrollTop);
-                this.lastLink = link;
-                _App.tApp.start();
+              if (this.pageCache[link]) {
+                _context.next = 15;
+                break;
               }
-            case 6:
+              _App.tApp.tRoot.$dom.innerHTML("");
+              _App.App.oids = {};
+              _App.App.tmodelIdMap = {};
+              _App.tApp.tRoot = _App.tApp.tRootFactory();
+              this.lastLink = link;
+              _context.next = 13;
+              return _App.tApp.start();
+            case 13:
+              _context.next = 30;
+              break;
+            case 15:
+              _App.tApp.tRoot = this.pageCache[link].tRoot;
+              _App.App.oids = this.pageCache[link].oids;
+              _App.App.tmodelIdMap = this.pageCache[link].tmodelIdMap;
+              _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);
+              visibles = Object.values(this.pageCache[link].visibleOidMap);
+              newVisibles = _DomInit.DomInit.initCacheDoms(visibles);
+              visibles.forEach(function (tmodel) {
+                tmodel.visibilityStatus = undefined;
+              });
+              _App.tApp.manager.visibleOidMap = _objectSpread({}, this.pageCache[link].visibleOidMap);
+              newVisibles.forEach(function (visible) {
+                _App.tApp.manager.visibleOidMap[visible.oid] = visible;
+              });
+              window.scrollTo(this.pageCache[link].scrollLeft, this.pageCache[link].scrollTop);
+              this.lastLink = link;
+              _context.next = 29;
+              return _App.tApp.start();
+            case 29:
+              (0, _App.getRunScheduler)().restoreSnapshot(this.pageCache[link].runSnapshot);
+            case 30:
             case "end":
               return _context.stop();
           }
@@ -176,7 +185,8 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
                   visibleOidMap: _objectSpread({}, _App.tApp.manager.visibleOidMap),
                   scrollLeft: _$Dom.$Dom.getWindowScrollLeft() || 0,
                   scrollTop: _$Dom.$Dom.getWindowScrollTop() || 0,
-                  tRoot: _App.tApp.tRoot
+                  tRoot: _App.tApp.tRoot,
+                  runSnapshot: (0, _App.getRunScheduler)().getSnapshot()
                 };
               }
               if (updateHistory) {
@@ -211,7 +221,8 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
         visibleOidMap: _objectSpread({}, _App.tApp.manager.visibleOidMap),
         scrollLeft: _$Dom.$Dom.getWindowScrollLeft() || 0,
         scrollTop: _$Dom.$Dom.getWindowScrollTop() || 0,
-        tRoot: _App.tApp.tRoot
+        tRoot: _App.tApp.tRoot,
+        runSnapshot: (0, _App.getRunScheduler)().getSnapshot()
       };
       if (updateHistory) {
         history.pushState({

package/build/RunScheduler.js

@@ -43,7 +43,6 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
     key: "resetRuns",
     value: function () {
       var _resetRuns = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _this$delayProcess;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -53,9 +52,7 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
                 return requestAnimationFrame(resolve);
               });
             case 3:
-              if ((_this$delayProcess = this.delayProcess) !== null && _this$delayProcess !== void 0 && _this$delayProcess.timeoutId) {
-                clearTimeout(this.delayProcess.timeoutId);
-              }
+              this.clearDelayProcess();
               this.nextRuns = [];
               this.domProcessing = 0;
               this.runningFlag = false;
@@ -113,7 +110,7 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
     key: "run",
     value: function () {
       var _run = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(delay, runId) {
-        var _this$delayProcess2;
+        var _this$delayProcess;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -137,7 +134,7 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
               this.runningFlag = true;
               this.runStartTime = _TUtil.TUtil.now();
               if (_App.tApp.debugLevel === 1) {
-                _TUtil.TUtil.log(true)("Request from: ".concat(runId, " delay: ").concat(delay, " runningStep:").concat(this.runningStep, " dom:").concat(this.domProcessing, " runs:").concat(this.nextRuns.length, " D:").concat((_this$delayProcess2 = this.delayProcess) === null || _this$delayProcess2 === void 0 ? void 0 : _this$delayProcess2.delay, " events:").concat((0, _App.getEvents)().eventQueue.length));
+                _TUtil.TUtil.log(true)("Request from: ".concat(runId, " delay: ").concat(delay, " runningStep:").concat(this.runningStep, " dom:").concat(this.domProcessing, " runs:").concat(this.nextRuns.length, " D:").concat((_this$delayProcess = this.delayProcess) === null || _this$delayProcess === void 0 ? void 0 : _this$delayProcess.delay, " events:").concat((0, _App.getEvents)().eventQueue.length));
               }
               if (!(this.phase === 0)) {
                 _context2.next = 16;
@@ -291,31 +288,52 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
         _this3.needsRerun();
       });
     }
+  }, {
+    key: "clearDelayProcess",
+    value: function clearDelayProcess() {
+      var _this$delayProcess2;
+      if ((_this$delayProcess2 = this.delayProcess) !== null && _this$delayProcess2 !== void 0 && _this$delayProcess2.timeoutId) {
+        clearTimeout(this.delayProcess.timeoutId);
+        this.delayProcess.timeoutId = undefined;
+      }
+      this.delayProcess = undefined;
+    }
   }, {
     key: "setDelayProcess",
     value: function setDelayProcess(runId, insertTime, interval, runTime, delay) {
       var _this4 = this;
-      this.delayProcess = {
+      var delayProcess = {
         runId: runId,
         insertTime: insertTime,
         runTime: runTime,
         interval: interval,
-        timeoutId: setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-            while (1) switch (_context3.prev = _context3.next) {
-              case 0:
-                _this4.delayProcess.timeoutId = undefined;
-                _context3.next = 3;
-                return _this4.run(delay, runId);
-              case 3:
-                _this4.executeNextRun();
-              case 4:
-              case "end":
-                return _context3.stop();
-            }
-          }, _callee3);
-        })), Math.max(0, delay))
+        delay: delay,
+        timeoutId: undefined
       };
+      delayProcess.timeoutId = setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(_this4.delayProcess !== delayProcess)) {
+                _context3.next = 2;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 2:
+              delayProcess.timeoutId = undefined;
+              _context3.next = 5;
+              return _this4.run(delay, runId);
+            case 5:
+              if (_this4.delayProcess === delayProcess) {
+                _this4.executeNextRun();
+              }
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      })), Math.max(0, delay));
+      this.delayProcess = delayProcess;
     }
   }, {
     key: "executeNextRun",
@@ -341,7 +359,7 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
         var _newDelay = Math.max(1, nextValidRun.delay - (_now - nextValidRun.insertTime));
         this.setDelayProcess(nextValidRun.runId, nextValidRun.insertTime, nextValidRun.delay, _now + _newDelay, _newDelay);
       } else {
-        this.delayProcess = undefined;
+        this.clearDelayProcess();
       }
     }
   }, {
@@ -383,6 +401,52 @@ var RunScheduler = exports.RunScheduler = /*#__PURE__*/function () {
         delay: newDelay
       });
     }
+  }, {
+    key: "getSnapshot",
+    value: function getSnapshot() {
+      var now = _TUtil.TUtil.now();
+      var runs = [];
+      var addRun = function addRun(run) {
+        if (!run) {
+          return;
+        }
+        var runTime = _TUtil.TUtil.isDefined(run.runTime) ? run.runTime : run.insertTime + run.delay;
+        runs.push({
+          runId: run.runId,
+          delay: Math.max(0, runTime - now)
+        });
+      };
+      addRun(this.delayProcess);
+      this.nextRuns.forEach(addRun);
+      var immediateRuns = runs.filter(function (run) {
+        return run.delay === 0;
+      });
+      var delayedRuns = runs.filter(function (run) {
+        return run.delay > 0;
+      });
+      var result = [];
+      if (immediateRuns.length) {
+        result.push({
+          runId: immediateRuns.map(function (run) {
+            return run.runId;
+          }).join('-'),
+          delay: 0
+        });
+      }
+      delayedRuns.forEach(function (run) {
+        result.push(run);
+      });
+      return result;
+    }
+  }, {
+    key: "restoreSnapshot",
+    value: function restoreSnapshot() {
+      var _this5 = this;
+      var snapshot = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      snapshot.forEach(function (run) {
+        _this5.schedule(run.delay, "restore-".concat(run.runId));
+      });
+    }
   }]);
 }();
 _defineProperty(RunScheduler, "domSteps", [function () {

package/build/TModelManager.js

@@ -114,7 +114,9 @@ var TModelManager = exports.TModelManager = /*#__PURE__*/function () {
             if (!tmodel.canHaveDom() || !tmodel.isIncluded() || tmodel.canDeleteDom() && !visible && !keepDom) {
               this.addToInvisibleDom(tmodel);
               tmodel.getChildren().forEach(function (tmodel) {
-                _this.addToRecursiveInvisibleDom(tmodel);
+                if (!tmodel.managesOwnScroll()) {
+                  _this.addToRecursiveInvisibleDom(tmodel);
+                }
               });
             }
           }
@@ -232,7 +234,9 @@ var TModelManager = exports.TModelManager = /*#__PURE__*/function () {
           this.lists.invisibleDom.push(tmodel);
         }
         tmodel.getChildren().forEach(function (tmodel) {
-          _this2.addToRecursiveInvisibleDom(tmodel);
+          if (!tmodel.managesOwnScroll()) {
+            _this2.addToRecursiveInvisibleDom(tmodel);
+          }
         });
       }
     }
@@ -260,10 +264,11 @@ var TModelManager = exports.TModelManager = /*#__PURE__*/function () {
   }, {
     key: "needsRerender",
     value: function needsRerender(tmodel) {
-      if (tmodel.hasDom() && _TUtil.TUtil.isDefined(tmodel.getHtml()) && (tmodel.$dom.innerHTML() !== tmodel.getHtml() || tmodel.$dom.textOnly !== tmodel.isTextOnly())) {
-        return true;
+      var html = tmodel.getHtml();
+      if (!tmodel.hasDom() || !_TUtil.TUtil.isDefined(html)) {
+        return false;
       }
-      return false;
+      return tmodel.$dom.innerHTML() !== String(html) || tmodel.$dom.textOnly !== tmodel.isTextOnly();
     }
   }, {
     key: "needsRestyle",

package/build/TUtil.js

@@ -82,7 +82,7 @@ var TUtil = exports.TUtil = /*#__PURE__*/function () {
   }, {
     key: "getVisibilityClipRect",
     value: function getVisibilityClipRect(container) {
-      var rect = null;
+      var rect = TUtil.getScreenViewportRect();
       while (container && container !== (0, _App.tRoot)()) {
         if (this.shouldClipByAncestor(container)) {
           var ancestorRect = this.getAncestorViewportRect(container);
@@ -95,6 +95,17 @@ var TUtil = exports.TUtil = /*#__PURE__*/function () {
       }
       return rect;
     }
+  }, {
+    key: "getScreenViewportRect",
+    value: function getScreenViewportRect() {
+      return {
+        x: 0,
+        y: 0,
+        r: (0, _App.getScreenWidth)(),
+        b: (0, _App.getScreenHeight)(),
+        source: "screen"
+      };
+    }
   }, {
     key: "shouldClipByAncestor",
     value: function shouldClipByAncestor(ancestor) {