Merge pull request #20 from huntflow/DEV-7136

refactor: use shallow resolve $ref instead of json-schema-ref-parser

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vjsf",
-  "version": "0.9.16",
+  "version": "0.9.17",
   "description": "Vue-component capable of building HTML forms out of a JSON schema. A port of react-jsonschema-form",
   "main": "dist/vjsf.umd.min.js",
   "scripts": {
@@ -51,7 +51,6 @@
     "ajv": "^8.6.1",
     "ajv-errors": "^3.0.0",
     "json-pointer": "^0.6.1",
-    "json-schema-ref-parser": "^9.0.6",
     "json-schema-traverse": "^0.4.1",
     "lodash": "^4.17.20",
     "shortid": "^2.2.15"

src/components/Form.vue

@@ -1,15 +1,8 @@
 <template>
-  <base-form
-    v-if="isDereference"
-    ref="vjsf"
-    v-bind="$props"
-    :schema="dereferencedSchema"
-    v-on="$listeners"
-  />
+  <base-form ref="vjsf" v-bind="$props" :schema="enrichedSchema" v-on="$listeners" />
 </template>
 
 <script>
-import { dereference } from '@/helpers/dereference';
 import { getEnrichedSchema } from '@/helpers/schema';
 import BaseForm from './_Form';
 import { PROPS } from './form-props';
@@ -26,19 +19,9 @@ export default {
       isDereference: false
     };
   },
