Fix schema generation & add Vue2 typings and tests

lerna.json

@@ -4,5 +4,5 @@
     "packages/*"
   ],
   "version": "2.5.0-alpha.1",
-  "nohoist": ["core-js", "vue", "rollup-plugin-vue"]
+  "nohoist": ["core-js", "vue", "rollup-plugin-vue", "@vue/test-utils", "@vue/composition-api"]
 }

packages/vue/babel.config.js

@@ -1,5 +1,5 @@
-const devPresets = ['@vue/babel-preset-app'];
-const buildPresets = ['@babel/preset-env', '@babel/preset-typescript'];
+const devPresets = ['@vue/cli-plugin-babel/preset'];
+const buildPresets = ['@babel/preset-env', '@babel/preset-typescript', ];
 module.exports = {
-  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets)
+  presets: (process.env.NODE_ENV === 'production' ? buildPresets: devPresets)
 };

packages/vue/config/config.ts

@@ -1 +1,11 @@
+import { PropType } from "vue";
+
+/**
+ * Switch between Vue 3 and Vue 2 '@vue/composition-api'.
+ */
 export { computed, defineComponent, inject, ref, watch, watchEffect } from "vue";
+
+/**
+ * Compatibility type as defineComponent of '@vue/composition-api' can't properly handle PropTypes.
+ */
+export type CompType<S,_V> = PropType<S>

packages/vue/dev/components/App.vue

