@jinntec/fore 1.10.0 → 1.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "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;
@@ -120,6 +80,7 @@ fx-output[readonly] img {
 
 .error {
     background: var(--paper-red-500);
+    display: flex;
 }
 
 fx-control, fx-trigger, .fx-checkbox {

package/src/actions/abstract-action.js

@@ -101,8 +101,6 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         super();
         this.detail = {};
         this.needsUpdate = false;
-
-		this.changedPathsQueue = [];
     }
 
     connectedCallback() {
@@ -158,20 +156,22 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         }
     }
 
-	async performSafe() {
-		try {
-			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', {
-                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.
@@ -185,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);
 
 
@@ -210,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 => {
@@ -224,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', {
@@ -240,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) {
@@ -290,10 +290,9 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
                 }
 
                 // Perform the action once. But quit if it errored
-				const result = this.performSafe();
-                if (!result) {
-					return;
-				}
+                if (!this.performSafe()) {
+                    return;
+                }
 
                 // Go for one more iteration
                 if (this.delay) {
@@ -308,8 +307,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
             // After loop is done call actionPerformed to update the model and UI
             await loop();
-			// TODO: pass the result(s)
-            this._finalizePerform(resolveThisEvent, []);
+            this._finalizePerform(resolveThisEvent);
 
             return;
         }
@@ -325,28 +323,23 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             }
         }
 
-        const result = await this.performSafe();
-		if (!result) {
-			this._finalizePerform(resolveThisEvent, []);
-			return;
-		}
-		this._finalizePerform(resolveThisEvent, result);
-
+        await this.performSafe();
+        this._finalizePerform(resolveThisEvent);
     }
 
-    _finalizePerform(resolveThisEvent, changedPaths) {
+    _finalizePerform(resolveThisEvent) {
         this.currentEvent = null;
-        this.actionPerformed(changedPaths);
+        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,
@@ -372,7 +365,6 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             this.evalInContext();
         }
 
-/*
         this.dispatchEvent(
             new CustomEvent('execute-action', {
                 composed: true,
@@ -381,14 +373,13 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
                 detail: {action: this, event: this.event},
             }),
         );
-*/
 
     }
 
     /**
      * calls the update cycle if action signalled that update is needed.
      */
-    actionPerformed(changedPaths = []) {
+    actionPerformed() {
         const model = this.getModel();
         if (!model) {
             return;
@@ -413,15 +404,13 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             // console.log('running update cycle for outermostHandler', this);
             model.recalculate();
             model.revalidate();
-            model.parentNode.refresh(false, [...this.changedPathsQueue, ...changedPaths]);
-			this.changedPathsQueue = [];
+            model.parentNode.refresh(true);
             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-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

@@ -228,11 +228,14 @@ export class FxInsert extends AbstractAction {
     // console.log('instance ', this.getModel().getDefaultContext());
     // Fore.dispatch()
 
-	  const instanceId = XPathUtil.resolveInstance(this, this.getAttribute('context'));
+	  // 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(originSequenceClone.parentNode, instanceId);
+    const xpath = XPathUtil.getPath(insertLocationNode.parentNode, instanceId);
+
 
 
     const path = Fore.getDomNodeIndexString(originSequenceClone);
@@ -281,8 +284,9 @@ export class FxInsert extends AbstractAction {
   }
 
   actionPerformed(changedPaths) {
-//    this.getModel().rebuild();
-    super.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;
       }
 

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 =>{
@@ -686,6 +464,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, {