@jinntec/fore 2.1.1 → 2.3.0

package/src/functions/fx-functionlib.js

@@ -0,0 +1,56 @@
+import ForeElementMixin from '../ForeElementMixin.js';
+import registerFunction from './registerFunction.js';
+
+/**
+ * Allows to extend a form with remote custom functions.
+ *
+ */
+export class FxFunctionlib extends ForeElementMixin {
+  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,112 @@
+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 registerFunction(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>[a-zA-Z_\-][a-zA-Z0-9_\-]*):)?(?<localName>[a-zA-Z_\-][a-zA-Z0-9_\-]*\s*)\((?<params>(?:[^()]*|\([^()]*\))*)\)\s*(?:as\s+(?<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-bind.js

@@ -1,5 +1,5 @@
 import { DependencyNotifyingDomFacade } from './DependencyNotifyingDomFacade.js';
-import { foreElementMixin } from './ForeElementMixin.js';
+import ForeElementMixin from './ForeElementMixin.js';
 import { ModelItem } from './modelitem.js';
 import {
   evaluateXPathToBoolean,
@@ -22,7 +22,7 @@ import getInScopeContext from './getInScopeContext.js';
  *
  * @customElements
  */
-export class FxBind extends foreElementMixin(HTMLElement) {
+export class FxBind extends ForeElementMixin {
   static READONLY_DEFAULT = false;
 
   static REQUIRED_DEFAULT = false;
@@ -80,10 +80,10 @@ export class FxBind extends foreElementMixin(HTMLElement) {
 
   _buildBindGraph() {
     if (this.bindType === 'xml') {
-		this.nodeset.forEach(node => {
-			          const instance = XPathUtil.resolveInstance(this,this.ref);
+      this.nodeset.forEach((node) => {
+        const instance = XPathUtil.resolveInstance(this, this.ref);
 
-          const path = XPathUtil.getPath(node, instance);
+        const path = XPathUtil.getPath(node, instance);
         this.model.mainGraph.addNode(path, node);
 
         /* ### catching references in the 'ref' itself...
@@ -93,7 +93,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
         General question: are there valid use-cases for using a 'filter' expression to narrow the nodeset
           where to apply constraints? Guess yes and if it's 'just' for reducing the amount of necessary modelItem objects.
 
-
         */
         // const foreignRefs = this.getReferences(this.ref);
 
@@ -159,10 +158,10 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       if (!this.model.mainGraph.hasNode(nodeHash)) {
         this.model.mainGraph.addNode(nodeHash, node);
       }
-		refs.forEach(ref => {
-			const instance = XPathUtil.resolveInstance(this, path);
+      refs.forEach((ref) => {
+        const instance = XPathUtil.resolveInstance(this, path);
 
-			const otherPath = XPathUtil.getPath(ref, instance);
+        const otherPath = XPathUtil.getPath(ref, instance);
         // console.log('otherPath', otherPath)
 
         // todo: nasty hack to prevent duplicate pathes like 'a[1]' and 'a[1]/text()[1]' to end up as separate nodes in the graph
@@ -180,7 +179,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
 
   _processChildren(model) {
     const childbinds = this.querySelectorAll(':scope > fx-bind');
-    Array.from(childbinds).forEach(bind => {
+    Array.from(childbinds).forEach((bind) => {
       // console.log('init child bind ', bind);
       bind.init(model);
     });
@@ -209,14 +208,14 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     if (this.ref === '' || this.ref === null) {
       this.nodeset = inscopeContext;
     } else if (Array.isArray(inscopeContext)) {
-      inscopeContext.forEach(n => {
+      inscopeContext.forEach((n) => {
         if (XPathUtil.isSelfReference(this.ref)) {
           this.nodeset = inscopeContext;
         } else {
           // eslint-disable-next-line no-lonely-if
           if (this.ref) {
             const localResult = evaluateXPathToNodes(this.ref, n, this);
-            localResult.forEach(item => {
+            localResult.forEach((item) => {
               this.nodeset.push(item);
             });
             /*
@@ -244,7 +243,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     if (Array.isArray(this.nodeset)) {
       // console.log('################################################ ', this.nodeset);
       // Array.from(this.nodeset).forEach((n, index) => {
-      Array.from(this.nodeset).forEach(n => {
+      Array.from(this.nodeset).forEach((n) => {
         // console.log('node ',n);
         // this._createModelItem(n, index);
         this._createModelItem(n);
@@ -306,10 +305,10 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     const targetNode = node;
 
     // const path = fx.evaluateXPath('path()',node);
-      // const path = this.getPath(node);
-	  const instance = XPathUtil.resolveInstance(this, this.ref);
+    // const path = this.getPath(node);
+    const instance = XPathUtil.resolveInstance(this, this.ref);
 
-      const path = XPathUtil.getPath(node, instance);
+    const path = XPathUtil.getPath(node, instance);
     // const shortPath = this.shortenPath(path);
 
     // ### constructing default modelitem - will get evaluated during recalculate()
@@ -333,7 +332,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       newItem.addAlert(alert);
     }
 
-
     this.getModel().registerModelItem(newItem);
   }
 
@@ -356,7 +354,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
   getReferences(propertyExpr) {
     const touchedNodes = new Set();
     const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
-    this.nodeset.forEach(node => {
+    this.nodeset.forEach((node) => {
       evaluateXPathToString(propertyExpr, node, this, domFacade);
     });
     return Array.from(touchedNodes.values());
@@ -412,15 +410,15 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       this.instanceId = XPathUtil.getInstanceId(bindExpr);
       return;
     }
-    if(!this.instanceId && this.parentNode.nodeName === 'FX-BIND'){
+    if (!this.instanceId && this.parentNode.nodeName === 'FX-BIND') {
       let parent = this.parentNode;
-      while(parent && !this.instanceId){
+      while (parent && !this.instanceId) {
         const ref = parent.getBindingExpr();
         if (ref.startsWith('instance(')) {
           this.instanceId = XPathUtil.getInstanceId(ref);
           return;
         }
-        if(parent.parentNode.nodeName !== 'FX-BIND'){
+        if (parent.parentNode.nodeName !== 'FX-BIND') {
           this.instanceId = 'default';
           break;
         }
@@ -429,9 +427,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     }
     this.instanceId = 'default';
   }
-
-
-
 }
 
 if (!customElements.get('fx-bind')) {

package/src/fx-connection.js

@@ -0,0 +1,226 @@
+import ForeElementMixin from './ForeElementMixin.js';
+import { Fore } from './fore.js';
+import { FxModel } from './fx-model.js';
+
+class FxConnection extends ForeElementMixin {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._url = '';
+    this._socket = null;
+    this._heartbeatInterval = FxConnection._defaultHeartbeatInterval;
+    this._heartbeatTimer = null;
+    this._messageFormat = FxConnection._defaultMessageFormat;
+    this._onMessage = this._onMessage.bind(this);
+  }
+
+  _render() {
+    const style = `
+            :host {
+                display: none;
+            }
+        `;
+
+    const html = `
+            <slot></slot>
+${
+  this._messageFormat === 'xml'
+    ? '<fx-replace id="replace" ref="."></fx-replace>'
+    : '<fx-setvalue id="setvalue" ref="."></fx-setvalue>'
+}
+        `;
+    this.shadowRoot.innerHTML = `
+            <style>
+                ${style}
+            </style>
+            ${html}
+        `;
+  }
+
+  static get observedAttributes() {
+    return ['url', 'heartbeat', 'message-format'];
+  }
+
+  connectedCallback() {
+    if (this.hasAttribute('url')) {
+      this._url = this.getAttribute('url');
+    }
+    if (this.hasAttribute('heartbeat')) {
+      this._heartbeatInterval = parseInt(this.getAttribute('heartbeat'));
+      this._setupHeartbeat();
+    }
+    if (this.hasAttribute('message-format')) {
+      this._messageFormat = this.getAttribute('message-format');
+    }
+
+    this._render();
+
+    this.getOwnerForm().addEventListener('model-construct-done', e => {
+      console.log('Fore model ready');
+      this._connect();
+
+      this.evalInContext();
+    });
+  }
+
+  disconnectedCallback() {
+    this._disconnect();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'url':
+        this._url = newValue;
+        this._connect();
+        break;
+      case 'heartbeat':
+        this._heartbeatInterval = parseInt(newValue);
+        this._setupHeartbeat();
+        break;
+      case 'messageformat':
+        this._messageFormat = newValue;
+        break;
+      default:
+        // Do nothing for other attributes
+        break;
+    }
+  }
+
+  send(data) {
+    this.evalInContext();
+    data = this.nodeset;
+    if (this._socket && this._socket.readyState === WebSocket.OPEN) {
+      let message;
+      switch (this._messageFormat) {
+        case 'json':
+          message = JSON.stringify(data);
+          break;
+        case 'xml':
+          message = new XMLSerializer().serializeToString(data);
+          break;
+        case 'text':
+          message = data.textContent;
+          break;
+        default:
+          throw new Error(`Unsupported message format: ${this._messageFormat}`);
+      }
+      this._sendMessage(message);
+    } else {
+      throw new Error('WebSocket is not connected');
+    }
+  }
+
+  _connect() {
+    this._disconnect();
+    if (this._url) {
+      this._socket = new WebSocket(this._url);
+      this._socket.addEventListener('open', this._onOpen.bind(this));
+      this._socket.addEventListener('message', this._onMessage);
+      this._socket.addEventListener('close', this._onClose.bind(this));
+    }
+  }
+
+  _disconnect() {
+    if (this._socket) {
+      this._socket.removeEventListener('open', this._onOpen.bind(this));
+      this._socket.removeEventListener('message', event => this._onMessage(event));
+      this._socket.removeEventListener('close', this._onClose.bind(this));
+      this._socket.close();
+      this._socket = null;
+    }
+    if (this._heartbeatTimer) {
+      clearInterval(this._heartbeatTimer);
+      this._heartbeatTimer = null;
+    }
+  }
+
+  _onOpen(event) {
+    this.dispatchEvent(new CustomEvent('open', { detail: event }));
+  }
+
+  _onMessage(event) {
+    let message;
+    switch (this._messageFormat) {
+      case 'json':
+        message = JSON.parse(event.data);
+        break;
+      case 'xml':
+        const parser = new DOMParser();
+        message = parser.parseFromString(event.data, 'application/xml');
+        this.getModelItem().value = message;
+        FxModel.dataChanged = true;
+        this.getModel().changed.push(this.modelItem);
+        this.getModel().updateModel();
+        this.getOwnerForm().refresh(true);
+        break;
+      case 'text':
+        message = event.data;
+        break;
+      default:
+        throw new Error(`Unsupported message format: ${this._messageFormat}`);
+    }
+    console.log('dispatching channel-message', message);
+
+    Fore.dispatch(this, 'channel-message', { message });
+  }
+
+  _onClose(event) {
+    this.dispatchEvent(new CustomEvent('close', { detail: event }));
+  }
+
+  _setupHeartbeat() {
+    if (this._heartbeatInterval > 0) {
+      if (this._heartbeatTimer) {
+        clearInterval(this._heartbeatTimer);
+      }
+      this._heartbeatTimer = setInterval(() => {
+        this._sendMessage('');
+      }, this._heartbeatInterval);
+    } else if (this._heartbeatTimer) {
+      clearInterval(this._heartbeatTimer);
+      this._heartbeatTimer = null;
+    }
+  }
+
+  _sendMessage(message) {
+    if (this._socket && this._socket.readyState === WebSocket.OPEN) {
+      this._socket.send(message);
+    }
+  }
+
+  static get _defaultHeartbeatInterval() {
+    return 0;
+  }
+
+  static get _defaultMessageFormat() {
+    return 'json';
+  }
+
+  get url() {
+    return this._url;
+  }
+
+  set url(value) {
+    this.setAttribute('url', value);
+  }
+
+  get heartbeat() {
+    return this._heartbeatInterval;
+  }
+
+  set heartbeat(value) {
+    this.setAttribute('heartbeat', value);
+  }
+
+  get messageformat() {
+    return this._messageFormat;
+  }
+
+  set messageformat(value) {
+    this.setAttribute('messageformat', value);
+  }
+}
+
+if (!customElements.get('fx-connection')) {
+  customElements.define('fx-connection', FxConnection);
+}