@jinntec/fore 1.0.0-2 → 1.0.0-3

package/src/ui/fx-output.js

@@ -1,5 +1,5 @@
 import XfAbstractControl from './abstract-control.js';
-import { evaluateXPath, evaluateXPathToString } from '../xpath-evaluation.js';
+import { evaluateXPath, evaluateXPathToStrings } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 // import {markdown} from '../drawdown.js';
 
@@ -68,19 +68,16 @@ export class FxOutput extends XfAbstractControl {
   }
 
   async refresh() {
-    // ### 1. eval 'value' attr
-    // await super.refresh();
+    // Resolve the ref first. The ref will set the `nodeset` which is important for the 'context'
+    if (this.ref) {
+      await super.refresh();
+    }
 
+    // ### 2. Eval the value
     if (this.valueAttr) {
       this.value = this.getValue();
       await this.updateWidgetValue();
-      return;
     }
-    // ### 2. eval 'ref' attr
-    if (this.ref) {
-      super.refresh();
-    }
-    // ### 3. use inline content which is there anyway
   }
 
   getValue() {
@@ -90,7 +87,8 @@ export class FxOutput extends XfAbstractControl {
       if (this.hasAttribute('html')) {
         return evaluateXPath(this.valueAttr, inscopeContext, this);
       }
-      return evaluateXPathToString(this.valueAttr, inscopeContext, this);
+
+      return evaluateXPathToStrings(this.valueAttr, inscopeContext, this)[0];
     } catch (error) {
       console.error(error);
       this.dispatch('error', { message: error });
@@ -119,7 +117,7 @@ export class FxOutput extends XfAbstractControl {
         return;
 */
 
-        const node = this.modelItem.node;
+        const { node } = this.modelItem;
 
         if (node.nodeType) {
           // const mainSlot = this.shadowRoot.querySelector('#main');

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`
@@ -115,14 +116,25 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       console.log('insert catched', nodes, this.index);
     });
 
-    if (this.getOwnerForm().lazyRefresh) {
+    // if (this.getOwnerForm().lazyRefresh) {
       this.mutationObserver = new MutationObserver(mutations => {
         console.log('mutations', mutations);
-        this.refresh(true);
+
+        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.dispatch('path-mutated',{'path':path,'index': this.index});
+          }
+
+        }
       });
-    }
+    // }
     this.getOwnerForm().registerLazyElement(this);
 
+
     const style = `
       :host{
       }
@@ -168,7 +180,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
@@ -248,6 +260,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 +367,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 +397,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

@@ -217,6 +217,32 @@ 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 = {};
+  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 +253,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 +282,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 +303,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 +325,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 +356,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 +423,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 +535,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 +568,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,
 );
 
 /**

package/src/xpath-util.js

@@ -88,4 +88,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];
+  }
 }