feat: Add Middleware Support for Angular and Vue

This commit implements middleware support for both Angular and Vue,
addressing the discussion in issue eclipsesource#2174

packages/angular/src/jsonforms-root.component.ts

@@ -37,9 +37,11 @@ import {
   JsonFormsI18nState,
   JsonFormsRendererRegistryEntry,
   JsonSchema,
+  Middleware,
   UISchemaElement,
   UISchemaTester,
   ValidationMode,
+  defaultMiddleware,
 } from '@jsonforms/core';
 import Ajv, { ErrorObject } from 'ajv';
 import { JsonFormsAngularService, USE_STATE_VALUE } from './jsonforms.service';
@@ -64,6 +66,7 @@ export class JsonForms implements DoCheck, OnChanges, OnInit {
   @Input() config: any;
   @Input() i18n: JsonFormsI18nState;
   @Input() additionalErrors: ErrorObject[];
+  @Input() middleware: Middleware = defaultMiddleware;
   @Output() errors = new EventEmitter<ErrorObject[]>();
 
   private previousData: any;
@@ -75,21 +78,24 @@ export class JsonForms implements DoCheck, OnChanges, OnInit {
   constructor(private jsonformsService: JsonFormsAngularService) {}
 
   ngOnInit(): void {
-    this.jsonformsService.init({
-      core: {
-        data: this.data,
-        uischema: this.uischema,
-        schema: this.schema,
-        ajv: this.ajv,
-        validationMode: this.validationMode,
-        additionalErrors: this.additionalErrors,
+    this.jsonformsService.init(
+      {
+        core: {
+          data: this.data,
+          uischema: this.uischema,
+          schema: this.schema,
+          ajv: this.ajv,
+          validationMode: this.validationMode,
+          additionalErrors: this.additionalErrors,
+        },
+        uischemas: this.uischemas,
+        i18n: this.i18n,
+        renderers: this.renderers,
+        config: this.config,
+        readonly: this.readonly,
       },
-      uischemas: this.uischemas,
-      i18n: this.i18n,
-      renderers: this.renderers,
-      config: this.config,
-      readonly: this.readonly,
-    });
+      this.middleware
+    );
     this.jsonformsService.$state.subscribe((state) => {
       const data = state?.jsonforms?.core?.data;
       const errors = state?.jsonforms?.core?.errors;

packages/angular/src/jsonforms.service.ts

@@ -44,6 +44,8 @@ import {
   UISchemaTester,
   ValidationMode,
   updateI18n,
+  Middleware,
+  defaultMiddleware,
 } from '@jsonforms/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import type { JsonFormsBaseRenderer } from './base.renderer';
@@ -56,6 +58,7 @@ export const USE_STATE_VALUE = Symbol('Marker to use state value');
 export class JsonFormsAngularService {
   private _state: JsonFormsSubStates;
   private state: BehaviorSubject<JsonFormsState>;
+  private middleware: Middleware;
 
   init(
     initialState: JsonFormsSubStates = {
@@ -66,8 +69,10 @@ export class JsonFormsAngularService {
         validationMode: 'ValidateAndShow',
         additionalErrors: undefined,
       },
-    }
+    },
+    middleware: Middleware = defaultMiddleware
   ) {
+    this.middleware = middleware;
     this._state = initialState;
     this._state.config = configReducer(
       undefined,
@@ -143,9 +148,10 @@ export class JsonFormsAngularService {
   }
 
   updateValidationMode(validationMode: ValidationMode): void {
-    const coreState = coreReducer(
+    const coreState = this.middleware(
       this._state.core,
-      Actions.setValidationMode(validationMode)
+      Actions.setValidationMode(validationMode),
+      coreReducer
     );
     this._state.core = coreState;
     this.updateSubject();
@@ -161,7 +167,11 @@ export class JsonFormsAngularService {
   }
 
   updateCore<T extends CoreActions>(coreAction: T): T {
-    const coreState = coreReducer(this._state.core, coreAction);
+    const coreState = this.middleware(
+      this._state.core,
+      coreAction,
+      coreReducer
+    );
     if (coreState !== this._state.core) {
       this._state.core = coreState;
       this.updateSubject();
@@ -199,13 +209,14 @@ export class JsonFormsAngularService {
   setUiSchema(uischema: UISchemaElement | undefined): void {
     const newUiSchema =
       uischema ?? generateDefaultUISchema(this._state.core.schema);
-    const coreState = coreReducer(
+    const coreState = this.middleware(
       this._state.core,
       Actions.updateCore(
         this._state.core.data,
         this._state.core.schema,
         newUiSchema
-      )
+      ),
+      coreReducer
     );
     if (coreState !== this._state.core) {
       this._state.core = coreState;
@@ -214,13 +225,14 @@ export class JsonFormsAngularService {
   }
 
   setSchema(schema: JsonSchema | undefined): void {
-    const coreState = coreReducer(
+    const coreState = this.middleware(
       this._state.core,
       Actions.updateCore(
         this._state.core.data,
         schema ?? generateJsonSchema(this._state.core.data),
         this._state.core.uischema
-      )
+      ),
+      coreReducer
     );
     if (coreState !== this._state.core) {
       this._state.core = coreState;
@@ -229,13 +241,14 @@ export class JsonFormsAngularService {
   }
 
   setData(data: any): void {
-    const coreState = coreReducer(
+    const coreState = this.middleware(
       this._state.core,
       Actions.updateCore(
         data,
         this._state.core.schema,
         this._state.core.uischema
-      )
+      ),
+      coreReducer
     );
     if (coreState !== this._state.core) {
       this._state.core = coreState;
@@ -257,6 +270,11 @@ export class JsonFormsAngularService {
     this.updateSubject();
   }
 
+  setMiddleware(middleware: Middleware): void {
+    this._state.middleware = middleware;
+    this.updateSubject();
+  }
+
   getState(): JsonFormsState {
     return cloneDeep({ jsonforms: this._state });
   }

packages/angular/test/middleware.test.ts

@@ -0,0 +1,57 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2023-2023 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+
+import { ControlElement, JsonSchema } from '@jsonforms/core';
+import { JsonFormsAngularService } from '../src/jsonforms.service';
+
+import test from 'ava';
+
+test('Should callMiddleware', (t) => {
+  const data = { foo: true };
+  const testSchema: JsonSchema = {
+    type: 'object',
+    properties: {
+      foo: {
+        type: 'boolean',
+      },
+    },
+  };
+  const uischema: ControlElement = {
+    type: 'Control',
+    scope: '#/properties/foo',
+  };
+
+  const jsonFormsService = new JsonFormsAngularService();
+
+  jsonFormsService.init({
+    core: {
+      data: data,
+      schema: testSchema,
+      uischema: uischema,
+    },
+    middleware: (_state, _action) => t.pass,
+  });
+  t.fail('schould have called middleware');
+});

packages/core/src/reducers/index.ts

@@ -32,3 +32,4 @@ export * from './reducers';
 export * from './renderers';
 export * from './selectors';
 export * from './uischemas';
+export * from './middleware';

packages/core/src/reducers/middleware.ts

@@ -0,0 +1,12 @@
+import { CoreActions } from '../actions';
+import { JsonFormsCore } from './core';
+
+export interface Middleware {
+  (
+    state: JsonFormsCore,
+    action: CoreActions,
+    defaultReducer: (state: JsonFormsCore, action: CoreActions) => JsonFormsCore
+  ): JsonFormsCore;
+}
+export const defaultMiddleware: Middleware = (state, action, defaultReducer) =>
+  defaultReducer(state, action);

packages/react/src/JsonForms.tsx

@@ -38,14 +38,14 @@ import {
   JsonFormsRendererRegistryEntry,
   JsonFormsUISchemaRegistryEntry,
   JsonSchema,
+  Middleware,
   OwnPropsOfJsonFormsRenderer,
   removeId,
   UISchemaElement,
   ValidationMode,
 } from '@jsonforms/core';
 import {
   JsonFormsStateProvider,
-  Middleware,
   withJsonFormsRendererProps,
 } from './JsonFormsContext';
 

packages/react/src/JsonFormsContext.tsx

@@ -76,6 +76,8 @@ import {
   LabelProps,
   mapStateToLabelProps,
   CoreActions,
+  Middleware,
+  defaultMiddleware,
 } from '@jsonforms/core';
 import debounce from 'lodash/debounce';
 import React, {
@@ -128,20 +130,6 @@ const useEffectAfterFirstRender = (
   }, dependencies);
 };
 
-export interface Middleware {
-  (
-    state: JsonFormsCore,
-    action: CoreActions,
-    defaultDispatch: (
-      state: JsonFormsCore,
-      action: CoreActions
-    ) => JsonFormsCore
-  ): JsonFormsCore;
-}
-
-const defaultMiddleware: Middleware = (state, action, defaultDispatch) =>
-  defaultDispatch(state, action);
-
 export const JsonFormsStateProvider = ({
   children,
   initState,

packages/react/test/renderers/JsonForms.test.tsx

@@ -33,6 +33,7 @@ import type {
   JsonFormsStore,
   JsonSchema,
   Layout,
+  Middleware,
   RendererProps,
   UISchemaElement,
 } from '@jsonforms/core';
@@ -58,7 +59,6 @@ import {
 } from '../../src/JsonForms';
 import {
   JsonFormsStateProvider,
-  Middleware,
   useJsonForms,
   withJsonFormsControlProps,
 } from '../../src/JsonFormsContext';

packages/vue/src/components/JsonForms.vue

@@ -23,6 +23,8 @@ import {
   CoreActions,
   i18nReducer,
   JsonFormsI18nState,
+  defaultMiddleware,
+  Middleware,
 } from '@jsonforms/core';
 import { JsonFormsChangeEvent, MaybeReadonly } from '../types';
 import DispatchRenderer from './DispatchRenderer.vue';
@@ -109,6 +111,11 @@ export default defineComponent({
       type: Array as PropType<ErrorObject[]>,
       default: () => EMPTY,
     },
+    middleware: {
+      required: false,
+      type: Function as PropType<Middleware>,
+      default: () => defaultMiddleware,
+    },
   },
   emits: ['change'],
   data() {
@@ -122,13 +129,14 @@ export default defineComponent({
         schema: schemaToUse,
         uischema: uischemaToUse,
       };
-      const core = coreReducer(
+      const core = this.middleware(
         initialCore,
         Actions.init(dataToUse, schemaToUse, uischemaToUse, {
           validationMode: this.validationMode,
           ajv: this.ajv,
           additionalErrors: this.additionalErrors,
-        })
+        }),
+        coreReducer
       );
       return core;
     };
@@ -208,7 +216,7 @@ export default defineComponent({
       this.jsonforms.readonly = newReadonly;
     },
     coreDataToUpdate() {
-      this.jsonforms.core = coreReducer(
+      this.jsonforms.core = this.middleware(
         this.jsonforms.core as JsonFormsCore,
         Actions.updateCore(
           this.dataToUse,
@@ -219,7 +227,8 @@ export default defineComponent({
             ajv: this.ajv,
             additionalErrors: this.additionalErrors,
           }
-        )
+        ),
+        coreReducer
       );
     },
     eventToEmit(newEvent) {
@@ -248,9 +257,10 @@ export default defineComponent({
   },
   methods: {
     dispatch(action: CoreActions) {
-      this.jsonforms.core = coreReducer(
+      this.jsonforms.core = this.middleware(
         this.jsonforms.core as JsonFormsCore,
-        action
+        action,
+        coreReducer
       );
     },
   },