[0.3.x] Fix react-inertia setError bug (#22)

* Fix react-inertia setError bug

* Do not reference "this"

* Improve reference

---------

Co-authored-by: Tim MacDonald <[email protected]>

Author: yo-goto

packages/core/src/client.ts

@@ -31,10 +31,10 @@ export const client: Client = {
     patch: (url, data = {}, config = {}) => request(mergeConfig('patch', url, data, config)),
     put: (url, data = {}, config = {}) => request(mergeConfig('put', url, data, config)),
     delete: (url, data = {}, config = {}) => request(mergeConfig('delete', url, data, config)),
-    use(client) {
-        axiosClient = client
+    use(axios) {
+        axiosClient = axios
 
-        return this
+        return client
     },
     axios() {
         return axiosClient
@@ -44,12 +44,12 @@ export const client: Client = {
             ? () => null
             : callback
 
-        return this
+        return client
     },
     determineSuccessUsing(callback) {
         successResolver = callback
 
-        return this
+        return client
     },
 }
 

packages/core/src/validator.ts

@@ -111,8 +111,6 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
         validator.cancel()
 
         validator = createValidator()
-
-        return this
     }
 
     /**
@@ -233,12 +231,12 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
     /**
      * The form validator instance.
      */
-    return {
+    const form: TValidator = {
         touched: () => touched,
         validate(input, value) {
             validate(input, value)
 
-            return this
+            return form
         },
         validating: () => validating,
         valid,
@@ -247,12 +245,12 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
         setErrors(value) {
             setErrors(value)
 
-            return this
+            return form
         },
         forgetError(name) {
             forgetError(name)
 
-            return this
+            return form
         },
         reset(...names) {
             if (names.length === 0) {
@@ -271,24 +269,26 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
                 setTouched(newTouched)
             }
 
-            return this
+            return form
         },
         setTimeout(value) {
             setDebounceTimeout(value)
 
-            return this
+            return form
         },
         on(event, callback) {
             listeners[event].push(callback)
 
-            return this
+            return form
         },
         validateFiles() {
             validateFiles = true
 
-            return this
+            return form
         },
     }
+
+    return form
 }
 
 /**

packages/react-inertia/src/index.ts

@@ -62,7 +62,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
     /**
      * Patch the form.
      */
-    return Object.assign(inertiaForm, {
+    const form = Object.assign(inertiaForm, {
         validating: precognitiveForm.validating,
         touched: precognitiveForm.touched,
         valid: precognitiveForm.valid,
@@ -72,7 +72,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
 
             precognitiveForm.setData(key, value)
 
-            return this
+            return form
         },
         clearErrors(...names: string[]) {
             inertiaClearErrors(...names)
@@ -83,7 +83,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
                 names.forEach(precognitiveForm.forgetError)
             }
 
-            return this
+            return form
         },
         reset(...names: string[]) {
             inertiaReset(...names)
@@ -94,39 +94,39 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
             // @ts-expect-error
             precognitiveForm.setErrors(errors)
 
-            return this
+            return form
         },
         setError(key: any, value?: any) {
-            this.setErrors({
+            form.setErrors({
                 ...inertiaForm.errors,
                 ...typeof value === 'undefined'
                     ? key
                     : { [key]: value },
             })
 
-            return this
+            return form
         },
         forgetError(name: string|NamedInputEvent) {
             precognitiveForm.forgetError(name)
 
-            return this
+            return form
         },
         validate(name: string|NamedInputEvent) {
             precognitiveForm.setData(inertiaForm.data)
 
             precognitiveForm.validate(name)
 
-            return this
+            return form
         },
         setValidationTimeout(duration: number) {
             precognitiveForm.setValidationTimeout(duration)
 
-            return this
+            return form
         },
         validateFiles() {
             precognitiveForm.validateFiles()
 
-            return this
+            return form
         },
         submit(submitMethod: RequestMethod|Config = {}, submitUrl?: string, submitOptions?: any): void {
             const isPatchedCall = typeof submitMethod !== 'string'
@@ -156,4 +156,6 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
         },
         validator: precognitiveForm.validator,
     })
+
+    return form
 }

packages/react/src/index.ts

@@ -118,7 +118,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
     /**
      * The form instance.
      */
-    return {
+    const form: Form<Data> = {
         data,
         setData(key, value) {
             if (typeof key === 'object') {
@@ -133,7 +133,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
                 setData(payload.current)
             }
 
-            return this
+            return form
         },
         touched(name) {
             return touched.includes(name)
@@ -144,7 +144,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
 
             validator.current!.validate(name, get(payload.current, name))
 
-            return this
+            return form
         },
         validating,
         valid(name) {
@@ -159,13 +159,13 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
             // @ts-expect-error
             validator.current!.setErrors(errors)
 
-            return this
+            return form
         },
         forgetError(name) {
             // @ts-expect-error
             validator.current!.forgetError(name)
 
-            return this
+            return form
         },
         reset(...names) {
             const original = cloneDeep(originalData.current)!
@@ -183,12 +183,12 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
             // @ts-expect-error
             validator.current!.reset(...names)
 
-            return this
+            return form
         },
         setValidationTimeout(duration) {
             validator.current!.setTimeout(duration)
 
-            return this
+            return form
         },
         processing,
         async submit(config = {}) {
@@ -197,10 +197,12 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
         validateFiles() {
             validator.current!.validateFiles()
 
-            return this
+            return form
         },
         validator() {
             return validator.current!
         },
     }
+
+    return form
 }

packages/vue-inertia/src/index.ts

@@ -50,7 +50,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
     /**
      * Patch the form.
      */
-    return Object.assign(inertiaForm, {
+    const form = Object.assign(inertiaForm, {
         validating: precognitiveForm.validating,
         touched: precognitiveForm.touched,
         valid: precognitiveForm.valid,
@@ -64,7 +64,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
                 names.forEach(precognitiveForm.forgetError)
             }
 
-            return this
+            return form
         },
         reset(...names: string[]) {
             inertiaReset(...names)
@@ -75,39 +75,39 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
             // @ts-expect-error
             precognitiveForm.setErrors(errors)
 
-            return this
+            return form
         },
         forgetError(name: string|NamedInputEvent) {
             precognitiveForm.forgetError(name)
 
-            return this
+            return form
         },
         setError(key: any, value?: any) {
-            this.setErrors({
+            form.setErrors({
                 ...inertiaForm.errors,
                 ...typeof value === 'undefined'
                     ? key
                     : { [key]: value },
             })
 
-            return this
+            return form
         },
         validate(name: string|NamedInputEvent) {
             precognitiveForm.setData(inertiaForm.data())
 
             precognitiveForm.validate(name)
 
-            return this
+            return form
         },
         setValidationTimeout(duration: number) {
             precognitiveForm.setValidationTimeout(duration)
 
-            return this
+            return form
         },
         validateFiles() {
             precognitiveForm.validateFiles()
 
-            return this
+            return form
         },
         submit(submitMethod: RequestMethod|Config = {}, submitUrl?: string, submitOptions?: any): void {
             const isPatchedCall = typeof submitMethod !== 'string'
@@ -137,4 +137,6 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
         },
         validator: precognitiveForm.validator,
     })
+
+    return form
 }

packages/vue/src/index.ts

@@ -79,7 +79,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
     /**
      * Create a new form instance.
      */
-    const createForm = (): Data&Form<Data> => ({
+    let form: Data&Form<Data> = {
         ...cloneDeep(originalData),
         data() {
             const data = cloneDeep(toRaw(form))
@@ -91,7 +91,8 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
         },
         setData(data: Record<string, unknown>) {
             Object.keys(data).forEach(input => {
-                this[input] = data[input]
+                // @ts-expect-error
+                form[input] = data[input]
             })
 
             return form
@@ -104,7 +105,7 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
             // @ts-expect-error
             name = resolveName(name)
 
-            validator.validate(name, get(this.data(), name))
+            validator.validate(name, get(form.data(), name))
 
             return form
         },
@@ -162,12 +163,9 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
         validator() {
             return validator
         },
-    })
+    }
 
-    /**
-     * The form instance.
-     */
-    const form = reactive(createForm()) as Data&Form<Data>
+    form = reactive(form) as Data&Form<Data>
 
     return form
 }