fix: add runtime index to global Modal and Style store (SAP#6248)

Author: MarcusNotheis

packages/base/src/stores/I18nStore.ts

@@ -1,14 +1,16 @@
 import type I18nBundle from '@ui5/webcomponents-base/dist/i18nBundle.js';
 import { getI18nBundle } from '@ui5/webcomponents-base/dist/i18nBundle.js';
 
+globalThis['@ui5/webcomponents-react'] ??= {};
+const STORE_LOCATION = globalThis['@ui5/webcomponents-react'];
 const STORE_SYMBOL_LISTENERS = Symbol.for('@ui5/webcomponents-react/I18nStore/Listeners');
 const STORE_SYMBOL = Symbol.for('@ui5/webcomponents-react/I18nStore');
 
 const initialStore: Record<string, I18nBundle> = {};
 
 function getListeners(): Array<() => void> {
-  globalThis[STORE_SYMBOL_LISTENERS] ??= [];
-  return globalThis[STORE_SYMBOL_LISTENERS];
+  STORE_LOCATION[STORE_SYMBOL_LISTENERS] ??= [];
+  return STORE_LOCATION[STORE_SYMBOL_LISTENERS];
 }
 
 function emitChange() {
@@ -18,15 +20,15 @@ function emitChange() {
 }
 
 function getSnapshot(): Record<string, I18nBundle> {
-  globalThis[STORE_SYMBOL] ??= initialStore;
-  return globalThis[STORE_SYMBOL];
+  STORE_LOCATION[STORE_SYMBOL] ??= initialStore;
+  return STORE_LOCATION[STORE_SYMBOL];
 }
 
 function subscribe(listener: () => void) {
   const listeners = getListeners();
-  globalThis[STORE_SYMBOL_LISTENERS] = [...listeners, listener];
+  STORE_LOCATION[STORE_SYMBOL_LISTENERS] = [...listeners, listener];
   return () => {
-    globalThis[STORE_SYMBOL_LISTENERS] = listeners.filter((l) => l !== listener);
+    STORE_LOCATION[STORE_SYMBOL_LISTENERS] = listeners.filter((l) => l !== listener);
   };
 }
 
@@ -40,8 +42,8 @@ export const I18nStore = {
     const bundles = getSnapshot();
     if (!bundles.hasOwnProperty(bundleName)) {
       void getI18nBundle(bundleName).then((bundle) => {
-        globalThis[STORE_SYMBOL] = {
-          ...globalThis[STORE_SYMBOL],
+        STORE_LOCATION[STORE_SYMBOL] = {
+          ...STORE_LOCATION[STORE_SYMBOL],
           [bundleName]: bundle
         };
         emitChange();
@@ -52,7 +54,7 @@ export const I18nStore = {
     const bundles = getSnapshot();
     const newBundles = await Promise.all(Object.keys(bundles).map((bundleName) => getI18nBundle(bundleName)));
 
-    globalThis[STORE_SYMBOL] = newBundles.reduce(
+    STORE_LOCATION[STORE_SYMBOL] = newBundles.reduce(
       (acc, bundle) => ({
         ...acc,
         [bundle.packageName]: bundle

packages/base/src/stores/StyleStore.ts

@@ -1,5 +1,15 @@
-const STORE_SYMBOL_LISTENERS = Symbol.for('@ui5/webcomponents-react/StyleStore/Listeners');
-const STORE_SYMBOL = Symbol.for('@ui5/webcomponents-react/StyleStore');
+import { getCurrentRuntimeIndex } from '@ui5/webcomponents-base/dist/Runtimes.js';
+
+globalThis['@ui5/webcomponents-react'] ??= {};
+const STORE_LOCATION = globalThis['@ui5/webcomponents-react'];
+
+function getStyleStoreListenersSymbol() {
+  return Symbol.for(`@ui5/webcomponents-react/StyleStore-${getCurrentRuntimeIndex()}/Listeners`);
+}
+
+function getStyleStoreSymbol() {
+  return Symbol.for(`@ui5/webcomponents-react/StyleStore-${getCurrentRuntimeIndex()}`);
+}
 
 interface IStyleStore {
   staticCssInjected: boolean;
@@ -12,8 +22,8 @@ const initialStore: IStyleStore = {
 };
 
 function getListeners(): Array<() => void> {
-  globalThis[STORE_SYMBOL_LISTENERS] ??= [];
-  return globalThis[STORE_SYMBOL_LISTENERS];
+  STORE_LOCATION[getStyleStoreListenersSymbol()] ??= [];
+  return STORE_LOCATION[getStyleStoreListenersSymbol()];
 }
 
 function emitChange() {
@@ -23,15 +33,15 @@ function emitChange() {
 }
 
 function getSnapshot(): IStyleStore {
-  globalThis[STORE_SYMBOL] ??= initialStore;
-  return globalThis[STORE_SYMBOL];
+  STORE_LOCATION[getStyleStoreSymbol()] ??= initialStore;
+  return STORE_LOCATION[getStyleStoreSymbol()];
 }
 
 function subscribe(listener: () => void) {
   const listeners = getListeners();
-  globalThis[STORE_SYMBOL_LISTENERS] = [...listeners, listener];
+  STORE_LOCATION[getStyleStoreListenersSymbol()] = [...listeners, listener];
   return () => {
-    globalThis[STORE_SYMBOL_LISTENERS] = listeners.filter((l) => l !== listener);
+    STORE_LOCATION[getStyleStoreListenersSymbol()] = listeners.filter((l) => l !== listener);
   };
 }
 
@@ -43,7 +53,7 @@ export const StyleStore = {
   },
   setStaticCssInjected: (staticCssInjected: boolean) => {
     const curr = getSnapshot();
-    globalThis[STORE_SYMBOL] = {
+    STORE_LOCATION[getStyleStoreSymbol()] = {
       ...curr,
       staticCssInjected
     };

packages/main/src/internal/ModalStore.ts

@@ -1,7 +1,16 @@
+import { getCurrentRuntimeIndex } from '@ui5/webcomponents-base/dist/Runtimes.js';
 import type { ComponentType, RefCallback, RefObject } from 'react';
 
-const STORE_SYMBOL_LISTENERS = Symbol.for('@ui5/webcomponents-react/Modals/Listeners');
-const STORE_SYMBOL = Symbol.for('@ui5/webcomponents-react/Modals');
+globalThis['@ui5/webcomponents-react'] ??= {};
+const STORE_LOCATION = globalThis['@ui5/webcomponents-react'];
+
+function getStyleStoreListenersSymbol() {
+  return Symbol.for(`@ui5/webcomponents-react/Modals-${getCurrentRuntimeIndex()}/Listeners`);
+}
+
+function getStyleStoreSymbol() {
+  return Symbol.for(`@ui5/webcomponents-react/Modals-${getCurrentRuntimeIndex()}`);
+}
 
 type IModal = {
   Component: ComponentType;
@@ -14,8 +23,8 @@ type IModal = {
 const initialStore: IModal[] = [];
 
 function getListeners(): Array<() => void> {
-  globalThis[STORE_SYMBOL_LISTENERS] ??= [];
-  return globalThis[STORE_SYMBOL_LISTENERS];
+  STORE_LOCATION[getStyleStoreListenersSymbol()] ??= [];
+  return STORE_LOCATION[getStyleStoreListenersSymbol()];
 }
 
 function emitChange() {
@@ -25,15 +34,15 @@ function emitChange() {
 }
 
 function getSnapshot(): IModal[] {
-  globalThis[STORE_SYMBOL] ??= initialStore;
-  return globalThis[STORE_SYMBOL];
+  STORE_LOCATION[getStyleStoreSymbol()] ??= initialStore;
+  return STORE_LOCATION[getStyleStoreSymbol()];
 }
 
 function subscribe(listener: () => void) {
   const listeners = getListeners();
-  globalThis[STORE_SYMBOL_LISTENERS] = [...listeners, listener];
+  STORE_LOCATION[getStyleStoreListenersSymbol()] = [...listeners, listener];
   return () => {
-    globalThis[STORE_SYMBOL_LISTENERS] = listeners.filter((l) => l !== listener);
+    STORE_LOCATION[getStyleStoreListenersSymbol()] = listeners.filter((l) => l !== listener);
   };
 }
 
@@ -44,11 +53,11 @@ export const ModalStore = {
     return initialStore;
   },
   addModal(config: IModal) {
-    globalThis[STORE_SYMBOL] = [...getSnapshot(), config];
+    STORE_LOCATION[getStyleStoreSymbol()] = [...getSnapshot(), config];
     emitChange();
   },
   removeModal(id: string) {
-    globalThis[STORE_SYMBOL] = getSnapshot().filter((modal) => modal.id !== id);
+    STORE_LOCATION[getStyleStoreSymbol()] = getSnapshot().filter((modal) => modal.id !== id);
     emitChange();
   }
 };