@jinntec/fore 2.5.0 → 2.7.0

package/src/actions/fx-send.js

@@ -1,7 +1,7 @@
 import '../fx-model.js';
 import '../fx-submission.js';
 import { AbstractAction } from './abstract-action.js';
-import { XPathUtil } from '../xpath-util.js';
+import { getDocPath } from '../xpath-path.js';
 
 /**
  * `fx-send` - finds and activates a `fx-submission` or a `fx-connection` element.
@@ -44,7 +44,7 @@ class FxSend extends AbstractAction {
               id: this.id,
               origin: this,
               message: `<fx-connection id="${this.connection}"> not found`,
-              expr: XPathUtil.getDocPath(this),
+              expr: getDocPath(this),
               level: 'Error',
             },
           }),
@@ -66,7 +66,7 @@ class FxSend extends AbstractAction {
             id: this.id,
             origin: this,
             message: `<fx-submission id="${this.submission}"> not found`,
-            expr: XPathUtil.getDocPath(this),
+            expr: getDocPath(this),
             level: 'Error',
           },
         }),
@@ -87,10 +87,13 @@ class FxSend extends AbstractAction {
     }
 
     await submission.submit();
-            if(submission.replace === 'instance'){
-              this.getModel().updateModel();
-              this.getOwnerForm().refresh();
-            }
+    if (submission.replace === 'instance') {
+      this.getModel().updateModel();
+      // todo: this bypasses observers...
+      this.getOwnerForm().refresh(true); //whole instance changes - full refresh necessary
+      // this.getOwnerForm().addToBatchedNotifications(this.getOwnerForm());
+      // this.needsUpdate = true;
+    }
     // if not of type fx-submission signal error
   }
 

package/src/actions/fx-setattribute.js

@@ -4,6 +4,7 @@ import { AbstractAction } from './abstract-action.js';
 import { evaluateXPathToString } from '../xpath-evaluation.js';
 import { Fore } from '../fore.js';
 import getInScopeContext from '../getInScopeContext';
+import { FxBind } from '../fx-bind';
 
 /**
  * `fx-setattribute` allows to create and set an attribute value in the data.
@@ -58,7 +59,18 @@ export default class FxSetattribute extends AbstractAction {
       return;
     }
     mi.node.setAttribute(this.attrName, this.attrValue);
+    const newModelItem = FxBind.createModelItem(
+      `${this.ref}/@${this.attrName}`,
+      mi.node.getAttributeNode(this.attrName),
+      this,
+      null,
+    );
+    this.getOwnerForm()
+      .getModel()
+      .registerModelItem(newModelItem);
+    this.getOwnerForm().addToBatchedNotifications(newModelItem);
     this.needsUpdate = true;
+    newModelItem.notify();
   }
 }
 

package/src/actions/fx-setfocus.js

@@ -39,14 +39,6 @@ export class FxSetfocus extends AbstractAction {
       return;
     }
 
-    // ### focus action is itself hosted within a repeat
-    const parentIItem = targetElement.closest('fx-repeatitem');
-    if (parentIItem) {
-      targetElement = parentIItem.querySelector(selector);
-      this._focus(targetElement);
-      // return;
-    }
-
     // ### the target element is hosted within a repeat
     const repeatitem = targetElement.closest('fx-repeatitem, .fx-repeatitem');
     if (repeatitem) {
@@ -54,7 +46,18 @@ export class FxSetfocus extends AbstractAction {
       // get the active repeatitem (only for fx-repeat for now - todo: support repeat attributes
       const repeat = repeatitem.parentNode;
       targetElement = repeat.querySelector(`[repeat-index] ${selector}`);
+      this._focus(targetElement);
+    }
+
+    // ### focus action is itself hosted within a repeat
+    /*
+    const parentIItem = targetElement.closest('fx-repeatitem');
+    if (parentIItem) {
+      targetElement = parentIItem.querySelector(selector);
+      this._focus(targetElement);
+      // return;
     }
+*/
 
     this._focus(targetElement);
     if (this.hasAttribute('select')) {

package/src/actions/fx-setvalue.js

@@ -3,6 +3,7 @@ import '../fx-model.js';
 import { AbstractAction } from './abstract-action.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
 import { Fore } from '../fore.js';
+import getInScopeContext from '../getInScopeContext.js';
 
 /**
  * `fx-setvalue`
@@ -45,7 +46,19 @@ export default class FxSetvalue extends AbstractAction {
     super.perform();
     let { value } = this;
     if (this.valueAttr !== null) {
-      [value] = evaluateXPath(this.valueAttr, this.nodeset, this, this.detail);
+      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
+      or element (for json wouldn't make much sense either) - for cases like that
+      fx-replace would be more appropriate.
+
+      This is of practical relevance cause currently forces to append 'text()' to value expressions
+      or getting unexpected results.
+      */
+
+      [value] = evaluateXPath(this.valueAttr, inscopeContext, this, this.detail);
     } else if (this.textContent !== '') {
       value = this.textContent;
     } else {
@@ -54,7 +67,10 @@ export default class FxSetvalue extends AbstractAction {
     if (value?.nodeType && value.nodeType === Node.ATTRIBUTE_NODE) {
       value = value.nodeValue;
     }
+
+    // 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;
@@ -67,6 +83,7 @@ export default class FxSetvalue extends AbstractAction {
   dispatchExecute() {}
 
   setValue(modelItem, newVal) {
+    console.log('setValue', modelItem, newVal);
     const item = modelItem;
     if (!item) return;
 
@@ -97,7 +114,7 @@ export default class FxSetvalue extends AbstractAction {
         if (newVal.nodeType === Node.ATTRIBUTE_NODE) {
           item.value = newVal.getValue();
         }
-        if(newVal.nodeType === Node.TEXT_NODE){
+        if (newVal.nodeType === Node.TEXT_NODE) {
           item.value = newVal.textContent;
         }
       } else {
@@ -106,6 +123,7 @@ export default class FxSetvalue extends AbstractAction {
       }
       this.getModel().changed.push(modelItem);
       this.needsUpdate = true;
+      modelItem.notify();
     }
   }
 }

package/src/actions/fx-show.js

@@ -4,7 +4,9 @@ import { resolveId } from '../xpath-evaluation.js';
 
 /**
  * `fx-show`
- * Displays a simple confirmation before actually executing the nested actions.
+ * to show a `<dialog>` with given id.
+ *
+ *
  *
  * @customElement
  * @event fx-show dispatched when dialog is shown
@@ -34,7 +36,7 @@ export class FxShow extends FxAction {
     if (!targetDlg) {
       console.error('target dialog with given id does not exist', this.dialog);
     }
-    targetDlg.open();
+    targetDlg.showModal();
     Fore.dispatch(targetDlg, 'dialog-shown', {});
   }
 }

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,18 +260,35 @@ 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.
    *
    * @param {HTMLElement} startElement
-   * @param {(boolean|{reason:'index-function'})} force Whether to do a forced refresh. Forced
+   * @param {(boolean|{reason:'index-function', elementLocalnamesWithChanges: string[]})} force Whether to do a forced refresh. Forced
    * refreshes are very bad for performance, try to limit them. If the forced refresh is because index functions may change, it is better to pass the reason
    * @returns {Promise<void>}
    */
@@ -300,30 +313,56 @@ export class Fore {
       const { children } = startElement;
       if (children) {
         for (const element of Array.from(children)) {
-            if (element.nodeName.toUpperCase() === 'FX-FORE') {
-              break;
+          if (element.nodeName.toUpperCase() === 'FX-FORE') {
+            break;
+          }
+          if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
+            /**
+             * @type {import('./ForeElementMixin.js').default}
+             */
+            const bound = element;
+            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;
+            }
+            if (typeof force !== 'object') {
+              continue;
             }
-            if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
-                /**
-                 * @type {import('./ForeElementMixin.js').default}
-                 */
-                if (
-                    force &&
-                    typeof force === 'object' &&
-                    force.reason === 'index-function' &&
-                    element._dependencies.isInvalidatedByIndexFunction()
-                ) {
-                    element.refresh(force);
-                    continue;
-                } else if (force === true) {
-                    element.refresh(force);
-                }
-                // console.log('refreshing', element, element?.ref);
-                // console.log('refreshing ',element);
-            } else if (!(element.inert === true) ) {
-                // testing for inert catches model and action elements and should just leave updateable html elements
-                Fore.refreshChildren(element, force);
+            /*
+            if (
+              force.reason === 'index-function' &&
+              bound.dependencies.isInvalidatedByIndexFunction()
+            ) {
+              console.log('🔄 refreshing ', element);
+
+              bound.refresh(force);
+              continue;
+            }
+
+            if (
+              bound.dependencies.isInvalidatedByChildlistChanges(force.elementLocalnamesWithChanges)
+            ) {
+              console.log('🔄 refreshing ', element);
+
+              bound.refresh(force);
+              continue;
             }
+*/
+          }
+          if (!(element.inert === true)) {
+            // testing for inert catches model and action elements and should just leave updateable html elements
+            Fore.refreshChildren(element, force);
+          }
         }
       }
       resolve('done');
@@ -525,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;