@jinntec/fore 1.7.2 → 1.9.0

package/index.js

@@ -56,6 +56,7 @@ import './src/actions/fx-reload.js';
 import './src/actions/fx-reset.js';
 import './src/actions/fx-load.js';
 import './src/actions/fx-toggleboolean.js';
+import './src/actions/fx-call.js';
 
 import './src/functions/fx-function.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.7.2",
+  "version": "1.9.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -34,6 +34,7 @@
     "fontoxpath": "^3.30.0"
   },
   "devDependencies": {
+    "@types/cypress": "^1.1.3",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@open-wc/building-rollup": "^2.0.1",
     "@open-wc/eslint-config": "^7.0.0",
@@ -47,6 +48,7 @@
     "@rollup/plugin-strip": "^2.1.0",
     "@skypack/package-check": "^0.2.2",
     "@webcomponents/webcomponentsjs": "^2.6.0",
+    "cypress": "^13.3.0",
     "deepmerge": "^4.2.2",
     "es-dev-server": "^2.1.0",
     "eslint": "^8.16.0",
@@ -82,7 +84,10 @@
     "start:build": "cd dist && es-dev-server --open",
     "build": "rimraf dist && rollup -c rollup.config.js",
     "start": "es-dev-server --app-index doc/index.html --node-resolve --watch --open",
-    "postinstall": "cd demo && npm i"
+    "preversion": "npm run test",
+    "prepare": "npm run build",
+    "install-demos": "npm i && cd demo && npm i",
+    "start-cypress": "es-dev-server --app-index doc/index.html --node-resolve"
   },
   "keywords": [
     "Fore",

package/src/actions/fx-call.js

@@ -0,0 +1,74 @@
+import '../fx-model.js';
+import {AbstractAction} from './abstract-action.js';
+import {evaluateXPath, evaluateXPathToString} from "../xpath-evaluation.js";
+import {Fore} from "../fore";
+import getInScopeContext from "../getInScopeContext";
+
+/**
+ * `fx-call`
+ *
+ * @customElement
+ */
+export default class FxCall extends AbstractAction {
+    static get properties() {
+        return {
+            ...super.properties,
+            action: {
+                type: String,
+            },
+            fn: {
+                type: String,
+            },
+        };
+    }
+
+    constructor() {
+        super();
+        this.action = '';
+        this.fn = '';
+    }
+
+    connectedCallback() {
+        if (super.connectedCallback) {
+            super.connectedCallback();
+        }
+        if (this.hasAttribute('action')) {
+            this.action = this.getAttribute('action');
+        } else if(this.hasAttribute('function')){
+            this.fn = this.getAttribute('function');
+
+        }else{
+            throw new Error('fx-call must specify an "action" or "function" attribute');
+        }
+    }
+
+    async perform() {
+        super.perform();
+        if(this.action){
+            await this._callAction();
+        }
+        // execute function
+        if(this.fn){
+            this._callFunction();
+        }
+    }
+
+    /**
+     * find action and execute it
+      */
+    async _callAction(){
+        const action = document.querySelector(`#${this.action}`);
+        if(action){
+            await action.perform();
+        }
+    }
+
+    _callFunction(){
+        const inscope = getInScopeContext(this, 'instance()',this);
+        evaluateXPath(this.fn, inscope, this);
+    }
+}
+
+if (!customElements.get('fx-call')) {
+    window.customElements.define('fx-call', FxCall);
+}

package/src/fx-fore.js

@@ -29,6 +29,12 @@ export class FxFore extends HTMLElement {
 
     static get properties() {
         return {
+            /**
+             * ignore certain nodes for template expression search
+             */
+            ignoreExpressions:{
+                type: String
+            },
             /**
              * merge-partial
              */
@@ -173,8 +179,8 @@ export class FxFore extends HTMLElement {
 
            <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="left" gravity="bottom" escape-markup="false"></jinn-toast>
-           <jinn-toast id="warn" text="warning" duration="-1" data-class="warning" close="true" position="right" gravity="bottom"></jinn-toast>
+           <jinn-toast id="error" text="error" duration="-1" data-class="error" close="true" position="right" gravity="top" escape-markup="false"></jinn-toast>
+           <jinn-toast id="warn" text="warning" duration="5000" data-class="warning" position="left" gravity="top"></jinn-toast>
            <slot id="default"></slot>
            <slot name="messages"></slot>
            <div id="modalMessage" class="overlay">
@@ -225,6 +231,7 @@ export class FxFore extends HTMLElement {
           // e.stopImmediatePropagation();
         },true);
     */
+        this.ignoreExpressions = this.hasAttribute('ignore-expressions') ? this.getAttribute('ignore-expressions'): null;
 
         this.lazyRefresh = this.hasAttribute('refresh-on-view');
         if (this.lazyRefresh) {
@@ -254,6 +261,10 @@ export class FxFore extends HTMLElement {
                 return;
             }
 
+            if(this.ignoreExpressions){
+                this.ignoredNodes = Array.from(this.querySelectorAll(this.ignoreExpressions));
+            }
+
             const children = event.target.assignedElements();
             let modelElement = children.find(
                 modelElem => modelElem.nodeName.toUpperCase() === 'FX-MODEL',
@@ -547,7 +558,9 @@ export class FxFore extends HTMLElement {
             const expr = this._getTemplateExpression(node);
 
             // console.log('storedTemplateExpressionByNode', this.storedTemplateExpressionByNode);
-            this.storedTemplateExpressionByNode.set(node, expr);
+            if(expr){
+                this.storedTemplateExpressionByNode.set(node, expr);
+            }
         });
         // console.log('stored template expressions ', this.storedTemplateExpressionByNode);
 
@@ -629,6 +642,13 @@ export class FxFore extends HTMLElement {
 
     // eslint-disable-next-line class-methods-use-this
     _getTemplateExpression(node) {
+        if(this.ignoredNodes){
+            if(node.nodeType === Node.ATTRIBUTE_NODE){
+                node = node.ownerElement;
+            }
+            const found = this.ignoredNodes.find( (n) => n.contains(node));
+            if(found) return null;
+        }
         if (node.nodeType === Node.ATTRIBUTE_NODE) {
             return node.value;
         }
@@ -920,9 +940,9 @@ export class FxFore extends HTMLElement {
             this.shadowRoot.getElementById('messageContent').innerText = msg;
             // this.shadowRoot.getElementById('modalMessage').open();
             this.shadowRoot.getElementById('modalMessage').classList.add('show');
-        } else if (level === 'sticky') {
+        } else if (level === 'sticky' || level === 'error' || level === 'warn') {
             // const notification = this.$.modeless;
-            this.shadowRoot.querySelector('#sticky').showToast(msg);
+            this.shadowRoot.querySelector(`#${level}`).showToast(msg);
         } else {
             const toast = this.shadowRoot.querySelector('#message');
             toast.showToast(msg);

package/src/fx-instance.js

@@ -20,8 +20,7 @@ async function handleResponse(response) {
     );
   }
   if (
-    responseContentType.startsWith('text/plain') ||
-    responseContentType.startsWith('text/markdown')
+    responseContentType.startsWith('text/')
   ) {
     // console.log("********** inside  res plain *********");
     return response.text();
@@ -53,6 +52,7 @@ export class FxInstance extends HTMLElement {
     this.attachShadow({ mode: 'open' });
     this.originalInstance = null;
     this.partialInstance = null;
+    this.credentials = '';
   }
 
   connectedCallback() {
@@ -67,6 +67,13 @@ export class FxInstance extends HTMLElement {
       this.id = 'default';
     }
 
+    this.credentials = this.hasAttribute('credentials')
+        ? this.getAttribute('credentials')
+        : 'same-origin';
+    if (!['same-origin', 'include', 'omit'].includes(this.credentials)) {
+      console.error(`fx-submission: the value of credentials is not valid. Expected 'same-origin', 'include' or 'omit' but got '${this.credentials}'`, this);
+    }
+
     if (this.hasAttribute('type')) {
       this.type = this.getAttribute('type');
     } else {
@@ -207,6 +214,10 @@ export class FxInstance extends HTMLElement {
       this.instanceData = {};
       this.originalInstance = [...this.instanceData];
     }
+    if(this.type === 'text'){
+      this.instanceData = '';
+      this.originalInstance = '';
+    }
   }
 
   async _loadData() {
@@ -240,10 +251,8 @@ export class FxInstance extends HTMLElement {
     try {
       const response = await fetch(url, {
         method: 'GET',
-/*
+        credentials: this.credentials,
         mode: 'cors',
-        credentials: 'include',
-*/
         headers: {
           'Content-Type': contentType,
         },

package/src/fx-submission.js

@@ -12,6 +12,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     constructor() {
         super();
         this.attachShadow({mode: 'open'});
+        this.credentials = '';
         this.parameters = new Map();
     }
 
@@ -56,6 +57,12 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             : 'application/xml';
 
         this.validate = this.getAttribute('validate') ? this.getAttribute('validate') : 'true';
+        this.credentials = this.hasAttribute('credentials')
+            ? this.getAttribute('credentials')
+            : 'same-origin';
+		if (!['same-origin', 'include', 'omit'].includes(this.credentials)) {
+			console.error(`fx-submission: the value of credentials is not valid. Expected 'same-origin', 'include' or 'omit' but got '${this.credentials}'`, this);
+		}
         this.shadowRoot.innerHTML = this.renderHTML();
     }
 
@@ -96,9 +103,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     _getProperty(attrName){
         if(this.parameters.has(attrName)){
             return this.parameters.get(attrName);
-        } else {
-            return this.getAttribute(attrName);
         }
+        return this.getAttribute(attrName);
     }
 
     /**
@@ -191,10 +197,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         try {
             const response = await fetch(resolvedUrl, {
                 method: this.method,
-                /*
-                                mode: 'cors',
-                                credentials: 'include',
-                */
+                credentials: this.credentials,
+                mode:'cors',
                 headers,
                 body: serialized,
             });
@@ -207,9 +211,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
             const contentType = response.headers.get('content-type').toLowerCase();
             if (
-                contentType.startsWith('text/plain') ||
-                contentType.startsWith('text/html') ||
-                contentType.startsWith('text/markdown')
+                contentType.startsWith('text/')
             ) {
                 const text = await response.text();
                 this._handleResponse(text, resolvedUrl,contentType);
@@ -231,6 +233,10 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             Fore.dispatch(this, 'submit-error', {error: error.message});
         } finally {
             this.parameters.clear();
+            const download = document.querySelector('[download]');
+            if(download){
+                document.body.removeChild(download);
+            }
         }
     }
 
@@ -242,6 +248,9 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         if (serialized && instance.getAttribute('type') === 'json') {
             data = JSON.parse(serialized);
         }
+        if (serialized && instance.getAttribute('type') === 'text') {
+            data = serialized;
+        }
         return data;
     }
 
@@ -263,6 +272,9 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             // console.warn('JSON serialization is not yet supported')
             return JSON.stringify(relevantNodes);
         }
+        if (instanceType === 'text') {
+            return relevantNodes;
+        }
         throw new Error('unknown instance type ', instanceType);
     }
 
@@ -393,11 +405,26 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             }
         }
 
+        if (this.replace === 'download') {
+            const target = this._getProperty('target');
+            const downloadLink = document.createElement('a');
+            downloadLink.setAttribute('download',target);
+            downloadLink.setAttribute('href',`data:${contentType},${data}`);
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+        }
         if (this.replace === 'all') {
-            document.open();
-            document.write(data);
-            document.close();
-            window.location.href = resolvedUrl;
+            const target = this._getProperty('target');
+            if(target && target === '_blank'){
+                const win = window.open("", "_blank");
+                win.document.write(`<pre>${data}</pre>`);
+                win.document.close();
+            }else{
+                document.open();
+                document.write(data);
+                document.close();
+                window.location.href = resolvedUrl;
+            }
             // document.getElementsByTagName('html')[0].innerHTML = data;
         }
         if (this.replace === 'target' && contentType.startsWith('text/html')) {
@@ -415,51 +442,22 @@ 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);
-            }
-        }
+    _handleError() {
+        // this.dispatch('submit-error', {});
+        Fore.dispatch(this, 'submit-error', {});
+        /*
+                    console.log('ERRRORRRRR');
+                    this.dispatchEvent(
+                        new CustomEvent('submit-error', {
+                            composed: true,
+                            bubbles: true,
+                            detail: {},
+                        }),
+                    );
+            */
     }
-*/
 
-/*
+    /*
     mergeNodes(node1, node2) {
         // Overwrite attributes in node1 with values from node2
         for (const { name, value } of node2.attributes) {
@@ -490,97 +488,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         });
     }
 */
-    /**
-     * select relevant nodes
-     *
-     * @returns {*}
-     */
-    /*
-    selectRelevant(type) {
-      console.log('selectRelevant' ,type)
-      switch (type){
-        case 'xml':
-          return this._relevantXmlNodes();
-        default:
-          console.warn(`relevance selection not supported for type:${this.type}`);
-          return this.nodeset;
-      }
-    }
-  */
-
-    // todo: support for 'empty'
-    /*
-    _relevantXmlNodes() {
-      // ### no relevance selection - current nodeset is used 'as-is'
-      if (this.nonrelevant === 'keep') {
-        return this.nodeset;
-      }
-
-      // first check if nodeset of submission is relevant - otherwise bail out
-      const mi = this.getModel().getModelItem(this.nodeset);
-      if (mi && !mi.relevant) return null;
-
-      const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
-      const root = doc.firstElementChild;
-
-      if (this.nodeset.children.length === 0 && this._isRelevant(this.nodeset)) {
-        return this.nodeset;
-      }
-      return this._filterRelevant(this.nodeset, root);
-    }
-  */
-
-    /*
-    _filterRelevant(node, result) {
-      const { childNodes } = node;
-      Array.from(childNodes).forEach(n => {
-        if (this._isRelevant(n)) {
-          const clone = n.cloneNode(false);
-          result.appendChild(clone);
-          const { attributes } = n;
-          if (attributes) {
-            Array.from(attributes).forEach(attr => {
-              if (this._isRelevant(attr)) {
-                clone.setAttribute(attr.nodeName, attr.value);
-              } else if (this.nonrelevant === 'empty') {
-                clone.setAttribute(attr.nodeName, '');
-              } else {
-                clone.removeAttribute(attr.nodeName);
-              }
-            });
-          }
-          return this._filterRelevant(n, clone);
-        }
-        return null;
-      });
-      return result;
-    }
-  */
 
-    /*
-    _isRelevant(node) {
-      const mi = this.getModel().getModelItem(node);
-      if (!mi || mi.relevant) {
-        return true;
-      }
-      return false;
-    }
-  */
-
-    _handleError() {
-        // this.dispatch('submit-error', {});
-        Fore.dispatch(this, 'submit-error', {});
-        /*
-                    console.log('ERRRORRRRR');
-                    this.dispatchEvent(
-                        new CustomEvent('submit-error', {
-                            composed: true,
-                            bubbles: true,
-                            detail: {},
-                        }),
-                    );
-            */
-    }
 }
 
 if (!customElements.get('fx-submission')) {

package/src/ui/fx-control.js

@@ -43,6 +43,9 @@ export default class FxControl extends XfAbstractControl {
     static get properties() {
         return {
             ...XfAbstractControl.properties,
+            credentials:{
+                type: String
+            },
             initial: {
                 type: Boolean
             }
@@ -74,6 +77,13 @@ export default class FxControl extends XfAbstractControl {
             }
         `;
 
+        this.credentials = this.hasAttribute('credentials')
+            ? this.getAttribute('credentials')
+            : 'same-origin';
+        if (!['same-origin', 'include', 'omit'].includes(this.credentials)) {
+            console.error(`fx-submission: the value of credentials is not valid. Expected 'same-origin', 'include' or 'omit' but got '${this.credentials}'`, this);
+        }
+
         this.shadowRoot.innerHTML = `
             <style>
                 ${style}
@@ -369,7 +379,7 @@ export default class FxControl extends XfAbstractControl {
         }
 
         // ### when there's a url Fore is used as widget and will be loaded from external file
-        if (this.url && !this.loaded) {
+        if (this.url && !this.loaded && this.modelItem.relevant) {
             // ### evaluate initial data if necessary
 
             if (this.initial) {
@@ -417,10 +427,8 @@ export default class FxControl extends XfAbstractControl {
         try {
             const response = await fetch(this.url, {
                 method: 'GET',
-                /*
-                        mode: 'cors',
-                        credentials: 'include',
-                */
+                credentials: this.credentials,
+                mode: 'cors',
                 headers: {
                     'Content-Type': 'text/html',
                 },
@@ -446,9 +454,12 @@ export default class FxControl extends XfAbstractControl {
                 'model-construct-done',
                 e => {
                     const defaultInst = imported.querySelector('fx-instance');
-                    if (this.initialNode) {
+                    if (this.initial) {
                         const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
                         // Note: Clone the input to prevent the inner fore from editing the outer node
+						// Also update the `initialNode` to make sure we have an up-to-date version
+						this.initialNode = evaluateXPathToFirstNode(this.initial, this.nodeset, this);
+
                         doc.firstElementChild.appendChild(this.initialNode.cloneNode(true));
                         defaultInst.setInstanceData(doc);
                     }