@jinntec/fore 1.7.0 → 1.7.2

package/index.js

@@ -30,7 +30,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/tools/fx-minimap.js';
+// import './src/tools/fx-minimap.js';
 
 
 // import './src/ui/fx-checkbox-group.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -60,6 +60,7 @@
     "rollup": "^2.75.4",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-version-injector": "^1.3.3",
     "typescript": "^4.7.2",
     "web-component-analyzer": "^1.1.6",
     "xmlserializer": "^0.6.1"

package/src/actions/abstract-action.js

@@ -187,7 +187,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         // console.log('execute', this.event);
 
 
-        if (e && e.target.nodeType !== Node.DOCUMENT_NODE ){
+        if (e && e.target.nodeType !== Node.DOCUMENT_NODE && e.target !== window ){
             /*
              ### ignore event if there's a parent fore and the current element is NOT part of it. This avoids
              ### an event to fire twice on an inner one and the surrounding one(s).

package/src/actions/fx-load.js

@@ -122,7 +122,7 @@ class FxLoad extends AbstractAction {
             );
             return;
         }
-        this.url = this.evaluateAttributeTemplateExpression(this.url,this);
+        const resolvedUrl = this.evaluateAttributeTemplateExpression(this.url,this);
         if (this.attachTo === '_blank') {
             window.open(this.url);
         }
@@ -132,7 +132,7 @@ class FxLoad extends AbstractAction {
         }
 
         try {
-            const response = await fetch(this.url, {
+            const response = await fetch(resolvedUrl,  {
                 method: 'GET',
                 mode: 'cors',
                 credentials: 'same-origin',

package/src/fore.js

@@ -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-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.
@@ -49,6 +55,9 @@ export class FxFore extends HTMLElement {
              */
             validateOn: {
                 type: String
+            },
+            version: {
+                type: String
             }
         };
     }
@@ -63,6 +72,8 @@ export class FxFore extends HTMLElement {
      */
     constructor() {
         super();
+        this.version = '[VI]Version: {version} - built on {date}[/VI]';
+
         this.model = {};
         this.inited=false;
         // this.addEventListener('model-construct-done', this._handleModelConstructDone);
@@ -189,6 +200,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 +533,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;

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 = {};
   }
 
   /**
@@ -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

@@ -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/tools/fx-action-log.js

@@ -459,10 +459,9 @@ export class FxActionLog extends HTMLElement {
      */
     _logDetails(e) {
         const eventType = e.type;
-        // console.log('>>>> event type', type)
         const path = XPathUtil.getPath(e.target);
+        // console.log('>>>> _logDetails', path);
         const cut = path.substring(path.indexOf('/fx-fore'), path.length);
-        ;
         const xpath = `/${cut}`;
         const short = cut.replaceAll('fx-', '');
 

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