@jinntec/fore 0.25.0 → 1.0.0-2

package/src/fx-fore.js

@@ -2,21 +2,36 @@ import { Fore } from './fore.js';
 import './fx-instance.js';
 import './fx-model.js';
 import '@jinntec/jinn-toast';
-import { evaluateXPathToNodes, evaluateTemplateExpression } from './xpath-evaluation.js';
+import { evaluateXPathToNodes, evaluateXPathToString } from './xpath-evaluation.js';
+import getInScopeContext from './getInScopeContext.js';
+import { XPathUtil } from './xpath-util.js';
 
 /**
- * Root element for forms. Kicks off initialization and displays messages.
+ * 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,
       },
@@ -26,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 = {};
@@ -37,10 +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;
@@ -49,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;
             }
@@ -111,12 +140,19 @@ export class FxFore extends HTMLElement {
             #messageContent{
                 margin-top:40px;
             }
-
-
+            @keyframes fadein {
+              0% {
+                  opacity:0;
+              }
+              100% {
+                  opacity:1;
+              }
+            }
         `;
 
     const html = `
            <jinn-toast id="message" gravity="bottom" position="left"></jinn-toast>
+           <jinn-toast id="error" text="error" duration="-1" data-class="error" close="true" position="left" gravity="bottom"></jinn-toast>
            <slot></slot>
            <div id="modalMessage" class="overlay">
                 <div class="popup">
@@ -137,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();
@@ -149,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
@@ -170,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 >>>>>');
@@ -189,7 +302,7 @@ export class FxFore extends HTMLElement {
   /**
    * entry point for processing of template expression enclosed in '{}' brackets.
    *
-   * Expressions are found with an XPath search. For each node an entry is added to storedTemplateExpressions array.
+   * Expressions are found with an XPath search. For each node an entry is added to the storedTemplateExpressionByNode map.
    *
    *
    * @private
@@ -197,9 +310,9 @@ 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, null);
+    const tmplExpressions = evaluateXPathToNodes(search, this, this);
     console.log('template expressions found ', tmplExpressions);
 
     if (!this.storedTemplateExpressions) {
@@ -210,28 +323,93 @@ export class FxFore extends HTMLElement {
         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
+        return;
+      }
       const expr = this._getTemplateExpression(node);
-      this.storedTemplateExpressions.push({
-        expr,
-        node,
-      });
-    });
 
-    this.storedTemplateExpressions.forEach(tmpl => {
-      this._processTemplateExpression(tmpl);
+      this.storedTemplateExpressionByNode.set(node, expr);
     });
 
-    console.log('stored template expressions ', this.storedTemplateExpressions);
+    // TODO: Should we clean up nodes that existed but are now gone?
+    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
   _processTemplateExpression(exprObj) {
-    console.log('processing template expression ', exprObj);
+    // console.log('processing template expression ', exprObj);
 
     const { expr } = exprObj;
     const { node } = exprObj;
     // console.log('expr ', expr);
-    evaluateTemplateExpression(expr, node, this);
+    this.evaluateTemplateExpression(expr, node, this);
+  }
+
+  /**
+   * evaluate a template expression (some expression in {} brackets) on a node (either text- or attribute node.
+   * @param expr the XPath to evaluate
+   * @param node the node which will get updated with evaluation result
+   * @param form the form element
+   */
+  evaluateTemplateExpression(expr, node) {
+    if (expr === '{}') return;
+    const matches = expr.match(/{[^}]*}/g);
+    const namespaceContextNode =
+      node.nodeType === node.TEXT_NODE ? node.parentNode : node.ownerElement;
+    if (matches) {
+      matches.forEach(match => {
+        // console.log('match ', match);
+        let naked = match.substring(1, match.length - 1);
+        const inscope = getInScopeContext(node, naked);
+        if (!inscope) {
+          const errNode =
+            node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ATTRIBUTE_NODE
+              ? node.parentNode
+              : node;
+          console.warn('no inscope context for ', errNode);
+          return;
+        }
+        // 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, inst);
+
+          // console.log('result of eval ', result);
+          const replaced = expr.replaceAll(match, result);
+          // console.log('result of replacing ', replaced);
+
+          if (node.nodeType === Node.ATTRIBUTE_NODE) {
+            const parent = node.ownerElement;
+
+            // parent.setAttribute(name, replaced);
+            parent.setAttribute(node.nodeName, replaced);
+          } else if (node.nodeType === Node.TEXT_NODE) {
+            node.textContent = replaced;
+          }
+
+          if (replaced.includes('{')) {
+            // console.log('need to go next round');
+
+            // todo: duplicated code here - see above
+            naked = replaced.substring(1, replaced.length);
+            this.evaluateTemplateExpression(replaced, node);
+          }
+        } catch (error) {
+          this.dispatchEvent(new CustomEvent('error', { detail: error }));
+        }
+      });
+    }
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -240,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) {
@@ -318,50 +499,70 @@ export class FxFore extends HTMLElement {
   }
 
   /*
-    _createStep(){
+        _createStep(){
 
-    }
-  */
+        }
+      */
 
   /*
-    _generateInstance(start, parent) {
-      if (start.hasAttribute('ref')) {
-        const ref = start.getAttribute('ref');
+        _generateInstance(start, parent) {
+          if (start.hasAttribute('ref')) {
+            const ref = start.getAttribute('ref');
 
-        if(ref.includes('/')){
-          console.log('complex path to create ', ref);
-          const steps = ref.split('/');
-          steps.forEach(step => {
-            console.log('step ', step);
+            if(ref.includes('/')){
+              console.log('complex path to create ', ref);
+              const steps = ref.split('/');
+              steps.forEach(step => {
+                console.log('step ', step);
 
 
-          });
-        }
-
-        // const generated = document.createElement(ref);
-        const generated = parent.ownerDocument.createElement(ref);
-        if (start.children.length === 0) {
-          generated.textContent = start.textContent;
-        }
-        parent.appendChild(generated);
-        parent = generated;
-      }
+              });
+            }
 
-      if (start.hasChildNodes()) {
-        const list = start.children;
-        for (let i = 0; i < list.length; i += 1) {
-          this._generateInstance(list[i], parent);
+            // const generated = document.createElement(ref);
+            const generated = parent.ownerDocument.createElement(ref);
+            if (start.children.length === 0) {
+              generated.textContent = start.textContent;
+            }
+            parent.appendChild(generated);
+            parent = generated;
+          }
+
+          if (start.hasChildNodes()) {
+            const list = start.children;
+            for (let i = 0; i < list.length; i += 1) {
+              this._generateInstance(list[i], parent);
+            }
+          }
+          return parent;
         }
-      }
-      return parent;
-    }
-  */
+      */
 
