feat: upgrade and migrate Valibot to v0.31.0 (#688)

* Upgrade and migrate Valibot to v0.31.0 * Upgrade Valibot and refactor resolver with new util
react-hook-form · Jun 6, 2024 · bdd5ef5 · bdd5ef5
1 parent c53864f
commit bdd5ef5
Show file tree

Hide file tree

Showing 11 changed files with 218 additions and 235 deletions.
diff --git a/README.md b/README.md
@@ -552,14 +552,15 @@ The modular and type safe schema library for validating structural data
 ```typescript jsx
 import { useForm } from 'react-hook-form';
 import { valibotResolver } from '@hookform/resolvers/valibot';
-import { object, string, minLength, endsWith } from 'valibot';
+import * as v from 'valibot';
 
-const schema = object({
-  username: string('username is required', [
-    minLength(3, 'Needs to be at least 3 characters'),
-    endsWith('cool', 'Needs to end with `cool`'),
-  ]),
-  password: string('password is required'),
+const schema = v.object({
+  username: v.pipe(
+    v.string('username is required'),
+    v.minLength(3, 'Needs to be at least 3 characters'),
+    v.endsWith('cool', 'Needs to end with `cool`'),
+  ),
+  password: v.string('password is required'),
 });
 
 const App = () => {
@@ -581,7 +582,7 @@ const App = () => {
 
 A powerful TypeScript framework that provides a fully-fledged functional effect system with a rich standard library.
 
-[![npm](https://img.shields.io/bundlephobia/minzip/valibot?style=for-the-badge)](https://bundlephobia.com/result?p=effect)
+[![npm](https://img.shields.io/bundlephobia/minzip/@effect/schema?style=for-the-badge)](https://bundlephobia.com/result?p=effect)
 
 ```typescript jsx
 import React from 'react';

diff --git a/package.json b/package.json
@@ -262,7 +262,7 @@
     "superstruct": "^1.0.3",
     "typanion": "^3.14.0",
     "typescript": "^5.1.6",
-    "valibot": "^0.24.1",
+    "valibot": "0.31.0-rc.12",
     "vest": "^4.6.11",
     "vite": "^4.4.9",
     "vite-tsconfig-paths": "^4.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/valibot/package.json b/valibot/package.json
@@ -11,8 +11,8 @@
   "types": "dist/index.d.ts",
   "license": "MIT",
   "peerDependencies": {
-    "react-hook-form": "^7.0.0",
     "@hookform/resolvers": "^2.0.0",
-    "valibot": ">=0.8"
+    "react-hook-form": "^7.0.0",
+    "valibot": ">=0.31.0 <1"
   }
 }
diff --git a/valibot/src/__tests__/Form-native-validation.tsx b/valibot/src/__tests__/Form-native-validation.tsx
@@ -2,22 +2,22 @@ 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 { string, required, object, minLength } from 'valibot';
+import * as v from 'valibot';
 import { valibotResolver } from '..';
 
-const USERNAME_REQUIRED_MESSAGE = 'username field is required';
-const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
-
-const schema = required(
-  object({
-    username: string(USERNAME_REQUIRED_MESSAGE, [
-      minLength(2, USERNAME_REQUIRED_MESSAGE),
-    ]),
-    password: string(PASSWORD_REQUIRED_MESSAGE, [
-      minLength(2, PASSWORD_REQUIRED_MESSAGE),
-    ]),
-  }),
-);
+const USERNAME_REQUIRED_MESSAGE = 'username field is v.required';
+const PASSWORD_REQUIRED_MESSAGE = 'password field is v.required';
+
+const schema = v.object({
+  username: v.pipe(
+    v.string(USERNAME_REQUIRED_MESSAGE),
+    v.minLength(2, USERNAME_REQUIRED_MESSAGE),
+  ),
+  password: v.pipe(
+    v.string(PASSWORD_REQUIRED_MESSAGE),
+    v.minLength(2, PASSWORD_REQUIRED_MESSAGE),
+  ),
+});
 
 type FormData = { username: string; password: string };
 

diff --git a/valibot/src/__tests__/Form.tsx b/valibot/src/__tests__/Form.tsx
@@ -2,22 +2,22 @@ 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 { string, required, object, minLength } from 'valibot';
+import * as v from 'valibot';
 import { valibotResolver } from '..';
 
 const USERNAME_REQUIRED_MESSAGE = 'username field is required';
 const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
 
