@jinntec/fore 2.6.0 → 2.7.1

package/src/actions/fx-setvalue.js

@@ -11,43 +11,43 @@ import getInScopeContext from '../getInScopeContext.js';
  * @customElement
  */
 export default class FxSetvalue extends AbstractAction {
-    static get properties() {
-        return {
-            ...super.properties,
-            ref: {
-                type: String,
-            },
-            valueAttr: {
-                type: String,
-            },
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      ref: {
+        type: String,
+      },
+      valueAttr: {
+        type: String,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.ref = '';
-        this.valueAttr = '';
-    }
+  constructor() {
+    super();
+    this.ref = '';
+    this.valueAttr = '';
+  }
 
-    connectedCallback() {
-        if (super.connectedCallback) {
-            super.connectedCallback();
-        }
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
 
-        if (this.hasAttribute('ref')) {
-            this.ref = this.getAttribute('ref');
-        } else {
-            throw new Error('fx-setvalue must specify a "ref" attribute');
-        }
-        this.valueAttr = this.getAttribute('value');
+    if (this.hasAttribute('ref')) {
+      this.ref = this.getAttribute('ref');
+    } else {
+      throw new Error('fx-setvalue must specify a "ref" attribute');
     }
+    this.valueAttr = this.getAttribute('value');
+  }
 
-    async perform() {
-        super.perform();
-        let { value } = this;
-        if (this.valueAttr !== null) {
-            const inscopeContext = getInScopeContext(this, this.valueAttr);
-            /*
+  async perform() {
+    super.perform();
+    let { value } = this;
+    if (this.valueAttr !== null) {
+      const inscopeContext = getInScopeContext(this, this.valueAttr);
+      /*
       todo: review @martin - shouldn't we always return a string value?
       this comes down to the question if setvalue should only allow setting of strings
       which i tend to agree. Can't remember a case where i wanted to set an attribute
@@ -58,76 +58,76 @@ export default class FxSetvalue extends AbstractAction {
       or getting unexpected results.
       */
 
-            [value] = evaluateXPath(
-                this.valueAttr,
-                inscopeContext,
-                this,
-                this.detail,
-            );
-        } else if (this.textContent !== '') {
-            value = this.textContent;
-        } else {
-            value = '';
-        }
-        if (value?.nodeType && value.nodeType === Node.ATTRIBUTE_NODE) {
-            value = value.nodeValue;
-        }
-        const mi = this.getModelItem();
-        this.setValue(mi, value);
-        // todo: check this again - logically needsUpate should be set but makes tests fail
-        //  this.needsUpdate = true;
+      [value] = evaluateXPath(this.valueAttr, inscopeContext, this, this.detail);
+    } else if (this.textContent !== '') {
+      value = this.textContent;
+    } else {
+      value = '';
+    }
+    if (value?.nodeType && value.nodeType === Node.ATTRIBUTE_NODE) {
+      value = value.nodeValue;
     }
 
-    /**
-     * need to overwrite default dispatchExecute to do it ourselves. This is necessary for tracking control value changes
-     * which call setvalue directly without perform().
-     */
-    dispatchExecute() {}
+    // Get the ModelItem without re-evaluating the context
+    const mi = this.getModelItem();
+
+    this.setValue(mi, value);
+    // todo: check this again - logically needsUpate should be set but makes tests fail
+    //  this.needsUpdate = true;
+  }
 
-    setValue(modelItem, newVal) {
-        const item = modelItem;
-        if (!item) return;
+  /**
+   * need to overwrite default dispatchExecute to do it ourselves. This is necessary for tracking control value changes
+   * which call setvalue directly without perform().
+   */
+  dispatchExecute() {}
 
-        if (item.value !== newVal) {
-            // const path = XPathUtil.getPath(modelItem.node);
-            const path = Fore.getDomNodeIndexString(modelItem.node);
+  setValue(modelItem, newVal) {
+    console.log('setValue', modelItem, newVal);
+    const item = modelItem;
+    if (!item) return;
 
-            const ev = this.event;
-            const targetElem = this;
-            this.dispatchEvent(
-                new CustomEvent('execute-action', {
-                    composed: true,
-                    bubbles: true,
-                    cancelable: true,
-                    detail: {
-                        action: targetElem,
-                        event: ev,
-                        value: newVal,
-                        path,
-                    },
-                }),
-            );
+    if (item.value !== newVal) {
+      // const path = XPathUtil.getPath(modelItem.node);
+      const path = Fore.getDomNodeIndexString(modelItem.node);
 
-            if (newVal?.nodeType) {
-                if (newVal.nodeType === Node.ELEMENT_NODE) {
-                    item.value = newVal;
-                }
-                if (newVal.nodeType === Node.ATTRIBUTE_NODE) {
-                    item.value = newVal.getValue();
-                }
-                if (newVal.nodeType === Node.TEXT_NODE) {
-                    item.value = newVal.textContent;
-                }
-            } else {
-                item.value = newVal;
-                item.node.textContent = newVal;
-            }
-            this.getModel().changed.push(modelItem);
-            this.needsUpdate = true;
+      const ev = this.event;
+      const targetElem = this;
+      this.dispatchEvent(
+        new CustomEvent('execute-action', {
+          composed: true,
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            action: targetElem,
+            event: ev,
+            value: newVal,
+            path,
+          },
+        }),
+      );
+
+      if (newVal?.nodeType) {
+        if (newVal.nodeType === Node.ELEMENT_NODE) {
+          item.value = newVal;
+        }
+        if (newVal.nodeType === Node.ATTRIBUTE_NODE) {
+          item.value = newVal.getValue();
+        }
+        if (newVal.nodeType === Node.TEXT_NODE) {
+          item.value = newVal.textContent;
         }
+      } else {
+        item.value = newVal;
+        item.node.textContent = newVal;
+      }
+      this.getModel().changed.push(modelItem);
+      this.needsUpdate = true;
+      modelItem.notify();
     }
+  }
 }
 
 if (!customElements.get('fx-setvalue')) {
-    window.customElements.define('fx-setvalue', FxSetvalue);
+  window.customElements.define('fx-setvalue', FxSetvalue);
 }

package/src/actions/fx-toggle.js

@@ -32,7 +32,7 @@ class FxToggle extends AbstractAction {
       const fxSwitch = caseElement.parentNode;
       fxSwitch.toggle(caseElement);
     }
-    this.needsUpdate = true;
+    // this.needsUpdate = true;
   }
 }
 

