Skip to content

Commit bdd5ef5

Browse files
fabian-hillerfabian-hiller
authored
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
1 parent c53864f commit bdd5ef5

File tree

11 files changed

+218
-235
lines changed

11 files changed

+218
-235
lines changed

‎README.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -552,14 +552,15 @@ The modular and type safe schema library for validating structural data
552552
```typescript jsx
553553
import { useForm } from 'react-hook-form';
554554
import { valibotResolver } from '@hookform/resolvers/valibot';
555-
import { object, string, minLength, endsWith } from 'valibot';
555+
import * as v from 'valibot';
556556

557-
const schema = object({
558-
username: string('username is required', [
559-
minLength(3, 'Needs to be at least 3 characters'),
560-
endsWith('cool', 'Needs to end with `cool`'),
561-
]),
562-
password: string('password is required'),
557+
const schema = v.object({
558+
username: v.pipe(
559+
v.string('username is required'),
560+
v.minLength(3, 'Needs to be at least 3 characters'),
561+
v.endsWith('cool', 'Needs to end with `cool`'),
562+
),
563+
password: v.string('password is required'),
563564
});
564565

565566
const App = () => {
@@ -581,7 +582,7 @@ const App = () => {
581582

582583
A powerful TypeScript framework that provides a fully-fledged functional effect system with a rich standard library.
583584

584-
[![npm](https://img.shields.io/bundlephobia/minzip/valibot?style=for-the-badge)](https://bundlephobia.com/result?p=effect)
585+
[![npm](https://img.shields.io/bundlephobia/minzip/@effect/schema?style=for-the-badge)](https://bundlephobia.com/result?p=effect)
585586

586587
```typescript jsx
587588
import React from 'react';

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@
262262
"superstruct": "^1.0.3",
263263
"typanion": "^3.14.0",
264264
"typescript": "^5.1.6",
265-
"valibot": "^0.24.1",
265+
"valibot": "0.31.0-rc.12",
266266
"vest": "^4.6.11",
267267
"vite": "^4.4.9",
268268
"vite-tsconfig-paths": "^4.2.0",

‎pnpm-lock.yaml

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎valibot/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"types": "dist/index.d.ts",
1212
"license": "MIT",
1313
"peerDependencies": {
14-
"react-hook-form": "^7.0.0",
1514
"@hookform/resolvers": "^2.0.0",
16-
"valibot": ">=0.8"
15+
"react-hook-form": "^7.0.0",
16+
"valibot": ">=0.31.0 <1"
1717
}
1818
}

‎valibot/src/__tests__/Form-native-validation.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@ import React from 'react';
22
import { useForm } from 'react-hook-form';
33
import { render, screen } from '@testing-library/react';
44
import user from '@testing-library/user-event';
5-
import { string, required, object, minLength } from 'valibot';
5+
import * as v from 'valibot';
66
import { valibotResolver } from '..';
77

8-
const USERNAME_REQUIRED_MESSAGE = 'username field is required';
9-
const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
10-
11-
const schema = required(
12-
object({
13-
username: string(USERNAME_REQUIRED_MESSAGE, [
14-
minLength(2, USERNAME_REQUIRED_MESSAGE),
15-
]),
16-
password: string(PASSWORD_REQUIRED_MESSAGE, [
17-
minLength(2, PASSWORD_REQUIRED_MESSAGE),
18-
]),
19-
}),
20-
);
8+
const USERNAME_REQUIRED_MESSAGE = 'username field is v.required';
9+
const PASSWORD_REQUIRED_MESSAGE = 'password field is v.required';
10+
11+
const schema = v.object({
12+
username: v.pipe(
13+
v.string(USERNAME_REQUIRED_MESSAGE),
14+
v.minLength(2, USERNAME_REQUIRED_MESSAGE),
15+
),
16+
password: v.pipe(
17+
v.string(PASSWORD_REQUIRED_MESSAGE),
18+
v.minLength(2, PASSWORD_REQUIRED_MESSAGE),
19+
),
20+
});
2121

2222
type FormData = { username: string; password: string };
2323

‎valibot/src/__tests__/Form.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@ import React from 'react';
22
import { render, screen } from '@testing-library/react';
33
import user from '@testing-library/user-event';
44
import { useForm } from 'react-hook-form';
5-
import { string, required, object, minLength } from 'valibot';
5+
import * as v from 'valibot';
66
import { valibotResolver } from '..';
77

88
const USERNAME_REQUIRED_MESSAGE = 'username field is required';
99
const PASSWORD_REQUIRED_MESSAGE = 'password field is required';
1010

