@jinntec/fore 1.0.0-3 → 1.0.0

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;
@@ -152,6 +155,7 @@ export class FxFore extends HTMLElement {
 
     const html = `
            <jinn-toast id="message" gravity="bottom" position="left"></jinn-toast>
+           <jinn-toast id="sticky" gravity="bottom" position="left" duration="-1" close="true" data-class="sticky-message"></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">
@@ -177,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 = {
@@ -187,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');
@@ -200,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;
       }
@@ -208,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);
     }
   }
@@ -236,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',
@@ -245,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.`,
         });
+      });
   }
 
   /**
@@ -331,7 +359,7 @@ export class FxFore extends HTMLElement {
    * AVT:
    *
    */
-  async refresh(force) {
+  async refresh() {
     // refresh () {
     console.group('### refresh');
 
@@ -339,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'));
   }
 
@@ -408,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 = [];
@@ -433,7 +463,6 @@ export class FxFore extends HTMLElement {
 
     // TODO: Should we clean up nodes that existed but are now gone?
     this._processTemplateExpressions();
-
   }
 
   _processTemplateExpressions() {
@@ -445,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);
 
@@ -464,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);
@@ -508,6 +535,7 @@ export class FxFore extends HTMLElement {
             this.evaluateTemplateExpression(replaced, node);
           }
         } catch (error) {
+          // console.log(error);
           this.dispatchEvent(new CustomEvent('error', { detail: error }));
         }
       });
@@ -652,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) {
@@ -667,22 +695,25 @@ 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'
     this.classList.add('fx-ready');
+    document.body.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', {}));
+    console.log('### >>>>> dispatching ready >>>>>', this);
+    console.log('modelItems: ', this.getModel().modelItems);
+    console.log('### <<<<< FORE: form fully initialized...', this);
+    Fore.dispatch(this, 'ready', {});
   }
 
   registerLazyElement(element) {
@@ -707,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) {
@@ -728,9 +761,9 @@ export class FxFore extends HTMLElement {
       this.shadowRoot.getElementById('messageContent').innerText = msg;
       // this.shadowRoot.getElementById('modalMessage').open();
       this.shadowRoot.getElementById('modalMessage').classList.add('show');
-    } else if (level === 'modeless') {
+    } else if (level === 'sticky') {
       // const notification = this.$.modeless;
-      this.shadowRoot.querySelector('#message').showToast(msg);
+      this.shadowRoot.querySelector('#sticky').showToast(msg);
     } else {
       const toast = this.shadowRoot.querySelector('#message');
       toast.showToast(msg);
@@ -738,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);
+}

package/src/fx-instance.js

