feat(viewer): retrieve variables mentioned in expressions

Author: Niklas Kiefer

packages/form-js-viewer/src/util/feel.js

@@ -1,4 +1,4 @@
-import { parseUnaryTests } from 'feelin';
+import { parseExpressions, parseUnaryTests } from 'feelin';
 
 /**
  * Retrieve variable names from given FEEL unary test.
@@ -20,5 +20,28 @@ export function getVariableNames(unaryTest) {
 
   } while (cursor.next());
 
+  return Array.from(variables);
+}
+
+/**
+ * Retrieve variable names from given FEEL expression.
+ *
+ * @param {string} expression
+ * @returns {string[]}
+ */
+export function getExpressionVariableNames(expression) {
+  const tree = parseExpressions(expression);
+  const cursor = tree.cursor();
+
+  const variables = new Set();
+  do {
+    const node = cursor.node;
+
+    if (node.type.name === 'VariableName') {
+      variables.add(expression.slice(node.from, node.to));
+    }
+
+  } while (cursor.next());
+
   return Array.from(variables);
 }

packages/form-js-viewer/src/util/index.js

@@ -1,8 +1,15 @@
-import { getVariableNames } from './feel';
+import { isString } from 'min-dash';
+
+import { getExpressionVariableNames, getVariableNames } from './feel';
 
 export * from './injector';
 export * from './form';
 
+const EXPRESSION_PROPERTIES = [
+  'alt',
+  'source'
+];
+
 export function findErrors(errors, path) {
   return errors[ pathStringify(path) ];
 }
@@ -106,9 +113,28 @@ export function getSchemaVariables(schema) {
       variables = [ ...variables, ...conditionVariables ];
     }
 
+    EXPRESSION_PROPERTIES.forEach((prop) => {
+      const property = component[prop];
+
+      if (property && isExpression(property)) {
+
+        // cut off initial '='
+        const expressionVariables = getExpressionVariableNames(property.slice(1));
+
+        variables = [ ...variables, ...expressionVariables ];
+      }
+    });
+
     return variables;
   }, []);
 
   // remove duplicates
   return Array.from(new Set(variables));
+}
+
+
+// helper ///////////////
+
+function isExpression(value) {
+  return isString(value) && value.startsWith('=');
 }

packages/form-js-viewer/test/spec/expression-external-variable.json

@@ -0,0 +1,22 @@
+{
+  "components": [
+    {
+      "label": "An image",
+      "source": "=logo",
+      "type": "image"
+    },
+    {
+      "label": "An image with alt text",
+      "alt": "=alt",
+      "type": "image"
+    },
+    {
+      "label": "Another image",
+      "alt": "This is just an image",
+      "type": "image"
+    }
+  ],
+  "type": "default",
+  "id": "Form",
+  "schemaVersion": 6
+}

packages/form-js-viewer/test/spec/util/GetSchemaVariables.spec.js

@@ -5,6 +5,7 @@ import {
 import schema from '../form.json';
 import dynamicSchema from '../dynamic.json';
 import conditionalSchema from '../condition-external-variable.json';
+import expressionSchema from '../expression-external-variable.json';
 
 describe('util/getSchemaVariables', () => {
 
@@ -33,4 +34,20 @@ describe('util/getSchemaVariables', () => {
     expect(variables).to.eql([ 'amount', 'externalVariable' ]);
   });
 
+
+  it('should include variables in expressions', () => {
+
+    const variables = getSchemaVariables(expressionSchema);
+
+    expect(variables).to.eql([ 'logo', 'alt' ]);
+  });
+
+
+  it('should NOT include variables - no expression', () => {
+
+    const variables = getSchemaVariables(expressionSchema);
+
+    expect(variables).to.not.have.members([ 'This', 'is', 'just', 'an', 'image' ]);
+  });
+
 });