chore: replace lodash to decrease bundle size

lcdss · lcdss · commit 0380fdd14ccb · 2025-01-24T20:14:55.000-03:00
Replace `lodash.isequal` by `@gilbarbara/deep-equal` and
`lodash.clonedeep` by `klona` to decrease the bundle size.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -59,7 +59,7 @@
     "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@inertiajs/core": "2.0.3",
-    "lodash.isequal": "^4.5.0"
+    "@gilbarbara/deep-equal": "^0.3.1",
+    "@inertiajs/core": "2.0.3"
   }
 }
diff --git a/packages/react/src/useForm.ts b/packages/react/src/useForm.ts
@@ -1,5 +1,5 @@
 import { FormDataConvertible, Method, Progress, router, VisitOptions } from '@inertiajs/core'
-import isEqual from 'lodash.isequal'
+import isDeepEqual from '@gilbarbara/deep-equal'
 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: !isEqual(data, defaults),
+    isDirty: !isDeepEqual(data, defaults),
     errors,
     hasErrors,
     processing,
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -43,17 +43,17 @@
     "svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.244"
   },
   "dependencies": {
+    "@gilbarbara/deep-equal": "^0.3.1",
     "@inertiajs/core": "2.0.3",
     "html-escape": "^2.0.0",
-    "lodash": "^4.5.0"
+	  "klona": "^2.0.5"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.26",
     "@sveltejs/package": "^2.3.4",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@types/html-escape": "^2.0.2",
-    "@types/lodash": "^4.17.7",
     "axios": "^1.7.6",
     "publint": "^0.2.10",
     "svelte": "^4.2.16",
diff --git a/packages/svelte/src/useForm.ts b/packages/svelte/src/useForm.ts
@@ -11,8 +11,8 @@ import type {
 } from '@inertiajs/core'
 import { router } from '@inertiajs/core'
 import type { AxiosProgressEvent } from 'axios'
-import cloneDeep from 'lodash/cloneDeep'
-import isEqual from 'lodash/isEqual'
+import { klona } from 'klona/full'
+import isDeepEqual from '@gilbarbara/deep-equal'
 import { writable, type Writable } from 'svelte/store'
 
 type FormDataType = Record<string, FormDataConvertible>
@@ -63,7 +63,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 = cloneDeep(data)
+  let defaults = klona(data)
   let cancelToken: { cancel: () => void } | null = null
   let recentlySuccessfulTimeoutId: ReturnType<typeof setTimeout> | null = null
   let transform = (data: TForm) => data as object
@@ -95,16 +95,16 @@ export default function useForm<TForm extends FormDataType>(
     defaults(fieldOrFields?: keyof TForm | Partial<TForm>, maybeValue?: FormDataConvertible) {
       defaults =
         typeof fieldOrFields === 'undefined'
-          ? cloneDeep(this.data())
+          ? klona(this.data())
           : Object.assign(
-              cloneDeep(defaults),
+              klona(defaults),
               typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields,
             )
 
       return this
     },
     reset(...fields) {
-      const clonedData = cloneDeep(defaults)
+      const clonedData = klona(defaults)
       if (fields.length === 0) {
         this.setStore(clonedData)
       } else {
@@ -244,7 +244,7 @@ export default function useForm<TForm extends FormDataType>(
   } as InertiaForm<TForm>)
 
   store.subscribe((form) => {
-    if (form.isDirty === isEqual(form.data(), defaults)) {
+    if (form.isDirty === isDeepEqual(form.data(), defaults)) {
       form.setStore('isDirty', !form.isDirty)
     }
 
diff --git a/packages/vue3/package.json b/packages/vue3/package.json
@@ -58,8 +58,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
+    "@gilbarbara/deep-equal": "^0.3.1",
     "@inertiajs/core": "2.0.3",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.isequal": "^4.5.0"
+	  "klona": "^2.0.5"
   }
 }
diff --git a/packages/vue3/src/remember.ts b/packages/vue3/src/remember.ts
@@ -1,5 +1,5 @@
 import { router } from '@inertiajs/core'
-import cloneDeep from 'lodash.clonedeep'
+import { klona } from 'klona/full'
 import { ComponentOptions } from 'vue'
 
 const remember: ComponentOptions = {
@@ -52,7 +52,7 @@ const remember: ComponentOptions = {
             rememberable.reduce(
               (data, key) => ({
                 ...data,
-                [key]: cloneDeep(hasCallbacks(key) ? this[key].__remember() : this[key]),
+                [key]: klona(hasCallbacks(key) ? this[key].__remember() : this[key]),
               }),
               {},
             ),
diff --git a/packages/vue3/src/useForm.ts b/packages/vue3/src/useForm.ts
@@ -1,6 +1,6 @@
 import { FormDataConvertible, Method, Progress, router, VisitOptions } from '@inertiajs/core'
-import cloneDeep from 'lodash.clonedeep'
-import isEqual from 'lodash.isequal'
+import { klona } from 'klona/full'
+import isDeepEqual from '@gilbarbara/deep-equal'
 import { reactive, watch } from 'vue'
 
 type FormDataType = Record<string, FormDataConvertible>
@@ -48,13 +48,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' ? cloneDeep(data()) : cloneDeep(data)
+  let defaults = typeof data === 'function' ? klona(data()) : klona(data)
   let cancelToken = null
   let recentlySuccessfulTimeoutId = null
   let transform = (data) => data
 
   const form = reactive({
-    ...(restored ? restored.data : cloneDeep(defaults)),
+    ...(restored ? restored.data : klona(defaults)),
     isDirty: false,
     errors: restored ? restored.errors : {},
     hasErrors: false,
@@ -84,16 +84,16 @@ export default function useForm<TForm extends FormDataType>(
       } else {
         defaults = Object.assign(
           {},
-          cloneDeep(defaults),
+          klona(defaults),
           typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields,
         )
       }
 
       return this
     },
     reset(...fields) {
-      const resolvedData = typeof data === 'function' ? cloneDeep(data()) : cloneDeep(defaults)
-      const clonedData = cloneDeep(resolvedData)
+      const resolvedData = typeof data === 'function' ? klona(data()) : klona(defaults)
+      const clonedData = klona(resolvedData)
       if (fields.length === 0) {
         defaults = clonedData
         Object.assign(this, resolvedData)
@@ -171,7 +171,7 @@ export default function useForm<TForm extends FormDataType>(
           recentlySuccessfulTimeoutId = setTimeout(() => (this.recentlySuccessful = false), 2000)
 
           const onSuccess = options.onSuccess ? await options.onSuccess(page) : null
-          defaults = cloneDeep(this.data())
+          defaults = klona(this.data())
           this.isDirty = false
           return onSuccess
         },
@@ -242,9 +242,9 @@ export default function useForm<TForm extends FormDataType>(
   watch(
     form,
     (newValue) => {
-      form.isDirty = !isEqual(form.data(), defaults)
+      form.isDirty = !isDeepEqual(form.data(), defaults)
       if (rememberKey) {
-        router.remember(cloneDeep(newValue.__remember()), rememberKey)
+        router.remember(klona(newValue.__remember()), rememberKey)
       }
     },
     { immediate: true, deep: true },
diff --git a/packages/vue3/src/useRemember.ts b/packages/vue3/src/useRemember.ts
@@ -1,5 +1,5 @@
 import { router } from '@inertiajs/core'
-import cloneDeep from 'lodash.clonedeep'
+import { klona } from 'klona/full'
 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(cloneDeep(hasCallbacks ? data.__remember() : newValue), key)
+      router.remember(klona(hasCallbacks ? data.__remember() : newValue), key)
     },
     { immediate: true, deep: true },
   )

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@`
`59`	`59`	`"react": "^16.9.0 \|\| ^17.0.0 \|\| ^18.0.0 \|\| ^19.0.0"`
`60`	`60`	`},`
`61`	`61`	`"dependencies": {`
`62`		`- "@inertiajs/core": "2.0.3",`
`63`		`- "lodash.isequal": "^4.5.0"`
	`62`	`+ "@gilbarbara/deep-equal": "^0.3.1",`
	`63`	`+ "@inertiajs/core": "2.0.3"`
`64`	`64`	`}`
`65`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -58,8 +58,8 @@`
`58`	`58`	`"vue": "^3.0.0"`
`59`	`59`	`},`
`60`	`60`	`"dependencies": {`
	`61`	`+ "@gilbarbara/deep-equal": "^0.3.1",`
`61`	`62`	`"@inertiajs/core": "2.0.3",`
`62`		`- "lodash.clonedeep": "^4.5.0",`
`63`		`- "lodash.isequal": "^4.5.0"`
	`63`	`+ "klona": "^2.0.5"`
`64`	`64`	`}`
`65`	`65`	`}`