targetj 1.0.221 → 1.0.223

package/README.md

@@ -177,8 +177,9 @@ Each target has its own state and lifecycle. Targets execute automatically in th
 ## Table of Contents
 
 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. Deeer Examples:
+1. Deeper Examples:
     - [Loading Five Users Example](#loading-five-users-example)
     - [Infinite Loading and Scrolling Example](#infinite-loading-and-scrolling-example)
 1. [Target Methods](#target-methods)
@@ -225,6 +226,39 @@ TargetJS can also be used as a "no-code" library. Elements with tg- attributes a
 </div>
 ```
 
+## Using TargetJS as a Library
+
+TargetJS can run inside an existing app mounted into a DOM element managed by another framework.
+
+### React (mount + cleanup)
+
+```javascript
+import React, { useLayoutEffect, useRef } from "react";
+import { App as TJApp } from "targetj";
+
+export default function TargetIsland() {
+  const hostRef = useRef(null);
+
+  useLayoutEffect(() => {
+    const el = hostRef.current;
+    if (!el) return;
+
+    TJApp({
+      width: { value: [100, 500], steps: 100 },
+      height: 200,
+      backgroundColor: "purple",
+      onClick() { console.log("click"); }
+    }).mount(el);
+
+    return () => {
+      TJApp.unmount();
+    };
+  }, []);
+
+  return <div ref={hostRef} style={{ width: 100, height: 200, overflow: "hidden" }} />;
+}
+```
+
 ## 🚀 Why TargetJS?
 
 1. Zero Boilerplate Async: The $$ postfix handles the "wait" for you.

package/build/App.js

@@ -192,17 +192,29 @@ var AppFn = function AppFn() {
   };
   return my;
 };
-var App = exports.App = function App(firstChild) {
+var ensureRunning = function ensureRunning() {
   var _tApp;
+  if ((_tApp = tApp) !== null && _tApp !== void 0 && _tApp.tRoot || document.readyState === "loading") {
+    return;
+  }
+  runApp();
+};
+var App = exports.App = function App(firstChild) {
+  var _tApp2;
   if (!firstChild) {
     return;
   }
-  var tmodel = firstChild instanceof _TModel.TModel ? firstChild : new _TModel.TModel('App', firstChild);
-  if (!((_tApp = tApp) !== null && _tApp !== void 0 && _tApp.tRoot)) {
-    queuedAppCalls.push(tmodel);
-  } else {
+  var tmodel = firstChild instanceof _TModel.TModel ? firstChild : new _TModel.TModel("App", firstChild);
+  if (!((_tApp2 = tApp) !== null && _tApp2 !== void 0 && _tApp2.tRoot)) {
+    if (document.readyState === "loading") {
+      queuedAppCalls.push(tmodel);
+      return tmodel;
+    }
+    ensureRunning();
     tApp.tRoot.addChild(tmodel);
+    return tmodel;
   }
+  tApp.tRoot.addChild(tmodel);
   return tmodel;
 };
 App.unmount = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
@@ -242,9 +254,8 @@ App.unmount = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime()
       case 14:
         App.oids = {};
         App.tmodelIdMap = {};
-        queuedAppCalls.length = 0;
         exports.tApp = tApp = undefined;
-      case 18:
+      case 17:
       case "end":
         return _context4.stop();
     }
@@ -267,64 +278,64 @@ var isRunning = exports.isRunning = function isRunning() {
   return tApp ? tApp.runningFlag : false;
 };
 var tRoot = exports.tRoot = function tRoot() {
-  var _tApp2;
-  return (_tApp2 = tApp) === null || _tApp2 === void 0 ? void 0 : _tApp2.tRoot;
+  var _tApp3;
+  return (_tApp3 = tApp) === null || _tApp3 === void 0 ? void 0 : _tApp3.tRoot;
 };
 var getEvents = exports.getEvents = function getEvents() {
-  var _tApp3;
-  return (_tApp3 = tApp) === null || _tApp3 === void 0 ? void 0 : _tApp3.events;
+  var _tApp4;
+  return (_tApp4 = tApp) === null || _tApp4 === void 0 ? void 0 : _tApp4.events;
 };
 var getPager = exports.getPager = function getPager() {
-  var _tApp4;
-  return (_tApp4 = tApp) === null || _tApp4 === void 0 ? void 0 : _tApp4.pager;
+  var _tApp5;
+  return (_tApp5 = tApp) === null || _tApp5 === void 0 ? void 0 : _tApp5.pager;
 };
 var getLoader = exports.getLoader = function getLoader() {
-  var _tApp5;
-  return (_tApp5 = tApp) === null || _tApp5 === void 0 ? void 0 : _tApp5.loader;
+  var _tApp6;
+  return (_tApp6 = tApp) === null || _tApp6 === void 0 ? void 0 : _tApp6.loader;
 };
 var fetch = exports.fetch = function fetch(tmodel, url, query, cacheId) {
-  var _tApp6;
-  return (_tApp6 = tApp) === null || _tApp6 === void 0 || (_tApp6 = _tApp6.loader) === null || _tApp6 === void 0 ? void 0 : _tApp6.fetch(tmodel, url, query, cacheId);
+  var _tApp7;
+  return (_tApp7 = tApp) === null || _tApp7 === void 0 || (_tApp7 = _tApp7.loader) === null || _tApp7 === void 0 ? void 0 : _tApp7.fetch(tmodel, url, query, cacheId);
 };
 var fetchImage = exports.fetchImage = function fetchImage(tmodel, src, cacheId) {
-  var _tApp7;
-  return (_tApp7 = tApp) === null || _tApp7 === void 0 || (_tApp7 = _tApp7.loader) === null || _tApp7 === void 0 ? void 0 : _tApp7.fetchImage(tmodel, src, cacheId);
+  var _tApp8;
+  return (_tApp8 = tApp) === null || _tApp8 === void 0 || (_tApp8 = _tApp8.loader) === null || _tApp8 === void 0 ? void 0 : _tApp8.fetchImage(tmodel, src, cacheId);
 };
 var getManager = exports.getManager = function getManager() {
-  var _tApp8;
-  return (_tApp8 = tApp) === null || _tApp8 === void 0 ? void 0 : _tApp8.manager;
+  var _tApp9;
+  return (_tApp9 = tApp) === null || _tApp9 === void 0 ? void 0 : _tApp9.manager;
 };
 var getTargetManager = exports.getTargetManager = function getTargetManager() {
-  var _tApp9;
-  return (_tApp9 = tApp) === null || _tApp9 === void 0 ? void 0 : _tApp9.targetManager;
+  var _tApp10;
+  return (_tApp10 = tApp) === null || _tApp10 === void 0 ? void 0 : _tApp10.targetManager;
 };
 var getAnimationManager = exports.getAnimationManager = function getAnimationManager() {
-  var _tApp10;
-  return (_tApp10 = tApp) === null || _tApp10 === void 0 ? void 0 : _tApp10.animationManager;
+  var _tApp11;
+  return (_tApp11 = tApp) === null || _tApp11 === void 0 ? void 0 : _tApp11.animationManager;
 };
 var getRunScheduler = exports.getRunScheduler = function getRunScheduler() {
-  var _tApp11;
-  return (_tApp11 = tApp) === null || _tApp11 === void 0 ? void 0 : _tApp11.runScheduler;
+  var _tApp12;
+  return (_tApp12 = tApp) === null || _tApp12 === void 0 ? void 0 : _tApp12.runScheduler;
 };
 var getLocationManager = exports.getLocationManager = function getLocationManager() {
-  var _tApp12;
-  return (_tApp12 = tApp) === null || _tApp12 === void 0 ? void 0 : _tApp12.locationManager;
+  var _tApp13;
+  return (_tApp13 = tApp) === null || _tApp13 === void 0 ? void 0 : _tApp13.locationManager;
 };
 var getScreenWidth = exports.getScreenWidth = function getScreenWidth() {
-  var _tApp$tRoot$val, _tApp13;
-  return (_tApp$tRoot$val = (_tApp13 = tApp) === null || _tApp13 === void 0 || (_tApp13 = _tApp13.tRoot) === null || _tApp13 === void 0 ? void 0 : _tApp13.val('screenWidth')) !== null && _tApp$tRoot$val !== void 0 ? _tApp$tRoot$val : 0;
+  var _tApp$tRoot$val, _tApp14;
+  return (_tApp$tRoot$val = (_tApp14 = tApp) === null || _tApp14 === void 0 || (_tApp14 = _tApp14.tRoot) === null || _tApp14 === void 0 ? void 0 : _tApp14.val('screenWidth')) !== null && _tApp$tRoot$val !== void 0 ? _tApp$tRoot$val : 0;
 };
 var getScreenHeight = exports.getScreenHeight = function getScreenHeight() {
-  var _tApp$tRoot$val2, _tApp14;
-  return (_tApp$tRoot$val2 = (_tApp14 = tApp) === null || _tApp14 === void 0 || (_tApp14 = _tApp14.tRoot) === null || _tApp14 === void 0 ? void 0 : _tApp14.val('screenHeight')) !== null && _tApp$tRoot$val2 !== void 0 ? _tApp$tRoot$val2 : 0;
+  var _tApp$tRoot$val2, _tApp15;
+  return (_tApp$tRoot$val2 = (_tApp15 = tApp) === null || _tApp15 === void 0 || (_tApp15 = _tApp15.tRoot) === null || _tApp15 === void 0 ? void 0 : _tApp15.val('screenHeight')) !== null && _tApp$tRoot$val2 !== void 0 ? _tApp$tRoot$val2 : 0;
 };
 var getVisibles = exports.getVisibles = function getVisibles() {
-  var _tApp15;
-  return (_tApp15 = tApp) === null || _tApp15 === void 0 || (_tApp15 = _tApp15.manager) === null || _tApp15 === void 0 ? void 0 : _tApp15.getVisibles();
+  var _tApp16;
+  return (_tApp16 = tApp) === null || _tApp16 === void 0 || (_tApp16 = _tApp16.manager) === null || _tApp16 === void 0 ? void 0 : _tApp16.getVisibles();
 };
 var getResizeLastUpdate = exports.getResizeLastUpdate = function getResizeLastUpdate() {
-  var _tApp16;
-  return (_tApp16 = tApp) === null || _tApp16 === void 0 ? void 0 : _tApp16.resizeLastUpdate;
+  var _tApp17;
+  return (_tApp17 = tApp) === null || _tApp17 === void 0 ? void 0 : _tApp17.resizeLastUpdate;
 };
 var getTModelById = exports.getTModelById = function getTModelById(id) {
   return App.tmodelIdMap[id];
@@ -335,6 +346,9 @@ var getDomTModelById = exports.getDomTModelById = function getDomTModelById(id)
 };
 window.t = window.t || getTModelById;
 var runApp = function runApp() {
+  if (tApp) {
+    return;
+  }
   exports.tApp = tApp = AppFn();
   tApp.init().start();
 };

package/build/DomInit.js

@@ -75,6 +75,14 @@ var DomInit = exports.DomInit = /*#__PURE__*/function () {
       if (elemTarget !== undefined) {
         var $dom = DomInit.normalizeElementTarget(elemTarget);
         if ($dom) {
+          var _tmodel$$dom;
+          if ((_tmodel$$dom = tmodel.$dom) !== null && _tmodel$$dom !== void 0 && _tmodel$$dom.exists()) {
+            if (tmodel.domState) {
+              DomInit.restoreDomState(tmodel.$dom.element, tmodel.domState);
+            } else {
+              tmodel.$dom.detach();
+            }
+          }
           tmodel.domState = DomInit.snapshotDomState($dom.element);
           tmodel.targets.$dom = $dom;
           tmodel.val('$dom', $dom);
@@ -110,6 +118,7 @@ var DomInit = exports.DomInit = /*#__PURE__*/function () {
           }
           $dom.attr('tgjs-oid', tmodel.oid);
           $dom.attr('tgjs', 'true');
+          tmodel.$dom = undefined;
         }
       }
     }

package/build/TModel.js

@@ -649,6 +649,15 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
       _DomInit.DomInit.mount(this, elemTarget);
       return this;
     }
+  }, {
+    key: "unmount",
+    value: function unmount() {
+      var _this$parent2;
+      if (this.hasDom() && this.val('sourceDom') && this.domState) {
+        _DomInit.DomInit.restoreDomState(this.$dom.element, this.domState);
+      }
+      (_this$parent2 = this.parent) === null || _this$parent2 === void 0 || _this$parent2.removeChild(this);
+    }
   }, {
     key: "hasDom",
     value: function hasDom() {

package/build/TModelManager.js

@@ -350,6 +350,9 @@ var TModelManager = exports.TModelManager = /*#__PURE__*/function () {
       try {
         for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
           var tmodel = _step5.value;
+          if (tmodel.val('sourceDom')) {
+            continue;
+          }
           this.deleteDom(tmodel);
         }
       } catch (err) {