@jinntec/fore 1.0.0-4 → 1.1.0

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"));
@@ -195,9 +202,14 @@ export class FxModel extends HTMLElement {
    * todo: use 'changed' flag on modelItems to determine subgraph for recalculation. Flag already exists but is not used.
    */
   recalculate() {
+    if(!this.mainGraph){
+      return;
+    }
+
     console.group('### recalculate');
     console.log('changed nodes ', this.changed);
 
+
     console.time('recalculate');
     this.computes = 0;
 
@@ -364,8 +376,9 @@ export class FxModel extends HTMLElement {
    *
    */
   revalidate() {
-    console.group('### revalidate');
+    if(this.modelItems.length === 0) return true;
 
+    console.group('### revalidate');
     console.time('revalidate');
     let valid = true;
     this.modelItems.forEach(modelItem => {
@@ -395,6 +408,28 @@ export class FxModel extends HTMLElement {
             }
           }
         }
+        if (typeof bind.hasAttribute === 'function' && bind.hasAttribute('required')) {
+          const required = bind.getAttribute('required');
+          if (required) {
+            const compute = evaluateXPathToBoolean(required, modelItem.node, this);
+            console.log('modelItem required computed: ', compute);
+            modelItem.required = compute;
+            this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
+            if(!modelItem.node.textContent){
+               valid = false;
+            }
+            // if (!compute) valid = false;
+/*
+            if (!this.modelConstructed) {
+              // todo: get alert from attribute or child element
+              const alert = bind.getAlert();
+              if (alert) {
+                modelItem.addAlert(alert);
+              }
+            }
+*/
+          }
+        }
       }
     });
     console.timeEnd('revalidate');
@@ -421,7 +456,7 @@ export class FxModel extends HTMLElement {
   }
 
   getDefaultInstance() {
-    return this.instances[0];
+    return this?.instances[0];
   }
 
   getDefaultInstanceData() {
@@ -445,5 +480,6 @@ export class FxModel extends HTMLElement {
     return result;
   }
 }
-
-customElements.define('fx-model', FxModel);
+if (!customElements.get('fx-model')) {
+  customElements.define('fx-model', FxModel);
+}

package/src/fx-submission.js

@@ -1,4 +1,5 @@
 import { Fore } from './fore.js';
+import { Relevance } from './relevance.js';
 import { foreElementMixin } from './ForeElementMixin.js';
 import { evaluateXPathToString, evaluateXPath } from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
@@ -66,7 +67,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
   }
 
   async submit() {
-    await this.dispatch('submit', { submission: this });
+    await Fore.dispatch(this, 'submit', { submission: this });
     this._submit();
   }
 
@@ -77,12 +78,13 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
     model.recalculate();
 
