@jinntec/fore 1.10.2 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.10.2",
+  "version": "2.0.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {

package/src/actions/abstract-action.js

@@ -185,7 +185,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
      * @param e
      */
     async execute(e) {
-        console.log(this);
+        console.log(this, this.event);
         // console.log('execute', this.event);
 
 

package/src/actions/fx-load.js

@@ -5,10 +5,9 @@ import {XPathUtil} from "../xpath-util.js";
 import {Fore} from "../fore.js";
 
 /**
- * `fx-message`
- *
- * Action to display messages to the user.
+ * `fx-load`
  *
+ * Action to load a window, tab or embed some Html into the current page at given location.
  *
  */
 class FxLoad extends AbstractAction {
@@ -145,24 +144,14 @@ class FxLoad extends AbstractAction {
             });
             const data = await response.text();
             // console.log('data loaded: ', data);
+            // const data = Fore.loadHtml(resolvedUrl);
 
             // todo: if data contain '<template' element as first child instanciate and insert it
             if (!this.attachTo) {
                 this.innerHtml = data;
             }
-/*
-            if (this.attachTo.startsWith('#')) {
-                const targetId = this.attachTo.substring(1);
-                const resolved = resolveId(targetId, this);
-                resolved.innerHTML = '';
-                resolved.innerHTML = data;
-            }
-*/
             this._attachToElement(data);
-
-
             Fore.dispatch(this, 'loaded', {url: this.url})
-
         } catch (error) {
             throw new Error(`failed loading data ${error}`);
         }
@@ -228,27 +217,6 @@ class FxLoad extends AbstractAction {
         return replaced;
     }
 
