@jinntec/fore 1.9.0 → 1.10.1

package/package.json

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

package/resources/fore.css

@@ -28,7 +28,7 @@ html {
     nonrelevant must always be hidden
 */
 [nonrelevant] {
-    display: none !important;
+    display: none;
 }
 
 [relevant] {
@@ -41,46 +41,6 @@ fx-control[required]:after {
     color: red;
 }
 
-[slot=messages] {
-    margin: 0 auto;
-    width: 100%;
-    padding: 2rem 0 1rem;
-    background: white;
-    border-radius: 0.5rem;
-    position: relative;
-}
-
-[slot=messages]::before {
-    content: attr(data-level);
-    padding: 0.5rem;
-    background: darkred;
-    color: white;
-    display: block;
-}
-
-[slot=messages] div {
-    color: black;
-    padding: 0.25rem;
-    border: thin solid #efefef;
-}
-
-[slot=messages] div::before {
-    width: 6rem;
-    display: inline-block;
-}
-
-[slot=messages] div:nth-child(1)::before {
-    content: 'Id:';
-}
-
-[slot=messages] div:nth-child(2)::before {
-    content: 'Path:';
-}
-
-[slot=messages] div:nth-child(3)::before {
-    content: 'Message:';
-}
-
 .fore-error {
     height: 2rem;
     background: darkred;
@@ -101,6 +61,10 @@ fx-alert {
     display: none;
 }
 
+[valid] fx-alert{
+    display: none;
+}
+
 .visited[invalid] fx-alert {
     display: block;
 }
@@ -116,6 +80,7 @@ fx-output[readonly] img {
 
 .error {
     background: var(--paper-red-500);
+    display: flex;
 }
 
 fx-control, fx-trigger, .fx-checkbox {

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

@@ -156,20 +156,22 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         }
     }
 
-	async performSafe() {
-		try {
-			await this.perform();
-			// Return true to indicate success
-			return true;
-		} catch (error) {
-			const stringifiedComponent = `<${this.localName} ${Array.from(this.attributes).map(attr=>`${attr.name}="${attr.value}"`).join(' ')}>…</${this.localName}>`;
-			await Fore.dispatch(this, 'error', {
-                message: `The action could not be performed. ${error} The error came from ${stringifiedComponent}`,
+    async performSafe() {
+        try {
+            await this.perform();
+            // Return true to indicate success
+            return true;
+        } catch (error) {
+            await Fore.dispatch(this, 'error', {
+                origin: this,
+                message: `Action execution failed`,
+                expr:XPathUtil.getDocPath(this),
+                level:'Error'
             });
-			// Return false to indicate failure. Any loops must be canceled
-			return false;
-		}
-	}
+            // Return false to indicate failure. Any loops must be canceled
+            return false;
+        }
+    }
 
     /**
      * executes the action.
@@ -183,7 +185,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
      * @param e
      */
     async execute(e) {
-        // console.log('execute', this, e);
+        console.log(this);
         // console.log('execute', this.event);
 
 
@@ -208,7 +210,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             e.preventDefault();
         }
 
-    let resolveThisEvent = () => {};
+        let resolveThisEvent = () => {};
         if (e && e.listenerPromises) {
             e.listenerPromises.push(
                 new Promise(resolve => {
@@ -222,13 +224,13 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         // console.log('executing e phase', e.eventPhase);
         if (FxFore.outermostHandler === null) {
             // console.time('outermostHandler');
-/*
-            console.info(
-                `%coutermost Action `,
-                'background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-                this,
-            );
-*/
+            /*
+                        console.info(
+                            `%coutermost Action `,
+                            'background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+                            this,
+                        );
+            */
             // console.log('starting outermost handler',this);
             FxFore.outermostHandler = this;
             this.dispatchEvent(new CustomEvent('outermost-action-start', {
@@ -238,15 +240,15 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             }));
         }
 
-/*
-        if (FxFore.outermostHandler !== this) {
-            console.info(
-                `%cAction `,
-                'background:orange; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-                this,
-            );
-        }
-*/
+        /*
+                if (FxFore.outermostHandler !== this) {
+                    console.info(
+                        `%cAction `,
+                        'background:orange; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+                        this,
+                    );
+                }
+        */
         // console.log('>>> outermostHandler', FxFore.outermostHandler);
 
         if (e) {
@@ -289,8 +291,8 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
                 // Perform the action once. But quit if it errored
                 if (!this.performSafe()) {
-					return;
-				}
+                    return;
+                }
 
                 // Go for one more iteration
                 if (this.delay) {
@@ -330,14 +332,14 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         this.actionPerformed();
         if (FxFore.outermostHandler === this) {
             FxFore.outermostHandler = null;
-/*
-            console.info(
-                `%coutermost Action done`,
-                'background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-                this,
-            );
-            console.timeEnd('outermostHandler');
-*/
+            /*
+                        console.info(
+                            `%coutermost Action done`,
+                            'background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+                            this,
+                        );
+                        console.timeEnd('outermostHandler');
+            */
             this.dispatchEvent(new CustomEvent('outermost-action-end', {
                 composed: true,
                 bubbles: true,

package/src/actions/fx-call.js

@@ -3,6 +3,7 @@ import {AbstractAction} from './abstract-action.js';
 import {evaluateXPath, evaluateXPathToString} from "../xpath-evaluation.js";
 import {Fore} from "../fore";
 import getInScopeContext from "../getInScopeContext";
+import {XPathUtil} from "../xpath-util.js";
 
 /**
  * `fx-call`
@@ -60,7 +61,15 @@ export default class FxCall extends AbstractAction {
         const action = document.querySelector(`#${this.action}`);
         if(action){
             await action.perform();
+        }else{
+            Fore.dispatch(this, 'error', {
+                origin: this,
+                message: `Action '${this.action}' not found`,
+                expr:XPathUtil.getDocPath(this),
+                level:'Error'
+            });
         }
+
     }
 
     _callFunction(){

package/src/actions/fx-delete.js

@@ -35,7 +35,7 @@ class FxDelete extends AbstractAction {
 
         // console.log('delete nodeset ', this.nodeset);
 
-        const instanceId = XPathUtil.resolveInstance(this);
+        const instanceId = XPathUtil.resolveInstance(this, this.ref);
         const instance = this.getModel().getInstance(instanceId);
 
         // const path = instance && this.nodeset.length !== 0 ? evaluateXPathToString('path()', this.nodeset[0], instance) : '';

package/src/actions/fx-insert.js

@@ -221,14 +221,22 @@ 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 instanceId = XPathUtil.resolveInstance(this, this.ref);
+    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 xpath = XPathUtil.getPath(insertLocationNode.parentNode, instanceId);
+
+
 
     const path = Fore.getDomNodeIndexString(originSequenceClone);
     this.dispatchEvent(
@@ -259,7 +267,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,7 +283,8 @@ export class FxInsert extends AbstractAction {
     return null;
   }
 
-  actionPerformed() {
+  actionPerformed(changedPaths) {
+    // ### make sure the necessary modelItems will get created
     this.getModel().rebuild();
     super.actionPerformed();
   }

package/src/actions/fx-load.js

@@ -113,11 +113,14 @@ class FxLoad extends AbstractAction {
             // for authoring errors we log errors directly to DOM
 
             this.dispatchEvent(
-                new CustomEvent('log', {
+                new CustomEvent('error', {
                     composed: false,
                     bubbles: true,
                     cancelable:true,
-                    detail: { id:this.id, message: `neiter template element nor Url was specified.`, level:'Error'},
+                    detail: {
+                        origin:this,
+                        message: `neither template element nor Url was specified.`,
+                        level:'Error'},
                 }),
             );
             return;

package/src/actions/fx-reload.js

@@ -1,5 +1,5 @@
-import { Fore } from '../fore.js';
 import { AbstractAction } from './abstract-action.js';
+import {Fore} from "../fore.js";
 
 /**
  * `fx-reload`

package/src/actions/fx-send.js

@@ -1,6 +1,7 @@
 import '../fx-model.js';
 import '../fx-submission.js';
 import { AbstractAction } from './abstract-action.js';
+import {XPathUtil} from "../xpath-util.js";
 
 /**
  * `fx-send` - finds and activates a `fx-submission` element.
@@ -45,16 +46,20 @@ class FxSend extends AbstractAction {
         new CustomEvent('error', {
           composed: true,
           bubbles: true,
-          detail: { message: `fx-submission element with id: '${this.submission}' not found` },
+          detail: { message: `fx-submission element with id: '${this.submission}' not found - ${XPathUtil.getDocPath(this)}` },
         }),
       );
 */
       this.dispatchEvent(
-          new CustomEvent('log', {
+          new CustomEvent('error', {
             composed: false,
             bubbles: true,
             cancelable:true,
-            detail: { id:this.id, message: `fx-submission element with id: '${this.submission}' not found`, level:'Error'},
+            detail: { id:this.id,
+                      origin: this,
+                      message: `<fx-submission id="${this.submission}"> not found`,
+                      expr:XPathUtil.getDocPath(this),
+                      level:'Error'},
           }),
       );
       return;

package/src/actions/fx-setfocus.js

@@ -1,4 +1,5 @@
 import {AbstractAction} from "./abstract-action.js";
+import {Fore} from "../fore";
 
 /**
  * `fx-setfocus`
@@ -32,7 +33,11 @@ export class FxSetfocus extends AbstractAction {
         let targetElement = document.querySelector(selector);
 
       if(!targetElement) {
-          console.warn('targetElement of setfocus action does not exist (yet)', selector);
+          Fore.dispatch(this, 'error', {
+              origin: this,
+              message: `Instance '${this.control}' not found`,
+              level:'Error'
+          });
           return;
       }
 
@@ -41,7 +46,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.
@@ -449,6 +686,9 @@ export class Fore {
     }
   }
 
+  static stringifiedComponent(element){
+    return `<${element.localName} ${Array.from(element.attributes).map(attr=>`${attr.name}="${attr.value}"`).join(' ')}>…</${element.localName}>`;
+  }
   static async loadForeFromUrl(hostElement, url) {
     // console.log('########## loading Fore from ', this.src, '##########');
     await fetch(url, {