@jinntec/fore 2.6.0 → 2.7.0

package/src/ForeElementMixin.js

@@ -1,152 +1,150 @@
 import { XPathUtil } from './xpath-util.js';
 import { FxModel } from './fx-model.js';
 import {
-    evaluateXPath,
-    evaluateXPathToFirstNode,
-    evaluateXPathToString,
+  evaluateXPath,
+  evaluateXPathToFirstNode,
+  evaluateXPathToString,
 } from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
 import { Fore } from './fore.js';
 import DependentXPathQueries from './DependentXPathQueries.js';
+import { getPath } from './xpath-path.js';
 
 /**
  * Mixin containing all general functions that are shared by all Fore element classes.
  * @extends {HTMLElement}
  */
 export default class ForeElementMixin extends HTMLElement {
-    static get properties() {
-        return {
-            /**
-             * context object for evaluation
-             */
-            context: {
-                type: Object,
-            },
-            /**
-             * the model of this element
-             */
-            model: {
-                type: Object,
-            },
-            /**
-             * The modelitem object associated to the bound node holding the evaluated state.
-             */
-            modelItem: {
-                type: Object,
-            },
-            /**
-             * the node(s) bound by this element
-             */
-            nodeset: {
-                type: Object,
-            },
-            /**
-             * XPath binding expression pointing to bound node
-             */
-            ref: {
-                type: String,
-            },
-            inScopeVariables: {
-                type: Map,
-            },
-        };
-    }
-
-    constructor() {
-        super();
-        this.context = null;
-        this.model = null;
-        this.modelItem = null;
-        this.ref = this.hasAttribute('ref') ? this.getAttribute('ref') : '';
-        /**
-         * @type {Map<string, import('./fx-var.js').FxVariable>}
-         */
-        this.inScopeVariables = new Map();
-
-        this.dependencies = new DependentXPathQueries();
-    }
-
-    connectedCallback() {
-        if (this.parentElement) {
-            this.dependencies.setParentDependencies(
-                this.parentElement?.closest('[ref]')?.dependencies,
-            );
-        }
-    }
+  static get properties() {
+    return {
+      /**
+       * context object for evaluation
+       */
+      context: {
+        type: Object,
+      },
+      /**
+       * the model of this element
+       */
+      model: {
+        type: Object,
+      },
+      /**
+       * The modelitem object associated to the bound node holding the evaluated state.
+       */
+      modelItem: {
+        type: Object,
+      },
+      /**
+       * the node(s) bound by this element
+       */
+      nodeset: {
+        type: Object,
+      },
+      /**
+       * XPath binding expression pointing to bound node
+       */
+      ref: {
+        type: String,
+      },
+      inScopeVariables: {
+        type: Map,
+      },
+    };
+  }
 
+  constructor() {
+    super();
+    this.context = null;
+    this.model = null;
+    this.modelItem = null;
+    this.ref = this.hasAttribute('ref') ? this.getAttribute('ref') : '';
     /**
-     * @returns {import('./fx-model.js').FxModel}
+     * @type {Map<string, import('./fx-var.js').FxVariable>}
      */
-    getModel() {
-        // console.log('getModel this ', this);
-        if (this.model) {
-            return this.model;
-        }
-        // const ownerForm = this.closest('fx-fore');
-        // const ownerForm = this.getOwnerForm(this);
-        const ownerForm = this.getOwnerForm();
-        return ownerForm.querySelector('fx-model');
+    this.inScopeVariables = new Map();
+
+    this.dependencies = new DependentXPathQueries();
+    this.ownerForm = null;
+  }
+
+  connectedCallback() {
+    if (this.parentElement) {
+      this.dependencies.setParentDependencies(this.parentElement?.closest('[ref]')?.dependencies);
     }
 
-    /**
-     *
-     * @returns {import('./fx-fore.js').FxFore} The fx-fore element associated with this form node
-     */
-    getOwnerForm() {
-        let currentElement = this;
-        while (currentElement && currentElement.parentNode) {
-            // console.log('current ', currentElement);
+    // The fx-model linked to here won't ever change
+    this.model = this.getModel();
+    this.ownerForm = this.getOwnerForm();
+  }
 
-            if (currentElement.nodeName.toUpperCase() === 'FX-FORE') {
-                return currentElement;
-            }
+  /**
+   * @returns {import('./fx-model.js').FxModel}
+   */
+  getModel() {
+    // console.log('getModel this ', this);
+    if (this.model) {
+      return this.model;
+    }
+    // const ownerForm = this.closest('fx-fore');
+    // const ownerForm = this.getOwnerForm(this);
+    const ownerForm = this.getOwnerForm();
+    return ownerForm.querySelector('fx-model');
+  }
 
-            if (currentElement.parentNode instanceof DocumentFragment) {
-                currentElement = currentElement.parentNode.host;
-            } else {
-                currentElement = currentElement.parentNode;
-            }
-        }
+  /**
+   *
+   * @returns {import('./fx-fore.js').FxFore} The fx-fore element associated with this form node
+   */
+  getOwnerForm() {
+    if (this.ownerForm) {
+      return this.ownerForm;
+    }
+    let currentElement = this;
+    while (currentElement && currentElement.parentNode) {
+      // console.log('current ', currentElement);
+      if (currentElement.nodeName.toUpperCase() === 'FX-FORE') {
         return currentElement;
+      }
+
+      if (currentElement.parentNode instanceof DocumentFragment) {
+        currentElement = currentElement.parentNode.host;
+      } else {
+        currentElement = currentElement.parentNode;
+      }
     }
+    return null;
+  }
 
-    /**
-     * evaluation of fx-bind and UiElements differ in details so that each class needs it's own implementation.
-     */
-    evalInContext() {
-        this.dependencies.resetDependencies();
-        // const inscopeContext = this.getInScopeContext();
-        const model = this.getModel();
-        if (!model) {
-            return;
-        }
-        let inscopeContext;
-        if (this.hasAttribute('context')) {
-            inscopeContext = getInScopeContext(
-                this.getAttributeNode('context') || this,
-                this.context,
-            );
-        }
-        if (this.hasAttribute('ref')) {
-            inscopeContext = getInScopeContext(
-                this.getAttributeNode('ref') || this,
-                this.ref,
-            );
-            this.dependencies.addXPath(this.ref);
-        }
-        if (!inscopeContext && this.getModel().instances.length !== 0) {
-            // ### always fall back to default context with there's neither a 'context' or 'ref' present
-            inscopeContext = this.getModel()
-                .getDefaultInstance()
-                .getDefaultContext();
-            // console.warn('no in scopeContext for ', this);
-            // console.warn('using default context ', this);
-            // return;
-        }
-        if (this.ref === '') {
-            this.nodeset = inscopeContext;
-        } else if (Array.isArray(inscopeContext)) {
-            /*
+  /**
+   * evaluation of fx-bind and UiElements differ in details so that each class needs it's own implementation.
+   */
+  evalInContext() {
+    this.dependencies.resetDependencies();
+    // const inscopeContext = this.getInScopeContext();
+    const model = this.getModel();
+    if (!model) {
+      return;
+    }
+    let inscopeContext;
+    if (this.hasAttribute('context')) {
+      inscopeContext = getInScopeContext(this.getAttributeNode('context') || this, this.context);
+    }
+    if (this.hasAttribute('ref')) {
+      inscopeContext = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
+      this.dependencies.addXPath(this.ref);
+    }
+    if (!inscopeContext && this.getModel().instances.length !== 0) {
+      // ### always fall back to default context with there's neither a 'context' or 'ref' present
+      inscopeContext = this.getModel().getDefaultInstance().getDefaultContext();
+      // console.warn('no in scopeContext for ', this);
+      // console.warn('using default context ', this);
+      // return;
+    }
+    if (this.ref === '') {
+      this.nodeset = inscopeContext;
+    } else if (Array.isArray(inscopeContext)) {
+      /*
       inscopeContext.forEach(n => {
         if (XPathUtil.isSelfReference(this.ref)) {
         this.nodeset = inscopeContext;
@@ -157,177 +155,184 @@ export default class ForeElementMixin extends HTMLElement {
         }
       });
   */
-            // this.nodeset = evaluateXPathToFirstNode(this.ref, inscopeContext[0], this);
-            this.nodeset = evaluateXPath(this.ref, inscopeContext[0], this);
-        } else {
-            // this.nodeset = fx.evaluateXPathToFirstNode(this.ref, inscopeContext, null, {namespaceResolver: this.namespaceResolver});
-            if (!inscopeContext) return;
-            const { nodeType } = inscopeContext;
-            if (nodeType && !XPathUtil.isAbsolutePath(this.ref)) {
-                this.nodeset = evaluateXPathToFirstNode(
-                    this.ref,
-                    inscopeContext,
-                    this,
-                );
-            } else {
-                [this.nodeset] = evaluateXPath(this.ref, inscopeContext, this);
-            }
-        }
-        // console.log('UiElement evaluated to nodeset: ', this.nodeset);
+      // this.nodeset = evaluateXPathToFirstNode(this.ref, inscopeContext[0], this);
+      this.nodeset = evaluateXPath(this.ref, inscopeContext[0], this);
+    } else {
+      // this.nodeset = fx.evaluateXPathToFirstNode(this.ref, inscopeContext, null, {namespaceResolver: this.namespaceResolver});
+      if (!inscopeContext) return;
+      const { nodeType } = inscopeContext;
+      if (nodeType && !XPathUtil.isAbsolutePath(this.ref)) {
+        this.nodeset = evaluateXPathToFirstNode(this.ref, inscopeContext, this);
+      } else {
+        [this.nodeset] = evaluateXPath(this.ref, inscopeContext, this);
+      }
     }
+    // console.log('UiElement evaluated to nodeset: ', this.nodeset);
+  }
 
-    /**
-     * resolves template expressions for a single attribute
-     * @param {string} expr an attribute value containing curly brackets containing XPath expressions to evaluate
-     * @param {Node} node the attribute node used for scoped resolution
-     * @returns {string}
-     * @protected
-     */
-    evaluateAttributeTemplateExpression(expr, node) {
-        const matches = expr.match(/{[^}]*}/g);
-        if (matches) {
-            matches.forEach((match) => {
-                // console.log('match ', match);
-                const naked = match.substring(1, match.length - 1);
-                const inscope = getInScopeContext(node, naked);
-                const result = evaluateXPathToString(naked, inscope, this);
-                const replaced = expr.replaceAll(match, result);
-                // console.log('replacing ', expr, ' with ', replaced);
-                expr = replaced;
-            });
-        }
-        return expr;
+  /**
+   * resolves template expressions for a single attribute
+   * @param {string} expr an attribute value containing curly brackets containing XPath expressions to evaluate
+   * @param {Node} node the attribute node used for scoped resolution
+   * @returns {string}
+   * @protected
+   */
+  evaluateAttributeTemplateExpression(expr, node) {
+    const matches = expr.match(/{[^}]*}/g);
+    if (matches) {
+      matches.forEach(match => {
+        // console.log('match ', match);
+        const naked = match.substring(1, match.length - 1);
+        const inscope = getInScopeContext(node, naked);
+        const result = evaluateXPathToString(naked, inscope, this);
+        const replaced = expr.replaceAll(match, result);
+        // console.log('replacing ', expr, ' with ', replaced);
+        expr = replaced;
+      });
     }
+    return expr;
+  }
+
+  isNotBound() {
+    return !this.hasAttribute('ref');
+  }
 
-    isNotBound() {
-        return !this.hasAttribute('ref');
+  isBound() {
+    return this.hasAttribute('ref');
+  }
+
+  getBindingExpr() {
+    if (this.hasAttribute('ref')) {
+      return this.getAttribute('ref');
+    }
+    // try to get closest parent bind
+    const parent = XPathUtil.getClosest('[ref]', this.parentNode);
+    if (!parent) {
+      return 'instance()'; // the default instance
     }
+    return parent.getAttribute('ref');
+  }
 
-    isBound() {
-        return this.hasAttribute('ref');
+  /**
+   * @returns {import('./fx-instance.js').FxInstance}
+   */
+  getInstance() {
+    if (this.ref.startsWith('instance(')) {
+      const instId = XPathUtil.getInstanceId(this.ref);
+      return this.getModel().getInstance(instId);
     }
+    return this.getModel().getInstance('default');
+  }
 
-    getBindingExpr() {
-        if (this.hasAttribute('ref')) {
-            return this.getAttribute('ref');
-        }
-        // try to get closest parent bind
-        const parent = XPathUtil.getClosest('[ref]', this.parentNode);
-        if (!parent) {
-            return 'instance()'; // the default instance
-        }
-        return parent.getAttribute('ref');
+  _getParentBindingElement(start) {
+    if (start.parentNode.host) {
+      const { host } = start.parentNode;
+      if (host.hasAttribute('ref')) {
+        return host;
+      }
+    } else if (start.parentNode) {
+      if (start.parentNode.hasAttribute('ref')) {
+        return this.parentNode;
+      }
+      this._getParentBindingElement(this.parentNode);
     }
+    return null;
+  }
 
-    /**
-     * @returns {import('./fx-instance.js').FxInstance}
-     */
-    getInstance() {
-        if (this.ref.startsWith('instance(')) {
-            const instId = XPathUtil.getInstanceId(this.ref);
-            return this.getModel().getInstance(instId);
-        }
-        return this.getModel().getInstance('default');
+  /**
+   * @returns {import('./modelitem.js').ModelItem}
+   */
+  getModelItem() {
+    if (!this.getModel()) return;
+
+    // First try to find by node reference
+    const mi = this.getModel().getModelItem(this.nodeset);
+    if (mi) {
+      this.modelItem = mi;
     }
 
-    _getParentBindingElement(start) {
-        if (start.parentNode.host) {
-            const { host } = start.parentNode;
-            if (host.hasAttribute('ref')) {
-                return host;
-            }
-        } else if (start.parentNode) {
-            if (start.parentNode.hasAttribute('ref')) {
-                return this.parentNode;
-            }
-            this._getParentBindingElement(this.parentNode);
-        }
-        return null;
+    const repeated = XPathUtil.getClosest('fx-repeatitem', this);
+    let existed;
+    if (repeated) {
+      const { index } = repeated;
+      if (Array.isArray(this.nodeset)) {
+        existed = this.getModel().getModelItem(this.nodeset[index - 1]);
+      } else {
+        existed = this.getModel().getModelItem(this.nodeset);
+      }
+    } else {
+      existed = this.nodeset ? this.getModel().getModelItem(this.nodeset) : null;
     }
 
-    /**
-     * @returns {import('./modelitem.js').ModelItem}
-     */
-    getModelItem() {
-        if (!this.getModel()) return;
-        const mi = this.getModel().getModelItem(this.nodeset);
-        if (mi) {
-            this.modelItem = mi;
-        }
+    // If we couldn't find by node reference, try to find by path
+    if (!existed && this.nodeset) {
+      // Get the path for the current nodeset
+      const instanceId = XPathUtil.resolveInstance(this, this.ref);
+      let targetNode =
+        this.nodeset.nodeType === Node.TEXT_NODE ? this.nodeset.parentNode : this.nodeset;
 
-        const repeated = XPathUtil.getClosest('fx-repeatitem', this);
-        let existed;
-        if (repeated) {
-            const { index } = repeated;
-            if (Array.isArray(this.nodeset)) {
-                existed = this.getModel().getModelItem(this.nodeset[index - 1]);
-            } else {
-                existed = this.getModel().getModelItem(this.nodeset);
-            }
-        } else {
-            existed = this.nodeset
-                ? this.getModel().getModelItem(this.nodeset)
-                : null;
-        }
+      if (targetNode?.nodeType) {
+        const path = getPath(targetNode, instanceId);
 
-        if (!existed) {
-            const lazyCreatedModelItem = FxModel.lazyCreateModelItem(
-                this.getModel(),
-                this.ref,
-                this.nodeset,
-                this,
-            );
-            this.modelItem = lazyCreatedModelItem;
-            return lazyCreatedModelItem;
-        }
-        this.modelItem = existed;
-
-        return existed;
-    }
+        // Try to find a ModelItem with this path
+        existed = this.getModel().modelItems.find(item => item.path === path);
 
-    /**
-     * Returns the effective value for the element.
-     * a: look for 'value' attribute and if present evaluate it and return the resulting value
-     * b: look for textContent and return the value if present
-     * c: return null
-     * @returns {string}
-     */
-    getValue() {
-        if (this.hasAttribute('value')) {
-            const valAttr = this.getAttribute('value');
-            try {
-                const inscopeContext = getInScopeContext(this, valAttr);
-                return evaluateXPathToString(
-                    valAttr,
-                    inscopeContext,
-                    this.getOwnerForm(),
-                );
-            } catch (error) {
-                console.error(error);
-                Fore.dispatch(this, 'error', { message: error });
-            }
-        }
-        if (this.textContent) {
-            return this.textContent;
+        if (existed) {
+          // Update the node reference in the existing ModelItem
+          existed.node = targetNode;
         }
-        return null;
-    }
-
-    /**
-     * @returns {Node}
-     */
-    getInScopeContext() {
-        return getInScopeContext(
-            this.getAttributeNode('ref') || this,
-            this.ref,
+      }
+      if (!existed) {
+        const lazyCreatedModelItem = FxModel.lazyCreateModelItem(
+          this.getModel(),
+          this.ref,
+          this.nodeset,
+          this,
         );
+        this.modelItem = lazyCreatedModelItem;
+        return lazyCreatedModelItem;
+      }
     }
+    this.modelItem = existed;
 
-    /**
-     * Set variables in scope here
-     * @param {Map} inScopeVariables
-     */
-    setInScopeVariables(inScopeVariables) {
-        this.inScopeVariables = inScopeVariables;
+    return existed;
+  }
+  /**
+   * Returns the effective value for the element.
+   * a: look for 'value' attribute and if present evaluate it and return the resulting value
+   * b: look for textContent and return the value if present
+   * c: return null
+   * @returns {string}
+   */
+  getValue() {
+    if (this.hasAttribute('value')) {
+      const valAttr = this.getAttribute('value');
+      try {
+        const inscopeContext = getInScopeContext(this, valAttr);
+        return evaluateXPathToString(valAttr, inscopeContext, this.getOwnerForm());
+      } catch (error) {
+        console.error(error);
+        Fore.dispatch(this, 'error', { message: error });
+      }
     }
+    if (this.textContent) {
+      return this.textContent;
+    }
+    return null;
+  }
+
+  /**
+   * @returns {Node}
+   */
+  getInScopeContext() {
+    return getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
+  }
+
+  /**
+   * Set variables in scope here
+   * @param {Map} inScopeVariables
+   */
+  setInScopeVariables(inScopeVariables) {
+    this.inScopeVariables = inScopeVariables;
+  }
 }

package/src/actions/abstract-action.js

@@ -4,6 +4,7 @@ import getInScopeContext from '../getInScopeContext.js';
 import { Fore } from '../fore.js';
 import { FxFore } from '../fx-fore.js';
 import { XPathUtil } from '../xpath-util.js';
+import { getDocPath } from '../xpath-path.js';
 
 /**
  * @param {number} howLong How long to wait, in ms
@@ -177,7 +178,7 @@ export class AbstractAction extends ForeElementMixin {
       }
     } else {
       this.targetElement = this.parentNode;
-      if(!this.targetElement || this.targetElement.nodeType !== Node.ELEMENT_NODE) return;
+      if (!this.targetElement || this.targetElement.nodeType !== Node.ELEMENT_NODE) return;
       this.targetElement.addEventListener(this.event, e => this.execute(e), {
         capture: this.phase === 'capture',
       });
@@ -194,7 +195,7 @@ export class AbstractAction extends ForeElementMixin {
       await Fore.dispatch(this, 'error', {
         origin: this,
         message: 'Action execution failed',
-        expr: XPathUtil.getDocPath(this),
+        expr: error,
         level: 'Error',
       });
       // Return false to indicate failure. Any loops must be canceled
@@ -218,15 +219,9 @@ export class AbstractAction extends ForeElementMixin {
     // console.log(this, this.event);
     if (this.event) {
       if (this.event === 'submit-done') {
-        console.info(
-          `%csubmit-done ${this.event} #${this?.parentNode?.id}`,
-          'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
-        );
+        console.info(`📌 ${this.event} #${this?.parentNode?.id}`);
       } else {
-        console.info(
-          `%cexecuting ${this.constructor.name} ${this.event}`,
-          'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
-        );
+        console.info(`📌 ${this.constructor.name} ${this.event}`);
       }
     } else {
       console.info(
@@ -406,7 +401,7 @@ export class AbstractAction extends ForeElementMixin {
     this.actionPerformed();
     if (FxFore.outermostHandler === this) {
       console.log(
-        `%cfinalizing outermost Action on ${this.getOwnerForm().id}`,
+        `%cfinalizing outermost Action on ${this.getOwnerForm()?.id}`,
         'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
         this,
       );
@@ -480,7 +475,7 @@ export class AbstractAction extends ForeElementMixin {
       // console.log('running update cycle for outermostHandler', this);
       model.recalculate();
       model.revalidate();
-      this.getOwnerForm().refresh(true);
+      this.getOwnerForm().refresh(false);
       this.dispatchActionPerformed();
     } else if (this.needsUpdate) {
       // console.log('Update delayed!');