refactor: ♻️ Migrate to dequal

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx

@@ -36,7 +36,7 @@ import { HeadersInputs, QueryParamsInputs } from './KeyValueInputs'
 import { VariableForTestInputs } from './VariableForTestInputs'
 import { DataVariableInputs } from './ResponseMappingInputs'
 import { byId } from 'utils'
-import { deepEqual } from 'fast-equals'
+import { dequal } from 'dequal'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
 
 type Props = {
@@ -63,7 +63,7 @@ export const WebhookSettings = ({
 
   useEffect(() => {
     const incomingWebhook = webhooks.find(byId(webhookId))
-    if (deepEqual(incomingWebhook, localWebhook)) return
+    if (dequal(incomingWebhook, localWebhook)) return
     setLocalWebhook(incomingWebhook)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [webhooks])

apps/builder/components/shared/TableList.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Fade, Flex, IconButton, Stack } from '@chakra-ui/react'
 import { TrashIcon, PlusIcon } from 'assets/icons'
-import { deepEqual } from 'fast-equals'
+import { dequal } from 'dequal'
 import { Draft } from 'immer'
 import React, { useEffect, useState } from 'react'
 import { generate } from 'short-uuid'
@@ -35,7 +35,7 @@ export const TableList = <T,>({
   const [showDeleteIndex, setShowDeleteIndex] = useState<number | null>(null)
 
   useEffect(() => {
-    if (deepEqual(items, initialItems)) return
+    if (dequal(items, initialItems)) return
     onItemsChange(items)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items])

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -40,7 +40,7 @@ import useUndo from 'services/utils/useUndo'
 import { useDebounce } from 'use-debounce'
 import { itemsAction, ItemsActions } from './actions/items'
 import { generate } from 'short-uuid'
-import { deepEqual } from 'fast-equals'
+import { dequal } from 'dequal'
 import { User } from 'db'
 import { saveWebhook } from 'services/webhook'
 import { stringify } from 'qs'
@@ -179,7 +179,7 @@ export const TypebotContext = ({
       ...currentTypebotRef.current,
       updatedAt: new Date().toISOString(),
     }
-    if (deepEqual(omit(typebot, 'updatedAt'), omit(typebotToSave, 'updatedAt')))
+    if (dequal(omit(typebot, 'updatedAt'), omit(typebotToSave, 'updatedAt')))
       return
     setIsSavingLoading(true)
     const { error } = await updateTypebot(typebotToSave.id, typebotToSave)

apps/builder/contexts/UserContext.tsx

@@ -11,7 +11,7 @@ import {
 import { isDefined, isNotDefined } from 'utils'
 import { updateUser as updateUserInDb } from 'services/user/user'
 import { useToast } from '@chakra-ui/react'
-import { deepEqual } from 'fast-equals'
+import { dequal } from 'dequal'
 import { User } from 'db'
 
 const userContext = createContext<{
@@ -42,7 +42,7 @@ export const UserContext = ({ children }: { children: ReactNode }) => {
   )
 
   const hasUnsavedChanges = useMemo(
-    () => !deepEqual(session?.user, user),
+    () => !dequal(session?.user, user),
     [session?.user, user]
   )
 

apps/builder/package.json

@@ -42,7 +42,7 @@
     "cuid": "^2.1.8",
     "db": "*",
     "deep-object-diff": "^1.1.7",
-    "fast-equals": "^3.0.0",
+    "dequal": "^2.0.2",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4",
     "google-auth-library": "^7.12.0",

apps/builder/services/typebots/typebots.ts

@@ -45,7 +45,7 @@ import {
   stepTypeHasOption,
   stepTypeHasWebhook,
 } from 'utils'
-import { deepEqual } from 'fast-equals'
+import { dequal } from 'dequal'
 import { stringify } from 'qs'
 import { isChoiceInput, isConditionStep, sendRequest, omit } from 'utils'
 import cuid from 'cuid'
@@ -247,7 +247,7 @@ const parseDefaultStepOptions = (type: StepWithOptionsType): StepOptions => {
 }
 
 export const checkIfTypebotsAreEqual = (typebotA: Typebot, typebotB: Typebot) =>
-  deepEqual(
+  dequal(
     JSON.parse(JSON.stringify(typebotA)),
     JSON.parse(JSON.stringify(typebotB))
   )
@@ -265,19 +265,19 @@ export const checkIfPublished = (
       )
     )
   return (
-    deepEqual(
+    dequal(
       JSON.parse(JSON.stringify(typebot.blocks)),
       JSON.parse(JSON.stringify(publicTypebot.blocks))
     ) &&
-    deepEqual(
+    dequal(
       JSON.parse(JSON.stringify(typebot.settings)),
       JSON.parse(JSON.stringify(publicTypebot.settings))
     ) &&
-    deepEqual(
+    dequal(
       JSON.parse(JSON.stringify(typebot.theme)),
       JSON.parse(JSON.stringify(publicTypebot.theme))
     ) &&
-    deepEqual(
+    dequal(
       JSON.parse(JSON.stringify(typebot.variables)),
       JSON.parse(JSON.stringify(publicTypebot.variables))
     )

apps/builder/services/utils/useUndo.ts

@@ -1,5 +1,5 @@
 import { isDefined } from '@udecode/plate-core'
-import { deepEqual } from 'fast-equals'
+import { dequal } from 'dequal'
 // import { diff } from 'deep-object-diff'
 import { useReducer, useCallback, useRef } from 'react'
 import { isNotDefined } from 'utils'
@@ -76,7 +76,7 @@ const reducer = <T>(state: State<T>, action: Action<T>) => {
       if (
         isNotDefined(newPresent) ||
         (present &&
-          deepEqual(
+          dequal(
             JSON.parse(JSON.stringify(newPresent)),
             JSON.parse(JSON.stringify(present))
           ))