feat: middleware support in React bindings

This update introduces optional middleware support for our React
bindings, enabling advanced features like controlled mode in JSON Forms
and on-the-fly handling of derived attributes.

Author: sdirix

packages/react/src/JsonForms.tsx

@@ -45,6 +45,7 @@ import {
 } from '@jsonforms/core';
 import {
   JsonFormsStateProvider,
+  Middleware,
   withJsonFormsRendererProps,
 } from './JsonFormsContext';
 
@@ -54,6 +55,7 @@ interface JsonFormsRendererState {
 
 export interface JsonFormsReactProps {
   onChange?(state: Pick<JsonFormsCore, 'data' | 'errors'>): void;
+  middleware?: Middleware;
 }
 
 export class JsonFormsDispatchRenderer extends React.Component<
@@ -203,6 +205,7 @@ export const JsonForms = (
     validationMode,
     i18n,
     additionalErrors,
+    middleware,
   } = props;
   const schemaToUse = useMemo(
     () => (schema !== undefined ? schema : Generate.jsonSchema(data)),
@@ -235,6 +238,7 @@ export const JsonForms = (
         i18n,
       }}
       onChange={onChange}
+      middleware={middleware}
     >
       <JsonFormsDispatch />
     </JsonFormsStateProvider>

packages/react/src/JsonFormsContext.tsx

@@ -75,6 +75,7 @@ import {
   OwnPropsOfLabel,
   LabelProps,
   mapStateToLabelProps,
+  CoreActions,
 } from '@jsonforms/core';
 import debounce from 'lodash/debounce';
 import React, {
@@ -87,6 +88,7 @@ import React, {
   useMemo,
   useReducer,
   useRef,
+  useState,
 } from 'react';
 
 const initialCoreState: JsonFormsCore = {
@@ -126,33 +128,56 @@ const useEffectAfterFirstRender = (
   }, dependencies);
 };
 
+export interface Middleware {
+  (
+    state: JsonFormsCore,
+    action: CoreActions,
+    defaultReducer: (state: JsonFormsCore, action: CoreActions) => JsonFormsCore
+  ): JsonFormsCore;
+}
+
+const defaultMiddleware: Middleware = (state, action, defaultReducer) =>
+  defaultReducer(state, action);
+
 export const JsonFormsStateProvider = ({
   children,
   initState,
   onChange,
+  middleware,
 }: any) => {
   const { data, schema, uischema, ajv, validationMode, additionalErrors } =
     initState.core;
 
-  const [core, coreDispatch] = useReducer(coreReducer, undefined, () =>
-    coreReducer(
+  const middlewareRef = useRef<Middleware>(middleware ?? defaultMiddleware);
+  middlewareRef.current = middleware ?? defaultMiddleware;
+
+  const [core, setCore] = useState<JsonFormsCore>(() =>
+    middlewareRef.current(
       initState.core,
       Actions.init(data, schema, uischema, {
         ajv,
         validationMode,
         additionalErrors,
-      })
+      }),
+      coreReducer
     )
   );
-  useEffect(() => {
-    coreDispatch(
-      Actions.updateCore(data, schema, uischema, {
-        ajv,
-        validationMode,
-        additionalErrors,
-      })
-    );
-  }, [data, schema, uischema, ajv, validationMode, additionalErrors]);
+
+  useEffect(
+    () =>
+      setCore((currentCore) =>
+        middlewareRef.current(
+          currentCore,
+          Actions.updateCore(data, schema, uischema, {
+            ajv,
+            validationMode,
+            additionalErrors,
+          }),
+          coreReducer
+        )
+      ),
+    [data, schema, uischema, ajv, validationMode, additionalErrors]
+  );
 
   const [config, configDispatch] = useReducer(configReducer, undefined, () =>
     configReducer(undefined, Actions.setConfig(initState.config))
@@ -185,6 +210,12 @@ export const JsonFormsStateProvider = ({
     initState.i18n?.translateError,
   ]);
 
+  const dispatch = useCallback((action: CoreActions) => {
+    setCore((currentCore) =>
+      middlewareRef.current(currentCore, action, coreReducer)
+    );
+  }, []);
+
   const contextValue = useMemo(
     () => ({
       core,
@@ -194,8 +225,7 @@ export const JsonFormsStateProvider = ({
       uischemas: initState.uischemas,
       readonly: initState.readonly,
       i18n: i18n,
-      // only core dispatch available
-      dispatch: coreDispatch,
+      dispatch: dispatch,
     }),
     [
       core,