@jinntec/fore 1.0.0-1 → 1.0.0-2

package/src/fx-fore.js

@@ -4,24 +4,34 @@ import './fx-model.js';
 import '@jinntec/jinn-toast';
 import { evaluateXPathToNodes, evaluateXPathToString } from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
+import { XPathUtil } from './xpath-util.js';
 
 /**
  * Main class for Fore.Outermost container element for each Fore application.
  *
- *
- *
  * Root element for Fore. Kicks off initialization and displays messages.
  *
  * fx-fore is the outermost container for each form. A form can have exactly one model
  * with arbitrary number of instances.
  *
- * Main responsiblities are initialization of model, update of UI (refresh) and global messaging
+ * Main responsiblities are initialization and updating of model and instances, update of UI (refresh) and global messaging.
+ *
+ *
  *
  * @ts-check
  */
 export class FxFore extends HTMLElement {
   static get properties() {
     return {
+      /**
+       * Setting this marker attribute will refresh the UI in a lazy fashion just updating elements being
+       * in viewport.
+       *
+       * this feature is still experimental and should be used with caution and extra testing
+       */
+      lazyRefresh: {
+        type: Boolean,
+      },
       model: {
         type: Object,
       },
@@ -31,6 +41,14 @@ export class FxFore extends HTMLElement {
     };
   }
 
+  /**
+   * attaches handlers for
+   *
+   * - `model-construct-done` to trigger the processing of the UI
+   * - `message` - to display a message triggered by an fx-message action
+   * - `error` - to display an error message
+   * - 'compute-exception`  - warn about circular dependencies in graph
+   */
   constructor() {
     super();
     this.model = {};
@@ -42,12 +60,11 @@ export class FxFore extends HTMLElement {
     });
 
     this.ready = false;
-
     this.storedTemplateExpressionByNode = new Map();
 
     const style = `
             :host {
-                display: block;
+                display: none;
                 height:auto;
                 padding:var(--model-element-padding);
                 font-family:Roboto, sans-serif;
@@ -56,6 +73,11 @@ export class FxFore extends HTMLElement {
             :host ::slotted(fx-model){
                 display:none;
             }
+            :host(.fx-ready){
+                animation: fadein .4s forwards;
+                display:block;
+            }
+
             #modalMessage .dialogActions{
                 text-align:center;
             }
@@ -75,7 +97,7 @@ export class FxFore extends HTMLElement {
               visibility: visible;
               opacity: 1;
             }
-
+            
             .popup {
               margin: 70px auto;
               background: #fff;
@@ -111,13 +133,21 @@ export class FxFore extends HTMLElement {
             .popup .close:focus{
                 outline:none;
             }
-
+            
             .popup .close:hover {
                 color: #06D85F;
             }
             #messageContent{
                 margin-top:40px;
             }
+            @keyframes fadein {
+              0% {
+                  opacity:0;
+              }
+              100% {
+                  opacity:1;
+              }
+            }
         `;
 
     const html = `
@@ -143,6 +173,16 @@ export class FxFore extends HTMLElement {
   }
 
   connectedCallback() {
+    this.lazyRefresh = this.hasAttribute('refresh-on-view');
+    if (this.lazyRefresh) {
+      const options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.3,
+      };
+      this.intersectionObserver = new IntersectionObserver(this.handleIntersect, options);
+    }
+
     const slot = this.shadowRoot.querySelector('slot');
     slot.addEventListener('slotchange', event => {
       const children = event.target.assignedElements();
@@ -155,18 +195,62 @@ export class FxFore extends HTMLElement {
         modelElement = generatedModel;
       }
       if (!modelElement.inited) {
-        console.log('########## FORE: kick off processing... ##########');
+        console.log(
+          `########## FORE: kick off processing for ... ${window.location.href} ##########`,
+        );
         modelElement.modelConstruct();
       }
       this.model = modelElement;
     });
   }
 
+  /**
+   * refreshes the UI by using IntersectionObserver API. This is the handler being called
+   * by the observer whenever elements come into / move out of viewport.
+   * @param entries
+   * @param observer
+   */
+  handleIntersect(entries, observer) {
+    console.time('refreshLazy');
+    entries.forEach(entry => {
+      const { target } = entry;
+
+      if (entry.isIntersecting) {
+        console.log('in view', entry);
+        // console.log('repeat in view entry', entry.target);
+        // const target = entry.target;
+        // if(target.hasAttribute('refresh-on-view')){
+        target.classList.add('loaded');
+        // }
+
+        // todo: too restrictive here? what if target is a usual html element? shouldn't it refresh downwards?
+        if (typeof target.refresh === 'function') {
+          console.log('refreshing target', target);
+          target.refresh(target, true);
+        } else {
+          console.log('refreshing children', target);
+          Fore.refreshChildren(target, true);
+        }
+      }
+    });
+    entries[0].target.getOwnerForm().dispatchEvent(new CustomEvent('refresh-done'));
+
+    console.timeEnd('refreshLazy');
+  }
+
   evaluateToNodes(xpath, context) {
     return evaluateXPathToNodes(xpath, context, this);
   }
 
