fix(icon-broadcast): Do not sync between wc services, just with angul… (#1532)

* fix(icon-broadcast): Do not sync between wc services, just with angular-elements.

---------

Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: MayaKirova

src/components/icon/icon-state.broadcast.ts

@@ -11,6 +11,7 @@ export class IconsStateBroadcast {
   private channel!: BroadcastChannel | null;
   private collections: IconsCollection<SvgIcon>;
   private refsCollection: IconsCollection<IconMeta>;
+  private static readonly origin = 'igniteui-webcomponents';
 
   constructor(
     collections: IconsCollection<SvgIcon>,
@@ -31,14 +32,19 @@ export class IconsStateBroadcast {
   }
 
   public handleEvent({ data }: MessageEvent<BroadcastIconsChangeMessage>) {
-    if (data.actionType !== ActionType.SyncState) {
+    // no need to sync with other wc icon services, just with angular elements
+    if (
+      data.actionType !== ActionType.SyncState ||
+      data.origin === IconsStateBroadcast.origin
+    ) {
       return;
     }
 
     this.send({
       actionType: ActionType.SyncState,
       collections: this.getUserSetCollection(this.collections).toMap(),
       references: this.getUserRefsCollection(this.refsCollection).toMap(),
+      origin: IconsStateBroadcast.origin,
     });
   }
 

src/components/icon/icon.spec.ts

@@ -1,4 +1,5 @@
 import {
+  aTimeout,
   elementUpdated,
   expect,
   fixture,
@@ -9,13 +10,15 @@ import { stub } from 'sinon';
 
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { first, last } from '../common/util.js';
+import { IconsStateBroadcast } from './icon-state.broadcast.js';
 import IgcIconComponent from './icon.js';
 import {
   getIconRegistry,
   registerIcon,
   registerIconFromText,
   setIconRef,
 } from './icon.registry.js';
+import { createIconDefaultMap } from './registry/default-map.js';
 import {
   ActionType,
   type BroadcastIconsChangeMessage,
@@ -251,6 +254,31 @@ describe('Icon broadcast service', () => {
 
       expect(events.length).to.equal(0);
     });
+
+    it('when multiple broadcast services are initialized they should not send sync events to each other.', async () => {
+      const collections = createIconDefaultMap<string, SvgIcon>();
+      const references = createIconDefaultMap<string, IconMeta>();
+      // 2 new broadcasts
+      const broadcast1 = new IconsStateBroadcast(collections, references);
+      const broadcast2 = new IconsStateBroadcast(collections, references);
+      // 1 global one, initialized when you get the icon registry first time.
+      const iconReg = getIconRegistry();
+      // total - 3 services now.
+
+      // a peer is requesting a state sync
+      channel.postMessage({ actionType: ActionType.SyncState });
+      await aTimeout(20);
+
+      // all icon broadcasts must respond with their state
+      // 2 from broadcast service + 1 from global.
+      expect(events.length).to.equal(3);
+
+      // dispose of mock services.
+      // biome-ignore lint/complexity/useLiteralKeys: private access escape
+      broadcast1['dispose']();
+      // biome-ignore lint/complexity/useLiteralKeys: private access escape
+      broadcast2['dispose']();
+    });
   });
 
   describe('Peer registry', () => {

src/components/icon/registry/types.ts

@@ -35,6 +35,7 @@ export interface BroadcastIconsChangeMessage {
   actionType: ActionType;
   collections?: Map<string, Map<string, SvgIcon>>;
   references?: Map<string, Map<string, IconMeta>>;
+  origin?: string;
 }
 
 // Exported public types