From 71c7e21099a5ff7ece3fd8a211b2212e0f52d45a Mon Sep 17 00:00:00 2001
From: Valentin Serra <valentin.serra@camunda.com>
Date: Thu, 25 Apr 2024 10:36:02 +0200
Subject: [PATCH] wip

---
 packages/form-js-viewer/src/Form.js           | 18 ++-----
 .../expressionLanguage/ConditionChecker.js    |  8 ++-
 .../repeatRender/RepeatRenderManager.js       | 36 ++++++++------
 .../src/render/components/FormComponent.js    | 17 +++----
 .../src/render/components/FormField.js        | 49 ++++++++++---------
 .../render/context/ExpressionContextInfo.js   |  6 +++
 .../render/context/LocalExpressionContext.js  |  8 ---
 .../src/render/context/index.js               |  2 +-
 .../src/render/hooks/useCondition.js          |  4 +-
 .../render/hooks/useExpressionEvaluation.js   |  4 +-
 .../src/render/hooks/useReadonly.js           |  4 +-
 .../src/render/hooks/useTemplateEvaluation.js |  4 +-
 .../form-js-viewer/src/util/expressions.js    | 44 +++++++++++++++--
 .../spec/render/components/helper/index.js    | 12 ++---
 14 files changed, 124 insertions(+), 92 deletions(-)
 create mode 100644 packages/form-js-viewer/src/render/context/ExpressionContextInfo.js
 delete mode 100644 packages/form-js-viewer/src/render/context/LocalExpressionContext.js

