feat(typeschema): add typeschema resolver

Author: decs

README.md

@@ -45,6 +45,7 @@
   - [TypeBox](#typebox)
   - [ArkType](#arktype)
   - [Valibot](#valibot)
+  - [TypeSchema](#typeschema)
 - [Backers](#backers)
   - [Sponsors](#sponsors)
 - [Contributors](#contributors)
@@ -576,6 +577,38 @@ const App = () => {
 };
 ```
 
+### [TypeSchema](https://typeschema.com)
+
+Universal adapter for schema validation, compatible with [any validation library](https://typeschema.com/#coverage)
+
+[![npm](https://img.shields.io/bundlephobia/minzip/@typeschema/main?style=for-the-badge)](https://bundlephobia.com/result?p=@typeschema/main)
+
+```typescript jsx
+import { useForm } from 'react-hook-form';
+import { typeschemaResolver } from '@hookform/resolvers/typeschema';
+import * as z from 'zod';
+
+// Use your favorite validation library
+const schema = z.object({
+  username: z.string().min(1, { message: 'Required' }),
+  password: z.number().min(1, { message: 'Required' }),
+});
+
+const App = () => {
+  const { register, handleSubmit } = useForm({
+    resolver: typeschemaResolver(schema),
+  });
+
+  return (
+    <form onSubmit={handleSubmit((d) => console.log(d))}>
+      <input {...register('username')} />
+      <input type="password" {...register('password')} />
+      <input type="submit" />
+    </form>
+  );
+};
+```
+
 ## Backers
 
 Thanks goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].

config/node-13-exports.js

@@ -16,6 +16,7 @@ const subRepositories = [
   'typebox',
   'arktype',
   'valibot',
+  'typeschema',
 ];
 
 const copySrc = () => {

package.json

@@ -99,6 +99,12 @@
       "import": "./valibot/dist/valibot.mjs",
       "require": "./valibot/dist/valibot.js"
     },
+    "./typeschema": {
+      "types": "./typeschema/dist/index.d.ts",
+      "umd": "./typeschema/dist/typeschema.umd.js",
+      "import": "./typeschema/dist/typeschema.mjs",
+      "require": "./typeschema/dist/typeschema.js"
+    },
     "./package.json": "./package.json",
     "./*": "./*"
   },
@@ -145,7 +151,10 @@
     "arktype/dist",
     "valibot/package.json",
     "valibot/src",
-    "valibot/dist"
+    "valibot/dist",
+    "typeschema/package.json",
+    "typeschema/src",
+    "typeschema/dist"
   ],
   "publishConfig": {
     "access": "public"
@@ -168,6 +177,7 @@
     "build:typebox": "microbundle --cwd typebox --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm,@sinclair/typebox/value=value",
     "build:arktype": "microbundle --cwd arktype --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm",
     "build:valibot": "microbundle --cwd valibot --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm",
+    "build:typeschema": "microbundle --cwd typeschema --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm",
     "postbuild": "node ./config/node-13-exports.js",
     "lint": "eslint . --ext .ts,.js --ignore-path .gitignore",
     "lint:types": "tsc",
@@ -196,7 +206,8 @@
     "typanion",
     "ajv",
     "TypeBox",
-    "arktype"
+    "arktype",
+    "typeschema"
   ],
   "repository": {
     "type": "git",
@@ -216,6 +227,9 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/node": "^20.5.2",
     "@types/react": "^18.2.20",
+    "@typeschema/core": "^0.13.2",
+    "@typeschema/main": "^0.13.7",
+    "@typeschema/zod": "^0.13.3",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
     "@vitejs/plugin-react": "^4.0.4",

pnpm-lock.yaml

@@ -0,0 +1,18 @@
+{
+  "name": "@hookform/resolvers/typeschema",
+  "amdName": "hookformResolversTypeschema",
+  "version": "1.0.0",
+  "private": true,
+  "description": "React Hook Form validation resolver: typeschema",
+  "main": "dist/typeschema.js",
+  "module": "dist/typeschema.module.js",
+  "umd:main": "dist/typeschema.umd.js",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "peerDependencies": {
+    "react-hook-form": "^7.0.0",
+    "@hookform/resolvers": "^2.0.0",
+    "@typeschema/main": "^0.13.7"
+  }
+}

typeschema/package.json

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import type { Infer } from '@typeschema/main';
+import { z } from 'zod';
+import { typeschemaResolver } from '..';
+
+const USERNAME_REQUIRED_MESSAGE = 'username field is required';
+const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
+
+const schema = z.object({
+  username: z.string().min(1, { message: USERNAME_REQUIRED_MESSAGE }),
+  password: z.string().min(1, { message: PASSWORD_REQUIRED_MESSAGE }),
+});
+
+type FormData = Infer<typeof schema>;
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const { register, handleSubmit } = useForm<FormData>({
+    resolver: typeschemaResolver(schema),
+    shouldUseNativeValidation: true,
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('username')} placeholder="username" />
+
+      <input {...register('password')} placeholder="password" />
+
+      <button type="submit">submit</button>
+    </form>
+  );
+}
+
+test("form's native validation with TypeSchema", async () => {
+  const handleSubmit = vi.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  // username
+  let usernameField = screen.getByPlaceholderText(
+    /username/i,
+  ) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  // password
+  let passwordField = screen.getByPlaceholderText(
+    /password/i,
+  ) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+
+  await user.click(screen.getByText(/submit/i));
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(false);
+  expect(usernameField.validationMessage).toBe(USERNAME_REQUIRED_MESSAGE);
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(false);
+  expect(passwordField.validationMessage).toBe(PASSWORD_REQUIRED_MESSAGE);
+
+  await user.type(screen.getByPlaceholderText(/username/i), 'joe');
+  await user.type(screen.getByPlaceholderText(/password/i), 'password');
+
+  // username
+  usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
+  expect(usernameField.validity.valid).toBe(true);
+  expect(usernameField.validationMessage).toBe('');
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(true);
+  expect(passwordField.validationMessage).toBe('');
+});

typeschema/src/__tests__/Form-native-validation.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import type { Infer } from '@typeschema/main';
+import { z } from 'zod';
+import { typeschemaResolver } from '..';
+
+const schema = z.object({
+  username: z.string().min(1, { message: 'username field is required' }),
+  password: z.string().min(1, { message: 'password field is required' }),
+});
+
+type FormData = Infer<typeof schema> & { unusedProperty: string };
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: typeschemaResolver(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>
+  );
+}
+
+test("form's validation with TypeSchema and TypeScript's integration", async () => {
+  const handleSubmit = vi.fn();
+  render(<TestComponent onSubmit={handleSubmit} />);
+
+  expect(screen.queryAllByRole('alert')).toHaveLength(0);
+
+  await user.click(screen.getByText(/submit/i));
+
+  expect(screen.getByText(/username field is required/i)).toBeInTheDocument();
+  expect(screen.getByText(/password field is required/i)).toBeInTheDocument();
+  expect(handleSubmit).not.toHaveBeenCalled();
+});