@jinntec/fore 1.0.0-5 → 1.0.0

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);
+}

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();
   }
 
@@ -82,7 +83,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       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,17 +143,18 @@ 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 = null;
+      if (serialized && instance.type === 'xml') {
+        data = new DOMParser().parseFromString(serialized, 'application/xml');
+      }
+      if (serialized && instance.type === 'json') {
+        data = JSON.parse(serialized);
       }
-      // const doc = new DOMParser().parseFromString(serialized, 'application/xml');
-      // const newDoc = doc.replaceChild(relevant, doc.firstElementChild);
-      this._handleResponse(doc);
-      this.dispatch('submit-done', {});
+      this._handleResponse(data);
+      // this.dispatch('submit-done', {});
+      Fore.dispatch(this, 'submit-done', {});
       return;
     }
     // ### setting headers
@@ -168,7 +167,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 +180,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 +205,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       this._handleResponse(blob);
     }
 
-    this.dispatch('submit-done', {});
+    // this.dispatch('submit-done', {});
+    Fore.dispatch(this, 'submit-done', {});
   }
 
   _serialize(instanceType, relevantNodes) {
@@ -221,11 +223,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 +270,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 +302,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 +312,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 +335,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 +373,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 +402,9 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     });
     return result;
   }
+*/
 
+  /*
   _isRelevant(node) {
     const mi = this.getModel().getModelItem(node);
     if (!mi || mi.relevant) {
@@ -389,9 +412,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 +429,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,15 +1,14 @@
 import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
+import { Fore } from './fore.js';
 
 import { XPathUtil } from './xpath-util.js';
 
-
 function _getElement(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;
   }
 
-
   if (node.nodeType === Node.ELEMENT_NODE) {
     // The context of a query should be the element having a ref
     return node;
@@ -30,16 +29,25 @@ 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);
-    if(instanceId){
+    if (instanceId) {
       return model.getInstance(instanceId).getDefaultContext();
     }
     return model.getDefaultInstance().getDefaultContext();
@@ -52,23 +60,22 @@ 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));
+    if (node.nodeName === 'context') {
+      return evaluateXPathToFirstNode(
+        node.nodeValue,
+        repeatItem.nodeset,
+        _getForeContext(parentElement),
+      );
     }
     return repeatItem.nodeset;
   }
 
   if (parentElement.hasAttribute('context')) {
-    const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
-    const contextAttr = node.ownerElement.getAttribute('context');
+    const initialContext = _getInitialContext(parentElement.parentNode, ref);
+    const contextAttr = parentElement.getAttribute('context');
     return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
   }
 

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 {

package/src/relevance.js

@@ -0,0 +1,65 @@
+export class Relevance {
+  static selectRelevant(element, type) {
+    console.log('selectRelevant', type);
+    switch (type) {
+      case 'xml':
+        return Relevance._relevantXmlNodes(element);
+      default:
+        console.warn(`relevance selection not supported for type:${element.type}`);
+        return element.nodeset;
+    }
+  }
+
+  static _relevantXmlNodes(element) {
+    // ### no relevance selection - current nodeset is used 'as-is'
+    const nonrelevant = element.getAttribute('nonrelevant');
+    if (nonrelevant === 'keep') {
+      return element.nodeset;
+    }
+
+    // first check if nodeset of submission is relevant - otherwise bail out
+    const mi = element.getModel().getModelItem(element.nodeset);
+    if (mi && !mi.relevant) return null;
+
+    const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
+    const root = doc.firstElementChild;
+
+    if (element.nodeset.children.length === 0 && Relevance._isRelevant(element, element.nodeset)) {
+      return element.nodeset;
+    }
+    return Relevance._filterRelevant(element, element.nodeset, root);
+  }
+
+  static _filterRelevant(element, node, result) {
+    const { childNodes } = node;
+    Array.from(childNodes).forEach(n => {
+      if (Relevance._isRelevant(element, n)) {
+        const clone = n.cloneNode(false);
+        result.appendChild(clone);
+        const { attributes } = n;
+        if (attributes) {
+          Array.from(attributes).forEach(attr => {
+            if (Relevance._isRelevant(element, attr)) {
+              clone.setAttribute(attr.nodeName, attr.value);
+            } else if (element.nonrelevant === 'empty') {
+              clone.setAttribute(attr.nodeName, '');
+            } else {
+              clone.removeAttribute(attr.nodeName);
+            }
+          });
+        }
+        return Relevance._filterRelevant(element, n, clone);
+      }
+      return null;
+    });
+    return result;
+  }
+
+  static _isRelevant(element, node) {
+    const mi = element.getModel().getModelItem(node);
+    if (!mi || mi.relevant) {
+      return true;
+    }
+    return false;
+  }
+}