@jinntec/fore 1.0.0-5 → 1.0.0

package/src/fx-bind.js

@@ -1,5 +1,6 @@
 import { DependencyNotifyingDomFacade } from './DependencyNotifyingDomFacade.js';
 import { foreElementMixin } from './ForeElementMixin.js';
+import { Fore } from './fore.js';
 import { ModelItem } from './modelitem.js';
 import {
   evaluateXPathToBoolean,
@@ -32,98 +33,8 @@ export class FxBind extends foreElementMixin(HTMLElement) {
 
   static TYPE_DEFAULT = 'xs:string';
 
-  /*
-    static get styles() {
-        return css`
-            :host {
-                display: none;
-            }
-        `;
-    }
-*/
-
-  /*
-    static get properties() {
-        return {
-            ...super.properties,
-
-            /!**
-             * allows to calculate a value. This value will become readonly.
-             *!/
-            calculate: {
-                type: String
-            },
-            contextNode:{
-                type:Object
-            },
-            /!**
-             * arbitrary XPath resolving to xs:boolean - defaults to 'true()'
-             *!/
-            constraint: {
-                type: String
-            },
-            /!**
-             * id of this bind
-             *!/
-            id:{
-                type:String
-            },
-            /!**
-             * the nodeset the bind is referring to by it's binding expression (ref attribute)
-             *!/
-            nodeset: {
-                type: Array
-            },
-            /!**
-             * the owning model of this bind
-             *!/
-            model:{
-                type:Object
-            },
-            /!**
-             * XPath statement resolving to xs:boolean to switch between readonly and readwrite mode - defaults to 'false()'
-             *!/
-            readonly: {
-                type: String
-            },
-            /!**
-             * the XPath binding expression of this bind
-             *!/
-            ref: {
-                type: String
-            },
-            /!**
-             * XPath statement resolving to xs:boolean to switch between relevant and non-relevant mode - defaults to 'true()'
-             *!/
-            relevant: {
-                type: String
-            },
-            /!**
-             * XPath statement resolving to xs:boolean to switch between required and optional - defaults to 'false'.
-             *!/
-            required: {
-                type: String
-            },
-            /!**
-             * XPath statement
-             *!/
-            type: {
-                type: String
-            }
-        };
-    }
-*/
-
   constructor() {
     super();
-    // this.id='';
-    // this.ref = '';
-    // this.readonly = 'false()';
-    // this.required = 'false()';
-    // this.relevant = 'true()';
-    // this.constraint = 'true()';
-    // this.type = 'xs:string';
-    // this.calculate = '';
     this.nodeset = [];
     this.model = {};
     this.contextNode = {};
@@ -165,26 +76,23 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     this._processChildren(model);
   }
 
-  /*
-    //todo: certainly not ideal to rely on duplicating instance id on instance document - better way later ;)
-    static getPath(node){
-        let path = fx.evaluateXPath('path()',node);
-        const instanceId = node.ownerDocument.firstElementChild.getAttribute('id');
-        if(instanceId !== 'default'){
-            return '#' + instanceId + FxBind.shortenPath(path);
-        }else {
-            return FxBind.shortenPath(path);
-        }
-
-    }
-*/
-
   _buildBindGraph() {
     if (this.bindType === 'xml') {
       this.nodeset.forEach(node => {
         const path = XPathUtil.getPath(node);
         this.model.mainGraph.addNode(path, node);
 
+        /* ### catching references in the 'ref' itself...
+        todo: investigate cases where 'ref' attributes use predicates pointing to other nodes. These would not be handled
+        in current implementation.
+
+        General question: are there valid use-cases for using a 'filter' expression to narrow the nodeset
+          where to apply constraints? Guess yes and if it's 'just' for reducing the amount of necessary modelItem objects.
+
+
+        */
+        // const foreignRefs = this.getReferences(this.ref);
+
         if (this.calculate) {
           this.model.mainGraph.addNode(`${path}:calculate`, node);
           // Calculated values are a dependency of the model item.
@@ -271,14 +179,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     });
   }
 
-  /*
-    render() {
-        return html`
-             <slot></slot>
-        `;
-    }
-*/
-
   getAlert() {
     if (this.hasAttribute('alert')) {
       return this.getAttribute('alert');
@@ -290,33 +190,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     return null;
   }
 
-  /*
-        firstUpdated(_changedProperties) {
-            super.firstUpdated(_changedProperties);
-        }
-    */
-
-  /*
-  namespaceResolver(prefix) {
-    // TODO: Do proper namespace resolving. Look at the ancestry / namespacesInScope of the declaration
-
-    /!**
-     * for (let ancestor = this; ancestor; ancestor = ancestor.parentNode) {
-     * 	if (ancestor.getAttribute(`xmlns:${prefix}`)) {
-     *   // Return value
-     *  }
-     * }
-     *!/
-
-    // console.log('namespaceResolver  prefix', prefix);
-    const ns = {
-      xhtml: 'http://www.w3.org/1999/xhtml',
-      // ''    : Fore.XFORMS_NAMESPACE_URI
-    };
-    return ns[prefix] || null;
-  }
-*/
-
   /**
    * overwrites
    */
@@ -361,11 +234,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
   _createModelItems() {
     // console.log('#### ', thi+s.nodeset);
 
-    /*
-                if(XPathUtil.isSelfReference(this.ref)){
-                    return;
-                }
-        */
     if (Array.isArray(this.nodeset)) {
       // todo - iterate and create
       // console.log('################################################ ', this.nodeset);
@@ -380,54 +248,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     }
   }
 
-  static lazyCreateModelitems(model, ref, nodeset) {
-    if (Array.isArray(nodeset)) {
-      Array.from(nodeset).forEach(n => {
-        FxBind.lazyCreateModelItem(model, ref, n);
-      });
-    } else {
-      FxBind.lazyCreateModelItem(model, ref, nodeset);
-    }
-  }
-
-  /*
-    static lazyCreateModelItem(model,ref,node){
-        console.log('lazyCreateModelItem ', node);
-
-        let mItem = {};
-        let targetNode = {};
-        if(node === null) return null;
-        if(node.nodeType === node.TEXT_NODE){
-            // const parent = node.parentNode;
-            // console.log('PARENT ', parent);
-            targetNode = node.parentNode;
-        }else {
-            targetNode = node;
-        }
-
-        // const path = fx.evaluateXPath('path()',node);
-        const path = FxBind.getPath(node);
-
-        // const path = Fore.evaluateXPath ('path()', node, this, Fore.namespaceResolver) ;
-
-        // ### intializing ModelItem with default values (as there is no <fx-bind> matching for given ref)
-        const mi = new ModelItem(path,
-            ref,
-            FxBind.READONLY_DEFAULT,
-            FxBind.RELEVANT_DEFAULT,
-            FxBind.REQUIRED_DEFAULT,
-            FxBind.CONSTRAINT_DEFAULT,
-            FxBind.TYPE_DEFAULT,
-            targetNode,
-            this);
-
-
-        // console.log('new ModelItem is instanceof ModelItem ', mi instanceof ModelItem);
-        model.registerModelItem(mi);
-        return mi;
-    }
-*/
-
   /**
    * creates a ModelItem for given instance node.
    *
@@ -452,7 +272,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
         if bind is the dot expression we use the modelitem of the parent
          */
     if (XPathUtil.isSelfReference(this.ref)) {
-      const parentBoundElement = this.parentElement.closest('fx-bind[ref]');
+      const parentBoundElement = Fore.getClosest('fx-bind[ref]', this.parentElement);
       console.log('parent bound element ', parentBoundElement);
 
       if (parentBoundElement) {
@@ -514,16 +334,34 @@ export class FxBind extends foreElementMixin(HTMLElement) {
    */
   _getReferencesForProperty(propertyExpr) {
     if (propertyExpr) {
-      const touchedNodes = new Set();
-      const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
-      this.nodeset.forEach(node => {
-        evaluateXPathToString(propertyExpr, node, this, domFacade);
-      });
+      return this.getReferences(propertyExpr);
+    }
+    return [];
+  }
+
+  getReferences(propertyExpr) {
+    const touchedNodes = new Set();
+    const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
+    this.nodeset.forEach(node => {
+      evaluateXPathToString(propertyExpr, node, this, domFacade);
+    });
+    return Array.from(touchedNodes.values());
+  }
+
+  /*
+    static getReferencesForRef(ref,nodeset){
+      if (ref && nodeset) {
+        const touchedNodes = new Set();
+        const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
+        nodeset.forEach(node => {
+          evaluateXPathToString(ref, node, this, domFacade);
+        });
 
       return Array.from(touchedNodes.values());
     }
     return [];
   }
+  */
 
   _initBooleanModelItemProperty(property, node) {
     // evaluate expression to boolean
@@ -562,4 +400,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     return 'default';
   }
 }
-customElements.define('fx-bind', FxBind);
+if (!customElements.get('fx-bind')) {
+  customElements.define('fx-bind', FxBind);
+}

package/src/fx-fore.js

@@ -16,7 +16,10 @@ import { XPathUtil } from './xpath-util.js';
  *
  * Main responsiblities are initialization and updating of model and instances, update of UI (refresh) and global messaging.
  *
- *
+ * @event compute-exception - dispatched in case the dependency graph is cirular
+ * @event refresh-done - dispatched after a refresh() run
+ * @event ready - dispatched after Fore has fully been initialized
+ * @event error - dispatches error when template expression fails to evaluate
  *
  * @ts-check
  */
@@ -73,10 +76,10 @@ export class FxFore extends HTMLElement {
             :host ::slotted(fx-model){
                 display:none;
             }
-            :host(.fx-ready){
-                animation: fadein .4s forwards;
-                display:block;
-            }
+            // :host(.fx-ready){
+            //     animation: fadein .4s forwards;
+            //     display:block;
+            // }
 
             #modalMessage .dialogActions{
                 text-align:center;
@@ -178,6 +181,25 @@ export class FxFore extends HTMLElement {
   }
 
   connectedCallback() {
+    /*
+    document.addEventListener('ready', (e) =>{
+      if(e.target !== this){
+        // e.preventDefault();
+        console.log('>>> e', e);
+        console.log('event this', this);
+        // console.log('event eventPhase', e.eventPhase);
+        // console.log('event cancelable', e.cancelable);
+        console.log('event target', e.target);
+        console.log('event composed', e.composedPath());
+        console.log('<<< event stopping');
+        e.stopPropagation();
+      }else{
+        console.log('event proceed', this);
+      }
+      // e.stopImmediatePropagation();
+    },true);
+*/
+
     this.lazyRefresh = this.hasAttribute('refresh-on-view');
     if (this.lazyRefresh) {
       const options = {
@@ -188,10 +210,10 @@ export class FxFore extends HTMLElement {
       this.intersectionObserver = new IntersectionObserver(this.handleIntersect, options);
     }
 
-    this.src = this.hasAttribute('src')? this.getAttribute('src'):null;
-    if(this.src){
+    this.src = this.hasAttribute('src') ? this.getAttribute('src') : null;
+    if (this.src) {
       this._loadFromSrc();
-      return ;
+      return;
     }
 
     const slot = this.shadowRoot.querySelector('slot');
@@ -201,7 +223,7 @@ export class FxFore extends HTMLElement {
         modelElem => modelElem.nodeName.toUpperCase() === 'FX-MODEL',
       );
       if (!modelElement) {
-        const generatedModel = document.createElement('FX-model');
+        const generatedModel = document.createElement('fx-model');
         this.appendChild(generatedModel);
         modelElement = generatedModel;
       }
@@ -209,23 +231,22 @@ export class FxFore extends HTMLElement {
         console.log(
           `########## FORE: kick off processing for ... ${window.location.href} ##########`,
         );
-        if(this.src){
+        if (this.src) {
           console.log('########## FORE: loaded from ... ', this.src, '##########');
         }
         modelElement.modelConstruct();
       }
       this.model = modelElement;
     });
-    this.addEventListener('path-mutated', (e) =>{
+    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){
+  addToRefresh(modelItem) {
+    const found = this.toRefresh.find(mi => mi.path === modelItem.path);
+    if (!found) {
       this.toRefresh.push(modelItem);
     }
   }
@@ -237,7 +258,7 @@ export class FxFore extends HTMLElement {
    * @private
    */
   _loadFromSrc() {
-    console.log('########## loading Fore from ',this.src ,'##########');
+    console.log('########## loading Fore from ', this.src, '##########');
     fetch(this.src, {
       method: 'GET',
       mode: 'cors',
@@ -246,34 +267,40 @@ export class FxFore extends HTMLElement {
         '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.`}}));
+      .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) {
+          Fore.dispatchEvent(this, '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(() => {
+        Fore.dispatch(this, 'error', {
+          message: `'${this.src}' not found or does not contain Fore element.`,
         });
+      });
   }
 
   /**
@@ -332,7 +359,7 @@ export class FxFore extends HTMLElement {
    * AVT:
    *
    */
-  async refresh(force) {
+  async refresh() {
     // refresh () {
     console.group('### refresh');
 
@@ -340,58 +367,60 @@ export class FxFore extends HTMLElement {
 
     // ### refresh Fore UI elements
     console.time('refreshChildren');
-    console.log('toRefresh',this.toRefresh);
+    console.log('toRefresh', this.toRefresh);
 
-    if(!this.initialRun && this.toRefresh.length !== 0){
+    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){
+        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 { mainGraph } = this.getModel();
+        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){
+          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()});
+              modelItemOfDep.boundControls.forEach(control => {
+                control.refresh();
+              });
             });
             needsRefresh = true;
           }
         }
       });
       this.toRefresh = [];
-      if(!needsRefresh){
+      if (!needsRefresh) {
         console.log('skipping refresh - no dependants');
       }
-    }else{
+    } else {
       Fore.refreshChildren(this, true);
       console.timeEnd('refreshChildren');
     }
 
     // ### refresh template expressions
-    if(this.initialRun || this.someInstanceDataStructureChanged){
+    if (this.initialRun || this.someInstanceDataStructureChanged) {
       this._updateTemplateExpressions();
-      this.someInstanceDataStructureChanged = false; //reset
+      this.someInstanceDataStructureChanged = false; // reset
     }
     this._processTemplateExpressions();
 
     console.timeEnd('refresh');
 
     console.groupEnd();
-    console.log('### <<<<< dispatching refresh-done - end of UI update cycle >>>>>');
+    // console.log('### <<<<< dispatching refresh-done - end of UI update cycle >>>>>');
     this.dispatchEvent(new CustomEvent('refresh-done'));
   }
 
@@ -409,7 +438,7 @@ export class FxFore extends HTMLElement {
       "(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);
+    // console.log('template expressions found ', tmplExpressions);
 
     if (!this.storedTemplateExpressions) {
       this.storedTemplateExpressions = [];
@@ -434,7 +463,6 @@ export class FxFore extends HTMLElement {
 
     // TODO: Should we clean up nodes that existed but are now gone?
     this._processTemplateExpressions();
-
   }
 
   _processTemplateExpressions() {
@@ -446,7 +474,7 @@ export class FxFore extends HTMLElement {
     }
   }
 
-// eslint-disable-next-line class-methods-use-this
+  // eslint-disable-next-line class-methods-use-this
   _processTemplateExpression(exprObj) {
     // console.log('processing template expression ', exprObj);
 
@@ -465,8 +493,6 @@ export class FxFore extends HTMLElement {
   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);
@@ -509,6 +535,7 @@ export class FxFore extends HTMLElement {
             this.evaluateTemplateExpression(replaced, node);
           }
         } catch (error) {
+          // console.log(error);
           this.dispatchEvent(new CustomEvent('error', { detail: error }));
         }
       });
@@ -653,10 +680,10 @@ export class FxFore extends HTMLElement {
    */
   async _initUI() {
     console.log('### _initUI()');
-
+    if (!this.initialRun) return;
     await this._lazyCreateInstance();
 
-    console.log('registering variables!');
+    // console.log('registering variables!');
     const variables = new Map();
     (function registerVariables(node) {
       for (const child of node.children) {
@@ -668,11 +695,13 @@ export class FxFore extends HTMLElement {
     })(this);
     console.log('Found variables:', variables);
 
+    /*
     const options = {
       root: null,
       rootMargin: '0px',
       threshold: 0.3,
     };
+*/
 
     await this.refresh();
     // this.style.display='block'
@@ -681,10 +710,10 @@ export class FxFore extends HTMLElement {
 
     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', {}));
+    console.log('### >>>>> dispatching ready >>>>>', this);
+    console.log('modelItems: ', this.getModel().modelItems);
+    console.log('### <<<<< FORE: form fully initialized...', this);
+    Fore.dispatch(this, 'ready', {});
   }
 
   registerLazyElement(element) {
@@ -709,9 +738,11 @@ export class FxFore extends HTMLElement {
   }
 
   _displayMessage(e) {
+    // console.log('_displayMessage',e);
     const { level } = e.detail;
     const msg = e.detail.message;
     this._showMessage(level, msg);
+    e.stopPropagation();
   }
 
   _displayError(e) {
@@ -740,4 +771,6 @@ export class FxFore extends HTMLElement {
   }
 }
 
-customElements.define('fx-fore', FxFore);
+if (!customElements.get('fx-fore')) {
+  customElements.define('fx-fore', FxFore);
+}

package/src/fx-header.js

@@ -17,4 +17,6 @@ export class FxHeader extends foreElementMixin(HTMLElement) {
     this.shadowRoot.innerHTML = ``;
   }
 }
-customElements.define('fx-header', FxHeader);
+if (!customElements.get('fx-header')) {
+  customElements.define('fx-header', FxHeader);
+}