@jinntec/fore 2.1.1 → 2.2.0

package/index.js

@@ -62,4 +62,5 @@ import './src/actions/fx-setattribute.js';
 import './src/actions/fx-construct-done.js';
 
 import './src/functions/fx-function.js';
+import './src/functions/fx-functionlib.js';
 

package/package.json

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

package/src/functions/fx-function.js

@@ -1,11 +1,11 @@
-import { registerCustomXPathFunction, createTypedValueFactory } from 'fontoxpath';
 import { foreElementMixin } from '../ForeElementMixin.js';
-import { evaluateXPath, globallyDeclaredFunctionLocalNames } from '../xpath-evaluation.js';
+import registerFunction from './registerFunction.js';
 
 /**
  * Allows to extend a form with local custom functions.
  *
- * ` */
+ * @extends {HTMLElement}
+ */
 export class FxFunction extends foreElementMixin(HTMLElement) {
   constructor() {
     super();
@@ -16,104 +16,13 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
     this.style.display = 'none';
 
     this.signature = this.hasAttribute('signature') ? this.getAttribute('signature') : null;
-    if (this.signature === null) {
-      console.error('signature is a required attribute');
-    }
     this.type = this.hasAttribute('type') ? this.getAttribute('type') : null;
     this.shadowRoot.innerHTML = `<slot></slot>`;
 
     this.override = this.hasAttribute('override') ? this.getAttribute('override') : 'true';
     this.functionBody = this.innerText;
 
-    const type = this.getAttribute('type') || 'text/xpath';
-
-    // Parse the signature to something useful
-    // Signature is of the form `my:sumproduct($p as xs:decimal*, $q as xs:decimal*) as xs:decimal` or local:something($a as item()*) as item()*
-    const signatureParseResult = this.signature.match(
-      /(?:(?<prefix>[^:]*):)?(?<localName>[^(]+)\((?<params>(?:\(\)|[^)])*)\)(?: as (?<returnType>.*))?/,
-    );
-
-    if (!signatureParseResult) {
-      throw new Error(`Function signature ${this.signature} could not be parsed`);
-    }
-
-    const { prefix, localName, params, returnType } = signatureParseResult.groups;
-
-    // TODO: lookup prefix
-    const functionIdentifier =
-      prefix === 'local' || !prefix
-        ? { namespaceURI: 'http://www.w3.org/2005/xquery-local-functions', localName }
-        : `${prefix}:${localName}`;
-
-    // Make the function available globally w/o a prefix. See the functionNameResolver for for how
-    // this is picked up
-    if (!prefix) {
-      globallyDeclaredFunctionLocalNames.push(localName);
-    }
-
-    const paramParts = params
-      ? params.split(',').map(param => {
-          const match = param.match(/(?<variableName>\$[^\s]+)(?:\sas\s(?<varType>.+))/);
-          if (!match) {
-            throw new Error(`Param ${param} could not be parsed`);
-          }
-          const { variableName, varType } = match.groups;
-          return {
-            variableName,
-            variableType: varType || 'item()*',
-          };
-        })
-      : [];
-
-    switch (type) {
-      case 'text/javascript': {
-        // eslint-disable-next-line no-new-func
-        const fun = new Function(
-          '_domFacade',
-          ...paramParts.map(paramPart => paramPart.variableName),
-          'form',
-          this.functionBody,
-        );
-        registerCustomXPathFunction(
-          functionIdentifier,
-          paramParts.map(paramPart => paramPart.variableType),
-          returnType || 'item()*',
-          (...args) => fun.apply(this.getInScopeContext(), [...args, this.getOwnerForm()]),
-        );
-        break;
-      }
-
-      case 'text/xquf':
-      case 'text/xquery':
-      case 'text/xpath': {
-        const typedValueFactories = paramParts.map(param => createTypedValueFactory(param.variableType));
-        const language = type === 'text/xpath' ?
-            'XPath3.1' : type === 'text/xquery' ?
-            'XQuery3.1' : 'XQueryUpdate3.1';
-        const fun = (domFacade, ...args) =>
-          evaluateXPath(
-            this.functionBody,
-            this.getInScopeContext(),
-            this.getOwnerForm(),
-              paramParts.reduce((variablesByName, paramPart, i) => {
-              // Because we know the XPath type here (from the function declaration) we do not have to depend on the implicit typings
-				variablesByName[paramPart.variableName.replace('$', '')] = typedValueFactories[i](args[i]);
-              return variablesByName;
-            }, {}),
-            {language}
-          );
-        registerCustomXPathFunction(
-          functionIdentifier,
-          paramParts.map(paramPart => paramPart.variableType),
-          returnType || 'item()*',
-          fun,
-        );
-        break;
-      }
-
-      default:
-        throw new Error(`Unexpected mimetype ${type} for function`);
-    }
+	registerFunction(this, this);
   }
 }
 if (!customElements.get('fx-function')) {

package/src/functions/fx-functionlib.js

@@ -0,0 +1,59 @@
+import { foreElementMixin } from '../ForeElementMixin.js';
+import registerFunction from './registerFunction.js';
+
+/**
+ * Allows to extend a form with remote custom functions.
+ *
+ * @extends {HTMLElement}
+ */
+
+export class FxFunctionlib extends foreElementMixin(HTMLElement) {
+    constructor() {
+        super();
+
+		/**
+		 * @type {Function}
+		 */
+		this._resolve = null;
+
+		/**
+		 * @type {Promise<undefined>}
+		 */
+		this.readyPromise = new Promise((resolve) => this._resolveLoading = resolve);
+    }
+
+    async connectedCallback() {
+        this.style.display = 'none';
+
+        const src = this.getAttribute('src');
+
+        const result = await fetch(src);
+        if (!result.ok) {
+            console.error(`Loading function library at ${src} failed.`);
+        }
+
+        const body = await result.text();
+        const document = (new DOMParser()).parseFromString(body, 'text/html');
+
+        /**
+         * @type {HTMLElement[]}
+         */
+        const functions = Array.from(document.querySelectorAll('fx-function'));
+        // TODO: also recurse into new function libraries here?
+        for (const func of functions) {
+            const functionObject = {
+                type: func.getAttribute('type'),
+                signature: func.getAttribute('signature'),
+                functionBody: func.innerText
+            };
+
+            registerFunction(functionObject, this);
+        }
+		this._resolveLoading(undefined);
+    }
+}
+
+
+if (!customElements.get('fx-functionlib')) {
+  customElements.define('fx-functionlib', FxFunctionlib);
+}

package/src/functions/registerFunction.js

@@ -0,0 +1,103 @@
+import { createTypedValueFactory, registerCustomXPathFunction } from "fontoxpath";
+import { evaluateXPath, globallyDeclaredFunctionLocalNames } from "../xpath-evaluation";
+
+/**
+ * @param functionObject {{signature: string, type: string|null, functionBody: string}}
+ * @param formElement {HTMLElement} The form element connected to this function. Used to determine inscope context
+ * @returns {undefined}
+ */
+export default function (functionObject, formElement) {
+	if (functionObject.signature === null) {
+      console.error('signature is a required attribute');
+    }
+
+    const type = functionObject.type ?? 'text/xpath';
+
+    // Parse the signature to something useful
+    // Signature is of the form `my:sumproduct($p as xs:decimal*, $q as xs:decimal*) as xs:decimal` or local:something($a as item()*) as item()*
+    const signatureParseResult = functionObject.signature.match(
+      /(?:(?<prefix>[^:]*):)?(?<localName>[^(]+)\((?<params>(?:\(\)|[^)])*)\)(?: as (?<returnType>.*))?/,
+    );
+
+    if (!signatureParseResult) {
+      throw new Error(`Function signature ${functionObject.signature} could not be parsed`);
+    }
+
+    const { prefix, localName, params, returnType } = signatureParseResult.groups;
+
+    // TODO: lookup prefix
+    const functionIdentifier =
+      prefix === 'local' || !prefix
+        ? { namespaceURI: 'http://www.w3.org/2005/xquery-local-functions', localName }
+        : `${prefix}:${localName}`;
+
+    // Make the function available globally w/o a prefix. See the functionNameResolver for for how
+    // functionObject is picked up
+    if (!prefix) {
+      globallyDeclaredFunctionLocalNames.push(localName);
+    }
+
+    const paramParts = params
+      ? params.split(',').map(param => {
+          const match = param.match(/(?<variableName>\$[^\s]+)(?:\sas\s(?<varType>[^\s]+))/);
+          if (!match) {
+            throw new Error(`Param ${param} could not be parsed`);
+          }
+          const { variableName, varType } = match.groups;
+          return {
+            variableName,
+            variableType: varType || 'item()*',
+          };
+        })
+      : [];
+
+    switch (type) {
+      case 'text/javascript': {
+        // eslint-disable-next-line no-new-func
+        const fun = new Function(
+          '_domFacade',
+          ...paramParts.map(paramPart => paramPart.variableName),
+          'form',
+          functionObject.functionBody,
+        );
+        registerCustomXPathFunction(
+          functionIdentifier,
+          paramParts.map(paramPart => paramPart.variableType),
+          returnType || 'item()*',
+          (...args) => fun.apply(formElement.getInScopeContext(), [...args, formElement.getOwnerForm()]),
+        );
+        break;
+      }
+
+      case 'text/xquf':
+      case 'text/xquery':
+      case 'text/xpath': {
+        const typedValueFactories = paramParts.map(param => createTypedValueFactory(param.variableType));
+        const language = type === 'text/xpath' ?
+            'XPath3.1' : type === 'text/xquery' ?
+            'XQuery3.1' : 'XQueryUpdate3.1';
+        const fun = (domFacade, ...args) =>
+          evaluateXPath(
+            functionObject.functionBody,
+            formElement.getInScopeContext(),
+            formElement.getOwnerForm(),
+              paramParts.reduce((variablesByName, paramPart, i) => {
+              // Because we know the XPath type here (from the function declaration) we do not have to depend on the implicit typings
+				  variablesByName[paramPart.variableName.replace('$', '')] = typedValueFactories[i](args[i], domFacade);
+              return variablesByName;
+            }, {}),
+            {language}
+          );
+        registerCustomXPathFunction(
+          functionIdentifier,
+          paramParts.map(paramPart => paramPart.variableType),
+          returnType || 'item()*',
+          fun,
+        );
+        break;
+      }
+
+      default:
+        throw new Error(`Unexpected mimetype ${type} for function`);
+    }
+};

package/src/fx-fore.js

@@ -291,6 +291,16 @@ export class FxFore extends HTMLElement {
                     "background:#64b5f6; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
                 );
 
+				const variables = new Map();
+				(function registerVariables(node) {
+					for (const child of node.children) {
+						if ('setInScopeVariables' in child) {
+							child.setInScopeVariables(variables);
+						}
+						registerVariables(child);
+					}
+				})(this);
+
                 await modelElement.modelConstruct();
 				this._handleModelConstructDone();
             }