-const schema = required(
-  object({
-    username: string(USERNAME_REQUIRED_MESSAGE, [
-      minLength(2, USERNAME_REQUIRED_MESSAGE),
-    ]),
-    password: string(PASSWORD_REQUIRED_MESSAGE, [
-      minLength(2, PASSWORD_REQUIRED_MESSAGE),
-    ]),
-  }),
-);
+const schema = v.object({
+  username: v.pipe(
+    v.string(USERNAME_REQUIRED_MESSAGE),
+    v.minLength(2, USERNAME_REQUIRED_MESSAGE),
+  ),
+  password: v.pipe(
+    v.string(PASSWORD_REQUIRED_MESSAGE),
+    v.minLength(2, PASSWORD_REQUIRED_MESSAGE),
+  ),
+});
 
 type FormData = { username: string; password: string };
 

diff --git a/valibot/src/__tests__/__fixtures__/data.ts b/valibot/src/__tests__/__fixtures__/data.ts
@@ -1,62 +1,52 @@
 import { Field, InternalFieldName } from 'react-hook-form';
-import {
-  object,
-  string,
-  minLength,
-  maxLength,
-  regex,
-  number,
-  minValue,
-  maxValue,
-  email,
-  array,
-  boolean,
-  required,
-  union,
-  variant,
-  literal,
-} from 'valibot';
+import * as v from 'valibot';
 
-export const schema = required(
-  object({
-    username: string([minLength(2), maxLength(30), regex(/^\w+$/)]),
-    password: string('New Password is required', [
-      regex(new RegExp('.*[A-Z].*'), 'One uppercase character'),
-      regex(new RegExp('.*[a-z].*'), 'One lowercase character'),
-      regex(new RegExp('.*\\d.*'), 'One number'),
-      regex(
-        new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
-        'One special character',
-      ),
-      minLength(8, 'Must be at least 8 characters in length'),
-    ]),
-    repeatPassword: string('Repeat Password is required'),
-    accessToken: union(
-      [
-        string('Access token should be a string'),
-        number('Access token  should be a number'),
-      ],
-      'access token is required',
+export const schema = v.object({
+  username: v.pipe(
+    v.string(),
+    v.minLength(2),
+    v.maxLength(30),
+    v.regex(/^\w+$/),
+  ),
+  password: v.pipe(
+    v.string('New Password is required'),
+    v.regex(new RegExp('.*[A-Z].*'), 'One uppercase character'),
+    v.regex(new RegExp('.*[a-z].*'), 'One lowercase character'),
+    v.regex(new RegExp('.*\\d.*'), 'One number'),
+    v.regex(
+      new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
+      'One special character',
     ),
-    birthYear: number('Please enter your birth year', [
-      minValue(1900),
-      maxValue(2013),
-    ]),
-    email: string([email('Invalid email address')]),
-    tags: array(string('Tags should be strings')),
-    enabled: boolean(),
-    like: required(
-      object({
-        id: number('Like id is required'),
-        name: string('Like name is required', [minLength(4, 'Too short')]),
-      }),
+    v.minLength(8, 'Must be at least 8 characters in length'),
+  ),
+  repeatPassword: v.string('Repeat Password is required'),
+  accessToken: v.union(
+    [
+      v.string('Access token should be a string'),
+      v.number('Access token  should be a number'),
+    ],
+    'access token is required',
+  ),
+  birthYear: v.pipe(
+    v.number('Please enter your birth year'),
+    v.minValue(1900),
+    v.maxValue(2013),
+  ),
+  email: v.pipe(v.string(), v.email('Invalid email address')),
+  tags: v.array(v.string('Tags should be strings')),
+  enabled: v.boolean(),
+  like: v.object({
+    id: v.number('Like id is required'),
+    name: v.pipe(
+      v.string('Like name is required'),
+      v.minLength(4, 'Too short'),
     ),
   }),
-);
+});
 
-export const schemaError = variant('type', [
-  object({ type: literal('a') }),
-  object({ type: literal('b') }),
+export const schemaError = v.variant('type', [
+  v.object({ type: v.literal('a') }),
+  v.object({ type: v.literal('b') }),
 ]);
 
 export const validSchemaErrorData = { type: 'a' };