@jinntec/fore 2.4.2 → 2.6.0

package/index.js

@@ -32,6 +32,7 @@ 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';
@@ -62,6 +63,7 @@ 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "2.4.2",
+  "version": "2.6.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -49,7 +49,7 @@
     "@skypack/package-check": "^0.2.2",
     "@types/cypress": "^1.1.3",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "cypress": "^13.3.0",
+    "cypress": "^13.16.0",
     "deepmerge": "^4.2.2",
     "es-dev-server": "^2.1.0",
     "eslint": "^8.16.0",

package/resources/fore.css

@@ -8,7 +8,7 @@
         --inspector-pre-bg: var(--paper-grey-100);
         --inspector-color: var(--paper-grey-800);
         --inspector-instance-height: 200px;
-        --inspector-handle-bg: var(--paper-blue-500);
+        --inspector-handle-bg: var(--paper-blue-700);
         --inspector-handle-width: 30px;
     }
 
@@ -146,6 +146,7 @@
 
     fx-group, fx-switch, fx-repeat, fx-dialog {
         display: block;
+        position: relative;
     }
 
     fx-hint {
@@ -215,6 +216,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 +290,9 @@
         background: var(--paper-orange-500);
     }
 
+	/*
+	 * For on-demand stuff, if it has no value initially,hide it
+	 */
+	[on-demand] {
+		display: none
+	}

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/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
    *