From 6fad95cce934554eed83a2c4fb75b9c268d94716 Mon Sep 17 00:00:00 2001 From: Ahmed Zougari Date: Tue, 18 Jun 2024 14:32:59 +0100 Subject: [PATCH 1/5] fix(docs): update valibot snippet --- .../src/routes/docs/integrations/modular-forms/index.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx b/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx index 3bf707a7320..33e086d0011 100644 --- a/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx +++ b/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx @@ -38,7 +38,7 @@ type LoginForm = { Since Modular Forms supports [Valibot](https://valibot.dev/) and [Zod](https://zod.dev/) for input validation, you can optionally derive the type definition from a schema. ```ts -import { email, type Input, minLength, object, string } from 'valibot'; +import { email, type InferOutput, minLength, object, string } from 'valibot'; const LoginSchema = object({ email: string([ @@ -51,7 +51,7 @@ const LoginSchema = object({ ]), }); -type LoginForm = Input; +type LoginForm = InferOutput; ``` If you're wondering why this guide favors Valibot over Zod, I recommend reading this [announcement post](https://www.builder.io/blog/introducing-valibot). @@ -183,7 +183,7 @@ import { $, component$, type QRL } from '@builder.io/qwik'; import { routeLoader$ } from '@builder.io/qwik-city'; import type { InitialValues, SubmitHandler } from '@modular-forms/qwik'; import { formAction$, useForm, valiForm$ } from '@modular-forms/qwik'; -import { email, type Input, minLength, object, string } from 'valibot'; +import { email, type InferOutput, minLength, object, string } from 'valibot'; const LoginSchema = object({ email: string([ @@ -196,7 +196,7 @@ const LoginSchema = object({ ]), }); -type LoginForm = Input; +type LoginForm = InferOutput; export const useFormLoader = routeLoader$>(() => ({ email: '', From 57517fc6538f5d7299bf81e5bba8616a250d43bd Mon Sep 17 00:00:00 2001 From: Ahmed Zougari Date: Tue, 18 Jun 2024 16:14:26 +0100 Subject: [PATCH 2/5] fix(docs): migrate to valibot v0.31.0 --- .../docs/integrations/modular-forms/index.mdx | 52 ++++++++++--------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx b/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx index 33e086d0011..59bdfd2e8bf 100644 --- a/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx +++ b/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx @@ -38,20 +38,22 @@ type LoginForm = { Since Modular Forms supports [Valibot](https://valibot.dev/) and [Zod](https://zod.dev/) for input validation, you can optionally derive the type definition from a schema. ```ts -import { email, type InferOutput, minLength, object, string } from 'valibot'; - -const LoginSchema = object({ - email: string([ - minLength(1, 'Please enter your email.'), - email('The email address is badly formatted.'), - ]), - password: string([ - minLength(1, 'Please enter your password.'), - minLength(8, 'Your password must have 8 characters or more.'), - ]), +import * as v from 'valibot'; + +const LoginSchema = v.object({ + email: v.pipe( + v.string(), + v.minLength(1, 'Please enter your email'), + v.email('he email address is badly formatted'), + ), + password: v.pipe( + v.string(), + v.minLength(1, 'Please enter your password.'), + v.minLength(8, 'Your password must have 8 characters or more.'), + ), }); -type LoginForm = InferOutput; +type LoginForm = v.InferInput; ``` If you're wondering why this guide favors Valibot over Zod, I recommend reading this [announcement post](https://www.builder.io/blog/introducing-valibot). @@ -183,20 +185,22 @@ import { $, component$, type QRL } from '@builder.io/qwik'; import { routeLoader$ } from '@builder.io/qwik-city'; import type { InitialValues, SubmitHandler } from '@modular-forms/qwik'; import { formAction$, useForm, valiForm$ } from '@modular-forms/qwik'; -import { email, type InferOutput, minLength, object, string } from 'valibot'; - -const LoginSchema = object({ - email: string([ - minLength(1, 'Please enter your email.'), - email('The email address is badly formatted.'), - ]), - password: string([ - minLength(1, 'Please enter your password.'), - minLength(8, 'Your password must have 8 characters or more.'), - ]), +import * as v from 'valibot'; + +export const LoginSchema = v.object({ + email: v.pipe( + v.string(), + v.minLength(1, 'Please enter your email'), + v.email('The email address is badly formatted'), + ), + password: v.pipe( + v.string(), + v.minLength(1, 'Please enter your password.'), + v.minLength(8, 'Your password must have 8 characters or more.'), + ), }); -type LoginForm = InferOutput; +type LoginForm = v.InferInput; export const useFormLoader = routeLoader$>(() => ({ email: '', From 6dcbfca16785c53567ace11df4a96455b740eed6 Mon Sep 17 00:00:00 2001 From: Ahmed Zougari Date: Tue, 18 Jun 2024 17:00:43 +0100 Subject: [PATCH 3/5] fix: migrate to valibot v0.31.0 --- .../demo/integration/modular-forms/index.tsx | 24 ++++++++++--------- .../docs/integrations/modular-forms/index.mdx | 10 ++++---- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/docs/src/routes/demo/integration/modular-forms/index.tsx b/packages/docs/src/routes/demo/integration/modular-forms/index.tsx index aeb6dbfbb8d..e96449db8f7 100644 --- a/packages/docs/src/routes/demo/integration/modular-forms/index.tsx +++ b/packages/docs/src/routes/demo/integration/modular-forms/index.tsx @@ -4,20 +4,22 @@ import { $, component$, type QRL } from '@builder.io/qwik'; import { routeLoader$ } from '@builder.io/qwik-city'; import type { InitialValues, SubmitHandler } from '@modular-forms/qwik'; import { formAction$, useForm, valiForm$ } from '@modular-forms/qwik'; -import { email, type Input, minLength, object, string } from 'valibot'; +import * as v from 'valibot'; -const LoginSchema = object({ - email: string([ - minLength(1, 'Please enter your email.'), - email('The email address is badly formatted.'), - ]), - password: string([ - minLength(1, 'Please enter your password.'), - minLength(8, 'Your password must have 8 characters or more.'), - ]), +const LoginSchema = v.object({ + email: v.pipe( + v.string(), + v.minLength(1, 'Please enter your email.'), + v.email('The email address is badly formatted.'), + ), + password: v.pipe( + v.string(), + v.minLength(1, 'Please enter your password.'), + v.minLength(8, 'Your password must have 8 characters or more.'), + ), }); -type LoginForm = Input; +type LoginForm = v.InferInput; export const useFormLoader = routeLoader$>(() => ({ email: '', diff --git a/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx b/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx index 59bdfd2e8bf..ee4fd5375c6 100644 --- a/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx +++ b/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx @@ -43,8 +43,8 @@ import * as v from 'valibot'; const LoginSchema = v.object({ email: v.pipe( v.string(), - v.minLength(1, 'Please enter your email'), - v.email('he email address is badly formatted'), + v.minLength(1, 'Please enter your email.'), + v.email('he email address is badly formatted.'), ), password: v.pipe( v.string(), @@ -187,11 +187,11 @@ import type { InitialValues, SubmitHandler } from '@modular-forms/qwik'; import { formAction$, useForm, valiForm$ } from '@modular-forms/qwik'; import * as v from 'valibot'; -export const LoginSchema = v.object({ +const LoginSchema = v.object({ email: v.pipe( v.string(), - v.minLength(1, 'Please enter your email'), - v.email('The email address is badly formatted'), + v.minLength(1, 'Please enter your email.'), + v.email('The email address is badly formatted.'), ), password: v.pipe( v.string(), From 6465b166836440a78c023ea91d7ce6f12de1487b Mon Sep 17 00:00:00 2001 From: gioboa Date: Wed, 19 Jun 2024 00:10:09 +0200 Subject: [PATCH 4/5] =?UTF-8?q?chore:=20linter=20=F0=9F=A7=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/src/routes/demo/integration/modular-forms/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/src/routes/demo/integration/modular-forms/index.tsx b/packages/docs/src/routes/demo/integration/modular-forms/index.tsx index e96449db8f7..f15a5d77250 100644 --- a/packages/docs/src/routes/demo/integration/modular-forms/index.tsx +++ b/packages/docs/src/routes/demo/integration/modular-forms/index.tsx @@ -10,12 +10,12 @@ const LoginSchema = v.object({ email: v.pipe( v.string(), v.minLength(1, 'Please enter your email.'), - v.email('The email address is badly formatted.'), + v.email('The email address is badly formatted.') ), password: v.pipe( v.string(), v.minLength(1, 'Please enter your password.'), - v.minLength(8, 'Your password must have 8 characters or more.'), + v.minLength(8, 'Your password must have 8 characters or more.') ), }); From 467b956d7d0c80b57754b0cf42b5523ed46875e1 Mon Sep 17 00:00:00 2001 From: Ahmed Zougari Date: Tue, 18 Jun 2024 23:30:12 +0100 Subject: [PATCH 5/5] chore(valibot): change minLength with nonEmpty --- .../src/routes/demo/integration/modular-forms/index.tsx | 4 ++-- .../src/routes/docs/integrations/modular-forms/index.mdx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/docs/src/routes/demo/integration/modular-forms/index.tsx b/packages/docs/src/routes/demo/integration/modular-forms/index.tsx index f15a5d77250..96d6b110c25 100644 --- a/packages/docs/src/routes/demo/integration/modular-forms/index.tsx +++ b/packages/docs/src/routes/demo/integration/modular-forms/index.tsx @@ -9,12 +9,12 @@ import * as v from 'valibot'; const LoginSchema = v.object({ email: v.pipe( v.string(), - v.minLength(1, 'Please enter your email.'), + v.nonEmpty('Please enter your email.'), v.email('The email address is badly formatted.') ), password: v.pipe( v.string(), - v.minLength(1, 'Please enter your password.'), + v.nonEmpty('Please enter your password.'), v.minLength(8, 'Your password must have 8 characters or more.') ), }); diff --git a/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx b/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx index ee4fd5375c6..ac029d1b2fc 100644 --- a/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx +++ b/packages/docs/src/routes/docs/integrations/modular-forms/index.mdx @@ -43,12 +43,12 @@ import * as v from 'valibot'; const LoginSchema = v.object({ email: v.pipe( v.string(), - v.minLength(1, 'Please enter your email.'), + v.nonEmpty('Please enter your email.'), v.email('he email address is badly formatted.'), ), password: v.pipe( v.string(), - v.minLength(1, 'Please enter your password.'), + v.nonEmpty('Please enter your password.'), v.minLength(8, 'Your password must have 8 characters or more.'), ), }); @@ -190,12 +190,12 @@ import * as v from 'valibot'; const LoginSchema = v.object({ email: v.pipe( v.string(), - v.minLength(1, 'Please enter your email.'), + v.nonEmpty('Please enter your email.'), v.email('The email address is badly formatted.'), ), password: v.pipe( v.string(), - v.minLength(1, 'Please enter your password.'), + v.nonEmpty('Please enter your password.'), v.minLength(8, 'Your password must have 8 characters or more.'), ), });