preserve the form data so when we update the additionalErrors the dat…

packages/core/src/generators/Generate.ts

@@ -28,9 +28,7 @@ import { generateJsonSchema } from './schema';
 import { createControlElement, generateDefaultUISchema } from './uischema';
 
 export const Generate: {
-  // TODO fix @typescript-eslint/ban-types
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  jsonSchema(instance: Object, options?: any): JsonSchema;
+  jsonSchema(instance: unknown, options?: any): JsonSchema;
   uiSchema(
     jsonSchema: JsonSchema,
     layoutType?: string,

packages/core/src/generators/schema.ts

@@ -52,9 +52,7 @@ class Gen {
     private findOption: (props: Properties) => (optionName: string) => any
   ) {}
 
-  // TODO fix @typescript-eslint/ban-types
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  schemaObject = (data: Object): JsonSchema4 => {
+  schemaObject = (data: Record<string, any>): JsonSchema4 => {
     const props: Properties = this.properties(data);
     const schema: JsonSchema4 = {
       type: 'object',
@@ -140,14 +138,12 @@ class Gen {
 
 /**
  * Generate a JSON schema based on the given data and any additional options.
- * @param {Object} instance the data to create a JSON schema for
+ * @param {unknown} instance the data to create a JSON schema for
  * @param {any} options any additional options that may alter the generated JSON schema
  * @returns {JsonSchema} the generated schema
  */
 export const generateJsonSchema = (
-  // TODO fix @typescript-eslint/ban-types
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  instance: Object,
+  instance: unknown,
   options: any = {}
 ): JsonSchema4 => {
   const findOption =
@@ -177,5 +173,5 @@ export const generateJsonSchema = (
 
   const gen = new Gen(findOption);
 
-  return gen.schemaObject(instance);
+  return gen.property(instance);
 };

packages/core/test/generators/schema.test.ts

@@ -26,6 +26,37 @@ import test from 'ava';
 
 import { generateJsonSchema } from '../../src/generators/schema';
 
+test('default schema generation root primitive types', (t) => {
+  t.deepEqual(generateJsonSchema('hello'), {
+    type: 'string',
+  });
+  t.deepEqual(generateJsonSchema(42), {
+    type: 'integer',
+  });
+  t.deepEqual(generateJsonSchema(3.14), {
+    type: 'number',
+  });
+  t.deepEqual(generateJsonSchema(true), {
+    type: 'boolean',
+  });
+  t.deepEqual(generateJsonSchema(null), {
+    type: 'null',
+  });
+});
+
+test('default schema generation root array types', (t) => {
+  t.deepEqual(generateJsonSchema([]), {
+    type: 'array',
+    items: {},
+  });
+  t.deepEqual(generateJsonSchema([1, 2]), {
+    type: 'array',
+    items: {
+      type: 'integer',
+    },
+  });
+});
+
 test('default schema generation basic types', (t) => {
   const instance: any = {
     boolean: false,

packages/vue-vuetify/dev/views/ExampleView.vue

@@ -94,7 +94,6 @@ const onChange = (event: JsonFormsChangeEvent): void => {
       monaco.Uri.parse(toDataUri(props.example.name)),
       event.data !== undefined ? JSON.stringify(event.data, null, 2) : '',
     );
-    state.data = event.data;
   }
   errors.value = event.errors;
 };

packages/vue/src/components/JsonForms.vue

@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { PropType, reactive, defineComponent } from 'vue';
+import isEqual from 'lodash/isEqual';
 import {
   coreReducer,
   Actions,
@@ -26,21 +27,26 @@ import {
   defaultMiddleware,
   Middleware,
   JsonFormsSubStates,
+  Layout,
 } from '@jsonforms/core';
 import { JsonFormsChangeEvent, MaybeReadonly } from '../types';
 import DispatchRenderer from './DispatchRenderer.vue';
 
 import type Ajv from 'ajv';
 import type { ErrorObject } from 'ajv';
 
-// TODO fix @typescript-eslint/ban-types
-// eslint-disable-next-line @typescript-eslint/ban-types
-const isObject = (elem: any): elem is Object => {
-  return elem && typeof elem === 'object';
-};
-
 const EMPTY: ErrorObject[] = reactive([]);
 
+const createDefaultLayout = (): Layout => ({
+  type: 'VerticalLayout',
+  elements: [],
+});
+const getSchemaGeneratorInput = (data: any) =>
+  data === undefined ? {} : data;
+const generateUISchema = (schema: JsonSchema) =>
+  Generate.uiSchema(schema, undefined, undefined, schema) ??
+  createDefaultLayout();
+
 export default defineComponent({
   name: 'JsonForms',
   components: {
@@ -124,12 +130,9 @@ export default defineComponent({
   emits: ['change'],
   data() {
     const dataToUse = this.data;
-    const generatorData = isObject(dataToUse) ? dataToUse : {};
     const schemaToUse: JsonSchema =
-      this.schema ?? Generate.jsonSchema(generatorData);
-    const uischemaToUse =
-      this.uischema ??
-      Generate.uiSchema(schemaToUse, undefined, undefined, schemaToUse);
+      this.schema ?? Generate.jsonSchema(getSchemaGeneratorInput(dataToUse));
+    const uischemaToUse = this.uischema ?? generateUISchema(schemaToUse);
     const initCore = (): JsonFormsCore => {
       const initialCore = {
         data: dataToUse,
@@ -189,29 +192,30 @@ export default defineComponent({
   },
   watch: {
     schema(newSchema) {
-      const generatorData = isObject(this.data) ? this.data : {};
-      this.schemaToUse = newSchema ?? Generate.jsonSchema(generatorData);
+      this.schemaToUse =
+        newSchema ?? Generate.jsonSchema(getSchemaGeneratorInput(this.dataToUse));
       if (!this.uischema) {
-        this.uischemaToUse = Generate.uiSchema(
-          this.schemaToUse,
-          undefined,
-          undefined,
-          this.schemaToUse
-        );
+        this.uischemaToUse = generateUISchema(this.schemaToUse);
       }
     },
     uischema(newUischema) {
-      this.uischemaToUse =
-        newUischema ??
-        Generate.uiSchema(
-          this.schemaToUse,
-          undefined,
-          undefined,
-          this.schemaToUse
-        );
+      this.uischemaToUse = newUischema ?? generateUISchema(this.schemaToUse);
     },
     data(newData) {
+      const isSameAsCurrentData = newData === this.dataToUse;
       this.dataToUse = newData;
+
+      if (!this.schema && !isSameAsCurrentData) {
+        const nextSchema = Generate.jsonSchema(
+          getSchemaGeneratorInput(this.dataToUse)
+        );
+        if (!isEqual(nextSchema, this.schemaToUse)) {
+          this.schemaToUse = nextSchema;
+          if (!this.uischema) {
+            this.uischemaToUse = generateUISchema(this.schemaToUse);
+          }
+        }
+      }
     },
     renderers(newRenderers) {
       this.jsonforms.renderers = newRenderers;
@@ -251,6 +255,9 @@ export default defineComponent({
       );
     },
     eventToEmit(newEvent) {
+      // update the data so if we change the additionalErrors this won't reset the form data
+      this.dataToUse = newEvent.data;
+
       this.$emit('change', newEvent);
     },
     i18n: {

packages/vue/tests/unit/JsonForms.spec.ts

@@ -1,5 +1,10 @@
-import { JsonFormsUISchemaRegistryEntry, Generate } from '@jsonforms/core';
+import {
+  Actions,
+  JsonFormsUISchemaRegistryEntry,
+  Generate,
+} from '@jsonforms/core';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { JsonForms } from '../../src';
 import { bindings } from '../testHelper';
 
@@ -30,6 +35,20 @@ describe('JsonForms.vue', () => {
     );
   });
 
+  it('generates schema for primitive root data', () => {
+    const data = 5.5;
+    const renderers: JsonFormsUISchemaRegistryEntry[] = [];
+    const wrapper = shallowMount(
+      JsonForms,
+      bindings({
+        props: { data, renderers },
+      })
+    );
+    expect((wrapper.vm as any).jsonforms.core.schema).toEqual(
+      Generate.jsonSchema(data)
+    );
+  });
+
   it('generates ui schema when not given via prop', () => {
     const data = { number: 5.5 };
     const schema = {
@@ -47,4 +66,116 @@ describe('JsonForms.vue', () => {
       Generate.uiSchema(schema)
     );
   });
+
+  it('preserves undefined root data when the data prop is cleared', async () => {
+    const data = { number: 5.5 };
+    const renderers: JsonFormsUISchemaRegistryEntry[] = [];
+    const wrapper = shallowMount(
+      JsonForms,
+      bindings({
+        props: { data, renderers },
+      })
+    );
+
+    await wrapper.setProps({ data: undefined });
+
+    expect((wrapper.vm as any).jsonforms.core.data).toBeUndefined();
+
+    const changeEvents = wrapper.emitted('change');
+    const latestChangeEvent: any = changeEvents?.[changeEvents.length - 1]?.[0];
+    expect(latestChangeEvent?.data).toBeUndefined();
+  });
+
+  it('preserves edited data when additionalErrors change', async () => {
+    const data = { number: 5.5 };
+    const renderers: JsonFormsUISchemaRegistryEntry[] = [];
+    const wrapper = shallowMount(
+      JsonForms,
+      bindings({
+        props: { data, renderers },
+      })
+    );
+
+    (wrapper.vm as any).dispatch(Actions.update('number', () => 6));
+    await nextTick();
+
+    await wrapper.setProps({
+      additionalErrors: [
+        {
+          instancePath: '/number',
+          schemaPath: '#/properties/number/minimum',
+          keyword: 'minimum',
+          params: { comparison: '>=', limit: 7 },
+        },
+      ],
+    });
+
+    expect((wrapper.vm as any).jsonforms.core.data).toEqual({ number: 6 });
+  });
+
+  it('does not regenerate schema and uischema when the parent passes back the current form data', async () => {
+    const data = { number: 5.5 };
+    const renderers: JsonFormsUISchemaRegistryEntry[] = [];
+    const wrapper = shallowMount(
+      JsonForms,
+      bindings({
+        props: { data, renderers },
+      })
+    );
+
+    const initialSchema = (wrapper.vm as any).schemaToUse;
+    const initialUiSchema = (wrapper.vm as any).uischemaToUse;
+
+    (wrapper.vm as any).dispatch(Actions.update('number', () => 6));
+    await nextTick();
+
+    await wrapper.setProps({
+      data: (wrapper.vm as any).jsonforms.core.data,
+    });
+
+    expect((wrapper.vm as any).schemaToUse).toBe(initialSchema);
+    expect((wrapper.vm as any).uischemaToUse).toBe(initialUiSchema);
+  });
+
+  it('regenerates schema and uischema for external data changes', async () => {
+    const data = { number: 5.5 };
+    const nextData = { number: 5.5, text: 'hello' };
+    const renderers: JsonFormsUISchemaRegistryEntry[] = [];
+    const wrapper = shallowMount(
+      JsonForms,
+      bindings({
+        props: { data, renderers },
+      })
+    );
+
+    const initialSchema = (wrapper.vm as any).schemaToUse;
+    const initialUiSchema = (wrapper.vm as any).uischemaToUse;
+
+    await wrapper.setProps({ data: nextData });
+
+    expect((wrapper.vm as any).schemaToUse).not.toBe(initialSchema);
+    expect((wrapper.vm as any).uischemaToUse).not.toBe(initialUiSchema);
+    expect((wrapper.vm as any).jsonforms.core.schema).toEqual(
+      Generate.jsonSchema(nextData)
+    );
+  });
+
+  it('does not regenerate schema and uischema when external data keeps the same schema', async () => {
+    const data = 'hello';
+    const renderers: JsonFormsUISchemaRegistryEntry[] = [];
+    const wrapper = shallowMount(
+      JsonForms,
+      bindings({
+        props: { data, renderers },
+      })
+    );
+
+    const initialSchema = (wrapper.vm as any).schemaToUse;
+    const initialUiSchema = (wrapper.vm as any).uischemaToUse;
+
+    await wrapper.setProps({ data: 'world' });
+
+    expect((wrapper.vm as any).schemaToUse).toBe(initialSchema);
+    expect((wrapper.vm as any).uischemaToUse).toBe(initialUiSchema);
+  });
 });