package/src/extract-predicate-deps.js

@@ -0,0 +1,57 @@
+// extract-predicate-deps.js
+import { DependencyNotifyingDomFacade } from './DependencyNotifyingDomFacade.js';
+import { evaluateXPathToBoolean } from './xpath-evaluation.js';
+
+/**
+ * Extracts an instance ID from an XPath expression like instance('myInstance')/something
+ * @param {string} xpathExpr
+ * @returns {string|null} The extracted instance ID or null if not found
+ */
+function extractInstanceIdFromXPath(xpathExpr) {
+  const instanceRegex = /instance\(['"]([^)'"]+)['"]\)/;
+  const match = xpathExpr.match(instanceRegex);
+  return match ? match[1] : null;
+}
+
+/**
+ * Gets the context node for a predicate XPath expression.
+ * @param {string} predicateExpr
+ * @param {import('./fx-model.js').FxModel} model
+ * @returns {Node}
+ */
+function getContextNodeForPredicate(predicateExpr, model) {
+  const instanceId = extractInstanceIdFromXPath(predicateExpr) || 'default';
+  const instance = model.getInstance(instanceId);
+  return instance.getDefaultContext();
+}
+
+/**
+ * Extracts and registers dependencies from XPath predicates.
+ *
+ * @param {string} ref - The XPath expression possibly containing predicates.
+ * @param {import('./fx-model.js').FxModel} model - The model to resolve instances from.
+ * @param {(modelItem: import('./modelitem.js').ModelItem) => void} register - A callback to register observers.
+ * @param {(node: Node) => import('./modelitem.js').ModelItem} resolveModelItem - A callback to resolve modelItems.
+ */
+export function extractPredicateDependencies(ref, contextNode, register, resolveModelItem) {
+  const predicateRegex = /\[(.*?)\]/g;
+  let match;
+
+  while ((match = predicateRegex.exec(ref)) !== null) {
+    const predicate = match[1];
+    try {
+      const domFacade = new DependencyNotifyingDomFacade(node => {
+        const mi = resolveModelItem(node);
+        if (mi) {
+          register(mi);
+          console.log(`[PredicateDependency] Observing ${mi.path} from predicate: [${predicate}]`);
+        }
+      });
+
+      const predContext = getContextNodeForPredicate(predicate, contextNode);
+      evaluateXPathToBoolean(predicate, predContext, { dispatchEvent() {} }, domFacade);
+    } catch (e) {
+      console.warn('Failed to evaluate predicate expression:', predicate, e);
+    }
+  }
+}

