chore: use es-toolkit for deepClone and isEqual utilities

Author: lcdss

package-lock.json

@@ -59,7 +59,7 @@
     "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@gilbarbara/deep-equal": "^0.3.1",
-    "@inertiajs/core": "2.0.5"
+    "@inertiajs/core": "2.0.5",
+    "es-toolkit": "^1.33.0"
   }
 }

packages/react/package.json

@@ -1,5 +1,5 @@
 import { FormDataConvertible, Method, Progress, router, VisitOptions } from '@inertiajs/core'
-import isDeepEqual from '@gilbarbara/deep-equal'
+import { isEqual } from 'es-toolkit'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import useRemember from './useRemember'
 
@@ -270,7 +270,7 @@ export default function useForm<TForm extends FormDataType>(
   return {
     data,
     setData: setDataFunction,
-    isDirty: !isDeepEqual(data, defaults),
+    isDirty: !isEqual(data, defaults),
     errors,
     hasErrors,
     processing,

packages/react/src/useForm.ts

@@ -15,6 +15,7 @@
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
 
     "noImplicitThis": false,
     "noUnusedLocals": true,

packages/react/tsconfig.json

@@ -43,10 +43,9 @@
     "svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.244"
   },
   "dependencies": {
-    "@gilbarbara/deep-equal": "^0.3.1",
     "@inertiajs/core": "2.0.5",
-    "html-escape": "^2.0.0",
-	  "klona": "^2.0.5"
+    "es-toolkit": "^1.33.0",
+    "html-escape": "^2.0.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",

packages/svelte/package.json

@@ -11,8 +11,7 @@ import type {
 } from '@inertiajs/core'
 import { router } from '@inertiajs/core'
 import type { AxiosProgressEvent } from 'axios'
-import { klona } from 'klona/full'
-import isDeepEqual from '@gilbarbara/deep-equal'
+import { cloneDeep, isEqual } from 'es-toolkit'
 import { writable, type Writable } from 'svelte/store'
 
 type FormDataType = Record<string, FormDataConvertible>
@@ -63,7 +62,7 @@ export default function useForm<TForm extends FormDataType>(
   const restored = rememberKey
     ? (router.restore(rememberKey) as { data: TForm; errors: Record<keyof TForm, string> } | null)
     : null
-  let defaults = klona(data)
+  let defaults = cloneDeep(data)
   let cancelToken: { cancel: () => void } | null = null
   let recentlySuccessfulTimeoutId: ReturnType<typeof setTimeout> | null = null
   let transform = (data: TForm) => data as object
@@ -95,16 +94,16 @@ export default function useForm<TForm extends FormDataType>(
     defaults(fieldOrFields?: keyof TForm | Partial<TForm>, maybeValue?: FormDataConvertible) {
       defaults =
         typeof fieldOrFields === 'undefined'
-          ? klona(this.data())
+          ? cloneDeep(this.data())
           : Object.assign(
-              klona(defaults),
+              cloneDeep(defaults),
               typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields,
             )
 
       return this
     },
     reset(...fields) {
-      const clonedData = klona(defaults)
+      const clonedData = cloneDeep(defaults)
       if (fields.length === 0) {
         this.setStore(clonedData)
       } else {
@@ -244,7 +243,7 @@ export default function useForm<TForm extends FormDataType>(
   } as InertiaForm<TForm>)
 
   store.subscribe((form) => {
-    if (form.isDirty === isDeepEqual(form.data(), defaults)) {
+    if (form.isDirty === isEqual(form.data(), defaults)) {
       form.setStore('isDirty', !form.isDirty)
     }
 

packages/svelte/src/useForm.ts

@@ -58,8 +58,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@gilbarbara/deep-equal": "^0.3.1",
     "@inertiajs/core": "2.0.5",
-	  "klona": "^2.0.5"
+    "es-toolkit": "^1.33.0"
   }
 }

packages/vue3/package.json

@@ -1,5 +1,5 @@
 import { router } from '@inertiajs/core'
-import { klona } from 'klona/full'
+import { cloneDeep } from 'es-toolkit'
 import { ComponentOptions } from 'vue'
 
 const remember: ComponentOptions = {
@@ -52,7 +52,7 @@ const remember: ComponentOptions = {
             rememberable.reduce(
               (data, key) => ({
                 ...data,
-                [key]: klona(hasCallbacks(key) ? this[key].__remember() : this[key]),
+                [key]: cloneDeep(hasCallbacks(key) ? this[key].__remember() : this[key]),
               }),
               {},
             ),

packages/vue3/src/remember.ts

@@ -1,6 +1,5 @@
 import { FormDataConvertible, Method, Progress, router, VisitOptions } from '@inertiajs/core'
-import { klona } from 'klona/full'
-import isDeepEqual from '@gilbarbara/deep-equal'
+import { cloneDeep, isEqual } from 'es-toolkit'
 import { reactive, watch } from 'vue'
 
 type FormDataType = Record<string, FormDataConvertible>
@@ -48,13 +47,13 @@ export default function useForm<TForm extends FormDataType>(
   const restored = rememberKey
     ? (router.restore(rememberKey) as { data: TForm; errors: Record<keyof TForm, string> })
     : null
-  let defaults = typeof data === 'function' ? klona(data()) : klona(data)
+  let defaults = typeof data === 'function' ? cloneDeep(data()) : cloneDeep(data)
   let cancelToken = null
   let recentlySuccessfulTimeoutId = null
   let transform = (data) => data
 
   const form = reactive({
-    ...(restored ? restored.data : klona(defaults)),
+    ...(restored ? restored.data : cloneDeep(defaults)),
     isDirty: false,
     errors: restored ? restored.errors : {},
     hasErrors: false,
@@ -84,16 +83,16 @@ export default function useForm<TForm extends FormDataType>(
       } else {
         defaults = Object.assign(
           {},
-          klona(defaults),
+          cloneDeep(defaults),
           typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields,
         )
       }
 
       return this
     },
     reset(...fields) {
-      const resolvedData = typeof data === 'function' ? klona(data()) : klona(defaults)
-      const clonedData = klona(resolvedData)
+      const resolvedData = typeof data === 'function' ? cloneDeep(data()) : cloneDeep(defaults)
+      const clonedData = cloneDeep(resolvedData)
       if (fields.length === 0) {
         defaults = clonedData
         Object.assign(this, resolvedData)
@@ -171,7 +170,7 @@ export default function useForm<TForm extends FormDataType>(
           recentlySuccessfulTimeoutId = setTimeout(() => (this.recentlySuccessful = false), 2000)
 
           const onSuccess = options.onSuccess ? await options.onSuccess(page) : null
-          defaults = klona(this.data())
+          defaults = cloneDeep(this.data())
           this.isDirty = false
           return onSuccess
         },
@@ -242,9 +241,9 @@ export default function useForm<TForm extends FormDataType>(
   watch(
     form,
     (newValue) => {
-      form.isDirty = !isDeepEqual(form.data(), defaults)
+      form.isDirty = !isEqual(form.data(), defaults)
       if (rememberKey) {
-        router.remember(klona(newValue.__remember()), rememberKey)
+        router.remember(cloneDeep(newValue.__remember()), rememberKey)
       }
     },
     { immediate: true, deep: true },

packages/vue3/src/useForm.ts

@@ -1,5 +1,5 @@
 import { router } from '@inertiajs/core'
-import { klona } from 'klona/full'
+import { cloneDeep } from 'es-toolkit'
 import { isReactive, reactive, ref, Ref, watch } from 'vue'
 
 export default function useRemember<T extends object>(
@@ -18,7 +18,7 @@ export default function useRemember<T extends object>(
   watch(
     remembered,
     (newValue) => {
-      router.remember(klona(hasCallbacks ? data.__remember() : newValue), key)
+      router.remember(cloneDeep(hasCallbacks ? data.__remember() : newValue), key)
     },
     { immediate: true, deep: true },
   )