-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #38 from victorgarciaesgi/feat/valibot
feat: added `Valibot` support, `$silentValue` and docs update
- Loading branch information
Showing
66 changed files
with
3,302 additions
and
1,205 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| --- | ||
| title: Valibot | ||
| --- | ||
|
|
||
| <script setup> | ||
| import QuickUsage from '../parts/components/valibot/QuickUsage.vue'; | ||
| import ComputedSchema from '../parts/components/valibot/ComputedSchema.vue'; | ||
| </script> | ||
|
|
||
| # Valibot <span data-title="valibot"></span> | ||
|
|
||
| Regle offers an adapter for [Valibot](https://valibot.dev/). You can use any valibot object schema to validate your state. It offers the same DX as using `@regle/rules`. | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| - `valibot` version `1.x` | ||
|
|
||
| ::: code-group | ||
| ```sh [pnpm] | ||
| pnpm add @regle/valibot | ||
| ``` | ||
|
|
||
| ```sh [npm] | ||
| npm install @regle/valibot | ||
| ``` | ||
|
|
||
| ```sh [yarn] | ||
| yarn add @regle/valibot | ||
| ``` | ||
|
|
||
| ```sh [bun] | ||
| bun add @regle/valibot | ||
| ``` | ||
| ::: | ||
|
|
||
|
|
||
|
|
||
| ## Usage | ||
|
|
||
|
|
||
| To use `@regle/valibot`, you only need one composable: `useValibotRegle`. | ||
|
|
||
| The `useValibot` composable has the same type definitions as `useRegle` for state and options. However, instead of passing rules as the second parameter, you provide a Valibot schema. | ||
|
|
||
| You still benefit from features like dirty tracking and custom error handling. | ||
|
|
||
| All schemas are parsed using `safeParse` and `safeParseAsync` (if your schema includes asynchronous transformations or refinements). Error messages defined in the schema will automatically be retrieved. | ||
|
|
||
| ```ts twoslash | ||
| import { useValibotRegle } from '@regle/valibot'; | ||
| import * as v from 'valibot'; | ||
|
|
||
| const { r$ } = useValibotRegle({ name: '' }, v.object({ | ||
| name: v.pipe(v.string(), v.minLength(3)) | ||
| })) | ||
|
|
||
| ``` | ||
|
|
||
| <QuickUsage /> | ||
|
|
||
|
|
||
| ## Computed schema | ||
|
|
||
| You can also have a computed schema that can be based on other state values. | ||
|
|
||
| ```ts twoslash | ||
| import { useValibotRegle, type toValibot } from '@regle/valibot'; | ||
| import * as v from 'valibot'; | ||
| import { ref, computed } from 'vue'; | ||
|
|
||
| type Form = { | ||
| firstName?: string; | ||
| lastName?: string | ||
| } | ||
|
|
||
| const form = ref<Form>({ firstName: '', lastName: '' }) | ||
|
|
||
| const schema = computed(() => v.object({ | ||
| firstName: v.string(), | ||
| lastName: v.pipe( | ||
| v.string(), | ||
| v.check((v) => v !== form.value.firstName, "Last name can't be equal to first name") | ||
| ), | ||
| }) satisfies toValibot<Form>) | ||
|
|
||
| const { r$ } = useValibotRegle(form, schema); | ||
|
|
||
| ``` | ||
|
|
||
| <ComputedSchema /> | ||
|
|
||
|
|
||
| ## Type safe output | ||
|
|
||
| Similar to the main `useRegle` composable, `r$.$validate` in useValibotRegle also returns a type-safe output. | ||
|
|
||
| ```ts twoslash | ||
| import { useValibotRegle, toValibot } from '@regle/valibot'; | ||
| import * as v from 'valibot'; | ||
| import { ref, computed } from 'vue'; | ||
|
|
||
| type Form = { | ||
| firstName?: string; | ||
| lastName?: string | ||
| } | ||
|
|
||
| const form = ref<Form>({ firstName: '', lastName: '' }) | ||
|
|
||
| const schema = computed(() => v.object({ | ||
| firstName: v.optional(v.string()), | ||
| lastName: v.pipe( | ||
| v.string(), | ||
| v.minLength(3), | ||
| v.check((v) => v !== form.value.firstName, "Last name can't be equal to first name") | ||
| ) | ||
| }) satisfies toValibot<Form>) | ||
|
|
||
| const { r$ } = useValibotRegle(form, schema); | ||
|
|
||
| async function submit() { | ||
| const { result, data } = await r$.$validate(); | ||
| if (result) { | ||
| console.log(data); | ||
| // ^? | ||
| } | ||
| } | ||
|
|
||
| ``` | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <template> | ||
| <div class="demo-container"> | ||
| <div class="row"> | ||
| <div class="input-container"> | ||
| <input | ||
| v-model="form.firstName" | ||
| :class="{ valid: r$.$fields.firstName.$valid, error: r$.$fields.firstName.$error }" | ||
| placeholder="Type your first name" | ||
| /> | ||
|
|
||
| <ul v-if="r$.$errors.firstName.length"> | ||
| <li v-for="error of r$.$errors.firstName" :key="error"> | ||
| {{ error }} | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="input-container"> | ||
| <input | ||
| v-model="form.lastName" | ||
| :class="{ valid: r$.$fields.lastName.$valid, error: r$.$fields.lastName.$error }" | ||
| placeholder="Type your last name" | ||
| /> | ||
|
|
||
| <ul v-if="r$.$errors.lastName.length"> | ||
| <li v-for="error of r$.$errors.lastName" :key="error"> | ||
| {{ error }} | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <button type="button" @click="r$.$resetAll">Reset</button> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useValibotRegle } from '@regle/valibot'; | ||
| import * as v from 'valibot'; | ||
| import { ref, computed } from 'vue'; | ||
| const form = ref({ firstName: '', lastName: '' }); | ||
| const schema = computed(() => | ||
| v.object({ | ||
| firstName: v.string(), | ||
| lastName: v.pipe( | ||
| v.string(), | ||
| v.check((v) => v !== form.value.firstName, "Last name can't be equal to first name") | ||
| ), | ||
| }) | ||
| ); | ||
| const { r$ } = useValibotRegle(form, schema); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <template> | ||
| <div class="demo-container"> | ||
| <div> | ||
| <input | ||
| v-model="r$.$value.name" | ||
| :class="{ valid: r$.$fields.name.$valid, error: r$.$fields.name.$error }" | ||
| placeholder="Type your name" | ||
| /> | ||
|
|
||
| <button type="button" @click="r$.$resetAll">Reset</button> | ||
| </div> | ||
|
|
||
| <ul v-if="r$.$errors.name.length"> | ||
| <li v-for="error of r$.$errors.name" :key="error"> | ||
| {{ error }} | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useValibotRegle } from '@regle/valibot'; | ||
| import * as v from 'valibot'; | ||
| const { r$ } = useValibotRegle( | ||
| { name: '' }, | ||
| v.object({ | ||
| name: v.pipe(v.string(), v.minLength(3)), | ||
| }) | ||
| ); | ||
| </script> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.