11-
const schema = required(
12-
object({
13-
username: string(USERNAME_REQUIRED_MESSAGE, [
14-
minLength(2, USERNAME_REQUIRED_MESSAGE),
15-
]),
16-
password: string(PASSWORD_REQUIRED_MESSAGE, [
17-
minLength(2, PASSWORD_REQUIRED_MESSAGE),
18-
]),
19-
}),
20-
);
11+
const schema = v.object({
12+
username: v.pipe(
13+
v.string(USERNAME_REQUIRED_MESSAGE),
14+
v.minLength(2, USERNAME_REQUIRED_MESSAGE),
15+
),
16+
password: v.pipe(
17+
v.string(PASSWORD_REQUIRED_MESSAGE),
18+
v.minLength(2, PASSWORD_REQUIRED_MESSAGE),
19+
),
20+
});
2121

2222
type FormData = { username: string; password: string };
2323

‎valibot/src/__tests__/__fixtures__/data.ts

Lines changed: 43 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,52 @@
11
import { Field, InternalFieldName } from 'react-hook-form';
2-
import {
3-
object,
4-
string,
5-
minLength,
6-
maxLength,
7-
regex,
8-
number,
9-
minValue,
10-
maxValue,
11-
email,
12-
array,
13-
boolean,
14-
required,
15-
union,
16-
variant,
17-
literal,
18-
} from 'valibot';
2+
import * as v from 'valibot';
193

20-
export const schema = required(
21-
object({
22-
username: string([minLength(2), maxLength(30), regex(/^\w+$/)]),
23-
password: string('New Password is required', [
24-
regex(new RegExp('.*[A-Z].*'), 'One uppercase character'),
25-
regex(new RegExp('.*[a-z].*'), 'One lowercase character'),
26-
regex(new RegExp('.*\\d.*'), 'One number'),
27-
regex(
28-
new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
29-
'One special character',
30-
),
31-
minLength(8, 'Must be at least 8 characters in length'),
32-
]),
33-
repeatPassword: string('Repeat Password is required'),
34-
accessToken: union(
35-
[
36-
string('Access token should be a string'),
37-
number('Access token should be a number'),
38-
],
39-
'access token is required',
4+
export const schema = v.object({
5+
username: v.pipe(
6+
v.string(),
7+
v.minLength(2),
8+
v.maxLength(30),
9+
v.regex(/^\w+$/),
10+
),
11+
password: v.pipe(
12+
v.string('New Password is required'),
13+
v.regex(new RegExp('.*[A-Z].*'), 'One uppercase character'),
14+
v.regex(new RegExp('.*[a-z].*'), 'One lowercase character'),
15+
v.regex(new RegExp('.*\\d.*'), 'One number'),
16+
v.regex(
17+
new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
18+
'One special character',
4019
),
41-
birthYear: number('Please enter your birth year', [
42-
minValue(1900),
43-
maxValue(2013),
44-
]),
45-
email: string([email('Invalid email address')]),
46-
tags: array(string('Tags should be strings')),
47-
enabled: boolean(),
48-
like: required(
49-
object({
50-
id: number('Like id is required'),
51-
name: string('Like name is required', [minLength(4, 'Too short')]),
52-
}),
20+
v.minLength(8, 'Must be at least 8 characters in length'),
21+
),
22+
repeatPassword: v.string('Repeat Password is required'),
23+
accessToken: v.union(
24+
[
25+
v.string('Access token should be a string'),
26+
v.number('Access token should be a number'),
27+
],
28+
'access token is required',
29+
),
30+
birthYear: v.pipe(
31+
v.number('Please enter your birth year'),
32+
v.minValue(1900),
33+
v.maxValue(2013),
34+
),
35+
email: v.pipe(v.string(), v.email('Invalid email address')),
36+
tags: v.array(v.string('Tags should be strings')),
37+
enabled: v.boolean(),
38+
like: v.object({
39+
id: v.number('Like id is required'),
40+
name: v.pipe(
41+
v.string('Like name is required'),
42+
v.minLength(4, 'Too short'),
5343
),
5444
}),
55-
);
45+
});
5646

57-
export const schemaError = variant('type', [
58-
object({ type: literal('a') }),
59-
object({ type: literal('b') }),
47+
export const schemaError = v.variant('type', [
48+
v.object({ type: v.literal('a') }),
49+
v.object({ type: v.literal('b') }),
6050
]);
6151

6252
export const validSchemaErrorData = { type: 'a' };

0 commit comments

Comments
 (0)