@jinntec/fore 3.3.2 → 4.0.0

package/index.js

@@ -27,24 +27,16 @@ import './src/ui/fx-dialog.js';
 import './src/ui/fx-items.js';
 import './src/ui/fx-droptarget.js';
 
-import './src/tools/fx-action-log.js';
-import './src/tools/fx-log-settings.js';
-import './src/tools/fx-log-item.js';
-import './src/tools/fx-devtools.js';
-import './src/tools/fx-dom-inspector.js';
 import './src/lab/fore-component.js';
-import './src/tools/fx-json-instance.js';
 import './src/ui/fx-upload.js';
-// import './src/tools/fx-minimap.js';
-
-// import './src/ui/fx-checkbox-group.js';
 
 // action classes
 import './src/actions/fx-append.js';
 import './src/actions/fx-delete.js';
 import './src/actions/fx-setfocus.js';
 import './src/actions/fx-insert.js';
-// import './src/actions/fx-insertchild.js';
+import './src/actions/fx-insertchild.js';
+import './src/actions/fx-copy.js';
 import './src/actions/fx-message.js';
 import './src/actions/fx-setvalue.js';
 import './src/actions/fx-send.js';
@@ -59,6 +51,9 @@ import './src/actions/fx-show.js';
 import './src/actions/fx-hide.js';
 import './src/actions/fx-reload.js';
 import './src/actions/fx-reset.js';
+import './src/actions/fx-undo.js';
+import './src/actions/fx-redo.js';
+import './src/actions/fx-commit-history.js';
 import './src/actions/fx-load.js';
 import './src/actions/fx-toggleboolean.js';
 import './src/actions/fx-call.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "3.3.2",
+  "version": "4.0.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -32,7 +32,6 @@
   "dependencies": {
     "@jinntec/jinn-toast": "^1.0.5",
     "@picocss/pico": "^2.0.6",
-    "chai": "^5.2.1",
     "fontoxpath": "^3.34.0"
   },
   "devDependencies": {
@@ -40,10 +39,9 @@
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-transform-private-methods": "^7.28.6",
     "@jinntec/jinn-codemirror": "^1.17.6",
-    "@open-wc/building-rollup": "^2.0.1",
     "@open-wc/eslint-config": "^7.0.0",
     "@open-wc/prettier-config": "^0.1.10",
-    "@open-wc/semantic-dom-diff": "^0.19.6",
+    "@open-wc/semantic-dom-diff": "^0.20.1",
     "@open-wc/testing": "^3.1.5",
     "@open-wc/testing-karma": "^4.0.9",
     "@open-wc/testing-karma-bs": "^1.3.94",
@@ -54,16 +52,18 @@
     "@skypack/package-check": "^0.2.2",
     "@types/cypress": "^1.1.3",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "cypress": "^13.16.0",
+    "axe-core": "^4.12.1",
+    "chai": "^5.2.1",
+    "cypress": "^15.18.0",
+    "cypress-axe": "^1.7.0",
     "deepmerge": "^4.2.2",
     "eslint": "^8.16.0",
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^8.0.1",
-    "jsdoc": "^3.6.10",
+    "jsdoc": "^4.0.5",
     "lint-staged": "^12.4.3",
     "lit-html": "^2.2.5",
     "mocha": "^10.0.0",
-    "np": "^8.0.4",
     "replace-in-file": "^8.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.4",

package/resources/fore.css

@@ -214,6 +214,39 @@
         position: relative;
     }
 
+    /* ### NATIVE <dialog> STYLES (preferred over fx-dialog, which is deprecated) ### */
+    /* ### NATIVE <dialog> STYLES (preferred over fx-dialog, which is deprecated) ### */
+    /* ### NATIVE <dialog> STYLES (preferred over fx-dialog, which is deprecated) ### */
+    dialog {
+        border: thin solid;
+        border-radius: 0.5rem;
+        padding: 0;
+        position: relative;
+    }
+
+    dialog::backdrop {
+        background: rgba(0, 0, 0, 0.5);
+    }
+
+    dialog .dialog-content {
+        padding: 1rem;
+    }
+
+    dialog .close-dialog {
+        position: absolute;
+        right: 0.4rem;
+        top: 0.2rem;
+        color: var(--paper-grey-900);
+        text-decoration: none;
+        font-size: 1.2rem;
+    }
+
+    dialog .action {
+        width: 100%;
+        text-align: center;
+        display: block;
+    }
+
     fx-hint {
         display: none;
     }

