@jinntec/fore 1.3.0 → 1.4.0

package/src/fx-fore.js

@@ -5,7 +5,6 @@ import '@jinntec/jinn-toast';
 import {evaluateXPathToBoolean, evaluateXPathToNodes, evaluateXPathToString} from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
 import {XPathUtil} from './xpath-util.js';
-import {AbstractAction} from "./actions/abstract-action";
 
 /**
  * Main class for Fore.Outermost container element for each Fore application.
@@ -15,9 +14,9 @@ import {AbstractAction} from "./actions/abstract-action";
  * 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 and updating of model and instances, update of UI (refresh) and global messaging.
+ * Main responsibilities 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 compute-exception - dispatched in case the dependency graph is circular
  * @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
@@ -56,7 +55,7 @@ export class FxFore extends HTMLElement {
     constructor() {
         super();
         this.model = {};
-        this.addEventListener('model-construct-done', this._handleModelConstructDone);
+        // this.addEventListener('model-construct-done', this._handleModelConstructDone);
         this.addEventListener('message', this._displayMessage);
         this.addEventListener('error', this._displayError);
         window.addEventListener('compute-exception', e => {
@@ -68,19 +67,11 @@ export class FxFore extends HTMLElement {
 
         const style = `
             :host {
-                // display: none;
-                height:auto;
-                padding:var(--model-element-padding);
-                font-family:Roboto, sans-serif;
-                color:var(--paper-grey-900);
+                display: block;
             }
             :host ::slotted(fx-model){
                 display:none;
             }
-            // :host(.fx-ready){
-            //     animation: fadein .4s forwards;
-            //     display:block;
-            // }
 
             #modalMessage .dialogActions{
                 text-align:center;
@@ -144,14 +135,6 @@ export class FxFore extends HTMLElement {
             #messageContent{
                 margin-top:40px;
             }
-            @keyframes fadein {
-              0% {
-                  opacity:0;
-              }
-              100% {
-                  opacity:1;
-              }
-            }
         `;
 
         const html = `
@@ -183,7 +166,7 @@ export class FxFore extends HTMLElement {
 
     connectedCallback() {
         this.style.visibility = 'hidden';
-
+        console.time('init');
         /*
         document.addEventListener('ready', (e) =>{
           if(e.target !== this){
@@ -220,7 +203,7 @@ export class FxFore extends HTMLElement {
         }
 
         const slot = this.shadowRoot.querySelector('slot');
-        slot.addEventListener('slotchange', event => {
+        slot.addEventListener('slotchange', async event => {
 
             // preliminary addition for auto-conversion of non-prefixed element into prefixed elements. See fore.js
             if(this.hasAttribute('convert')){
@@ -239,19 +222,20 @@ export class FxFore extends HTMLElement {
                 modelElement = generatedModel;
             }
             if (!modelElement.inited) {
-                    console.info(
-                        `%cFore is processing URL ${window.location.href}`,
-                        "background:#64b5f6; color:white; padding:1rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
-                    );
+                console.info(
+                    `%cFore is processing URL ${window.location.href}`,
+                    "background:#64b5f6; color:white; padding:1rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
+                );
 
                 if (this.src) {
                     console.log('########## FORE: loaded from ... ', this.src, '##########');
                 }
-                modelElement.modelConstruct();
+                await modelElement.modelConstruct();
+				this._handleModelConstructDone();
             }
             this.model = modelElement;
         });
-        this.addEventListener('path-mutated', e => {
+        this.addEventListener('path-mutated', () => {
             // console.log('path-mutated event received', e.detail.path, e.detail.index);
             this.someInstanceDataStructureChanged = true;
         });
@@ -300,7 +284,7 @@ export class FxFore extends HTMLElement {
 
                 // console.log('thefore', theFore)
                 if (!theFore) {
-                    Fore.dispatchEvent(this, 'error', {
+                    Fore.dispatch(this, 'error', {
                         detail: {
                             message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`,
                         },
@@ -324,9 +308,13 @@ export class FxFore extends HTMLElement {
      */
     handleIntersect(entries, observer) {
         console.time('refreshLazy');
+
         entries.forEach(entry => {
             const {target} = entry;
 
+            const fore = Fore.getFore(target);
+            if(fore.initialRun) return;
+
             if (entry.isIntersecting) {
                 console.log('in view', entry);
                 // console.log('repeat in view entry', entry.target);
@@ -497,7 +485,18 @@ export class FxFore extends HTMLElement {
     }
 
     _processTemplateExpressions() {
-        for (const node of this.storedTemplateExpressionByNode.keys()) {
+        for (const node of Array.from(this.storedTemplateExpressionByNode.keys())) {
+			if (node.nodeType === Node.ATTRIBUTE_NODE) {
+				// Attribute nodes are not contained by the document, but their owner elements are!
+				if (!node.ownerDocument.contains(node.ownerElement)) {
+					this.storedTemplateExpressionByNode.delete(node);
+					continue;
+				}
+			} else if (!node.ownerDocument.contains(node)) {
+				// For all other nodes, if the document does not contain them, they are dead
+				this.storedTemplateExpressionByNode.delete(node);
+				continue;
+			}
             this._processTemplateExpression({
                 node,
                 expr: this.storedTemplateExpressionByNode.get(node),
@@ -512,7 +511,7 @@ export class FxFore extends HTMLElement {
         const {expr} = exprObj;
         const {node} = exprObj;
         // console.log('expr ', expr);
-        this.evaluateTemplateExpression(expr, node, this);
+        this.evaluateTemplateExpression(expr, node);
     }
 
     /**
@@ -567,7 +566,7 @@ export class FxFore extends HTMLElement {
 
     /**
      * called when `model-construct-done` event is received to
-     * start initing of the UI.
+     * start initing the UI.
      *
      * @private
      */
@@ -583,7 +582,7 @@ export class FxFore extends HTMLElement {
                 && condition !== 'true'
                 && condition !== ''){
                 window.addEventListener('beforeunload', event => {
-                    const mustDisplay = evaluateXPathToBoolean(showConfirm, this.getModel().getDefaultContext(), this)
+                    const mustDisplay = evaluateXPathToBoolean(condition, this.getModel().getDefaultContext(), this)
                     if(mustDisplay){
                         console.log('have to display confirmation')
                         return event.returnValue = 'are you sure';
@@ -747,7 +746,8 @@ export class FxFore extends HTMLElement {
         };
     */
 
-        await this.refresh();
+		// First refresh should be forced
+        await this.refresh(true);
         // this.style.display='block'
         this.classList.add('fx-ready');
         document.body.classList.add('fx-ready');
@@ -761,6 +761,7 @@ export class FxFore extends HTMLElement {
             `%cPage Initialization done`,
             "background:#64b5f6; color:white; padding:1rem; display:block; white-space: nowrap; border-radius:0.3rem;width:100%;",
         );
+        console.timeEnd('init');
         console.log('dataChanged', FxModel.dataChanged);
     }
 

package/src/fx-instance.js

@@ -1,6 +1,43 @@
 import { Fore } from './fore.js';
 import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
 
+async function handleResponse(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')) {
+    // 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();
+  }
+  if (responseContentType.startsWith('application/json')) {
+    // console.log("********** inside res json *********");
+    return response.json();
+  }
+  if (responseContentType.startsWith('application/xml')) {
+    const text = await response.text();
+    // console.log('xml ********', result);
+    return new DOMParser().parseFromString(text, 'application/xml');
+  }
+  return 'done';
+}
+
 /**
  * Container for data instances.
  *
@@ -59,16 +96,15 @@ export class FxInstance extends HTMLElement {
    */
   async init() {
     // console.log('fx-instance init');
-    await this._initInstance().then(() => {
-      this.dispatchEvent(
-        new CustomEvent('instance-loaded', {
-          composed: true,
-          bubbles: true,
-          detail: { instance: this },
-        }),
-      );
-      return this;
-    });
+    await this._initInstance();
+    this.dispatchEvent(
+      new CustomEvent('instance-loaded', {
+        composed: true,
+        bubbles: true,
+        detail: { instance: this },
+      }),
+    );
+    return this;
   }
 
   evalXPath(xpath) {
@@ -155,22 +191,21 @@ export class FxInstance extends HTMLElement {
 
   async _loadData() {
     const url = `${this.src}`;
-    const contentType = Fore.getContentType(this, 'get');
 
-    if(url.startsWith('localStore')){
-      const key = url.substring(url.indexOf(':')+1);
+    if (url.startsWith('localStore')) {
+      const key = url.substring(url.indexOf(':') + 1);
 
       const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
       const root = doc.firstElementChild;
       this.instanceData = doc;
 
-      if(!key){
+      if (!key) {
         console.warn('no key specified for localStore');
         return;
       }
 
       const serialized = localStorage.getItem(key);
-      if(!serialized){
+      if (!serialized) {
         console.warn(`Data for key ${key} cannot be found`);
         this._useInlineData();
         return;
@@ -181,63 +216,28 @@ export class FxInstance extends HTMLElement {
       doc.firstElementChild.replaceWith(data.firstElementChild);
       return;
     }
+    const contentType = Fore.getContentType(this, 'get');
 
-    await fetch(url, {
-      method: 'GET',
-      mode: 'cors',
-      credentials: 'include',
-      headers: {
-        'Content-Type': contentType,
-      },
-    })
-      .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')) {
-          // 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();
-        }
-        if (responseContentType.startsWith('application/json')) {
-          // console.log("********** inside res json *********");
-          return response.json();
-        }
-        if (responseContentType.startsWith('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.id, this.instanceData);
-          return;
-        }
-        this.instanceData = data;
-      })
-      .catch(error => {
-        throw new Error(`failed loading data ${error}`);
+    try {
+      const response = await fetch(url, {
+        method: 'GET',
+        mode: 'cors',
+        credentials: 'include',
+        headers: {
+          'Content-Type': contentType,
+        },
       });
+      const { status } = response;
+      const data = await handleResponse(response);
+      if (data.nodeType) {
+        this.instanceData = data;
+        console.log('instanceData loaded: ', this.id, this.instanceData);
+        return;
+      }
+      this.instanceData = data;
+    } catch (error) {
+      throw new Error(`failed loading data ${error}`);
+    }
   }
 
   _getContentType() {

package/src/fx-model.js

@@ -95,7 +95,7 @@ export class FxModel extends HTMLElement {
      * @event model-construct-done is fired once all instances have be loaded or after generating instance
      *
      */
-    modelConstruct() {
+    async modelConstruct() {
         // console.log('### <<<<< dispatching model-construct >>>>>');
         // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
         Fore.dispatch(this, 'model-construct', {model: this});
@@ -109,17 +109,20 @@ export class FxModel extends HTMLElement {
                 promises.push(instance.init());
             });
 
-            Promise.all(promises).then(() => {
-                this.instances = Array.from(instances);
-                // console.log('_modelConstruct this.instances ', this.instances);
-                this.updateModel();
-                this.inited = true;
-                Fore.dispatch(this, 'model-construct-done', {model: this});
-            });
+			// Wait until all the instances are built
+			await Promise.all(promises);
+
+            this.instances = Array.from(instances);
+            // console.log('_modelConstruct this.instances ', this.instances);
+			// Await until the model-construct-done event is handled off
+
+            await Fore.dispatch(this, 'model-construct-done', {model: this});
+            this.inited = true;
+            this.updateModel();
             console.groupEnd();
         } else {
             // ### if there's no instance one will created
-            this.dispatchEvent(
+            await this.dispatchEvent(
                 new CustomEvent('model-construct-done', {
                     composed: false,
                     bubbles: true,
@@ -387,14 +390,6 @@ export class FxModel extends HTMLElement {
                         modelItem.constraint = compute;
                         this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
                         if (!compute) valid = false;
-                        // ### alerts are added only once during model-construct. Otherwise they would add up in each run of revalidate()
-                        if (!this.modelConstructed) {
-                            // todo: get alert from attribute or child element
-                            const alert = bind.getAlert();
-                            if (alert) {
-                                modelItem.addAlert(alert);
-                            }
-                        }
                     }
                 }
                 if (typeof bind.hasAttribute === 'function' && bind.hasAttribute('required')) {