@jinntec/fore 1.6.0 → 1.7.1

package/index.js

@@ -55,6 +55,7 @@ import './src/actions/fx-hide.js';
 import './src/actions/fx-reload.js';
 import './src/actions/fx-reset.js';
 import './src/actions/fx-load.js';
+import './src/actions/fx-toggleboolean.js';
 
 import './src/functions/fx-function.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "@jinntec/jinn-toast": "^1.0.5",
-    "fontoxpath": "^3.29.0"
+    "fontoxpath": "^3.30.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.17.12",

package/src/actions/fx-toggleboolean.js

@@ -0,0 +1,58 @@
+// import { FxAction } from './fx-action.js';
+import '../fx-model.js';
+import {AbstractAction} from './abstract-action.js';
+import {evaluateXPath} from '../xpath-evaluation.js';
+import {Fore} from '../fore.js';
+
+/**
+ * `fx-setvalue`
+ *
+ * @customElement
+ */
+export default class FxToggleboolean extends AbstractAction {
+    static get properties() {
+        return {
+            ...super.properties,
+            ref: {
+                type: String,
+            },
+            valueAttr: {
+                type: String,
+            },
+            value:{
+                type: Boolean
+            }
+        };
+    }
+
+    constructor() {
+        super();
+        this.ref = '';
+        this.valueAttr = '';
+        this.value = false;
+    }
+
+    connectedCallback() {
+        if (super.connectedCallback) {
+            super.connectedCallback();
+        }
+
+        if (this.hasAttribute('ref')) {
+            this.ref = this.getAttribute('ref');
+        } else {
+            throw new Error('fx-togglealue must specify a "ref" attribute');
+        }
+    }
+
+    async perform() {
+        super.perform();
+        const mi = this.getModelItem();
+        mi.value === 'true' ? mi.node.textContent='false' : mi.node.textContent='true';
+        this.needsUpdate = true;
+    }
+
+}
+
+if (!customElements.get('fx-toggleboolean')) {
+    window.customElements.define('fx-toggleboolean', FxToggleboolean);
+}

package/src/fore.js

