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/src/generators/uischema.ts

@@ -225,4 +225,4 @@ export const generateDefaultUISchema = (
   wrapInLayoutIfNecessary(
     generateUISchema(jsonSchema, [], prefix, '', layoutType, rootSchema),
     layoutType
-  );
+  ) ?? createLayout(layoutType);

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

@@ -26,6 +26,38 @@ import test from 'ava';
 
 import { generateJsonSchema } from '../../src/generators/schema';
 
+test('default schema generation root primitive types', (t) => {
+  t.deepEqual(generateJsonSchema(undefined), {});
+  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/core/test/generators/uischema.test.ts

@@ -496,19 +496,28 @@ test('generate unnamed array control w/o type', (t) => {
 
 test('generate for empty schema', (t) => {
   const schema: JsonSchema = {};
-  const uischema: Layout = null;
+  const uischema: Layout = {
+    type: 'VerticalLayout',
+    elements: [],
+  };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
 test('generate for null schema', (t) => {
   const schema: JsonSchema = null;
-  const uischema: Layout = null;
+  const uischema: Layout = {
+    type: 'VerticalLayout',
+    elements: [],
+  };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
 test('generate for undefined schema', (t) => {
   const schema: JsonSchema = undefined;
-  const uischema: Layout = null;
+  const uischema: Layout = {
+    type: 'VerticalLayout',
+    elements: [],
+  };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 

packages/vue-vuetify/dev/components/ExampleForm.vue

@@ -50,12 +50,16 @@ const resolvedSchema = shallowReactive<ResolvedSchema>({
   error: undefined,
 });
 
-const emits = defineEmits(['jsfchange']);
+const emits = defineEmits(['jsfchange', 'update:data']);
 
 const onChange = (event: JsonFormsChangeEvent): void => {
   emits('jsfchange', event);
 };
 
+const onUpdateData = (data: any): void => {
+  emits('update:data', data);
+};
+
 watch(
   () => props.state.schema,
   (schema) => {
@@ -101,6 +105,7 @@ const properties = computed<JsonFormsProps>(() => ({
       v-if="resolvedSchema.resolved && resolvedSchema.error === undefined"
       v-bind="properties"
       @change="onChange"
+      @update:data="onUpdateData"
     ></json-forms>
     <v-container v-else>
       <v-row

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

@@ -94,11 +94,14 @@ 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;
 };
 
+const onDataChange = (data: any): void => {
+  state.data = data;
+};
+
 const reloadMonacoSchema = () => {
   const example = find(
     examples,
@@ -346,7 +349,11 @@ const handleAction = (action: Action) => {
                         </v-toolbar>
                       </v-card-title>
                       <v-divider class="mx-4"></v-divider>
-                      <example-form :state="state" @jsfchange="onChange" />
+                      <example-form
+                        :state="state"
+                        @update:data="onDataChange"
+                        @jsfchange="onChange"
+                      />
                     </v-card>
                   </pane>
                   <pane>
@@ -392,7 +399,12 @@ const handleAction = (action: Action) => {
                   </pane>
                 </splitpanes>
 
-                <example-form :state="state" @jsfchange="onChange" v-else />
+                <example-form
+                  :state="state"
+                  @update:data="onDataChange"
+                  @jsfchange="onChange"
+                  v-else
+                />
               </div>
             </v-card>
           </v-window-item>
@@ -505,7 +517,11 @@ const handleAction = (action: Action) => {
       </v-snackbar>
     </v-container>
     <div class="json-forms" v-else>
-      <example-form :state="state" @jsfchange="onChange" />
+      <example-form
+        :state="state"
+        @update:data="onDataChange"
+        @jsfchange="onChange"
+      />
     </div>
   </div>
 </template>

packages/vue/README.md

@@ -37,12 +37,13 @@ Optional props:
 Events:
 
 - `change: {data: any; errors: AJVError[]}` - Whenever data and/or errors change this event is emitted.
+- `update:data: any` - Emits the current data alongside `change`, enabling `v-model:data`.
 
 Example:
 
 ```html
 <json-forms
-  :data="data"
+  v-model:data="data"
   :renderers="renderers"
   :schema="schema"
   :uischema="uischema"
@@ -82,7 +83,7 @@ export default defineComponent({
   },
   methods: {
     onChange(event: JsonFormsChangeEvent) {
-      this.data = event.data;
+      console.log(event);
     },
   },
 });

packages/vue/src/components/JsonForms.vue

@@ -7,40 +7,39 @@
 </template>
 
 <script lang="ts">
-import { PropType, reactive, defineComponent } from 'vue';
 import {
-  coreReducer,
   Actions,
-  Generate,
   configReducer,
-  JsonSchema,
-  UISchemaElement,
-  ValidationMode,
-  JsonFormsCore,
-  JsonFormsUISchemaRegistryEntry,
-  JsonFormsRendererRegistryEntry,
-  JsonFormsCellRendererRegistryEntry,
   CoreActions,
+  coreReducer,
+  defaultMiddleware,
+  Generate,
   i18nReducer,
+  JsonFormsCellRendererRegistryEntry,
+  JsonFormsCore,
   JsonFormsI18nState,
-  defaultMiddleware,
-  Middleware,
+  JsonFormsRendererRegistryEntry,
   JsonFormsSubStates,
+  JsonFormsUISchemaRegistryEntry,
+  JsonSchema,
+  Middleware,
+  UISchemaElement,
+  ValidationMode,
 } from '@jsonforms/core';
+import isEqual from 'lodash/isEqual';
+import { defineComponent, PropType, reactive } from 'vue';
 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 getSchemaGeneratorInput = (data: any) => (data === undefined ? {} : data);
+const generateUISchema = (schema: JsonSchema) =>
+  Generate.uiSchema(schema, undefined, undefined, schema);
+
 export default defineComponent({
   name: 'JsonForms',
   components: {
@@ -121,15 +120,12 @@ export default defineComponent({
       default: defaultMiddleware,
     },
   },
-  emits: ['change'],
+  emits: ['change', 'update:data'],
   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 +185,31 @@ 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.jsonforms.core.data;
       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 +249,7 @@ export default defineComponent({
       );
     },
     eventToEmit(newEvent) {
+      this.$emit('update:data', newEvent.data);
       this.$emit('change', newEvent);
     },
     i18n: {