-    if (this.validate) {
+    if (this.validate==='true') {
       const valid = model.revalidate();
       if (!valid) {
         console.log('validation failed. Bubmission stopped');
         // ### allow alerts to pop up
-        this.dispatch('submit-error', {});
+        // this.dispatch('submit-error', {});
+        Fore.dispatch(this, 'submit-error', {});
         this.getModel().parentNode.refresh();
         return;
       }
@@ -117,24 +119,20 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
   /**
    * sends the data after evaluating
    *
-   * todo: can send only XML at the moment
    * @private
    */
   async _serializeAndSend() {
     const resolvedUrl = this._evaluateAttributeTemplateExpression(this.url, this);
 
     const instance = this.getInstance();
-    if (instance.type !== 'xml') {
-      console.error('JSON serialization is not supported yet');
-      return;
-    }
+    console.log('instance type', instance.type);
 
-    // let serialized = serializer.serializeToString(this.nodeset);
     let serialized;
     if (this.serialization === 'none') {
       serialized = undefined;
     } else {
-      const relevant = this.selectRelevant();
+      // const relevant = this.selectRelevant(instance.type);
+      const relevant = Relevance.selectRelevant(this, instance.type);
       serialized = this._serialize(instance.type, relevant);
     }
 
@@ -145,19 +143,41 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     // console.log('data being send', serialized);
     // console.log('submitting data',serialized);
 
-    if (resolvedUrl === '#echo') {
-      let doc;
-      if (serialized) {
-        doc = new DOMParser().parseFromString(serialized, 'application/xml');
-      } else {
-        doc = undefined;
+    // if (resolvedUrl === '#echo') {
+    if (resolvedUrl.startsWith('#echo')) {
+      let data = this._parse(serialized, instance);
+      this._handleResponse(data);
+      // this.dispatch('submit-done', {});
+      Fore.dispatch(this, 'submit-done', {});
+      return;
+    }
+
+    if(resolvedUrl.startsWith('localStore:') && this.method === 'post'){
+      // let data = this._parse(serialized, instance);
+      const key = resolvedUrl.substring(resolvedUrl.indexOf(':')+1);
+      localStorage.setItem(key,serialized);
+      Fore.dispatch(this, 'submit-done', {});
+      return;
+    }
+
+    if(resolvedUrl.startsWith('localStore:') && (this.method === 'consume' || this.method === 'get')){
+      // let data = this._parse(serialized, instance);
+      this.replace = 'instance';
+      const key = resolvedUrl.substring(resolvedUrl.indexOf(':')+1);
+      const serialized = localStorage.getItem(key);
+      if(!serialized){
+        Fore.dispatch(this, 'submit-error', { message: `Error reading key ${key} from localstorage` });
+        return;
       }
-      // const doc = new DOMParser().parseFromString(serialized, 'application/xml');
-      // const newDoc = doc.replaceChild(relevant, doc.firstElementChild);
-      this._handleResponse(doc);
-      this.dispatch('submit-done', {});
+      let data = this._parse(serialized, instance);
+      this._handleResponse(data);
+      if(this.method === 'consume'){
+        localStorage.removeItem(key);
+      }
+      Fore.dispatch(this, 'submit-done', {});
       return;
     }
+
     // ### setting headers
     const headers = this._getHeaders();
     console.log('headers', headers);
@@ -168,7 +188,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     }
 
     if (!this.methods.includes(this.method.toLowerCase())) {
-      this.dispatch('error', { message: `Unknown method ${this.method}` });
+      // this.dispatch('error', { message: `Unknown method ${this.method}` });
+      Fore.dispatch(this, 'error', { message: `Unknown method ${this.method}` });
       return;
     }
     const response = await fetch(resolvedUrl, {
@@ -180,7 +201,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     });
 
     if (!response.ok || response.status > 400) {
-      this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
+      // this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
+      Fore.dispatch(this, 'submit-error', { message: `Error while submitting ${this.id}` });
       return;
     }
 
@@ -204,7 +226,19 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       this._handleResponse(blob);
     }
 
-    this.dispatch('submit-done', {});
+    // this.dispatch('submit-done', {});
+    Fore.dispatch(this, 'submit-done', {});
+  }
+
+  _parse(serialized, instance) {
+    let data = null;
+    if (serialized && instance.type === 'xml') {
+      data = new DOMParser().parseFromString(serialized, 'application/xml');
+    }
+    if (serialized && instance.type === 'json') {
+      data = JSON.parse(serialized);
+    }
+    return data;
   }
 
   _serialize(instanceType, relevantNodes) {
@@ -221,11 +255,10 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       const serializer = new XMLSerializer();
       return serializer.serializeToString(relevantNodes);
     }
-    /*
-            if(instanceType === 'json'){
-                console.warn('JSON serialization is not yet supported')
-            }
-    */
+    if (instanceType === 'json') {
+      // console.warn('JSON serialization is not yet supported')
+      return JSON.stringify(relevantNodes);
+    }
     throw new Error('unknown instance type ', instanceType);
   }
 
@@ -269,13 +302,28 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     return targetInstance;
   }
 
