@jinntec/fore 1.3.0 → 1.5.0

package/src/fore.js

@@ -9,6 +9,16 @@ export class Fore {
 
   static TYPE_DEFAULT = 'xs:string';
 
+  /**
+   * returns the next `fx-fore` element upwards in tree
+   *
+   * @param start
+   * @returns {*}
+   */
+  static getFore(start) {
+    return start.nodeType === Node.TEXT_NODE ? start.parentNode.closest('fx-fore'):start.closest('fx-fore');
+  }
+
   static get ACTION_ELEMENTS() {
     return [
       'FX-ACTION',
@@ -76,6 +86,7 @@ export class Fore {
       'FX-RANGE',
       'FX-REPEAT',
       'FX-REPEATITEM',
+      'FX-REPEAT-ATTRIBUTES',
       'FX-SWITCH',
       'FX-SECRET',
       'FX-SELECT',
@@ -285,14 +296,23 @@ export class Fore {
     return fadeOut();
   }
 
-  static dispatch(target, eventName, detail) {
+  static async dispatch(target, eventName, detail) {
     const event = new CustomEvent(eventName, {
       composed: false,
       bubbles: true,
       detail,
     });
-    console.info('dispatching', event.type, target);
-    target.dispatchEvent(event);
+	  event.listenerPromises = [];
+      // console.info('dispatching', event.type, target);
+	  // console.log('!!! DISPATCH_START', eventName);
+
+      target.dispatchEvent(event);
+
+	  // By now, all listeners for the event should have registered their completion promises to us.
+	  if (event.listenerPromises.length) {
+		  await Promise.all(event.listenerPromises);
+	  }
+	  // console.log('!!! DISPATCH_DONE', eventName);
   }
 
   static prettifyXml(source) {
@@ -409,13 +429,42 @@ export class Fore {
             }),
           );
         }
-        hostElement.appendChild(theFore);
-        theFore.classList.add('widget');
-        // return theFore;
-        // theFore.setAttribute('from-src', this.src);
-        // this.replaceWith(theFore);
+        const imported = document.importNode(theFore,true);
+        console.log(`########## loaded fore as component ##### ${hostElement.url}`);
+        imported.addEventListener(
+            'model-construct-done',
+            e => {
+              console.log('subcomponent ready', e.target);
+              const defaultInst = imported.querySelector('fx-instance');
+              // console.log('defaultInst', defaultInst);
+              if(hostElement.initialNode){
+                const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
+                // Note: Clone the input to prevent the inner fore from editing the outer node
+                doc.firstElementChild.appendChild(hostElement.initialNode.cloneNode(true));
+                // defaultinst.setInstanceData(this.initialNode);
+                defaultInst.setInstanceData(doc);
+              }
+              // console.log('new data', defaultInst.getInstanceData());
+              // theFore.getModel().modelConstruct();
+              imported.getModel().updateModel();
+              imported.refresh();
+              return 'done';
+
+            },
+            { once: true },
+        );
+
+        const dummy = hostElement.querySelector('input');
+        if (hostElement.hasAttribute('shadow')) {
+          dummy.parentNode.removeChild(dummy);
+          hostElement.shadowRoot.appendChild(imported);
+        } else {
+          console.log(this, 'replacing widget with',theFore);
+          dummy.replaceWith(imported);
+          // this.appendChild(imported);
+        }
       })
-      .catch(error => {
+      /*.catch(error => {
         hostElement.dispatchEvent(
           new CustomEvent('error', {
             composed: false,
@@ -426,7 +475,7 @@ export class Fore {
             },
           }),
         );
-      });
+      });*/
   }
 
   /**

package/src/fx-bind.js

@@ -320,6 +320,11 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       this,
     );
 
+    const alert = this.getAlert();
+    if (alert) {
+      newItem.addAlert(alert);
+    }
+
     this.getModel().registerModelItem(newItem);
   }
 

package/src/fx-fore.js

@@ -5,7 +5,8 @@ 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";
+// import {FxRepeat} from "./ui/fx-repeat";
+import {FxRepeatAttributes} from './ui/fx-repeat-attributes.js';
 
 /**
  * Main class for Fore.Outermost container element for each Fore application.
@@ -15,9 +16,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 +57,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 +69,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 +137,6 @@ export class FxFore extends HTMLElement {
             #messageContent{
                 margin-top:40px;
             }
-            @keyframes fadein {
-              0% {
-                  opacity:0;
-              }
-              100% {
-                  opacity:1;
-              }
-            }
         `;
 
         const html = `
@@ -179,11 +164,12 @@ export class FxFore extends HTMLElement {
         this.toRefresh = [];
         this.initialRun = true;
         this.someInstanceDataStructureChanged = false;
+        this.repeatsFromAttributesCreated = false;
     }
 
     connectedCallback() {
         this.style.visibility = 'hidden';
-
+        console.time('init');
         /*
         document.addEventListener('ready', (e) =>{
           if(e.target !== this){
@@ -220,7 +206,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 +225,23 @@ 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._createRepeatsFromAttributes();
+
         });
-        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 +290,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 +314,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 +491,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 +517,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 +572,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 +588,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 +752,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 +767,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);
     }
 
@@ -817,6 +824,56 @@ export class FxFore extends HTMLElement {
             toast.showToast(msg);
         }
     }
+
+    /**
+     * wraps the element having a 'data-ref' attribute with an fx-repeat-attributes element.
+     * @private
+     */
+    _createRepeatsFromAttributes() {
+        if(this.repeatsFromAttributesCreated) return;
+        const repeats = this.querySelectorAll('[data-ref]');
+        if(repeats){
+            Array.from(repeats).forEach(item =>{
+
+                const table = item.parentNode.closest('table');
+                let host;
+                if(table){
+                    host = table.cloneNode(true);
+                }else{
+                    host = item.cloneNode(true);
+                }
+                // ### clone original item to move it into fx-repeat-attributes
+                // const host = item.cloneNode(true);
+
+                // ### create wrapper element
+                const repeatFromAttr = new FxRepeatAttributes();
+                // const repeatFromAttr = document.createElement('fx-repeat-attributes');
+
+                // ### copy the value of 'data-ref' to 'ref' on fx-repeat-attributes
+                repeatFromAttr.setAttribute('ref',item.getAttribute('data-ref'));
+                // item.removeAttribute('data-ref');
+
+                // ### append the cloned original element to fx-repeat-attributes
+                repeatFromAttr.appendChild(host);
+
+                // ### insert fx-repeat-attributes element before element with the 'data-ref'
+                // repeats[0].parentNode.insertBefore(repeatFromAttr,repeats[0]);
+
+                if(table){
+                    table.parentNode.insertBefore(repeatFromAttr,table);
+                    table.parentNode.removeChild(table);
+                }else{
+                    item.parentNode.insertBefore(repeatFromAttr,item);
+                    item.parentNode.removeChild(item);
+                }
+
+                // ### remove original item from DOM
+                item.setAttribute('insertPoint','');
+
+            });
+        }
+        this.repeatsFromAttributesCreated = true;
+    }
 }
 
 if (!customElements.get('fx-fore')) {

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')) {