@jinntec/fore 1.0.0-2 → 1.0.0-5

package/src/ui/fx-repeat.js

@@ -4,6 +4,7 @@ import { Fore } from '../fore.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
+import { XPathUtil } from '../xpath-util';
 
 /**
  * `fx-repeat`
@@ -99,28 +100,44 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       this.index = idx + 1;
     });
     // todo: review - this is just used by append action - event consolidation ?
-    this.addEventListener('index-changed', e => {
+    document.addEventListener('index-changed', e => {
       e.stopPropagation();
       if (!e.target === this) return;
       console.log('handle index event ', e);
       // const { item } = e.detail;
       // const idx = Array.from(this.children).indexOf(item);
       const { index } = e.detail;
-      this.index = index;
+      this.index = Number(index);
       this.applyIndex(this.children[index - 1]);
     });
+    /*
     document.addEventListener('insert', e => {
       const nodes = e.detail.insertedNodes;
       this.index = e.detail.position;
       console.log('insert catched', nodes, this.index);
     });
-
-    if (this.getOwnerForm().lazyRefresh) {
-      this.mutationObserver = new MutationObserver(mutations => {
-        console.log('mutations', mutations);
-        this.refresh(true);
-      });
-    }
+*/
+
+    // if (this.getOwnerForm().lazyRefresh) {
+    this.mutationObserver = new MutationObserver(mutations => {
+      console.log('mutations', mutations);
+
+      if (mutations[0].type === 'childList') {
+        const added = mutations[0].addedNodes[0];
+        if (added) {
+          const path = XPathUtil.getPath(added);
+          console.log('path mutated', path);
+          // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
+          // this.index = index;
+          // const prev = mutations[0].previousSibling.previousElementSibling;
+          // const index = prev.index();
+          // this.applyIndex(this.index -1);
+
+          this.dispatch('path-mutated', { path, index: this.index });
+        }
+      }
+    });
+    // }
     this.getOwnerForm().registerLazyElement(this);
 
     const style = `
@@ -168,7 +185,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
    */
   _evalNodeset() {
     // const inscope = this.getInScopeContext();
-    const inscope = getInScopeContext(this, this.ref);
+    const inscope = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
     // console.log('##### inscope ', inscope);
     // console.log('##### ref ', this.ref);
     // now we got a nodeset and attach MutationObserver to it
@@ -180,7 +197,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       });
     }
 
-    const seq = evaluateXPath(this.ref, inscope, this.getOwnerForm());
+    const seq = evaluateXPath(this.ref, inscope, this);
     // const seq = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
     if (seq === null) {
       // Empty sequence
@@ -248,6 +265,8 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
         newItem.appendChild(clonedTemplate);
         this.appendChild(newItem);
 
+        this._initVariables(newItem);
+
         newItem.nodeset = this.nodeset[position - 1];
         newItem.index = position;
       }
@@ -353,9 +372,24 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       if (repeatItem.index === 1) {
         this.applyIndex(repeatItem);
       }
+
+      this._initVariables(repeatItem);
     });
   }
 
+  _initVariables(newRepeatItem) {
+    const inScopeVariables = new Map(this.inScopeVariables);
+    newRepeatItem.setInScopeVariables(inScopeVariables);
+    (function registerVariables(node) {
+      for (const child of node.children) {
+        if ('setInScopeVariables' in child) {
+          child.setInScopeVariables(inScopeVariables);
+        }
+        registerVariables(child);
+      }
+    })(newRepeatItem);
+  }
+
   _clone() {
     // const content = this.template.content.cloneNode(true);
     this.template = this.shadowRoot.querySelector('template');
@@ -368,6 +402,12 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       item.removeAttribute('repeat-index');
     });
   }
+
+  setInScopeVariables(inScopeVariables) {
+    // Repeats are interesting: the variables should be scoped per repeat item, they should not be
+    // able to see the variables in adjacent repeat items!
+    this.inScopeVariables = new Map(inScopeVariables);
+  }
 }
 
 window.customElements.define('fx-repeat', FxRepeat);

package/src/ui/fx-trigger.js

@@ -80,6 +80,9 @@ export class FxTrigger extends XfAbstractControl {
       repeatedItem.click();
     }
 
+    // Update all child variables, but only once
+    this.querySelectorAll('fx-var').forEach(variableElement => variableElement.refresh());
+
     const forLoop = async () => {
       for (let i = 0; i < this.children.length; i += 1) {
         const child = this.children[i];

package/src/xpath-evaluation.js

@@ -10,38 +10,14 @@ import {
   registerCustomXPathFunction,
   registerXQueryModule,
 } from 'fontoxpath';
+import { Fore } from './fore.js';
+
 import { XPathUtil } from './xpath-util.js';
 
 const XFORMS_NAMESPACE_URI = 'http://www.w3.org/2002/xforms';
 
 const createdNamespaceResolversByXPathQueryAndNode = new Map();
 
-function prettifyXml(source) {
-  const xmlDoc = new DOMParser().parseFromString(source, 'application/xml');
-  const xsltDoc = new DOMParser().parseFromString(
-    [
-      // describes how we want to modify the XML - indent everything
-      '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
-      '  <xsl:strip-space elements="*"/>',
-      '  <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
-      '    <xsl:value-of select="normalize-space(.)"/>',
-      '  </xsl:template>',
-      '  <xsl:template match="node()|@*">',
-      '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
-      '  </xsl:template>',
-      '  <xsl:output indent="yes"/>',
-      '</xsl:stylesheet>',
-    ].join('\n'),
-    'application/xml',
-  );
-
-  const xsltProcessor = new XSLTProcessor();
-  xsltProcessor.importStylesheet(xsltDoc);
-  const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
-  const resultXml = new XMLSerializer().serializeToString(resultDoc);
-  return resultXml;
-}
-
 function getCachedNamespaceResolver(xpath, node) {
   if (!createdNamespaceResolversByXPathQueryAndNode.has(xpath)) {
     return null;
@@ -217,6 +193,34 @@ function functionNameResolver({ prefix, localName }, _arity) {
   }
 }
 
+/**
+ * Get the variables in scope of the form element. These are the values of the variables that
+ * logically precede the formElement that declares the XPath
+ *
+ * @param  {Node}  formElement  The element that declares the XPath
+ *
+ * @return  {Object}  A key-value mapping of the variables
+ */
+function getVariablesInScope(formElement) {
+  let closestActualFormElement = formElement;
+  while (closestActualFormElement && !('inScopeVariables' in closestActualFormElement)) {
+    closestActualFormElement = closestActualFormElement.parentNode;
+  }
+
+  if (!closestActualFormElement) {
+    return {};
+  }
+
+  const variables = {};
+  if(closestActualFormElement.inScopeVariables){
+    for (const key of closestActualFormElement.inScopeVariables.keys()) {
+      const varElement = closestActualFormElement.inScopeVariables.get(key);
+      variables[key] = varElement.value;
+    }
+  }
+  return variables;
+}
+
 /**
  * Evaluate an XPath to _any_ type. When possible, prefer to use any other function to ensure the
  * type of the output is more predictable.
@@ -227,15 +231,23 @@ function functionNameResolver({ prefix, localName }, _arity) {
  */
 export function evaluateXPath(xpath, contextNode, formElement, variables = {}) {
   const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+  const variablesInScope = getVariablesInScope(formElement);
 
-  return fxEvaluateXPath(xpath, contextNode, null, variables, 'xs:anyType', {
-    currentContext: { formElement, variables },
-    moduleImports: {
-      xf: XFORMS_NAMESPACE_URI,
+  return fxEvaluateXPath(
+    xpath,
+    contextNode,
+    null,
+    { ...variablesInScope, ...variables },
+    'xs:anyType',
+    {
+      currentContext: { formElement, variables },
+      moduleImports: {
+        xf: XFORMS_NAMESPACE_URI,
+      },
+      functionNameResolver,
+      namespaceResolver,
     },
-    functionNameResolver,
-    namespaceResolver,
-  });
+  );
 }
 
 /**
@@ -248,20 +260,15 @@ export function evaluateXPath(xpath, contextNode, formElement, variables = {}) {
  */
 export function evaluateXPathToFirstNode(xpath, contextNode, formElement) {
   const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-  return fxEvaluateXPathToFirstNode(
-    xpath,
-    contextNode,
-    null,
-    {},
-    {
-      defaultFunctionNamespaceURI: XFORMS_NAMESPACE_URI,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI,
-      },
-      currentContext: { formElement },
-      namespaceResolver,
+  const variablesInScope = getVariablesInScope(formElement);
+  return fxEvaluateXPathToFirstNode(xpath, contextNode, null, variablesInScope, {
+    defaultFunctionNamespaceURI: XFORMS_NAMESPACE_URI,
+    moduleImports: {
+      xf: XFORMS_NAMESPACE_URI,
     },
-  );
+    currentContext: { formElement },
+    namespaceResolver,
+  });
 }
 
 /**
@@ -274,20 +281,16 @@ export function evaluateXPathToFirstNode(xpath, contextNode, formElement) {
  */
 export function evaluateXPathToNodes(xpath, contextNode, formElement) {
   const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-  return fxEvaluateXPathToNodes(
-    xpath,
-    contextNode,
-    null,
-    {},
-    {
-      currentContext: { formElement },
-      functionNameResolver,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI,
-      },
-      namespaceResolver,
+  const variablesInScope = getVariablesInScope(formElement);
+
+  return fxEvaluateXPathToNodes(xpath, contextNode, null, variablesInScope, {
+    currentContext: { formElement },
+    functionNameResolver,
+    moduleImports: {
+      xf: XFORMS_NAMESPACE_URI,
     },
-  );
+    namespaceResolver,
+  });
 }
 
 /**
@@ -300,20 +303,16 @@ export function evaluateXPathToNodes(xpath, contextNode, formElement) {
  */
 export function evaluateXPathToBoolean(xpath, contextNode, formElement) {
   const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-  return fxEvaluateXPathToBoolean(
-    xpath,
-    contextNode,
-    null,
-    {},
-    {
-      currentContext: { formElement },
-      functionNameResolver,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI,
-      },
-      namespaceResolver,
+  const variablesInScope = getVariablesInScope(formElement);
+
+  return fxEvaluateXPathToBoolean(xpath, contextNode, null, variablesInScope, {
+    currentContext: { formElement },
+    functionNameResolver,
+    moduleImports: {
+      xf: XFORMS_NAMESPACE_URI,
     },
-  );
+    namespaceResolver,
+  });
 }
 
 /**
@@ -335,7 +334,38 @@ export function evaluateXPathToString(
   namespaceReferenceNode = formElement,
 ) {
   const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-  return fxEvaluateXPathToString(
+  const variablesInScope = getVariablesInScope(formElement);
+
+  return fxEvaluateXPathToString(xpath, contextNode, domFacade, variablesInScope, {
+    currentContext: { formElement },
+    functionNameResolver,
+    moduleImports: {
+      xf: XFORMS_NAMESPACE_URI,
+    },
+    namespaceResolver,
+  });
+}
+
+/**
+ * Evaluate an XPath to a set of strings
+ *
+ * @param  {string}     xpath             The XPath to run
+ * @param  {Node}       contextNode       The start of the XPath
+ * @param  {Node}       formElement       The form element associated to the XPath
+ * @param  {DomFacade}  [domFacade=null]  A DomFacade is used in bindings to intercept DOM
+ * access. This is used to determine dependencies between bind elements.
+ * @param  {Node}       formElement       The element where the XPath is defined: used for namespace resolving
+ * @return {string}
+ */
+export function evaluateXPathToStrings(
+  xpath,
+  contextNode,
+  formElement,
+  domFacade = null,
+  namespaceReferenceNode = formElement,
+) {
+  const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
+  return fxEvaluateXPathToStrings(
     xpath,
     contextNode,
     domFacade,
@@ -371,20 +401,16 @@ export function evaluateXPathToNumber(
   namespaceReferenceNode = formElement,
 ) {
   const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
-  return fxEvaluateXPathToNumber(
-    xpath,
-    contextNode,
-    domFacade,
-    {},
-    {
-      currentContext: { formElement },
-      functionNameResolver,
-      moduleImports: {
-        xf: XFORMS_NAMESPACE_URI,
-      },
-      namespaceResolver,
+  const variablesInScope = getVariablesInScope(formElement);
+
+  return fxEvaluateXPathToNumber(xpath, contextNode, domFacade, variablesInScope, {
+    currentContext: { formElement },
+    functionNameResolver,
+    moduleImports: {
+      xf: XFORMS_NAMESPACE_URI,
     },
-  );
+    namespaceResolver,
+  });
 }
 
 /**
@@ -487,6 +513,31 @@ export function resolveId(id, sourceObject, nodeName = null) {
   return null;
 }
 
+const contextFunction = (dynamicContext, string) => {
+  const caller = dynamicContext.currentContext.formElement;
+  if (string) {
+    const instance = resolveId(string, caller);
+    if (instance) {
+      if (instance.nodeName === 'FX-REPEAT') {
+        const { nodeset } = instance;
+        for (let parent = caller; parent; parent = parent.parentNode) {
+          if (parent.parentNode === instance) {
+            const offset = Array.from(parent.parentNode.children).indexOf(parent);
+            return nodeset[offset];
+          }
+        }
+      }
+      return instance.nodeset;
+    }
+  }
+  const parent = XPathUtil.getParentBindingElement(caller);
+  const p = caller.nodeName;
+  // const p = dynamicContext.domFacade.getParentElement();
+
+  if (parent) return parent;
+  return caller.getInScopeContext();
+};
+
 /**
  * @param id as string
  * @return instance data for given id serialized to string.
@@ -495,16 +546,18 @@ registerCustomXPathFunction(
   { namespaceURI: XFORMS_NAMESPACE_URI, localName: 'context' },
   [],
   'item()?',
-  (dynamicContext, string) => {
-    const caller = dynamicContext.currentContext.formElement;
-    const parent = XPathUtil.getParentBindingElement(caller);
-    // const instance = resolveId('default', caller, 'fx-instance');
-    const p = caller.nodeName;
-    // const p = dynamicContext.domFacade.getParentElement();
-
-    if (parent) return parent;
-    return caller.getInScopeContext();
-  },
+  contextFunction,
+);
+
+/**
+ * @param id as string
+ * @return instance data for given id serialized to string.
+ */
+registerCustomXPathFunction(
+  { namespaceURI: XFORMS_NAMESPACE_URI, localName: 'context' },
+  ['xs:string'],
+  'item()?',
+  contextFunction,
 );
 
 /**
@@ -524,7 +577,7 @@ registerCustomXPathFunction(
         // return JSON.stringify(instance.getDefaultContext());
       } else {
         const def = new XMLSerializer().serializeToString(instance.getDefaultContext());
-        return prettifyXml(def);
+        return Fore.prettifyXml(def);
       }
     }
     return null;

package/src/xpath-util.js

@@ -57,16 +57,27 @@ export class XPathUtil {
     throw new Error('no Fore element present');
   }
 
-  // todo: this will need more work to look upward for instance() expr.
+  /**
+   * returns the instance id from a complete XPath using `instance()` function.
+   *
+   * Will return 'default' in case no ref is given at all or the `instance()` function is called without arg.
+   *
+   * Otherwise instance id is extracted from function and returned. If all fails null is returned.
+   * @param ref
+   * @returns {string}
+   */
   static getInstanceId(ref) {
     if (!ref) {
       return 'default';
     }
+    if (ref.startsWith('instance()')) {
+      return 'default';
+    }
     if (ref.startsWith('instance(')) {
       const result = ref.substring(ref.indexOf('(') + 1);
       return result.substring(1, result.indexOf(')') - 1);
     }
-    return 'default';
+    return null;
   }
 
   // todo: certainly not ideal to rely on duplicating instance id on instance document - better way later ;)
@@ -88,4 +99,9 @@ export class XPathUtil {
     // ### cut-off root node ref
     return tmp1.substring(tmp1.indexOf('/'), tmp.length);
   }
+
+  static getBasePath(dep) {
+    const split = dep.split(':');
+    return split[0];
+  }
 }