-
-    /*
-        _getValue() {
-            if (this.hasAttribute('value')) {
-                const valAttr = this.getAttribute('value');
-                try {
-                    const inscopeContext = getInScopeContext(this, valAttr);
-                    return evaluateXPathToString(valAttr, inscopeContext, this);
-                } catch (error) {
-                    console.error(error);
-                    Fore.dispatch(this, 'error', {message: error});
-                }
-            }
-            if (this.textContent) {
-                return this.textContent;
-            }
-            return null;
-        }
-    */
-
-
 }
 
 if (!customElements.get('fx-load')) {

package/src/actions/fx-refresh.js

@@ -21,6 +21,7 @@ class FxRefresh extends AbstractAction {
     );
 
     if (this.hasAttribute('self')) {
+      console.log(`### <<<<< refresh() self ${this} >>>>>`);
       const control = XPathUtil.getClosest('fx-control', this);
       if (control) {
         control.refresh();
@@ -28,11 +29,13 @@ class FxRefresh extends AbstractAction {
       }
     }
     if(this.hasAttribute('force')){
+      console.log(`### <<<<< refresh() force ${this} >>>>>`);
       this.getOwnerForm().forceRefresh();
       return;
     }
     if(this.hasAttribute('control')){
       const targetId = this.getAttribute('control');
+      console.log(`### <<<<< refresh() control '${targetId}' >>>>>`);
       const ctrl = resolveId(targetId, this);
       if (ctrl && Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
         ctrl.refresh();

package/src/actions/fx-toggle.js

@@ -32,7 +32,7 @@ class FxToggle extends AbstractAction {
       const fxSwitch = caseElement.parentNode;
       fxSwitch.toggle(caseElement);
     }
-    // this.needsUpdate = true;
+    this.needsUpdate = true;
   }
 }
 

package/src/fore.js

@@ -18,6 +18,79 @@ export class Fore {
 
   static TYPE_DEFAULT = 'xs:string';
 
+  /**
+   * Loads and return a piece of HTML
+   * @param url - the Url to load from
+   * @returns {Promise<string>}
+   */
+  static async loadHtml(url){
+    try{
+      const response = await fetch(url,  {
+        method: 'GET',
+        mode: 'cors',
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': "text/html",
+        },
+      });
+      const responseContentType = response.headers.get('content-type').toLowerCase();
+      if (responseContentType.startsWith('text/html')) {
+        return response.text();
+      } else {
+        Fore.dispatch(this, 'error', {
+          message: `Response has wrong contentType '${responseContentType}'. Should be 'text/html'`,
+          level:'Error'
+        });
+      }
+    } catch (e){
+      Fore.dispatch(this, 'error', {
+        message: `Html couldn't be loaded from '${url}'`,
+        level:'Error'
+      });
+    }
+  }
+
+  /**
+   * loads a Fore element from given `src`. Always returns the first occurrence of a `<fx-fore>`. The retured element
+   * will replace the `replace` element in the DOM.
+   *
+   * @param replace the element with a `src` attribute to resolvé.
+   * @param src the Url to resolve
+   * @param selector a querySelector expression to fetch certain element from loaded document
+   * @returns {Promise<void>}
+   */
+  static async loadForeFromSrc(replace, src, selector){
+    if(!src){
+      Fore.dispatch(this, 'error', {
+        detail: {
+          message: `No 'src' attribute present`,
+        },
+      });
+    }
+    await Fore.loadHtml(src)
+        .then(data => {
+          const parsed = new DOMParser().parseFromString(data, 'text/html');
+          // const theFore = parsed.querySelector('fx-fore');
+          const foreElement = parsed.querySelector(selector);
+          // console.log('foreElement', foreElement)
+          if (!foreElement) {
+            Fore.dispatch(this, 'error', {
+              detail: {
+                message: `Fore element not found in '${src}'. Maybe wrapped within 'template' element?`,
+              },
+            });
+          }
+          foreElement.setAttribute('from-src', src);
+          const thisAttrs = replace.attributes;
+          Array.from(thisAttrs).forEach(attr =>{
+            if(attr.name !== 'src'){
+              foreElement.setAttribute(attr.name,attr.value);
+            }
+          });
+          replace.replaceWith(foreElement);
+          return foreElement;
+        });
+  }
   static buildPredicates(node){
     let attrPredicate='';
     Array.from(node.attributes).forEach(attr =>{
@@ -467,6 +540,7 @@ export class Fore {
   static stringifiedComponent(element){
     return `<${element.localName} ${Array.from(element.attributes).map(attr=>`${attr.name}="${attr.value}"`).join(' ')}>…</${element.localName}>`;
   }
+/*
   static async loadForeFromUrl(hostElement, url) {
     // console.log('########## loading Fore from ', this.src, '##########');
     await fetch(url, {
@@ -538,7 +612,7 @@ export class Fore {
           // this.appendChild(imported);
         }
       })
-      /*.catch(error => {
+      /!*.catch(error => {
         hostElement.dispatchEvent(
           new CustomEvent('error', {
             composed: false,
@@ -549,8 +623,9 @@ export class Fore {
             },
           }),
         );
-      });*/
+      });*!/
   }
+*/
 
   /**
    * clear all text nodes and attribute values to get a 'clean' template.

package/src/fx-bind.js

@@ -63,7 +63,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
   init(model) {
     this.model = model;
     // console.log('init binding ', this);
-    this.instanceId = this._getInstanceId();
+    this._getInstanceId();
     this.bindType = this.getModel().getInstance(this.instanceId).type;
     // console.log('binding type ', this.bindType);
 
@@ -399,20 +399,40 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     return result;
   }
 
-  // todo: more elaborated implementation ;)
+  /**
+   * return the instance id this bind is associated with. Resolves upwards in binds to either find an expr containing
+   * and instance() function or if not found return 'default'.
+   * @private
+   */
   _getInstanceId() {
     const bindExpr = this.getBindingExpr();
     // console.log('_getInstanceId bindExpr ', bindExpr);
     if (bindExpr.startsWith('instance(')) {
       this.instanceId = XPathUtil.getInstanceId(bindExpr);
-      return this.instanceId;
+      return;
     }
-    if (this.instanceId) {
-      return this.instanceId;
+    if(!this.instanceId && this.parentNode.nodeName === 'FX-BIND'){
+      let parent = this.parentNode;
+      while(parent && !this.instanceId){
+        const ref = parent.getBindingExpr();
+        if (ref.startsWith('instance(')) {
+          this.instanceId = XPathUtil.getInstanceId(ref);
+          return;
+        }
+        if(parent.parentNode.nodeName !== 'FX-BIND'){
+          this.instanceId = 'default';
+          break;
+        }
+        parent = parent.parentNode;
+      }
     }
-    return 'default';
+    this.instanceId = 'default';
   }
+
+
+
 }
+
 if (!customElements.get('fx-bind')) {
   customElements.define('fx-bind', FxBind);
 }

package/src/fx-fore.js

@@ -56,6 +56,9 @@ export class FxFore extends HTMLElement {
             ready: {
                 type: Boolean,
             },
+            strict:{
+                type: Boolean
+            },
             /**
              *
              */
@@ -204,7 +207,7 @@ export class FxFore extends HTMLElement {
 
         this.toRefresh = [];
         this.initialRun = true;
-        this.someInstanceDataStructureChanged = false;
+        this._scanForNewTemplateExpressionsNextRefresh = false;
         this.repeatsFromAttributesCreated = false;
         this.validateOn = this.hasAttribute('validate-on') ? this.getAttribute('validate-on'):'update';
         // this.mergePartial = this.hasAttribute('merge-partial')? true:false;
@@ -214,6 +217,7 @@ export class FxFore extends HTMLElement {
     connectedCallback() {
         this.style.visibility = 'hidden';
         console.time('init');
+        this.strict = this.hasAttribute('strict') ? true : false;
         /*
         document.addEventListener('ready', (e) =>{
           if(e.target !== this){
@@ -255,6 +259,7 @@ export class FxFore extends HTMLElement {
         const slot = this.shadowRoot.querySelector('slot#default');
         slot.addEventListener('slotchange', async event => {
             // preliminary addition for auto-conversion of non-prefixed element into prefixed elements. See fore.js
+            console.log(`### <<<<< slotchange on '${this.id}' >>>>>`);
             if(this.inited) return;
             if(this.hasAttribute('convert')){
                 this.replaceWith(Fore.copyDom(this));
@@ -280,8 +285,8 @@ export class FxFore extends HTMLElement {
             }
             if (!modelElement.inited) {
                 console.info(
-                    `%cFore is processing URL ${window.location.href}`,
-                    "background:#64b5f6; color:white; padding:1rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
+                        `%cFore is processing fx-fore#${this.id}`,
+                    "background:#64b5f6; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
                 );
 
                 await modelElement.modelConstruct();
@@ -296,6 +301,9 @@ export class FxFore extends HTMLElement {
         this.addEventListener('path-mutated', () => {
             this.someInstanceDataStructureChanged = true;
         });
+        this.addEventListener('refresh', () => {
+            this.refresh(true);
+        });
 
     }
 
@@ -319,6 +327,15 @@ export class FxFore extends HTMLElement {
         }
     }
 
+	/**
+	 * Raise a flag that there might be new template expressions under some node. This happens with
+	 * repeats updating (new repeat items can have new template expressions) or switches changing their case (new case = new raw HTML)
+	 */
+	scanForNewTemplateExpressionsNextRefresh() {
+		// TODO: also ask for the root of any new HTML: this can prevent some very deep queries.
+		this._scanForNewTemplateExpressionsNextRefresh = true;
+	}
+
     /**
      * loads a Fore from an URL given by `src`.
      *
@@ -327,54 +344,7 @@ export class FxFore extends HTMLElement {
      */
     async _loadFromSrc() {
         // console.log('########## loading Fore from ', this.src, '##########');
-        await fetch(this.src, {
-            method: 'GET',
-            mode: 'cors',
-            credentials: 'include',
-            headers: {
-                'Content-Type': 'text/html',
-            },
-        })
-            .then(response => {
-                const responseContentType = response.headers.get('content-type').toLowerCase();
-                console.log('********** responseContentType *********', responseContentType);
-                if (responseContentType.startsWith('text/html')) {
-                    // const htmlResponse = response.text();
-                    // return new DOMParser().parseFromString(htmlResponse, 'text/html');
-                    // return response.text();
-                    return response.text().then(result =>
-                        // console.log('xml ********', result);
-                        new DOMParser().parseFromString(result, 'text/html'),
-                    );
-                }
-                return 'done';
-            })
-            .then(data => {
-                // const theFore = fxEvaluateXPathToFirstNode('//fx-fore', data.firstElementChild);
-                const theFore = data.querySelector('fx-fore');
-
-                // console.log('thefore', theFore)
-                if (!theFore) {
-                    Fore.dispatch(this, 'error', {
-                        detail: {
-                            message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`,
-                        },
-                    });
-                }
-                theFore.setAttribute('from-src', this.src);
-                const thisAttrs = this.attributes;
-                Array.from(thisAttrs).forEach(attr =>{
-                    if(attr.name !== 'src'){
-                        theFore.setAttribute(attr.name,attr.value);
-                    }
-                });
-                this.replaceWith(theFore);
-            })
-            .catch(() => {
-                Fore.dispatch(this, 'error', {
-                    message: `'${this.src}' not found or does not contain Fore element.`,
-                });
-            });
+        await Fore.loadForeFromSrc(this,this.src,'fx-fore');
     }
 
     /**
@@ -443,8 +413,11 @@ export class FxFore extends HTMLElement {
 
         Fore.refreshChildren(this, true);
         this._updateTemplateExpressions();
-        this.someInstanceDataStructureChanged = false; // reset
+        this._scanForNewTemplateExpressionsNextRefresh = false; // reset
         this._processTemplateExpressions();
+
+        console.log(`### <<<<< refresh-done ${this.id} >>>>>`);
+
         Fore.dispatch(this, 'refresh-done', {});
 
         // console.groupEnd();
@@ -493,7 +466,7 @@ export class FxFore extends HTMLElement {
 			return;
 		}
         this.isRefreshing = true;
-        console.log('### <<<<< refresh() >>>>>');
+        console.log(`### <<<<< refresh() on '${this.id}' >>>>>`);
 
         // refresh () {
         // ### refresh Fore UI elements
@@ -553,9 +526,9 @@ export class FxFore extends HTMLElement {
         }
 
         // ### refresh template expressions
-        if (this.initialRun || this.someInstanceDataStructureChanged) {
+        if (this.initialRun || this._scanForNewTemplateExpressionsNextRefresh) {
             this._updateTemplateExpressions();
-            this.someInstanceDataStructureChanged = false; // reset
+            this._scanForNewTemplateExpressionsNextRefresh = false; // reset
         }
         this._processTemplateExpressions();
 
@@ -563,14 +536,33 @@ export class FxFore extends HTMLElement {
         // this.dispatchEvent(new CustomEvent('refresh-done'));
         // this.initialRun = false;
         this.style.visibility='visible';
+        console.log(`### <<<<< refresh-done ${this.id} >>>>>`);
         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')) {
+
+        const subFores = Array.from(this.querySelectorAll('fx-fore'));
+/*
+        calling the parent to refresh causes errors and inconsistent state. Also it is questionable
+        if a child should actually interact with its parent in this way.
+
+        This only affects the refreshing NOT the data mutation itself which is happening as expected.
+
+        Current solution is that a child that wants the parent to refresh must do so by adding an additional
+        event handler that dispatches an event upwards and having a handler in the parent to refresh itself.
+
+        So refreshed propagate downwards but not upwards which is at least an option to consider.
+
+        if(this.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE){
+            // await this.parentNode.closest('fx-fore')?.refresh(false);
+        }
+*/
+		for (const subFore of subFores) {
 			// subFore.refresh(false, changedPaths);
-			subFore.refresh(false);
+            if(subFore.ready){
+                await subFore.refresh(false);
+            }
 		}
 		this.isRefreshing = false;
     }
@@ -672,11 +664,11 @@ export class FxFore extends HTMLElement {
             const naked = match.substring(1, match.length - 1);
             const inscope = getInScopeContext(node, naked);
             if (!inscope) {
+                console.warn('no inscope context for expr', naked);
                 const errNode =
                     node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ATTRIBUTE_NODE
                         ? node.parentNode
                         : node;
-                console.warn('no inscope context for ', errNode);
                 return match;
             }
             // Templates are special: they use the namespace configuration from the place where they are
@@ -695,11 +687,17 @@ export class FxFore extends HTMLElement {
             }
         });
 
+		// Update to the new value. Don't do it though if nothing changed to prevent iframes or
+		// images from reloading for example
         if (node.nodeType === Node.ATTRIBUTE_NODE) {
             const parent = node.ownerElement;
-            parent.setAttribute(node.nodeName, replaced);
+			if (parent.getAttribute(node.nodeName) !== replaced) {
+				parent.setAttribute(node.nodeName, replaced);
+			}
         } else if (node.nodeType === Node.TEXT_NODE) {
-            node.textContent = replaced;
+			if (node.textContent !== replaced) {
+				node.textContent = replaced;
+			}
         }
     }
 
@@ -770,7 +768,11 @@ export class FxFore extends HTMLElement {
         const model = this.querySelector('fx-model');
 
         // ##### lazy creation should NOT take place if there's a parent Fore using shared instances
-        const parentFore = this.parentNode.closest('fx-fore');
+        const parentFore = this.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE ? this.parentNode.closest('fx-fore'): null;
+        if(this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE){
+            console.log('fragment',this.parentNode)
+        }
+
         if(parentFore){
             const shared = parentFore.getModel().instances.filter(shared => shared.hasAttribute('shared'));
             if(shared.length !==0) return;
@@ -888,7 +890,7 @@ export class FxFore extends HTMLElement {
      */
     async _initUI() {
         // console.log('### _initUI()');
-        console.log('### <<<<< _initUI >>>>>');
+        console.log(`### <<<<< _initUI '${this.id}' >>>>>`);
 
         if (!this.initialRun) return;
         this.classList.add('initialRun');
@@ -986,8 +988,9 @@ export class FxFore extends HTMLElement {
         if(e.detail.expr){
             console.error('Failing expression',e.detail.expr);
         }
-        console.error('---');
-        this._displayError(e);
+        if(this.strict){
+            this._displayError(e);
+        }
     }
 
     _copyToClipboard(target){

package/src/fx-instance.js

@@ -110,6 +110,7 @@ export class FxInstance extends HTMLElement {
   async init() {
     // console.log('fx-instance init');
     await this._initInstance();
+    console.log(`### <<<<< instance ${this.id} loaded >>>>> `);
     this.dispatchEvent(
       new CustomEvent('instance-loaded', {
         composed: true,

package/src/fx-model.js

@@ -106,7 +106,7 @@ export class FxModel extends HTMLElement {
      *
      */
     async modelConstruct() {
-        console.log('### <<<<< dispatching model-construct >>>>>');
+        console.log(`### <<<<< dispatching model-construct for '${this.fore.id}' >>>>>`);
         // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
         Fore.dispatch(this, 'model-construct', {model: this});
 
@@ -129,7 +129,7 @@ export class FxModel extends HTMLElement {
             this.updateModel();
         } else {
             // ### if there's no instance one will created
-            console.log('### <<<<< dispatching model-construct-done >>>>>');
+            console.log(`### <<<<< dispatching model-construct-done for '${this.fore.id}' >>>>>`);
             await this.dispatchEvent(
                 new CustomEvent('model-construct-done', {
                     composed: false,
@@ -167,7 +167,7 @@ export class FxModel extends HTMLElement {
     }
 
     rebuild() {
-        console.log('### <<<<< rebuild() >>>>>');
+        console.log(`### <<<<< rebuild() '${this.fore.id}' >>>>>`);
 
         this.mainGraph = new DepGraph(false); // do: should be moved down below binds.length check but causes errors in tests.
         this.modelItems = [];
@@ -203,7 +203,7 @@ export class FxModel extends HTMLElement {
             return;
         }
 
-        console.log('### <<<<< recalculate() >>>>>');
+        console.log(`### <<<<< recalculate() '${this.fore.id}' >>>>>`);
 
         // console.log('changed nodes ', this.changed);
         this.computes = 0;
@@ -368,7 +368,7 @@ export class FxModel extends HTMLElement {
 
         if (this.modelItems.length === 0) return true;
 
-        console.log('### <<<<< revalidate() >>>>>');
+        console.log(`### <<<<< revalidate() '${this.fore.id}' >>>>>`);
 
         // reset submission validation
         // this.parentNode.classList.remove('submit-validation-failed')
@@ -402,7 +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);
+                            console.log('node is required but has no value ', XPathUtil.getDocPath(modelItem.node));
                             valid = false;
                         }
                         // if (!compute) valid = false;
@@ -459,18 +459,40 @@ export class FxModel extends HTMLElement {
         // console.log('instances ', this.instances);
         // console.log('instances array ',Array.from(this.instances));
 
-        const instArray = Array.from(this.instances);
-        let found = instArray.find(inst => inst.id === id);
+        let found;
+        if(id === 'default'){
+            found = this.getDefaultInstance();
+        }
+        // ### lookup in local instances first
         if(!found) {
-            const parentFore = this.fore.parentNode.closest('fx-fore');
+        const instArray = Array.from(this.instances);
+            found = instArray.find(inst => inst.id === id);
+            const parentFore = this.fore.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+                    ? this.fore.parentNode.host.closest('fx-fore')
+                    : this.fore.parentNode.closest('fx-fore');
+
+        }
+        // ### lookup in parent Fore if present
+        if(!found){
+            // const parentFore = this.fore.parentNode.closest('fx-fore');
+            const parentFore = this.fore.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+                ? this.fore.parentNode.host.closest('fx-fore')
+                : 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){
+        if(found){
+			return found;
+        }
+        if (id === 'default') {
+            return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
+        }
+        if(!found && this.fore.strict){
             // return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
             Fore.dispatch(this, 'error', {
                 origin: this,
@@ -478,7 +500,7 @@ export class FxModel extends HTMLElement {
                 level:'Error'
             });
         }
-        return found;
+        return null;
     }
 
     evalBinding(bindingExpr) {

package/src/fx-submission.js

@@ -85,7 +85,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
         model.recalculate();
 
-        if (this.validate === 'true') {
+        if (this.validate === 'true' && this.method !== 'get') {
             const valid = model.revalidate();
             if (!valid) {
                 console.log('validation failed. Submission stopped');

package/src/getInScopeContext.js

@@ -61,10 +61,6 @@ export default function getInScopeContext(node, ref) {
     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();
     }