v1.19.0

Breaking Changes (Future APIs)

• Removed deprecated exports from @conform-to/react/future (#1183)

  • FormOptionsProvider component
  • BaseMetadata type
  • BaseErrorShape type
  • CustomTypes type
  • CustomMetadata type
  • CustomMetadataDefinition type

  The deprecated schema option in the future useForm hook is also removed. If you were validating with a schema, pass the schema as the first argument: useForm(schema, options) instead of useForm({ schema, ... }).

• Improved ErrorShape handling through out the future APIs. form.errors and field.errors now use your ErrorShape directly instead of always wrapping it in an array. (#1183)

  If you were using a custom ErrorShape, either by specifying it in the generics or through the isError option from configureForms, update it from ErrorShape to ErrorShape[] to keep the array structure you had before. For example, if you previously used string, change it to string[] to keep the errors as arrays of strings:

  const forms = configureForms({
  -  isError: shape<string>(),
  +  isError: shape<string[]>(),
  });

• report() now accepts either schema issues or an explicit error payload, but not both in the same error object. If you were combining them before, append the extra message as another issue instead. (#1183)

  const result = schema.safeParse(submission.payload);
  const isEmailUnique = await checkEmailUnique(submission.payload.email);
  
  if (!result.success || !isEmailUnique) {
    const issues = !result.success ? [...result.error.issues] : [];
  
  + if (!isEmailUnique) {
  +   issues.push({
  +     message: 'Email is already taken',
  +     path: ['email'],
  +   });
  + }
  
    return {
      result: report(submission, {
        error: {
          issues,
  -       fieldErrors: {
  -         email: !isEmailUnique ? ['Email is already taken'] : [],
  -       },
        },
      }),
    };
  }

What's Changed

• Added support for customizing serializer based on field name (#1184)

  The serialize options now let you customize serialization based on ctx.name, both globally through configureForms() and per form through useForm(), while delegating everything else back to Conform's default serializer with ctx.defaultSerialize.

  This changes the serializer callback signature to:

  serialize(value, ctx) {
    // Custom serialization for a specific field name
    if (ctx.name === 'metadata') {
      return typeof value === 'string' || value == null
        ? value
        : JSON.stringify(value);
    }
    return ctx.defaultSerialize(value);
  }

Full Changelog: v1.18.0...v1.19.0