refactor: optimize bundle size

Author: JB AUBREE

src/errors.ts

@@ -1,9 +1,5 @@
 import type { FieldErrors, Form, GetErrorsFn, InputSchema } from './types'
-import { getJoiErrors, isJoiSchema } from './joi'
-import { getSuperStructErrors, isSuperStructSchema } from './superstruct'
-import { getValibotErrors, isValibotSchema } from './valibot'
-import { getYupErrors, isYupSchema } from './yup'
-import { getZodErrors, isZodSchema } from './zod'
+import { validators } from './validators'
 
 export async function getErrors<S extends InputSchema<F>, F extends Form>(
   schema: S,
@@ -19,23 +15,12 @@ export async function getErrors<S, F extends Form>(
   form: F,
   transformFn?: GetErrorsFn<S, F>,
 ): Promise<FieldErrors<F>> {
-  if (transformFn) {
+  if (transformFn)
     return await transformFn(schema, form)
-  }
-  if (isZodSchema(schema)) {
-    return await getZodErrors<F>(schema, form)
-  }
-  if (isYupSchema<F>(schema)) {
-    return await getYupErrors<F>(schema, form)
-  }
-  if (isJoiSchema(schema)) {
-    return await getJoiErrors<F>(schema, form)
-  }
-  if (isValibotSchema(schema)) {
-    return getValibotErrors<F>(schema, form)
-  }
-  if (isSuperStructSchema<S, F>(schema)) {
-    return getSuperStructErrors<S, F>(schema, form)
+  for (const validator of Object.values(validators)) {
+    if (validator.check(schema)) {
+      return await validator.getErrors(schema, form)
+    }
   }
   return {}
 }

src/joi.ts

@@ -1,16 +1,11 @@
 export function polyfillGroupBy<T>(): void {
   if (!Object.groupBy) {
     Object.defineProperty(Object, 'groupBy', {
-      value(array: T[], keyGetter: (item: T) => string): Record<string, T[]> {
-        return array.reduce((result, currentItem) => {
-          const key = keyGetter(currentItem)
-          if (!result[key]) {
-            result[key] = []
-          }
-          result[key].push(currentItem)
-          return result
-        }, {} as Record<string, T[]>)
-      },
+      value: (array: T[], keyGetter: (item: T) => string): Record<string, T[]> => array.reduce((result: Record<string, T[]>, item: T) => {
+        const key = keyGetter(item);
+        (result[key] ??= []).push(item)
+        return result
+      }, {}),
       writable: true,
       configurable: true,
     })

src/polyfill.ts

@@ -12,16 +12,11 @@ interface YupSchema<F> extends AnyObject {
 interface ValibotSchema<F> extends AnyObject {
   entries: Record<keyof F, unknown>
 }
-// interface JoiTerms<F> extends AnyObject {
-//   keys: Array<{ key: keyof F, schema: unknown }>
-// }
-// interface JoiSchema<F> extends AnyObject {
-//   $_terms: JoiTerms<F>
-// }
 interface SuperstructSchema<F> extends AnyObject {
   schema: Record<keyof F, unknown>
 }
 
+export type Validator = 'Joi' | 'SuperStruct' | 'Valibot' | 'Yup' | 'Zod'
 export type Awaitable<T> = T | PromiseLike<T>
 export type FieldErrors<F> = Partial<Record<keyof F, string>>
 export type Form = Record<string, unknown>

src/superstruct.ts

@@ -19,7 +19,7 @@ export function useFormValidation<S extends InputSchema<F>, F extends Form>(
   options?: { mode?: 'eager' | 'lazy', transformFn?: GetErrorsFn<S, F> },
 ): ReturnType<F> {
   polyfillGroupBy()
-  const opts = Object.assign({}, { mode: 'lazy', transformFn: undefined }, options)
+  const opts = { mode: 'lazy', transformFn: null, ...options }
 
   const errors = shallowRef<FieldErrors<F>>({})
 
@@ -34,36 +34,22 @@ export function useFormValidation<S extends InputSchema<F>, F extends Form>(
   }
   const getErrorMessage = (path: keyof F): string | undefined => errors.value[path]
 
-  let unwatch: null | (() => void) = null
-  const validationWatch: () => void = () => {
-    if (unwatch !== null)
-      return
-    unwatch = watch(
-      () => toValue(form),
-      async () => {
-        // eslint-disable-next-line ts/no-use-before-define
-        await validate()
-      },
-      { deep: true },
-    )
-  }
-
   const validate = async (): Promise<FieldErrors<F>> => {
     isLoading.value = true
     clearErrors()
     errors.value = opts.transformFn
       ? await getErrors<S, F>(toValue(schema), toValue(form), opts.transformFn)
       : await getErrors<S, F>(toValue(schema), toValue(form))
-    if (hasError.value) {
-      validationWatch()
-    }
+
+    if (hasError.value)
+    // eslint-disable-next-line ts/no-use-before-define
+      watchFormChanges()
     isLoading.value = false
     return errors.value
   }
 
   const focusInput = ({ inputName }: { inputName: keyof F }): void => {
-    const element: HTMLInputElement | null = document.querySelector(`input[name="${inputName.toString()}"]`)
-    element?.focus()
+    (document.querySelector(`input[name="${inputName.toString()}"]`) as HTMLInputElement | null)?.focus()
   }
   const focusFirstErroredInput = (): void => {
     for (const key in toValue(form)) {
@@ -74,10 +60,15 @@ export function useFormValidation<S extends InputSchema<F>, F extends Form>(
     }
   }
 
-  if (opts.mode === 'eager') {
-    validationWatch()
+  let unwatch: null | (() => void)
+  const watchFormChanges = (): void | (() => void) => {
+    if (!unwatch)
+      unwatch = watch(() => toValue(form), validate, { deep: true })
   }
 
+  if (opts.mode === 'eager')
+    watchFormChanges()
+
   return {
     validate,
     errors,

src/types.ts

@@ -0,0 +1,18 @@
+import type { Awaitable, FieldErrors, Form, Validator } from '../types'
+import { Joi } from './joi'
+import { SuperStruct } from './superstruct'
+import { Valibot } from './valibot'
+import { Yup } from './yup'
+import { Zod } from './zod'
+
+export const validators: Record<Validator, {
+  check: (schema: unknown) => boolean
+  errorCheck?: (error: unknown) => boolean
+  getErrors: <F extends Form>(schema: any, form: F) => Awaitable<FieldErrors<F>>
+}> = {
+  Joi,
+  SuperStruct,
+  Valibot,
+  Yup,
+  Zod,
+}

src/useFormValidation.ts

@@ -0,0 +1,20 @@
+import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
+import type { FieldErrors, Form } from '../types'
+import { isNonNullObject } from '../utils'
+
+export const Joi = {
+  check: (schema: unknown): schema is JoiSchema => isNonNullObject(schema) && 'validateAsync' in schema,
+  errorCheck: (error: unknown): error is JoiError => isNonNullObject(error) && error.isJoi === true,
+  async getErrors<F extends Form>(schema: JoiSchema, form: F): Promise<FieldErrors<F>> {
+    const errors: FieldErrors<F> = {}
+    try {
+      await schema.validateAsync(form, { abortEarly: false })
+    }
+    catch (error) {
+      if (Joi.errorCheck(error)) {
+        error.details.forEach(i => errors[i.path[0] as keyof F] = i.message)
+      }
+    }
+    return errors
+  },
+}

src/valibot.ts

@@ -0,0 +1,13 @@
+import type { Struct } from 'superstruct'
+import type { FieldErrors, Form } from '../types'
+import { isNonNullObject } from '../utils'
+
+export const SuperStruct = {
+  check: (schema: unknown) => isNonNullObject(schema) && 'validator' in schema,
+  getErrors<S, F extends Form>(schema: Struct<F, S>, form: F): FieldErrors<F> {
+    const errors: FieldErrors<F> = {}
+    const [structError] = schema.validate(form)
+    structError?.failures().forEach(i => errors[i.path[0] as keyof F] = i.message)
+    return errors
+  },
+}