@jinntec/fore 1.1.0 → 1.2.0

package/package.json

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

package/src/ForeElementMixin.js

@@ -59,7 +59,7 @@ export const foreElementMixin = superclass =>
       this.model = null;
       this.modelItem = {};
       this.ref = this.hasAttribute('ref') ? this.getAttribute('ref') : '';
-      this.inScopeVariables = null;
+      this.inScopeVariables = new Map();
     }
 
     getModel() {

package/src/actions/abstract-action.js

@@ -120,7 +120,8 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
     if(e && e.code){
       const vars = new Map();
       vars.set('code',e.code);
-      this.setInScopeVariables(vars);
+      // this.setInScopeVariables(vars);
+      this.setInScopeVariables(new Map([...vars, ...this.inScopeVariables]));
     }
 
     if (e && e.detail) {
@@ -132,11 +133,15 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         vars.set(key,e.detail[key]);
       });
       console.log("event detail vars", vars);
-      this.setInScopeVariables(vars);
+      this.setInScopeVariables(new Map([...vars, ...this.inScopeVariables]));
     }
     this.needsUpdate = false;
 
-    this.evalInContext();
+    try{
+      this.evalInContext();
+    }catch (error){
+      console.warn('evaluation faild',error);
+    }
     if (this.targetElement && this.targetElement.nodeset) {
       this.nodeset = this.targetElement.nodeset;
     }
@@ -172,6 +177,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
       // After loop is done call actionPerformed to update the model and UI
       await loop();
       this.actionPerformed();
+      Fore.dispatch(this, 'while-performed', {});
       return;
     }
 

package/src/actions/fx-action.js

