feat: add VineJS resolver (#677)

Author: lahgolz

README.md

@@ -46,6 +46,7 @@
   - [ArkType](#arktype)
   - [Valibot](#valibot)
   - [effect-ts](#effect-ts)
+  - [VineJS](#vinejs)
 - [Backers](#backers)
   - [Sponsors](#sponsors)
 - [Contributors](#contributors)
@@ -629,6 +630,41 @@ function TestComponent({ onSubmit }: Props) {
 }
 ```
 
+### [VineJS](https://github.com/vinejs/vine)
+
+VineJS is a form data validation library for Node.js
+
+[![npm](https://img.shields.io/bundlephobia/minzip/@vinejs/vine?style=for-the-badge)](https://bundlephobia.com/result?p=@vinejs/vine)
+
+```typescript jsx
+import { useForm } from 'react-hook-form';
+import { vineResolver } from '@hookform/resolvers/vine';
+import vine from '@vinejs/vine';
+
+const schema = vine.compile(
+  vine.object({
+    username: vine.string().minLength(1),
+    password: vine.string().minLength(1),
+  }),
+);
+
+const App = () => {
+  const { register, handleSubmit } = useForm({
+    resolver: vineResolver(schema),
+  });
+
+  return (
+    <form onSubmit={handleSubmit((d) => console.log(d))}>
+      <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>
+  );
+};
+```
+
 ## Backers
 
 Thanks go to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].

config/node-13-exports.js

@@ -17,6 +17,7 @@ const subRepositories = [
   'arktype',
   'valibot',
   'effect-ts',
+  'vine',
 ];
 
 const copySrc = () => {

package.json

@@ -2,7 +2,7 @@
   "name": "@hookform/resolvers",
   "amdName": "hookformResolvers",
   "version": "2.9.1",
-  "description": "React Hook Form validation resolvers: Yup, Joi, Superstruct, Zod, Vest, Class Validator, io-ts, Nope, computed-types, TypeBox, arktype, Typanion and Effect-TS",
+  "description": "React Hook Form validation resolvers: Yup, Joi, Superstruct, Zod, Vest, Class Validator, io-ts, Nope, computed-types, TypeBox, arktype, Typanion, Effect-TS and VineJS",
   "main": "dist/resolvers.js",
   "module": "dist/resolvers.module.js",
   "umd:main": "dist/resolvers.umd.js",
@@ -105,6 +105,12 @@
       "import": "./effect-ts/dist/effect-ts.mjs",
       "require": "./effect-ts/dist/effect-ts.js"
     },
+    "./vine": {
+      "types": "./vine/dist/index.d.ts",
+      "umd": "./vine/dist/vine.umd.js",
+      "import": "./vine/dist/vine.mjs",
+      "require": "./vine/dist/vine.js"
+    },
     "./package.json": "./package.json",
     "./*": "./*"
   },
@@ -154,7 +160,10 @@
     "valibot/dist",
     "effect-ts/package.json",
     "effect-ts/src",
-    "effect-ts/dist"
+    "effect-ts/dist",
+    "vine/package.json",
+    "vine/src",
+    "vine/dist"
   ],
   "publishConfig": {
     "access": "public"
@@ -178,6 +187,7 @@
     "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:effect-ts": "microbundle --cwd effect-ts --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm,@effect/schema=EffectSchema,@effect/schema/AST=EffectSchemaAST,@effect/schema/ArrayFormatter=EffectSchemaArrayFormatter",
+    "build:vine": "microbundle --cwd vine --globals @hookform/resolvers=hookformResolvers,react-hook-form=ReactHookForm,@vinejs/vine=vine",
     "postbuild": "node ./config/node-13-exports.js",
     "lint": "eslint . --ext .ts,.js --ignore-path .gitignore",
     "lint:types": "tsc",
@@ -207,7 +217,8 @@
     "typanion",
     "ajv",
     "TypeBox",
-    "arktype"
+    "arktype",
+    "vine"
   ],
   "repository": {
     "type": "git",
@@ -230,6 +241,7 @@
     "@types/react": "^18.2.20",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
+    "@vinejs/vine": "^2.0.0",
     "@vitejs/plugin-react": "^4.0.4",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",

pnpm-lock.yaml

@@ -0,0 +1,18 @@
+{
+  "name": "@hookform/resolvers/vine",
+  "amdName": "hookformResolversVine",
+  "version": "1.0.0",
+  "private": true,
+  "description": "React Hook Form validation resolver: vine",
+  "main": "dist/vine.js",
+  "module": "dist/vine.module.js",
+  "umd:main": "dist/vine.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",
+    "@vinejs/vine": "^2.0.0"
+  }
+}

vine/package.json

@@ -0,0 +1,81 @@
+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 { vineResolver } from '..';
+import vine from '@vinejs/vine';
+import { Infer } from '@vinejs/vine/build/src/types';
+
+const schema = vine.compile(
+  vine.object({
+    username: vine.string().minLength(1),
+    password: vine.string().minLength(1),
+  }),
+);
+
+type FormData = Infer<typeof schema> & { unusedProperty: string };
+
+interface Props {
+  onSubmit: (data: FormData) => void;
+}
+
+function TestComponent({ onSubmit }: Props) {
+  const { register, handleSubmit } = useForm<FormData>({
+    resolver: vineResolver(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 Zod", 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('The username field must have at least 1 characters');
+
+  // password
+  passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
+  expect(passwordField.validity.valid).toBe(false);
+  expect(passwordField.validationMessage).toBe('The password field must have at least 1 characters');
+
+  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('');
+});