@@ -900,18 +910,6 @@ export class FxFore extends HTMLElement {
         this.classList.add('initialRun');
         await this._lazyCreateInstance();
 
-        // console.log('registering variables!');
-        const variables = new Map();
-        (function registerVariables(node) {
-            for (const child of node.children) {
-                if ('setInScopeVariables' in child) {
-                    child.setInScopeVariables(variables);
-                }
-                registerVariables(child);
-            }
-        })(this);
-        // console.log('Found variables:', variables);
-
         /*
         const options = {
           root: null,

package/src/fx-instance.js

@@ -1,11 +1,11 @@
 import { Fore } from './fore.js';
 import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
 
-async function handleResponse(response) {
+async function handleResponse(fxInstance, response) {
   const { status } = response;
   if (status >= 400) {
     // console.log('response status', status);
-    alert(`response status:  ${status} - failed to load data for '${this.src}' - stopping.`);
+    alert(`response status:  ${status} - failed to load data for '${fxInstance.src}' - stopping.`);
     throw new Error(`failed to load data - status: ${status}`);
   }
   const responseContentType = response.headers.get('content-type').toLowerCase();
@@ -258,7 +258,7 @@ export class FxInstance extends HTMLElement {
           'Content-Type': contentType,
         },
       });
-      const data = await handleResponse(response);
+	  const data = await handleResponse(this, response);
       this._setInitialData(data);
 /*
       if (data.nodeType) {

package/src/fx-model.js

@@ -138,6 +138,9 @@ export class FxModel extends HTMLElement {
                 }),
             );
         }
+
+		const functionlibImports = Array.from(this.querySelectorAll('fx-functionlib'));
+		await Promise.all(functionlibImports.map(lib => lib.readyPromise));
         // console.timeEnd('instance-loading');
         this.inited = true;
     }

package/src/fx-var.js

@@ -1,9 +1,14 @@
+import { createTypedValueFactory, domFacade } from 'fontoxpath';
 import { Fore } from './fore.js';
 import './fx-instance.js';
 import { evaluateXPath } from './xpath-evaluation.js';
 import { foreElementMixin } from './ForeElementMixin.js';
 import getInScopeContext from './getInScopeContext.js';
 
+// We are getting sequences here (evaluateXPath is returning all items, as an array)
+// So wrap them into something so FontoXPath also understands they are sequences, always.
+const typedValueFactory = createTypedValueFactory('item()*');
+
 /**
  * @ts-check
  */
@@ -25,13 +30,8 @@ export class FxVariable extends foreElementMixin(HTMLElement) {
   refresh() {
     const inscope = getInScopeContext(this, this.valueQuery);
 
-      const values = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
-	  if (values.length) {
-		  [this.value] = values;
-	  } else {
-		  // There is no value: set to null so it's interpreted as empty-sequence later on
-		  this.value = null;
-	  }
+    const values = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
+    this.value = typedValueFactory(values, domFacade);
   }
 
   setInScopeVariables(inScopeVariables) {

package/src/ui/abstract-control.js

@@ -144,7 +144,9 @@ 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 oldVal is null we haven't received a concrete value yet
+          // if oldVal is null we haven't received a concrete value yet
+
+		if (this.localName !== 'fx-control') return;
         if (this.oldVal !== null && currentVal !== this.value) {
           Fore.dispatch(this, 'value-changed', { path: this.modelItem.path , value:this.modelItem.value});
         }

package/src/xpath-evaluation.js

@@ -497,7 +497,8 @@ export function evaluateXPath(xpath, contextNode, formElement, variables = {}, o
             }),
         );
 */
-        return false;
+		// Return 'nothing' in hope the rest of the page can forgive this
+        return [];
     }
 }
 /**