feat(valibot): upgrade and migrate to v0.31.0 (#4770)

* feat(valibot): upgrade and migrate to v0.31.0

* feat(valibot): refactor resolver with new util

* docs: update docs to align with 31 rc

* feat: bump valibot to 0.31.0 release

* chore: added changeset entry

---------

Co-authored-by: Abdelrahman Awad <[email protected]>

Author: fabian-hiller

.changeset/rude-rabbits-bow.md

@@ -0,0 +1,5 @@
+---
+"@vee-validate/valibot": patch
+---
+
+feat: support valibot 0.31.0

docs/package.json

@@ -31,7 +31,7 @@
     "shiki": "^0.14.6",
     "tailwindcss": "^3.3.6",
     "unist-util-visit": "^5.0.0",
-    "valibot": "^0.28.1",
+    "valibot": "^0.31.0",
     "vee-validate": "^4.13.0",
     "vue": "^3.4.26",
     "yup": "^1.3.2",

docs/src/components/Repl.vue

@@ -39,7 +39,7 @@ store.setImportMap({
     toposort: 'https://esm-repo.netlify.app/topsort.esm.js',
     yup: 'https://unpkg.com/[email protected]/index.esm.js',
     zod: 'https://unpkg.com/[email protected]/lib/index.mjs',
-    valibot: 'https://unpkg.com/valibot@0.21.0/dist/index.js',
+    valibot: 'https://unpkg.com/valibot@0.31.0/dist/index.js',
     '@vue/devtools-api': 'https://unpkg.com/@vue/[email protected]/lib/esm/index.js',
     vue: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.prod.js`,
   },

docs/src/components/examples/CompositionInputFieldValibot.vue

@@ -6,7 +6,10 @@
 <script setup>
 import { useField } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/valibot';
-import { string, email, minLength } from 'valibot';
+import * as v from 'valibot';
 
-const { value, errorMessage } = useField('email', toTypedSchema(string([minLength(1, 'Required'), email()])));
+const { value, errorMessage } = useField(
+  'email',
+  toTypedSchema(v.pipe(v.string(), v.email('Invalid email'), v.nonEmpty('Required'))),
+);
 </script>

docs/src/components/examples/CompositionValibotBasic.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/valibot';
-import { email as emailValidator, string, minLength, object } from 'valibot';
+import * as v from 'valibot';
 
 const { errors, defineField } = useForm({
   validationSchema: toTypedSchema(
-    object({
-      email: string([minLength(1, 'Email is required'), emailValidator()]),
-      password: string([minLength(6, 'password too short')]),
+    v.object({
+      email: v.pipe(v.string(), v.email('Invalid Email'), v.nonEmpty('Email is required')),
+      password: v.pipe(v.string(), v.minLength(6, 'password too short')),
     }),
   ),
 });

docs/src/pages/guide/composition-api/getting-started.mdx

@@ -285,13 +285,13 @@ Then you can wrap your Valibot schemas with `toTypedSchema` function which allow
 
 ```ts
 import { useForm } from 'vee-validate';
-import { string, object, email, minLength } from 'valibot';
+import * as v from 'valibot';
 import { toTypedSchema } from '@vee-validate/valibot';
 
 // Creates a typed schema for vee-validate
 const schema = toTypedSchema(
-  object({
-    email: string([minLength(1, 'required'), email()]),
+  v.object({
+    email: v.pipe(v.string(), v.email('Invalid email'), v.nonEmpty('required')),
   }),
 );
 

docs/src/pages/guide/composition-api/typed-schema.mdx

@@ -299,15 +299,15 @@ This makes the form values and submitted values typed automatically and caters f
 
 ```ts
 import { useForm } from 'vee-validate';
-import { object, string, minLength } from 'valibot';
+import * as v from 'valibot';
 import { toTypedSchema } from '@vee-validate/valibot';
 
 const { values, handleSubmit } = useForm({
   validationSchema: toTypedSchema(
-    object({
-      email: string([minLength(1, 'required')]),
-      password: string([minLength(1, 'required')]),
-      name: string(),
+    v.object({
+      name: v.pipe(string()),
+      email: v.pipe(v.string() v.nonEmpty('required')),
+      password: v.pipe(string(), v.minLength(6, 'Must be at least 6 characters')),
     }),
   ),
 });
@@ -331,14 +331,14 @@ You can also define default values on your schema directly and it will be picked
 
 ```ts
 import { useForm } from 'vee-validate';
-import { object, string, optional, minLength } from 'valibot';
+import * as v from 'valibot';
 import { toTypedSchema } from '@vee-validate/valibot';
 
 const { values, handleSubmit } = useForm({
   validationSchema: toTypedSchema(
-    object({
-      email: optional(string([minLength(1, 'required')]), '[email protected]'),
-      password: optional(string([minLength(1, 'required')]), ''),
+    v.object({
+      email: v.optional(v.pipe(string(), v.nonEmpty('required')), '[email protected]'),
+      password: optional(v.pipe(v.string(), v.nonEmpty('required')), ''),
       name: optional(string(), ''),
     }),
   ),
@@ -353,13 +353,16 @@ You can also define transforms to cast your fields before submission:
 
 ```ts
 import { useForm } from 'vee-validate';
-import { object, number, coerce, any } from 'valibot';
+import * as v from 'valibot';
 import { toTypedSchema } from '@vee-validate/valibot';
 
 const { values, handleSubmit } = useForm({
   validationSchema: toTypedSchema(
     object({
-      age: coerce(any(), arg => Number(arg)),
+      age: v.pipe(
+        v.unknown(),
+        v.transform(v => Number(v)),
+      ),
     }),
   ),
 });

packages/valibot/package.json

@@ -29,7 +29,7 @@
   ],
   "dependencies": {
     "type-fest": "^4.8.3",
-    "valibot": "^0.30.0",
+    "valibot": "^0.31.0",
     "vee-validate": "4.13.0"
   }
 }

packages/valibot/src/index.ts

@@ -1,25 +1,38 @@
 import { PartialDeep } from 'type-fest';
 import { cleanupNonNestedPath, isNotNestedPath, type TypedSchema, type TypedSchemaError } from 'vee-validate';
 import {
-  Output,
-  Input,
+  InferOutput,
+  InferInput,
   BaseSchema,
   BaseSchemaAsync,
   safeParseAsync,
   safeParse,
-  SchemaIssue,
+  BaseIssue,
   getDefault,
   optional,
   ArraySchema,
   ObjectSchema,
+  ErrorMessage,
+  ArrayIssue,
+  ObjectEntries,
+  LooseObjectIssue,
+  ObjectIssue,
+  ObjectWithRestSchema,
+  ObjectWithRestIssue,
+  StrictObjectIssue,
+  StrictObjectSchema,
+  LooseObjectSchema,
+  getDotPath,
 } from 'valibot';
 import { isIndex, isObject, merge, normalizeFormPath } from '../../shared';
 
 export function toTypedSchema<
-  TSchema extends BaseSchema | BaseSchemaAsync,
-  TOutput = Output<TSchema>,
-  TInput = PartialDeep<Input<TSchema>>,
->(valibotSchema: TSchema): TypedSchema<TInput, TOutput> {
+  TSchema extends
+    | BaseSchema<unknown, unknown, BaseIssue<unknown>>
+    | BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>,
+  TInferOutput = InferOutput<TSchema>,
+  TInferInput = PartialDeep<InferInput<TSchema>>,
+>(valibotSchema: TSchema): TypedSchema<TInferInput, TInferOutput> {
   const schema: TypedSchema = {
     __type: 'VVTypedSchema',
     async parse(value) {
@@ -92,10 +105,10 @@ export function toTypedSchema<
   return schema;
 }
 
-function processIssues(issues: SchemaIssue[], errors: Record<string, TypedSchemaError>): void {
+function processIssues(issues: BaseIssue<unknown>[], errors: Record<string, TypedSchemaError>): void {
   issues.forEach(issue => {
-    const path = normalizeFormPath((issue.path || []).map(p => p.key).join('.'));
-    if (issue.issues?.length) {
+    const path = normalizeFormPath(getDotPath(issue) || '');
+    if (issue.issues) {
       processIssues(
         issue.issues.flatMap(ue => ue.issues || []),
         errors,
@@ -114,7 +127,10 @@ function processIssues(issues: SchemaIssue[], errors: Record<string, TypedSchema
   });
 }
 
-function getSchemaForPath(path: string, schema: any): BaseSchema | null {
+function getSchemaForPath(
+  path: string,
+  schema: BaseSchema<unknown, unknown, BaseIssue<unknown>> | BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>,
+): BaseSchema<unknown, unknown, BaseIssue<unknown>> | null {
   if (!isObjectSchema(schema)) {
     return null;
   }
@@ -125,7 +141,7 @@ function getSchemaForPath(path: string, schema: any): BaseSchema | null {
 
   const paths = (path || '').split(/\.|\[(\d+)\]/).filter(Boolean);
 
-  let currentSchema: BaseSchema = schema;
+  let currentSchema: BaseSchema<unknown, unknown, BaseIssue<unknown>> = schema;
   for (let i = 0; i <= paths.length; i++) {
     const p = paths[i];
     if (!p || !currentSchema) {
@@ -145,14 +161,28 @@ function getSchemaForPath(path: string, schema: any): BaseSchema | null {
   return null;
 }
 
-function queryOptional(schema: BaseSchema | BaseSchemaAsync): boolean {
-  return (schema as any).type === 'optional';
+function queryOptional(
+  schema: BaseSchema<unknown, unknown, BaseIssue<unknown>> | BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>,
+): boolean {
+  return schema.type === 'optional';
 }
 
-function isArraySchema(schema: unknown): schema is ArraySchema<any> {
-  return isObject(schema) && schema.type === 'array';
+function isArraySchema(
+  schema: unknown,
+): schema is ArraySchema<BaseSchema<unknown, unknown, BaseIssue<unknown>>, ErrorMessage<ArrayIssue> | undefined> {
+  return isObject(schema) && 'item' in schema;
 }
 
-function isObjectSchema(schema: unknown): schema is ObjectSchema<any> {
-  return isObject(schema) && schema.type === 'object';
+function isObjectSchema(
+  schema: unknown,
+): schema is
+  | LooseObjectSchema<ObjectEntries, ErrorMessage<LooseObjectIssue> | undefined>
+  | ObjectSchema<ObjectEntries, ErrorMessage<ObjectIssue> | undefined>
+  | ObjectWithRestSchema<
+      ObjectEntries,
+      BaseSchema<unknown, unknown, BaseIssue<unknown>>,
+      ErrorMessage<ObjectWithRestIssue> | undefined
+    >
+  | StrictObjectSchema<ObjectEntries, ErrorMessage<StrictObjectIssue> | undefined> {
+  return isObject(schema) && 'entries' in schema;
 }