feat: infer input/output types from schema (#753)

BREAKING CHANGE:

* Requires [email protected] or higher

---------

Co-authored-by: Kotaro Sugawara <[email protected]>

Author: jorisre

.github/workflows/compressedSize.yml

@@ -16,3 +16,4 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          install-script: "bun install --frozen-lockfile"

.husky/pre-commit

@@ -33,6 +33,9 @@ call_lefthook()
     then
       "$dir/node_modules/lefthook/bin/index.js" "$@"
 
+    elif go tool lefthook -h >/dev/null 2>&1
+    then
+      go tool lefthook "$@"
     elif bundle exec lefthook -h >/dev/null 2>&1
     then
       bundle exec lefthook "$@"
@@ -42,9 +45,9 @@ call_lefthook()
     elif pnpm lefthook -h >/dev/null 2>&1
     then
       pnpm lefthook "$@"
-    elif swift package plugin lefthook >/dev/null 2>&1
+    elif swift package lefthook >/dev/null 2>&1
     then
-      swift package --disable-sandbox plugin lefthook "$@"
+      swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
     elif command -v mint >/dev/null 2>&1
     then
       mint run csjones/lefthook-plugin "$@"

.husky/prepare-commit-msg

@@ -33,6 +33,9 @@ call_lefthook()
     then
       "$dir/node_modules/lefthook/bin/index.js" "$@"
 
+    elif go tool lefthook -h >/dev/null 2>&1
+    then
+      go tool lefthook "$@"
     elif bundle exec lefthook -h >/dev/null 2>&1
     then
       bundle exec lefthook "$@"
@@ -42,9 +45,9 @@ call_lefthook()
     elif pnpm lefthook -h >/dev/null 2>&1
     then
       pnpm lefthook "$@"
-    elif swift package plugin lefthook >/dev/null 2>&1
+    elif swift package lefthook >/dev/null 2>&1
     then
-      swift package --disable-sandbox plugin lefthook "$@"
+      swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
     elif command -v mint >/dev/null 2>&1
     then
       mint run csjones/lefthook-plugin "$@"

README.md

@@ -55,6 +55,36 @@ Install your preferred validation library alongside `@hookform/resolvers`.
 | zod  | ✅ | `firstError | all` |
 </details>
 
+## TypeScript
+
+Most of the resolvers can infer the output type from the schema. See comparison table for more details.
+
+```tsx
+useForm<Input, Context, Output>()
+```
+
+Example:
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const schema = z.object({
+  id: z.number(),
+});
+
+// Automatically infers the output type from the schema
+useForm({
+  resolver: zodResolver(schema),
+});
+
+// Force the output type
+useForm<z.input<typeof schema>, any, z.output<typeof schema>>({
+  resolver: zodResolver(schema),
+});
+```
+
 ## Links
 
 - [React-hook-form validation resolver documentation ](https://react-hook-form.com/docs/useform#resolver)

ajv/package.json

@@ -11,7 +11,7 @@
   "types": "dist/index.d.ts",
   "license": "MIT",
   "peerDependencies": {
-    "react-hook-form": "^7.0.0",
+    "react-hook-form": "7.55.0",
     "@hookform/resolvers": "^2.0.0",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0"

arktype/package.json

@@ -11,7 +11,7 @@
   "types": "dist/index.d.ts",
   "license": "MIT",
   "peerDependencies": {
-    "react-hook-form": "^7.0.0",
+    "react-hook-form": "7.55.0",
     "@hookform/resolvers": "^2.0.0",
     "arktype": "^2.0.0"
   }

arktype/src/__tests__/Form.tsx

@@ -10,8 +10,6 @@ const schema = type({
   password: 'string>1',
 });
 
-type FormData = typeof schema.infer & { unusedProperty: string };
-
 function TestComponent({
   onSubmit,
 }: {
@@ -54,29 +52,3 @@ test("form's validation with arkType and TypeScript's integration", async () =>
   ).toBeInTheDocument();
   expect(handleSubmit).not.toHaveBeenCalled();
 });
-
-export function TestComponentManualType({
-  onSubmit,
-}: {
-  onSubmit: (data: FormData) => void;
-}) {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<typeof schema.infer, undefined, FormData>({
-    resolver: arktypeResolver(schema), // Useful to check TypeScript regressions
-  });
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register('username')} />
-      {errors.username && <span role="alert">{errors.username.message}</span>}
-
-      <input {...register('password')} />
-      {errors.password && <span role="alert">{errors.password.message}</span>}
-
-      <button type="submit">submit</button>
-    </form>
-  );
-}

arktype/src/__tests__/arktype.ts

@@ -1,3 +1,6 @@
+import { type } from 'arktype';
+import { Resolver, useForm } from 'react-hook-form';
+import { SubmitHandler } from 'react-hook-form';
 import { arktypeResolver } from '..';
 import { fields, invalidData, schema, validData } from './__fixtures__/data';
 
@@ -23,4 +26,57 @@ describe('arktypeResolver', () => {
 
     expect(result).toMatchSnapshot();
   });
+
+  /**
+   * Type inference tests
+   */
+  it('should correctly infer the output type from a arktype schema', () => {
+    const resolver = arktypeResolver(type({ id: 'number' }));
+
+    expectTypeOf(resolver).toEqualTypeOf<
+      Resolver<{ id: number }, unknown, { id: number }>
+    >();
+  });
+
+  it('should correctly infer the output type from a arktype schema using a transform', () => {
+    const resolver = arktypeResolver(
+      type({ id: type('string').pipe((s) => Number.parseInt(s)) }),
+    );
+
+    expectTypeOf(resolver).toEqualTypeOf<
+      Resolver<{ id: string }, unknown, { id: number }>
+    >();
+  });
+
+  it('should correctly infer the output type from a arktype schema for the handleSubmit function in useForm', () => {
+    const schema = type({ id: 'number' });
+
+    const form = useForm({
+      resolver: arktypeResolver(schema),
+    });
+
+    expectTypeOf(form.watch('id')).toEqualTypeOf<number>();
+
+    expectTypeOf(form.handleSubmit).parameter(0).toEqualTypeOf<
+      SubmitHandler<{
+        id: number;
+      }>
+    >();
+  });
+
+  it('should correctly infer the output type from a arktype schema with a transform for the handleSubmit function in useForm', () => {
+    const schema = type({ id: type('string').pipe((s) => Number.parseInt(s)) });
+
+    const form = useForm({
+      resolver: arktypeResolver(schema),
+    });
+
+    expectTypeOf(form.watch('id')).toEqualTypeOf<string>();
+
+    expectTypeOf(form.handleSubmit).parameter(0).toEqualTypeOf<
+      SubmitHandler<{
+        id: number;
+      }>
+    >();
+  });
 });

arktype/src/arktype.ts

@@ -1,25 +1,53 @@
 import { toNestErrors, validateFieldsNatively } from '@hookform/resolvers';
-import { ArkErrors, Type } from 'arktype';
-import { FieldError, FieldErrors, Resolver } from 'react-hook-form';
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { getDotPath } from '@standard-schema/utils';
+import { FieldError, FieldValues, Resolver } from 'react-hook-form';
 
-function parseErrorSchema(arkErrors: ArkErrors): Record<string, FieldError> {
-  const errors = [...arkErrors];
-  const fieldsErrors: Record<string, FieldError> = {};
+function parseErrorSchema(
+  issues: readonly StandardSchemaV1.Issue[],
+  validateAllFieldCriteria: boolean,
+) {
+  const errors: Record<string, FieldError> = {};
 
-  for (; errors.length; ) {
-    const error = errors[0];
-    const _path = error.path.join('.');
+  for (let i = 0; i < issues.length; i++) {
+    const error = issues[i];
+    const path = getDotPath(error);
 
-    if (!fieldsErrors[_path]) {
-      fieldsErrors[_path] = { message: error.message, type: error.code };
-    }
+    if (path) {
+      if (!errors[path]) {
+        errors[path] = { message: error.message, type: '' };
+      }
+
+      if (validateAllFieldCriteria) {
+        const types = errors[path].types || {};
 
-    errors.shift();
+        errors[path].types = {
+          ...types,
+          [Object.keys(types).length]: error.message,
+        };
+      }
+    }
   }
 
-  return fieldsErrors;
+  return errors;
 }
 
+export function arktypeResolver<Input extends FieldValues, Context, Output>(
+  schema: StandardSchemaV1<Input, Output>,
+  _schemaOptions?: never,
+  resolverOptions?: {
+    raw?: false;
+  },
+): Resolver<Input, Context, Output>;
+
+export function arktypeResolver<Input extends FieldValues, Context, Output>(
+  schema: StandardSchemaV1<Input, Output>,
+  _schemaOptions: never | undefined,
+  resolverOptions: {
+    raw: true;
+  },
+): Resolver<Input, Context, Input>;
+
 /**
  * Creates a resolver for react-hook-form using Arktype schema validation
  * @param {Schema} schema - The Arktype schema to validate against
@@ -35,28 +63,36 @@ function parseErrorSchema(arkErrors: ArkErrors): Record<string, FieldError> {
  *   resolver: arktypeResolver(schema)
  * });
  */
-export function arktypeResolver<Schema extends Type<any, any>>(
-  schema: Schema,
+export function arktypeResolver<Input extends FieldValues, Context, Output>(
+  schema: StandardSchemaV1<Input, Output>,
   _schemaOptions?: never,
   resolverOptions: {
     raw?: boolean;
   } = {},
-): Resolver<Schema['inferOut']> {
-  return (values, _, options) => {
-    const out = schema(values);
+): Resolver<Input, Context, Input | Output> {
+  return async (values: Input, _, options) => {
+    let result = schema['~standard'].validate(values);
+    if (result instanceof Promise) {
+      result = await result;
+    }
+
+    if (result.issues) {
+      const errors = parseErrorSchema(
+        result.issues,
+        !options.shouldUseNativeValidation && options.criteriaMode === 'all',
+      );
 
-    if (out instanceof ArkErrors) {
       return {
         values: {},
-        errors: toNestErrors(parseErrorSchema(out), options),
+        errors: toNestErrors(errors, options),
       };
     }
 
     options.shouldUseNativeValidation && validateFieldsNatively({}, options);
 
     return {
-      errors: {} as FieldErrors,
-      values: resolverOptions.raw ? Object.assign({}, values) : out,
+      values: resolverOptions.raw ? Object.assign({}, values) : result.value,
+      errors: {},
     };
   };
 }