@jinntec/fore 2.7.1 → 2.8.0

package/src/fx-instance.js

@@ -163,10 +163,10 @@ export class FxInstance extends HTMLElement {
     // Note: use the getter here: it might provide us with stubbed data if anything async is racing,
     // such as an @src attribute
     const instanceData = this.getInstanceData();
-    if (this.type === 'xml') {
+    if (this.type === 'xml'  || this.type === 'html') {
       return instanceData.firstElementChild;
     }
-    return instanceData;
+    return this.instanceData;
   }
 
   /**

package/src/fx-submission.js

@@ -250,21 +250,17 @@ export class FxSubmission extends ForeElementMixin {
         return;
       }
 
-      const contentType = response.headers
-        .get('content-type')
-        .split(';')[0]
-        .trim()
-        .toLowerCase();
-      if (contentType.startsWith('text/')) {
+      const contentType = response.headers.get('content-type').split(';')[0].trim().toLowerCase();
+      if (contentType.endsWith('/xml') || contentType.endsWith('+xml')) {
+        const text = await response.text();
+        const xml = new DOMParser().parseFromString(text, 'application/xml');
+        this._handleResponse(xml, resolvedUrl, contentType);
+      } else if (contentType.startsWith('text/')) {
         const text = await response.text();
         this._handleResponse(text, resolvedUrl, contentType);
       } else if (contentType.endsWith('/json') || contentType.endsWith('+json')) {
         const json = await response.json();
         this._handleResponse(json, resolvedUrl, contentType);
-      } else if (contentType.endsWith('/xml') || contentType.endsWith('+xml')) {
-        const text = await response.text();
-        const xml = new DOMParser().parseFromString(text, 'application/xml');
-        this._handleResponse(xml, resolvedUrl, contentType);
       } else {
         const blob = await response.blob();
         this._handleResponse(blob, resolvedUrl, contentType);
@@ -381,6 +377,24 @@ export class FxSubmission extends ForeElementMixin {
     const targetInstance = this._getTargetInstance();
 
     if (this.replace === 'instance') {
+      const targetInstance = this._getTargetInstance();
+
+      // ### contentType handling
+
+      if (contentType.includes('html')) {
+        let effectiveData;
+        if (data.nodeType) {
+          effectiveData = data;
+        }
+        // ## try parsing
+        try {
+          effectiveData = new DOMParser().parseFromString(data, 'text/html');
+        } catch {
+          Fore.dispatch(this, 'error', { message: 'could not parse data as HTML' });
+        }
+
+        targetInstance.instanceData = effectiveData;
+      }
       if (targetInstance) {
         if (this.targetref) {
           const [theTarget] = evaluateXPath(

package/src/modelitem.js

@@ -71,13 +71,13 @@ export class ModelItem {
     if (!this.node) return;
     const oldVal = this.value;
 
-    if (newVal?.nodeType === Node.DOCUMENT_NODE) {
+    if (newVal?.nodeType && newVal.nodeType === Node.DOCUMENT_NODE) {
       this.node.replaceWith(newVal.firstElementChild);
-      this.node = newVal.firstElementChild;
-    } else if (newVal?.nodeType === Node.ELEMENT_NODE) {
+      // this.node.appendChild(newVal.firstElementChild);
+    } else if (newVal?.nodeType && newVal.nodeType === Node.ELEMENT_NODE) {
       this.node.replaceWith(newVal);
-      this.node = newVal;
-    } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
+      // this.node.appendChild(newVal);
+    } else if (newVal?.nodeType && this.node.nodeType === Node.ATTRIBUTE_NODE) {
       this.node.nodeValue = newVal;
     } else {
       this.node.textContent = newVal;

package/src/tools/deprecation.md

@@ -0,0 +1 @@
+This package is deprecated and no longer maintained or included in index.js

package/src/tools/fx-action-log.js

@@ -1,4 +1,4 @@
-import { XPathUtil } from '../xpath-util';
+import { XPathUtil } from '../xpath-util.js';
 import './fx-log-item.js';
 import { FxLogSettings } from './fx-log-settings.js';
 import { getDocPath, getPath } from '../xpath-path.js';
@@ -521,7 +521,7 @@ export class FxActionLog extends HTMLElement {
    */
   _logDetails(e) {
     const eventType = e.type;
-    const path = XPathUtil.getPath(e.target, '');
+    const path = getPath(e.target, '');
     // console.log('>>>> _logDetails', path);
     const cut = path.substring(path.indexOf('/fx-fore'), path.length);
     const xpath = `/${cut}`;

package/src/ui/abstract-control.js

@@ -286,6 +286,10 @@ export default class AbstractControl extends UIElement {
   }
 
   _toggleValid(valid) {
+    // Used by required handling (and potentially other callers).
+    // It must also fire validity events and sync aria-invalid.
+    const wasInvalid = this.hasAttribute('invalid');
+
     if (valid) {
       this.removeAttribute('invalid');
       this.setAttribute('valid', '');
@@ -293,6 +297,25 @@ export default class AbstractControl extends UIElement {
       this.removeAttribute('valid');
       this.setAttribute('invalid', '');
     }
+    this._syncAriaInvalid();
+
+    const isInvalid = this.hasAttribute('invalid');
+    // Only dispatch when the state actually changed
+    if (wasInvalid !== isInvalid) {
+      this._dispatchEvent(isInvalid ? 'invalid' : 'valid');
+    }
+  }
+
+  _syncAriaInvalid() {
+    // Keep widget aria-invalid in sync with the *control* state, regardless of
+    // whether invalidity comes from constraint, required emptiness, etc.
+    try {
+      const w = this.getWidget?.() || this.widget;
+      if (!w) return;
+      w.setAttribute('aria-invalid', this.hasAttribute('invalid') ? 'true' : 'false');
+    } catch (e) {
+      // ignore: widget might not exist yet
+    }
   }
 
   handleReadonly() {
@@ -321,8 +344,8 @@ export default class AbstractControl extends UIElement {
         // if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
         this.setAttribute('valid', '');
-        this.getWidget().setAttribute('aria-invalid', 'false');
         this.removeAttribute('invalid');
+        this.getWidget().setAttribute('aria-invalid', 'false');
       } else {
         this.setAttribute('invalid', '');
         this.getWidget().setAttribute('aria-invalid', 'true');
@@ -352,31 +375,41 @@ export default class AbstractControl extends UIElement {
         this._dispatchEvent('invalid');
       }
     }
+
+    // Ensure aria-invalid matches the current control state even if
+    // we didn't enter the state-change branch above.
+    this._syncAriaInvalid();
+
   }
 
   handleRelevant() {
-    // console.log('mip valid', this.modelItem.enabled);
+    // IMPORTANT: don't clear relevant/nonrelevant BEFORE comparing states.
+    // Otherwise isEnabled() (based on attributes) always reads as "enabled"
+    // and we can never detect a transition back to relevant.
     const item = this.modelItem.node;
-    this.removeAttribute('relevant');
-    this.removeAttribute('nonrelevant');
+
+    const wasEnabled = this.isEnabled();
+
+    // Determine new enabled state
+    let newEnabled = !!this.modelItem.relevant;
+
+    // If a nodeset resolves to an empty array, treat the control as nonrelevant
     if (Array.isArray(item) && item.length === 0) {
-      this._dispatchEvent('nonrelevant');
-      this.setAttribute('nonrelevant', '');
-      // this.style.display = 'none';
-      return;
+      newEnabled = false;
     }
-    if (this.isEnabled() !== this.modelItem.relevant) {
-      if (this.modelItem.relevant) {
-        this._dispatchEvent('relevant');
-        // this._fadeIn(this, this.display);
+
+    // Apply attributes
+    if (newEnabled) {
         this.setAttribute('relevant', '');
-        // this.style.display = this.display;
+      this.removeAttribute('nonrelevant');
       } else {
-        this._dispatchEvent('nonrelevant');
-        // this._fadeOut(this);
         this.setAttribute('nonrelevant', '');
-        // this.style.display = 'none';
+      this.removeAttribute('relevant');
       }
+
+    // Dispatch only on actual change
+    if (wasEnabled !== newEnabled) {
+      this._dispatchEvent(newEnabled ? 'relevant' : 'nonrelevant');
     }
   }
 

package/src/ui/fx-control.js

@@ -3,11 +3,9 @@ import {
   evaluateXPath,
   evaluateXPathToString,
   evaluateXPathToFirstNode,
-  evaluateXPathToBoolean,
 } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { Fore } from '../fore.js';
-import { ModelItem } from '../modelitem.js';
 import { debounce } from '../events.js';
 import { FxModel } from '../fx-model.js';
 import { DependencyNotifyingDomFacade } from '../DependencyNotifyingDomFacade';
@@ -42,6 +40,11 @@ export default class FxControl extends XfAbstractControl {
     this.inited = false;
     this.nodeset = null;
     this.attachShadow({ mode: 'open' });
+
+    /**
+     * Flag that is raised while refreshing, to ignore any updates from the widget inside of us
+     */
+    this._isRefreshing = false;
   }
 
   static get properties() {
@@ -64,6 +67,13 @@ export default class FxControl extends XfAbstractControl {
       // We have multiple! Just return that as space-separated for now
       return [...this.widget.selectedOptions].map(option => option.value).join(' ');
     }
+    if (this.getAttribute('as') === 'xml') {
+      // We are setting serialized XML here, so when roundtripping, parse it
+      const value = this.widget[this.valueProp];
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(value, 'application/xml');
+      return doc.documentElement;
+    }
     return this.widget[this.valueProp];
   }
 
@@ -174,6 +184,10 @@ export default class FxControl extends XfAbstractControl {
       );
     } else {
       listenOn.addEventListener(this.updateEvent, event => {
+        if (this._isRefreshing) {
+          // We are refreshing. No use in updating
+          return;
+        }
         this.setValue(this._getValueOfWidget());
       });
       listenOn.addEventListener(
@@ -210,7 +224,7 @@ export default class FxControl extends XfAbstractControl {
    * activates a control that uses 'on-demand' attribute
    */
   activate() {
-    console.log('fx-control.activate() called');
+    // console.log('fx-control.activate() called');
     this.removeAttribute('on-demand');
     this.style.display = '';
     this.refresh(true);
@@ -241,7 +255,7 @@ export default class FxControl extends XfAbstractControl {
    * @param val the new value to be set
    */
   setValue(val) {
-    console.log('Control.setValue', val, 'on', this);
+    // console.log('Control.setValue', val, 'on', this);
     const modelitem = this.getModelItem();
 
     if (this.getAttribute('class')) {
@@ -257,10 +271,9 @@ export default class FxControl extends XfAbstractControl {
 
     if (this.getAttribute('as') === 'node') {
       const replace = this.shadowRoot.getElementById('replace');
-      const widgetValue = this.getWidget()[this.valueProp];
-      replace.replace(this.nodeset, widgetValue);
-      if (modelitem && widgetValue && widgetValue !== modelitem.value) {
-        modelitem.value = widgetValue;
+      replace.replace(this.nodeset, val);
+      if (modelitem && val && val !== modelitem.value) {
+        modelitem.value = val;
         FxModel.dataChanged = true;
         replace.actionPerformed();
       }
@@ -398,11 +411,14 @@ export default class FxControl extends XfAbstractControl {
     if (this.hasAttribute('as')) {
       const as = this.getAttribute('as');
 
-      // ### when there's an `as=text` attribute serialize nodeset to prettified string
-      if (as === 'text') {
+      // ### when there's an `as="xml"` attribute serialize nodeset to prettified string
+      if (as === 'xml') {
         const serializer = new XMLSerializer();
-        const pretty = Fore.prettifyXml(serializer.serializeToString(this.nodeset));
-        widget.value = pretty;
+        const pretty = serializer.serializeToString(this.nodeset);
+        if (widget[this.valueProp] === pretty) {
+          return;
+        }
+        widget[this.valueProp] = pretty;
       }
       if (as === 'node' && this.nodeset !== widget.value) {
         // const oldVal = this.nodeset.innerHTML;
@@ -547,15 +563,20 @@ export default class FxControl extends XfAbstractControl {
   }
 
   async refresh(force = false) {
-    console.log('🔄 fx-control refresh', this);
-    super.refresh(force);
-    // console.log('refresh template', this.template);
-    // const {widget} = this;
-
-    // ### if we find a ref on control we have a 'select' control of some kind
-    const widget = this.getWidget();
-    this._handleBoundWidget(widget, force);
-    this._handleDataAttributeBinding();
+    try {
+      this._isRefreshing = true;
+      // console.log('🔄 fx-control refresh', this);
+      super.refresh(force);
+      // console.log('refresh template', this.template);
+      // const {widget} = this;
+
+      // ### if we find a ref on control we have a 'select' control of some kind
+      const widget = this.getWidget();
+      this._handleBoundWidget(widget, force);
+      this._handleDataAttributeBinding();
+    } finally {
+      this._isRefreshing = false;
+    }
     Fore.refreshChildren(this, force);
   }
 

package/src/ui/fx-output.js

@@ -2,7 +2,6 @@ import { Fore } from '../fore.js';
 import XfAbstractControl from './abstract-control.js';
 import { evaluateXPath, evaluateXPathToStrings } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
-// import {markdown} from '../drawdown.js';
 
 /**
  * todo: review placing of value. should probably work with value attribute and not allow slotted content.
@@ -46,7 +45,7 @@ export class FxOutput extends XfAbstractControl {
 
     const outputHtml = `
             <slot name="label"></slot>
-            
+
             <span id="value">
                 <slot name="default"></slot>
             </span>

package/src/ui/fx-repeat.js

@@ -632,11 +632,13 @@ export class FxRepeat extends withDraggability(UIElement, false) {
 
       if (this.getOwnerForm().createNodes) {
         this.getOwnerForm().initData(repeatItem);
-        const repeatItemClone = repeatItem.nodeset.cloneNode(true);
-        this.clearTextValues(repeatItemClone);
-
-        // this.createdNodeset = repeatItem.nodeset.cloneNode(true);
-        this.createdNodeset = repeatItemClone;
+        if (repeatItem.nodeset.nodeType) {
+          // Do not try to d things with repeats that do not reason over nodes
+          const repeatItemClone = repeatItem.nodeset.cloneNode(true);
+          this.clearTextValues(repeatItemClone);
+          // this.createdNodeset = repeatItem.nodeset.cloneNode(true);
+          this.createdNodeset = repeatItemClone;
+        }
         // console.log('createdNodeset', this.createdNodeset)
       }
 

package/src/xpath-evaluation.js

@@ -13,7 +13,6 @@ import {
 
 import { XPathUtil } from './xpath-util.js';
 import { prettifyXml } from './functions/common-function.js';
-import * as fx from 'fontoxpath';
 
 const XFORMS_NAMESPACE_URI = 'http://www.w3.org/2002/xforms';
 
@@ -489,6 +488,7 @@ export function evaluateXPath(xpath, contextNode, formElement, variables = {}, o
       { ...variablesInScope, ...variables },
       fxEvaluateXPath.ALL_RESULTS_TYPE,
       {
+        xmlSerializer: new XMLSerializer(),
         debug: true,
         currentContext: { formElement, variables },
         moduleImports: {
@@ -553,6 +553,7 @@ export function evaluateXPathToFirstNode(xpath, contextNode, formElement) {
       currentContext: { formElement },
       functionNameResolver,
       namespaceResolver,
+      xmlSerializer: new XMLSerializer(),
     });
     // console.log('evaluateXPathToFirstNode',xpath, result);
     return result;
@@ -570,6 +571,7 @@ export function evaluateXPathToFirstNode(xpath, contextNode, formElement) {
       }),
     );
   }
+  return null;
 }
 
 /**
@@ -592,6 +594,7 @@ export function evaluateXPathToNodes(xpath, contextNode, formElement) {
         xf: XFORMS_NAMESPACE_URI,
       },
       namespaceResolver,
+      xmlSerializer: new XMLSerializer(),
     });
     // console.log('evaluateXPathToNodes',xpath, result);
     return result;
@@ -631,6 +634,7 @@ export function evaluateXPathToBoolean(xpath, contextNode, formElement) {
         xf: XFORMS_NAMESPACE_URI,
       },
       namespaceResolver,
+      xmlSerializer: new XMLSerializer(),
     });
   } catch (e) {
     formElement.dispatchEvent(
@@ -671,6 +675,7 @@ export function evaluateXPathToString(xpath, contextNode, formElement, domFacade
         xf: XFORMS_NAMESPACE_URI,
       },
       namespaceResolver,
+      xmlSerializer: new XMLSerializer(),
     });
   } catch (e) {
     formElement.dispatchEvent(
@@ -714,6 +719,7 @@ export function evaluateXPathToStrings(xpath, contextNode, formElement, domFacad
           xf: XFORMS_NAMESPACE_URI,
         },
         namespaceResolver,
+        xmlSerializer: new XMLSerializer(),
       },
     );
   } catch (e) {
@@ -755,6 +761,7 @@ export function evaluateXPathToNumber(xpath, contextNode, formElement, domFacade
         xf: XFORMS_NAMESPACE_URI,
       },
       namespaceResolver,
+      xmlSerializer: new XMLSerializer(),
     });
   } catch (e) {
     formElement.dispatchEvent(

package/src/xpath-util.js

@@ -1,5 +1,4 @@
 import * as fx from 'fontoxpath';
-import { createNamespaceResolver } from './xpath-evaluation';
 
 export class XPathUtil {
   /**
@@ -44,10 +43,11 @@ export class XPathUtil {
    * @param xpath
    * @param doc {XMLDocument}
    * @param fore
+   * @param namespaceResolver {function} optional namespace resolver function
    * @return {Node|Attr}
    */
-  static createNodesFromXPath(xpath, doc, fore) {
-    const resolveNamespace = createNamespaceResolver(xpath, fore);
+  static createNodesFromXPath(xpath, doc, fore, namespaceResolver = null) {
+    const resolveNamespace = namespaceResolver || (() => undefined);
 
     if (!doc) {
       doc = document.implementation.createDocument(null, null, null); // Create a new XML document if not provided

package/src/DataObserver.js

@@ -1,181 +0,0 @@
-/* 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
-    }
-}