@jinntec/fore 1.9.0 → 1.10.0

package/package.json

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

package/resources/fore.css

@@ -101,6 +101,10 @@ fx-alert {
     display: none;
 }
 
+[valid] fx-alert{
+    display: none;
+}
+
 .visited[invalid] fx-alert {
     display: block;
 }

package/src/DependencyNotifyingDomFacade.js

@@ -114,7 +114,7 @@ export class DependencyNotifyingDomFacade {
   // eslint-disable-next-line class-methods-use-this
   getNextSibling(node, bucket) {
     for (let sibling = node.nextSibling; sibling; sibling = sibling.nextSibling) {
-      if (!getBucketsForNode(sibling).includes(bucket)) {
+      if (bucket && !getBucketsForNode(sibling).includes(bucket)) {
         // eslint-disable-next-line no-continue
         continue;
       }
@@ -149,7 +149,7 @@ export class DependencyNotifyingDomFacade {
       previousSibling;
       previousSibling = previousSibling.previousSibling
     ) {
-      if (!getBucketsForNode(previousSibling).includes(bucket)) {
+      if (bucket && !getBucketsForNode(previousSibling).includes(bucket)) {
         // eslint-disable-next-line no-continue
         continue;
       }

package/src/actions/abstract-action.js

@@ -101,6 +101,8 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         super();
         this.detail = {};
         this.needsUpdate = false;
+
+		this.changedPathsQueue = [];
     }
 
     connectedCallback() {
@@ -158,9 +160,9 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
 	async performSafe() {
 		try {
-			await this.perform();
-			// Return true to indicate success
-			return true;
+			const changedPaths = await this.perform();
+			// Return truthy to indicate success
+			return changedPaths;
 		} catch (error) {
 			const stringifiedComponent = `<${this.localName} ${Array.from(this.attributes).map(attr=>`${attr.name}="${attr.value}"`).join(' ')}>…</${this.localName}>`;
 			await Fore.dispatch(this, 'error', {
@@ -288,7 +290,8 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
                 }
 
                 // Perform the action once. But quit if it errored
-                if (!this.performSafe()) {
+				const result = this.performSafe();
+                if (!result) {
 					return;
 				}
 
@@ -305,7 +308,8 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
             // After loop is done call actionPerformed to update the model and UI
             await loop();
-            this._finalizePerform(resolveThisEvent);
+			// TODO: pass the result(s)
+            this._finalizePerform(resolveThisEvent, []);
 
             return;
         }
@@ -321,13 +325,18 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             }
         }
 
-        await this.performSafe();
-        this._finalizePerform(resolveThisEvent);
+        const result = await this.performSafe();
+		if (!result) {
+			this._finalizePerform(resolveThisEvent, []);
+			return;
+		}
+		this._finalizePerform(resolveThisEvent, result);
+
     }
 
-    _finalizePerform(resolveThisEvent) {
+    _finalizePerform(resolveThisEvent, changedPaths) {
         this.currentEvent = null;
-        this.actionPerformed();
+        this.actionPerformed(changedPaths);
         if (FxFore.outermostHandler === this) {
             FxFore.outermostHandler = null;
 /*
@@ -363,6 +372,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             this.evalInContext();
         }
 
+/*
         this.dispatchEvent(
             new CustomEvent('execute-action', {
                 composed: true,
@@ -371,13 +381,14 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
                 detail: {action: this, event: this.event},
             }),
         );
+*/
 
     }
 
     /**
      * calls the update cycle if action signalled that update is needed.
      */
-    actionPerformed() {
+    actionPerformed(changedPaths = []) {
         const model = this.getModel();
         if (!model) {
             return;
@@ -402,13 +413,15 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             // console.log('running update cycle for outermostHandler', this);
             model.recalculate();
             model.revalidate();
-            model.parentNode.refresh(true);
+            model.parentNode.refresh(false, [...this.changedPathsQueue, ...changedPaths]);
+			this.changedPathsQueue = [];
             this.dispatchActionPerformed();
         } else if (this.needsUpdate) {
             // console.log('Update delayed!');
             // We need an update, but the outermost action handler is not done yet. Make this clear!
             // console.log('running actionperformed on', this, ' to be updated by ', FxFore.outermostHandler);
             FxFore.outermostHandler.needsUpdate = true;
+			FxFore.outermostHandler.changedPathsQueue.push(...changedPaths);
         }
 
         // console.log('running actionperformed on', this, ' outermostHandler', FxFore.outermostHandler);

package/src/actions/fx-insert.js

@@ -221,14 +221,19 @@ export class FxInsert extends AbstractAction {
         }
       }
     }
+	  // instance('default')/items/item[index()]
 
     // console.log('insert context item ', insertLocationNode);
     // console.log('parent ', insertLocationNode.parentNode);
     // console.log('instance ', this.getModel().getDefaultContext());
     // Fore.dispatch()
 
-    const inst = this.getModel().getInstance(XPathUtil.resolveInstance(this));
-    // console.log('<<<<<<< resolved instance', inst);
+	  const instanceId = XPathUtil.resolveInstance(this, this.getAttribute('context'));
+    const inst = this.getModel().getInstance(instanceId);
+      // console.log('<<<<<<< resolved instance', inst);
+	  // Note: the parent to insert under is always the parent of the inserted node. The 'context' is not always the parent if the sequence is empty, or the position is different
+	  const xpath = XPathUtil.getPath(originSequenceClone.parentNode, instanceId);
+
 
     const path = Fore.getDomNodeIndexString(originSequenceClone);
     this.dispatchEvent(
@@ -259,7 +264,9 @@ export class FxInsert extends AbstractAction {
       }),
     );
 
-    this.needsUpdate = true;
+      this.needsUpdate = true;
+	  console.log('Changed!', xpath)
+	  return [xpath];
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -273,9 +280,9 @@ export class FxInsert extends AbstractAction {
     return null;
   }
 
-  actionPerformed() {
-    this.getModel().rebuild();
-    super.actionPerformed();
+  actionPerformed(changedPaths) {
+//    this.getModel().rebuild();
+    super.actionPerformed(changedPaths);
   }
 
   /**

package/src/actions/fx-setfocus.js

@@ -41,7 +41,7 @@ export class FxSetfocus extends AbstractAction {
       if(parentIItem){
           targetElement = parentIItem.querySelector(selector);
           this._focus(targetElement);
-          return;
+          // return;
       }
 
       // ### the target element is hosted within a repeat

package/src/fore.js

@@ -1,5 +1,5 @@
 import getInScopeContext from "./getInScopeContext.js";
-import {evaluateXPathToString} from "./xpath-evaluation.js";
+import {evaluateXPath, evaluateXPathToFirstNode, evaluateXPathToString, evaluateXPathToNodes} from "./xpath-evaluation.js";
 import { XPathUtil } from "./xpath-util.js";
 
 /**
@@ -18,6 +18,243 @@ 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 =>{
+      // attrMap.set(attr.nodeName,attr.nodeValue);
+      // if(attr.nodeName !== 'xmlns'){
+      //   if(attr.nodeValue !== ''){
+      //     attrPredicate += `[@${attr.nodeName}='${attr.nodeValue}']`;
+      //   }else{
+          attrPredicate += `[@${attr.nodeName}]`;
+        // }
+      // }
+    });
+    return attrPredicate
+  }
+
 
   /**
    * returns true if target element is the widget itself or some element within the widget.

package/src/fx-bind.js

@@ -79,8 +79,10 @@ export class FxBind extends foreElementMixin(HTMLElement) {
 
   _buildBindGraph() {
     if (this.bindType === 'xml') {
-      this.nodeset.forEach(node => {
-        const path = XPathUtil.getPath(node);
+		this.nodeset.forEach(node => {
+			          const instance = XPathUtil.resolveInstance(this);
+
+          const path = XPathUtil.getPath(node, instance);
         this.model.mainGraph.addNode(path, node);
 
         /* ### catching references in the 'ref' itself...
@@ -156,8 +158,10 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       if (!this.model.mainGraph.hasNode(nodeHash)) {
         this.model.mainGraph.addNode(nodeHash, node);
       }
-      refs.forEach(ref => {
-        const otherPath = XPathUtil.getPath(ref);
+		refs.forEach(ref => {
+			const instance = XPathUtil.resolveInstance(this, path);
+
+			const otherPath = XPathUtil.getPath(ref, instance);
         // console.log('otherPath', otherPath)
 
         // todo: nasty hack to prevent duplicate pathes like 'a[1]' and 'a[1]/text()[1]' to end up as separate nodes in the graph
@@ -301,8 +305,10 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     const targetNode = node;
 
     // const path = fx.evaluateXPath('path()',node);
-    // const path = this.getPath(node);
-    const path = XPathUtil.getPath(node);
+      // const path = this.getPath(node);
+	  const instance = XPathUtil.resolveInstance(this, this.ref);
+
+      const path = XPathUtil.getPath(node, instance);
     // const shortPath = this.shortenPath(path);
 
     // ### constructing default modelitem - will get evaluated during recalculate()

package/src/fx-fore.js

@@ -295,6 +295,7 @@ export class FxFore extends HTMLElement {
         this.addEventListener('path-mutated', () => {
             this.someInstanceDataStructureChanged = true;
         });
+
     }
 
     _injectDevtools(){
@@ -449,7 +450,42 @@ export class FxFore extends HTMLElement {
         // console.timeEnd('refresh');
     }
 
-    async refresh(force) {
+    async refresh(force, changedPaths) {
+		if (!changedPaths) {
+			changedPaths = this.toRefresh.map(item => item.path);
+		} else {
+			this.toRefresh.push(
+				...changedPaths
+					.map(
+						path =>
+						this.getModel()
+							.modelItems
+							.find(item => item.path === path)
+					)
+					.filter(Boolean)
+			);
+
+			for(const changedPath of changedPaths) {
+				for (const repeat of this.querySelectorAll('fx-repeat')) {
+					if (repeat.closest('fx-fore') !== this) {
+						continue;
+					}
+
+					if (repeat.touchedPaths.has(changedPath)) {
+						// Make a temporary model-item-like structure for this
+						this.toRefresh.push({
+							path: changedPath,
+							boundControls: [repeat]
+						});
+
+						console.log('Found a repeat to update!!!', repeat)
+					}
+				}
+			}
+		}
+		if (this.isRefreshing) {
+			return;
+		}
         // refresh () {
         // ### refresh Fore UI elements
         // if (!this.initialRun && this.toRefresh.length !== 0) {
@@ -468,7 +504,7 @@ export class FxFore extends HTMLElement {
                 }
 
                 // ### check if other controls depend on current modelItem
-                const {mainGraph} = this.getModel();
+                const { mainGraph } = this.getModel();
                 if (mainGraph && mainGraph.hasNode(modelItem.path)) {
                     const deps = this.getModel().mainGraph.dependentsOf(modelItem.path, false);
                     // ### iterate dependant modelItems and refresh all their boundControls
@@ -501,7 +537,9 @@ export class FxFore extends HTMLElement {
             });
 */
 
-            Fore.refreshChildren(this, true);
+            if(this.inited){
+                Fore.refreshChildren(this, true);
+            }
             // console.timeEnd('refreshChildren');
         }
 
@@ -517,6 +555,13 @@ export class FxFore extends HTMLElement {
         // this.initialRun = false;
         this.style.visibility='visible';
         Fore.dispatch(this, 'refresh-done', {});
+
+		this.isRefreshing = true;
+		this.parentNode.closest('fx-fore')?.refresh(false, changedPaths);
+		for (const subFore of this.querySelectorAll('fx-fore')) {
+			subFore.refresh(false, changedPaths);
+		}
+		this.isRefreshing = false;
     }
 
     /**
@@ -705,6 +750,18 @@ export class FxFore extends HTMLElement {
      */
     async _lazyCreateInstance() {
         const model = this.querySelector('fx-model');
+        // Inherit shared models from the parent component
+
+        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');
@@ -716,7 +773,7 @@ export class FxFore extends HTMLElement {
             generatedInstance.instanceData = generated;
             model.instances.push(generatedInstance);
             // console.log('generatedInstance ', this.getModel().getDefaultInstanceData());
-            Fore.dispatch(this,'instance-loaded',{instance:this})
+            Fore.dispatch(this,'instance-loaded',{instance:this});
         }
     }
 

package/src/fx-model.js

@@ -67,7 +67,9 @@ export class FxModel extends HTMLElement {
         // const path = fx.evaluateXPath('path()',node);
         let path;
         if (node.nodeType) {
-            path = XPathUtil.getPath(node);
+			const instance = XPathUtil.resolveInstance(model, ref);
+
+            path = XPathUtil.getPath(node, instance);
         } else {
             path = null;
             targetNode = node;

package/src/fx-submission.js

@@ -339,26 +339,20 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
 /*
         if(this.replace === 'merge'){
+            if(targetInstance.type !== 'xml') {
+                Fore.dispatch(this, "warn", {'message': 'merging of instances only work for type xml'});
+            }
             if (targetInstance && targetInstance.type === 'xml') {
                 targetInstance.partialInstance = data;
-
-                const merged = this._mergeXML(targetInstance.instanceData,targetInstance.partialInstance);
+                // const resultDoc = new DOMParser(`${data.nodeName}`, 'application/xml');
+                // console.log('resultDoc', resultDoc)
+                const merged = Fore.combine(targetInstance.instanceData.firstElementChild, data.firstElementChild, this,null);
                 console.log('merged', merged);
 
                 targetInstance.instanceData = merged;
                 console.log('merging partial instance',targetInstance.partialInstance)
-                /!*
-                targetInstance.instanceData not touched here as we want to keep the default instance unmodified as the full template for the UI.
-                *!/
-
-                // Skip any refreshes if the model is not yet inited#
-                // duplicate from replace='instance'
-                // if (this.model.inited) {
-                    this.model.updateModel(); // force update
-                const owner = this.getOwnerForm();
-                // owner.mergePartial = true;
-                owner.refresh(true);
-                // }
+                this.model.updateModel();
+                this.getOwnerForm().refresh(true);
             }
         }
 */