@@ -32,6 +32,7 @@ export class FxAction extends AbstractAction {
   }
 
   perform() {
+    super.perform();
     const { children } = this;
 
     if (this.src) {

package/src/actions/fx-refresh.js

@@ -1,5 +1,6 @@
 import { AbstractAction } from './abstract-action.js';
 import { Fore } from '../fore.js';
+import {resolveId} from "../xpath-evaluation.js";
 
 /**
  * `fx-refresh`
@@ -20,6 +21,14 @@ class FxRefresh extends AbstractAction {
       this.getOwnerForm().forceRefresh();
       return;
     }
+    if(this.hasAttribute('control')){
+      const targetId = this.getAttribute('control');
+      const ctrl = resolveId(targetId, this);
+      if (Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
+        ctrl.refresh();
+      }
+      return;
+    }
     this.getOwnerForm().refresh();
   }
 }

package/src/actions/fx-replace.js

@@ -47,6 +47,7 @@ export default class FxReplace extends AbstractAction {
   }
 
   replace(toReplace, replaceWith) {
+    console.log('replace', toReplace, replaceWith);
     if (!toReplace || !replaceWith) return; // bail out silently
     if (!toReplace.nodeName || !replaceWith.nodeName) {
       console.warn('fx-replace: one argument is not a node');

package/src/fx-bind.js

@@ -273,7 +273,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
          */
     if (XPathUtil.isSelfReference(this.ref)) {
       const parentBoundElement = Fore.getClosest('fx-bind[ref]', this.parentElement);
-      console.log('parent bound element ', parentBoundElement);
+      // console.log('parent bound element ', parentBoundElement);
 
       if (parentBoundElement) {
         // todo: Could be fancier by combining them

package/src/fx-fore.js

@@ -380,11 +380,11 @@ export class FxFore extends HTMLElement {
         console.time('refresh');
 
         // ### refresh Fore UI elements
-        console.time('refreshChildren');
+        // console.time('refreshChildren');
         console.log('toRefresh', this.toRefresh);
 
         // if (!this.initialRun && this.toRefresh.length !== 0) {
-        if (!this.initialRun && this.toRefresh.length !== 0) {
+        if (!force && !this.initialRun && this.toRefresh.length !== 0) {
             let needsRefresh = false;
 
             // ### after recalculation the changed modelItems are copied to 'toRefresh' array for processing
@@ -422,7 +422,7 @@ export class FxFore extends HTMLElement {
             }
         } else {
             Fore.refreshChildren(this, true);
-            console.timeEnd('refreshChildren');
+            // console.timeEnd('refreshChildren');
         }
 
         // ### refresh template expressions
@@ -460,7 +460,7 @@ export class FxFore extends HTMLElement {
             this.storedTemplateExpressions = [];
         }
 
-        console.log('######### storedTemplateExpressions', this.storedTemplateExpressions.length);
+        // console.log('######### storedTemplateExpressions', this.storedTemplateExpressions.length);
 
         /*
             storing expressions and their nodes for re-evaluation
@@ -475,7 +475,7 @@ export class FxFore extends HTMLElement {
             // console.log('storedTemplateExpressionByNode', this.storedTemplateExpressionByNode);
             this.storedTemplateExpressionByNode.set(node, expr);
         });
-        console.log('stored template expressions ', this.storedTemplateExpressionByNode);
+        // console.log('stored template expressions ', this.storedTemplateExpressionByNode);
 
         // TODO: Should we clean up nodes that existed but are now gone?
         this._processTemplateExpressions();
@@ -690,7 +690,7 @@ export class FxFore extends HTMLElement {
                 registerVariables(child);
             }
         })(this);
-        console.log('Found variables:', variables);
+        // console.log('Found variables:', variables);
 
         /*
         const options = {
@@ -708,7 +708,7 @@ export class FxFore extends HTMLElement {
         this.ready = true;
         this.initialRun = false;
         // console.log('### >>>>> dispatching ready >>>>>', this);
-        console.log('modelItems: ', this.getModel().modelItems);
+        console.log('### modelItems: ', this.getModel().modelItems);
         console.log('### <<<<< FORE: form fully initialized...', this);
         Fore.dispatch(this, 'ready', {});
     }

package/src/fx-model.js

@@ -272,10 +272,7 @@ export class FxModel extends HTMLElement {
     console.log(`recalculated ${this.computes} modelItems`);
 
     console.timeEnd('recalculate');
-    console.log(
-      `recalculate finished with modelItems ${this.modelItems.length} item(s)`,
-      this.modelItems,
-    );
+    console.log('recalculate finished with modelItems ',this.modelItems);
     console.groupEnd();
   }
 

package/src/fx-submission.js

@@ -72,7 +72,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
   }
 
   async _submit() {
-    console.log('submitting....');
+    console.log('submitting....', this.getAttribute('id'));
     this.evalInContext();
     const model = this.getModel();
 
@@ -349,8 +349,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         }
 
         this.model.updateModel(); // force update
-        // this.model.formElement.refresh();
-        this.getOwnerForm().refresh();
+        this.getOwnerForm().refresh(true);
       } else {
         throw new Error(`target instance not found: ${targetInstance}`);
       }

package/src/ui/abstract-control.js

@@ -43,7 +43,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     if (this.isBound()) {
       // this.control = this.querySelector('#control');
 
-      if (this.nodeset === null) {
+      if(!this.nodeset){
         this.style.display = 'none';
         return;
       }
@@ -54,8 +54,9 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         // console.log('### XfAbstractControl.refresh modelItem : ', this.modelItem);
 
         if (this.hasAttribute('as') && this.getAttribute('as') === 'node') {
-          console.log('as', this.nodeset);
-          this.modelItem.value = this.nodeset;
+          // console.log('as', this.nodeset);
+          // this.modelItem.value = this.nodeset;
+          this.modelItem.node = this.nodeset;
           this.value = this.modelItem.node;
         } else {
           this.value = this.modelItem.value;
@@ -135,7 +136,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // console.log('mip required', this.modelItem.required);
     this.widget = this.getWidget();
     // if (this.required !== this.modelItem.required) {
-    // if (this.isRequired() !== this.modelItem.required) {
+    if (this.isRequired() !== this.modelItem.required) {
       if (this.modelItem.required) {
         if (this.getOwnerForm().ready){
           if(this.widget.value === ''){
@@ -152,7 +153,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         this.removeAttribute('required');
         this._dispatchEvent('optional');
       }
-    // }
+    }
   }
 
   handleReadonly() {
@@ -189,7 +190,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         }
         if (this.modelItem.alerts.length !== 0) {
           const { alerts } = this.modelItem;
-          console.log('alerts from bind: ', alerts);
+          // console.log('alerts from bind: ', alerts);
 
           const controlAlert = this.querySelector('fx-alert');
           if (!controlAlert) {

package/src/ui/fx-container.js

@@ -44,7 +44,7 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();
-      if (!this.modelItem.boundControls.includes(this)) {
+      if (this.modelItem && !this.modelItem.boundControls.includes(this)) {
         this.modelItem.boundControls.push(this);
       }
 

package/src/ui/fx-control.js

@@ -6,6 +6,7 @@ import {
 } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { Fore } from '../fore.js';
+import {ModelItem} from "../modelitem.js";
 
 const WIDGETCLASS = 'widget';
 
@@ -166,6 +167,11 @@ export default class FxControl extends XfAbstractControl {
     }
     const setval = this.shadowRoot.getElementById('setvalue');
     setval.setValue(modelitem, val);
+
+    if (this.modelItem instanceof ModelItem && !this.modelItem?.boundControls.includes(this)) {
+      this.modelItem.boundControls.push(this);
+    }
+
     setval.actionPerformed();
   }
 

package/src/ui/fx-inspector.js

@@ -121,7 +121,6 @@ export class FxInspector extends HTMLElement {
             </div>
         `;
 
-/*
     const handle = this.shadowRoot.querySelector('.handle');
     handle.addEventListener('click', e => {
       // console.log('toggling');
@@ -132,7 +131,6 @@ export class FxInspector extends HTMLElement {
         this.setAttribute('open', 'open');
       }
     });
-*/
   }
 
   serializeDOM(data) {

package/src/ui/fx-output.js

@@ -67,9 +67,11 @@ export class FxOutput extends XfAbstractControl {
     // console.log('widget ', this.widget);
     this.mediatype = this.hasAttribute('mediatype') ? this.getAttribute('mediatype') : null;
 
+/*
     this.addEventListener('slotchange', e => {
       console.log('slotchange ', e);
     });
+*/
   }
 
   async refresh() {
@@ -112,7 +114,7 @@ export class FxOutput extends XfAbstractControl {
   }
 
   async updateWidgetValue() {
-    console.log('updateWidgetValue');
+    // console.log('updateWidgetValue');
     const valueWrapper = this.shadowRoot.getElementById('value');
 
     if (this.mediatype === 'markdown') {

package/src/xpath-evaluation.js

@@ -327,7 +327,9 @@ function getVariablesInScope(formElement) {
     if (closestActualFormElement.inScopeVariables) {
         for (const key of closestActualFormElement.inScopeVariables.keys()) {
             const varElement = closestActualFormElement.inScopeVariables.get(key);
-            variables[key] = varElement.value;
+            if(varElement){
+                variables[key] = varElement.value;
+            }
         }
     }
     return variables;