wip: feel variable context

packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js

@@ -34,7 +34,7 @@ export default class RepeatRenderManager {
 
   Repeater(props) {
 
-    const { RowsRenderer, indexes, useSharedState, ...restProps } = props;
+    const { RowsRenderer, indexes, useSharedState, variableContext: parentVariableContext, ...restProps } = props;
 
     const [ sharedRepeatState ] = useSharedState;
 
@@ -63,10 +63,15 @@ export default class RepeatRenderManager {
 
     return (
       <>
-        {displayValues.map((_, index) => {
+        {displayValues.map((value, index) => {
           const elementProps = {
             ...restProps,
-            indexes: { ...(indexes || {}), [ repeaterField.id ]: index }
+            indexes: { ...(indexes || {}), [ repeaterField.id ]: index },
+            variableContext: {
+              this: value,
+              parent: parentVariableContext,
+              i: [ ...parentVariableContext.i , index ]
+            }
           };
 
           return <div class="fjs-repeat-row-container">

packages/form-js-viewer/src/render/components/FormComponent.js

@@ -3,13 +3,15 @@ import FormField from './FormField';
 import PoweredBy from './PoweredBy';
 
 import useService from '../hooks/useService';
+import { useMemo } from 'preact/hooks';
+import { useFilteredFormData } from '../hooks';
 
 const noop = () => {};
 
 export default function FormComponent(props) {
   const form = useService('form');
 
-  const { schema, properties } = form._getState();
+  const { schema, properties, data } = form._getState();
 
   const { ariaLabel } = properties;
 
@@ -31,6 +33,14 @@ export default function FormComponent(props) {
     onReset();
   };
 
+  const filteredFormData = useFilteredFormData();
+
+  const variableContext = useMemo(() => ({
+    parent: null,
+    this: filteredFormData,
+    i: []
+  }), [ filteredFormData ]);
+
   return (
     <form
       class="fjs-form"
@@ -41,6 +51,7 @@ export default function FormComponent(props) {
     >
       <FormField
         field={ schema }
+        variableContext={ variableContext }
         onChange={ onChange }
       />
 

packages/form-js-viewer/src/render/components/Label.js

@@ -6,11 +6,12 @@ export default function Label(props) {
   const {
     id,
     label,
+    variableContext,
     collapseOnEmpty = true,
     required = false
   } = props;
 
-  const evaluatedLabel = useSingleLineTemplateEvaluation(label || '', { debug: true });
+  const evaluatedLabel = useSingleLineTemplateEvaluation(label || '', { debug: true, variableContext });
 
   return (
     <label for={ id } class={ classNames('fjs-form-field-label', { 'fjs-incollapsible-label': !collapseOnEmpty }, props['class']) }>

packages/form-js-viewer/src/render/components/form-fields/Checkbox.js

@@ -20,6 +20,7 @@ export default function Checkbox(props) {
     disabled,
     errors = [],
     errorMessageId,
+    variableContext,
     onBlur,
     field,
     readonly,
@@ -47,6 +48,7 @@ export default function Checkbox(props) {
   return <div class={ classNames(formFieldClasses(type, { errors, disabled, readonly }), { 'fjs-checked': value }) }>
     <Label
       id={ prefixId(id, formId) }
+      variableContext={ variableContext }
       label={ label }
       required={ required }>
       <input

packages/form-js-viewer/src/render/hooks/useExpressionEvaluation.js

@@ -5,22 +5,49 @@ import { useMemo } from 'preact/hooks';
 /**
  * Evaluate a string reactively based on the expressionLanguage and form data.
  * If the string is not an expression, it is returned as is.
- * Memoised to minimize re-renders.
- *
- * @param {string} value
+ * The function is memoized to minimize re-renders.
  *
+ * @param {string} value - The string to evaluate.
+ * @param {Object} options - Additional options, such as variableContext.
+ * @returns {any} - Evaluated value or the original value if not an expression.
  */
-export default function useExpressionEvaluation(value) {
+export default function useExpressionEvaluation(value, options = {}) {
+
+  const { variableContext } = options;
   const formData = useFilteredFormData();
   const expressionLanguage = useService('expressionLanguage');
 
-  return useMemo(() => {
+  // Create the full form data, injecting variableContext if present
+  const fullFormData = useMemo(() => {
+    if (variableContext) {
+      return {
+        ...variableContext,
+        formData,
+        ..._buildFallbackAccessors(variableContext)
+      };
+    }
+    return formData;
+  }, [ formData, variableContext ]);
 
+  return useMemo(() => {
     if (expressionLanguage && expressionLanguage.isExpression(value)) {
-      return expressionLanguage.evaluate(value, formData);
+      return expressionLanguage.evaluate(value, fullFormData);
     }
-
     return value;
-
-  }, [ expressionLanguage, formData, value ]);
+  }, [ expressionLanguage, fullFormData, value ]);
 }
+
+/**
+ * Build fallback accessors by transforming object keys.
+ * Adds underscores around each key.
+ *
+ * @param {Object} obj - The original object.
+ * @returns {Object} - New object with transformed keys.
+ */
+const _buildFallbackAccessors = (obj) => {
+  const newObj = {};
+  for (const [ key, value ] of Object.entries(obj)) {
+    newObj[`_${key}_`] = value;
+  }
+  return newObj;
+};

packages/form-js-viewer/src/render/hooks/useSingleLineTemplateEvaluation.js

@@ -11,6 +11,7 @@ import { useMemo } from 'preact/hooks';
  * @param {boolean} [options.debug = false]
  * @param {boolean} [options.strict = false]
  * @param {Function} [options.buildDebugString]
+ * @param {Object} [options.variableContext]
  *
  */
 export default function useSingleLineTemplateEvaluation(value, options = {}) {

packages/form-js-viewer/src/render/hooks/useTemplateEvaluation.js

@@ -11,19 +11,37 @@ import { useMemo } from 'preact/hooks';
  * @param {boolean} [options.debug = false]
  * @param {boolean} [options.strict = false]
  * @param {Function} [options.buildDebugString]
+ * @param {Object} [options.variableContext]
  *
  */
-export default function useTemplateEvaluation(value, options) {
+export default function useTemplateEvaluation(value, options = {}) {
   const filteredData = useFilteredFormData();
   const templating = useService('templating');
+  const { variableContext } = options;
 
-  return useMemo(() => {
+  const fullData = useMemo(() => {
+    if (variableContext) {
+      return {
+        ...variableContext,
+        ...filteredData,
+        ..._buildFallbackAccessors(variableContext)
+      };
+    }
+    return filteredData;
+  }, [ filteredData, variableContext ]);
 
+  return useMemo(() => {
     if (templating && templating.isTemplate(value)) {
-      return templating.evaluate(value, filteredData, options);
+      return templating.evaluate(value, fullData, options);
     }
-
     return value;
-
-  }, [ filteredData, templating, value, options ]);
+  }, [ fullData, templating, value, options ]);
 }
+
+const _buildFallbackAccessors = (obj) => {
+  const newObj = {};
+  for (const [ key, value ] of Object.entries(obj)) {
+    newObj[`_${key}_`] = value;
+  }
+  return newObj;
+};