@jinntec/fore 2.1.1 → 2.3.0

package/src/fx-var.js

@@ -1,13 +1,15 @@
+import { createTypedValueFactory, domFacade } from 'fontoxpath';
 import { Fore } from './fore.js';
 import './fx-instance.js';
 import { evaluateXPath } from './xpath-evaluation.js';
-import { foreElementMixin } from './ForeElementMixin.js';
+import ForeElementMixin from './ForeElementMixin.js';
 import getInScopeContext from './getInScopeContext.js';
 
-/**
- * @ts-check
- */
-export class FxVariable extends foreElementMixin(HTMLElement) {
+// We are getting sequences here (evaluateXPath is returning all items, as an array)
+// So wrap them into something so FontoXPath also understands they are sequences, always.
+const typedValueFactory = createTypedValueFactory('item()*');
+
+export class FxVariable extends ForeElementMixin {
   constructor() {
     super();
 
@@ -15,6 +17,7 @@ export class FxVariable extends foreElementMixin(HTMLElement) {
     this.name = '';
     this.valueQuery = '';
     this.value = null;
+    this.precedingVariables = [];
   }
 
   connectedCallback() {
@@ -25,15 +28,13 @@ export class FxVariable extends foreElementMixin(HTMLElement) {
   refresh() {
     const inscope = getInScopeContext(this, this.valueQuery);
 
-      const values = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
-	  if (values.length) {
-		  [this.value] = values;
-	  } else {
-		  // There is no value: set to null so it's interpreted as empty-sequence later on
-		  this.value = null;
-	  }
+    const values = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
+    this.value = typedValueFactory(values, domFacade);
   }
 
+  /**
+   * @param {Map<string, FxVariable>} inScopeVariables
+   */
   setInScopeVariables(inScopeVariables) {
     if (inScopeVariables.has(this.name)) {
       console.error(`The variable ${this.name} is declared more than once`);

package/src/getInScopeContext.js

@@ -1,95 +1,108 @@
 import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
-import {XPathUtil} from './xpath-util.js';
+import { XPathUtil } from './xpath-util.js';
 
+/**
+ * @param {Node} node
+ * @returns {HTMLElement}
+ */
 function _getElement(node) {
-    if (node && node.nodeType && node.nodeType === Node.ATTRIBUTE_NODE) {
-        // The context of an attribute is the ref of the element it's defined on
-        return node.ownerElement;
-    }
+  if (node && node.nodeType && node.nodeType === Node.ATTRIBUTE_NODE) {
+    // The context of an attribute is the ref of the element it's defined on
+    return node.ownerElement;
+  }
 
-    if (node.nodeType === Node.ELEMENT_NODE) {
-        // The context of a query should be the element having a ref
-        return node;
-    }
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    // The context of a query should be the element having a ref
+    return node;
+  }
 
-    // For text nodes, just start looking from the parent element
-    return node.parentNode;
+  // For text nodes, just start looking from the parent element
+  return node.parentNode;
 }
 
 function _getForeContext(node) {
-    return node.closest('fx-fore');
+  return XPathUtil.getClosest('fx-fore', node);
 }
 
 function _getModelInContext(node) {
-    // const ownerForm = node.closest('fx-fore');
-    const ownerForm = _getForeContext(node);
-    return ownerForm.getModel();
+  // const ownerForm = node.closest('fx-fore');
+  const ownerForm = _getForeContext(node);
+  return ownerForm.getModel();
 }
 
 function _getInitialContext(node, ref) {
-    const parentBind = XPathUtil.getClosest('[ref]', node);
-    const localFore = XPathUtil.getClosest('fx-fore', node);
+  const parentBind = XPathUtil.getClosest('[ref]', node);
+  const localFore = XPathUtil.getClosest('fx-fore', node);
 
-    const model = _getModelInContext(node);
+  const model = _getModelInContext(node);
 
-    if (parentBind !== null) {
-        /*
+  if (parentBind !== null) {
+    /*
         make sure that the closest ref belongs to the same fx-fore element
         */
-        const parentBindFore = parentBind.closest('fx-fore');
-        if (localFore === parentBindFore) {
-            return parentBind.nodeset;
-        }
-        return model.getDefaultInstance().getDefaultContext();
+    const parentBindFore = parentBind.closest('fx-fore');
+    if (localFore === parentBindFore) {
+      return parentBind.nodeset;
     }
+    return model.getDefaultInstance().getDefaultContext();
+  }
 
-    if (XPathUtil.isAbsolutePath(ref)) {
-        const instanceId = XPathUtil.getInstanceId(ref);
-        if (instanceId) {
-            return model.getInstance(instanceId).getDefaultContext();
-        }
-        return model.getDefaultInstance().getDefaultContext();
+  if (XPathUtil.isAbsolutePath(ref)) {
+    const instanceId = XPathUtil.getInstanceId(ref);
+    if (instanceId) {
+      return model.getInstance(instanceId).getDefaultContext();
     }
-    // should always return default context if all other fails
     return model.getDefaultInstance().getDefaultContext();
+  }
+  // should always return default context if all other fails
+  return model.getDefaultInstance().getDefaultContext();
 }
 
+/**
+ * Get the inscope context for an XPath defined on an element, attribute or in a textnode. Uses the
+ * current iterate status, repeats, etcetera
+ *
+ * @param {Node} node The context node at this point. Can be an attribute
+ * @param {string} ref The XPath to resolve for
+ * @return {Node} The context item for this XPath
+ */
 export default function getInScopeContext(node, ref) {
-    // console.log('getInScopeContext', ref, node);
-
+  // console.log('getInScopeContext', ref, node);
 
-    const parentElement = _getElement(node);
-    // console.log('getInScopeContext parent', parentElement);
+  const parentElement = _getElement(node);
+  // console.log('getInScopeContext parent', parentElement);
 
-    if(parentElement.nodeName === 'FX-FORE'){
-        const context = parentElement.getModel().getDefaultInstance()?.getDefaultContext();
-		if (!context) {
-			// Edge-case, we are in an inner fore. Use the outer fore's default context
-			return getInScopeContext(parentElement.parentNode, ref);
-		}
-		return context;
-    }
-    const parentBind = XPathUtil.getClosest('[ref]', parentElement.parentNode);
-    if (parentBind && (parentBind.nodeName === 'FX-GROUP' || parentBind.nodeName === 'FX-CONTROL')) {
-        return parentBind.nodeset;
+  if (parentElement.nodeName === 'FX-FORE') {
+    const context = parentElement.getModel().getDefaultInstance()?.getDefaultContext();
+    if (!context) {
+      // Edge-case, we are in an inner fore. Use the outer fore's default context
+      return getInScopeContext(parentElement.parentNode, ref);
     }
+    return context;
+  }
+  const parentBind = XPathUtil.getClosest('[ref]', parentElement.parentNode);
+  if (parentBind && (parentBind.nodeName === 'FX-GROUP' || parentBind.nodeName === 'FX-CONTROL')) {
+    return parentBind.nodeset;
+  }
+
+  const parentActionWithIterateExpr = parentElement.matches('[iterate]')
+    ? parentElement
+    : XPathUtil.getClosest('[iterate]', parentElement.parentNode);
+  if (parentActionWithIterateExpr && parentActionWithIterateExpr.currentContext) {
+    return parentActionWithIterateExpr.currentContext;
+  }
 
-	const parentActionWithIterateExpr = parentElement.matches('[iterate]') ? parentElement : XPathUtil.getClosest('[iterate]', parentElement.parentNode);
-	if (parentActionWithIterateExpr && parentActionWithIterateExpr.currentContext) {
-		return parentActionWithIterateExpr.currentContext;
-	}
-
-    const repeatItem = XPathUtil.getClosest('fx-repeatitem', parentElement);
-    if (repeatItem) {
-        if (node.nodeName === 'context') {
-            return evaluateXPathToFirstNode(
-                node.nodeValue,
-                repeatItem.nodeset,
-                _getForeContext(parentElement),
-            );
-        }
-        return repeatItem.nodeset;
+  const repeatItem = XPathUtil.getClosest('fx-repeatitem', parentElement);
+  if (repeatItem) {
+    if (node.nodeName === 'context') {
+      return evaluateXPathToFirstNode(
+        node.nodeValue,
+        repeatItem.nodeset,
+        _getForeContext(parentElement),
+      );
     }
+    return repeatItem.nodeset;
+  }
 
   // ### check for repeatitems created by fx-repeat-attributes - this could possibly be unified with standard repeats
   // const repeatItemFromAttrs = XPathUtil.getClosest('.fx-repeatitem', parentElement);
@@ -107,34 +120,34 @@ export default function getInScopeContext(node, ref) {
     return repeatFromAttributes.nodeset[index];
   }
 
-    if (parentElement.hasAttribute('context')) {
-        const initialContext = _getInitialContext(parentElement.parentNode, ref);
-        const contextAttr = parentElement.getAttribute('context');
-        return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-    }
+  if (parentElement.hasAttribute('context')) {
+    const initialContext = _getInitialContext(parentElement.parentNode, ref);
+    const contextAttr = parentElement.getAttribute('context');
+    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+  }
 
-    if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'context') {
-        const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
-        const contextAttr = node.ownerElement.getAttribute('context');
-        return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-    }
-    if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'ref') {
-        // Note: do not consider the ref of the owner element since it should not be used to define the
-        // context
-        if (node.ownerElement.hasAttribute('context')) {
-            const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
-            const contextAttr = node.ownerElement.getAttribute('context');
-            return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-        }
-
-        // Never resolve the context from a ref itself!
-        return _getInitialContext(parentElement.parentNode, ref);
+  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'context') {
+    const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+    const contextAttr = node.ownerElement.getAttribute('context');
+    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+  }
+  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'ref') {
+    // Note: do not consider the ref of the owner element since it should not be used to define the
+    // context
+    if (node.ownerElement.hasAttribute('context')) {
+      const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+      const contextAttr = node.ownerElement.getAttribute('context');
+      return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
     }
 
-    // if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
-    //   const initialContext = _getInitialContext(node.parentNode, ref);
-    //   const contextAttr = node.getAttribute('context');
-    //   return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-    // }
-    return _getInitialContext(parentElement, ref);
+    // Never resolve the context from a ref itself!
+    return _getInitialContext(parentElement.parentNode, ref);
+  }
+
+  // if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
+  //   const initialContext = _getInitialContext(node.parentNode, ref);
+  //   const contextAttr = node.getAttribute('context');
+  //   return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+  // }
+  return _getInitialContext(parentElement, ref);
 }

package/src/json-util.js

@@ -1,27 +1,27 @@
-const jsonToXml = (json) => {
-    const convert = (obj) => {
-        let xml = '';
-        for (const key in obj) {
-            if (obj.hasOwnProperty(key)) {
-                xml += `<${key}`;
-                if (typeof obj[key] === 'object') {
-                    if (Array.isArray(obj[key])) {
-                        xml += ' type="array">';
-                        obj[key].forEach((item) => {
-                            xml += `<_>${convert(item)}</_>`;
-                        });
-                    } else {
-                        xml += ' type="object">';
-                        xml += convert(obj[key]);
-                    }
-                } else {
-                    xml += ` type="${typeof obj[key]}">${obj[key]}</${key}>`;
-                }
-                xml += `</${key}>`;
-            }
+const jsonToXml = json => {
+  const convert = obj => {
+    let xml = '';
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        xml += `<${key}`;
+        if (typeof obj[key] === 'object') {
+          if (Array.isArray(obj[key])) {
+            xml += ' type="array">';
+            obj[key].forEach(item => {
+              xml += `<_>${convert(item)}</_>`;
+            });
+          } else {
+            xml += ' type="object">';
+            xml += convert(obj[key]);
+          }
+        } else {
+          xml += ` type="${typeof obj[key]}">${obj[key]}</${key}>`;
         }
-        return xml;
-    };
+        xml += `</${key}>`;
+      }
+    }
+    return xml;
+  };
 
-    return `<json>${convert(json)}</json>`;
+  return `<json>${convert(json)}</json>`;
 };

package/src/lab/fore-component.js

@@ -6,85 +6,81 @@
  * @customElement
  */
 export class ForeComponent extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({mode: 'open'})
-        this.src = ''
-    }
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.src = '';
+  }
 
-    connectedCallback() {
-        this.src= this.getAttribute('src');
-        const style = `
+  connectedCallback() {
+    this.src = this.getAttribute('src');
+    const style = `
           :host {
             display:block;
           }
         `;
-        const html = `
+    const html = `
           <fx-fore src="${this.src}">
           </fx-fore>
           <slot id="default"></slot>
         `;
 
-        this.shadowRoot.innerHTML = `
+    this.shadowRoot.innerHTML = `
             <style>
                 ${style}
             </style>
             ${html}
         `;
 
-        /*
-         * wait for slotchange, then filter document.stylesheets to construct CSSStyleSheet
-         */
-        const slot = this.shadowRoot.querySelector('#default');
-        slot.addEventListener('slotchange', async event => {
-            const children = event.target.assignedElements();
-            const hostedStylesheet = children.filter(
-                linkElem => linkElem.nodeName.toUpperCase() === 'LINK',
-            );
-            if(!hostedStylesheet) return;
-            const allCSS = [...document.styleSheets]
-                .map((styleSheet) => {
-                    if(hostedStylesheet.find(sh => sh.href === styleSheet.href)){
-                        try {
-                            return [...styleSheet.cssRules]
-                                .map((rule) => rule.cssText)
-                                .join('');
-                        } catch (e) {
-                            console.log('Access to stylesheet %s is denied. Ignoring…', styleSheet.href);
-                        }
-                    }
-                })
-                .filter(Boolean)
-                .join('\n');
+    /*
+     * wait for slotchange, then filter document.stylesheets to construct CSSStyleSheet
+     */
+    const slot = this.shadowRoot.querySelector('#default');
+    slot.addEventListener('slotchange', async event => {
+      const children = event.target.assignedElements();
+      const hostedStylesheet = children.filter(
+        linkElem => linkElem.nodeName.toUpperCase() === 'LINK',
+      );
+      if (!hostedStylesheet) return;
+      const allCSS = [...document.styleSheets]
+        .map(styleSheet => {
+          if (hostedStylesheet.find(sh => sh.href === styleSheet.href)) {
+            try {
+              return [...styleSheet.cssRules].map(rule => rule.cssText).join('');
+            } catch (e) {
+              console.log('Access to stylesheet %s is denied. Ignoring…', styleSheet.href);
+            }
+          }
+        })
+        .filter(Boolean)
+        .join('\n');
 
-            const sheet = new CSSStyleSheet();
-            sheet.replaceSync(allCSS);
-            this.shadowRoot.adoptedStyleSheets = [sheet];
-        });
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(allCSS);
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+    });
 
-/*
+    /*
         const eventSlot = this.shadowRoot.querySelector('slot[name="event"]');
         eventSlot.addEventListener('slotchange', async event => {
             const children = event.target.assignedElements();
             console.log('events', children)
         });
 */
-        const eventTmpl = this.querySelector('fx-action');
-        if(eventTmpl){
-            // const clone = eventTmpl.content.cloneNode(true);
-            const clone = eventTmpl.cloneNode(true);
-            this.removeChild(eventTmpl);
-            // const content = document.importNode(clone, true);
-
-            const fore = this.shadowRoot.querySelector('fx-fore');
-            // fore.appendChild(content.firstElementChild);
-            fore.appendChild(clone);
-        }
+    const eventTmpl = this.querySelector('fx-action');
+    if (eventTmpl) {
+      // const clone = eventTmpl.content.cloneNode(true);
+      const clone = eventTmpl.cloneNode(true);
+      this.removeChild(eventTmpl);
+      // const content = document.importNode(clone, true);
 
+      const fore = this.shadowRoot.querySelector('fx-fore');
+      // fore.appendChild(content.firstElementChild);
+      fore.appendChild(clone);
     }
-
+  }
 }
 
 if (!customElements.get('fore-component')) {
-    customElements.define('fore-component', ForeComponent);
+  customElements.define('fore-component', ForeComponent);
 }

package/src/lab/instance-inspector.js

@@ -9,14 +9,14 @@ import '../../index.js';
  * @customElement
  */
 export class InstanceInspector extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({mode: 'open'})
-    }
-
-    connectedCallback() {
-        this.id= this.getAttribute('id');
-        const style = `
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.id = this.getAttribute('id');
+    const style = `
           :host {
             display:block;
             background:blue;           
@@ -27,7 +27,7 @@ export class InstanceInspector extends HTMLElement {
             height:100%;
           }
         `;
-        const html = `
+    const html = `
         <section>
             <fx-control ref="instance('${this.id}')" as="node">
                 <label>${this.id}</label>
@@ -37,20 +37,17 @@ export class InstanceInspector extends HTMLElement {
         <slot></slot>
         `;
 
-        this.innerHTML = `
+    this.innerHTML = `
             <style>
                 ${style}
             </style>
             ${html}
         `;
 
-
-        this.closest('fx-fore').refresh();
-
-    }
-
+    this.closest('fx-fore').refresh();
+  }
 }
 
 if (!customElements.get('instance-inspector')) {
-    customElements.define('instance-inspector', InstanceInspector);
+  customElements.define('instance-inspector', InstanceInspector);
 }

package/src/modelitem.js

@@ -8,28 +8,61 @@
 export class ModelItem {
   /**
    *
-   * @param {path} calculated normalized path expression linking to data
-   * @param {ref} ref relative binding expression
-   * @param {*} isReadonly - boolean to signal readonly/readwrite state
-   * @param {*} relevant - boolean to signal relevant/non-relevant state
-   * @param {*} required - boolean to signal required/optional state
-   * @param {*} required - boolean boolean to signal valid/invalid state
-   * @param {*} type - string expression to set a datatype
-   * @param {*} node - the node the 'ref' expression is referring to
-   * @param {*} bind - the fx-bind element having created this modelItem
+   * @param {string} path calculated normalized path expression linking to data
+   * @param {string} ref relative binding expression
+   * @param {boolean} readonly - boolean to signal readonly/readwrite state
+   * @param {boolean} relevant - boolean to signal relevant/non-relevant state
+   * @param {boolean} required - boolean to signal required/optional state
+   * @param {boolean} constraint - boolean boolean to signal valid/invalid state
+   * @param {string} type - string expression to set a datatype
+   * @param {Node} node - the node the 'ref' expression is referring to
+   * @param {import('./fx-bind').FxBind} bind - the fx-bind element having created this modelItem
    */
   constructor(path, ref, readonly, relevant, required, constraint, type, node, bind) {
+    /**
+     * @type {string}
+     */
     this.path = path;
+    /**
+     * @type {string}
+     */
     this.ref = ref;
+    /**
+     * @type {boolean}
+     */
     this.constraint = constraint;
+    /**
+     * @type {boolean}
+     */
     this.readonly = readonly;
+    /**
+     * @type {boolean}
+     */
     this.relevant = relevant;
+    /**
+     * @type {boolean}
+     */
     this.required = required;
+    /**
+     * @type {string}
+     */
     this.type = type;
+    /**
+     * @type {Node}
+     */
     this.node = node;
+    /**
+     * @type {import('./fx-bind').FxBind}
+     */
     this.bind = bind;
     this.changed = false;
+    /**
+     * @type {import('./ui/fx-alert').FxAlert[]}
+     */
     this.alerts = [];
+    /**
+     * @type {import('./ui/fx-control').default[]}
+     */
     this.boundControls = [];
     // this.value = this._getValue();
   }
@@ -49,15 +82,20 @@ export class ModelItem {
     return this.node.textContent;
   }
 
+  /**
+   * @param  {Node} newVal
+   */
   set value(newVal) {
     // console.log('modelitem.setvalue oldVal', this.value);
     // console.log('modelitem.setvalue newVal', newVal);
 
     if (newVal.nodeType === Node.DOCUMENT_NODE) {
       this.node.replaceWith(newVal.firstElementChild);
+      this.node = newVal.firstElementChild;
       // this.node.appendChild(newVal.firstElementChild);
     } else if (newVal.nodeType === Node.ELEMENT_NODE) {
       this.node.replaceWith(newVal);
+      this.node = newVal;
       // this.node.appendChild(newVal);
     } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
       this.node.nodeValue = newVal;
@@ -67,7 +105,7 @@ export class ModelItem {
   }
 
   addAlert(alert) {
-    if(!this.alerts.includes(alert)){
+    if (!this.alerts.includes(alert)) {
       this.alerts.push(alert);
     }
   }