feat(Form): update and migrate valibot to v0.31.0 (#1848)

Co-authored-by: Romain Hamel <romain@boilr.io>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/components/content/examples/FormExampleValibot.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { string, objectAsync, email, minLength, type Input } from 'valibot'
+import * as v from 'valibot'
 import type { FormSubmitEvent } from '#ui/types'
 
-const schema = objectAsync({
+const schema = v.object({
-  email: string([email('Invalid email')]),
+  email: v.pipe(v.string(), v.email('Invalid email')),
-  password: string([minLength(8, 'Must be at least 8 characters')])
+  password: v.pipe(v.string(), v.minLength(8, 'Must be at least 8 characters'))
 })
 
-type Schema = Input<typeof schema>
+type Schema = v.InferOutput<typeof schema>
 
 const state = reactive({
   email: '',
@@ -21,7 +21,7 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+  <UForm :schema="v.safeParser(schema)" :state="state" class="space-y-4" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/package.json

@@ -25,7 +25,7 @@
     "typescript": "^5.4.5",
     "ufo": "^1.5.3",
     "v-calendar": "^3.1.2",
-    "valibot": "^0.30.0",
+    "valibot": "^0.31.0",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
   }

package.json

@@ -71,7 +71,8 @@
     "release-it": "^17.3.0",
     "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
-    "valibot": "^0.30.0",
+    "valibot30": "npm:valibot@0.30.0",
+    "valibot": "^0.31.1",
     "vitest": "^1.6.0",
     "vitest-environment-nuxt": "^1.0.0",
     "vue-tsc": "^2.0.16",

pnpm-lock.yaml

@@ -120,8 +120,11 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0(typescript@5.4.5)
       valibot:
-        specifier: ^0.30.0
+        specifier: ^0.31.1
-        version: 0.30.0
+        version: 0.31.1
+      valibot30:
+        specifier: npm:valibot@0.30.0
+        version: valibot@0.30.0
       vitest:
         specifier: ^1.6.0
         version: 1.6.0(@types/node@20.11.19)(happy-dom@14.10.1)(terser@5.27.2)
@@ -207,8 +210,8 @@ importers:
         specifier: ^3.1.2
         version: 3.1.2(@popperjs/core@2.11.8)(vue@3.4.25(typescript@5.4.5))
       valibot:
-        specifier: ^0.30.0
+        specifier: ^0.31.0
-        version: 0.30.0
+        version: 0.31.1
       yup:
         specifier: ^1.4.0
         version: 1.4.0
@@ -7154,6 +7157,9 @@ packages:
   valibot@0.30.0:
     resolution: {integrity: sha512-5POBdbSkM+3nvJ6ZlyQHsggisfRtyT4tVTo1EIIShs6qCdXJnyWU5TJ68vr8iTg5zpOLjXLRiBqNx+9zwZz/rA==}
 
+  valibot@0.31.1:
+    resolution: {integrity: sha512-2YYIhPrnVSz/gfT2/iXVTrSj92HwchCt9Cga/6hX4B26iCz9zkIsGTS0HjDYTZfTi1Un0X6aRvhBi1cfqs/i0Q==}
+
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -17312,6 +17318,8 @@ snapshots:
 
   valibot@0.30.0: {}
 
+  valibot@0.31.1: {}
+
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0

src/runtime/components/forms/Form.vue

@@ -10,7 +10,8 @@ import { useEventBus } from '@vueuse/core'
 import type { ZodSchema } from 'zod'
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup'
-import type { ObjectSchemaAsync as ValibotObjectSchema } from 'valibot'
+import type { BaseSchema as ValibotSchema30, BaseSchemaAsync as ValibotSchemaAsync30 } from 'valibot30'
+import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot'
 import type { FormError, FormEvent, FormEventType, FormSubmitEvent, FormErrorEvent, Form } from '../../types/form'
 import { useId } from '#imports'
 
@@ -25,11 +26,13 @@ class FormException extends Error {
 export default defineComponent({
   props: {
     schema: {
-      type: Object as
+      type: [Object, Function] as
         | PropType<ZodSchema>
         | PropType<YupObjectSchema<any>>
         | PropType<JoiSchema>
-        | PropType<ValibotObjectSchema<any>>,
+        | PropType<ValibotSchema30 | ValibotSchemaAsync30>
+        | PropType<ValibotSchema | ValibotSchemaAsync>
+        | PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>>,
       default: undefined
     },
     state: {
@@ -255,21 +258,19 @@ async function getJoiErrors (
   }
 }
 
-function isValibotSchema (schema: any): schema is ValibotObjectSchema<any> {
+function isValibotSchema (schema: any): schema is ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> {
-  return schema._parse !== undefined
+  return '_parse' in schema || '_run' in schema || (typeof schema === 'function' && 'schema' in schema)
 }
 
 async function getValibotError (
   state: any,
-  schema: ValibotObjectSchema<any>
+  schema: ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>
 ): Promise<FormError[]> {
-  const result = await schema._parse(state)
+  const result = await ('_parse' in schema ? schema._parse(state) : '_run' in schema ? schema._run({ typed: false, value: state }, {}) : schema(state))
-  if (result.issues) {
+  return result.issues?.map((issue) => ({
-    return result.issues.map((issue) => ({
+    // We know that the key for a form schema is always a string or a number
-      path: issue.path?.map(p => p.key).join('.') || '',
+    path: issue.path?.map((item) => item.key).join('.') || '',
-      message: issue.message
+    message: issue.message
-    }))
+  })) || []
-  }
-  return []
 }
 </script>