@jinntec/fore 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {

package/resources/fore.css

@@ -74,6 +74,9 @@
     fx-case {
         display: none;
     }
+    fx-case.selected-case{
+        display:block;
+    }
 
     fx-output[readonly] img {
         background: inherit;

package/src/DependentXPathQueries.js

@@ -0,0 +1,51 @@
+export default class DependentXPathQueries {
+  constructor() {
+    /**
+     * @type {Set<string>}
+     */
+    this._xpaths = new Set();
+
+    this._parentDependencies = null;
+  }
+
+  /**
+   * Returns true if this Fore element should be refreshed if a result of an index function changes
+   *
+   * @returns {boolean}
+   */
+  isInvalidatedByIndexFunction() {
+    for (const xpath of this._xpaths) {
+      // TODO: this can be done a lot better with parsing / checking for function references
+      if (xpath.includes('index(')) {
+        return true;
+      }
+    }
+
+    // We can also depend on the index function if it was used in our ancestry
+    return !!this._parentDependencies?.isInvalidatedByIndexFunction();
+  }
+
+  /**
+   * Add an XPath to the dependencies
+   *
+   * @param {string} xpath the XPath to add
+   */
+  addXPath(xpath) {
+    this._xpaths.add(xpath);
+  }
+
+  /**
+   * Reset the dependencies on refresh
+   *
+   */
+  resetDependencies() {
+    this._xpaths.clear();
+  }
+
+  /**
+   * @param {DependentXPathQueries} deps
+   */
+  setParentDependencies(deps) {
+    this._parentDependencies = deps;
+  }
+}

package/src/ForeElementMixin.js

@@ -7,6 +7,7 @@ import {
 } from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
 import { Fore } from './fore.js';
+import DependentXPathQueries from './DependentXPathQueries.js';
 
 /**
  * Mixin containing all general functions that are shared by all Fore element classes.
@@ -61,6 +62,9 @@ export default class ForeElementMixin extends HTMLElement {
      * @type {Map<string, import('./fx-var.js').FxVariable>}
      */
     this.inScopeVariables = new Map();
+
+    this._dependencies = new DependentXPathQueries();
+    this._dependencies.setParentDependencies(this.parent?.closest('[ref]')?._dependencies);
   }
 
   /**
@@ -103,6 +107,7 @@ export default class ForeElementMixin extends HTMLElement {
    * 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) {
@@ -114,6 +119,7 @@ export default class ForeElementMixin extends HTMLElement {
     }
     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

package/src/fore.js

@@ -275,7 +275,8 @@ export class Fore {
    * recursively refreshes all UI Elements.
    *
    * @param {HTMLElement} startElement
-   * @param {boolean} force
+   * @param {(boolean|{reason:'index-function'})} 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>}
    */
   static async refreshChildren(startElement, force) {
@@ -298,19 +299,35 @@ export class Fore {
 */
       const { children } = startElement;
       if (children) {
-        Array.from(children).forEach(element => {
+        for (const element of Array.from(children)) {
           if (element.nodeName.toUpperCase() === 'FX-FORE') {
-            resolve('done');
-            return;
+            break;
           }
-          if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
+          if (Fore.isUiElement(element.nodeName)) {
+            /**
+             * @type {import('./ForeElementMixin.js').default}
+             */
+            const foreElement = element;
+
+            if (typeof foreElement.refresh === 'function') {
+              if (
+                force &&
+                typeof force === 'object' &&
+                force.reason === 'index-function' &&
+                foreElement._dependencies.isInvalidatedByIndexFunction()
+              ) {
+                element.refresh(force);
+                continue;
+              } else if (force === true) {
+                element.refresh(force);
+              }
+            }
             // console.log('refreshing', element, element?.ref);
             // console.log('refreshing ',element);
-            element.refresh(force);
           } else if (element.nodeName.toUpperCase() !== 'FX-MODEL') {
             Fore.refreshChildren(element, force);
           }
-        });
+        }
       }
       resolve('done');
     });

package/src/fx-fore.js

@@ -484,6 +484,9 @@ export class FxFore extends HTMLElement {
   }
 
   // async refresh(force, changedPaths) {
+  /**
+   * @param {(boolean|{reason:'index-function'})} [force]fx-fore
+   */
   async refresh(force) {
     /*
 
@@ -578,7 +581,7 @@ export class FxFore extends HTMLElement {
 */
 
       if (this.inited) {
-        Fore.refreshChildren(this, true);
+        Fore.refreshChildren(this, force);
       }
       // console.timeEnd('refreshChildren');
     }
@@ -620,7 +623,7 @@ export class FxFore extends HTMLElement {
     for (const subFore of subFores) {
       // subFore.refresh(false, changedPaths);
       if (subFore.ready) {
-        await subFore.refresh(false);
+        await subFore.refresh(force);
       }
     }
     this.isRefreshing = false;

package/src/ui/abstract-control.js

@@ -9,6 +9,11 @@ function isDifferent(oldNodeValue, oldControlValue, newControlValue) {
   if (oldNodeValue === null) {
     return false;
   }
+  /*
+  if the oldControlValue is null we know the widget is used for the first time and is not considered
+  a value change.
+  */
+  if(oldControlValue === null) return false;
 
   if (newControlValue && oldControlValue && newControlValue.nodeType && oldControlValue.nodeType) {
     return newControlValue.outerHTML !== oldControlValue.outerHTML;
@@ -165,7 +170,8 @@ export default class AbstractControl extends ForeElementMixin {
         // if oldVal is null we haven't received a concrete value yet
 
         if (this.localName !== 'fx-control') return;
-        if (isDifferent(this.oldVal, this.value, oldValue)) {
+        if (isDifferent(this.oldVal,  oldValue, this.value)) {
+          const model = this.getModel();
           Fore.dispatch(this, 'value-changed', {
             path: this.modelItem.path,
             value: this.modelItem.value,

package/src/ui/fx-group.js

@@ -91,7 +91,9 @@ class FxGroup extends FxContainer {
 
   async refresh(force) {
     super.refresh(force);
-    Fore.refreshChildren(this, force);
+    // Make the maybe filtered refresh an unconditional forced refresh: This fx-group changes the
+    // context item
+    Fore.refreshChildren(this, !!force);
   }
 }
 

package/src/ui/fx-repeat.js

@@ -80,7 +80,7 @@ export class FxRepeat extends withDraggability(ForeElementMixin, false) {
     const rItems = this.querySelectorAll(':scope > fx-repeatitem');
     this.applyIndex(rItems[this.index - 1]);
 
-    this.getOwnerForm().refresh(true);
+    this.getOwnerForm().refresh({ reason: 'index-function' });
   }
 
   applyIndex(repeatItem) {

package/src/ui/fx-switch.js

@@ -28,7 +28,7 @@ class FxSwitch extends FxContainer {
     }
     const style = `
        :host ::slotted(fx-case.selected-case){
-        display: block !important;
+        display: block;
     }
     `;
     const html = `