@jinntec/fore 1.0.0-1 → 1.0.0-4

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;
             }
@@ -118,6 +140,14 @@ export class FxFore extends HTMLElement {
             #messageContent{
                 margin-top:40px;
             }
+            @keyframes fadein {
+              0% {
+                  opacity:0;
+              }
+              100% {
+                  opacity:1;
+              }
+            }
         `;
 
     const html = `
@@ -140,9 +170,29 @@ export class FxFore extends HTMLElement {
             </style>
             ${html}
         `;
+
+    this.toRefresh = [];
+    this.initialRun = true;
+    this.someInstanceDataStructureChanged = false;
   }
 
   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);
+    }
+
+    this.src = this.hasAttribute('src')? this.getAttribute('src'):null;
+    if(this.src){
+      this._loadFromSrc();
+      return ;
+    }
+
     const slot = this.shadowRoot.querySelector('slot');
     slot.addEventListener('slotchange', event => {
       const children = event.target.assignedElements();
@@ -155,18 +205,123 @@ 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} ##########`,
+        );
+        if(this.src){
+          console.log('########## FORE: loaded from ... ', this.src, '##########');
+        }
         modelElement.modelConstruct();
       }
       this.model = modelElement;
     });
+    this.addEventListener('path-mutated', (e) =>{
+      console.log('path-mutated event received', e.detail.path, e.detail.index);
+      this.someInstanceDataStructureChanged = true;
+    });
+  }
+
+
+  addToRefresh(modelItem){
+    const found = this.toRefresh.find(mi => mi.path === modelItem.path );
+    if(!found){
+      this.toRefresh.push(modelItem);
+    }
+  }
+
+  /**
+   * loads a Fore from an URL given by `src`.
+   *
+   * Will extract the `fx-fore` element from that target file and use and replace current `fx-fore` element with the loaded one.
+   * @private
+   */
+  _loadFromSrc() {
+    console.log('########## loading Fore from ',this.src ,'##########');
+    fetch(this.src, {
+      method: 'GET',
+      mode: 'cors',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'text/html',
+      },
+    })
+        .then(response => {
+          const responseContentType = response.headers.get('content-type').toLowerCase();
+          console.log('********** responseContentType *********', responseContentType);
+          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'),
+            );
+          }
+          return 'done';
+        })
+        .then(data => {
+          // const theFore = fxEvaluateXPathToFirstNode('//fx-fore', data.firstElementChild);
+          const theFore = data.querySelector('fx-fore');
+
+          // console.log('thefore', theFore)
+          if(!theFore){
+            this.dispatchEvent(new CustomEvent('error',{detail:{message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`}}));
+          }
+          theFore.setAttribute('from-src', this.src);
+          this.replaceWith(theFore);
+        })
+        .catch(error => {
+          this.dispatchEvent(new CustomEvent('error',{detail:{message: `'${this.src}' not found or does not contain Fore element.`}}));
+        });
+  }
+
+  /**
+   * 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 +331,63 @@ 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');
+
+    // ### refresh Fore UI elements
+    console.time('refreshChildren');
+    console.log('toRefresh',this.toRefresh);
+
+    if(!this.initialRun && this.toRefresh.length !== 0){
+      let needsRefresh = false;
+
+      // ### after recalculation the changed modelItems are copied to 'toRefresh' array for processing
+      this.toRefresh.forEach(modelItem => {
+        // check if modelItem has boundControls - if so, call refresh() for each of them
+        const controlsToRefresh = modelItem.boundControls;
+        if(controlsToRefresh){
+          controlsToRefresh.forEach(ctrl => {
+            ctrl.refresh();
+          });
+        }
+
+        // ### check if other controls depend on current modelItem
+        const mainGraph = this.getModel().mainGraph;
+        if(mainGraph && mainGraph.hasNode(modelItem.path)){
+          const deps = this.getModel().mainGraph.dependentsOf(modelItem.path, false);
+          // ### iterate dependant modelItems and refresh all their boundControls
+          if(deps.length !== 0){
+            deps.forEach(dep => {
+              // ### if changed modelItem has a 'facet' path we use the basePath that is the locationPath without facet name
+              const basePath = XPathUtil.getBasePath(dep);
+              const modelItemOfDep = this.getModel().modelItems.find(mip => mip.path === basePath);
+              // ### refresh all boundControls
+              modelItemOfDep.boundControls.forEach(control =>{control.refresh()});
+            });
+            needsRefresh = true;
+          }
+        }
+      });
+      this.toRefresh = [];
+      if(!needsRefresh){
+        console.log('skipping refresh - no dependants');
+      }
+    }else{
+      Fore.refreshChildren(this, true);
+      console.timeEnd('refreshChildren');
+    }
 
     // ### refresh template expressions
-    this._updateTemplateExpressions();
+    if(this.initialRun || this.someInstanceDataStructureChanged){
+      this._updateTemplateExpressions();
+      this.someInstanceDataStructureChanged = false; //reset
+    }
+    this._processTemplateExpressions();
+
+    console.timeEnd('refresh');
 
     console.groupEnd();
     console.log('### <<<<< dispatching refresh-done - end of UI update cycle >>>>>');
@@ -203,14 +405,20 @@ 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 = [];
+    }
+
+    console.log('######### storedTemplateExpressions', this.storedTemplateExpressions.length);
+
     /*
-                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
@@ -218,21 +426,26 @@ export class FxFore extends HTMLElement {
       }
       const expr = this._getTemplateExpression(node);
 
+      // console.log('storedTemplateExpressionByNode', this.storedTemplateExpressionByNode);
       this.storedTemplateExpressionByNode.set(node, expr);
     });
+    console.log('stored template expressions ', this.storedTemplateExpressionByNode);
 
     // TODO: Should we clean up nodes that existed but are now gone?
+    this._processTemplateExpressions();
+
+  }
+
+  _processTemplateExpressions() {
     for (const node of this.storedTemplateExpressionByNode.keys()) {
       this._processTemplateExpression({
         node,
         expr: this.storedTemplateExpressionByNode.get(node),
       });
     }
-
-    console.log('stored template expressions ', this.storedTemplateExpressionByNode);
   }
 
-  // eslint-disable-next-line class-methods-use-this
+// eslint-disable-next-line class-methods-use-this
   _processTemplateExpression(exprObj) {
     // console.log('processing template expression ', exprObj);
 
@@ -268,13 +481,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 +501,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 +520,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,18 +640,64 @@ 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();
+
+    console.log('registering variables!');
+    const variables = new Map();
+    (function registerVariables(node) {
+      for (const child of node.children) {
+        if ('setInScopeVariables' in child) {
+          child.setInScopeVariables(variables);
+        }
+        registerVariables(child);
+      }
+    })(this);
+    console.log('Found variables:', variables);
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.3,
+    };
+
     await this.refresh();
+    // this.style.display='block'
+    this.classList.add('fx-ready');
+
     this.ready = true;
+    this.initialRun = false;
     console.log('### <<<<< dispatching ready >>>>>');
     console.log('########## modelItems: ', this.getModel().modelItems);
     console.log('########## FORE: form fully initialized... ##########');
     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);
     }