@jinntec/fore 2.5.0 → 2.7.0

package/index.js

@@ -32,7 +32,6 @@ 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 './tools/fx-lens.js';
 import './src/ui/fx-upload.js';
 // import './src/tools/fx-minimap.js';
 
@@ -64,6 +63,9 @@ import './src/actions/fx-call.js';
 import './src/actions/fx-setattribute.js';
 import './src/actions/fx-construct-done.js';
 import './src/actions/fx-unmodified.js';
+import './src/ui/fx-control-menu.js';
 
 import './src/functions/fx-function.js';
 import './src/functions/fx-functionlib.js';
+
+export default {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -32,10 +32,12 @@
   "dependencies": {
     "@jinntec/jinn-toast": "^1.0.5",
     "@picocss/pico": "^2.0.6",
+    "chai": "^5.2.1",
     "fontoxpath": "^3.33.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@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",
@@ -43,6 +45,7 @@
     "@open-wc/testing": "^3.1.5",
     "@open-wc/testing-karma": "^4.0.9",
     "@open-wc/testing-karma-bs": "^1.3.94",
+    "@polymer/iron-iconset": "^3.0.1",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-strip": "^2.1.0",
@@ -51,7 +54,6 @@
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "cypress": "^13.16.0",
     "deepmerge": "^4.2.2",
-    "es-dev-server": "^2.1.0",
     "eslint": "^8.16.0",
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^8.0.1",
@@ -66,12 +68,16 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-version-injector": "^1.3.3",
+    "sinon": "^15.2.0",
+    "sinon-chai": "^4.0.0",
     "typescript": "^4.7.2",
+    "vite": "^7.0.5",
     "web-component-analyzer": "^1.1.6",
     "xmlserializer": "^0.6.1"
   },
   "scripts": {
     "test": "karma start",
+    "test:all": "karma start --grep test/**/*.test.js",
     "lint:eslint": "eslint .",
     "format:eslint": "eslint . --fix",
     "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .eslintignore",
@@ -86,11 +92,11 @@
     "test:bs": "karma start karma.bs.config.js --coverage",
     "start:build": "cd dist && es-dev-server --open",
     "build": "rimraf dist && rollup -c rollup.config.js",
-    "start": "es-dev-server --app-index doc/index.html --node-resolve --watch --open",
+    "start": "vite --open --port 8090 --host",
     "preversion": "npm run test",
     "prepare": "npm run build",
     "install-demos": "npm i && cd demo && npm i",
-    "start-cypress": "es-dev-server --app-index doc/index.html --node-resolve",
+    "start-cypress": "npm run start",
     "websocket-server": "node websocket-server.js"
   },
   "keywords": [

package/resources/fore.css

@@ -12,10 +12,6 @@
         --inspector-handle-width: 30px;
     }
 
-    [unresolved] {
-        display: none;
-    }
-
     [disabled] {
         pointer-events: none;
         cursor: default;
@@ -145,7 +141,8 @@
     }
 
     fx-group, fx-switch, fx-repeat, fx-dialog {
-        display: block;
+        /*display: block;*/
+        position: relative;
     }
 
     fx-hint {
@@ -215,6 +212,28 @@
         display: block;
     }
 
+    /* for on-demand elements */
+    [role=group][on-demand=true] {
+            display: none;
+    }
+    .trash {
+        display: inline-block;
+        position: absolute;
+        right:0;
+        top:0;
+        z-index: 10;
+        font-size: 0.8rem;
+    }
+    .trash svg{
+        width: 1rem;
+        height: 1rem;
+        color:#666666;
+    }
+    .trash svg:hover{
+        color:black;
+
+    }
+
     /* fx-action-log styles */
 
     fx-fore.action-log{
@@ -267,3 +286,9 @@
         background: var(--paper-orange-500);
     }
 
+	/*
+	 * For on-demand stuff, if it has no value initially,hide it
+	 */
+	[on-demand] {
+		display: none !important;
+	}

package/src/DataObserver.js

@@ -0,0 +1,181 @@
+/* Usage:
+
+// Create or load your XML document
+const xmlString = `
+  <root>
+    <item id="1">Initial Value</item>
+  </root>
+`;
+const parser = new DOMParser();
+const xmlDoc = parser.parseFromString(xmlString, "application/xml");
+const rootNode = xmlDoc.querySelector("root");
+
+// Create an instance of the DataObserver
+const xmlObserver = new DataObserver(200);
+
+// Define a callback to process mutations
+const handleXMLMutations = (mutationsList) => {
+  console.log("XML Mutations:", mutationsList);
+};
+
+// Attach the observer to the XML root node
+xmlObserver.observe(rootNode, handleXMLMutations);
+
+// Modify the XML document to trigger mutations
+setTimeout(() => {
+  const newItem = xmlDoc.createElement("item");
+  newItem.textContent = "Newly Added Item";
+  rootNode.appendChild(newItem); // This triggers a mutation
+}, 1000);
+
+For JSON:
+// Create a JSON object
+const jsonObject = {
+  name: "John Doe",
+  age: 30,
+  hobbies: ["reading", "coding"],
+};
+
+// Create an instance of the DataObserver
+const jsonObserver = new DataObserver(200);
+
+// Define a callback to process changes
+const handleJSONChanges = (changesList) => {
+  console.log("JSON Changes:", changesList);
+};
+
+// Attach the observer to the JSON object
+jsonObserver.observe(jsonObject, handleJSONChanges);
+
+// Modify the JSON object to trigger changes
+setTimeout(() => {
+  jsonObject.name = "Jane Doe"; // This triggers a mutation
+  jsonObject.age = 31; // Another mutation
+  delete jsonObject.hobbies; // This triggers a delete mutation
+}, 1000);
+
+*/
+export class DataObserver {
+    constructor(debounceTime = 0) {
+        this.observer = null; // Placeholder for MutationObserver (for XML)
+        this.debounceTime = debounceTime; // Time in milliseconds for optional debouncing
+        this.mutationsQueue = []; // To batch process mutations
+        this.debounceTimer = null; // Timer for debouncing
+        this.jsonProxy = null; // Proxy for JSON observation
+    }
+
+    /**
+     * Attaches an observer to the given rootNode (DOM Node or JSON object)
+     * @param {Node|Object} rootNode - The XML DOM node or JSON object to observe
+     * @param {Function} callback - Function to process batch mutations
+     */
+    observe(rootNode, callback) {
+        if (rootNode instanceof Node) {
+            // Handle XML Node
+            this.observeXML(rootNode, callback);
+        } else if (typeof rootNode === "object" && rootNode !== null) {
+            // Handle JSON Object
+            this.observeJSON(rootNode, callback);
+        } else {
+            throw new Error("Invalid rootNode. Must be a DOM Node or a JSON object.");
+        }
+    }
+
+    /**
+     * Observes changes in an XML DOM node
+     * @param {Node} xmlNode - The XML DOM node to observe
+     * @param {Function} callback - Function to process batch mutations
+     */
+    observeXML(xmlNode, callback) {
+        // Initialize a new MutationObserver
+        this.observer = new MutationObserver((mutationsList) => {
+            this.mutationsQueue.push(...mutationsList);
+
+            if (this.debounceTime > 0) {
+                clearTimeout(this.debounceTimer); // Clear previous timer
+                this.debounceTimer = setTimeout(() => {
+                    this.processMutations(callback);
+                }, this.debounceTime);
+            } else {
+                this.processMutations(callback);
+            }
+        });
+
+        // Start observing the XML node
+        this.observer.observe(xmlNode, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+
+    /**
+     * Observes changes in a JSON object using a proxy
+     * @param {Object} jsonObject - The JSON object to observe
+     * @param {Function} callback - Function to process changes
+     */
+    observeJSON(jsonObject, callback) {
+        const handler = {
+            set: (target, key, value) => {
+                this.mutationsQueue.push({ type: "update", target, key, value });
+
+                if (this.debounceTime > 0) {
+                    clearTimeout(this.debounceTimer); // Clear previous timer
+                    this.debounceTimer = setTimeout(() => {
+                        this.processMutations(callback);
+                    }, this.debounceTime);
+                } else {
+                    this.processMutations(callback);
+                }
+
+                // Perform the actual update
+                target[key] = value;
+                return true;
+            },
+
+            deleteProperty: (target, key) => {
+                this.mutationsQueue.push({ type: "delete", target, key });
+
+                if (this.debounceTime > 0) {
+                    clearTimeout(this.debounceTimer); // Clear previous timer
+                    this.debounceTimer = setTimeout(() => {
+                        this.processMutations(callback);
+                    }, this.debounceTime);
+                } else {
+                    this.processMutations(callback);
+                }
+
+                // Perform the actual delete
+                return delete target[key];
+            },
+        };
+
+        this.jsonProxy = new Proxy(jsonObject, handler);
+    }
+
+    /**
+     * Processes the mutations batch and clears the queue
+     * @param {Function} callback - Function to handle the batch of mutations
+     */
+    processMutations(callback) {
+        if (this.mutationsQueue.length > 0) {
+            callback(this.mutationsQueue); // Pass the batch to the callback
+            this.mutationsQueue = []; // Clear the queue
+        }
+    }
+
+    /**
+     * Disconnects the observer and clears any pending debounce timer
+     */
+    disconnect() {
+        if (this.observer) {
+            this.observer.disconnect(); // Disconnect the MutationObserver
+            this.observer = null;
+        }
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer); // Clear any pending debounce timer
+        }
+        this.mutationsQueue = []; // Clear the mutation queue
+        this.jsonProxy = null; // Clear JSON proxy reference
+    }
+}

package/src/DependencyNotifyingDomFacade.js

@@ -24,6 +24,7 @@ export class DependencyNotifyingDomFacade {
    */
   // eslint-disable-next-line class-methods-use-this
   getAllAttributes(node) {
+    this._onNodeTouched(node); // <== Important!
     return Array.from(node.attributes);
   }
 
@@ -35,7 +36,10 @@ export class DependencyNotifyingDomFacade {
    */
   // eslint-disable-next-line class-methods-use-this
   getAttribute(node, attributeName) {
-    return node.getAttribute(attributeName);
+    const attr = node.getAttributeNode(attributeName);
+    console.log('[DomFacade] getAttribute touched:', attr);
+    if (attr) this._onNodeTouched(attr);
+    return attr?.value ?? null;
   }
 
   /**
@@ -61,10 +65,12 @@ export class DependencyNotifyingDomFacade {
    */
   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;
   }
@@ -95,14 +101,12 @@ export class DependencyNotifyingDomFacade {
    */
   // eslint-disable-next-line class-methods-use-this
   getLastChild(node, bucket) {
-    const matchingNodes = node
-      .getChildNodes()
-      .filter(childNode => !bucket || getBucketsForNode(childNode).includes(bucket));
-    const matchNode = matchingNodes[matchingNodes.length - 1];
-    if (matchNode) {
-      return matchNode;
-    }
-    return null;
+    const children = Array.from(node.childNodes).filter(
+      child => !bucket || getBucketsForNode(child).includes(bucket),
+    );
+    const last = children[children.length - 1];
+    if (last) this._onNodeTouched(last);
+    return last || null;
   }
 
   /**
@@ -133,7 +137,16 @@ export class DependencyNotifyingDomFacade {
    */
   // eslint-disable-next-line class-methods-use-this
   getParentNode(node) {
-    return node.parentNode;
+    const parent = node.parentNode;
+    /*
+    if (
+      parent &&
+      (parent.nodeType === Node.ELEMENT_NODE || parent.nodeType === Node.ATTRIBUTE_NODE)
+    ) {
+      this._onNodeTouched(parent);
+    }
+*/
+    return parent;
   }
 
   /**
@@ -145,17 +158,10 @@ export class DependencyNotifyingDomFacade {
    */
   // eslint-disable-next-line class-methods-use-this
   getPreviousSibling(node, bucket) {
-    for (
-      let { previousSibling } = node;
-      previousSibling;
-      previousSibling = previousSibling.previousSibling
-    ) {
-      if (bucket && !getBucketsForNode(previousSibling).includes(bucket)) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-
-      return previousSibling;
+    for (let sibling = node.previousSibling; sibling; sibling = sibling.previousSibling) {
+      if (bucket && !getBucketsForNode(sibling).includes(bucket)) continue;
+      this._onNodeTouched(sibling);
+      return sibling;
     }
     return null;
   }

package/src/DependentXPathQueries.js

@@ -25,6 +25,38 @@ export default class DependentXPathQueries {
     return !!this._parentDependencies?.isInvalidatedByIndexFunction();
   }
 
+  /**
+   * Detects whether there are XPaths that may be affected by child list changes to nodes with the given local names
+   *
+   * It does this pessimistically, assuming that any descendant axis can be affected by these changes
+   *
+   * @param {string[]} affectedLocalNames
+   */
+  isInvalidatedByChildlistChanges(affectedLocalNames) {
+    // Scan for any XPath part that may jump over a node without checking what the type is. Can also
+    // be done dynamically, by listening for the `bucket` parameter of all the dom accessors
+    const flaggedConstructs = [
+      '//',
+      'ancestor',
+      'descendant',
+      'element(',
+      '*',
+      '..',
+      'following',
+      'preceding',
+    ];
+    for (const xpath of this._xpaths) {
+      if (flaggedConstructs.some(c => xpath.includes(c))) {
+        return true;
+      }
+      if (affectedLocalNames.some(n => xpath.includes(n))) {
+        return true;
+      }
+    }
+    // We can also depend on these elements if it was used in our ancestry
+    return !!this._parentDependencies?.isInvalidatedByChildlistChanges(affectedLocalNames);
+  }
+
   /**
    * Add an XPath to the dependencies
    *

package/src/ForeElementMixin.js

@@ -8,6 +8,7 @@ import {
 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.
@@ -63,8 +64,18 @@ export default class ForeElementMixin extends HTMLElement {
      */
     this.inScopeVariables = new Map();
 
-    this._dependencies = new DependentXPathQueries();
-    this._dependencies.setParentDependencies(this.parent?.closest('[ref]')?._dependencies);
+    this.dependencies = new DependentXPathQueries();
+    this.ownerForm = null;
+  }
+
+  connectedCallback() {
+    if (this.parentElement) {
+      this.dependencies.setParentDependencies(this.parentElement?.closest('[ref]')?.dependencies);
+    }
+
+    // The fx-model linked to here won't ever change
+    this.model = this.getModel();
+    this.ownerForm = this.getOwnerForm();
   }
 
   /**
@@ -86,10 +97,12 @@ export default class ForeElementMixin extends HTMLElement {
    * @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;
       }
@@ -100,14 +113,14 @@ export default class ForeElementMixin extends HTMLElement {
         currentElement = currentElement.parentNode;
       }
     }
-    return currentElement;
+    return null;
   }
 
   /**
    * evaluation of fx-bind and UiElements differ in details so that each class needs it's own implementation.
    */
   evalInContext() {
-    this._dependencies.resetDependencies();
+    this.dependencies.resetDependencies();
     // const inscopeContext = this.getInScopeContext();
     const model = this.getModel();
     if (!model) {
@@ -119,7 +132,7 @@ export default class ForeElementMixin extends HTMLElement {
     }
     if (this.hasAttribute('ref')) {
       inscopeContext = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
-      this._dependencies.addXPath(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
@@ -132,16 +145,16 @@ export default class ForeElementMixin extends HTMLElement {
       this.nodeset = inscopeContext;
     } else if (Array.isArray(inscopeContext)) {
       /*
-			inscopeContext.forEach(n => {
-			  if (XPathUtil.isSelfReference(this.ref)) {
-				this.nodeset = inscopeContext;
-			  } else {
-				const localResult = evaluateXPathToFirstNode(this.ref, n, this);
-				// console.log('local result: ', localResult);
-				this.nodeset.push(localResult);
-			  }
-			});
-	*/
+      inscopeContext.forEach(n => {
+        if (XPathUtil.isSelfReference(this.ref)) {
+        this.nodeset = inscopeContext;
+        } else {
+        const localResult = evaluateXPathToFirstNode(this.ref, n, this);
+        // console.log('local result: ', localResult);
+        this.nodeset.push(localResult);
+        }
+      });
+  */
       // this.nodeset = evaluateXPathToFirstNode(this.ref, inscopeContext[0], this);
       this.nodeset = evaluateXPath(this.ref, inscopeContext[0], this);
     } else {
@@ -230,6 +243,9 @@ export default class ForeElementMixin extends HTMLElement {
    * @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;
@@ -248,21 +264,39 @@ export default class ForeElementMixin extends HTMLElement {
       existed = this.nodeset ? this.getModel().getModelItem(this.nodeset) : null;
     }
 
-    if (!existed) {
-      const lazyCreatedModelItem = FxModel.lazyCreateModelItem(
-        this.getModel(),
-        this.ref,
-        this.nodeset,
-        this,
-      );
-      this.modelItem = lazyCreatedModelItem;
-      return lazyCreatedModelItem;
+    // 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;
+
+      if (targetNode?.nodeType) {
+        const path = getPath(targetNode, instanceId);
+
+        // Try to find a ModelItem with this path
+        existed = this.getModel().modelItems.find(item => item.path === path);
+
+        if (existed) {
+          // Update the node reference in the existing ModelItem
+          existed.node = targetNode;
+        }
+      }
+      if (!existed) {
+        const lazyCreatedModelItem = FxModel.lazyCreateModelItem(
+          this.getModel(),
+          this.ref,
+          this.nodeset,
+          this,
+        );
+        this.modelItem = lazyCreatedModelItem;
+        return lazyCreatedModelItem;
+      }
     }
     this.modelItem = existed;
 
     return existed;
   }
-
   /**
    * Returns the effective value for the element.
    * a: look for 'value' attribute and if present evaluate it and return the resulting value