diff --git a/packages/form-js-viewer/src/Form.js b/packages/form-js-viewer/src/Form.js
index 07d7572c4..096bc1a42 100644
--- a/packages/form-js-viewer/src/Form.js
+++ b/packages/form-js-viewer/src/Form.js
@@ -330,24 +330,16 @@ export class Form {
   _update(update) {
     const { fieldInstance, value } = update;
 
-    const { id, valuePath, indexes } = fieldInstance;
+    const { valuePath } = fieldInstance;
 
-    const { data, errors } = this._getState();
+    const { data: _data } = this._getState();
 
-    const validator = this.get('validator');
+    const data = set(_data, valuePath, value);
+    this._setState({ data: clone(data) });
 
-    const fieldErrors = validator.validateFieldInstance(fieldInstance, value);
-
-    set(data, valuePath, value);
-
-    set(errors, [id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
+    this.validate();
 
     this._emit('field.updated', update);
-
-    this._setState({
-      data: clone(data),
-      errors: clone(errors),
-    });
   }
 
   /**
diff --git a/packages/form-js-viewer/src/features/expressionLanguage/ConditionChecker.js b/packages/form-js-viewer/src/features/expressionLanguage/ConditionChecker.js
index 04a184f61..263313ea0 100644
--- a/packages/form-js-viewer/src/features/expressionLanguage/ConditionChecker.js
+++ b/packages/form-js-viewer/src/features/expressionLanguage/ConditionChecker.js
@@ -1,6 +1,6 @@
 import { unaryTest } from 'feelin';
 import { get, isString, set, values, isObject } from 'min-dash';
-import { buildExpressionContext, clone } from '../../util';
+import { wrapExpressionContext, clone } from '../../util';
 
 /**
  * @typedef {object} Condition
@@ -35,7 +35,7 @@ export class ConditionChecker {
         const { conditional, components, id } = field;
 
         // build the expression context in the right format
-        const localExpressionContext = buildExpressionContext({
+        const expressionContext = wrapExpressionContext({
           this: scopeData,
           data: contextData,
           i: expressionIndexes,
@@ -43,9 +43,7 @@ export class ConditionChecker {
         });
 
         context.isHidden =
-          startHidden ||
-          context.isHidden ||
-          (conditional && this._checkHideCondition(conditional, localExpressionContext));
+          startHidden || context.isHidden || (conditional && this._checkHideCondition(conditional, expressionContext));
 
         // if a field is repeatable and visible, we need to implement custom recursion on its children
         if (isRepeatable && !context.isHidden) {
diff --git a/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js b/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
index 3211ab0a3..b4f7e0518 100644
--- a/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
+++ b/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
@@ -3,14 +3,13 @@
 
 import { get } from 'min-dash';
 import { useContext, useMemo, useRef } from 'preact/hooks';
-import { LocalExpressionContext } from '../../render/context/LocalExpressionContext';
+import { ExpressionContextInfo } from '../../render/context/ExpressionContextInfo';
 
 import ExpandSvg from '../../render/components/form-fields/icons/Expand.svg';
 import CollapseSvg from '../../render/components/form-fields/icons/Collapse.svg';
 import AddSvg from '../../render/components/form-fields/icons/Add.svg';
 import DeleteSvg from '../../render/components/form-fields/icons/Delete.svg';
 
-import { buildExpressionContext } from '../../util';
 import { useScrollIntoView } from '../../render/hooks';
 import classNames from 'classnames';
 
@@ -48,8 +47,8 @@ export class RepeatRenderManager {
     const { data } = this._form._getState();
 
     const repeaterField = props.field;
-    const dataPath = this._pathRegistry.getValuePath(repeaterField, { indexes });
-    const values = get(data, dataPath) || [];
+    const valuePath = this._pathRegistry.getValuePath(repeaterField, { indexes });
+    const values = get(data, valuePath) || [];
 
     const nonCollapsedItems = this._getNonCollapsedItems(repeaterField);
     const collapseEnabled = !repeaterField.disableCollapse && values.length > nonCollapsedItems;
@@ -71,7 +70,7 @@ export class RepeatRenderManager {
       });
     };
 
-    const parentExpressionContextInfo = useContext(LocalExpressionContext);
+    const parentExpressionContextInfo = useContext(ExpressionContextInfo);
 
     return (
       <>
@@ -81,6 +80,7 @@ export class RepeatRenderManager {
             itemIndex={itemIndex}
             itemValue={itemValue}
             parentExpressionContextInfo={parentExpressionContextInfo}
+            parentValuePath={valuePath}
             repeaterField={repeaterField}
             RowsRenderer={RowsRenderer}
             indexes={indexes}
@@ -196,6 +196,7 @@ export class RepeatRenderManager {
  * @param {number} props.itemIndex
  * @param {Object} props.itemValue
  * @param {Object} props.parentExpressionContextInfo
+ * @param {string} props.parentValuePath
  * @param {Object} props.repeaterField
  * @param {Function} props.RowsRenderer
  * @param {Object} props.indexes
@@ -208,6 +209,7 @@ const RepetitionScaffold = (props) => {
     itemIndex,
     itemValue,
     parentExpressionContextInfo,
+    parentValuePath,
     repeaterField,
     RowsRenderer,
     indexes,
@@ -224,26 +226,30 @@ const RepetitionScaffold = (props) => {
     [itemIndex, indexes, repeaterField.id, restProps],
   );
 
-  const localExpressionContextInfo = useMemo(
+  const expressionContextInfo = useMemo(
     () => ({
-      data: parentExpressionContextInfo.data,
-      this: itemValue,
-      parent: buildExpressionContext(parentExpressionContextInfo),
-      i: [...parentExpressionContextInfo.i, itemIndex + 1],
+      ...parentExpressionContextInfo,
+      segments: [
+        ...parentExpressionContextInfo.segments,
+        {
+          path: parentValuePath,
+          index: itemIndex,
+        },
+      ],
     }),
-    [itemIndex, parentExpressionContextInfo, itemValue],
+    [parentExpressionContextInfo, parentValuePath, itemIndex],
   );
 
   return !showRemove ? (
-    <LocalExpressionContext.Provider value={localExpressionContextInfo}>
+    <ExpressionContextInfo.Provider value={expressionContextInfo}>
       <RowsRenderer {...elementProps} />
-    </LocalExpressionContext.Provider>
+    </ExpressionContextInfo.Provider>
   ) : (
     <div class="fjs-repeat-row-container">
       <div class="fjs-repeat-row-rows">
-        <LocalExpressionContext.Provider value={localExpressionContextInfo}>
+        <ExpressionContextInfo.Provider value={expressionContextInfo}>
           <RowsRenderer {...elementProps} />
-        </LocalExpressionContext.Provider>
+        </ExpressionContextInfo.Provider>
       </div>
       <button
         type="button"
diff --git a/packages/form-js-viewer/src/render/components/FormComponent.js b/packages/form-js-viewer/src/render/components/FormComponent.js
index bacf776ff..6a0d63b00 100644
--- a/packages/form-js-viewer/src/render/components/FormComponent.js
+++ b/packages/form-js-viewer/src/render/components/FormComponent.js
@@ -1,9 +1,9 @@
 import { FormField } from './FormField';
 import { PoweredBy } from './PoweredBy';
-import { LocalExpressionContext } from '../context/LocalExpressionContext';
+import { ExpressionContextInfo } from '../context/ExpressionContextInfo';
 
 import { useMemo } from 'preact/hooks';
-import { useFilteredFormData, useService } from '../hooks';
+import { useDeepCompareMemoize, useFilteredFormData, useService } from '../hooks';
 
 const noop = () => {};
 
@@ -28,23 +28,22 @@ export function FormComponent(props) {
     onReset();
   };
 
-  const filteredFormData = useFilteredFormData();
+  const _filteredFormData = useFilteredFormData();
+  const filteredFormData = useDeepCompareMemoize(_filteredFormData);
 
-  const localExpressionContext = useMemo(
+  const expressionContextInfo = useMemo(
     () => ({
       data: filteredFormData,
-      parent: null,
-      this: filteredFormData,
-      i: [],
+      segments: [],
     }),
     [filteredFormData],
   );
 
   return (
     <form class="fjs-form" onSubmit={handleSubmit} onReset={handleReset} aria-label={ariaLabel} noValidate>
-      <LocalExpressionContext.Provider value={localExpressionContext}>
+      <ExpressionContextInfo.Provider value={expressionContextInfo}>
         <FormField field={schema} onChange={onChange} />
-      </LocalExpressionContext.Provider>
+      </ExpressionContextInfo.Provider>
       <PoweredBy />
     </form>
   );
diff --git a/packages/form-js-viewer/src/render/components/FormField.js b/packages/form-js-viewer/src/render/components/FormField.js
index ca9c6be94..a9b8fc051 100644
--- a/packages/form-js-viewer/src/render/components/FormField.js
+++ b/packages/form-js-viewer/src/render/components/FormField.js
@@ -3,7 +3,7 @@ import isEqual from 'lodash/isEqual';
 
 import { get } from 'min-dash';
 
-import { FormContext, FormRenderContext, LocalExpressionContext } from '../context';
+import { FormContext, FormRenderContext, ExpressionContextInfo } from '../context';
 
 import { useCondition, useReadonly, useService } from '../hooks';
 
@@ -27,9 +27,7 @@ export function FormField(props) {
 
   const { formId } = useContext(FormContext);
 
-  // track whether we should trigger initial validation on certain actions, e.g. field blur
-  // disabled straight away, if viewerCommands are not available
-  const [initialValidationTrigger, setInitialValidationTrigger] = useState(!!viewerCommands);
+  const [validationGrace, setValidationGrace] = useState(!!viewerCommands);
 
   const FormFieldComponent = formFields.get(field.type);
 
@@ -39,7 +37,7 @@ export function FormField(props) {
 
   const fieldConfig = FormFieldComponent.config;
 
-  const localExpressionContext = useContext(LocalExpressionContext);
+  const expressionContextInfo = useContext(ExpressionContextInfo);
   const valuePath = useMemo(() => pathRegistry.getValuePath(field, { indexes }), [field, indexes, pathRegistry]);
 
   const initialValue = useMemo(() => get(initialData, valuePath), [initialData, valuePath]);
@@ -56,11 +54,11 @@ export function FormField(props) {
   const fieldInstance = useMemo(
     () => ({
       id: field.id,
-      expressionContextInfo: localExpressionContext,
+      expressionContextInfo,
       valuePath,
       indexes,
     }),
-    [field.id, valuePath, localExpressionContext, indexes],
+    [field.id, valuePath, expressionContextInfo, indexes],
   );
 
   // register form field instance
@@ -80,38 +78,36 @@ export function FormField(props) {
       return;
     }
 
-    const resetValidation = () => {
-      setInitialValidationTrigger(true);
+    const resetValidationGrace = () => {
+      setValidationGrace(true);
     };
 
-    eventBus.on('import.done', resetValidation);
-    eventBus.on('reset', resetValidation);
+    eventBus.on('import.done', resetValidationGrace);
+    eventBus.on('reset', resetValidationGrace);
 
     return () => {
-      eventBus.off('import.done', resetValidation);
-      eventBus.off('reset', resetValidation);
+      eventBus.off('import.done', resetValidationGrace);
+      eventBus.off('reset', resetValidationGrace);
     };
   }, [eventBus, viewerCommands]);
 
   useEffect(() => {
     const hasInitialValue = initialValue && !isEqual(initialValue, []);
 
-    if (initialValidationTrigger && hasInitialValue) {
-      setInitialValidationTrigger(false);
+    if (validationGrace && hasInitialValue) {
+      setValidationGrace(false);
       viewerCommands.updateFieldInstanceValidation(fieldInstance, initialValue);
     }
-  }, [fieldInstance, initialValidationTrigger, initialValue, viewerCommands]);
+  }, [fieldInstance, validationGrace, initialValue, viewerCommands]);
 
   const onBlur = useCallback(() => {
     const value = get(data, valuePath);
-
-    if (initialValidationTrigger) {
-      setInitialValidationTrigger(false);
+    if (validationGrace) {
+      setValidationGrace(false);
       viewerCommands.updateFieldInstanceValidation(fieldInstance, value);
     }
-
     eventBus.fire('formField.blur', { formField: field });
-  }, [data, eventBus, field, fieldInstance, initialValidationTrigger, valuePath, viewerCommands]);
+  }, [data, eventBus, field, fieldInstance, validationGrace, valuePath, viewerCommands]);
 
   const onFocus = useCallback(() => {
     eventBus.fire('formField.focus', { formField: field });
@@ -119,18 +115,25 @@ export function FormField(props) {
 
   const onChange = useCallback(
     (update) => {
-      setInitialValidationTrigger(false);
+      setValidationGrace(false);
       _onChange({ field, indexes, fieldInstance, ...update });
     },
     [_onChange, field, fieldInstance, indexes],
   );
 
+  const fieldErrors = useMemo(() => {
+    if (validationGrace) {
+      return [];
+    }
+
+    return get(errors, [field.id, ...Object.values(indexes || {})]) || [];
+  }, [errors, field.id, indexes, validationGrace]);
+
   if (hidden) {
     return <Hidden field={field} />;
   }
 
   const domId = `${prefixId(field.id, formId, indexes)}`;
-  const fieldErrors = get(errors, [field.id, ...Object.values(indexes || {})]) || [];
 
   const formFieldElement = (
     <FormFieldComponent
diff --git a/packages/form-js-viewer/src/render/context/ExpressionContextInfo.js b/packages/form-js-viewer/src/render/context/ExpressionContextInfo.js
new file mode 100644
index 000000000..af1c0e7d4
--- /dev/null
+++ b/packages/form-js-viewer/src/render/context/ExpressionContextInfo.js
@@ -0,0 +1,6 @@
+import { createContext } from 'preact';
+
+export const ExpressionContextInfo = createContext({
+  data: {},
+  segments: [],
+});
diff --git a/packages/form-js-viewer/src/render/context/LocalExpressionContext.js b/packages/form-js-viewer/src/render/context/LocalExpressionContext.js
deleted file mode 100644
index 24f100798..000000000
--- a/packages/form-js-viewer/src/render/context/LocalExpressionContext.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createContext } from 'preact';
-
-export const LocalExpressionContext = createContext({
-  data: null,
-  this: null,
-  parent: null,
-  i: null,
-});
diff --git a/packages/form-js-viewer/src/render/context/index.js b/packages/form-js-viewer/src/render/context/index.js
index d7ca66aa2..ff3a868a0 100644
--- a/packages/form-js-viewer/src/render/context/index.js
+++ b/packages/form-js-viewer/src/render/context/index.js
@@ -1,3 +1,3 @@
 export { FormRenderContext } from './FormRenderContext';
-export { LocalExpressionContext } from './LocalExpressionContext';
+export { ExpressionContextInfo } from './ExpressionContextInfo';
 export { FormContext } from './FormContext';
diff --git a/packages/form-js-viewer/src/render/hooks/useCondition.js b/packages/form-js-viewer/src/render/hooks/useCondition.js
index b21f3cee9..5de6e6a0f 100644
--- a/packages/form-js-viewer/src/render/hooks/useCondition.js
+++ b/packages/form-js-viewer/src/render/hooks/useCondition.js
@@ -1,6 +1,6 @@
 import { useService } from './useService.js';
 import { useContext, useMemo } from 'preact/hooks';
-import { LocalExpressionContext } from '../context/LocalExpressionContext.js';
+import { ExpressionContextInfo } from '../context/ExpressionContextInfo.js';
 import { buildExpressionContext } from '../../util/expressions.js';
 
 /**
@@ -12,7 +12,7 @@ import { buildExpressionContext } from '../../util/expressions.js';
  */
 export function useCondition(condition) {
   const conditionChecker = useService('conditionChecker', false);
-  const expressionContextInfo = useContext(LocalExpressionContext);
+  const expressionContextInfo = useContext(ExpressionContextInfo);
 
   return useMemo(() => {
     return conditionChecker ? conditionChecker.check(condition, buildExpressionContext(expressionContextInfo)) : null;
diff --git a/packages/form-js-viewer/src/render/hooks/useExpressionEvaluation.js b/packages/form-js-viewer/src/render/hooks/useExpressionEvaluation.js
index 9741ddea9..2510d8e09 100644
--- a/packages/form-js-viewer/src/render/hooks/useExpressionEvaluation.js
+++ b/packages/form-js-viewer/src/render/hooks/useExpressionEvaluation.js
@@ -1,5 +1,5 @@
 import { useService } from './useService';
-import { LocalExpressionContext } from '../context/LocalExpressionContext';
+import { ExpressionContextInfo } from '../context/ExpressionContextInfo';
 import { useContext, useMemo } from 'preact/hooks';
 import { runExpressionEvaluation } from '../../util/expressions';
 
@@ -13,7 +13,7 @@ import { runExpressionEvaluation } from '../../util/expressions';
  */
 export function useExpressionEvaluation(value) {
   const expressionLanguage = useService('expressionLanguage');
-  const expressionContextInfo = useContext(LocalExpressionContext);
+  const expressionContextInfo = useContext(ExpressionContextInfo);
   return useMemo(
     () => runExpressionEvaluation(expressionLanguage, value, expressionContextInfo),
     [expressionLanguage, expressionContextInfo, value],
diff --git a/packages/form-js-viewer/src/render/hooks/useReadonly.js b/packages/form-js-viewer/src/render/hooks/useReadonly.js
index d4ce7daf8..d8ce06af9 100644
--- a/packages/form-js-viewer/src/render/hooks/useReadonly.js
+++ b/packages/form-js-viewer/src/render/hooks/useReadonly.js
@@ -1,5 +1,5 @@
 import { buildExpressionContext } from '../../util/expressions.js';
-import { LocalExpressionContext } from '../context/LocalExpressionContext.js';
+import { ExpressionContextInfo } from '../context/ExpressionContextInfo.js';
 import { useService } from './useService.js';
 import { useContext } from 'preact/hooks';
 
@@ -17,7 +17,7 @@ import { useContext } from 'preact/hooks';
 export function useReadonly(formField, properties = {}) {
   const expressionLanguage = useService('expressionLanguage');
   const conditionChecker = useService('conditionChecker', false);
-  const expressionContextInfo = useContext(LocalExpressionContext);
+  const expressionContextInfo = useContext(ExpressionContextInfo);
 
   const { readonly } = formField;
 
diff --git a/packages/form-js-viewer/src/render/hooks/useTemplateEvaluation.js b/packages/form-js-viewer/src/render/hooks/useTemplateEvaluation.js
index 7d3d71ce6..53e6ce1ab 100644
--- a/packages/form-js-viewer/src/render/hooks/useTemplateEvaluation.js
+++ b/packages/form-js-viewer/src/render/hooks/useTemplateEvaluation.js
@@ -1,6 +1,6 @@
 import { useService } from './useService';
 import { useContext, useMemo } from 'preact/hooks';
-import { LocalExpressionContext } from '../context/LocalExpressionContext';
+import { ExpressionContextInfo } from '../context/ExpressionContextInfo';
 import { buildExpressionContext } from '../../util/expressions';
 
 /**
@@ -17,7 +17,7 @@ import { buildExpressionContext } from '../../util/expressions';
  */
 export function useTemplateEvaluation(value, options = {}) {
   const templating = useService('templating');
-  const expressionContextInfo = useContext(LocalExpressionContext);
+  const expressionContextInfo = useContext(ExpressionContextInfo);
 
   return useMemo(() => {
     if (templating && templating.isTemplate(value)) {
diff --git a/packages/form-js-viewer/src/util/expressions.js b/packages/form-js-viewer/src/util/expressions.js
index 858c72d40..37e8df443 100644
--- a/packages/form-js-viewer/src/util/expressions.js
+++ b/packages/form-js-viewer/src/util/expressions.js
@@ -1,13 +1,51 @@
+import { get } from 'min-dash';
 import { wrapObjectKeysWithUnderscores } from './simple';
 
 /**
- * Transform a LocalExpressionContext object into a usable FEEL context.
+ * Builds an expression context object based on the expression context information.
  *
- * @param {Object} context - The LocalExpressionContext object.
+ * @param {Object} expressionContextInfo - The expression context information.
+ * @param {Object} options - The options to use.
+ * @param {Object} [ options.overrideData ] - The override data to use.
+ * @returns {Object} The expression context object.
+ */
+export function buildExpressionContext(expressionContextInfo, options = {}) {
+  const rootData = options.overrideData || expressionContextInfo.data;
+  const segments = expressionContextInfo.segments || [];
+
+  let workingContext = wrapExpressionContext({
+    data: rootData,
+    this: rootData,
+    parent: null,
+    i: [],
+  });
+
+  for (var x = 0; x < segments.length; x++) {
+    const segment = segments[x];
+    const pathArray = segment.path.split('.');
+
+    const currentData = get(workingContext.data, pathArray);
+    const indexedData = segment.index !== undefined ? currentData[segment.index] : currentData;
+
+    workingContext = wrapExpressionContext({
+      data: rootData,
+      this: indexedData,
+      parent: workingContext,
+      i: [...workingContext.i, segment.index + 1],
+    });
+  }
+
+  return workingContext;
+}
+
+/**
+ * Wraps an expresson context object into a usable FEEL context.
+ *
+ * @param {Object} context - The ExpressionContext object.
  * @returns {Object} The usable FEEL context.
  */
 
-export function buildExpressionContext(context) {
+export function wrapExpressionContext(context) {
   const { data, ...specialContextKeys } = context;
 
   return {
diff --git a/packages/form-js-viewer/test/spec/render/components/helper/index.js b/packages/form-js-viewer/test/spec/render/components/helper/index.js
index e11e3707f..d254f585b 100644
--- a/packages/form-js-viewer/test/spec/render/components/helper/index.js
+++ b/packages/form-js-viewer/test/spec/render/components/helper/index.js
@@ -1,4 +1,4 @@
-import { FormContext, LocalExpressionContext } from '../../../../../src/render/context';
+import { FormContext, ExpressionContextInfo } from '../../../../../src/render/context';
 
 import { createMockInjector } from './mocks';
 
@@ -12,16 +12,14 @@ export const MockFormContext = (props) => {
 
   const data = options.data || options.initialData || {};
 
-  const localExpressionContext = {
+  const expressionContextInfo = {
     data,
-    parent: null,
-    this: data,
-    i: [],
+    segments: [],
   };
 
   return (
-    <LocalExpressionContext.Provider value={localExpressionContext}>
+    <ExpressionContextInfo.Provider value={expressionContextInfo}>
       <FormContext.Provider value={formContext}>{props.children}</FormContext.Provider>
-    </LocalExpressionContext.Provider>
+    </ExpressionContextInfo.Provider>
   );
 };