@@ -28,7 +28,7 @@ export class Fore {
     if(target?.classList.contains("widget")) return true;
     let parent = target.parentNode;
     while(parent && parent.nodeName !== 'FX-CONTROL'){
-      if(parent.classList.contains('widget')) return true;
+      if(parent?.classList?.contains('widget')) return true;
       parent = parent.parentNode;
     }
     return false;
@@ -195,6 +195,7 @@ export class Fore {
         Array.from(children).forEach(element => {
           if (element.nodeName.toUpperCase() === 'FX-FORE') {
             resolve('done');
+            return;
           }
           if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
             // console.log('refreshing', element, element?.ref);

package/src/functions/fx-function.js

@@ -1,4 +1,4 @@
-import { registerCustomXPathFunction } from 'fontoxpath';
+import { registerCustomXPathFunction, createTypedValueFactory } from 'fontoxpath';
 import { foreElementMixin } from '../ForeElementMixin.js';
 import { evaluateXPath, globallyDeclaredFunctionLocalNames } from '../xpath-evaluation.js';
 
@@ -86,6 +86,7 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
       case 'text/xquf':
       case 'text/xquery':
       case 'text/xpath': {
+        const typedValueFactories = paramParts.map(param => createTypedValueFactory(param.variableType));
         const language = type === 'text/xpath' ?
             'XPath3.1' : type === 'text/xquery' ?
             'XQuery3.1' : 'XQueryUpdate3.1';
@@ -94,11 +95,12 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
             this.functionBody,
             this.getInScopeContext(),
             this.getOwnerForm(),
-            paramParts.reduce((variablesByName, paramPart, i) => {
-              variablesByName[paramPart.variableName.replace('$', '')] = args[i];
+              paramParts.reduce((variablesByName, paramPart, i) => {
+              // Because we know the XPath type here (from the function declaration) we do not have to depend on the implicit typings
+				variablesByName[paramPart.variableName.replace('$', '')] = typedValueFactories[i](args[i]);
               return variablesByName;
             }, {}),
-			  {language}
+            {language}
           );
         registerCustomXPathFunction(
           functionIdentifier,

package/src/fx-bind.js

@@ -44,6 +44,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
   connectedCallback() {
     // console.log('connectedCallback ', this);
     // this.id = this.hasAttribute('id')?this.getAttribute('id'):;
+    this.constraint = this.getAttribute('constraint');
     this.ref = this.getAttribute('ref');
     this.readonly = this.getAttribute('readonly');
     this.required = this.getAttribute('required');
@@ -133,6 +134,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
           this._addDependencies(constraintRefs, node, path, 'constraint');
         } else if (this.constraint) {
           this.model.mainGraph.addNode(`${path}:constraint`, node);
+          this.model.mainGraph.addDependency(path, `${path}:constraint`);
         }
       });
     }

package/src/fx-fore.js

@@ -29,6 +29,12 @@ export class FxFore extends HTMLElement {
 
     static get properties() {
         return {
+            /**
+             * merge-partial
+             */
+            mergePartial:{
+                type: Boolean
+            },
             /**
              * Setting this marker attribute will refresh the UI in a lazy fashion just updating elements being
              * in viewport.
@@ -189,6 +195,8 @@ export class FxFore extends HTMLElement {
         this.someInstanceDataStructureChanged = false;
         this.repeatsFromAttributesCreated = false;
         this.validateOn = this.hasAttribute('validate-on') ? this.getAttribute('validate-on'):'update';
+        // this.mergePartial = this.hasAttribute('merge-partial')? true:false;
+        this.mergePartial = false;
     }
 
     connectedCallback() {
@@ -520,6 +528,13 @@ export class FxFore extends HTMLElement {
             storing expressions and their nodes for re-evaluation
              */
         Array.from(tmplExpressions).forEach(node => {
+			const ele = node.nodeType === Node.ATTRIBUTE_NODE ?
+				  node.ownerElement :
+				  node.parentNode;
+			if (ele.closest('fx-fore') !== this) {
+				// We found something in a sub-fore. Act like it's not there
+				return;
+			}
             if (this.storedTemplateExpressionByNode.has(node)) {
                 // If the node is already known, do not process it twice
                 return;
@@ -676,6 +691,7 @@ export class FxFore extends HTMLElement {
             generatedInstance.instanceData = generated;
             model.instances.push(generatedInstance);
             // console.log('generatedInstance ', this.getModel().getDefaultInstanceData());
+            Fore.dispatch(this,'instance-loaded',{instance:this})
         }
     }
 

package/src/fx-instance.js

@@ -52,6 +52,7 @@ export class FxInstance extends HTMLElement {
     this.model = this.parentNode;
     this.attachShadow({ mode: 'open' });
     this.originalInstance = null;
+    this.partialInstance = null;
   }
 
   connectedCallback() {
@@ -92,6 +93,7 @@ export class FxInstance extends HTMLElement {
             </style>
             ${html}
         `;
+    this.partialInstance = {};
   }
 
   /**
@@ -113,7 +115,7 @@ export class FxInstance extends HTMLElement {
 
   reset(){
     // this._useInlineData();
-    this.instanceData = this.originalInstance;
+    this.instanceData = this.originalInstance.cloneNode(true);
   }
 
   evalXPath(xpath) {
@@ -149,11 +151,13 @@ export class FxInstance extends HTMLElement {
    * @returns {Document|T|any|Element}
    */
   getDefaultContext() {
-    // console.log('getDefaultContext ', this.instanceData.firstElementChild);
+    // 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') {
-      return this.instanceData.firstElementChild;
+      return instanceData.firstElementChild;
     }
-    return this.instanceData;
+    return instanceData;
   }
 
   /**

package/src/fx-model.js

@@ -178,8 +178,8 @@ export class FxModel extends HTMLElement {
             bind.init(this);
         });
 
-        // console.log(`mainGraph`, this.mainGraph);
-        // console.log(`rebuild mainGraph calc order`, this.mainGraph.overallOrder());
+        console.log(`mainGraph`, this.mainGraph);
+        console.log(`rebuild mainGraph calc order`, this.mainGraph.overallOrder());
 
         // this.dispatchEvent(new CustomEvent('rebuild-done', {detail: {maingraph: this.mainGraph}}));
         Fore.dispatch(this,'rebuild-done',{maingraph:this.mainGraph});
@@ -435,12 +435,11 @@ export class FxModel extends HTMLElement {
     }
 
     getDefaultInstance() {
-        return this?.instances[0];
+        return this.instances[0];
     }
 
     getDefaultInstanceData() {
-        console.log('default instance data ', this.instances[0].instanceData);
-        return this.instances[0].instanceData;
+       return this.instances[0].getInstanceData();
     }
 
     getInstance(id) {

package/src/fx-submission.js

@@ -323,8 +323,35 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         }
     */
 
+        const targetInstance = this._getTargetInstance();
+
+/*
+        if(this.replace === 'merge'){
+            if (targetInstance && targetInstance.type === 'xml') {
+                targetInstance.partialInstance = data;
+
+                const merged = this._mergeXML(targetInstance.instanceData,targetInstance.partialInstance);
+                console.log('merged', merged);
+
+                targetInstance.instanceData = merged;
+                console.log('merging partial instance',targetInstance.partialInstance)
+                /!*
+                targetInstance.instanceData not touched here as we want to keep the default instance unmodified as the full template for the UI.
+                *!/
+
+                // Skip any refreshes if the model is not yet inited#
+                // duplicate from replace='instance'
+                // if (this.model.inited) {
+                    this.model.updateModel(); // force update
+                const owner = this.getOwnerForm();
+                // owner.mergePartial = true;
+                owner.refresh(true);
+                // }
+            }
+        }
+*/
+
         if (this.replace === 'instance') {
-            const targetInstance = this._getTargetInstance();
             if (targetInstance) {
                 if (this.targetref) {
                     const [theTarget] = evaluateXPath(
@@ -388,6 +415,81 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         }
     }
 
+
+/*
+    _mergeXML(xml1, xml2) {
+        const parser = new DOMParser();
+        const serializer = new XMLSerializer();
+
+        // const doc1 = parser.parseFromString(xml1, 'text/xml');
+        // const doc2 = parser.parseFromString(xml2, 'text/xml');
+
+        this.mergeNodes(xml1.documentElement, xml2.documentElement);
+
+        // return serializer.serializeToString(xml1);
+        return xml1;
+    }
+*/
+
+/*
+    _mergeNodes(node1, node2) {
+        const childNodes1 = node1.childNodes;
+        const childNodes2 = node2.childNodes;
+
+        for (let i = 0; i < childNodes2.length; i++) {
+            const child2 = childNodes2[i];
+            let nodeMerged = false;
+
+            if (child2.nodeType === 1) { // Element Node
+                for (let j = 0; j < childNodes1.length; j++) {
+                    const child1 = childNodes1[j];
+                    if (child1.nodeType === 1 && child1.tagName === child2.tagName) {
+                        this._mergeNodes(child1, child2);
+                        nodeMerged = true;
+                        break;
+                    }
+                }
+            }
+
+            if (!nodeMerged) {
+                const clonedNode = child2.cloneNode(true);
+                node1.appendChild(clonedNode);
+            }
+        }
+    }
+*/
+
+/*
+    mergeNodes(node1, node2) {
+        // Overwrite attributes in node1 with values from node2
+        for (const { name, value } of node2.attributes) {
+            node1.setAttribute(name, value);
+        }
+
+        const childNodes1 = Array.from(node1.childNodes);
+        const childNodes2 = Array.from(node2.childNodes);
+
+        // Append all child nodes from node2 to node1
+        childNodes2.forEach(child2 => {
+            if (child2.nodeType === 1) {
+                // If it's an element node, check if a matching element exists in node1
+                const matchingElement = childNodes1.find(
+                    child1 => child1.nodeType === 1 && child1.tagName === child2.tagName
+                );
+                if (matchingElement) {
+                    this.mergeNodes(matchingElement, child2); // Recursively merge matching elements
+                } else {
+                    const clonedNode = child2.cloneNode(true);
+                    node1.appendChild(clonedNode);
+                }
+            } else {
+                // For text nodes, simply append them to node1
+                const clonedNode = child2.cloneNode(true);
+                node1.appendChild(clonedNode);
+            }
+        });
+    }
+*/
     /**
      * select relevant nodes
      *

package/src/getInScopeContext.js

@@ -55,7 +55,15 @@ function _getInitialContext(node, ref) {
 }
 
 export default function getInScopeContext(node, ref) {
+    // console.log('getInScopeContext', ref, node);
+
+
     const parentElement = _getElement(node);
+    // console.log('getInScopeContext parent', parentElement);
+
+    if(parentElement.closest('fx-fore').mergePartial){
+        console.log('mergePartial mode')
+    }
 
     if(parentElement.nodeName === 'FX-FORE'){
         return parentElement.getModel().getDefaultInstance().getDefaultContext();

package/src/ui/fx-control.js

@@ -400,7 +400,7 @@ export default class FxControl extends XfAbstractControl {
     }
 
     /**
-     * loads an external Fore from an HTML file given by `url` attribute.
+     * loads an external Fore from an HTML file given by `url` attribute and embed it as child of this control.
      *
      * Will look for the `<fx-fore>` element within the returned HTML file and return that element.
      *
@@ -459,6 +459,10 @@ export default class FxControl extends XfAbstractControl {
             );
 
             const dummy = this.querySelector('input');
+            /*
+            todo: the mechanism to import constructed stylesheets as in fore-component is still missing here.
+            There no way yet to specify CSS for a embedded fx-fore in shadowDOM.
+             */
             if (this.hasAttribute('shadow')) {
                 dummy.parentNode.removeChild(dummy);
                 this.shadowRoot.appendChild(imported);

package/src/xpath-evaluation.js

@@ -418,6 +418,7 @@ export function evaluateXPath(xpath, contextNode, formElement, variables = {}, o
         {...variablesInScope, ...variables},
         fxEvaluateXPath.ALL_RESULTS_TYPE,
         {
+			debug: true,
             currentContext: {formElement, variables},
             moduleImports: {
                 xf: XFORMS_NAMESPACE_URI,
@@ -595,26 +596,25 @@ export function evaluateXPathToNumber(
 
 const contextFunction = (dynamicContext, string) => {
     const caller = dynamicContext.currentContext.formElement;
+	let instance = null;
     if (string) {
-        const instance = resolveId(string, caller);
-        if (instance) {
-            if (instance.nodeName === 'FX-REPEAT') {
-                const {nodeset} = instance;
-                for (let parent = caller; parent; parent = parent.parentNode) {
-                    if (parent.parentNode === instance) {
-                        const offset = Array.from(parent.parentNode.children).indexOf(parent);
-                        return nodeset[offset];
-                    }
+        instance = resolveId(string, caller);
+	} else {
+		instance = XPathUtil.getParentBindingElement(caller);
+	}
+    if (instance) {
+        if (instance.nodeName === 'FX-REPEAT') {
+            const {nodeset} = instance;
+            for (let parent = caller; parent; parent = parent.parentNode) {
+                if (parent.parentNode === instance) {
+                    const offset = Array.from(parent.parentNode.children).indexOf(parent);
+                    return nodeset[offset];
                 }
             }
-            return instance.nodeset;
         }
+        return instance.nodeset;
     }
-    const parent = XPathUtil.getParentBindingElement(caller);
-    // const p = caller.nodeName;
-    // const p = dynamicContext.domFacade.getParentElement();
 
-    if (parent) return parent.nodeset;
     return caller.getInScopeContext();
 };
 
@@ -844,7 +844,12 @@ const instance = (dynamicContext, string) => {
 */
 
     if (inst) {
-        return inst.getDefaultContext();
+        const context = inst.getDefaultContext();
+		if (!context) {
+			debugger;
+			return null;
+		}
+		return context;
     }
     return null;
 };