@@ -46,7 +46,6 @@ export default defineComponent({
     <json-forms
       v-bind:data="data"
       v-bind:renderers="renderers"
-      v-bind:schema="schema"
       @change="onChange"
     />
     <button @click="setSchema">Set Schema</button>

packages/vue/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
+  transform: {
+    '^.+\\.vue$': 'vue-jest'
+  }
+};

packages/vue/package.json

@@ -37,7 +37,8 @@
     "serve": "vue-cli-service serve dev/serve.ts",
     "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
     "clean": "rm -rf lib",
-    "doc": "../../node_modules/.bin/typedoc --name 'JSON Forms Vue' --mode file --out docs src/jsonFormsCompositions.ts"
+    "doc": "../../node_modules/.bin/typedoc --name 'JSON Forms Vue' --mode file --out docs src/jsonFormsCompositions.ts",
+    "test": "vue-cli-service test:unit"
   },
   "dependencies": {
     "lodash": "^4.17.15"
@@ -47,18 +48,22 @@
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-typescript": "^7.9.0",
     "@jsonforms/core": "^2.5.0-alpha.1",
+    "@types/jest": "^24.0.23",
     "@rollup/plugin-alias": "^2.2.0",
     "@vue/cli-plugin-babel": "^4.3.1",
     "@vue/cli-plugin-typescript": "^4.3.1",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
     "@vue/cli-service": "^4.3.1",
     "@vue/compiler-sfc": "^3.0.3",
+    "@vue/test-utils": "^2.0.0-0",
     "cross-env": "^7.0.2",
     "rollup": "^2.7.3",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-vue": "^6.0.0",
     "typescript": "3.8.3",
     "vue": "^3.0.3",
+    "vue-jest": "^5.0.0-0",
     "vue-template-compiler": "^2.6.11"
   },
   "peerDependencies": {

packages/vue/src/components/JsonForms.vue

@@ -46,47 +46,52 @@ export default defineComponent({
     },
     schema: {
       required: false,
-      type: [Object, Boolean] as PropType<JsonSchema>
+      type: [Object, Boolean] as PropType<JsonSchema>,
+      default: undefined
     },
     uischema: {
       required: false,
-      type: Object as PropType<UISchemaElement>
+      type: Object as PropType<UISchemaElement>,
+      default: undefined
     },
     renderers: {
       required: true,
       type: Array as PropType<JsonFormsRendererRegistryEntry[]>
     },
     cells: {
       required: false,
-      default: () => [],
-      type: Array as PropType<JsonFormsCellRendererRegistryEntry[]>
+      type: Array as PropType<JsonFormsCellRendererRegistryEntry[]>,
+      default: () =>[]
     },
     config: {
       required: false,
-      type: Object as PropType<any>
+      type: Object as PropType<any>,
+      default: undefined
     },
     readonly: {
       required: false,
-      default: false,
-      type: Boolean
+      type: Boolean,
+      default: false
     },
     uischemas: {
       required: false,
-      default: () => [],
-      type: Array as PropType<JsonFormsUISchemaRegistryEntry[]>
+      type: Array as PropType<JsonFormsUISchemaRegistryEntry[]>,
+      default: () => []
     },
     validationMode: {
       required: false,
-      default: 'ValidateAndShow',
-      type: String as PropType<ValidationMode>
+      type: String as PropType<ValidationMode>,
+      default: 'ValidateAndShow'
     },
     ajv: {
       required: false,
-      type: Object as PropType<Ajv>
+      type: Object as PropType<Ajv>,
+      default: undefined
     },
     refParserOptions: {
       required: false,
-      type: Object as PropType<RefParser.Options>
+      type: Object as PropType<RefParser.Options>,
+      default: undefined
     }
   },
   data() {
@@ -124,13 +129,15 @@ export default defineComponent({
   },
   watch: {
     schema(newSchema) {
+      console.log("schema updated");
       const generatorData = isObject(this.data) ? this.data : {};
       this.schemaToUse = newSchema ?? Generate.jsonSchema(generatorData);
       if (!this.uischema) {
         this.uischemaToUse = Generate.uiSchema(this.schemaToUse);
       }
     },
     uischema(newUischema) {
+      console.log("uischema updated");
       this.uischemaToUse = newUischema ?? Generate.uiSchema(this.schemaToUse);
     },
     renderers(newRenderers) {

packages/vue/src/jsonFormsCompositions.ts

@@ -29,8 +29,7 @@ import {
   defaultMapStateToEnumCellProps,
   mapStateToDispatchCellProps
 } from '@jsonforms/core';
-import { PropType } from 'vue';
-import { inject, ref, watchEffect } from '../config';
+import { CompType, inject, ref, watchEffect } from '../config';
 
 /**
  * Constructs a props declaration for Vue components which can be used
@@ -44,27 +43,30 @@ import { inject, ref, watchEffect } from '../config';
 export const rendererProps = <U = UISchemaElement>() => ({
   schema: {
     required: true as true,
-    type: [Object, Boolean] as PropType<JsonSchema>
+    type: [Object, Boolean] as CompType<JsonSchema, [ObjectConstructor, BooleanConstructor]>
   },
   uischema: {
     required: true as true,
-    type: Object as PropType<U>
+    type: Object as CompType<U, ObjectConstructor>
   },
   path: {
     required: true as true,
     type: String
   },
   enabled: {
     required: false as false,
-    type: Boolean
+    type: Boolean,
+    default: undefined
   },
   renderers: {
     required: false,
-    type: Array as PropType<JsonFormsRendererRegistryEntry[]>
+    type: Array as CompType<JsonFormsRendererRegistryEntry[], ArrayConstructor>,
+    default: undefined
   },
   cells: {
     required: false,
-    type: Array as PropType<JsonFormsCellRendererRegistryEntry[]>
+    type: Array as CompType<JsonFormsCellRendererRegistryEntry[], ArrayConstructor>,
+    default: undefined
   }
 });
 
@@ -87,22 +89,27 @@ export const masterListItemProps = () => ({
   },
   schema: {
     required: true as true,
-    type: [Object, Boolean] as PropType<JsonSchema>
+    type: [Object, Boolean] as CompType<JsonSchema, [ObjectConstructor, BooleanConstructor]>
   },
   handleSelect: {
     required: false as false,
-    type: Function as PropType<(index: number) => void>
+    type: Function as CompType<(index: number) => void, FunctionConstructor>,
+    default: undefined
   },
   removeItem: {
     required: false as false,
-    type: Function as PropType<(path: string, value: number) => void>
+    type: Function as CompType<(path: string, value: number) => void, FunctionConstructor>,
+    default: undefined
   }
 });
 
-interface RendererProps {
+export interface RendererProps<U = UISchemaElement> {
   schema: JsonSchema;
-  uischema: UISchemaElement;
+  uischema: U;
   path: string;
+  enabled?: boolean;
+  renderers?: JsonFormsRendererRegistryEntry[];
+  cells?: JsonFormsCellRendererRegistryEntry[];
 }
 
 export interface ControlProps extends RendererProps {

packages/vue/tests/testHelper.ts

@@ -0,0 +1 @@
+export const bindings = <B> (b:B) : B => b;

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

@@ -0,0 +1,42 @@
+import { JsonFormsUISchemaRegistryEntry } from '@jsonforms/core';
+import { shallowMount } from '@vue/test-utils';
+import { JsonForms } from '../../src';
+import { Generate } from '@jsonforms/core';
+import { bindings } from '../testHelper';
+
+describe('JsonForms.vue', () => {
+  it('uses undefined as schema prop when not given', () => {
+    const data = { number: 5 };
+    const renderers: JsonFormsUISchemaRegistryEntry[] = [];
+    const wrapper = shallowMount(JsonForms, bindings({
+      props: { data, renderers }
+    }));
+    expect(wrapper.props('schema')).toBe(undefined);
+  });
+
+  it('generates schema when not given via prop', () => {
+    const data = { number: 5.5 };
+    const renderers: JsonFormsUISchemaRegistryEntry[] = [];
+    const wrapper = shallowMount(JsonForms, bindings({
+      props: { data, renderers }
+    }));
+    console.log(Generate.jsonSchema(data));
+    console.log((wrapper.vm as any).jsonforms.core.schema);
+    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 = {
+      type: 'object',
+      properties: { number: { type: 'number' } }
+    };
+    const renderers: JsonFormsUISchemaRegistryEntry[] = [];
+    const wrapper = shallowMount(JsonForms, bindings({
+      props: { data, schema, renderers }
+    }));
+    expect((wrapper.vm as any).jsonforms.core.uischema).toEqual(
+      Generate.uiSchema(schema)
+    );
+  });
+});

packages/vue/tsconfig.json

@@ -13,7 +13,7 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "outDir": "./lib",
-    "types": ["node", "vue"],
+    "types": ["node", "vue", "jest"],
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
   "exclude": ["node_modules", "lib"]

packages/vue2/.gitignore

@@ -1,3 +1,4 @@
 src/
 dev/*
 !dev/serve.ts
+tests/unit/

packages/vue2/README.md

@@ -74,9 +74,6 @@ import VueCompositionAPI from '@vue/composition-api'
 Vue.use(VueCompositionAPI)
 ```
 
-Note that `@jsonforms/vue2` is distributed without type information.
-Please use `@jsonforms/vue` which is based on Vue 3+ for Typescript support.
-
 ## Renderer Set
 
 The `@jsonforms/vue` package offers JSON Forms Core bindings based on the composition API.
@@ -94,7 +91,7 @@ const controlRenderer = defineComponent({
   props: {
     ...rendererProps()
   },
-  setup(props) {
+  setup(props:any) {
     return useJsonFormsControl(props);
   },
   methods: {
@@ -169,7 +166,7 @@ const layoutRenderer = defineComponent({
   props: {
     ...rendererProps()
   },
-  setup(props) {
+  setup(props:any) {
     return useJsonFormsLayout(props);
   }
 });

packages/vue2/babel.config.js

@@ -1,5 +1,5 @@
-const devPresets = ['@vue/babel-preset-app'];
-const buildPresets = ['@babel/preset-env', '@babel/preset-typescript'];
+const devPresets = ['@vue/cli-plugin-babel/preset'];
+const buildPresets = ['@babel/preset-env', '@babel/preset-typescript', ];
 module.exports = {
-  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets)
+  presets: (process.env.NODE_ENV === 'production' ? buildPresets: devPresets)
 };

packages/vue2/config/config.ts

@@ -1 +1,9 @@
+/**
+ * Switch between Vue 3 and Vue 2 '@vue/composition-api'.
+ */
 export { computed, defineComponent, inject, ref, watch, watchEffect } from "@vue/composition-api";
+
+/**
+ * Compatibility type as defineComponent of '@vue/composition-api' can't properly handle PropTypes.
+ */
+export type CompType<_S,V> = V;

packages/vue2/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
+};