+  /**
+   * 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);
@@ -369,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}
@@ -386,7 +600,9 @@ export class FxFore extends HTMLElement {
   _displayError(e) {
     // const { error } = e.detail;
     const msg = e.detail.message;
-    this._showMessage('modal', msg);
+    // this._showMessage('modal', msg);
+    const toast = this.shadowRoot.querySelector('#error');
+    toast.showToast(msg);
   }
 
   _showMessage(level, msg) {

package/src/fx-header.js

@@ -0,0 +1,20 @@
+import { foreElementMixin } from './ForeElementMixin.js';
+
+export class FxHeader extends foreElementMixin(HTMLElement) {
+  constructor() {
+    super();
+    this.style.display = 'none';
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = ``;
+
+    if (!this.hasAttribute('name')) {
+      throw new Error('required attribute "name" missing');
+    }
+    this.name = this.getAttribute('name');
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = ``;
+  }
+}
+customElements.define('fx-header', FxHeader);

package/src/fx-instance.js

@@ -1,3 +1,4 @@
+import { Fore } from './fore.js';
 import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
 
 /**
@@ -82,9 +83,20 @@ export class FxInstance extends HTMLElement {
    * @returns {Document | T | any}
    */
   getInstanceData() {
+    if (!this.instanceData) {
+      this._createInstanceData();
+    }
     return this.instanceData;
   }
 
+  setInstanceData(data) {
+    if (!data) {
+      this._createInstanceData();
+      return;
+    }
+    this.instanceData = data;
+  }
+
   /**
    * return the default context (root node of respective instance) for XPath evalution.
    *
@@ -121,7 +133,7 @@ export class FxInstance extends HTMLElement {
         root.appendChild(newNode);
       }
       this.instanceData = doc;
-      this.instanceData.firstElementChild.setAttribute('id', this.id);
+      // this.instanceData.firstElementChild.setAttribute('id', this.id);
       // resolve('done');
     } else if (this.src) {
       await this._loadData();
@@ -130,13 +142,25 @@ 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;
+    }
+    if (this.type === 'json') {
+      this.instanceData = {};
+    }
+  }
+
   async _loadData() {
     const url = `${this.src}`;
-    const contentType = this._getContentType();
+    const contentType = Fore.getContentType(this, 'get');
+
     await fetch(url, {
       method: 'GET',
       mode: 'cors',
-      credentials: 'same-origin',
+      credentials: 'include',
       headers: {
         'Content-Type': contentType,
       },
@@ -144,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();
         }
@@ -153,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}`);
@@ -191,10 +231,14 @@ export class FxInstance extends HTMLElement {
       // console.log('instanceData ', this.instanceData.firstElementChild);
 
       console.log('fx-instance data: ', this.instanceData);
-      this.instanceData.firstElementChild.setAttribute('id', this.id);
+      // this.instanceData.firstElementChild.setAttribute('id', this.id);
       // 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);
     }