package/src/extractPredicateDependencies.js

@@ -0,0 +1,36 @@
+// extract-predicate-deps.js
+import { DependencyNotifyingDomFacade } from './DependencyNotifyingDomFacade.js';
+import { evaluateXPathToBoolean } from './xpath-evaluation.js';
+
+/**
+ * Extracts and registers dependencies from XPath predicates.
+ *
+ * @param {string} ref - The XPath expression possibly containing predicates.
+ * @param {Node} contextNode - The context node for evaluation.
+ * @param {(modelItem: import('./modelitem.js').ModelItem) => void} register - A callback to register observers.
+ * @param {(node: Node) => import('./modelitem.js').ModelItem} resolveModelItem - A callback to resolve modelItems.
+ */
+export function extractPredicateDependencies(ref, contextNode, register, resolveModelItem) {
+  const predicateRegex = /\[(.*?)\]/g;
+  let match;
+  const touchedNodes = new Set();
+
+  while ((match = predicateRegex.exec(ref)) !== null) {
+    const predicate = match[1];
+    try {
+      const domFacade = new DependencyNotifyingDomFacade(n => touchedNodes.add(n));
+      const fakeContext = { dispatchEvent: () => {} }; // prevent null dispatchEvent crash
+      evaluateXPathToBoolean(predicate, contextNode, undefined, domFacade);
+
+      touchedNodes.forEach(node => {
+        const mi = resolveModelItem(node);
+        if (mi) {
+          register(mi);
+          console.log(`[PredicateDependency] Observing ${mi.path} from predicate: [${predicate}]`);
+        }
+      });
+    } catch (e) {
+      console.warn('Failed to evaluate predicate expression:', predicate, e);
+    }
+  }
+}

package/src/fore.js

