feat(formplayer): enable AJV $data validation and computed fields engine

Author: najuna-brian

formulus-formplayer/src/App.tsx

@@ -69,7 +69,10 @@ import { draftService } from './services/DraftService';
 import DraftSelector from './components/DraftSelector';
 import { loadExtensions } from './services/ExtensionsLoader';
 import { getBuiltinExtensions } from './builtinExtensions';
-import { FormEvaluationProvider } from './FormEvaluationContext';
+import {
+  FormEvaluationProvider,
+  ExtensionFunction,
+} from './FormEvaluationContext';
 
 // Import development dependencies (Vite will tree-shake these in production)
 import { webViewMock } from './mocks/webview-mock';
@@ -262,15 +265,20 @@ function App() {
   const [extensionRenderers, setExtensionRenderers] = useState<
     JsonFormsRendererRegistryEntry[]
   >([]);
-  // Store extension functions for potential future use (e.g., validation context injection)
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // Store extension functions for computed fields and evaluation context
   const [extensionFunctions, setExtensionFunctions] = useState<
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-    Map<string, Function>
+    Map<string, ExtensionFunction>
   >(new Map());
   const [extensionDefinitions, setExtensionDefinitions] = useState<
     Record<string, any>
   >({});
+  // Store computed field configurations keyed by formType
+  const [extensionComputedFields, setExtensionComputedFields] = useState<
+    Record<
+      string,
+      Record<string, { function: string; dependencies?: string[] }>
+    >
+  >({});
 
   // Reference to the FormulusClient instance and loading state
   const formulusClient = useRef<FormulusClient>(FormulusClient.getInstance());
@@ -295,7 +303,10 @@ function App() {
         try {
           const properties = (formSchema as any)?.properties || {};
           const dynamicEnumFields = Object.entries(properties)
-            .filter(([, propSchema]: [string, any]) => !!propSchema?.['x-dynamicEnum'])
+            .filter(
+              ([, propSchema]: [string, any]) =>
+                !!propSchema?.['x-dynamicEnum'],
+            )
             .map(([key]) => key);
 
           console.log('[Formplayer] Form init received', {
@@ -306,7 +317,10 @@ function App() {
             dynamicEnumFields,
           });
         } catch (schemaLogError) {
-          console.warn('[Formplayer] Failed to log schema details', schemaLogError);
+          console.warn(
+            '[Formplayer] Failed to log schema details',
+            schemaLogError,
+          );
         }
 
         // Extract dark mode preference from params
@@ -320,17 +334,27 @@ function App() {
         if (extensions) {
           try {
             const extensionResult = await loadExtensions(extensions);
-            
+
             // Merge loaded functions with built-ins (loaded functions take precedence)
             extensionResult.functions.forEach((func, name) => {
               allFunctions.set(name, func);
             });
-            
+
             setExtensionRenderers(extensionResult.renderers);
             setExtensionFunctions(allFunctions);
             setExtensionDefinitions(extensionResult.definitions);
+            setExtensionComputedFields(extensionResult.computedFields);
 
-            console.log('[Formplayer] Final extension functions:', Array.from(allFunctions.keys()));
+            console.log(
+              '[Formplayer] Final extension functions:',
+              Array.from(allFunctions.keys()),
+            );
+            if (Object.keys(extensionResult.computedFields).length > 0) {
+              console.log(
+                '[Formplayer] Computed fields registered:',
+                extensionResult.computedFields,
+              );
+            }
 
             // Log errors but don't fail form initialization
             if (extensionResult.errors.length > 0) {
@@ -342,12 +366,14 @@ function App() {
             setExtensionRenderers([]);
             setExtensionFunctions(allFunctions);
             setExtensionDefinitions({});
+            setExtensionComputedFields({});
           }
         } else {
           // No extensions provided, just use built-ins
           setExtensionRenderers([]);
           setExtensionFunctions(allFunctions);
           setExtensionDefinitions({});
+          setExtensionComputedFields({});
           console.log('[Formplayer] Using only built-in extensions');
         }
 
@@ -732,21 +758,65 @@ function App() {
 
   const handleDataChange = useCallback(
     ({ data }: { data: FormData }) => {
-      setData(data);
+      let finalData = data;
+
+      // Process computed fields if available for this form type
+      const formType = formInitData?.formType;
+      const computedFieldConfigs = formType
+        ? extensionComputedFields[formType]
+        : undefined;
+
+      if (
+        computedFieldConfigs &&
+        Object.keys(computedFieldConfigs).length > 0
+      ) {
+        let hasComputedChanges = false;
+        const updatedData: Record<string, any> = { ...data };
+
+        for (const [fieldName, config] of Object.entries(
+          computedFieldConfigs,
+        )) {
+          const fn = extensionFunctions.get(config.function);
+          if (typeof fn === 'function') {
+            try {
+              const computedValue = fn(data);
+              if (updatedData[fieldName] !== computedValue) {
+                updatedData[fieldName] = computedValue;
+                hasComputedChanges = true;
+              }
+            } catch (err) {
+              console.warn(
+                `[Formplayer] Error computing field "${fieldName}":`,
+                err,
+              );
+            }
+          }
+        }
+
+        if (hasComputedChanges) {
+          finalData = updatedData as FormData;
+        }
+      }
+
+      setData(finalData);
+
+      // Expose current form data globally for extension renderers
+      (window as any).formulusCurrentFormData = finalData;
 
       // Save draft data whenever form data changes
       if (formInitData) {
-        draftService.saveDraft(formInitData.formType, data, formInitData);
+        draftService.saveDraft(formInitData.formType, finalData, formInitData);
       }
     },
-    [formInitData],
+    [formInitData, extensionComputedFields, extensionFunctions],
   );
 
   // Create AJV instance with extension definitions support
   const ajv = useMemo(() => {
     const instance = new Ajv({
       allErrors: true,
       strict: false, // Allow custom keywords like x-formulus-validation
+      $data: true, // Enable cross-field validation via $data references (e.g., {"const": {"$data": "1/otherField"}})
     });
     addErrors(instance);
     addFormats(instance);
@@ -836,10 +906,15 @@ function App() {
             p: 3,
             backgroundColor: 'background.paper',
           }}>
-          <Typography variant="h6" color="error" sx={{ mb: 2, textAlign: 'center' }}>
+          <Typography
+            variant="h6"
+            color="error"
+            sx={{ mb: 2, textAlign: 'center' }}>
             Error Loading Form
           </Typography>
-          <Typography variant="body2" sx={{ textAlign: 'center', color: 'text.secondary' }}>
+          <Typography
+            variant="body2"
+            sx={{ textAlign: 'center', color: 'text.secondary' }}>
             {loadError}
           </Typography>
         </Box>