Skip to content

Commit

Permalink
fix(docs): update valibot snippet (#6569)
Browse files Browse the repository at this point in the history
  • Loading branch information
zougari47 authored Jun 18, 2024
1 parent b35665d commit e10f74d
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 35 deletions.
24 changes: 13 additions & 11 deletions packages/docs/src/routes/demo/integration/modular-forms/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.nonEmpty('Please enter your email.'),
v.email('The email address is badly formatted.')
),
password: v.pipe(
v.string(),
v.nonEmpty('Please enter your password.'),
v.minLength(8, 'Your password must have 8 characters or more.')
),
});

type LoginForm = Input<typeof LoginSchema>;
type LoginForm = v.InferInput<typeof LoginSchema>;

export const useFormLoader = routeLoader$<InitialValues<LoginForm>>(() => ({
email: '',
Expand Down
52 changes: 28 additions & 24 deletions packages/docs/src/routes/docs/integrations/modular-forms/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 Input, 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.nonEmpty('Please enter your email.'),
v.email('he email address is badly formatted.'),
),
password: v.pipe(
v.string(),
v.nonEmpty('Please enter your password.'),
v.minLength(8, 'Your password must have 8 characters or more.'),
),
});

type LoginForm = Input<typeof LoginSchema>;
type LoginForm = v.InferInput<typeof LoginSchema>;
```

If you're wondering why this guide favors Valibot over Zod, I recommend reading this [announcement post](https://www.builder.io/blog/introducing-valibot).
Expand Down Expand Up @@ -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 Input, 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.nonEmpty('Please enter your email.'),
v.email('The email address is badly formatted.'),
),
password: v.pipe(
v.string(),
v.nonEmpty('Please enter your password.'),
v.minLength(8, 'Your password must have 8 characters or more.'),
),
});

type LoginForm = Input<typeof LoginSchema>;
type LoginForm = v.InferInput<typeof LoginSchema>;

export const useFormLoader = routeLoader$<InitialValues<LoginForm>>(() => ({
email: '',
Expand Down

0 comments on commit e10f74d

Please sign in to comment.