Merge branch 'dev'

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: {},
  };
  };
 }