refactor(errors): use keys with dots

Author: joaopalopes24

packages/react/src/useForm.ts

@@ -218,10 +218,12 @@ export default function useForm<TForm extends FormDataType>(
   const setError = useCallback(
     (fieldOrFields: FormDataKeys<TForm> | Record<FormDataKeys<TForm>, string>, maybeValue?: string) => {
       setErrors((errors) => {
-        const newErrors =
-          typeof fieldOrFields === 'string'
-            ? set(cloneDeep(errors), fieldOrFields, maybeValue)
-            : Object.assign(cloneDeep(errors), fieldOrFields)
+        const newErrors = {
+          ...errors,
+          ...(typeof fieldOrFields === 'string'
+            ? { [fieldOrFields]: maybeValue }
+            : (fieldOrFields as Record<FormDataKeys<TForm>, string>)),
+        }
         setHasErrors(Object.keys(newErrors).length > 0)
         return newErrors
       })
@@ -232,11 +234,13 @@ export default function useForm<TForm extends FormDataType>(
   const clearErrors = useCallback(
     (...fields) => {
       setErrors((errors) => {
-        const newErrors = (Object.keys(errors) as Array<FormDataKeys<TForm>>).reduce((carry, field) => {
-          return fields.length > 0 && !fields.includes(field)
-            ? set(carry, field, get(errors, field))
-            : (carry as Record<FormDataKeys<TForm>, string>)
-        }, {})
+        const newErrors = (Object.keys(errors) as Array<FormDataKeys<TForm>>).reduce(
+          (carry, field) => ({
+            ...carry,
+            ...(fields.length > 0 && !fields.includes(field) ? { [field]: errors[field] } : {}),
+          }),
+          {},
+        )
         setHasErrors(Object.keys(newErrors).length > 0)
         return newErrors
       })

packages/svelte/src/useForm.ts

@@ -120,21 +120,23 @@ export default function useForm<TForm extends FormDataType>(
       return this
     },
     setError(fieldOrFields: FormDataKeys<TForm> | Errors, maybeValue?: string) {
-      this.setStore(
-        'errors',
-        typeof fieldOrFields === 'string'
-          ? set(this.errors, fieldOrFields, maybeValue)
-          : { ...this.errors, ...fieldOrFields },
-      )
+      this.setStore('errors', {
+        ...this.errors,
+        ...((typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields) as Errors),
+      })
 
       return this
     },
     clearErrors(...fields) {
       this.setStore(
         'errors',
-        (Object.keys(this.errors) as FormDataKeys<TForm>[]).reduce((carry, field) => {
-          return fields.length > 0 && !fields.includes(field) ? set(carry, field, get(this.errors, field)) : carry
-        }, {}) as Errors,
+        (Object.keys(this.errors) as FormDataKeys<TForm>[]).reduce(
+          (carry, field) => ({
+            ...carry,
+            ...(fields.length > 0 && !fields.includes(field) ? { [field]: this.errors[field] } : {}),
+          }),
+          {},
+        ) as Errors,
       )
       return this
     },

packages/svelte/test-app/Pages/Visits/ReloadOnMount.svelte

@@ -1,14 +1,12 @@
 <script>
-import { router } from '@inertiajs/svelte'
-import { onMount } from 'svelte'
+  import { router } from '@inertiajs/svelte'
+  import { onMount } from 'svelte'
 
-export let name = undefined;
-
-onMount(() => {
-    router.reload({only: ['name']})
-})
+  export let name = undefined
 
+  onMount(() => {
+    router.reload({ only: ['name'] })
+  })
 </script>
 
-
 <div>Name is {name}</div>

packages/vue3/src/useForm.ts

@@ -1,5 +1,5 @@
 import { FormDataConvertible, FormDataKeys, Method, Progress, router, VisitOptions } from '@inertiajs/core'
-import { cloneDeep, get, has, isEqual, set } from 'lodash'
+import { cloneDeep, get, isEqual, set } from 'lodash'
 import { reactive, watch } from 'vue'
 
 type FormDataType = Record<string, FormDataConvertible>
@@ -95,29 +95,31 @@ export default function useForm<TForm extends FormDataType>(
         defaults = clonedData
         Object.assign(this, resolvedData)
       } else {
-        ;(fields as Array<FormDataKeys<TForm>>)
-          .filter((key) => has(clonedData, key))
+        Object.keys(resolvedData)
+          .filter((key) => fields.includes(key))
           .forEach((key) => {
-            set(defaults, key, get(clonedData, key))
-            set(this, key, get(resolvedData, key))
+            defaults[key] = clonedData[key]
+            this[key] = resolvedData[key]
           })
       }
 
       return this
     },
     setError(fieldOrFields: FormDataKeys<TForm> | Record<FormDataKeys<TForm>, string>, maybeValue?: string) {
-      typeof fieldOrFields === 'string'
-        ? set(this.errors, fieldOrFields, maybeValue)
-        : Object.assign(this.errors, fieldOrFields)
+      Object.assign(this.errors, typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields)
 
       this.hasErrors = Object.keys(this.errors).length > 0
 
       return this
     },
     clearErrors(...fields) {
-      this.errors = Object.keys(this.errors).reduce((carry, field) => {
-        return fields.length > 0 && !fields.includes(field) ? set(carry, field, get(this.errors, field)) : carry
-      }, {})
+      this.errors = Object.keys(this.errors).reduce(
+        (carry, field) => ({
+          ...carry,
+          ...(fields.length > 0 && !fields.includes(field) ? { [field]: this.errors[field] } : {}),
+        }),
+        {},
+      )
 
       this.hasErrors = Object.keys(this.errors).length > 0