package/src/DependencyNotifyingDomFacade.js

@@ -5,15 +5,66 @@ import { getBucketsForNode } from 'fontoxpath';
  * as the `depends` function, but less explicit and will automatically be called for any node that
  * will be touched in the XPath.
  *
+ * By default it reads from the live DOM. When an `inner` facade is provided (e.g. the
+ * JSONDomFacade), all accessors delegate to it instead, still notifying `onNodeTouched` —
+ * this lets non-DOM data models participate in dependency tracking.
+ *
  * Maybe some more granularity is better. Maybe only notify a node's attributes are touched?
  *
  */
 export class DependencyNotifyingDomFacade {
   /**
    * @param  onNodeTouched - onNodeTouched A function what will be executed whenever a node is 'touched' by the XPath
+   * @param  inner - optional facade to delegate all accessors to (e.g. JSONDomFacade)
    */
-  constructor(onNodeTouched) {
+  constructor(onNodeTouched, inner = null) {
     this._onNodeTouched = onNodeTouched;
+    this._inner = inner;
+  }
+
+  /**
+   * Returns a facade sharing the same onNodeTouched callback but delegating to `inner`.
+   * Used by xpath-evaluation.js to route JSON contexts through the JSONDomFacade
+   * without callers having to know the context type.
+   *
+   * @param  inner - the facade to delegate to
+   */
+  withInner(inner) {
+    return new DependencyNotifyingDomFacade(this._onNodeTouched, inner);
+  }
+
+  /**
+   * Node identity/shape reads (used by the JSONDomFacade surface). Not treated as
+   * data dependencies — no notification.
+   */
+  getNodeType(node) {
+    if (this._inner) return this._inner.getNodeType(node);
+    return node.nodeType;
+  }
+
+  getNodeName(node) {
+    if (this._inner) return this._inner.getNodeName(node);
+    return node.nodeName;
+  }
+
+  getNodeValue(node) {
+    this._onNodeTouched(node);
+    if (this._inner) return this._inner.getNodeValue(node);
+    return node.nodeValue;
+  }
+
+  getChildren(node) {
+    if (this._inner) {
+      const children = this._inner.getChildren(node);
+      children.forEach(child => this._onNodeTouched(child));
+      return children;
+    }
+    return this.getChildNodes(node);
+  }
+
+  getChildNodeCount(node) {
+    if (this._inner) return this._inner.getChildNodeCount(node);
+    return node.childNodes.length;
   }
 
   /**
@@ -22,9 +73,9 @@ export class DependencyNotifyingDomFacade {
    *
    * @param  node -
    */
-  // eslint-disable-next-line class-methods-use-this
   getAllAttributes(node) {
     this._onNodeTouched(node); // <== Important!
+    if (this._inner) return this._inner.getAllAttributes(node);
     return Array.from(node.attributes);
   }
 
@@ -34,10 +85,12 @@ export class DependencyNotifyingDomFacade {
    * @param  node -
    * @param  attributeName -
    */
-  // eslint-disable-next-line class-methods-use-this
   getAttribute(node, attributeName) {
+    if (this._inner) {
+      this._onNodeTouched(node);
+      return this._inner.getAttribute(node, attributeName);
+    }
     const attr = node.getAttributeNode(attributeName);
-    console.log('[DomFacade] getAttribute touched:', attr);
     if (attr) this._onNodeTouched(attr);
     return attr?.value ?? null;
   }
@@ -49,8 +102,12 @@ export class DependencyNotifyingDomFacade {
    * @param  node -
    * @param  bucket - The bucket that matches the attribute that will be used.
    */
-  // eslint-disable-next-line class-methods-use-this
   getChildNodes(node, bucket) {
+    if (this._inner) {
+      const children = this._inner.getChildNodes(node, bucket);
+      children.forEach(child => this._onNodeTouched(child));
+      return children;
+    }
     const matchingNodes = Array.from(node.childNodes).filter(
       childNode => !bucket || getBucketsForNode(childNode).includes(bucket),
     );
@@ -64,13 +121,15 @@ export class DependencyNotifyingDomFacade {
    * @param  node -
    */
   getData(node) {
+    if (this._inner) {
+      this._onNodeTouched(node);
+      return this._inner.getData(node);
+    }
     if (node.nodeType === Node.ATTRIBUTE_NODE) {
-      // console.log('[DomFacade] getData on attribute:', node);
       this._onNodeTouched(node);
       return node.value;
     }
     // Text node
-    // console.log('[DomFacade] getData on text node parent:', node.parentNode);
     this._onNodeTouched(node.parentNode);
     return node.data;
   }
@@ -83,6 +142,11 @@ export class DependencyNotifyingDomFacade {
    * @param  bucket - The bucket that matches the attribute that will be used.
    */
   getFirstChild(node, bucket) {
+    if (this._inner) {
+      const child = this._inner.getFirstChild(node, bucket);
+      if (child) this._onNodeTouched(child);
+      return child;
+    }
     for (const child of node.childNodes) {
       if (!bucket || getBucketsForNode(child).includes(bucket)) {
         this._onNodeTouched(child);
@@ -99,8 +163,12 @@ export class DependencyNotifyingDomFacade {
    * @param  node -
    * @param  bucket - The bucket that matches the attribute that will be used.
    */
-  // eslint-disable-next-line class-methods-use-this
   getLastChild(node, bucket) {
+    if (this._inner) {
+      const child = this._inner.getLastChild(node, bucket);
+      if (child) this._onNodeTouched(child);
+      return child;
+    }
     const children = Array.from(node.childNodes).filter(
       child => !bucket || getBucketsForNode(child).includes(bucket),
     );
@@ -116,8 +184,12 @@ export class DependencyNotifyingDomFacade {
    * @param  node -
    * @param  bucket - The bucket that matches the nextSibling that is requested.
    */
-  // eslint-disable-next-line class-methods-use-this
   getNextSibling(node, bucket) {
+    if (this._inner) {
+      const sibling = this._inner.getNextSibling(node, bucket);
+      if (sibling) this._onNodeTouched(sibling);
+      return sibling;
+    }
     for (let sibling = node.nextSibling; sibling; sibling = sibling.nextSibling) {
       if (bucket && !getBucketsForNode(sibling).includes(bucket)) {
         // eslint-disable-next-line no-continue
@@ -135,18 +207,10 @@ export class DependencyNotifyingDomFacade {
    *
    * @param  node - the starting node
    */
-  // eslint-disable-next-line class-methods-use-this
   getParentNode(node) {
-    const parent = node.parentNode;
-    /*
-    if (
-      parent &&
-      (parent.nodeType === Node.ELEMENT_NODE || parent.nodeType === Node.ATTRIBUTE_NODE)
-    ) {
-      this._onNodeTouched(parent);
-    }
-*/
-    return parent;
+    // Deliberately not notifying: navigating up must not register a dependency on the parent.
+    if (this._inner) return this._inner.getParentNode(node);
+    return node.parentNode;
   }
 
   /**
@@ -156,9 +220,14 @@ export class DependencyNotifyingDomFacade {
    * @param  node -
    * @param  bucket - The bucket that matches the attribute that will be used.
    */
-  // eslint-disable-next-line class-methods-use-this
   getPreviousSibling(node, bucket) {
+    if (this._inner) {
+      const sibling = this._inner.getPreviousSibling(node, bucket);
+      if (sibling) this._onNodeTouched(sibling);
+      return sibling;
+    }
     for (let sibling = node.previousSibling; sibling; sibling = sibling.previousSibling) {
+      // eslint-disable-next-line no-continue
       if (bucket && !getBucketsForNode(sibling).includes(bucket)) continue;
       this._onNodeTouched(sibling);
       return sibling;

package/src/DependentXPathQueries.js

@@ -58,10 +58,23 @@ export default class DependentXPathQueries {
   }
 
   /**
-   * Add an XPath to the dependencies
+   * Detects whether any tracked XPath references one of the given variables.
    *
-   * @param {string} xpath the XPath to add
+   * Pessimistic substring scan (`$name` also matches `$names`) — false positives are
+   * cheap extra refreshes, mirroring isInvalidatedByChildlistChanges.
+   *
+   * @param {string[]} varNames variable names without the leading '$'
    */
+  isInvalidatedByVariableChange(varNames) {
+    for (const xpath of this._xpaths) {
+      if (varNames.some(name => xpath.includes(`$${name}`))) {
+        return true;
+      }
+    }
+    // We can also depend on these variables if they were used in our ancestry
+    return !!this._parentDependencies?.isInvalidatedByVariableChange(varNames);
+  }
+
   /**
    * Add an XPath to the dependencies
    *

package/src/ForeElementMixin.js

@@ -9,6 +9,13 @@ import getInScopeContext from './getInScopeContext.js';
 import { Fore } from './fore.js';
 import DependentXPathQueries from './DependentXPathQueries.js';
 import { getPath } from './xpath-path.js';
+import { DependencyNotifyingDomFacade } from './DependencyNotifyingDomFacade.js';
+
+/**
+ * Matches any XPath function call, optionally prefixed (e.g. `count(`, `fn:string-join(`).
+ * Used by _refNeedsDependencyTracking after the navigation-anchor functions are stripped.
+ */
+const FUNCTION_CALL_RE = /[A-Za-z][\w.-]*(?::[A-Za-z][\w.-]*)?\s*\(/;
 
 /**
  * Mixin containing all general functions that are shared by all Fore element classes.
@@ -66,6 +73,15 @@ export default class ForeElementMixin extends HTMLElement {
 
     this.dependencies = new DependentXPathQueries();
     this.ownerForm = null;
+
+    /**
+     * ModelItems this element observes because its ref expression read their nodes.
+     * Bucket-keyed: fx-control tracks two independent expressions (its own ref and its
+     * widget's ref) — a single Set would make each eval wrongly unregister the other's
+     * observers when diffing.
+     * @type {Map<string, Set<import('./modelitem.js').ModelItem>>}
+     */
+    this._refTrackedModelItems = new Map();
   }
 
   getDebugInfo() {
@@ -134,6 +150,76 @@ export default class ForeElementMixin extends HTMLElement {
     return null;
   }
 
+  /**
+   * Decides whether a ref expression needs generic dependency tracking. Navigation-only
+   * refs bind to exactly the node they return — attachObserver() already covers those.
+   * A ref that filters (predicate) or computes (any function call) reads nodes it never
+   * binds to, so its result can go stale without tracking. instance() and index() are
+   * navigation anchors, not computations: instance() only selects the evaluation root,
+   * and index() is handled by a dedicated 'item-changed' listener in UIElement.
+   * Restricted to elements with an `update()` observer callback (skips fx-bind).
+   * `$var`-only refs are covered by the variable-change consumer instead.
+   *
+   * @param {string} [refString] the expression to check, defaults to this element's ref
+   * @returns {boolean}
+   */
+  _refNeedsDependencyTracking(refString = this.ref) {
+    if (!refString) return false;
+    if (typeof this.update !== 'function') return false;
+    if (refString.includes('[')) return true;
+    const stripped = refString.replace(/\b(?:instance|index)\s*\(/g, '');
+    return FUNCTION_CALL_RE.test(stripped);
+  }
+
+  /**
+   * Resolves a node touched during ref evaluation to its (possibly lazily created)
+   * ModelItem so this element can observe it.
+   *
+   * @param {import('./fx-model.js').FxModel} model
+   * @param {Node} touchedNode a node reported by DependencyNotifyingDomFacade
+   * @returns {import('./modelitem.js').ModelItem|null}
+   */
+  _resolveModelItemForTouchedNode(model, touchedNode) {
+    let targetNode = touchedNode;
+    if (targetNode?.nodeType === Node.TEXT_NODE) targetNode = targetNode.parentNode;
+    if (!targetNode) return null;
+    return (
+      model.getModelItem(targetNode) ??
+      // the touched node may live in a different instance than the ref's primary one —
+      // resolve its instance per node, not from the expression
+      FxModel.lazyCreateModelItem(
+        model,
+        this.ref,
+        targetNode,
+        this,
+        model.getInstanceIdForNode(targetNode),
+      )
+    );
+  }
+
+  /**
+   * Registers this element as observer on the ModelItems of all nodes its ref
+   * evaluation touched, and unregisters from ModelItems no longer read (per bucket).
+   *
+   * @param {Set<Node>} touchedNodes nodes reported by DependencyNotifyingDomFacade
+   * @param {string} [bucket] tracking bucket, e.g. 'ref' or 'widget'
+   */
+  _trackRefDependencies(touchedNodes, bucket = 'ref') {
+    const model = this.getModel();
+    if (!model) return;
+    const newModelItems = new Set();
+    touchedNodes.forEach(n => {
+      const mi = this._resolveModelItemForTouchedNode(model, n);
+      if (mi) newModelItems.add(mi);
+    });
+    const previous = this._refTrackedModelItems.get(bucket);
+    previous?.forEach(mi => {
+      if (!newModelItems.has(mi)) mi.removeObserver(this);
+    });
+    newModelItems.forEach(mi => mi.addObserver(this));
+    this._refTrackedModelItems.set(bucket, newModelItems);
+  }
+
   /**
    * evaluation of fx-bind and UiElements differ in details so that each class needs it's own implementation.
    */
@@ -159,6 +245,13 @@ export default class ForeElementMixin extends HTMLElement {
       // console.warn('using default context ', this);
       // return;
     }
+    let touchedNodes = null;
+    let domFacade = null;
+    if (this._refNeedsDependencyTracking()) {
+      touchedNodes = new Set();
+      domFacade = new DependencyNotifyingDomFacade(node => touchedNodes.add(node));
+    }
+
     if (this.ref === '') {
       this.nodeset = inscopeContext;
     } else if (Array.isArray(inscopeContext)) {
@@ -174,17 +267,20 @@ export default class ForeElementMixin extends HTMLElement {
       });
   */
       // this.nodeset = evaluateXPathToFirstNode(this.ref, inscopeContext[0], this);
-      this.nodeset = evaluateXPath(this.ref, inscopeContext[0], this);
+      this.nodeset = evaluateXPath(this.ref, inscopeContext[0], this, {}, {}, domFacade);
     } else {
       // this.nodeset = fx.evaluateXPathToFirstNode(this.ref, inscopeContext, null, {namespaceResolver: this.namespaceResolver});
       if (!inscopeContext) return;
       if (this.nodeName === 'FX-REPEAT') {
         // Repeats are special: they have multiple nodes in their nodeset
-        this.nodeset = evaluateXPath(this.ref, inscopeContext, this);
+        this.nodeset = evaluateXPath(this.ref, inscopeContext, this, {}, {}, domFacade);
       } else {
-        this.nodeset = evaluateXPath(this.ref, inscopeContext, this)[0] || null;
+        this.nodeset = evaluateXPath(this.ref, inscopeContext, this, {}, {}, domFacade)[0] || null;
       }
     }
+    if (touchedNodes) {
+      this._trackRefDependencies(touchedNodes);
+    }
     // console.log('UiElement evaluated to nodeset: ', this.nodeset);
   }
 
@@ -314,22 +410,19 @@ export default class ForeElementMixin extends HTMLElement {
     }
 
     if (path) {
-      existed = model.modelItems.find(item => item.path === path) || null;
+      existed = model._modelItemsByPath.get(path) || null;
       if (existed) {
         // CRITICAL: retarget existing ModelItem to the current backing object
         const isLensObject =
-            targetNode &&
-            typeof targetNode === 'object' &&
-            typeof targetNode.get === 'function' &&
-            typeof targetNode.set === 'function';
-
-        if (isLensObject) {
-          existed.lens = targetNode;
-          existed.node = null;
-        } else {
-          existed.node = targetNode;
-          existed.lens = null;
-        }
+          targetNode &&
+          typeof targetNode === 'object' &&
+          typeof targetNode.get === 'function' &&
+          typeof targetNode.set === 'function';
+
+        model._setModelItemTarget(
+          existed,
+          isLensObject ? { lens: targetNode } : { node: targetNode },
+        );
 
         this.modelItem = existed;
         return existed;
@@ -341,6 +434,7 @@ export default class ForeElementMixin extends HTMLElement {
     this.modelItem = lazyCreatedModelItem;
     return lazyCreatedModelItem;
   }
+
   /**
    * Returns the effective value for the element.
    * a: look for 'value' attribute and if present evaluate it and return the resulting value