@jinntec/fore 1.10.0 → 1.10.2

package/src/fx-bind.js

@@ -80,7 +80,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
   _buildBindGraph() {
     if (this.bindType === 'xml') {
 		this.nodeset.forEach(node => {
-			          const instance = XPathUtil.resolveInstance(this);
+			          const instance = XPathUtil.resolveInstance(this,this.ref);
 
           const path = XPathUtil.getPath(node, instance);
         this.model.mainGraph.addNode(path, node);

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>
@@ -324,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',
@@ -450,42 +451,50 @@ export class FxFore extends HTMLElement {
         // console.timeEnd('refresh');
     }
 
-    async refresh(force, changedPaths) {
-		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.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)
-					}
-				}
-			}
+    // 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) {
@@ -556,10 +565,12 @@ export class FxFore extends HTMLElement {
         this.style.visibility='visible';
         Fore.dispatch(this, 'refresh-done', {});
 
-		this.isRefreshing = true;
-		this.parentNode.closest('fx-fore')?.refresh(false, changedPaths);
+		// 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, changedPaths);
+			subFore.refresh(false);
 		}
 		this.isRefreshing = false;
     }
@@ -649,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);
@@ -750,30 +768,31 @@ export class FxFore extends HTMLElement {
      */
     async _lazyCreateInstance() {
         const model = this.querySelector('fx-model');
-        // Inherit shared models from the parent component
 
+        // ##### lazy creation should NOT take place if there's a parent Fore using shared instances
         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');
-            model.appendChild(generatedInstance);
+        if(parentFore){
+            const shared = parentFore.getModel().instances.filter(shared => shared.hasAttribute('shared'));
+            if(shared.length !==0) return;
+        }
 
-            const generated = document.implementation.createDocument(null, 'data', null);
-            // const newData = this._generateInstance(this, generated.firstElementChild);
-            this._generateInstance(this, generated.firstElementChild);
-            generatedInstance.instanceData = generated;
-            model.instances.push(generatedInstance);
-            // console.log('generatedInstance ', this.getModel().getDefaultInstanceData());
-            Fore.dispatch(this,'instance-loaded',{instance:this});
+        // still need to catch just in case...
+        try{
+            if (model.instances.length === 0) {
+                // console.log('### lazy creation of instance');
+                const generatedInstance = document.createElement('fx-instance');
+                model.appendChild(generatedInstance);
+
+                const generated = document.implementation.createDocument(null, 'data', null);
+                // const newData = this._generateInstance(this, generated.firstElementChild);
+                this._generateInstance(this, generated.firstElementChild);
+                generatedInstance.instanceData = generated;
+                model.instances.push(generatedInstance);
+                // console.log('generatedInstance ', this.getModel().getDefaultInstanceData());
+                Fore.dispatch(this,'instance-loaded',{instance:this});
+            }
+        }catch (e) {
+            console.warn('lazyCreateInstance created an error attempting to create a document', e.message);
         }
     }
 
@@ -869,6 +888,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();
@@ -902,6 +923,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);
@@ -953,39 +976,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

@@ -30,6 +30,7 @@ export class FxModel extends HTMLElement {
         this.modelConstructed = false;
         this.attachShadow({mode: 'open'});
         this.computes = 0;
+        this.fore = {};
     }
 
     get formElement() {
@@ -49,6 +50,7 @@ export class FxModel extends HTMLElement {
         }, {once: true});
 
         this.skipUpdate = false;
+        this.fore = this.parentNode;
     }
 
     static lazyCreateModelItem(model, ref, node) {
@@ -104,7 +106,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});
 
@@ -122,12 +124,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,
@@ -165,6 +167,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 = [];
 
@@ -194,10 +198,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;
 
