@jinntec/fore 1.10.1 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {

package/src/actions/fx-toggle.js

@@ -23,6 +23,7 @@ class FxToggle extends AbstractAction {
     super.perform();
     if (this.case) {
       const ownerForm = this.getOwnerForm();
+      // todo: id resolution!!!
       const caseElement = ownerForm.querySelector(`#${this.case}`);
       if(!caseElement){
         Fore.dispatch(this, 'error', { message: `fx-case id not found: ${this.case}` });

package/src/fore.js

@@ -18,228 +18,6 @@ export class Fore {
 
   static TYPE_DEFAULT = 'xs:string';
 
-  /**
-   * recursively walks along a template instance that contains all nodes relevant for editing and
-   * applying all nodes being present in partial instance onto it.
-   *
-   * @param start
-   * @param partial
-   * @returns {*}
-   * @private
-   */
-  static combine(start, partial, foreElement,expr){
-    if(!start) return;
-
-    const appended = false;
-    // ### get the path of the current element
-    let path = evaluateXPath('path()',start,foreElement)[0];
-    if(expr){
-      path = expr;
-    }
-    // const attrMap = new Map();
-    console.log('########process path', XPathUtil.shortenPath(path));
-    const predicates = Fore.buildPredicates(start);
-    // console.log('########process search', path);
-    // ### search the path in the partial instance
-    const toMerge = evaluateXPathToFirstNode( path,partial,foreElement);
-    if(expr){
-      console.log('skipped one - new toMerge', toMerge);
-    }
-    // console.log('tomerge node', toMerge);
-    // if(toMerge.length === 1){}
-    if(toMerge){
-      // console.log('merging nodes', toMerge);
-      const mergeAttrs = Fore.buildPredicates(toMerge);
-      if(predicates === mergeAttrs) {
-
-
-        // console.log('####### attr maps', attrMap, toMergeAttrMap);
-        // console.log('########process merge attrs', mergeAttrs);
-        if(start.getAttribute('type') !== toMerge.getAttribute('type') ){
-          console.log('###### element type attr not matching', start, toMerge);
-          const nextSibling = start.nextElementSibling;
-          if(nextSibling && nextSibling.nodeName === start.nodeName){
-            console.log('nextSibling', nextSibling, XPathUtil.shortenPath(path));
-            console.log('start', start, XPathUtil.shortenPath(path));
-            Fore.combine(start,partial,foreElement,path);
-          }
-        }
-
-        // ### iterate the attributes of the template node
-        // if(attrMap === toMergeAttrMap){
-        // if(start.attributes){
-        Array.from(start.attributes).forEach(attr => {
-          // ### if the template attribute has a matching attribute in partial...
-          if (toMerge.hasAttribute(attr.nodeName)) {
-            if (attr.nodeName !== 'xmlns') {
-              // console.log('overwrite attr', attr);
-              const toMergeAttr = toMerge.getAttribute(attr.nodeName);
-              // if (attr.nodeValue !== toMergeAttr.nodeValue) {
-                // ### apply the attribute value from partial to template
-              if(toMergeAttr){
-                start.setAttribute(attr.nodeName, toMergeAttr)
-              }
-              // }
-            }
-          }
-        });
-        // }
-      }else{
-        console.log('###### element in template but not in partial',start);
-        const nextSibling = start.nextElementSibling;
-        if(nextSibling && nextSibling.nodeName === start.nodeName){
-          Fore.combine(nextSibling,partial,foreElement,path);
-        }
-      }
-      // ### if we don't have children we still might have text
-      if(toMerge.children.length === 0){
-        const toMergeText = toMerge.textContent;
-        if(toMergeText){
-          start.textContent = toMergeText;
-        }
-      }
-
-      // ### if the template node does not have children but the partial has then copy them over
-      if(start.children.length === 0 && toMerge.children.length !== 0){
-        const mergeChildren = Array.from(toMerge.children);
-        mergeChildren.forEach(child => {
-          start.append(child);
-        });
-      }
-    }
-
-    // ### recurse
-    if(start.children){
-      Array.from(start.children).forEach(element => {
-/*
-        console.log('stepping into element', element);
-        if(element.getAttribute('type') !== toMerge.getAttribute('type')){
-          // console.log('###### element in template but not in partial');
-          // const nextSibling = start.nextElementSibling;
-          const nextSibling = element.nextElementSibling;
-          if(nextSibling && nextSibling.nodeName === toMerge.nodeName){
-            console.log('nextSibling', nextSibling, XPathUtil.shortenPath(path));
-            Fore.combine(nextSibling,partial,foreElement,path);
-          }
-        }
-*/
-          return Fore.combine(element, partial,foreElement,null);
-
-
-      });
-    }
-    return start;
-  }
-/*
-  static combine(start, partial, foreElement,expr){
-    if(!start) return;
-    // ### get the path of the current element
-    let path = evaluateXPath('path()',start,foreElement)[0];
-    if(expr){
-      path = expr;
-    }
-    // const attrMap = new Map();
-    console.log('########process path', XPathUtil.shortenPath(path));
-    const predicates = Fore.buildPredicates(start);
-    /!*
-        if(predicates){
-          path = path.substring(1, path.lastIndexOf('['));
-        }
-        path += Fore.buildPredicates(start);
-    *!/
-    // console.log('########process search', path);
-    // ### search the path in the partial instance
-    const toMerge = evaluateXPathToFirstNode( path,partial,foreElement);
-
-    // console.log('tomerge node', toMerge);
-    // if(toMerge.length === 1){}
-    if(toMerge){
-      // console.log('merging nodes', toMerge);
-      const mergeAttrs = Fore.buildPredicates(toMerge);
-      if(predicates === mergeAttrs) {
-
-
-        // console.log('####### attr maps', attrMap, toMergeAttrMap);
-        // console.log('########process merge attrs', mergeAttrs);
-/!*
-        if(toMerge.getAttribute('type') !== start.getAttribute('type')){
-          // console.log('###### element in template but not in partial');
-          // const nextSibling = start.nextElementSibling;
-          const nextSibling = start.nextElementSibling;
-          if(nextSibling && nextSibling.nodeName === start.nodeName){
-            console.log('nextSibling', nextSibling, XPathUtil.shortenPath(path));
-            Fore.combine(nextSibling,partial,foreElement,path);
-          }
-        }
-*!/
-
-        // ### iterate the attributes of the template node
-        // if(attrMap === toMergeAttrMap){
-        // if(start.attributes){
-        Array.from(start.attributes).forEach(attr => {
-          // ### if the template attribute has a matching attribute in partial...
-          if (toMerge.hasAttribute(attr.nodeName)) {
-            if (attr.nodeName !== 'xmlns') {
-              // console.log('overwrite attr', attr);
-              const toMergeAttr = toMerge.getAttribute(attr.nodeName);
-              // if (attr.nodeValue !== toMergeAttr.nodeValue) {
-                // ### apply the attribute value from partial to template
-              if(toMergeAttr){
-                start.setAttribute(attr.nodeName, toMergeAttr)
-              }
-              // }
-            }
-          }
-        });
-        // }
-      }else{
-        console.log('###### element in template but not in partial',start);
-        const nextSibling = start.nextElementSibling;
-        if(nextSibling && nextSibling.nodeName === start.nodeName){
-          Fore.combine(nextSibling,partial,foreElement,path);
-        }
-      }
-      // ### if we don't have children we still might have text
-      if(toMerge.children.length === 0){
-        const toMergeText = toMerge.textContent;
-        if(toMergeText){
-          start.textContent = toMergeText;
-        }
-      }
-
-      // ### if the template node does not have children but the partial has then copy them over
-      if(start.children.length === 0 && toMerge.children.length !== 0){
-        const mergeChildren = Array.from(toMerge.children);
-        mergeChildren.forEach(child => {
-          start.append(child);
-        });
-      }
-    }
-
-    // ### recurse
-    if(start.children){
-      Array.from(start.children).forEach(element => {
-/!*
-        console.log('stepping into element', element);
-        if(element.getAttribute('type') !== toMerge.getAttribute('type')){
-          // console.log('###### element in template but not in partial');
-          // const nextSibling = start.nextElementSibling;
-          const nextSibling = element.nextElementSibling;
-          if(nextSibling && nextSibling.nodeName === toMerge.nodeName){
-            console.log('nextSibling', nextSibling, XPathUtil.shortenPath(path));
-            Fore.combine(nextSibling,partial,foreElement,path);
-          }
-        }
-*!/
-          return Fore.combine(element, partial,foreElement);
-
-
-      });
-    }
-    return start;
-  }
-*/
-
   static buildPredicates(node){
     let attrPredicate='';
     Array.from(node.attributes).forEach(attr =>{

package/src/fx-bind.js

@@ -63,7 +63,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
   init(model) {
     this.model = model;
     // console.log('init binding ', this);
-    this.instanceId = this._getInstanceId();
+    this._getInstanceId();
     this.bindType = this.getModel().getInstance(this.instanceId).type;
     // console.log('binding type ', this.bindType);
 
@@ -399,20 +399,40 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     return result;
   }
 
-  // todo: more elaborated implementation ;)
+  /**
+   * return the instance id this bind is associated with. Resolves upwards in binds to either find an expr containing
+   * and instance() function or if not found return 'default'.
+   * @private
+   */
   _getInstanceId() {
     const bindExpr = this.getBindingExpr();
     // console.log('_getInstanceId bindExpr ', bindExpr);
     if (bindExpr.startsWith('instance(')) {
       this.instanceId = XPathUtil.getInstanceId(bindExpr);
-      return this.instanceId;
+      return;
     }
-    if (this.instanceId) {
-      return this.instanceId;
+    if(!this.instanceId && this.parentNode.nodeName === 'FX-BIND'){
+      let parent = this.parentNode;
+      while(parent && !this.instanceId){
+        const ref = parent.getBindingExpr();
+        if (ref.startsWith('instance(')) {
+          this.instanceId = XPathUtil.getInstanceId(ref);
+          return;
+        }
+        if(parent.parentNode.nodeName !== 'FX-BIND'){
+          this.instanceId = 'default';
+          break;
+        }
+        parent = parent.parentNode;
+      }
     }
-    return 'default';
+    this.instanceId = 'default';
   }
+
+
+
 }
+
 if (!customElements.get('fx-bind')) {
   customElements.define('fx-bind', FxBind);
 }

package/src/fx-fore.js

@@ -768,30 +768,31 @@ export class FxFore extends HTMLElement {
      */
     async _lazyCreateInstance() {
         const model = this.querySelector('fx-model');
-        // Inherit shared models from the parent component
 
+        // ##### lazy creation should NOT take place if there's a parent Fore using shared instances
         const parentFore = this.parentNode.closest('fx-fore');
-		if (parentFore) {
-			const sharedInstances = Array.from(parentFore.getModel().querySelectorAll('fx-instance')).filter(instance => instance.hasAttribute('shared'));
-				for(const instance of sharedInstances) {
-					this.getModel().instances.push(instance);
-				}
-			this.getModel().updateModel();
-		}
-
-
-        if (model.instances.length === 0) {
-            // console.log('### lazy creation of instance');
-            const generatedInstance = document.createElement('fx-instance');
-            model.appendChild(generatedInstance);
+        if(parentFore){
+            const shared = parentFore.getModel().instances.filter(shared => shared.hasAttribute('shared'));
+            if(shared.length !==0) return;
+        }
 
-            const generated = document.implementation.createDocument(null, 'data', null);
-            // const newData = this._generateInstance(this, generated.firstElementChild);
-            this._generateInstance(this, generated.firstElementChild);
-            generatedInstance.instanceData = generated;
-            model.instances.push(generatedInstance);
-            // console.log('generatedInstance ', this.getModel().getDefaultInstanceData());
-            Fore.dispatch(this,'instance-loaded',{instance:this});
+        // still need to catch just in case...
+        try{
+            if (model.instances.length === 0) {
+                // console.log('### lazy creation of instance');
+                const generatedInstance = document.createElement('fx-instance');
+                model.appendChild(generatedInstance);
+
+                const generated = document.implementation.createDocument(null, 'data', null);
+                // const newData = this._generateInstance(this, generated.firstElementChild);
+                this._generateInstance(this, generated.firstElementChild);
+                generatedInstance.instanceData = generated;
+                model.instances.push(generatedInstance);
+                // console.log('generatedInstance ', this.getModel().getDefaultInstanceData());
+                Fore.dispatch(this,'instance-loaded',{instance:this});
+            }
+        }catch (e) {
+            console.warn('lazyCreateInstance created an error attempting to create a document', e.message);
         }
     }
 

package/src/fx-model.js

@@ -30,6 +30,7 @@ export class FxModel extends HTMLElement {
         this.modelConstructed = false;
         this.attachShadow({mode: 'open'});
         this.computes = 0;
+        this.fore = {};
     }
 
     get formElement() {
@@ -49,6 +50,7 @@ export class FxModel extends HTMLElement {
         }, {once: true});
 
         this.skipUpdate = false;
+        this.fore = this.parentNode;
     }
 
     static lazyCreateModelItem(model, ref, node) {
@@ -400,7 +402,7 @@ export class FxModel extends HTMLElement {
                         modelItem.required = compute;
                         this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
                         if (!modelItem.node.textContent) {
-                            console.log('validation failed on modelitem ', modelItem);
+                            console.log('node is required but has no value ', XPathUtil.getDocPath(modelItem.node));
                             valid = false;
                         }
                         // if (!compute) valid = false;
@@ -458,7 +460,16 @@ export class FxModel extends HTMLElement {
         // console.log('instances array ',Array.from(this.instances));
 
         const instArray = Array.from(this.instances);
-        const found = instArray.find(inst => inst.id === id);
+        let found = instArray.find(inst => inst.id === id);
+        if(!found) {
+            const parentFore = this.fore.parentNode.closest('fx-fore');
+            if (parentFore) {
+                console.log('shared instances from parent', this.parentNode.id);
+                const parentInstances = parentFore.getModel().instances;
+                const shared = parentInstances.filter(shared => shared.hasAttribute('shared'));
+                found = shared.find(found => found.id === id);
+            }
+        }
         if(!found){
             // return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
             Fore.dispatch(this, 'error', {

package/src/ui/fx-container.js

@@ -42,7 +42,6 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     } );
 */
 
-    this.setAttribute('tabindex','0');
   }
 
   /**

package/src/ui/fx-switch.js

@@ -18,7 +18,10 @@ class FxSwitch extends FxContainer {
   constructor() {
     super();
     this.formerCase = {};
+    this.selectedCase = null;
+    this.cases = null;
   }
+
   connectedCallback() {
     if (super.connectedCallback) {
       super.connectedCallback();
@@ -37,63 +40,83 @@ class FxSwitch extends FxContainer {
         </style>
         ${html}
     `;
+    this.cases = [];
+    this.formerCase=null;
   }
 
   async refresh(force) {
     super.refresh();
     // console.log('refresh on switch ');
-    const cases = this.querySelectorAll(':scope > fx-case');
-    let selectedCase = cases[0]; // first is always default
+    if(this.cases.length === 0){
+      this.cases = Array.from(this.querySelectorAll(':scope > fx-case'));
+    }
+
     if (this.isBound()) {
-      Array.from(cases).forEach(caseElem => {
-        const name = caseElem.getAttribute('name');
-        if (name === this.modelItem?.value) {
-          Fore.dispatch(caseElem,'select',{});
-          caseElem.classList.add('selected-case');
-          selectedCase = caseElem;
-        } else {
-          if(caseElem.classList.contains('selected-case')){
-            Fore.dispatch(caseElem,'deselect',{});
-          }
-          caseElem.classList.remove('selected-case');
-        }
-      });
-    } else {
-      selectedCase = this.querySelector(':scope > .selected-case');
-      // if none is selected select the first as default
-      if (!selectedCase) {
-        selectedCase = cases[0]; // if nothing is selected use the first case
-        Fore.dispatch(selectedCase,'select',{});
-        selectedCase.classList.add('selected-case');
-      }
+      this._handleBoundSwitch();
     }
-    if(this.formerCase !== selectedCase){
-      const visited = selectedCase.querySelectorAll('.visited');
-      Array.from(visited).forEach(v =>{
-        v.classList.remove('visited');
-      });
+    if(!this.selectedCase){
+      this.selectedCase = this.cases[0]; // first is always default
+      this.toggle(this.selectedCase);
     }
 
-    Fore.refreshChildren(selectedCase,force);
-    this.formerCase = selectedCase;
+    Fore.refreshChildren(this.selectedCase,force);
   }
 
+  _dispatchEvents(){
+    if(this.formerCase && this.formerCase !== this.selectedCase){
+      Fore.dispatch(this.formerCase,'deselect',{});
+    }
+    if(this.selectedCase.classList.contains('selected-case')){
+      Fore.dispatch(this.selectedCase,'select',{});
+    }
+  }
+
+  _resetVisited(){
+    const visited = this.selectedCase.querySelectorAll('.visited');
+    Array.from(visited).forEach(v =>{
+      v.classList.remove('visited');
+    });
+  }
+
+  /**
+   * handles switches being bound. If modelItem value matches the 'name' attribute that case will be toggled.
+   * @private
+   */
+  _handleBoundSwitch() {
+    Array.from(this.cases).forEach(caseElem => {
+      const name = caseElem.getAttribute('name');
+      if (name === this.modelItem?.value) {
+        this.toggle(caseElem);
+      }
+    });
+  }
+
+  /**
+   * Activates a fx-case element by switching CSS classes.
+   * Dispatches 'select' and 'deselect' events as appropriate.
+   *
+   * @param caseElement the fx-case element to activate
+   */
   toggle(caseElement) {
-    const cases = this.querySelectorAll('fx-case');
-    Array.from(cases).forEach(c => {
-      if (caseElement === c) {
-        // eslint-disable-next-line no-param-reassign
+    this.formerCase = this.selectedCase;
+    this.selectedCase = caseElement;
+    Array.from(this.cases).forEach(c => {
+      if (c === this.selectedCase) {
+        c.classList.remove('deselected-case');
         c.classList.add('selected-case');
-        Fore.dispatch(c,'select',{});
-        this.refresh();
+        c.inert = false;
       } else {
-        // eslint-disable-next-line no-param-reassign
-        if(c.classList.contains('selected-case')){
-          Fore.dispatch(c,'deselect',{});
-        }
         c.classList.remove('selected-case');
+        c.classList.add('deselected-case');
+        c.inert = true;
+        this._resetVisited();
       }
     });
+
+    if(this.selectedCase !== caseElement){
+      this.selectedCase = caseElement;
+    }
+    this._dispatchEvents();
   }
 }
 

package/src/xpath-evaluation.js

@@ -444,11 +444,10 @@ export function evaluateXPath(xpath, contextNode, formElement, variables = {}, o
 */
 export function evaluateXPath(xpath, contextNode, formElement, variables = {}, options={}) {
     try{
-        console.log('evaluateXPath',xpath);
         const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
         const variablesInScope = getVariablesInScope(formElement);
 
-        return fxEvaluateXPath(
+        const result = fxEvaluateXPath(
             xpath,
             contextNode,
             null,
@@ -465,6 +464,8 @@ export function evaluateXPath(xpath, contextNode, formElement, variables = {}, o
                 language: options.language || evaluateXPath.XPATH_3_1
             },
         );
+        // console.log('evaluateXPath',xpath, result);
+        return result;
     }catch (e){
         formElement.dispatchEvent(new CustomEvent('error', {
             composed: false,
@@ -506,7 +507,7 @@ export function evaluateXPathToFirstNode(xpath, contextNode, formElement) {
     try{
         const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
         const variablesInScope = getVariablesInScope(formElement);
-        return fxEvaluateXPathToFirstNode(xpath, contextNode, null, variablesInScope, {
+        const result = fxEvaluateXPathToFirstNode(xpath, contextNode, null, variablesInScope, {
             defaultFunctionNamespaceURI: XFORMS_NAMESPACE_URI,
             moduleImports: {
                 xf: XFORMS_NAMESPACE_URI,
@@ -515,6 +516,8 @@ export function evaluateXPathToFirstNode(xpath, contextNode, formElement) {
             functionNameResolver,
             namespaceResolver,
         });
+        // console.log('evaluateXPathToFirstNode',xpath, result);
+        return result;
     } catch (e){
         formElement.dispatchEvent(new CustomEvent('error', {
             composed: false,
@@ -542,7 +545,7 @@ export function evaluateXPathToNodes(xpath, contextNode, formElement) {
         const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
         const variablesInScope = getVariablesInScope(formElement);
 
-        return fxEvaluateXPathToNodes(xpath, contextNode, null, variablesInScope, {
+        const result = fxEvaluateXPathToNodes(xpath, contextNode, null, variablesInScope, {
             currentContext: {formElement},
             functionNameResolver,
             moduleImports: {
@@ -550,6 +553,8 @@ export function evaluateXPathToNodes(xpath, contextNode, formElement) {
             },
             namespaceResolver,
         });
+        // console.log('evaluateXPathToNodes',xpath, result);
+        return result;
     }catch (e){
         formElement.dispatchEvent(new CustomEvent('error', {
             composed: false,
@@ -982,7 +987,7 @@ const instance = (dynamicContext, string) => {
                 bubbles: true,
                 detail: {
                     origin: 'functions',
-                    message: `Function not found '${localName}'`,
+                    message: `Instance not found '${localName}'`,
                     level:'Error'
                 },
             }));
@@ -995,28 +1000,6 @@ const instance = (dynamicContext, string) => {
         return null;
     }
     return context;
-
-/*
-    const inst = string
-          ? formElement.getModel().getInstance(string)
-          : formElement.getModel().getDefaultInstance();
-*/
-
-/*
-    const inst = string
-        ? resolveId(string, formElement, 'fx-instance')
-        : formElement.querySelector(`fx-instance`);
-
-    if (lookup) {
-        const context = lookup.getDefaultContext();
-		if (!context) {
-			debugger;
-			return null;
-		}
-		return context;
-    }
-    return null;
-*/
 };
 
 registerCustomXPathFunction(