@rjsf/core - npm Package Compare versions

Comparing version 5.23.2 to 5.24.0

lib/components/Form.d.ts

@@ -276,5 +276,6 @@ import { Component, ElementType, FormEvent, ReactNode, Ref, RefObject } from 'react';
      * @param isSchemaChanged - A flag indicating whether the schema has changed.
+     * @param formDataChangedFields - The changed fields of `formData`
      * @returns - The new state for the `Form`
      */
-    getStateFromProps(props: FormProps<T, S, F>, inputFormData?: T, retrievedSchema?: S, isSchemaChanged?: boolean): FormState<T, S, F>;
+    getStateFromProps(props: FormProps<T, S, F>, inputFormData?: T, retrievedSchema?: S, isSchemaChanged?: boolean, formDataChangedFields?: string[]): FormState<T, S, F>;
     /** React lifecycle method that is used to determine whether component should be updated.
@@ -329,2 +330,12 @@ *
     /**
+     * If the retrievedSchema has changed the new retrievedSchema is returned.
+     * Otherwise, the old retrievedSchema is returned to persist reference.
+     * -  This ensures that AJV retrieves the schema from the cache when it has not changed,
+     *    avoiding the performance cost of recompiling the schema.
+     *
+     * @param retrievedSchema The new retrieved schema.
+     * @returns The new retrieved schema if it has changed, else the old retrieved schema.
+     */
+    private updateRetrievedSchema;
+    /**
      * Callback function to handle reset form data.
@@ -331,0 +342,0 @@ * - Reset all fields with default values.

lib/components/Form.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component, createRef } from 'react';
-import { createSchemaUtils, deepEquals, getTemplate, getUiOptions, isObject, mergeObjects, NAME_KEY, RJSF_ADDITIONAL_PROPERTIES_FLAG, shouldRender, SUBMIT_BTN_OPTIONS_KEY, toErrorList, UI_GLOBAL_OPTIONS_KEY, UI_OPTIONS_KEY, validationDataMerge, } from '@rjsf/utils';
+import { createSchemaUtils, deepEquals, getChangedFields, getTemplate, getUiOptions, isObject, mergeObjects, NAME_KEY, RJSF_ADDITIONAL_PROPERTIES_FLAG, shouldRender, SUBMIT_BTN_OPTIONS_KEY, toErrorList, UI_GLOBAL_OPTIONS_KEY, UI_OPTIONS_KEY, validationDataMerge, } from '@rjsf/utils';
 import _forEach from 'lodash/forEach';
@@ -99,6 +99,8 @@ import _get from 'lodash/get';
             const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-            const { schemaUtils, schema, retrievedSchema } = this.state;
+            const { schemaUtils, schema } = this.state;
+            let retrievedSchema = this.state.retrievedSchema;
             if (isObject(formData) || Array.isArray(formData)) {
-                const newState = this.getStateFromProps(this.props, formData, retrievedSchema);
+                const newState = this.getStateFromProps(this.props, formData);
                 formData = newState.formData;
+                retrievedSchema = newState.retrievedSchema;
             }
@@ -323,4 +325,7 @@ const mustValidate = !noValidate && liveValidate;
         if (!deepEquals(this.props, prevProps)) {
+            const formDataChangedFields = getChangedFields(this.props.formData, prevProps.formData);
             const isSchemaChanged = !deepEquals(prevProps.schema, this.props.schema);
-            const isFormDataChanged = !deepEquals(prevProps.formData, this.props.formData);
+            // When formData is not an object, getChangedFields returns an empty array.
+            // In this case, deepEquals is most needed to check again.
+            const isFormDataChanged = formDataChangedFields.length > 0 || !deepEquals(prevProps.formData, this.props.formData);
             const nextState = this.getStateFromProps(this.props, this.props.formData, 
@@ -330,3 +335,3 @@ // If the `schema` has changed, we need to update the retrieved schema.
             //  match one of the subSchemas, the retrieved schema must be updated.
-            isSchemaChanged || isFormDataChanged ? undefined : this.state.retrievedSchema, isSchemaChanged);
+            isSchemaChanged || isFormDataChanged ? undefined : this.state.retrievedSchema, isSchemaChanged, formDataChangedFields);
             const shouldUpdate = !deepEquals(nextState, prevState);
@@ -371,5 +376,6 @@ return { nextState, shouldUpdate };
      * @param isSchemaChanged - A flag indicating whether the schema has changed.
+     * @param formDataChangedFields - The changed fields of `formData`
      * @returns - The new state for the `Form`
      */