@@ -361,14 +368,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) {
                 /*
@@ -382,7 +388,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')) {
@@ -393,6 +402,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,9 +460,23 @@ export class FxModel extends HTMLElement {
         // console.log('instances array ',Array.from(this.instances));
 
         const instArray = Array.from(this.instances);
-        const found = instArray.find(inst => inst.id === id);
+        let found = instArray.find(inst => inst.id === id);
+        if(!found) {
+            const parentFore = this.fore.parentNode.closest('fx-fore');
+            if (parentFore) {
+                console.log('shared instances from parent', this.parentNode.id);
+                const parentInstances = parentFore.getModel().instances;
+                const shared = parentInstances.filter(shared => shared.hasAttribute('shared'));
+                found = shared.find(found => found.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});

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, 'unknown');
+        const path = XPathUtil.getDocPath(e.target);
         // console.log('>>>> _logDetails', path);
         const cut = path.substring(path.indexOf('/fx-fore'), path.length);
         const xpath = `/${cut}`;

package/src/ui/abstract-control.js

@@ -14,7 +14,7 @@ import { evaluateXPathToFirstNode} from '../xpath-evaluation.js';
 export default class AbstractControl extends foreElementMixin(HTMLElement) {
   constructor() {
     super();
-    this.value = '';
+    this.value = null;
     this.display = this.style.display;
     this.required = false;
     this.readonly = false;
@@ -24,27 +24,6 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // this.attachShadow({ mode: 'open' });
   }
 
-
-  // todo: discuss - this is a hack to circumvent that modelItems in toRefresh diverge from the modelItems in
-  // the model in some situations. This code first looks for refresh
-/*
-  getModelItem() {
-    console.log('toRefreshModelItems', this.getOwnerForm().toRefresh);
-    const s = this.modelItem.path;
-    console.log('toRefreshModelItems path', s);
-
-    const toRefresh = this.getOwnerForm().toRefresh;
-    let mi;
-    if(toRefresh){
-      mi = this.getOwnerForm().toRefresh.find(m => m.path === s);
-    }
-
-    return mi? mi: super.getModelItem();
-    // console.log('toRefreshModelItems realitem', mi);
-
-  }
-*/
-
   // eslint-disable-next-line class-methods-use-this
   getWidget() {
     throw new Error('You have to implement the method getWidget!');
@@ -65,6 +44,8 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // await this.updateComplete;
     // await this.getWidget();
     this.oldVal = this.nodeset ? this.nodeset : null;
+    // console.log('oldVal',this.oldVal);
+
     this.evalInContext();
 
     // todo this if should be removed - see above
@@ -105,7 +86,8 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         }else{
           // ### this actually makes the control nonrelevant
           // todo: we should call a template function here to allow detachment of event-listeners and resetting eventual state
-          this.style.display = 'none';
+          // this.style.display = 'none';
+          this.setAttribute('nonrelevant','');
         }
         return;
       }
@@ -124,6 +106,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         } else {
           this.value = this.modelItem.value;
         }
+        // console.log('newVal',this.value);
 
         // console.log('value of widget',this.value);
 
@@ -160,9 +143,8 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
           Fore.dispatch(this,'init',{});
         }
         if (!this.getOwnerForm().ready) return; // state change event do not fire during init phase (initial refresh)
-        if (currentVal !== this.value ) {
-          // todo: discuss how to prevent unnecessary/unwanted value-changes e.g. when repeatitems are inserted
-        // if (currentVal !== this.value && this.visited) {
+        // if oldVal is null we haven't received a concrete value yet
+        if (this.oldVal !== null && currentVal !== this.value) {
           Fore.dispatch(this, 'value-changed', { path: this.modelItem.path , value:this.modelItem.value});
         }
       }
