refactor(ui): replace fast-deep-equal with custom isEqual implementation

- Remove dependency on fast-deep-equal package
- Create custom isEqual helper function with comprehensive deep comparison
- Add extensive test suite for isEqual function
- Update import and usage across project files

Author: SutuSebastian

bun.lock

@@ -191,7 +191,6 @@
     "comment-json": "4.2.5",
     "debounce": "2.2.0",
     "deepmerge-ts": "7.1.4",
-    "fast-deep-equal": "3.1.3",
     "klona": "2.0.6",
     "package-manager-detector": "0.2.9",
     "recast": "0.23.11",

packages/ui/package.json

@@ -4,9 +4,9 @@ import path from "path";
 import toml from "@iarna/toml";
 import chokidar from "chokidar";
 import cjson from "comment-json";
-import isEqual from "fast-deep-equal";
 import { resolveCommand } from "package-manager-detector/commands";
 import { detect } from "package-manager-detector/detect";
+import { isEqual } from "../helpers/is-equal";
 import {
   automaticClassGenerationMessage,
   classListFile,

packages/ui/src/cli/index.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import { isEqual } from "./is-equal";
+
+describe("isEqual helper", () => {
+  it("should return true for identical primitive values", () => {
+    expect(isEqual(1, 1)).toBe(true);
+    expect(isEqual("string", "string")).toBe(true);
+    expect(isEqual(true, true)).toBe(true);
+    expect(isEqual(null, null)).toBe(true);
+    expect(isEqual(undefined, undefined)).toBe(true);
+  });
+
+  it("should return false for different primitive values", () => {
+    expect(isEqual(1, 2)).toBe(false);
+    expect(isEqual("string", "different")).toBe(false);
+    expect(isEqual(true, false)).toBe(false);
+    expect(isEqual(null, undefined)).toBe(false);
+    expect(isEqual(0, null)).toBe(false);
+  });
+
+  it("should handle NaN values correctly", () => {
+    expect(isEqual(NaN, NaN)).toBe(true);
+    expect(isEqual(NaN, 1)).toBe(false);
+    expect(isEqual(1, NaN)).toBe(false);
+  });
+
+  it("should compare arrays correctly", () => {
+    expect(isEqual([1, 2, 3], [1, 2, 3])).toBe(true);
+    expect(isEqual([1, 2, 3], [1, 2, 4])).toBe(false);
+    expect(isEqual([1, 2, 3], [1, 2])).toBe(false);
+    expect(isEqual([], [])).toBe(true);
+    expect(isEqual([1, [2, 3]], [1, [2, 3]])).toBe(true);
+    expect(isEqual([1, [2, 3]], [1, [2, 4]])).toBe(false);
+  });
+
+  it("should compare objects correctly", () => {
+    expect(isEqual({}, {})).toBe(true);
+    expect(isEqual({ a: 1, b: 2 }, { a: 1, b: 2 })).toBe(true);
+    expect(isEqual({ a: 1, b: 2 }, { b: 2, a: 1 })).toBe(true);
+    expect(isEqual({ a: 1, b: 2 }, { a: 1, b: 3 })).toBe(false);
+    expect(isEqual({ a: 1, b: 2 }, { a: 1 })).toBe(false);
+    expect(isEqual({ a: 1 }, { a: 1, b: 2 })).toBe(false);
+  });
+
+  it("should handle nested objects", () => {
+    expect(isEqual({ a: { b: 1 } }, { a: { b: 1 } })).toBe(true);
+    expect(isEqual({ a: { b: 1 } }, { a: { b: 2 } })).toBe(false);
+    expect(isEqual({ a: { b: { c: 3 } } }, { a: { b: { c: 3 } } })).toBe(true);
+    expect(isEqual({ a: { b: { c: 3 } } }, { a: { b: { c: 4 } } })).toBe(false);
+  });
+
+  it("should handle objects with array values", () => {
+    expect(isEqual({ a: [1, 2, 3] }, { a: [1, 2, 3] })).toBe(true);
+    expect(isEqual({ a: [1, 2, 3] }, { a: [1, 2, 4] })).toBe(false);
+    expect(isEqual({ a: [1, { b: 2 }] }, { a: [1, { b: 2 }] })).toBe(true);
+    expect(isEqual({ a: [1, { b: 2 }] }, { a: [1, { b: 3 }] })).toBe(false);
+  });
+
+  it("should handle arrays with object elements", () => {
+    expect(isEqual([{ a: 1 }, { b: 2 }], [{ a: 1 }, { b: 2 }])).toBe(true);
+    expect(isEqual([{ a: 1 }, { b: 2 }], [{ a: 1 }, { b: 3 }])).toBe(false);
+  });
+
+  it("should handle RegExp objects", () => {
+    expect(isEqual(/abc/g, /abc/g)).toBe(true);
+    expect(isEqual(/abc/g, /abc/i)).toBe(false);
+    expect(isEqual(/abc/g, /def/g)).toBe(false);
+  });
+
+  it("should handle objects with custom valueOf method", () => {
+    const date1 = new Date("2023-01-01");
+    const date2 = new Date("2023-01-01");
+    const date3 = new Date("2023-01-02");
+
+    expect(isEqual(date1, date2)).toBe(true);
+    expect(isEqual(date1, date3)).toBe(false);
+  });
+
+  it("should handle objects with custom toString method", () => {
+    const obj1 = {
+      toString() {
+        return "custom string";
+      },
+    };
+
+    const obj2 = {
+      toString() {
+        return "custom string";
+      },
+    };
+
+    const obj3 = {
+      toString() {
+        return "different string";
+      },
+    };
+
+    expect(isEqual(obj1, obj2)).toBe(true);
+    expect(isEqual(obj1, obj3)).toBe(false);
+  });
+
+  it("should handle objects with different constructors", () => {
+    class A {}
+    class B {}
+
+    expect(isEqual(new A(), new A())).toBe(true);
+    expect(isEqual(new A(), new B())).toBe(false);
+  });
+});

packages/ui/src/helpers/is-equal.test.ts

@@ -0,0 +1,41 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isEqual(a: any, b: any): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  if (a && b && typeof a === "object" && typeof b === "object") {
+    if (a.constructor !== b.constructor) {
+      return false;
+    }
+
+    if (Array.isArray(a)) {
+      if (a.length !== b.length) {
+        return false;
+      }
+      return a.every((item, index) => isEqual(item, b[index]));
+    }
+
+    if (a.constructor === RegExp) {
+      return a.source === b.source && a.flags === b.flags;
+    }
+
+    if (a.valueOf !== Object.prototype.valueOf) {
+      return a.valueOf() === b.valueOf();
+    }
+
+    if (a.toString !== Object.prototype.toString) {
+      return a.toString() === b.toString();
+    }
+    const aKeys = Object.keys(a);
+
+    if (aKeys.length !== Object.keys(b).length) {
+      return false;
+    }
+
+    return aKeys.every((key) => Object.prototype.hasOwnProperty.call(b, key) && isEqual(a[key], b[key]));
+  }
+
+  // true if both NaN, false otherwise
+  return a !== a && b !== b;
+}

packages/ui/src/helpers/is-equal.ts

@@ -1,5 +1,4 @@
 import { deepmerge } from "deepmerge-ts";
-import isEqual from "fast-deep-equal";
 import { klona } from "klona/json";
 import { useRef } from "react";
 import { getPrefix } from "../store";
@@ -9,6 +8,7 @@ import { applyPrefixV3 } from "./apply-prefix-v3";
 import { convertUtilitiesToV4 } from "./convert-utilities-to-v4";
 import { deepMergeStrings } from "./deep-merge";
 import { getTailwindVersion } from "./get-tailwind-version";
+import { isEqual } from "./is-equal";
 import { twMerge } from "./tailwind-merge";
 
 /**