Support Inertia transform (#72)

* Support Inertia transform with Vue

* Support Inertia transform with React

* lint

Author: timacdonald

packages/react-inertia/src/index.ts

@@ -43,6 +43,16 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
      */
     const inertiaSetData = inertiaForm.setData.bind(inertiaForm)
 
+    /**
+     * The Inertia trasform function.
+     */
+    const inertiaTransform = inertiaForm.transform.bind(inertiaForm)
+
+    /**
+     * The transform function.
+     */
+    const transformer = useRef<(data: Data) => Data>((data) => data)
+
     if (! booted.current) {
         /**
          * Setup event listeners.
@@ -116,8 +126,15 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
 
             return form
         },
+        transform(callback: (data: Data) => Data) {
+            inertiaTransform(callback)
+
+            transformer.current = callback
+
+            return form
+        },
         validate(name?: string|NamedInputEvent) {
-            precognitiveForm.setData(inertiaForm.data)
+            precognitiveForm.setData(transformer.current(inertiaForm.data))
 
             precognitiveForm.validate(name)
 

packages/vue-inertia/src/index.ts

@@ -48,6 +48,16 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
      */
     const inertiaSetError = inertiaForm.setError.bind(inertiaForm)
 
+    /**
+     * The Inertia trasform function.
+     */
+    const inertiaTransform = inertiaForm.transform.bind(inertiaForm)
+
+    /**
+     * The transform function.
+     */
+    let transformer: (data: Data) => Record<string, unknown> = (data) => data
+
     /**
      * Patch the form.
      */
@@ -98,8 +108,15 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
 
             return form
         },
+        transform(callback: (data: Data) => Record<string, unknown>) {
+            inertiaTransform(callback)
+
+            transformer = callback
+
+            return form
+        },
         validate(name?: string|NamedInputEvent) {
-            precognitiveForm.setData(inertiaForm.data())
+            precognitiveForm.setData(transformer(inertiaForm.data()))
 
             precognitiveForm.validate(name)
 

packages/vue-inertia/tests/index.test.ts

@@ -1,5 +1,16 @@
-import { it, expect } from 'vitest'
-import { useForm } from '../src/index'
+import { it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { useForm, client } from '../src/index'
+import axios from 'axios'
+import { Config } from 'laravel-precognition'
+
+beforeEach(() => {
+    vi.mock('axios')
+    client.use(axios)
+})
+
+afterEach(() => {
+    vi.restoreAllMocks()
+})
 
 it('can clear all errors via Inertia\'s clearErrors', () => {
     const form = useForm('post', '/register', {
@@ -44,3 +55,49 @@ it('can clear specific errors via Inertia\'s clearErrors', () => {
         other: ['xxxx'],
     })
 })
+
+it('provides default data for validation requets', () => {
+    const response = { headers: { precognition: 'true', 'precognition-success': 'true' }, status: 204, data: 'data' }
+
+    let config: Config
+    axios.request.mockImplementation(async (c: Config) => {
+        config = c
+
+        return response
+    })
+
+    const form = useForm('post', '/register', {
+        emails: '',
+    })
+
+    form.emails = 'taylor@laravel.com, tim@laravel.com'
+    form.validate('emails')
+
+    expect(config!.data.emails).toEqual('taylor@laravel.com, tim@laravel.com')
+    expect(form.emails).toBe('taylor@laravel.com, tim@laravel.com')
+    expect(form.data().emails).toBe('taylor@laravel.com, tim@laravel.com')
+})
+
+it('transforms data for validation requests', () => {
+    const response = { headers: { precognition: 'true', 'precognition-success': 'true' }, status: 204, data: 'data' }
+
+    let config: Config
+    axios.request.mockImplementation(async (c: Config) => {
+        config = c
+
+        return response
+    })
+
+    const form = useForm('post', '/register', {
+        emails: '',
+    }).transform((data) => ({
+        emails: data.emails.split(',').map(email => email.trim()),
+    }))
+
+    form.emails = 'taylor@laravel.com, tim@laravel.com'
+    form.validate('emails')
+
+    expect(config!.data.emails).toEqual(['taylor@laravel.com', 'tim@laravel.com'])
+    expect(form.emails).toBe('taylor@laravel.com, tim@laravel.com')
+    expect(form.data().emails).toBe('taylor@laravel.com, tim@laravel.com')
+})