mstResolver: react-hook-form resolver for mobx-state-tree

[OnkelTem]

Hi there!

I'm building an app with mobx-state-tree models. When it comes to forms validation, a usual solution would be to pick one of validation libs like Yup, Zod, Arktype etc. Especially if they are already integrated in the form lib of your preference.

My favorite form library is react-hook-form. Through its @hookform/resolvers package it provides integrations for around 20 different validation libraries, but not MST.

Today I added a basic support for MST to react-hook-form, but I haven't committed it anywhere, so here it is, as a snippet:

import { Resolver } from "react-hook-form";
import { toNestErrors, validateFieldsNatively } from "@hookform/resolvers";
import { IValidationError } from "mobx-state-tree/dist/core/type/type-checker";
import { FieldError } from "react-hook-form";
import { IAnyModelType, SnapshotOut } from "mobx-state-tree";

function parseErrorSchema(errors: IValidationError[], _: boolean) {
  return errors.reduce<Record<string, FieldError>>((previous, error) => {
    const path = error.context.map((item) => item.path).join(".");
    if (!previous[path]) {
      previous[path] = { message: error.message, type: "error" };
    }

    return previous;
  }, {});
}

/**
 * Creates a resolver for react-hook-form using mobx-state-tree schema validation
 * @param {IAnyModelType} schema - mobx-state-tree validation schema
 * @param {Parameters<(typeof schema)['validate']>[1]} schemaOptions - Options to pass to mobx-state-tree's validate
 * @example
 * const schema = types.model({
 *   name: types.string,
 *   age: types.number,
 * });
 *
 * useForm({
 *   resolver: mstResolver(schema)
 * });
 */

export function mstResolver<M extends IAnyModelType, Context, _>(
  schema: M,
  schemaOptions: Parameters<(typeof schema)["validate"]>[1] = []
): Resolver<SnapshotOut<M>, Context, SnapshotOut<M>> {
  return async (values, _, options) => {
    const errors = schema.validate(values, schemaOptions);

    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    options.shouldUseNativeValidation && validateFieldsNatively({}, options);

    if (errors.length > 0) {
      return {
        values: {},
        errors: toNestErrors(
          parseErrorSchema(
            errors,
            !options.shouldUseNativeValidation && options.criteriaMode === "all"
          ),
          options
        ),
      };
    }

    return {
      values,
      errors: {},
    };
  };
}

You can play with it in this sandbox.

I haven't yet tested it thoroughly. So if you find any problems - please report/fix :)

Implementation details

• options.shouldUseNativeValidation && options.criteriaMode === "all" isn't used in parseErrorSchema(). Honestly I didn't get the idea behind what they do with it in the yupResolver that I was using as an example.
• also, react-hook-form's Resolver supports fields modifications during validation. I'm not sure if MST modifies anything during its validation. So I don't use this feature of the Resolver.