Improve Form to stash schemaUtils.rootSchema as state.schema (#4687)

To assist potential future transformations of the `rootSchema` in the `schemaUtils` updated `Form` to always use that as the `state.schema`
- In `@rjsf/utils`:
  - Added `getRootSchema()` to the `SchemaUtilsType` and `createSchemaUtils()`
  - Updated the tests to maintain 100% coverage
- In `@rjsf/core`:
  - Updated `Form` to always pull the `rootSchema` from the `schemaUtils` and put it into the `state.schema`, making sure to use that in the `render()`, `getStateFromProps()` and `getRegistry()`
  - Updated the `test_utils.js` to pass the `validator` in the `setProps()` function
- Updated `CHANGELOG.md` accordingly

Author: heath-freenome

CHANGELOG.md

@@ -18,10 +18,18 @@ should change the heading of the (upcoming) version to include a major version b
 
 # 6.0.0-beta.12
 
+## @rjsf/core
+
+- Updated `Form` to store the `schemaUtils.getRootSchema()` into the `state.schema` and use that everywhere as the `schema`
+
 ## @rjsf/shadcn
 
 - Updated the building of `shadcn` to use the `lodashReplacer` with `tsc-alias` fixing [#4678](https://github.com/rjsf-team/react-jsonschema-form/issues/4678)
 
+## @rjsf/utils
+
+- Updated `SchemaUtils` and `createSchemaUtils()` to add a new `getRootSchema()` function
+
 # 6.0.0-beta.11
 
 ## @rjsf/antd

packages/core/src/components/Form.tsx

@@ -387,11 +387,11 @@ export default class Form<
   ): FormState<T, S, F> {
     const state: FormState<T, S, F> = this.state || {};
     const schema = 'schema' in props ? props.schema : this.props.schema;
+    const validator = 'validator' in props ? props.validator : this.props.validator;
     const uiSchema: UiSchema<T, S, F> = ('uiSchema' in props ? props.uiSchema! : this.props.uiSchema!) || {};
     const edit = typeof inputFormData !== 'undefined';
     const liveValidate = 'liveValidate' in props ? props.liveValidate : this.props.liveValidate;
     const mustValidate = edit && !props.noValidate && liveValidate;
-    const rootSchema = schema;
     const experimental_defaultFormStateBehavior =
       'experimental_defaultFormStateBehavior' in props
         ? props.experimental_defaultFormStateBehavior
@@ -404,22 +404,23 @@ export default class Form<
     if (
       !schemaUtils ||
       schemaUtils.doesSchemaUtilsDiffer(
-        props.validator,
-        rootSchema,
+        validator,
+        schema,
         experimental_defaultFormStateBehavior,
         experimental_customMergeAllOf,
       )
     ) {
       schemaUtils = createSchemaUtils<T, S, F>(
-        props.validator,
-        rootSchema,
+        validator,
+        schema,
         experimental_defaultFormStateBehavior,
         experimental_customMergeAllOf,
       );
     }
-    const formData: T = schemaUtils.getDefaultFormState(schema, inputFormData) as T;
+    const rootSchema = schemaUtils.getRootSchema();
+    const formData: T = schemaUtils.getDefaultFormState(rootSchema, inputFormData) as T;
     const _retrievedSchema = this.updateRetrievedSchema(
-      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData),
+      retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData),
     );
 
     const getCurrentErrors = (): ValidationData<T> => {
@@ -443,7 +444,7 @@ export default class Form<
     let schemaValidationErrors: RJSFValidationError[] = state.schemaValidationErrors;
     let schemaValidationErrorSchema: ErrorSchema<T> = state.schemaValidationErrorSchema;
     if (mustValidate) {
-      const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
+      const schemaValidation = this.validate(formData, rootSchema, schemaUtils, _retrievedSchema);
       errors = schemaValidation.errors;
       // If retrievedSchema is undefined which means the schema or formData has changed, we do not merge state.
       // Else in the case where it hasn't changed, we merge 'state.errorSchema' with 'schemaValidation.errorSchema.' This done to display the raised field error.
@@ -492,7 +493,7 @@ export default class Form<
     );
     const nextState: FormState<T, S, F> = {
       schemaUtils,
-      schema,
+      schema: rootSchema,
       uiSchema,
       idSchema,
       formData,
@@ -541,7 +542,7 @@ export default class Form<
    */
   validate(
     formData: T | undefined,
-    schema = this.props.schema,
+    schema = this.state.schema,
     altSchemaUtils?: SchemaUtilsType<T, S, F>,
     retrievedSchema?: S,
   ): ValidationData<T> {
@@ -869,7 +870,7 @@ export default class Form<
   /** Returns the registry for the form */
   getRegistry(): Registry<T, S, F> {
     const { translateString: customTranslateString, uiSchema = {} } = this.props;
-    const { schemaUtils } = this.state;
+    const { schema, schemaUtils } = this.state;
     const { fields, templates, widgets, formContext, translateString } = getDefaultRegistry<T, S, F>();
     return {
       fields: { ...fields, ...this.props.fields },
@@ -882,7 +883,7 @@ export default class Form<
         },
       },
       widgets: { ...widgets, ...this.props.widgets },
-      rootSchema: this.props.schema,
+      rootSchema: schema,
       formContext: this.props.formContext || formContext,
       schemaUtils,
       translateString: customTranslateString || translateString,

packages/core/test/test_utils.js

@@ -33,7 +33,7 @@ export function createSandbox() {
 }
 
 export function setProps(comp, newProps) {
-  render(createElement(Form, newProps), {
+  render(createElement(Form, { validator, ...newProps }), {
     container: comp.ref.current.formElement.current.parentNode,
   });
 }

packages/utils/src/createSchemaUtils.ts

@@ -63,6 +63,14 @@ class SchemaUtils<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
     this.experimental_customMergeAllOf = experimental_customMergeAllOf;
   }
 
+  /** Returns the `rootSchema` in the `SchemaUtilsType`
+   *
+   * @returns - The `rootSchema`
+   */
+  getRootSchema() {
+    return this.rootSchema;
+  }
+
   /** Returns the `ValidatorType` in the `SchemaUtilsType`
    *
    * @returns - The `ValidatorType`

packages/utils/src/types.ts

@@ -1114,6 +1114,11 @@ export interface FoundFieldType<S extends StrictRJSFSchema = RJSFSchema> {
  * set of APIs to the `@rjsf/core` components and the various themes as well.
  */
 export interface SchemaUtilsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
+  /** Returns the `rootSchema` in the `SchemaUtilsType`
+   *
+   * @returns - The rootSchema
+   */
+  getRootSchema(): S;
   /** Returns the `ValidatorType` in the `SchemaUtilsType`
    *
    * @returns - The `ValidatorType`

packages/utils/test/createSchemaUtils.test.ts

@@ -15,6 +15,10 @@ describe('createSchemaUtils()', () => {
   };
   const schemaUtils: SchemaUtilsType = createSchemaUtils(testValidator, rootSchema, defaultFormStateBehavior);
 
+  it('getRootSchema()', () => {
+    expect(schemaUtils.getRootSchema()).toEqual(rootSchema);
+  });
+
   it('getValidator()', () => {
     expect(schemaUtils.getValidator()).toBe(testValidator);
   });