@@ -166,6 +166,12 @@ export class FxInstance extends HTMLElement {
       },
     })
       .then(response => {
+        const { status } = response;
+        if (status >= 400) {
+          console.log('response status', status);
+          alert(`response status:  ${status} - failed to load data for '${this.src}' - stopping.`);
+          throw new Error(`failed to load data - status: ${status}`);
+        }
         const responseContentType = response.headers.get('content-type').toLowerCase();
         console.log('********** responseContentType *********', responseContentType);
         if (responseContentType.startsWith('text/html')) {
@@ -257,4 +263,6 @@ export class FxInstance extends HTMLElement {
     console.log('_handleResponse ', loader.lastError);
   }
 }
-customElements.define('fx-instance', FxInstance);
+if (!customElements.get('fx-instance')) {
+  customElements.define('fx-instance', FxInstance);
+}

package/src/fx-model.js

@@ -35,11 +35,11 @@ export class FxModel extends HTMLElement {
             <slot></slot>
         `;
 
-    this.addEventListener('model-construct-done', e => {
-      this.modelConstructed = true;
-      // console.log('model-construct-done fired ', this.modelConstructed);
-      console.log('model-construct-done fired ', e.detail.model.instances);
-    });
+    this.addEventListener('model-construct-done', () => {
+        this.modelConstructed = true;
+        // console.log('model-construct-done fired ', this.modelConstructed);
+        // console.log('model-construct-done fired ', e.detail.model.instances);
+    },{ once: true });
 
     this.skipUpdate = false;
   }
@@ -95,8 +95,15 @@ export class FxModel extends HTMLElement {
    *
    */
   modelConstruct() {
-    console.log('### <<<<< dispatching model-construct >>>>>');
-    this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
+    // console.log('### <<<<< dispatching model-construct >>>>>');
+    // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
+    this.dispatchEvent(
+      new CustomEvent('model-construct', {
+        composed: false,
+        bubbles: true,
+        detail: { model: this },
+      }),
+    );
 
     console.time('instance-loading');
     const instances = this.querySelectorAll('fx-instance');
@@ -109,14 +116,14 @@ export class FxModel extends HTMLElement {
 
       Promise.all(promises).then(() => {
         this.instances = Array.from(instances);
-        console.log('_modelConstruct this.instances ', this.instances);
+        // console.log('_modelConstruct this.instances ', this.instances);
         this.updateModel();
         this.inited = true;
 
-        console.log('### <<<<< dispatching model-construct-done >>>>>');
+        // console.log('### <<<<< dispatching model-construct-done >>>>>');
         this.dispatchEvent(
           new CustomEvent('model-construct-done', {
-            composed: true,
+            composed: false,
             bubbles: true,
             detail: { model: this },
           }),
@@ -127,7 +134,7 @@ export class FxModel extends HTMLElement {
       // ### if there's no instance one will created
       this.dispatchEvent(
         new CustomEvent('model-construct-done', {
-          composed: true,
+          composed: false,
           bubbles: true,
           detail: { model: this },
         }),
@@ -146,32 +153,32 @@ export class FxModel extends HTMLElement {
    * update action triggering the update cycle
    */
   updateModel() {
-    console.time('updateModel');
+    // console.time('updateModel');
     this.rebuild();
-    if(this.skipUpdate) return;
+    if (this.skipUpdate) return;
     this.recalculate();
     this.revalidate();
-    console.timeEnd('updateModel');
+    // console.timeEnd('updateModel');
   }
 
   rebuild() {
     console.group('### rebuild');
     console.time('rebuild');
-    this.mainGraph = new DepGraph(false); //do: should be moved down below binds.length check but causes errors in tests.
+    this.mainGraph = new DepGraph(false); // do: should be moved down below binds.length check but causes errors in tests.
     this.modelItems = [];
 
     // trigger recursive initialization of the fx-bind elements
     const binds = this.querySelectorAll('fx-model > fx-bind');
-    if(binds.length === 0 ) {
-      console.log('skipped model update');
+    if (binds.length === 0) {
+      // console.log('skipped model update');
       this.skipUpdate = true;
-      return ;
+      return;
     }
 
     binds.forEach(bind => {
       bind.init(this);
     });
-    console.timeEnd('rebuild');
+    // console.timeEnd('rebuild');
 
     // console.log(`dependencies of a `, this.mainGraph.dependenciesOf("/Q{}data[1]/Q{}a[1]:required"));
     // console.log(`dependencies of b `, this.mainGraph.dependenciesOf("/Q{}data[1]/Q{}b[1]:required"));
@@ -208,7 +215,7 @@ export class FxModel extends HTMLElement {
         this.subgraph.addNode(modelItem.path, modelItem.node);
         // const dependents = this.mainGraph.dependantsOf(modelItem.path, false);
         // this._addSubgraphDependencies(modelItem.path);
-        if (this.mainGraph.hasNode(modelItem.path)) {
+        if (this.mainGraph && this.mainGraph.hasNode(modelItem.path)) {
           // const dependents = this.mainGraph.directDependantsOf(modelItem.path)
 
           const all = this.mainGraph.dependantsOf(modelItem.path, false);
@@ -238,7 +245,7 @@ export class FxModel extends HTMLElement {
       // ### compute the subgraph
       const ordered = this.subgraph.overallOrder(false);
       ordered.forEach(path => {
-        if (this.mainGraph.hasNode(path)) {
+        if (this.mainGraph && this.mainGraph.hasNode(path)) {
           const node = this.mainGraph.getNodeData(path);
           this.compute(node, path);
         }
@@ -445,5 +452,6 @@ export class FxModel extends HTMLElement {
     return result;
   }
 }
-
-customElements.define('fx-model', FxModel);
+if (!customElements.get('fx-model')) {
+  customElements.define('fx-model', FxModel);
+}