@jinntec/fore 2.5.0 → 2.7.0

package/src/fx-instance.js

@@ -8,7 +8,7 @@ async function handleResponse(fxInstance, response) {
     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();
+  let responseContentType = response.headers.get('content-type').split(';')[0].trim().toLowerCase();
   // console.log('********** responseContentType *********', responseContentType);
   if (responseContentType.startsWith('text/html')) {
     // const htmlResponse = response.text();
@@ -19,23 +19,21 @@ async function handleResponse(fxInstance, response) {
       new DOMParser().parseFromString(result, 'text/html'),
     );
   }
-  if (responseContentType.startsWith('text/')) {
-    // console.log("********** inside  res plain *********");
-    return response.text();
-  }
-  if (responseContentType.startsWith('application/json')) {
+  if (responseContentType.endsWith('/json') || responseContentType.endsWith('+json')) {
     // console.log("********** inside res json *********");
     return response.json();
   }
-  if (
-    responseContentType.startsWith('application/xml') ||
-    responseContentType.startsWith('text/xml')
-  ) {
+  if (responseContentType.endsWith('/xml') || responseContentType.endsWith('+xml')) {
     // See https://www.rfc-editor.org/rfc/rfc7303
     const text = await response.text();
     // console.log('xml ********', result);
     return new DOMParser().parseFromString(text, 'application/xml');
   }
+  if (responseContentType.startsWith('text/')) {
+    // console.log("********** inside  res plain *********");
+    return response.text();
+  }
+
   throw new Error(`unable to handle response content type: ${responseContentType}`);
 }
 
@@ -210,7 +208,7 @@ export class FxInstance extends HTMLElement {
     }
     if (this.type === 'json') {
       this.instanceData = {};
-      this.originalInstance = [...this.instanceData];
+      this.originalInstance = { ...this.instanceData };
     }
     if (this.type === 'text') {
       this.instanceData = this.innerText;

package/src/fx-model.js

@@ -2,14 +2,15 @@ import { DepGraph } from './dep_graph.js';
 import { Fore } from './fore.js';
 import './fx-instance.js';
 import { ModelItem } from './modelitem.js';
-import { evaluateXPath, evaluateXPathToBoolean } from './xpath-evaluation.js';
+import { getPath } from './xpath-path.js';
+import { evaluateXPath, evaluateXPathToBoolean, evaluateXPathToNodes } from './xpath-evaluation.js';
 import { XPathUtil } from './xpath-util.js';
 
 /**
- * The model of this Fore scope. It holds all the intances, binding, submissions and custom functions that
- * as required.
+ * The model of this Fore scope. It holds all the intances, binding, submissions and custom
+ * functions that as required.
  *
- * The model is updatin by executing rebuild (as needed), recalculate and revalidate in turn.
+ * The model is updated by executing rebuild (as needed), recalculate and revalidate in turn.
  *
  * After the cycle is run all modelItems have updated their stete to reflect latest computations.
  *
@@ -38,8 +39,16 @@ export class FxModel extends HTMLElement {
     this.attachShadow({ mode: 'open' });
     this.computes = 0;
     this.fore = {};
+
+    /**
+     * @type {import('./fx-bind.js').FxBind[]}
+     */
+    this.binds = [];
   }
 
+  /**
+   * @returns {import('./fx-fore.js').FxFore}
+   */
   get formElement() {
     return this.parentElement;
   }
@@ -66,67 +75,98 @@ export class FxModel extends HTMLElement {
   }
 
   /**
+   * Get the correct fx-bind for this element. Assumes the refs of all binds are always downwards.
+   *
+   * @param {ChildNode | Attr} elementOrAttribute - the element or attribute to resolve
+   *
+   * @returns {import('./fx-bind.js').FxBind | null}
+   */
+  getBindForElement(elementOrAttribute) {
+    if (typeof elementOrAttribute !== 'object' || !('nodeType' in elementOrAttribute)) {
+      // We only do binds over nodes. Not JSON.
+      return null;
+    }
+    /**
+     * @type {import('./fx-bind.js').FxBind | FxModel}
+     */
+    let bindForParent;
+    const parent =
+      elementOrAttribute.nodeType === elementOrAttribute.ATTRIBUTE_NODE
+        ? elementOrAttribute.ownerElement
+        : elementOrAttribute.parentNode;
+    if (!parent?.parentElement) {
+      // The root. Search from here
+      bindForParent = this;
+    } else {
+      bindForParent = this.getBindForElement(parent);
+    }
+    if (!bindForParent) {
+      return null;
+    }
+
+    /**
+     * @type {import('./fx-bind.js').FxBind[]}
+     */
+    const childBinds = Array.from(bindForParent.children).filter(c => c.nodeName === 'FX-BIND');
+    for (const childBind of childBinds) {
+      const ref = childBind.ref;
+      const matches = evaluateXPathToNodes(ref, parent, childBind);
+      if (matches.includes(elementOrAttribute)) {
+        return childBind;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Lazily create a ModelItem for nodes not explicitly bound via fx-bind
    * @param {FxModel}           model        The model to create a model item for
    * @param {string}            ref          The XPath ref that led to this model item
    * @param {Node}              node         The node the XPath led to
-   * @param {ForeElementMixin}  formElement  The form element making this model. Used to resolve variables against
+   * @param {ForeElementMixin)}  formElement  The form element making this model. Used to resolve variables against
+   * @returns {ModelItem}
    */
   static lazyCreateModelItem(model, ref, node, formElement) {
-    // console.log('lazyCreateModelItem ', node);
     const instanceId = XPathUtil.resolveInstance(formElement, ref);
+    const fore = model.formElement;
 
-    if (model.parentNode.createNodes && (node === null || node === undefined)) {
-      // ### intializing ModelItem with default values (as there is no <fx-bind> matching for given ref)
-      const mi = new ModelItem(
-        undefined,
-        ref,
-        Fore.READONLY_DEFAULT,
-        false,
-        Fore.REQUIRED_DEFAULT,
-        Fore.CONSTRAINT_DEFAULT,
-        Fore.TYPE_DEFAULT,
-        null,
-        this,
-        instanceId,
-      );
-
-      // console.log('new ModelItem is instanceof ModelItem ', mi instanceof ModelItem);
+    if (fore?.createNodes && (node === null || node === undefined)) {
+      const mi = new ModelItem(undefined, ref, null, null, instanceId, fore);
+      mi.isSynthetic = true;
       model.registerModelItem(mi);
       return mi;
     }
-    let targetNode = {};
+
     if (node === null || node === undefined) return null;
-    if (node.nodeType === Node.TEXT_NODE) {
-      // const parent = node.parentNode;
-      // console.log('PARENT ', parent);
-      targetNode = node.parentNode;
-    } else {
-      targetNode = node;
+
+    let targetNode = node.nodeType === Node.TEXT_NODE ? node.parentNode : node;
+
+    let path = null;
+    if (targetNode?.nodeType) {
+      path = getPath(targetNode, instanceId);
     }
 
-    // const path = fx.evaluateXPath('path()',node);
-    let path;
-    if (node.nodeType) {
-      path = XPathUtil.getPath(node, instanceId);
-    } else {
-      path = null;
-      targetNode = node;
+    // Check if a ModelItem with the same path already exists
+    if (path) {
+      const existingModelItem = model.modelItems.find(mi => mi.path === path);
+      if (existingModelItem) {
+        // Update the node reference if needed
+        if (existingModelItem.node !== targetNode) {
+          existingModelItem.node = targetNode;
+        }
+        return existingModelItem;
+      }
     }
-    // const path = XPathUtil.getPath(node);
 
-    // ### intializing ModelItem with default values (as there is no <fx-bind> matching for given ref)
     const mi = new ModelItem(
       path,
       ref,
-      Fore.READONLY_DEFAULT,
-      Fore.RELEVANT_DEFAULT,
-      Fore.REQUIRED_DEFAULT,
-      Fore.CONSTRAINT_DEFAULT,
-      Fore.TYPE_DEFAULT,
       targetNode,
-      this,
+      model.getBindForElement(targetNode),
       instanceId,
+      fore,
     );
+    mi.isSynthetic = true;
 
     // console.log('new ModelItem is instanceof ModelItem ', mi instanceof ModelItem);
     model.registerModelItem(mi);
@@ -143,10 +183,7 @@ export class FxModel extends HTMLElement {
    *
    */
   async modelConstruct() {
-    console.info(
-      `%cdispatching model-construct for #${this.parentNode.id}`,
-      'background:lightblue; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
-    );
+    console.info(`📌 model-construct for #${this.parentNode.id}`);
 
     // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
     Fore.dispatch(this, 'model-construct', { model: this });
@@ -211,8 +248,25 @@ export class FxModel extends HTMLElement {
     // console.timeEnd('updateModel');
   }
 
+  /**
+   * (Recursively) remove the model item of a node.
+   * @param {Node} node - The node for which to remove the model item
+   */
+  removeModelItem(node) {
+    const index = this.modelItems.findIndex(mi => mi.node === node);
+    // The model item is not always there. Might be the case if a node is 'skipped' during rendering. All paths jump over it.
+    // It may still have descendants that can have model items
+    if (index !== -1) {
+      this.modelItems.splice(index, 1);
+    }
+
+    for (const child of Array.from(node.childNodes)) {
+      this.removeModelItem(child);
+    }
+  }
+
   rebuild() {
-    // console.log(`### <<<<< rebuild() '${this.fore.id}' >>>>>`);
+    console.log(`🔷   rebuild() '${this.fore.id}'`);
 
     this.mainGraph = new DepGraph(false); // do: should be moved down below binds.length check but causes errors in tests.
     this.modelItems = [];
@@ -229,12 +283,18 @@ export class FxModel extends HTMLElement {
       bind.init(this);
     });
 
+    if (this.formElement.createNodes) {
+      // initData should be running here as well: we just got a whole new instance that may be
+      // incomplete
+      this.formElement.initData();
+    }
+
     console.log('mainGraph', this.mainGraph);
     console.log('rebuild mainGraph calc order', this.mainGraph.overallOrder());
 
     // this.dispatchEvent(new CustomEvent('rebuild-done', {detail: {maingraph: this.mainGraph}}));
     Fore.dispatch(this, 'rebuild-done', { maingraph: this.mainGraph });
-    console.log('mainGraph', this.mainGraph);
+    // console.log('mainGraph', this.mainGraph);
   }
 
   /**
@@ -242,12 +302,12 @@ export class FxModel extends HTMLElement {
    *
    * todo: use 'changed' flag on modelItems to determine subgraph for recalculation. Flag already exists but is not used.
    */
-  recalculate() {
+  async recalculate() {
     if (!this.mainGraph) {
       return;
     }
 
-    // console.log(`### <<<<< recalculate() '${this.fore.id}' >>>>>`);
+    console.log(`🔷🔷 recalculate() '${this.fore.id}'`);
 
     // console.log('changed nodes ', this.changed);
     this.computes = 0;
@@ -295,8 +355,10 @@ export class FxModel extends HTMLElement {
           this.compute(node, path);
         }
       });
+      /*
       const toRefresh = [...this.changed];
       this.formElement.toRefresh = toRefresh;
+*/
       this.changed = [];
       Fore.dispatch(this, 'recalculate-done', { graph: this.subgraph, computes: this.computes });
     } else {
@@ -374,11 +436,24 @@ export class FxModel extends HTMLElement {
           const compute = evaluateXPath(expr, modelItem.node, this);
           modelItem.value = compute;
           modelItem.readonly = true; // calculated nodes are always readonly
+          modelItem.notify(); // Notify observers directly
         } else if (property !== 'constraint' && property !== 'type') {
+          /*
+          console.log(
+            'recalculating path ',
+            path,
+            ' Expr:',
+            expr,
+            'modelitem value',
+            modelItem.node.textContent,
+          );
+*/
           // ### re-compute the Boolean value of all facets expect 'constraint' and 'type' which are handled in revalidate()
           if (expr) {
             const compute = evaluateXPathToBoolean(expr, modelItem.node, this);
             modelItem[property] = compute;
+            // modelItem.notify(); // Notify observers directly
+            this.fore.addToBatchedNotifications(modelItem);
             /*
                                     console.log(
                                       `recalculating path ${path} - Expr:'${expr}' computed`,
@@ -411,7 +486,7 @@ export class FxModel extends HTMLElement {
   revalidate() {
     if (this.modelItems.length === 0) return true;
 
-    // console.log(`### <<<<< revalidate() '${this.fore.id}' >>>>>`);
+    console.log(`🔷🔷🔷 revalidate() '${this.fore.id}'`);
 
     // reset submission validation
     // this.parentNode.classList.remove('submit-validation-failed')
@@ -430,7 +505,8 @@ export class FxModel extends HTMLElement {
             const compute = evaluateXPathToBoolean(constraint, modelItem.node, this);
             // console.log('modelItem validity computed: ', compute);
             modelItem.constraint = compute;
-            this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
+            // this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
+            modelItem.notify(); // Notify observers directly
             if (!compute) {
               console.log('validation failed on modelitem ', modelItem);
               valid = false;
@@ -443,8 +519,9 @@ export class FxModel extends HTMLElement {
             const compute = evaluateXPathToBoolean(required, modelItem.node, this);
             // console.log('modelItem required computed: ', compute);
             modelItem.required = compute;
-            this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
-            if (!modelItem.node.textContent) {
+            // this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
+            modelItem.notify(); // Notify observers directly
+            if (modelItem.required && !modelItem.node.textContent) {
               /*
               console.log(
                 'node is required but has no value ',
@@ -468,6 +545,15 @@ export class FxModel extends HTMLElement {
       }
     });
     console.log('modelItems after revalidate: ', this.modelItems);
+    console.log('changed after revalidate: ', this.changed);
+    console.log(
+      'changed after revalidate changed: ',
+      Array.from(this.parentNode._localNamesWithChanges),
+    );
+    console.log(
+      'changed after revalidate batchedNotifications: ',
+      Array.from(this.parentNode.batchedNotifications),
+    );
     return valid;
   }
 
@@ -478,12 +564,12 @@ export class FxModel extends HTMLElement {
   }
 
   /**
-   *
-   * @param {Node} node
-   * @returns {ModelItem}
+   * Find a ModelItem by exact node or path
+   * @param {Node|string} nodeOrPath
+   * @returns {ModelItem|null}
    */
-  getModelItem(node) {
-    return this.modelItems.find(m => m.node === node);
+  getModelItem(nodeOrPath) {
+    return this.modelItems.find(mi => mi.node === nodeOrPath || mi.path === nodeOrPath) || null;
   }
 
   /**
@@ -513,6 +599,9 @@ export class FxModel extends HTMLElement {
     return this.instances[0].getInstanceData();
   }
 
+  /**
+   * @returns {import('./fx-instance.js').FxInstance}
+   */
   getInstance(id) {
     // console.log('getInstance ', id);
     // console.log('instances ', this.instances);
@@ -526,10 +615,6 @@ export class FxModel extends HTMLElement {
     if (!found) {
       const instArray = Array.from(this.instances);
       found = instArray.find(inst => inst.id === id);
-      const parentFore =
-        this.fore.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
-          ? this.fore.parentNode.host.closest('fx-fore')
-          : this.fore.parentNode.closest('fx-fore');
     }
     // ### lookup in parent Fore if present
     if (!found) {
@@ -545,6 +630,10 @@ export class FxModel extends HTMLElement {
         found = shared.find(found => found.id === id);
       }
     }
+    // search for shared instances in the whole document
+    if (!found) {
+      found = document.querySelector(`fx-instance[id="${id}"][shared]`);
+    }
     if (found) {
       return found;
     }

package/src/fx-submission.js

@@ -83,10 +83,7 @@ export class FxSubmission extends ForeElementMixin {
   }
 
   async _submit() {
-    console.info(
-        `%csubmitting #${this.id}`,
-        'background:yellow; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
-    );
+    console.info(`🚀 #${this.id}`);
 
     this.evalInContext();
     const model = this.getModel();
@@ -100,7 +97,7 @@ export class FxSubmission extends ForeElementMixin {
         this.getOwnerForm().classList.add('submit-validation-failed');
         // ### allow alerts to pop up
         // this.dispatch('submit-error', {});
-        Fore.dispatch(this, 'submit-error', {});
+        Fore.dispatch(this, 'submit-error', { status: 0, message: 'validation failed' });
         this.getModel().parentNode.refresh(true);
         return;
       }
@@ -166,8 +163,12 @@ export class FxSubmission extends ForeElementMixin {
 
     // if (resolvedUrl === '#echo') {
     if (resolvedUrl.startsWith('#echo')) {
-      const data = this._parse(serialized, instance);
-      this._handleResponse(data);
+      if (this.replace === 'download') {
+        this._handleResponse(serialized, resolvedUrl, 'application/xml');
+      } else {
+        const data = this._parse(serialized, instance);
+        this._handleResponse(data, resolvedUrl, 'application/xml');
+      }
       // this.dispatch('submit-done', {});
       console.log('### <<<<< submit-done >>>>>');
       Fore.dispatch(this, 'submit-done', {});
@@ -183,6 +184,7 @@ export class FxSubmission extends ForeElementMixin {
         const serialized = localStorage.getItem(key);
         if (!serialized) {
           Fore.dispatch(this, 'submit-error', {
+            status: 400,
             message: `Error reading key ${key} from localstorage`,
           });
           this.parameters.clear();
@@ -237,22 +239,29 @@ export class FxSubmission extends ForeElementMixin {
       if (!response.ok || response.status > 400) {
         // this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
         console.info(
-            `%csubmit-error #${this.id}`,
-            'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+          `%csubmit-error #${this.id}`,
+          'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
         );
 
-        Fore.dispatch(this, 'submit-error', { message: `Error while submitting ${this.id}` });
+        Fore.dispatch(this, 'submit-error', {
+          status: response.status,
+          message: `Error during submit ${this.id}`,
+        });
         return;
       }
 
-      const contentType = response.headers.get('content-type').toLowerCase();
+      const contentType = response.headers
+        .get('content-type')
+        .split(';')[0]
+        .trim()
+        .toLowerCase();
       if (contentType.startsWith('text/')) {
         const text = await response.text();
         this._handleResponse(text, resolvedUrl, contentType);
-      } else if (contentType.startsWith('application/json')) {
+      } else if (contentType.endsWith('/json') || contentType.endsWith('+json')) {
         const json = await response.json();
         this._handleResponse(json, resolvedUrl, contentType);
-      } else if (contentType.startsWith('application/xml')) {
+      } else if (contentType.endsWith('/xml') || contentType.endsWith('+xml')) {
         const text = await response.text();
         const xml = new DOMParser().parseFromString(text, 'application/xml');
         this._handleResponse(xml, resolvedUrl, contentType);
@@ -264,15 +273,14 @@ export class FxSubmission extends ForeElementMixin {
       // this.dispatch('submit-done', {});
       // console.log(`### <<<<< ${this.id} submit-done >>>>>`);
       Fore.dispatch(this, 'submit-done', {});
-/*
+      /*
       console.info(
           `%csubmit-done #${this.id}`,
           'background:green; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
       );
 */
-
     } catch (error) {
-      Fore.dispatch(this, 'submit-error', { error: error.message });
+      Fore.dispatch(this, 'submit-error', { status: 500, error: error.message });
     } finally {
       this.parameters.clear();
       const download = document.querySelector('[download]');
@@ -372,49 +380,30 @@ export class FxSubmission extends ForeElementMixin {
 
     const targetInstance = this._getTargetInstance();
 
-    /*
-        if(this.replace === 'merge'){
-            if(targetInstance.type !== 'xml') {
-                Fore.dispatch(this, "warn", {'message': 'merging of instances only work for type xml'});
-            }
-            if (targetInstance && targetInstance.type === 'xml') {
-                targetInstance.partialInstance = data;
-                // const resultDoc = new DOMParser(`${data.nodeName}`, 'application/xml');
-                // console.log('resultDoc', resultDoc)
-                const merged = Fore.combine(targetInstance.instanceData.firstElementChild, data.firstElementChild, this,null);
-                console.log('merged', merged);
-
-                targetInstance.instanceData = merged;
-                console.log('merging partial instance',targetInstance.partialInstance)
-                this.model.updateModel();
-                this.getOwnerForm().refresh(true);
-            }
-        }
-*/
-
     if (this.replace === 'instance') {
       if (targetInstance) {
         if (this.targetref) {
-
           const [theTarget] = evaluateXPath(
-              this.targetref,
-              targetInstance.instanceData.firstElementChild,
-              this,
+            this.targetref,
+            targetInstance.instanceData.firstElementChild,
+            this,
           );
           console.log('theTarget', theTarget);
-          if(this.responseMediatype === 'application/xml' || this.responseMediatype === 'text/html'){
+          if (
+            this.responseMediatype === 'application/xml' ||
+            this.responseMediatype === 'text/html'
+          ) {
             const clone = data.firstElementChild;
             const parent = theTarget.parentNode;
             parent.replaceChild(clone, theTarget);
             console.log('finally ', parent);
           }
-          if(this.responseMediatype.startsWith('text/')){
+          if (this.responseMediatype.startsWith('text/')) {
             theTarget.textContent = data;
           }
-          if(this.responseMediatype === 'application/json'){
-            console.warn('targetref is not supported for application/json responses')
+          if (this.responseMediatype === 'application/json') {
+            console.warn('targetref is not supported for application/json responses');
           }
-
         } else if (this.into) {
           const [theTarget] = evaluateXPath(
             this.into,
@@ -446,12 +435,16 @@ export class FxSubmission extends ForeElementMixin {
 
     if (this.replace === 'download') {
       const target = this._getProperty('target');
+      if (!target) {
+        throw new Error(`${this.id} needs to specify "target" attribute`);
+      }
       const downloadLink = document.createElement('a');
       downloadLink.setAttribute('download', target);
-      downloadLink.setAttribute('href', `data:${contentType},${data}`);
+      downloadLink.setAttribute('href', `data:${contentType},${encodeURIComponent(data)}`);
       document.body.appendChild(downloadLink);
       downloadLink.click();
     }
+
     if (this.replace === 'all') {
       const target = this._getProperty('target');
       if (target && target === '_blank') {
@@ -471,11 +464,10 @@ export class FxSubmission extends ForeElementMixin {
       const target = this._getProperty('target');
       const targetNode = document.querySelector(target);
       if (targetNode) {
-
-        if(contentType.startsWith('text/html')){
+        if (contentType.startsWith('text/html')) {
           targetNode.innerHTML = data;
         }
-        if(this.responseMediatype.startsWith('image/svg')){
+        if (this.responseMediatype.startsWith('image/svg')) {
           const parser = new DOMParser();
           const svgDoc = parser.parseFromString(data, 'image/svg+xml');
 
@@ -493,10 +485,11 @@ export class FxSubmission extends ForeElementMixin {
     }
   }
 
+  /*
   _handleError() {
     // this.dispatch('submit-error', {});
     Fore.dispatch(this, 'submit-error', {});
-    /*
+    /!*
                     console.log('ERRRORRRRR');
                     this.dispatchEvent(
                         new CustomEvent('submit-error', {
@@ -505,8 +498,9 @@ export class FxSubmission extends ForeElementMixin {
                             detail: {},
                         }),
                     );
-            */
+            *!/
   }
+*/
 
   /*
     mergeNodes(node1, node2) {

package/src/fx-var.js

@@ -45,6 +45,11 @@ export class FxVariable extends ForeElementMixin {
     // Clone the preceding variables to make sure we are not going to get access to variables we
     // should not get access to
     this.inScopeVariables = new Map(inScopeVariables);
+
+    // Set precedingVariables based on inScopeVariables
+    this.precedingVariables = Array.from(inScopeVariables.entries()).map(([name, variable]) => {
+      return { name, value: variable.value };
+    });
   }
 }
 if (!customElements.get('fx-var')) {