@jinntec/fore 1.8.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -34,6 +34,7 @@
     "fontoxpath": "^3.30.0"
   },
   "devDependencies": {
+    "@types/cypress": "^1.1.3",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@open-wc/building-rollup": "^2.0.1",
     "@open-wc/eslint-config": "^7.0.0",
@@ -47,6 +48,7 @@
     "@rollup/plugin-strip": "^2.1.0",
     "@skypack/package-check": "^0.2.2",
     "@webcomponents/webcomponentsjs": "^2.6.0",
+    "cypress": "^13.3.0",
     "deepmerge": "^4.2.2",
     "es-dev-server": "^2.1.0",
     "eslint": "^8.16.0",
@@ -82,7 +84,10 @@
     "start:build": "cd dist && es-dev-server --open",
     "build": "rimraf dist && rollup -c rollup.config.js",
     "start": "es-dev-server --app-index doc/index.html --node-resolve --watch --open",
-    "install-demos": "cd demo && npm i"
+    "preversion": "npm run test",
+    "prepare": "npm run build",
+    "install-demos": "npm i && cd demo && npm i",
+    "start-cypress": "es-dev-server --app-index doc/index.html --node-resolve"
   },
   "keywords": [
     "Fore",

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()