+  /**
+   * handles replacement of instance data from response data.
+   *
+   * Please note that data might be
+   * @param data
+   * @private
+   */
   _handleResponse(data) {
     console.log('_handleResponse ', data);
+
+    /*
+    // ### responses need to be handled depending on their type.
+    if(this.type === 'json'){
+
+    }
+*/
+
     if (this.replace === 'instance') {
       const targetInstance = this._getTargetInstance();
       if (targetInstance) {
         if (this.targetref) {
-          const theTarget = evaluateXPath(
+          const [theTarget] = evaluateXPath(
             this.targetref,
             targetInstance.instanceData.firstElementChild,
             this,
@@ -286,7 +334,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
           parent.replaceChild(clone, theTarget);
           console.log('finally ', parent);
         } else if (this.into) {
-          const theTarget = evaluateXPath(
+          const [theTarget] = evaluateXPath(
             this.into,
             targetInstance.instanceData.firstElementChild,
             this,
@@ -296,6 +344,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         } else {
           const instanceData = data;
           targetInstance.instanceData = instanceData;
+          console.log('### replaced instance ', this.getModel().instances);
           console.log('### replaced instance ', targetInstance.instanceData);
         }
 
@@ -318,26 +367,29 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     if (this.replace === 'redirect') {
       window.location.href = data;
     }
-
-    /*
-                const event = new CustomEvent('submit-done', {
-                    composed: true,
-                    bubbles: true,
-                    detail: {},
-                });
-                console.log('firing',event);
-                this.dispatchEvent(event);
-        */
-    // this.dispatch('submit-done', {});
   }
 
   /**
    * select relevant nodes
    *
-   * todo: support for 'empty'
    * @returns {*}
    */
-  selectRelevant() {
+  /*
+  selectRelevant(type) {
+    console.log('selectRelevant' ,type)
+    switch (type){
+      case 'xml':
+        return this._relevantXmlNodes();
+      default:
+        console.warn(`relevance selection not supported for type:${this.type}`);
+        return this.nodeset;
+    }
+  }
+*/
+
+  // todo: support for 'empty'
+  /*
+  _relevantXmlNodes() {
     // ### no relevance selection - current nodeset is used 'as-is'
     if (this.nonrelevant === 'keep') {
       return this.nodeset;
@@ -353,10 +405,11 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     if (this.nodeset.children.length === 0 && this._isRelevant(this.nodeset)) {
       return this.nodeset;
     }
-    const result = this._filterRelevant(this.nodeset, root);
-    return result;
+    return this._filterRelevant(this.nodeset, root);
   }
+*/
 
+  /*
   _filterRelevant(node, result) {
     const { childNodes } = node;
     Array.from(childNodes).forEach(n => {
@@ -381,7 +434,9 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     });
     return result;
   }
+*/
 
+  /*
   _isRelevant(node) {
     const mi = this.getModel().getModelItem(node);
     if (!mi || mi.relevant) {
@@ -389,9 +444,11 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     }
     return false;
   }
+*/
 
   _handleError() {
-    this.dispatch('submit-error', {});
+    // this.dispatch('submit-error', {});
+    Fore.dispatch(this, 'submit-error', {});
     /*
                 console.log('ERRRORRRRR');
                 this.dispatchEvent(
@@ -404,5 +461,6 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         */
   }
 }
-
-customElements.define('fx-submission', FxSubmission);
+if (!customElements.get('fx-submission')) {
+  customElements.define('fx-submission', FxSubmission);
+}

package/src/fx-var.js

@@ -1,3 +1,4 @@
+import { Fore } from './fore.js';
 import './fx-instance.js';
 import { evaluateXPath } from './xpath-evaluation.js';
 import { foreElementMixin } from './ForeElementMixin.js';
@@ -24,13 +25,14 @@ export class FxVariable extends foreElementMixin(HTMLElement) {
   refresh() {
     const inscope = getInScopeContext(this, this.valueQuery);
 
-    this.value = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
+    const values = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
+    [this.value] = values;
   }
 
   setInScopeVariables(inScopeVariables) {
     if (inScopeVariables.has(this.name)) {
       console.error(`The variable ${this.name} is declared more than once`);
-      this.dispatch('xforms-binding-error');
+      Fore.dispatch(this, 'xforms-binding-error', {});
       return;
     }
     inScopeVariables.set(this.name, this);
@@ -39,5 +41,6 @@ export class FxVariable extends foreElementMixin(HTMLElement) {
     this.inScopeVariables = new Map(inScopeVariables);
   }
 }
-
-customElements.define('fx-var', FxVariable);
+if (!customElements.get('fx-var')) {
+  customElements.define('fx-var', FxVariable);
+}

package/src/getInScopeContext.js

@@ -1,9 +1,10 @@
 import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
+import { Fore } from './fore.js';
 
 import { XPathUtil } from './xpath-util.js';
 
 function _getElement(node) {
-  if (node.nodeType === Node.ATTRIBUTE_NODE) {
+  if (node && node.nodeType && node.nodeType === Node.ATTRIBUTE_NODE) {
     // The context of an attribute is the ref of the element it's defined on
     return node.ownerElement;
   }
@@ -28,16 +29,28 @@ function _getModelInContext(node) {
 }
 
 function _getInitialContext(node, ref) {
-  const parentBind = node.closest('[ref]');
+  const parentBind = Fore.getClosest('[ref]', node);
+  const localFore = Fore.getClosest('fx-fore', node);
+
+  const model = _getModelInContext(node);
 
   if (parentBind !== null) {
-    return parentBind.nodeset;
+    /*
+    make sure that the closest ref belongs to the same fx-fore element
+    */
+    const parentBindFore = parentBind.closest('fx-fore');
+    if (localFore === parentBindFore) {
+      return parentBind.nodeset;
+    }
+    return model.getDefaultInstance().getDefaultContext();
   }
 
-  const model = _getModelInContext(node);
   if (XPathUtil.isAbsolutePath(ref)) {
     const instanceId = XPathUtil.getInstanceId(ref);
-    return model.getInstance(instanceId).getDefaultContext();
+    if (instanceId) {
+      return model.getInstance(instanceId).getDefaultContext();
+    }
+    return model.getDefaultInstance().getDefaultContext();
   }
   if (model.getDefaultInstance() !== null && model.inited) {
     return model.getDefaultInstance().getDefaultContext();
@@ -47,17 +60,30 @@ function _getInitialContext(node, ref) {
 
 export default function getInScopeContext(node, ref) {
   const parentElement = _getElement(node);
-  /*
-  if(parentElement.nodeName.toUpperCase() === 'FX-REPEATITEM'){
-    return parentElement.nodeset;
-  }
-*/
 
-  const repeatItem = parentElement.closest('fx-repeatitem');
+  const repeatItem = Fore.getClosest('fx-repeatitem', parentElement);
   if (repeatItem) {
+    if (node.nodeName === 'context') {
+      return evaluateXPathToFirstNode(
+        node.nodeValue,
+        repeatItem.nodeset,
+        _getForeContext(parentElement),
+      );
+    }
     return repeatItem.nodeset;
   }
 
+  if (parentElement.hasAttribute('context')) {
+    const initialContext = _getInitialContext(parentElement.parentNode, ref);
+    const contextAttr = parentElement.getAttribute('context');
+    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+  }
+
+  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'context') {
+    const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+    const contextAttr = node.ownerElement.getAttribute('context');
+    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+  }
   if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'ref') {
     // Note: do not consider the ref of the owner element since it should not be used to define the
     // context

package/src/modelitem.js

@@ -54,11 +54,11 @@ export class ModelItem {
     console.log('modelitem.setvalue newVal', newVal);
 
     if (newVal.nodeType === Node.DOCUMENT_NODE) {
-      // this.node.replaceWith(newVal.firstElementChild);
-      this.node.appendChild(newVal.firstElementChild);
+      this.node.replaceWith(newVal.firstElementChild);
+      // this.node.appendChild(newVal.firstElementChild);
     } else if (newVal.nodeType === Node.ELEMENT_NODE) {
-      // this.node.replaceWith(newVal);
-      this.node.appendChild(newVal);
+      this.node.replaceWith(newVal);
+      // this.node.appendChild(newVal);
     } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
       this.node.nodeValue = newVal;
     } else {