@jinntec/fore 1.9.0 → 1.10.1

package/src/fx-bind.js

@@ -79,8 +79,10 @@ export class FxBind extends foreElementMixin(HTMLElement) {
 
   _buildBindGraph() {
     if (this.bindType === 'xml') {
-      this.nodeset.forEach(node => {
-        const path = XPathUtil.getPath(node);
+		this.nodeset.forEach(node => {
+			          const instance = XPathUtil.resolveInstance(this,this.ref);
+
+          const path = XPathUtil.getPath(node, instance);
         this.model.mainGraph.addNode(path, node);
 
         /* ### catching references in the 'ref' itself...
@@ -156,8 +158,10 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       if (!this.model.mainGraph.hasNode(nodeHash)) {
         this.model.mainGraph.addNode(nodeHash, node);
       }
-      refs.forEach(ref => {
-        const otherPath = XPathUtil.getPath(ref);
+		refs.forEach(ref => {
+			const instance = XPathUtil.resolveInstance(this, path);
+
+			const otherPath = XPathUtil.getPath(ref, instance);
         // console.log('otherPath', otherPath)
 
         // todo: nasty hack to prevent duplicate pathes like 'a[1]' and 'a[1]/text()[1]' to end up as separate nodes in the graph
@@ -301,8 +305,10 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     const targetNode = node;
 
     // const path = fx.evaluateXPath('path()',node);
-    // const path = this.getPath(node);
-    const path = XPathUtil.getPath(node);
+      // const path = this.getPath(node);
+	  const instance = XPathUtil.resolveInstance(this, this.ref);
+
+      const path = XPathUtil.getPath(node, instance);
     // const shortPath = this.shortenPath(path);
 
     // ### constructing default modelitem - will get evaluated during recalculate()

package/src/fx-fore.js

@@ -85,9 +85,10 @@ export class FxFore extends HTMLElement {
         // this.addEventListener('model-construct-done', this._handleModelConstructDone);
         // todo: refactoring - these should rather go into connectedcallback
         this.addEventListener('message', this._displayMessage);
-        this.addEventListener('error', this._displayError);
+        // this.addEventListener('error', this._displayError);
+        this.addEventListener('error', this._logError);
         this.addEventListener('warn', this._displayWarning);
-        this.addEventListener('log', this._logError);
+        // this.addEventListener('log', this._logError);
         window.addEventListener('compute-exception', e => {
             console.error('circular dependency: ', e);
         });
@@ -176,7 +177,7 @@ export class FxFore extends HTMLElement {
 
         const html = `
            <noscript>This page uses Web Components and needs JavaScript to be enabled..</noscript>
-
+<!--           <slot name="errors"></slot> -->
            <jinn-toast id="message" gravity="bottom" position="left"></jinn-toast>
            <jinn-toast id="sticky" gravity="bottom" position="left" duration="-1" close="true" data-class="sticky-message"></jinn-toast>
            <jinn-toast id="error" text="error" duration="-1" data-class="error" close="true" position="right" gravity="top" escape-markup="false"></jinn-toast>
@@ -295,6 +296,7 @@ export class FxFore extends HTMLElement {
         this.addEventListener('path-mutated', () => {
             this.someInstanceDataStructureChanged = true;
         });
+
     }
 
     _injectDevtools(){
@@ -323,9 +325,9 @@ export class FxFore extends HTMLElement {
      * Will extract the `fx-fore` element from that target file and use and replace current `fx-fore` element with the loaded one.
      * @private
      */
-    _loadFromSrc() {
+    async _loadFromSrc() {
         // console.log('########## loading Fore from ', this.src, '##########');
-        fetch(this.src, {
+        await fetch(this.src, {
             method: 'GET',
             mode: 'cors',
             credentials: 'include',
@@ -449,7 +451,50 @@ export class FxFore extends HTMLElement {
         // console.timeEnd('refresh');
     }
 
+    // async refresh(force, changedPaths) {
     async refresh(force) {
+
+        /*
+
+                if (!changedPaths) {
+                    changedPaths = this.toRefresh.map(item => item.path);
+                } else {
+                    this.toRefresh.push(
+                        ...changedPaths
+                            .map(
+                                path =>
+                                this.getModel()
+                                    .modelItems
+                                    .find(item => item.path === path)
+                            )
+                            .filter(Boolean)
+                    );
+
+                    for(const changedPath of changedPaths) {
+                        for (const repeat of this.querySelectorAll('fx-repeat')) {
+                            if (repeat.closest('fx-fore') !== this) {
+                                continue;
+                            }
+
+                            if (repeat.touchedPaths && repeat.touchedPaths.has(changedPath)) {
+                                // Make a temporary model-item-like structure for this
+                                this.toRefresh.push({
+                                    path: changedPath,
+                                    boundControls: [repeat]
+                                });
+
+                                console.log('Found a repeat to update!!!', repeat)
+                            }
+                        }
+                    }
+		}
+        */
+		if (this.isRefreshing) {
+			return;
+		}
+        this.isRefreshing = true;
+        console.log('### <<<<< refresh() >>>>>');
+
         // refresh () {
         // ### refresh Fore UI elements
         // if (!this.initialRun && this.toRefresh.length !== 0) {
@@ -468,7 +513,7 @@ export class FxFore extends HTMLElement {
                 }
 
                 // ### check if other controls depend on current modelItem
-                const {mainGraph} = this.getModel();
+                const { mainGraph } = this.getModel();
                 if (mainGraph && mainGraph.hasNode(modelItem.path)) {
                     const deps = this.getModel().mainGraph.dependentsOf(modelItem.path, false);
                     // ### iterate dependant modelItems and refresh all their boundControls
@@ -501,7 +546,9 @@ export class FxFore extends HTMLElement {
             });
 */
 
-            Fore.refreshChildren(this, true);
+            if(this.inited){
+                Fore.refreshChildren(this, true);
+            }
             // console.timeEnd('refreshChildren');
         }
 
@@ -517,6 +564,15 @@ export class FxFore extends HTMLElement {
         // this.initialRun = false;
         this.style.visibility='visible';
         Fore.dispatch(this, 'refresh-done', {});
+
+		// this.isRefreshing = true;
+		// this.parentNode.closest('fx-fore')?.refresh(false, changedPaths);
+		this.parentNode.closest('fx-fore')?.refresh(false);
+		for (const subFore of this.querySelectorAll('fx-fore')) {
+			// subFore.refresh(false, changedPaths);
+			subFore.refresh(false);
+		}
+		this.isRefreshing = false;
     }
 
     /**
@@ -604,6 +660,13 @@ export class FxFore extends HTMLElement {
      * @param node the node which will get updated with evaluation result
      */
     evaluateTemplateExpression(expr, node) {
+
+        // ### do not evaluate template expressions with nonrelevant sections
+        if(node.nodeType === Node.ATTRIBUTE_NODE && node.ownerElement.closest('[nonrelevant]')) return;
+        if(node.nodeType === Node.TEXT_NODE && node.parentNode.closest('[nonrelevant]')) return;
+        if(node.nodeType === Node.ELEMENT_NODE && node.closest('[nonrelevant]')) return;
+
+        // if(node.closest('[nonrelevant]')) return;
         const replaced = expr.replace(/{[^}]*}/g, match => {
             if (match === '{}') return match;
             const naked = match.substring(1, match.length - 1);
@@ -705,6 +768,18 @@ export class FxFore extends HTMLElement {
      */
     async _lazyCreateInstance() {
         const model = this.querySelector('fx-model');
+        // Inherit shared models from the parent component
+
+        const parentFore = this.parentNode.closest('fx-fore');
+		if (parentFore) {
+			const sharedInstances = Array.from(parentFore.getModel().querySelectorAll('fx-instance')).filter(instance => instance.hasAttribute('shared'));
+				for(const instance of sharedInstances) {
+					this.getModel().instances.push(instance);
+				}
+			this.getModel().updateModel();
+		}
+
+
         if (model.instances.length === 0) {
             // console.log('### lazy creation of instance');
             const generatedInstance = document.createElement('fx-instance');
@@ -716,7 +791,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})
+            Fore.dispatch(this,'instance-loaded',{instance:this});
         }
     }
 
@@ -812,6 +887,8 @@ export class FxFore extends HTMLElement {
      */
     async _initUI() {
         // console.log('### _initUI()');
+        console.log('### <<<<< _initUI >>>>>');
+
         if (!this.initialRun) return;
         this.classList.add('initialRun');
         await this._lazyCreateInstance();
@@ -845,6 +922,8 @@ export class FxFore extends HTMLElement {
         this.ready = true;
         this.initialRun = false;
         // console.log('### >>>>> dispatching ready >>>>>', this);
+        console.log(`### <<<<< ${this.id} ready >>>>>`);
+
         // console.log('### modelItems: ', this.getModel().modelItems);
         Fore.dispatch(this, 'ready', {});
         // console.log('dataChanged', FxModel.dataChanged);
@@ -896,39 +975,23 @@ export class FxFore extends HTMLElement {
         toast.showToast(`WARN: ${path}:${msg}`);
     }
 
+
     _logError(e) {
         e.stopPropagation();
         e.preventDefault();
 
-        const div = document.createElement('div');
-        div.setAttribute('slot','messages');
-        div.setAttribute('data-level',e.detail.level);
-
-        const id = document.createElement('div');
-        id.textContent = `"${e.detail.id}"`;
-        div.appendChild(id);
-
-        const path = document.createElement('div');
-        const pathExpr = XPathUtil.shortenPath(evaluateXPathToString('path()',e.target,this));
-        // console.log('pathExpr',pathExpr)
-        path.textContent = pathExpr;
-        div.appendChild(path);
-
-        const message = document.createElement('div');
-        message.textContent = e.detail.message;
-        div.appendChild(message);
-
-        /*
-                const path = XPathUtil.shortenPath(evaluateXPathToString('path()',e.target,this));
-                div.innerText = `${path} :: ${e.detail.message}`;
-        */
-        this.appendChild(div);
-        div.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
-
-
-        const errorElement = evaluateXPathToFirstNode(`/${pathExpr}`,document,null);
-        errorElement.classList.add('fore-error');
+        console.error('ERROR',e.detail.message);
+        console.error(e.detail.origin);
+        if(e.detail.expr){
+            console.error('Failing expression',e.detail.expr);
+        }
+        console.error('---');
+        this._displayError(e);
+    }
 
+    _copyToClipboard(target){
+        console.log('copyToClipboard' , target.value)
+        navigator.clipboard.writeText(target.value);
 
     }
 

package/src/fx-model.js

@@ -67,7 +67,9 @@ export class FxModel extends HTMLElement {
         // const path = fx.evaluateXPath('path()',node);
         let path;
         if (node.nodeType) {
-            path = XPathUtil.getPath(node);
+			const instance = XPathUtil.resolveInstance(model, ref);
+
+            path = XPathUtil.getPath(node, instance);
         } else {
             path = null;
             targetNode = node;
@@ -102,7 +104,7 @@ export class FxModel extends HTMLElement {
      *
      */
     async modelConstruct() {
-        // console.log('### <<<<< dispatching model-construct >>>>>');
+        console.log('### <<<<< dispatching model-construct >>>>>');
         // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
         Fore.dispatch(this, 'model-construct', {model: this});
 
@@ -120,12 +122,12 @@ export class FxModel extends HTMLElement {
             this.instances = Array.from(instances);
             // console.log('_modelConstruct this.instances ', this.instances);
 			// Await until the model-construct-done event is handled off
-
             await Fore.dispatch(this, 'model-construct-done', {model: this});
             this.inited = true;
             this.updateModel();
         } else {
             // ### if there's no instance one will created
+            console.log('### <<<<< dispatching model-construct-done >>>>>');
             await this.dispatchEvent(
                 new CustomEvent('model-construct-done', {
                     composed: false,
@@ -163,6 +165,8 @@ export class FxModel extends HTMLElement {
     }
 
     rebuild() {
+        console.log('### <<<<< rebuild() >>>>>');
+
         this.mainGraph = new DepGraph(false); // do: should be moved down below binds.length check but causes errors in tests.
         this.modelItems = [];
 
@@ -192,10 +196,13 @@ export class FxModel extends HTMLElement {
      * todo: use 'changed' flag on modelItems to determine subgraph for recalculation. Flag already exists but is not used.
      */
     recalculate() {
+
         if (!this.mainGraph) {
             return;
         }
 
+        console.log('### <<<<< recalculate() >>>>>');
+
         // console.log('changed nodes ', this.changed);
         this.computes = 0;
 
@@ -359,14 +366,13 @@ export class FxModel extends HTMLElement {
 
         if (this.modelItems.length === 0) return true;
 
-        console.time('revalidate');
+        console.log('### <<<<< revalidate() >>>>>');
 
         // reset submission validation
         // this.parentNode.classList.remove('submit-validation-failed')
         let valid = true;
         this.modelItems.forEach(modelItem => {
             // console.log('validating node ', modelItem.node);
-
             const {bind} = modelItem;
             if (bind) {
                 /*
@@ -380,7 +386,10 @@ export class FxModel extends HTMLElement {
                         // console.log('modelItem validity computed: ', compute);
                         modelItem.constraint = compute;
                         this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
-                        if (!compute) valid = false;
+                        if (!compute) {
+                            console.log('validation failed on modelitem ', modelItem);
+                            valid = false;
+                        }
                     }
                 }
                 if (typeof bind.hasAttribute === 'function' && bind.hasAttribute('required')) {
@@ -391,6 +400,7 @@ export class FxModel extends HTMLElement {
                         modelItem.required = compute;
                         this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
                         if (!modelItem.node.textContent) {
+                            console.log('validation failed on modelitem ', modelItem);
                             valid = false;
                         }
                         // if (!compute) valid = false;
@@ -450,7 +460,12 @@ export class FxModel extends HTMLElement {
         const instArray = Array.from(this.instances);
         const found = instArray.find(inst => inst.id === id);
         if(!found){
-            return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
+            // return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
+            Fore.dispatch(this, 'error', {
+                origin: this,
+                message: `Instance '${id}' does not exist`,
+                level:'Error'
+            });
         }
         return found;
     }

package/src/fx-submission.js

@@ -144,6 +144,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             const data = this._parse(serialized, instance);
             this._handleResponse(data);
             // this.dispatch('submit-done', {});
+            console.log('### <<<<< submit-done >>>>>');
             Fore.dispatch(this, 'submit-done', {});
             this.parameters.clear();
             return;
@@ -166,6 +167,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 if (this.method === 'consume') {
                     localStorage.removeItem(key);
                 }
+                console.log('### <<<<< submit-done >>>>>');
                 Fore.dispatch(this, 'submit-done', {});
             }
             if (this.method === 'post') {
@@ -173,6 +175,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 const key = resolvedUrl.substring(resolvedUrl.indexOf(':') + 1);
                 localStorage.setItem(key, serialized);
                 this._handleResponse(instance.instanceData);
+                console.log('### <<<<< submit-done >>>>>');
                 Fore.dispatch(this, 'submit-done', {});
             }
             if (this.method === 'delete') {
@@ -180,6 +183,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 localStorage.removeItem(key);
                 const newInst = new DOMParser().parseFromString('<data></data>', 'application/xml');
                 this._handleResponse(newInst);
+                console.log('### <<<<< submit-done >>>>>');
                 Fore.dispatch(this, 'submit-done', {});
             }
 
@@ -228,6 +232,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             }
 
             // this.dispatch('submit-done', {});
+            console.log(`### <<<<< ${this.id} submit-done >>>>>`);
             Fore.dispatch(this, 'submit-done', {});
         } catch (error) {
             Fore.dispatch(this, 'submit-error', {error: error.message});
@@ -339,26 +344,20 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
 /*
         if(this.replace === 'merge'){
+            if(targetInstance.type !== 'xml') {
+                Fore.dispatch(this, "warn", {'message': 'merging of instances only work for type xml'});
+            }
             if (targetInstance && targetInstance.type === 'xml') {
                 targetInstance.partialInstance = data;
-
-                const merged = this._mergeXML(targetInstance.instanceData,targetInstance.partialInstance);
+                // const resultDoc = new DOMParser(`${data.nodeName}`, 'application/xml');
+                // console.log('resultDoc', resultDoc)
+                const merged = Fore.combine(targetInstance.instanceData.firstElementChild, data.firstElementChild, this,null);
                 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);
-                // }
+                this.model.updateModel();
+                this.getOwnerForm().refresh(true);
             }
         }
 */

package/src/tools/adi.js

@@ -11,8 +11,10 @@ import {
 
 import {Fore} from '../fore.js';
 
-function isAttributeShown(name) {
-    return name === 'id' || name === 'ref' || name === 'event';
+function isAttributeShown(name, sourceNode) {
+    if(name === 'style') return false;
+    return true;
+    // return name === 'id' || name === 'ref' || name === 'event';
 }
 
 class ADI {
@@ -187,10 +189,16 @@ class ADI {
                 if (sourceNode.nodeType !== Node.DOCUMENT_NODE) {
                     // tagStart.textContent = '<' + node.nodeName.toLowerCase() + '>';
 
+/*
+                    let attrString = `<${sourceNode.nodeName.toLowerCase()} `;
+                    if(sourceNode.attributes){
+                        Array.from(sourceNode.attributes).forEach(attr => {
+                            attrString += `${attr.nodeName}="${attr.nodeValue}" `;
+                        });
+                        console.log('ATTRSTRING',attrString);
+                    }
                     if (sourceNode.nodeName === 'FX-BIND') {
-                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute(
-                            'ref',
-                        )}">`;
+                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute('ref')}">`;
                     } else if (sourceNode.nodeName === 'FX-INSERT') {
                         tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute('ref')}">`;
                     } else if (sourceNode.nodeName === 'FX-INSTANCE') {
@@ -204,16 +212,17 @@ class ADI {
                     } else if (sourceNode.nodeName === 'FX-SUBMISSION') {
                         tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} id="${sourceNode.getAttribute('id')}">`;
                     } else {
+*/
                         const attrString =  Array.from(sourceNode.attributes)
 							  .filter(
-								  attr => this.isInstanceViewer ? true : isAttributeShown(attr.name))
+								  attr => this.isInstanceViewer ? true : isAttributeShown(attr.name, sourceNode))
 							  .map(attr => `${attr.name}="${attr.value}"`).join(' ');
                         tagStart.textContent = `<${
                             sourceNode.nodeName.toLowerCase()
                         }${
                            attrString ? (` ${attrString}`) : ''
                         }>`;
-                    }
+                    // }
 
                     if (withChildren) {
                         tagEnd = newElement('span');

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

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