@@ -337,20 +319,25 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   handleRelevant() {
     // console.log('mip valid', this.modelItem.enabled);
     const item = this.modelItem.node;
+    this.removeAttribute('relevant');
+    this.removeAttribute('nonrelevant');
     if (Array.isArray(item) && item.length === 0) {
       this._dispatchEvent('nonrelevant');
-      this.style.display = 'none';
+      this.setAttribute('nonrelevant','');
+      // this.style.display = 'none';
       return;
     }
     if (this.isEnabled() !== this.modelItem.relevant) {
       if (this.modelItem.relevant) {
         this._dispatchEvent('relevant');
         // this._fadeIn(this, this.display);
-        this.style.display = this.display;
+        this.setAttribute('relevant','');
+        // this.style.display = this.display;
       } else {
         this._dispatchEvent('nonrelevant');
         // this._fadeOut(this);
-        this.style.display = 'none';
+        this.setAttribute('nonrelevant','');
+        // this.style.display = 'none';
       }
     }
   }
@@ -360,11 +347,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   }
 
   isValid() {
-    // return this.valid;
-    if (this.hasAttribute('invalid')) {
-      return false;
-    }
-    return true;
+    return this.hasAttribute('invalid') ? false : true;
   }
 
   isReadonly() {
@@ -373,11 +356,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   }
 
   isEnabled() {
-    // if(this.style.display === 'none' || this.classList.contains('non-relevant')){
-    if (this.style.display === 'none') {
-      return false;
-    }
-    return true;
+    return !this.hasAttribute('nonrelevant');
   }
 
   // eslint-disable-next-line class-methods-use-this

package/src/ui/fx-control.js

@@ -123,12 +123,8 @@ export default class FxControl extends XfAbstractControl {
 
         this.addEventListener('keyup', () => {
             FxModel.dataChanged = true;
-/*
-            if (!this.classList.contains('visited')) {
-                this.classList.add('visited');
-            }
-*/
         });
+
         // ### convenience marker event
         if (this.updateEvent === 'enter') {
             this.widget.addEventListener('keyup', event => {
@@ -494,9 +490,13 @@ export default class FxControl extends XfAbstractControl {
             this.dispatchEvent(new CustomEvent('loaded', {detail: {fore: theFore}}));
         } catch (error) {
             // console.log('error', error);
-            this.getOwnerForm().dispatchEvent(
-                new CustomEvent('error', {detail: {message: `${this.url} not found`}}),
-            );
+            Fore.dispatch(this, 'error', {
+                origin: this,
+                message: `control couldn't be loaded from url '${this.url}'`,
+                expr:xpath,
+                level:'Error'
+            });
+
         }
     }
 
@@ -550,9 +550,6 @@ export default class FxControl extends XfAbstractControl {
             // const nodeset = evaluateXPathToNodes(ref, inscope, this);
             const nodeset = evaluateXPath(ref, inscope, this);
 
-            // ### bail out when nodeset is array and empty
-            if (Array.isArray(nodeset) && nodeset.length === 0) return;
-
             // ### clear items
             const {children} = widget;
             Array.from(children).forEach(child => {
@@ -561,6 +558,9 @@ export default class FxControl extends XfAbstractControl {
                 }
             });
 
+            // ### bail out when nodeset is array and empty
+            if (Array.isArray(nodeset) && nodeset.length === 0) return;
+
             // ### build the items
             const {template} = this;
             if (template) {
@@ -574,7 +574,7 @@ export default class FxControl extends XfAbstractControl {
                     this.widget.insertBefore(option, firstTemplateChild);
                 }
 
-                if (nodeset.length) {
+                if (nodeset.length !== 0) {
                     // console.log('nodeset', nodeset);
                     const fragment = document.createDocumentFragment();
                     // console.time('offscreen');

package/src/ui/fx-repeat-attributes.js

@@ -135,9 +135,9 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
       if (mutations[0].type === 'childList') {
         const added = mutations[0].addedNodes[0];
         if (added) {
-          const instance = XPathUtil.resolveInstance(this);
 
-			const path = XPathUtil.getPath(added, instance);
+          const instance = XPathUtil.resolveInstance(this,this.ref);
+          const path = XPathUtil.getPath(added, instance);
           // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
           // this.index = index;
           // const prev = mutations[0].previousSibling.previousElementSibling;