targetj 1.0.232 → 1.0.234

package/README.md

@@ -1,13 +1,13 @@
 # TargetJS: State as Destination, Code Order as UI Sequence
 
+### Most frameworks are great at rendering state. TargetJS is designed for the journey between states.
+
 **[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)
 
-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.
+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).
 
@@ -378,14 +378,14 @@ App({
                         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)');
             }
+        },
+        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('#app');
@@ -425,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

@@ -51,6 +51,7 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
     this.resumePausedList = [];
     this.resumePausedMap = {};
     this.resumeScheduled = false;
+    this.calcEpoch = 0;
   }
   return _createClass(LocationManager, [{
     key: "clear",
@@ -91,6 +92,7 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
     value: function () {
       var _calculateAll = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
         var budgetMs,
+          calcEpoch,
           stack,
           ctx,
           _args = arguments;
@@ -98,42 +100,49 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               budgetMs = _args.length > 0 && _args[0] !== undefined ? _args[0] : 8;
+              calcEpoch = this.calcEpoch;
               if (!this.calcBusy) {
-                _context.next = 4;
+                _context.next = 5;
                 break;
               }
               this.calcQueued = true;
               return _context.abrupt("return");
-            case 4:
+            case 5:
               this.calcBusy = true;
               this.hasLocationList.length = 0;
               this.hasLocationMap = {};
               this.locationListStats = [];
-              stack = [];
-              stack.push({
+              stack = [{
                 container: (0, _App.tRoot)(),
                 stage: 'init',
                 children: [],
                 viewport: undefined,
                 index: 0
-              });
+              }];
               ctx = {
                 budgetMs: budgetMs,
-                sliceStart: _TUtil.TUtil.now()
+                sliceStart: _TUtil.TUtil.now(),
+                calcEpoch: calcEpoch
               };
               _context.next = 13;
               return this.processStack(stack, ctx);
             case 13:
+              if (!(ctx.calcEpoch !== this.calcEpoch)) {
+                _context.next = 15;
+                break;
+              }
+              return _context.abrupt("return");
+            case 15:
               this.processAfterStack();
               this.scheduleResumePaused();
               this.calcBusy = false;
               if (!this.calcQueued) {
-                _context.next = 19;
+                _context.next = 21;
                 break;
               }
               this.calcQueued = false;
               return _context.abrupt("return", this.calculateAll(budgetMs));
-            case 19:
+            case 21:
             case "end":
               return _context.stop();
           }
@@ -144,6 +153,13 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
       }
       return calculateAll;
     }()
+  }, {
+    key: "cancelCurrentCalculation",
+    value: function cancelCurrentCalculation() {
+      this.calcEpoch++;
+      this.calcBusy = false;
+      this.calcQueued = false;
+    }
   }, {
     key: "processStack",
     value: function () {
@@ -294,19 +310,31 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
               };
             case 4:
               if (!stack.length) {
-                _context2.next = 21;
+                _context2.next = 25;
+                break;
+              }
+              if (!(ctx.calcEpoch !== this.calcEpoch)) {
+                _context2.next = 7;
                 break;
               }
+              return _context2.abrupt("return");
+            case 7:
               if (!(_TUtil.TUtil.now() - ctx.sliceStart > ctx.budgetMs)) {
-                _context2.next = 10;
+                _context2.next = 14;
                 break;
               }
-              _context2.next = 8;
+              _context2.next = 10;
               return new Promise(requestAnimationFrame);
-            case 8:
+            case 10:
+              if (!(ctx.calcEpoch !== this.calcEpoch)) {
+                _context2.next = 12;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 12:
               ctx.sliceStart = _TUtil.TUtil.now();
               return _context2.abrupt("continue", 4);
-            case 10:
+            case 14:
               job = stack[stack.length - 1];
               if (job.stage === 'init') {
                 container = job.container;
@@ -333,19 +361,19 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
                 processAfterChild(job);
               }
               if (!(job.index >= job.children.length)) {
-                _context2.next = 18;
+                _context2.next = 22;
                 break;
               }
               processAfterAllChildren(job);
               stack.pop();
               return _context2.abrupt("continue", 4);
-            case 18:
+            case 22:
               if (job.stage === 'child') {
                 processChild(job);
               }
               _context2.next = 4;
               break;
-            case 21:
+            case 25:
             case "end":
               return _context2.stop();
           }

package/build/PageManager.js

@@ -57,19 +57,28 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
     key: "openPage",
     value: function () {
       var _openPage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(link) {
-        var visibles, newVisibles;
+        var shouldReset,
+          visibles,
+          newVisibles,
+          _args = arguments;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _context.next = 2;
-              return _App.tApp.stop();
-            case 2:
+              shouldReset = _args.length > 1 && _args[1] !== undefined ? _args[1] : true;
+              if (!shouldReset) {
+                _context.next = 7;
+                break;
+              }
               _context.next = 4;
-              return _App.tApp.reset();
+              return _App.tApp.stop();
             case 4:
+              (0, _App.getLocationManager)().cancelCurrentCalculation();
+              _context.next = 7;
+              return _App.tApp.reset();
+            case 7:
               link = _TUtil.TUtil.getFullLink(link);
               if (this.pageCache[link]) {
-                _context.next = 15;
+                _context.next = 18;
                 break;
               }
               _App.tApp.tRoot.$dom.innerHTML("");
@@ -77,12 +86,12 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
               _App.App.tmodelIdMap = {};
               _App.tApp.tRoot = _App.tApp.tRootFactory();
               this.lastLink = link;
-              _context.next = 13;
+              _context.next = 16;
               return _App.tApp.start();
-            case 13:
-              _context.next = 30;
+            case 16:
+              _context.next = 34;
               break;
-            case 15:
+            case 18:
               _App.tApp.tRoot = this.pageCache[link].tRoot;
               _App.App.oids = this.pageCache[link].oids;
               _App.App.tmodelIdMap = this.pageCache[link].tmodelIdMap;
@@ -93,17 +102,18 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
               visibles.forEach(function (tmodel) {
                 tmodel.visibilityStatus = undefined;
               });
+              _App.tApp.manager.activatePendingTargetsAfterDom(visibles);
               _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;
+              _context.next = 33;
               return _App.tApp.start();
-            case 29:
+            case 33:
               (0, _App.getRunScheduler)().restoreSnapshot(this.pageCache[link].runSnapshot);
-            case 30:
+            case 34:
             case "end":
               return _context.stop();
           }
@@ -118,30 +128,25 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
     key: "openLinkFromHistory",
     value: function () {
       var _openLinkFromHistory = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(state) {
+        var link;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!state.link) {
-                _context2.next = 6;
+              link = state.link || state.browserUrl;
+              if (link) {
+                _context2.next = 3;
                 break;
               }
-              this.onPageClose();
-              _context2.next = 4;
-              return this.openLink(state.link, false);
-            case 4:
-              _context2.next = 10;
-              break;
-            case 6:
-              if (!state.browserUrl) {
-                _context2.next = 10;
-                break;
+              return _context2.abrupt("return");
+            case 3:
+              if (state.browserUrl) {
+                history.replaceState({
+                  link: link
+                }, "", link);
               }
-              history.replaceState({
-                link: state.browserUrl
-              }, "", state.browserUrl);
-              _context2.next = 10;
-              return this.openPage(state.browserUrl);
-            case 10:
+              _context2.next = 6;
+              return this.openLink(link, false);
+            case 6:
             case "end":
               return _context2.stop();
           }
@@ -166,6 +171,7 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
     value: function () {
       var _openLink = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(link) {
         var updateHistory,
+          runSnapshot,
           html,
           _args3 = arguments;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
@@ -173,32 +179,42 @@ var PageManager = exports.PageManager = /*#__PURE__*/function () {
             case 0:
               updateHistory = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : true;
               link = _TUtil.TUtil.getFullLink(link);
-              if (this.lastLink) {
-                _App.tApp.tRoot.$dom = _$Dom.$Dom.query('#tgjs-root') ? new _$Dom.$Dom('#tgjs-root') : new _$Dom.$Dom('body');
-                html = _App.tApp.tRoot.$dom.innerHTML();
-                this.onPageClose();
-                this.pageCache[this.lastLink] = {
-                  link: this.lastLink,
-                  html: html,
-                  oids: _objectSpread({}, _App.App.oids),
-                  tmodelIdMap: _objectSpread({}, _App.App.tmodelIdMap),
-                  visibleOidMap: _objectSpread({}, _App.tApp.manager.visibleOidMap),
-                  scrollLeft: _$Dom.$Dom.getWindowScrollLeft() || 0,
-                  scrollTop: _$Dom.$Dom.getWindowScrollTop() || 0,
-                  tRoot: _App.tApp.tRoot,
-                  runSnapshot: (0, _App.getRunScheduler)().getSnapshot()
-                };
+              if (!this.lastLink) {
+                _context3.next = 13;
+                break;
               }
+              runSnapshot = (0, _App.getRunScheduler)().getSnapshot();
+              _context3.next = 6;
+              return _App.tApp.stop();
+            case 6:
+              (0, _App.getLocationManager)().cancelCurrentCalculation();
+              this.onPageClose();
+              _App.tApp.tRoot.$dom = _$Dom.$Dom.query('#tgjs-root') ? new _$Dom.$Dom('#tgjs-root') : new _$Dom.$Dom('body');
+              html = _App.tApp.tRoot.$dom.innerHTML();
+              this.pageCache[this.lastLink] = {
+                link: this.lastLink,
+                html: html,
+                oids: _objectSpread({}, _App.App.oids),
+                tmodelIdMap: _objectSpread({}, _App.App.tmodelIdMap),
+                visibleOidMap: _objectSpread({}, _App.tApp.manager.visibleOidMap),
+                scrollLeft: _$Dom.$Dom.getWindowScrollLeft() || 0,
+                scrollTop: _$Dom.$Dom.getWindowScrollTop() || 0,
+                tRoot: _App.tApp.tRoot,
+                runSnapshot: runSnapshot
+              };
+              _context3.next = 13;
+              return _App.tApp.reset();
+            case 13:
               if (updateHistory) {
                 history.pushState({
                   link: link
                 }, "", link);
               }
-              _context3.next = 6;
-              return this.openPage(link);
-            case 6:
+              _context3.next = 16;
+              return this.openPage(link, false);
+            case 16:
               (0, _App.getRunScheduler)().schedule(0, "pagemanager-processOpenLink");
-            case 7:
+            case 17:
             case "end":
               return _context3.stop();
           }

package/build/TModel.js

@@ -326,6 +326,16 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
       }
       return this;
     }
+  }, {
+    key: "exists",
+    value: function exists() {
+      var parent = this.getParent();
+      if (!parent) {
+        return false;
+      }
+      parent.getChildren();
+      return parent.allChildrenMap[this.oid] === this;
+    }
   }, {
     key: "addToParentVisibleChildren",
     value: function addToParentVisibleChildren() {

package/build/TModelManager.js

@@ -92,7 +92,7 @@ var TModelManager = exports.TModelManager = /*#__PURE__*/function () {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var tmodel = _step.value;
           lastVisibleMap[tmodel.oid] = undefined;
-          if (!_App.App.tmodelIdMap[tmodel.oid]) {
+          if (!tmodel.exists()) {
             if (tmodel.hasDom()) {
               this.addToInvisibleDom(tmodel);
             }
@@ -181,7 +181,7 @@ var TModelManager = exports.TModelManager = /*#__PURE__*/function () {
         return v !== undefined;
       }).forEach(function (tmodel) {
         if (tmodel.hasDom()) {
-          if (!_App.App.tmodelIdMap[tmodel.oid] || !tmodel.isIncluded()) {
+          if (!tmodel.exists() || !tmodel.isIncluded()) {
             _this.addToInvisibleDom(tmodel);
           }
         }
@@ -467,6 +467,7 @@ var TModelManager = exports.TModelManager = /*#__PURE__*/function () {
           if (pending !== null && pending !== void 0 && pending.size) {
             for (var _i = 0, _arr = _toConsumableArray(pending); _i < _arr.length; _i++) {
               var target = _arr[_i];
+              _TargetUtil.TargetUtil.cleanupTarget(tmodel, target);
               _TargetUtil.TargetUtil.shouldActivateNextTarget(tmodel, target);
             }
           }

package/build/TUtil.js

@@ -86,12 +86,12 @@ var TUtil = exports.TUtil = /*#__PURE__*/function () {
       while (container && container !== (0, _App.tRoot)()) {
         if (this.shouldClipByAncestor(container)) {
           var ancestorRect = this.getAncestorViewportRect(container);
-          rect = rect ? this.intersectVisibilityRects(rect, ancestorRect) : ancestorRect;
+          rect = rect && !container.allTargetMap['onWindowScroll'] ? this.intersectVisibilityRects(rect, ancestorRect) : ancestorRect;
           if (rect.r <= rect.x || rect.b <= rect.y) {
             break;
           }
         }
-        container = container.getParent();
+        container = container.getRealParent();
       }
       return rect;
     }
@@ -297,7 +297,8 @@ var TUtil = exports.TUtil = /*#__PURE__*/function () {
           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()), ", absX:").concat(Math.floor(g.absX), ", absY:").concat(Math.floor(g.absY), "  n-e-s:").concat(Math.floor(g.viewport.yNorth), "-").concat(Math.floor(g.viewport.yEast), "-").concat(Math.floor(g.viewport.ySouth), " w:").concat(Math.floor(g.getBaseWidth()), " ww:").concat(Math.floor(g.getContentWidth()), " h:").concat(Math.floor(g.getBaseHeight()), " hh:").concat(Math.floor(g.getContentHeight())));
+            var _g$viewport, _g$viewport2, _g$viewport3;
+            console.log("".concat(gtab).concat(g.oid, " v:").concat(g.isVisible(), " x:").concat(Math.floor(g.getX()), " y:").concat(Math.floor(g.getY()), ", absX:").concat(Math.floor(g.absX), ", absY:").concat(Math.floor(g.absY), "  n-e-s:").concat(Math.floor((_g$viewport = g.viewport) === null || _g$viewport === void 0 ? void 0 : _g$viewport.yNorth), "-").concat(Math.floor((_g$viewport2 = g.viewport) === null || _g$viewport2 === void 0 ? void 0 : _g$viewport2.yEast), "-").concat(Math.floor((_g$viewport3 = g.viewport) === null || _g$viewport3 === void 0 ? void 0 : _g$viewport3.ySouth), " w:").concat(Math.floor(g.getBaseWidth()), " ww:").concat(Math.floor(g.getContentWidth()), " h:").concat(Math.floor(g.getBaseHeight()), " hh:").concat(Math.floor(g.getContentHeight())));
           } else {
             console.log("".concat(gtab).concat(g.oid, " v:").concat(g.isVisible(), " x:").concat(Math.floor(g.getX()), " y:").concat(Math.floor(g.getY()), " absX:").concat(Math.floor(g.absX), ", absY:").concat(Math.floor(g.absY), " w:").concat(Math.floor(g.getWidth()), " h:").concat(Math.floor(g.getHeight()), " hc:").concat(Math.floor(g.getContentHeight())));
           }