Use old library for comparing Sets and Maps

nienkedekker · nienkedekker · commit dfeb6ad41a37 · 2023-08-11T21:34:54.000+02:00
diff --git a/src/DailyProvider.tsx b/src/DailyProvider.tsx
@@ -15,7 +15,7 @@ import { DailyMeeting } from './DailyMeeting';
 import { DailyParticipants } from './DailyParticipants';
 import { DailyRecordings } from './DailyRecordings';
 import { DailyRoom } from './DailyRoom';
-import { deepEqual } from './lib/deepEqual';
+import { customDeepEqual } from './lib/customDeepEqual';
 
 type BaseProps =
   | DailyFactoryOptions
@@ -127,7 +127,7 @@ export const DailyProvider: React.FC<React.PropsWithChildren<Props>> = ({
       /**
        * Props have changed. Destroy current instance, so a new one can be created.
        */
-      if (!deepEqual(lastUsedProps.current, props)) {
+      if (!customDeepEqual(lastUsedProps.current, props)) {
         destroyCallObject(callObject);
       }
       /**
diff --git a/src/hooks/useParticipantProperty.ts b/src/hooks/useParticipantProperty.ts
@@ -10,7 +10,7 @@ import {
   participantState,
 } from '../DailyParticipants';
 import { RECOIL_PREFIX } from '../lib/constants';
-import { deepEqual } from '../lib/deepEqual';
+import { customDeepEqual } from '../lib/customDeepEqual';
 import type { NumericKeys } from '../types/NumericKeys';
 import type { Paths } from '../types/paths';
 import type { PathValue } from '../types/pathValue';
@@ -78,7 +78,7 @@ export const useParticipantProperty = <
    */
   const maybeUpdateProperties = useCallback((properties: any[]) => {
     setProperties((prevProperties) => {
-      if (deepEqual(properties, prevProperties)) return prevProperties;
+      if (customDeepEqual(properties, prevProperties)) return prevProperties;
       return properties;
     });
   }, []);
diff --git a/src/hooks/useScreenShare.ts b/src/hooks/useScreenShare.ts
@@ -9,7 +9,7 @@ import {
   ExtendedDailyParticipant,
   participantState,
 } from '../DailyParticipants';
-import { deepEqual } from '../lib/deepEqual';
+import { customDeepEqual } from '../lib/customDeepEqual';
 import { useDaily } from './useDaily';
 import { useDailyEvent } from './useDailyEvent';
 import { useParticipantIds } from './useParticipantIds';
@@ -75,7 +75,7 @@ export const useScreenShare = ({
    */
   const maybeUpdateScreens = useCallback((screens: ScreenShare[]) => {
     setScreens((prevScreens) => {
-      if (deepEqual(screens, prevScreens)) return prevScreens;
+      if (customDeepEqual(screens, prevScreens)) return prevScreens;
       return screens;
     });
   }, []);
diff --git a/src/lib/customDeepEqual.ts b/src/lib/customDeepEqual.ts
@@ -1,8 +1,9 @@
+import deepEqual from 'fast-deep-equal/es6';
 /**
  * Compares two variables for deep equality.
  * Gracefully handles equality checks on MediaStreamTracks by comparing their ids.
  */
-export function deepEqual(a: any, b: any): boolean {
+export function customDeepEqual(a: any, b: any): boolean {
   if (a === b) return true;
 
   // Handle special case for MediaStream
@@ -11,7 +12,7 @@ export function deepEqual(a: any, b: any): boolean {
       a.id === b.id &&
       a.active === b.active &&
       a.getTracks().length === b.getTracks().length &&
-      a.getTracks().every((track, idx) => deepEqual(track, b.getTracks()[idx]))
+      a.getTracks().every((track, idx) => customDeepEqual(track, b.getTracks()[idx]))
     );
   }
 
@@ -30,14 +31,14 @@ export function deepEqual(a: any, b: any): boolean {
     return a.source === b.source && a.flags === b.flags;
   }
 
-  // Handle special case for Set
+  // Handle special case for Set - use fast-deep-equal for this
   if (a instanceof Set && b instanceof Set) {
-    return deepEqual([...a], [...b]);
+    return deepEqual(a, b);
   }
 
-  // Handle special case for Map
+  // Handle special case for Map - use fast-deep-equal for this
   if (a instanceof Map && b instanceof Map) {
-    return deepEqual(Object.fromEntries(a), Object.fromEntries(b));
+    return deepEqual(a, b);
   }
 
   // If a or b are not objects or null, they can't be deeply equal
@@ -66,7 +67,7 @@ export function deepEqual(a: any, b: any): boolean {
       (key in a && !(key in b)) ||
       (key in b && !(key in a)) ||
       // Both keys exist in both object -> run nested equality check
-      !deepEqual(a[key], b[key])
+      !customDeepEqual(a[key], b[key])
     )
       return false;
   }
diff --git a/test/lib/deepEqual.test.ts b/test/lib/deepEqual.test.ts
@@ -2,7 +2,7 @@
 
 import { FakeMediaStreamTrack } from 'fake-mediastreamtrack';
 
-import { deepEqual } from '../../src/lib/deepEqual';
+import { customDeepEqual } from '../../src/lib/customDeepEqual';
 
 describe('deepEqual', () => {
   describe('Primitives and simple types', () => {
@@ -15,7 +15,7 @@ describe('deepEqual', () => {
       ${undefined} | ${undefined} | ${true}
       ${42}        | ${'42'}      | ${false}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 
@@ -28,7 +28,7 @@ describe('deepEqual', () => {
       ${[1, [2, 3]]} | ${[1, 2, 3]}   | ${false}
       ${[]}          | ${[]}          | ${true}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 
@@ -41,11 +41,12 @@ describe('deepEqual', () => {
       ${{ key1: 'value' }}                                     | ${{ key2: 'value' }}                                     | ${false}
       ${{}}                                                    | ${{}}                                                    | ${true}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 
   describe('MediaStream', () => {
+    // @ts-ignore
     const streamA = new MediaStream();
     afterEach(() => {
       streamA.getTracks().forEach((track) => {
@@ -54,23 +55,24 @@ describe('deepEqual', () => {
       });
     });
     it('returns true when streams are equal', () => {
-      expect(deepEqual(streamA, streamA)).toBe(true);
+      expect(customDeepEqual(streamA, streamA)).toBe(true);
     });
     it('returns true when equal stream has the same tracks', () => {
       const track = new FakeMediaStreamTrack({ kind: 'audio' });
       streamA.addTrack(track);
-      expect(deepEqual(streamA, streamA)).toBe(true);
+      expect(customDeepEqual(streamA, streamA)).toBe(true);
     });
     it('returns false when streams are not equal', () => {
+      // @ts-ignore
       const streamB = new MediaStream();
-      expect(deepEqual(streamA, streamB)).toBe(false);
+      expect(customDeepEqual(streamA, streamB)).toBe(false);
     });
     it('returns false when amount of tracks differs', () => {
       const track = new FakeMediaStreamTrack({ kind: 'audio' });
       // @ts-ignore
       const streamC = new MediaStream([], streamA.id);
       streamA.addTrack(track);
-      expect(deepEqual(streamA, streamC)).toBe(false);
+      expect(customDeepEqual(streamA, streamC)).toBe(false);
     });
     it('returns false when track id differs', () => {
       const track1 = new FakeMediaStreamTrack({ kind: 'audio' });
@@ -80,7 +82,7 @@ describe('deepEqual', () => {
       const streamC = new MediaStream([], streamA.id);
       streamA.addTrack(track1);
       streamC.addTrack(track2);
-      expect(deepEqual(streamA, streamC)).toBe(false);
+      expect(customDeepEqual(streamA, streamC)).toBe(false);
     });
   });
 
@@ -92,7 +94,7 @@ describe('deepEqual', () => {
       ${new FakeMediaStreamTrack({ id: '1', kind: 'audio', readyState: 'live' })} | ${new FakeMediaStreamTrack({ id: '1', kind: 'video', readyState: 'live' })}  | ${false}
       ${new FakeMediaStreamTrack({ id: '1', kind: 'audio', readyState: 'live' })} | ${new FakeMediaStreamTrack({ id: '1', kind: 'audio', readyState: 'ended' })} | ${false}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 
@@ -103,7 +105,7 @@ describe('deepEqual', () => {
       ${new Date('2023-01-01')} | ${new Date('2022-01-01')} | ${false}
       ${new Date('2023-01-01')} | ${'2023-01-01'}           | ${false}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 
@@ -114,19 +116,20 @@ describe('deepEqual', () => {
       ${/test/g}  | ${/test/gi}  | ${false}
       ${/test/g}  | ${'/test/g'} | ${false}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 
-  describe('Map', () => {
+  describe('Set', () => {
     it.each`
-      a                 | b                      | expected
-      ${new Set()}      | ${new Set()}           | ${true}
-      ${new Set(['a'])} | ${new Set(['b'])}      | ${false}
-      ${new Set(['a'])} | ${new Set(['a', 'b'])} | ${false}
-      ${new Set(['a'])} | ${['a']}               | ${false}
+      a                                                            | b                                                            | expected
+      ${new Set()}                                                 | ${new Set()}                                                 | ${true}
+      ${new Set(['a'])}                                            | ${new Set(['b'])}                                            | ${false}
+      ${new Set(['a'])}                                            | ${new Set(['a', 'b'])}                                       | ${false}
+      ${new Set(['a'])}                                            | ${['a']}                                                     | ${false}
+      ${new Set(['audio', 'video', 'screenVideo', 'screenAudio'])} | ${new Set(['audio', 'video', 'screenVideo', 'screenAudio'])} | ${true}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 
@@ -137,7 +140,7 @@ describe('deepEqual', () => {
       ${new Map([['a', 1]])} | ${new Map([['b', 1]])}           | ${false}
       ${new Map([['a', 1]])} | ${new Map([['a', 1], ['b', 1]])} | ${false}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 
@@ -149,7 +152,7 @@ describe('deepEqual', () => {
       ${funcA} | ${funcA} | ${true}
       ${funcA} | ${funcB} | ${false}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 
@@ -179,7 +182,7 @@ describe('deepEqual', () => {
       ${complexObjA} | ${complexObjB} | ${true}
       ${complexObjA} | ${complexObjC} | ${false}
     `('returns $expected for a: $a and b: $b', ({ a, b, expected }) => {
-      expect(deepEqual(a, b)).toBe(expected);
+      expect(customDeepEqual(a, b)).toBe(expected);
     });
   });
 });
