chore(package): using custom deep equal function

Author: matteobruni

components/react/package.dist.json

@@ -91,7 +91,6 @@
     "react": ">=16"
   },
   "dependencies": {
-    "deep-eql": "^4.1.3",
     "tsparticles-engine": "^2.11.0"
   }
-}
+}

components/react/package.json

@@ -110,7 +110,6 @@
   "types": "dist/types/index.d.ts",
   "prettier": "@tsparticles/prettier-config",
   "dependencies": {
-    "deep-eql": "^4.1.3",
     "react": "^18.2.0",
     "tsparticles-engine": "^2.11.0"
   },

components/react/src/Particles.tsx

@@ -1,8 +1,8 @@
 import React, { Component, MutableRefObject, ReactNode } from "react";
-import { tsParticles, Container } from "tsparticles-engine";
-import equal from "deep-eql";
+import { tsParticles, type Container } from "tsparticles-engine";
 import type { IParticlesProps } from "./IParticlesProps";
 import type { IParticlesState } from "./IParticlesState";
+import { deepCompare } from "./Utils";
 
 const defaultId = "tsparticles";
 
@@ -41,7 +41,17 @@ export default class Particles extends Component<IParticlesProps, IParticlesStat
     }
 
     shouldComponentUpdate(nextProps: Readonly<IParticlesProps>): boolean {
-        return !equal(nextProps, this.props);
+        return nextProps.url !== this.props.url &&
+            nextProps.id !== this.props.id &&
+            nextProps.canvasClassName !== this.props.canvasClassName &&
+            nextProps.className !== this.props.className &&
+            nextProps.height !== this.props.height &&
+            nextProps.width !== this.props.width &&
+            !deepCompare(nextProps.style, this.props.style) &&
+            nextProps.init !== this.props.init &&
+            nextProps.loaded !== this.props.loaded &&
+            nextProps &&
+            !deepCompare(nextProps.options ?? nextProps.params, this.props.options && this.props.params);
     }
 
     componentDidUpdate(): void {
@@ -103,25 +113,23 @@ export default class Particles extends Component<IParticlesProps, IParticlesStat
             return;
         }
 
-        const cb = async (container?: Container) => {
-            if (this.props.container) {
-                (this.props.container as MutableRefObject<Container | undefined>).current = container;
-            }
-
-            this.setState({
-                library: container,
+        const id = this.props.id ?? Particles.defaultProps.id ?? defaultId,
+            container = await tsParticles.load({
+                url: this.props.url,
+                id,
+                options: this.props.options ?? this.props.params,
             });
 
-            if (this.props.loaded) {
-                await this.props.loaded(container);
-            }
-        };
+        if (this.props.container) {
+            (this.props.container as MutableRefObject<Container | undefined>).current = container;
+        }
 
-        const id = this.props.id ?? Particles.defaultProps.id ?? defaultId,
-            container = this.props.url
-                ? await tsParticles.loadJSON(id, this.props.url)
-                : await tsParticles.load(id, this.props.options ?? this.props.params);
+        this.setState({
+            library: container,
+        });
 
-        await cb(container);
+        if (this.props.loaded) {
+            await this.props.loaded(container);
+        }
     }
 }

components/react/src/Utils.ts

@@ -0,0 +1,62 @@
+const isObject = (val: unknown): val is object => typeof val === "object" && val !== null;
+
+export function deepCompare(obj1: unknown, obj2: unknown, excludedKeys: string[] = []): boolean {
+    if (!isObject(obj1) || !isObject(obj2)) {
+        return obj1 === obj2;
+    }
+
+    const keys1 = Object.keys(obj1).filter((key) => !excludedKeys.includes(key)),
+        keys2 = Object.keys(obj2).filter((key) => !excludedKeys.includes(key));
+
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+
+    for (const key of keys1) {
+        const value1: unknown = (obj1 as Record<string, unknown>)[key],
+            value2: unknown = (obj2 as Record<string, unknown>)[key];
+
+        if (isObject(value1) && isObject(value2)) {
+            // Handle circular references
+            if (value1 === obj2 && value2 === obj1) {
+                continue;
+            }
+
+            if (!deepCompare(value1, value2, excludedKeys)) {
+                return false;
+            }
+        } else if (Array.isArray(value1) && Array.isArray(value2)) {
+            if (!deepCompareArrays(value1, value2, excludedKeys)) {
+                return false;
+            }
+        } else if (value1 !== value2) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+function deepCompareArrays(arr1: unknown[], arr2: unknown[], excludedKeys: string[]): boolean {
+    if (arr1.length !== arr2.length) {
+        return false;
+    }
+
+    for (let i = 0; i < arr1.length; i++) {
+        const val1 = arr1[i], val2 = arr2[i];
+
+        if (Array.isArray(val1) && Array.isArray(val2)) {
+            if (!deepCompareArrays(val1, val2, excludedKeys)) {
+                return false;
+            }
+        } else if (isObject(val1) && isObject(val2)) {
+            if (!deepCompare(val1, val2, excludedKeys)) {
+                return false;
+            }
+        } else if (val1 !== val2) {
+            return false;
+        }
+    }
+
+    return true;
+}