-    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false) {
+    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
         var _a;
@@ -395,3 +401,3 @@ const state = this.state || {};
         const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
-        const _retrievedSchema = retrievedSchema !== null && retrievedSchema !== void 0 ? retrievedSchema : schemaUtils.retrieveSchema(schema, formData);
+        const _retrievedSchema = this.updateRetrievedSchema(retrievedSchema !== null && retrievedSchema !== void 0 ? retrievedSchema : schemaUtils.retrieveSchema(schema, formData));
         const getCurrentErrors = () => {
@@ -435,2 +441,9 @@ // If the `props.noValidate` option is set or the schema has changed, we reset the error state.
             errorSchema = currentErrors.errorSchema;
+            if (formDataChangedFields.length > 0) {
+                const newErrorSchema = formDataChangedFields.reduce((acc, key) => {
+                    acc[key] = undefined;
+                    return acc;
+                }, {});
+                errorSchema = schemaValidationErrorSchema = mergeObjects(currentErrors.errorSchema, newErrorSchema, 'preventDuplicates');
+            }
         }
@@ -518,2 +531,16 @@ if (props.extraErrors) {
     }
+    /**
+     * If the retrievedSchema has changed the new retrievedSchema is returned.
+     * Otherwise, the old retrievedSchema is returned to persist reference.
+     * -  This ensures that AJV retrieves the schema from the cache when it has not changed,
+     *    avoiding the performance cost of recompiling the schema.
+     *
+     * @param retrievedSchema The new retrieved schema.
+     * @returns The new retrieved schema if it has changed, else the old retrieved schema.
+     */
+    updateRetrievedSchema(retrievedSchema) {
+        var _a;
+        const isTheSame = deepEquals(retrievedSchema, (_a = this.state) === null || _a === void 0 ? void 0 : _a.retrievedSchema);
+        return isTheSame ? this.state.retrievedSchema : retrievedSchema;
+    }
     /** Returns the registry for the form */
@@ -520,0 +547,0 @@ getRegistry() {

package.json

 {
   "name": "@rjsf/core",
-  "version": "5.23.2",
+  "version": "5.24.0",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
@@ -57,6 +57,6 @@ "scripts": {
     "@babel/preset-typescript": "^7.23.3",
-    "@rjsf/snapshot-tests": "^5.23.2",
-    "@rjsf/utils": "^5.23.2",
-    "@rjsf/validator-ajv6": "^5.23.2",
-    "@rjsf/validator-ajv8": "^5.23.2",
+    "@rjsf/snapshot-tests": "^5.24.0",
+    "@rjsf/utils": "^5.24.0",
+    "@rjsf/validator-ajv6": "^5.24.0",
+    "@rjsf/validator-ajv8": "^5.24.0",
     "@types/jest": "^29.5.12",
@@ -107,3 +107,3 @@ "@types/lodash": "^4.14.202",
   },
-  "gitHead": "e95ead8cf869d4f9082da78b3ed61870cef520da"
+  "gitHead": "be67dc6167eb583bd01e50906e6e524545419a84"
 }

No alert changes

Improved metrics

Total package byte prevSize

1571405

increased by0.88%

Lines of code

20692

increased by0.82%

No dependency changes