-  watch: {
-    schema: {
-      immediate: true,
-      handler(schema) {
-        this.isDereference = false;
-        dereference(schema)
-          .then((result) => {
-            this.dereferencedSchema = getEnrichedSchema(result);
-          })
-          .finally(() => {
-            this.isDereference = true;
-          });
-      }
+  computed: {
+    enrichedSchema() {
+      return getEnrichedSchema(this.schema);
     }
   },
   methods: {

src/components/_Form.vue

@@ -22,11 +22,10 @@
     />
     <component
       :is="getRegistry().fields.SchemaField"
+      :id="idPrefix"
       :disabled="disabled"
       :error-schema="errorSchemaState"
       :form-data="formDataState"
-      :id-prefix="idPrefix"
-      :id-schema="idSchema"
       :registry="getRegistry()"
       :schema="resolvedSchema"
       :ui-schema="uiSchema"
@@ -40,7 +39,7 @@
 import pick from 'lodash/pick';
 import cloneDeep from 'lodash/cloneDeep';
 import { compileSchema, toErrorList } from '@/validate';
-import { toIdSchema, getDefaultRegistry } from '@/utils';
+import { getDefaultRegistry } from '@/utils';
 import { PROPS } from './form-props';
 import { VALIDATION_MODE } from '@/constants';
 import { getDefaults, resolveSchemaShallowly, removeEmptySchemaFields } from '@/helpers/schema';
@@ -72,9 +71,6 @@ export default {
     resolvedSchema() {
       return this.resolveSchemaShallowly(this.schema, this.formDataState);
     },
-    idSchema() {
-      return toIdSchema(this.resolvedSchema, this.uiSchema['ui:rootFieldId'], this.idPrefix);
-    },
     shouldShowErrorList() {
       return this.showErrorList !== false && this.errorsState && this.errorsState.length > 0;
     },
@@ -158,7 +154,6 @@ export default {
       const submitPayload = {
         schema: this.resolvedSchema,
         uiSchema: this.uiSchema,
-        idSchema: this.idSchema,
         formData: this.formDataState,
         edit: this.isEdit,
         errors: this.errorsState,

src/components/fields/ArrayField.FixedArray.DefaultTemplate.vue

@@ -1,9 +1,9 @@
 <template>
-  <fieldset :id="idSchema.$id">
+  <fieldset :id="id">
     <slot name="title" />
     <slot name="description" />
 
-    <div :key="'array-item-list-' + idSchema.$id" class="row array-item-list">
+    <div :key="'array-item-list-' + id" class="row array-item-list">
       <slot />
     </div>
 
@@ -15,7 +15,7 @@
 import AddButton from '../AddButton';
 
 const PROPS = {
-  idSchema: Object,
+  id: String,
   schema: Object,
   uiSchema: Object,
   canAdd: { type: Boolean, default: false },

src/components/fields/ArrayField.FixedArray.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="fieldTemplateCls"
-    :id-schema="idSchema"
+    :id="id"
     :schema="resolvedSchema"
     :ui-schema="uiSchema"
     :can-add="canAdd"
@@ -13,7 +13,7 @@
     <template v-if="label" #title>
       <component
         :is="registry.fields.TitleField"
-        :id="idSchema.$id + '__title'"
+        :id="id + '__title'"
         :title="label"
         :required="required"
       />
@@ -22,13 +22,14 @@
     <template v-if="description" #description>
       <component
         :is="registry.fields.DescriptionField"
-        :id="idSchema.$id + '__description'"
+        :id="id + '__description'"
         :description="description"
       />
     </template>
 
     <array-field-item
       v-for="(keyedItem, index) in keyedFormData"
+      :id="`${id}_${index}`"
       :key="keyedItem.key"
       :registry="registry"
       :index="index"
@@ -37,7 +38,6 @@
       :can-move-down="index >= itemSchemas.length && index < formDataItems.length - 1"
       :ui-schema="uiSchema"
       :item-schema="getItemSchema(keyedItem.item, index)"
-      :item-id-schema="getItemIdSchema(keyedItem.item, index)"
       :item-ui-schema="getItemUiSchema(index)"
       :item-data="keyedItem.item"
       :item-error-schema="errorSchema ? errorSchema[index] : undefined"
@@ -49,7 +49,6 @@
 
 <script>
 import pick from 'lodash/pick';
-import { toIdSchema } from '../../utils';
 import { canAddArrayItem } from '../../helpers/can-add-array-item';
 import ArrayFieldItem from './ArrayField.Item';
 import DefaultFixedArrayFieldTemplate from './ArrayField.FixedArray.DefaultTemplate';
@@ -61,8 +60,7 @@ const PROPS = {
   uiSchema: {},
   formData: {},
   errorSchema: {},
-  idPrefix: String,
-  idSchema: Object,
+  id: String,
   registry: { type: Object, required: true },
   rawErrors: Array,
   autofocus: { type: Boolean, default: false },
@@ -124,10 +122,6 @@ export default {
         ? this.uiSchema.items[index]
         : this.uiSchema.items || {};
       return itemUiSchema;
-    },
-    getItemIdSchema(item, index) {
-      const itemIdPrefix = this.idSchema.$id + '_' + index;
-      return toIdSchema(this.getItemSchema(item, index), itemIdPrefix, this.idPrefix);
     }
   }
 };

src/components/fields/ArrayField.Item.vue

@@ -12,11 +12,11 @@
   >
     <component
       :is="registry.fields.SchemaField"
+      :id="id"
       :schema="itemSchema"
       :ui-schema="itemUiSchema"
       :form-data="itemData"
       :error-schema="itemErrorSchema"
-      :id-schema="itemIdSchema"
       :required="isRequired"
       :registry="registry"
       :disabled="disabled"
@@ -42,7 +42,7 @@ const PROPS = {
   itemSchema: Object,
   itemData: {},
   itemUiSchema: Object,
-  itemIdSchema: Object,
+  id: String,
   itemErrorSchema: Object,
   rawErrors: { type: Array },
   rawErrorInfos: { type: Array },

src/components/fields/ArrayField.MultiSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="widgetCls"
-    :id="idSchema && idSchema.$id"
+    :id="id"
     multiple
     :options="widgetWithOptions.options"
     :schema="resolvedSchema"
@@ -28,7 +28,7 @@ const PROPS = {
   description: String,
   placeholder: String,
   schema: Object,
-  idSchema: Object,
+  id: String,
   uiSchema: Object,
   formData: Array,
   registry: { type: Object, required: true },

src/components/fields/ArrayField.NormalArray.DefaultTemplate.vue

@@ -1,9 +1,9 @@
 <template>
-  <fieldset :id="idSchema.$id">
+  <fieldset :id="id">
     <slot name="title" />
     <slot name="description" />
 
-    <div :key="'array-item-list-' + idSchema.$id" class="row array-item-list">
+    <div :key="'array-item-list-' + id" class="row array-item-list">
       <slot />
     </div>
 
@@ -15,7 +15,7 @@
 import AddButton from '../AddButton';
 
 const PROPS = {
-  idSchema: Object,
+  id: String,
   schema: Object,
   uiSchema: Object,
   canAdd: { type: Boolean, default: false },