@jinntec/fore 2.7.1 → 2.7.2

package/package.json

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

package/src/ForeElementMixin.js

@@ -160,11 +160,11 @@ export default class ForeElementMixin extends HTMLElement {
     } else {
       // this.nodeset = fx.evaluateXPathToFirstNode(this.ref, inscopeContext, null, {namespaceResolver: this.namespaceResolver});
       if (!inscopeContext) return;
-      const { nodeType } = inscopeContext;
-      if (nodeType && !XPathUtil.isAbsolutePath(this.ref)) {
-        this.nodeset = evaluateXPathToFirstNode(this.ref, inscopeContext, this);
+      if (this.nodeName === 'FX-REPEAT') {
+        // Repeats are special: they have multiple nodes in their nodeset
+        this.nodeset = evaluateXPath(this.ref, inscopeContext, this);
       } else {
-        [this.nodeset] = evaluateXPath(this.ref, inscopeContext, this);
+        this.nodeset = evaluateXPath(this.ref, inscopeContext, this)[0] || null;
       }
     }
     // console.log('UiElement evaluated to nodeset: ', this.nodeset);

package/src/fx-fore.js

@@ -443,7 +443,7 @@ export class FxFore extends HTMLElement {
     this.model = modelElement;
 
     this.style.visibility = 'hidden';
-    console.time('init');
+    // console.time('init');
     this.strict = !!this.hasAttribute('strict');
     /*
             document.re('ready', (e) =>{
@@ -545,10 +545,12 @@ export class FxFore extends HTMLElement {
       'value-changed',
       () => {
         this.dirtyState = dirtyStates.DIRTY;
+        this.classList.toggle('fx-modified')
       },
       { once: true },
     );
     this.dirtyState = dirtyStates.CLEAN;
+    this.classList.remove('fx-modified');
   }
 
   /**
@@ -819,7 +821,7 @@ export class FxFore extends HTMLElement {
   }
 
   _processTemplateExpressions() {
-    console.log('processing template expressions ', this.storedTemplateExpressionByNode);
+    // console.log('processing template expressions ', this.storedTemplateExpressionByNode);
     for (const node of Array.from(this.storedTemplateExpressionByNode.keys())) {
       if (node.nodeType === Node.ATTRIBUTE_NODE) {
         // Attribute nodes are not contained by the document, but their owner elements are!
@@ -931,8 +933,6 @@ export class FxFore extends HTMLElement {
    * @private
    */
   _handleModelConstructDone() {
-    this.markAsClean();
-
     if (this.showConfirmation) {
       window.addEventListener('beforeunload', event => {
         if (this.dirtyState === dirtyStates.DIRTY) {
@@ -1096,6 +1096,7 @@ export class FxFore extends HTMLElement {
     // console.log('### modelItems: ', this.getModel().modelItems);
     Fore.dispatch(this, 'ready', {});
     // console.log('dataChanged', FxModel.dataChanged);
+    this.markAsClean();
 
     this.addEventListener('dragstart', this._handleDragStart);
     //	this.addEventListener('dragend', this._handleDragEnd);
@@ -1218,7 +1219,7 @@ export class FxFore extends HTMLElement {
    */
   initData(root = this) {
     // const created = new Promise(resolve => {
-    console.log('INIT');
+    // console.log('INIT');
     // const boundControls = Array.from(root.querySelectorAll('[ref]:not(fx-model *),fx-repeatitem'));
 
     /**
@@ -1243,11 +1244,11 @@ export class FxFore extends HTMLElement {
         // Repeat items are dumb. They do not respond to evalInContext
         bound.evalInContext();
       }
-      if (bound.nodeset !== null && !(Array.isArray(bound.nodeset) && bound.nodeset.length > 0)) {
-        console.log('Node exists', bound.nodeset);
+      if (bound.nodeset !== null && !(Array.isArray(bound.nodeset) && bound.nodeset.length === 0)) {
+        // console.log('Node exists', bound.nodeset);
         continue;
       }
-      console.log('Node does not exists', bound.ref);
+      // console.log('Node does not exists', bound.ref);
 
       // We need to create that node!
       const previousControl = boundControls[i - 1];
@@ -1256,8 +1257,8 @@ export class FxFore extends HTMLElement {
       // First: parent
       if (previousControl && previousControl.contains(bound)) {
         // Parent is here.
-        console.log('insert into', bound, previousControl);
-        console.log('insert into nodeset', bound.nodeset);
+        // console.log('insert into', bound, previousControl);
+        // console.log('insert into nodeset', bound.nodeset);
         /**
          * @type {ParentNode}
          */
@@ -1288,7 +1289,10 @@ export class FxFore extends HTMLElement {
           }
         }
         bound.evalInContext();
+        if (bound.nodeName !== 'FX-REPEAT') {
+          // Do not try to get a bind for a nodeSET of a repeat. there are multiple.
         bound.getModelItem().bind?.evalInContext();
+        }
 
         // console.log('CREATED child', newElement);
         // console.log('new control evaluated to ', control.nodeset);
@@ -1301,24 +1305,19 @@ export class FxFore extends HTMLElement {
       let ourParent = XPathUtil.getParentBindingElement(bound);
       // console.log('ourParent', ourParent);
       let siblingControl = null;
-      /*
-            for (let j = i - 1; j >= 0; --j) {
-                const potentialSibling = boundControls[j];
-                if (XPathUtil.getParentBindingElement(potentialSibling) === ourParent) {
-                    siblingControl = potentialSibling;
-                    break; // Exit once the sibling is found
-                }
-            }
-*/
+
       for (let j = i - 1; j > 0; --j) {
         const siblingOrDescendant = boundControls[j];
+        if (siblingOrDescendant.nodeset && !('nodeType' in siblingOrDescendant.nodeset)) {
+          continue;
+        }
         if (XPathUtil.getParentBindingElement(siblingOrDescendant) === ourParent) {
           siblingControl = siblingOrDescendant;
           break;
         }
       }
       if (!siblingControl) {
-        console.log('No sibling found for', bound);
+        // console.log('No sibling found for', bound);
       }
       // console.log('sibling', siblingControl);
       // todo: review: should this not just be inscopeContext?
@@ -1335,6 +1334,11 @@ export class FxFore extends HTMLElement {
       const ref = bound.ref;
 
       const newNode = this._createNodes(ref, parentNodeset);
+      if (!newNode) {
+        // We could not make the node for some reason. Maybe it's something like `instance('XXX')`?
+        continue;
+      }
+
       if (newNode.nodeType === Node.ATTRIBUTE_NODE) {
         parentNodeset.setAttributeNode(newNode);
       } else {
@@ -1403,7 +1407,7 @@ export class FxFore extends HTMLElement {
   _handleDragStart(event) {
     const draggedItem = event.target.closest('[draggable="true"]');
     this.originalDraggedItem = draggedItem;
-    console.log('DRAG START', this);
+    // console.log('DRAG START', this);
     if (draggedItem.getAttribute('drop-action') === 'copy') {
       event.dataTransfer.dropEffect = 'copy';
       event.dataTransfer.effectAllowed = 'copy';
@@ -1418,7 +1422,7 @@ export class FxFore extends HTMLElement {
   }
 
   _handleDrop(event) {
-    console.log('DROP ON BODY', this);
+    // console.log('DROP ON BODY', this);
     if (!this.draggedItem) {
       return;
     }

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);

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(