@@ -17,7 +17,7 @@ export class Fore {
 
   static REQUIRED_DEFAULT = false;
 
-  static RELEVANT_DEFAULT = true;
+  static RELEVANT_DEFAULT = true
 
   static CONSTRAINT_DEFAULT = true;
 
@@ -230,7 +230,7 @@ export class Fore {
   }
 
   static get UI_ELEMENTS() {
-    return [
+    return new Set([
       'FX-ALERT',
       'FX-CONTROL',
       'FX-DIALOG',
@@ -252,11 +252,7 @@ export class Fore {
       'FX-TRIGGER',
       'FX-UPLOAD',
       'FX-VAR',
-    ];
-  }
-
-  static get MODEL_ELEMENTS() {
-    return ['FX-BIND', 'FX-FUNCTION', 'FX-MODEL', 'FX-INSTANCE', 'FX-SUBMISSION'];
+    ]);
   }
 
   /**
@@ -264,13 +260,30 @@ export class Fore {
    * @returns {boolean}
    */
   static isUiElement(elementName) {
-    const found = Fore.UI_ELEMENTS.includes(elementName);
-    if (found) {
-      // console.log('_isUiElement ', found);
-    }
-    return Fore.UI_ELEMENTS.includes(elementName);
+    return Fore.UI_ELEMENTS.has(elementName);
+  }
+
+  static get MODEL_ELEMENTS() {
+    return ['FX-BIND', 'FX-FUNCTION', 'FX-MODEL', 'FX-INSTANCE', 'FX-SUBMISSION'];
   }
 
+
+  static async initUI(startElement) {
+    const inited = new Promise(resolve => {
+      const { children } = startElement;
+      if (children) {
+        for (const element of Array.from(children)) {
+          if (element.nodeName.toUpperCase() === 'FX-FORE') {
+            break;
+          }
+          if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
+            element.init();
+          }
+        }
+      }
+      resolve('done');
+    });
+  }
   /**
    * recursively refreshes all UI Elements.
    *
@@ -311,7 +324,13 @@ export class Fore {
             if (!force) {
               continue;
             }
+/*
+            if(element.nodeName === 'FX-CASE') {
+              console.log('hey - got a case', element);
+            }
+*/
             if (force === true) {
+              // console.log('🔄 refreshing ', element);
               // Unconditional force refresh
               bound.refresh(force);
               continue;
@@ -319,10 +338,13 @@ export class Fore {
             if (typeof force !== 'object') {
               continue;
             }
+            /*
             if (
               force.reason === 'index-function' &&
               bound.dependencies.isInvalidatedByIndexFunction()
             ) {
+              console.log('🔄 refreshing ', element);
+
               bound.refresh(force);
               continue;
             }
@@ -330,12 +352,12 @@ export class Fore {
             if (
               bound.dependencies.isInvalidatedByChildlistChanges(force.elementLocalnamesWithChanges)
             ) {
+              console.log('🔄 refreshing ', element);
+
               bound.refresh(force);
               continue;
             }
-
-            // console.log('refreshing', element, element?.ref);
-            // console.log('refreshing ',element);
+*/
           }
           if (!(element.inert === true)) {
             // testing for inert catches model and action elements and should just leave updateable html elements
@@ -542,7 +564,10 @@ export class Fore {
     const reg = /(>)(<)(\/*)/g;
     const wsexp = / *(.*) +\n/g;
     const contexp = /(<.+>)(.+\n)/g;
-    xml = xml.replace(reg, '$1\n$2$3').replace(wsexp, '$1\n').replace(contexp, '$1\n$2');
+    xml = xml
+      .replace(reg, '$1\n$2$3')
+      .replace(wsexp, '$1\n')
+      .replace(contexp, '$1\n$2');
     let formatted = '';
     const lines = xml.split('\n');
     let indent = 0;

package/src/fx-bind.js

@@ -8,6 +8,8 @@ import {
 } from './xpath-evaluation.js';
 import { XPathUtil } from './xpath-util.js';
 import getInScopeContext from './getInScopeContext.js';
+import { getPath } from './xpath-path.js';
+import { evaluateXPathToFirstNode } from 'fontoxpath';
 
 /**
  * FxBind declaratively attaches constraints to nodes in the data (instances).
@@ -35,6 +37,9 @@ export class FxBind extends ForeElementMixin {
 
   constructor() {
     super();
+    /**
+     * @type {Node[]}
+     */
     this.nodeset = [];
     this.model = {};
     this.contextNode = {};
@@ -45,12 +50,102 @@ export class FxBind extends ForeElementMixin {
     // console.log('connectedCallback ', this);
     // this.id = this.hasAttribute('id')?this.getAttribute('id'):;
     this.constraint = this.getAttribute('constraint');
-    this.ref = this.getAttribute('ref');
+    this.ref = this.getAttribute('ref') || '.';
     this.readonly = this.getAttribute('readonly');
     this.required = this.getAttribute('required');
     this.relevant = this.getAttribute('relevant');
     this.type = this.hasAttribute('type') ? this.getAttribute('type') : FxBind.TYPE_DEFAULT;
     this.calculate = this.getAttribute('calculate');
+    // For self-references, just apply the facets to the parent bind
+    if (this.ref === '.') {
+      const parent = this.parentNode;
+      if (parent instanceof FxBind) {
+        // For overlapping binds, the last one wins
+        parent.calculate ||= this.calculate;
+        parent.readonly ||= this.readonly;
+        parent.required ||= this.required;
+        parent.relevant ||= this.relevant;
+        parent.constraint ||= this.constraint;
+      }
+    }
+  }
+  /**
+   * @param {string} ref -
+   * @param {Node} node -
+   * @param {ForeElementMixin} boundElement -
+   *
+   * @returns {ModelItem}
+   */
+  static createModelItem(ref, node, boundElement, opNum) {
+    const instanceId = XPathUtil.resolveInstance(boundElement, boundElement.ref);
+    if (Array.isArray(node)) {
+      node = node[0];
+    }
+    if (!node.nodeType) {
+      // This node set is not pointing to nodes, but some other type.
+      return new ModelItem(
+        ref,
+        'non-node item',
+        node,
+        null,
+        instanceId,
+        boundElement.getOwnerForm(),
+      );
+    }
+
+    // ✅ only the repeat item gets the _<opNum> suffix; children do not.
+    const basePath = XPathUtil.getPath(node, instanceId);
+    const path = opNum ? `${basePath}_${opNum}` : basePath;
+
+    // const path = XPathUtil.getPath(node, instanceId);
+
+    // naive approach to finding matching bind elements for given ref if not provided by caller.
+    // Use XPath and variables to escape XPaths in the ref
+    /**
+     * @type {import('./fx-bind.js').FxBind}
+     */
+    /*
+    const bind = evaluateXPathToFirstNode(
+      'descendant::fx-bind[@ref=$ref]',
+      boundElement.getModel(),
+      null,
+      {
+        ref: boundElement.ref,
+      },
+    );
+*/
+    const bind = boundElement.getOwnerForm().querySelector(`fx-bind[ref="${ref}"]`);
+
+    let modelItem = boundElement.getModel().getModelItem(node);
+    if (!modelItem) {
+      if (bind) {
+        modelItem = new ModelItem(
+          path,
+          boundElement.getBindingExpr(),
+          node,
+          bind,
+          instanceId,
+          boundElement.getOwnerForm(),
+        );
+        const alert = bind.getAlert();
+        if (alert) {
+          modelItem.addAlert(alert);
+        }
+      } else {
+        // no binding facets apply
+        modelItem = new ModelItem(
+          path,
+          boundElement.getBindingExpr(),
+          node,
+          null,
+          instanceId,
+          boundElement.getOwnerForm(),
+        );
+      }
+      // boundElement.getModel().registerModelItem(modelItem);
+    }
+
+    return modelItem;
   }
 
   /**
@@ -80,10 +175,10 @@ export class FxBind extends ForeElementMixin {
 
   _buildBindGraph() {
     if (this.bindType === 'xml') {
-      this.nodeset.forEach((node) => {
+      this.nodeset.forEach(node => {
         const instance = XPathUtil.resolveInstance(this, this.ref);
 
-        const path = XPathUtil.getPath(node, instance);
+        const path = getPath(node, instance);
         this.model.mainGraph.addNode(path, node);
 
         /* ### catching references in the 'ref' itself...
@@ -142,6 +237,26 @@ export class FxBind extends ForeElementMixin {
     }
   }
 
+  /**
+   * Resolves a referenced ModelItem using the model's graph and node registry.
+   * @param {string} refName
+   * @returns {ModelItem | null}
+   */
+  resolveModelItem(refName) {
+    if (!this.model?.mainGraph || !this.model?.getModelItemForNode) return null;
+
+    const suffixes = [`/${refName}`, `:${refName}`];
+
+    for (const [path, node] of this.model.mainGraph.nodeMap.entries()) {
+      if (suffixes.some(suffix => path.endsWith(suffix))) {
+        const modelItem = this.model.getModelItemForNode(node);
+        if (modelItem) return modelItem;
+      }
+    }
+
+    return null;
+  }
+
   /**
    * Add the dependencies of this bind
    *
@@ -158,10 +273,10 @@ export class FxBind extends ForeElementMixin {
       if (!this.model.mainGraph.hasNode(nodeHash)) {
         this.model.mainGraph.addNode(nodeHash, node);
       }
-      refs.forEach((ref) => {
+      refs.forEach(ref => {
         const instance = XPathUtil.resolveInstance(this, path);
 
-        const otherPath = XPathUtil.getPath(ref, instance);
+        const otherPath = getPath(ref, instance);
         // console.log('otherPath', otherPath)
 
         // todo: nasty hack to prevent duplicate pathes like 'a[1]' and 'a[1]/text()[1]' to end up as separate nodes in the graph
@@ -179,7 +294,7 @@ export class FxBind extends ForeElementMixin {
 
   _processChildren(model) {
     const childbinds = this.querySelectorAll(':scope > fx-bind');
-    Array.from(childbinds).forEach((bind) => {
+    Array.from(childbinds).forEach(bind => {
       // console.log('init child bind ', bind);
       bind.init(model);
     });
@@ -208,14 +323,14 @@ export class FxBind extends ForeElementMixin {
     if (this.ref === '' || this.ref === null) {
       this.nodeset = inscopeContext;
     } else if (Array.isArray(inscopeContext)) {
-      inscopeContext.forEach((n) => {
+      inscopeContext.forEach(n => {
         if (XPathUtil.isSelfReference(this.ref)) {
           this.nodeset = inscopeContext;
         } else {
           // eslint-disable-next-line no-lonely-if
           if (this.ref) {
             const localResult = evaluateXPathToNodes(this.ref, n, this);
-            localResult.forEach((item) => {
+            localResult.forEach(item => {
               this.nodeset.push(item);
             });
             /*
@@ -243,7 +358,7 @@ export class FxBind extends ForeElementMixin {
     if (Array.isArray(this.nodeset)) {
       // console.log('################################################ ', this.nodeset);
       // Array.from(this.nodeset).forEach((n, index) => {
-      Array.from(this.nodeset).forEach((n) => {
+      Array.from(this.nodeset).forEach(n => {
         // console.log('node ',n);
         // this._createModelItem(n, index);
         this._createModelItem(n);
@@ -308,25 +423,15 @@ export class FxBind extends ForeElementMixin {
     // const path = this.getPath(node);
     const instanceId = XPathUtil.resolveInstance(this, this.ref);
 
-    const path = XPathUtil.getPath(node, instanceId);
+    const path = getPath(node, instanceId);
     // const shortPath = this.shortenPath(path);
 
     // ### constructing default modelitem - will get evaluated during recalculate()
     // ### constructing default modelitem - will get evaluated during recalculate()
     // ### constructing default modelitem - will get evaluated during recalculate()
     // const newItem = new ModelItem(shortPath,
-    const newItem = new ModelItem(
-      path,
-      this.getBindingExpr(),
-      FxBind.READONLY_DEFAULT,
-      FxBind.RELEVANT_DEFAULT,
-      FxBind.REQUIRED_DEFAULT,
-      FxBind.CONSTRAINT_DEFAULT,
-      this.type,
-      targetNode,
-      this,
-      instanceId
-    );
+    const fore = this.closest('fx-fore');
+    const newItem = new ModelItem(path, this.getBindingExpr(), targetNode, this, instanceId, fore);
 
     const alert = this.getAlert();
     if (alert) {
@@ -355,7 +460,7 @@ export class FxBind extends ForeElementMixin {
   getReferences(propertyExpr) {
     const touchedNodes = new Set();
     const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
-    this.nodeset.forEach((node) => {
+    this.nodeset.forEach(node => {
       evaluateXPathToString(propertyExpr, node, this, domFacade);
     });
     return Array.from(touchedNodes.values());