refactor: replace zod with valibot (#912)

* refactor: replace zod with valibot

* refactor: validatedBody

* chore: cspell config

* chore: format

---------

Co-authored-by: ubugeeei <[email protected]>

Author: hannoeru

app/components/form/VFForm.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
-import type { ZodSchema } from "zod";
+import type * as v from "valibot";
 import {
   type FormFieldState,
   type FormSubmitEvent,
   Form as PForm,
 } from "@primevue/forms";
-import { zodResolver } from "@primevue/forms/resolvers/zod";
+import { valibotResolver } from "@primevue/forms/resolvers/valibot";
 import { useTemplateRef } from "#imports";
 
 export { type FormSubmitEvent, type FormFieldState } from "@primevue/forms";
@@ -14,7 +14,8 @@ export interface FormProps<State extends object> {
   initialValues: State;
   /** @default "blur" */
   validateOn?: "blur" | "submit" | "immediate";
-  schema?: ZodSchema<State>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  schema?: v.ObjectSchema<any, any> | v.ObjectSchemaAsync<any, any>;
 }
 
 export interface FormEmits {
@@ -55,7 +56,7 @@ defineExpose({
     v-slot="$form"
     ref="form"
     :initial-values
-    :resolver="schema ? zodResolver(schema) : undefined"
+    :resolver="schema ? valibotResolver(schema) : undefined"
     :validate-on-blur="validateOn === 'blur'"
     :validate-on-submit="validateOn === 'submit'"
     :validate-on-mount="validateOn === 'immediate'"

app/pages/_components/SectionContact.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { z } from "zod";
+import * as v from "valibot";
 import { HOME_HEADING_ID } from "~/constant";
 import { reactive, useI18n, useRuntimeConfig } from "#imports";
 import { VFSection, VFButton } from "#components";
@@ -12,20 +12,23 @@ const config = useRuntimeConfig();
 
 const toast = useToast();
 
-const schema = z.object({
-  name: z
-    .string()
-    .nonempty(t("validation.required", { target: t("contactForm.formFields.name.label") })),
-  email: z
-    .string()
-    .nonempty(t("validation.required", { target: t("contactForm.formFields.email.label") }))
-    .email(t("validation.email")),
-  content: z
-    .string()
-    .nonempty(t("validation.required", { target: t("contactForm.formFields.content.label") })),
+const schema = v.object({
+  name: v.pipe(
+    v.string(),
+    v.nonEmpty(t("validation.required", { target: t("contactForm.formFields.name.label") })),
+  ),
+  email: v.pipe(
+    v.string(),
+    v.nonEmpty(t("validation.required", { target: t("contactForm.formFields.email.label") })),
+    v.email(t("validation.email")),
+  ),
+  content: v.pipe(
+    v.string(),
+    v.nonEmpty(t("validation.required", { target: t("contactForm.formFields.content.label") })),
+  ),
 });
 
-const state = reactive<z.infer<typeof schema>>({
+const state = reactive<v.InferOutput<typeof schema>>({
   name: "",
   email: "",
   content: "",

app/pages/ticket/[userId]/edit/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { z } from "zod";
+import * as v from "valibot";
 import emojiRegex from "emoji-regex";
 
 import { useLocaleRoute } from "@typed-router";
@@ -51,52 +51,51 @@ const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => {
   return +result.toFixed(decimalsNum);
 };
 
-const schema = z.object({
-  name: z
-    .string()
-    .min(1, t("nameBadge.form.name.error.required"))
-    .refine(
+const schema = v.objectAsync({
+  name: v.pipe(
+    v.string(),
+    v.minLength(1, t("nameBadge.form.name.error.required")),
+    v.check(
       (value) => {
         const len = [...value].reduce(
           (len, char) => len + (/[\u2E80-\u9FFF\uF900-\uFAFF\uFF00-\uFFEF]/.test(char) ? 2 : 1),
           0,
         );
         return len <= 24;
       },
-      { message: t("nameBadge.form.name.error.tooLong") },
-    )
-    .refine(
+      t("nameBadge.form.name.error.tooLong"),
+    ),
+    v.check(
       value => !emojiRegex().test(value),
-      { message: t("nameBadge.form.name.error.emoji") },
+      t("nameBadge.form.name.error.emoji"),
     ),
+  ),
+
+  salesId: v.pipe(
+    v.string(),
+    v.minLength(1, t("nameBadge.form.receipt.error.required")),
+  ),
 
-  salesId: z
-    .string()
-    .min(1, t("nameBadge.form.receipt.error.required")),
-
-  avatarImage: z
-    .custom<VFFile>()
-    .refine(
-      file => !!file,
-      { message: t("nameBadge.form.avatarImage.error.required") },
-    )
-    .refine(
-      async (file) => {
+  avatarImage: v.pipeAsync(
+    v.custom<VFFile>((input: unknown): input is VFFile => !!input),
+    v.checkAsync(
+      async (file: VFFile) => {
         const { size } = await fetch(file.objectURL).then(r => r.blob());
         return sizeInMB(size) <= 5;
       },
-      { message: t("nameBadge.form.avatarImage.error.size") },
-    )
-    .refine(
-      file => ["image/jpg", "image/jpeg", "image/png"].includes(file.type),
-      { message: t("nameBadge.form.avatarImage.error.type") },
+      t("nameBadge.form.avatarImage.error.size"),
+    ),
+    v.check(
+      (file: VFFile) => ["image/jpg", "image/jpeg", "image/png"].includes(file.type),
+      t("nameBadge.form.avatarImage.error.type"),
     ),
+  ),
 });
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const form = useTemplateRef<any>("form");
-const currentStates = computed(() => form.value?.currentState?.() as FormFieldStates<z.infer<typeof schema>> | undefined);
-const initialValues = ref<Partial<z.infer<typeof schema>>>({
+const currentStates = computed(() => form.value?.currentState?.() as FormFieldStates<v.InferOutput<typeof schema>> | undefined);
+const initialValues = ref<Partial<v.InferOutput<typeof schema>>>({
   name: "",
   salesId: "",
   avatarImage: undefined,

cspell.config.yaml

@@ -151,6 +151,7 @@ words:
   - uniquevision
   - unplugin
   - vados
+  - valibot
   - Vashishtha
   - vejhszh
   - visasq

package.json

@@ -112,7 +112,7 @@
     "vue-router": "latest",
     "vue-tsc": "^2.2.8",
     "wrangler": "^4.23.0",
-    "zod": "^3.24.2"
+    "valibot": "^1.1.0"
   },
   "eslintConfig": {
     "extends": [