@jinntec/fore 1.10.0 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.10.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;
@@ -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/fore.js

@@ -686,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, {

package/src/fx-bind.js

@@ -80,7 +80,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
   _buildBindGraph() {
     if (this.bindType === 'xml') {
 		this.nodeset.forEach(node => {
-			          const instance = XPathUtil.resolveInstance(this);
+			          const instance = XPathUtil.resolveInstance(this,this.ref);
 
           const path = XPathUtil.getPath(node, instance);
         this.model.mainGraph.addNode(path, node);

package/src/fx-fore.js

@@ -85,9 +85,10 @@ export class FxFore extends HTMLElement {
         // this.addEventListener('model-construct-done', this._handleModelConstructDone);
         // todo: refactoring - these should rather go into connectedcallback
         this.addEventListener('message', this._displayMessage);
-        this.addEventListener('error', this._displayError);
+        // this.addEventListener('error', this._displayError);
+        this.addEventListener('error', this._logError);
         this.addEventListener('warn', this._displayWarning);
-        this.addEventListener('log', this._logError);
+        // this.addEventListener('log', this._logError);
         window.addEventListener('compute-exception', e => {
             console.error('circular dependency: ', e);
         });
@@ -176,7 +177,7 @@ export class FxFore extends HTMLElement {
 
         const html = `
            <noscript>This page uses Web Components and needs JavaScript to be enabled..</noscript>
-
+<!--           <slot name="errors"></slot> -->
            <jinn-toast id="message" gravity="bottom" position="left"></jinn-toast>
            <jinn-toast id="sticky" gravity="bottom" position="left" duration="-1" close="true" data-class="sticky-message"></jinn-toast>
            <jinn-toast id="error" text="error" duration="-1" data-class="error" close="true" position="right" gravity="top" escape-markup="false"></jinn-toast>
@@ -324,9 +325,9 @@ export class FxFore extends HTMLElement {
      * Will extract the `fx-fore` element from that target file and use and replace current `fx-fore` element with the loaded one.
      * @private
      */
-    _loadFromSrc() {
+    async _loadFromSrc() {
         // console.log('########## loading Fore from ', this.src, '##########');
-        fetch(this.src, {
+        await fetch(this.src, {
             method: 'GET',
             mode: 'cors',
             credentials: 'include',
@@ -450,42 +451,50 @@ export class FxFore extends HTMLElement {
         // console.timeEnd('refresh');
     }
 
-    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)
-					}
-				}
-			}
+    // async refresh(force, changedPaths) {
+    async refresh(force) {
+
+        /*
+
+                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 && 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;
 		}
+        this.isRefreshing = true;
+        console.log('### <<<<< refresh() >>>>>');
+
         // refresh () {
         // ### refresh Fore UI elements
         // if (!this.initialRun && this.toRefresh.length !== 0) {
@@ -556,10 +565,12 @@ export class FxFore extends HTMLElement {
         this.style.visibility='visible';
         Fore.dispatch(this, 'refresh-done', {});
 
-		this.isRefreshing = true;
-		this.parentNode.closest('fx-fore')?.refresh(false, changedPaths);
+		// this.isRefreshing = true;
+		// this.parentNode.closest('fx-fore')?.refresh(false, changedPaths);
+		this.parentNode.closest('fx-fore')?.refresh(false);
 		for (const subFore of this.querySelectorAll('fx-fore')) {
-			subFore.refresh(false, changedPaths);
+			// subFore.refresh(false, changedPaths);
+			subFore.refresh(false);
 		}
 		this.isRefreshing = false;
     }
@@ -649,6 +660,13 @@ export class FxFore extends HTMLElement {
      * @param node the node which will get updated with evaluation result
      */
     evaluateTemplateExpression(expr, node) {
+
+        // ### do not evaluate template expressions with nonrelevant sections
+        if(node.nodeType === Node.ATTRIBUTE_NODE && node.ownerElement.closest('[nonrelevant]')) return;
+        if(node.nodeType === Node.TEXT_NODE && node.parentNode.closest('[nonrelevant]')) return;
+        if(node.nodeType === Node.ELEMENT_NODE && node.closest('[nonrelevant]')) return;
+
+        // if(node.closest('[nonrelevant]')) return;
         const replaced = expr.replace(/{[^}]*}/g, match => {
             if (match === '{}') return match;
             const naked = match.substring(1, match.length - 1);
@@ -869,6 +887,8 @@ export class FxFore extends HTMLElement {
      */
     async _initUI() {
         // console.log('### _initUI()');
+        console.log('### <<<<< _initUI >>>>>');
+
         if (!this.initialRun) return;
         this.classList.add('initialRun');
         await this._lazyCreateInstance();
@@ -902,6 +922,8 @@ export class FxFore extends HTMLElement {
         this.ready = true;
         this.initialRun = false;
         // console.log('### >>>>> dispatching ready >>>>>', this);
+        console.log(`### <<<<< ${this.id} ready >>>>>`);
+
         // console.log('### modelItems: ', this.getModel().modelItems);
         Fore.dispatch(this, 'ready', {});
         // console.log('dataChanged', FxModel.dataChanged);
@@ -953,39 +975,23 @@ export class FxFore extends HTMLElement {
         toast.showToast(`WARN: ${path}:${msg}`);
     }
 
+
     _logError(e) {
         e.stopPropagation();
         e.preventDefault();
 
-        const div = document.createElement('div');
-        div.setAttribute('slot','messages');
-        div.setAttribute('data-level',e.detail.level);
-
-        const id = document.createElement('div');
-        id.textContent = `"${e.detail.id}"`;
-        div.appendChild(id);
-
-        const path = document.createElement('div');
-        const pathExpr = XPathUtil.shortenPath(evaluateXPathToString('path()',e.target,this));
-        // console.log('pathExpr',pathExpr)
-        path.textContent = pathExpr;
-        div.appendChild(path);
-
-        const message = document.createElement('div');
-        message.textContent = e.detail.message;
-        div.appendChild(message);
-
-        /*
-                const path = XPathUtil.shortenPath(evaluateXPathToString('path()',e.target,this));
-                div.innerText = `${path} :: ${e.detail.message}`;
-        */
-        this.appendChild(div);
-        div.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
-
-
-        const errorElement = evaluateXPathToFirstNode(`/${pathExpr}`,document,null);
-        errorElement.classList.add('fore-error');
+        console.error('ERROR',e.detail.message);
+        console.error(e.detail.origin);
+        if(e.detail.expr){
+            console.error('Failing expression',e.detail.expr);
+        }
+        console.error('---');
+        this._displayError(e);
+    }
 
+    _copyToClipboard(target){
+        console.log('copyToClipboard' , target.value)
+        navigator.clipboard.writeText(target.value);
 
     }