-  disconnectedCallback() {}
+  disconnectedCallback() {
+    /*
+    this.removeEventListener('model-construct-done', this._handleModelConstructDone);
+    this.removeEventListener('message', this._displayMessage);
+    this.removeEventListener('error', this._displayError);
+    this.storedTemplateExpressionByNode=null;
+    this.shadowRoot = undefined;
+*/
+  }
 
   /**
    * refreshes the whole UI by visiting each bound element (having a 'ref' attribute) and applying the state of
@@ -176,16 +260,39 @@ export class FxFore extends HTMLElement {
    * AVT:
    *
    */
-  async refresh() {
+  async refresh(force) {
     // refresh () {
     console.group('### refresh');
-    // await this.updateComplete;
 
-    Fore.refreshChildren(this);
-    // this.dispatchEvent(new CustomEvent('refresh-done', {detail:'foo'}));
+    console.time('refresh');
+
+    /*
+    const changedModelItems = this.getModel().changed;
+    const graph = this.getModel().mainGraph;
+    let doRefresh = true;
+    changedModelItems.forEach(item => {
+      if(graph.hasNode(item.path)) {
+        const deps = graph.dependentsOf(item.path, false);
+        if (deps.length === 0) {
+          doRefresh=false;
+        }
+      }
+    });
+    this.getModel().changed = [];
+
+    if (!doRefresh) {
+      this.dispatchEvent(new CustomEvent('refresh-done'));
+      return ;
+    }
+*/
+    // ### refresh Fore UI elements
+    console.time('refreshChildren');
+    Fore.refreshChildren(this, true);
+    console.timeEnd('refreshChildren');
 
     // ### refresh template expressions
     this._updateTemplateExpressions();
+    console.timeEnd('refresh');
 
     console.groupEnd();
     console.log('### <<<<< dispatching refresh-done - end of UI update cycle >>>>>');
@@ -203,14 +310,18 @@ export class FxFore extends HTMLElement {
   _updateTemplateExpressions() {
     // Note the fact we're going over HTML here: therefore the `html` prefix.
     const search =
-      "(descendant-or-self::*/(text(), @*))[matches(.,'\\{.*\\}')] except descendant-or-self::xhtml:fx-model/descendant-or-self::node()/(., @*)";
+      "(descendant-or-self::*/(text(), @*))[matches(.,'\\{.*\\}')] except descendant-or-self::fx-model/descendant-or-self::node()/(., @*)";
 
     const tmplExpressions = evaluateXPathToNodes(search, this, this);
     console.log('template expressions found ', tmplExpressions);
 
+    if (!this.storedTemplateExpressions) {
+      this.storedTemplateExpressions = [];
+    }
+
     /*
-                storing expressions and their nodes for re-evaluation
-             */
+        storing expressions and their nodes for re-evaluation
+         */
     Array.from(tmplExpressions).forEach(node => {
       if (this.storedTemplateExpressionByNode.has(node)) {
         // If the node is already known, do not process it twice
@@ -268,13 +379,15 @@ export class FxFore extends HTMLElement {
         }
         // Templates are special: they use the namespace configuration from the place where they are
         // being defined
-
+        const instanceId = XPathUtil.getInstanceId(naked);
+        // console.log('target instance ', instanceId);
+        const inst = this.getModel().getInstance(instanceId);
         try {
-          const result = evaluateXPathToString(naked, inscope, node, null, namespaceContextNode);
+          const result = evaluateXPathToString(naked, inscope, node, null, inst);
 
           // console.log('result of eval ', result);
           const replaced = expr.replaceAll(match, result);
-          console.log('result of replacing ', replaced);
+          // console.log('result of replacing ', replaced);
 
           if (node.nodeType === Node.ATTRIBUTE_NODE) {
             const parent = node.ownerElement;
@@ -286,7 +399,7 @@ export class FxFore extends HTMLElement {
           }
 
           if (replaced.includes('{')) {
-            console.log('need to go next round');
+            // console.log('need to go next round');
 
             // todo: duplicated code here - see above
             naked = replaced.substring(1, replaced.length);
@@ -305,25 +418,28 @@ export class FxFore extends HTMLElement {
       return node.value;
     }
     if (node.nodeType === Node.TEXT_NODE) {
-      return node.textContent;
+      return node.textContent.trim();
     }
     return null;
   }
 
-  _refreshChildren() {
-    const uiElements = this.querySelectorAll('*');
-
-    uiElements.forEach(element => {
-      if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
-        element.refresh();
-      }
-    });
-  }
-
+  /**
+   * called when `model-construct-done` event is received to
+   * start initing of the UI.
+   *
+   * @private
+   */
   _handleModelConstructDone() {
     this._initUI();
   }
 
+  /**
+   * If there's no instance element found in a fx-model during init it will construct
+   * an instance from UI bindings.
+   *
+   * @returns {Promise<void>}
+   * @private
+   */
   async _lazyCreateInstance() {
     const model = this.querySelector('fx-model');
     if (model.instances.length === 0) {
@@ -422,11 +538,31 @@ export class FxFore extends HTMLElement {
         }
       */
 
+  /**
+   * Start the initialization of the UI by
+   *
+   * 1. checking if a instance needs to be generated
+   * 2. attaching lazy loading intersection observers if `refresh-on-view` attributes are found
+   * 3. doing a full refresh of the UI
+   *
+   * @returns {Promise<void>}
+   * @private
+   */
   async _initUI() {
     console.log('### _initUI()');
 
     await this._lazyCreateInstance();
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.3,
+    };
+
     await this.refresh();
+    // this.style.display='block'
+    this.classList.add('fx-ready');
+
     this.ready = true;
     console.log('### <<<<< dispatching ready >>>>>');
     console.log('########## modelItems: ', this.getModel().modelItems);
@@ -434,6 +570,19 @@ export class FxFore extends HTMLElement {
     this.dispatchEvent(new CustomEvent('ready', {}));
   }
 
+  registerLazyElement(element) {
+    if (this.intersectionObserver) {
+      // console.log('registerLazyElement',element);
+      this.intersectionObserver.observe(element);
+    }
+  }
+
+  unRegisterLazyElement(element) {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.unobserve(element);
+    }
+  }
+
   /**
    *
    * @returns {FxModel}

package/src/fx-instance.js

@@ -144,6 +144,7 @@ export class FxInstance extends HTMLElement {
 
   _createInstanceData() {
     if (this.type === 'xml') {
+      // const doc = new DOMParser().parseFromString('<data data-id="default"></data>', 'application/xml');
       const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
       this.instanceData = doc;
     }
@@ -167,7 +168,19 @@ export class FxInstance extends HTMLElement {
       .then(response => {
         const responseContentType = response.headers.get('content-type').toLowerCase();
         console.log('********** responseContentType *********', responseContentType);
-        if (responseContentType.startsWith('text/plain')) {
+        if (responseContentType.startsWith('text/html')) {
+          // const htmlResponse = response.text();
+          // return new DOMParser().parseFromString(htmlResponse, 'text/html');
+          // return response.text();
+          return response.text().then(result =>
+            // console.log('xml ********', result);
+            new DOMParser().parseFromString(result, 'text/html'),
+          );
+        }
+        if (
+          responseContentType.startsWith('text/plain') ||
+          responseContentType.startsWith('text/markdown')
+        ) {
           // console.log("********** inside  res plain *********");
           return response.text();
         }
@@ -176,16 +189,20 @@ export class FxInstance extends HTMLElement {
           return response.json();
         }
         if (responseContentType.startsWith('application/xml')) {
-          return response.text().then(result => {
-            console.log('xml ********', result);
-            return new DOMParser().parseFromString(result, 'application/xml');
-          });
+          return response.text().then(result =>
+            // console.log('xml ********', result);
+            new DOMParser().parseFromString(result, 'application/xml'),
+          );
         }
         return 'done';
       })
       .then(data => {
+        if (data.nodeType) {
+          this.instanceData = data;
+          console.log('instanceData loaded: ', this.instanceData);
+          return;
+        }
         this.instanceData = data;
-        console.log('instanceData loaded: ', this.instanceData);
       })
       .catch(error => {
         throw new Error(`failed loading data ${error}`);
@@ -218,6 +235,10 @@ export class FxInstance extends HTMLElement {
       // todo: move innerHTML out to shadowDOM (for later reset)
     } else if (this.type === 'json') {
       this.instanceData = JSON.parse(this.textContent);
+    } else if (this.type === 'html') {
+      this.instanceData = this.firstElementChild.children;
+    } else if (this.type === 'text') {
+      this.instanceData = this.textContent;
     } else {
       console.warn('unknow type for data ', this.type);
     }