@cloudflare/realtimekit-ui 1.0.3 → 1.0.4-staging.2

package/dist/collection/components/rtk-ui-provider/rtk-ui-provider.js

@@ -1,33 +1,28 @@
-import { h, Host, } from "@stencil/core";
-import { defaultConfig, generateConfig, provideRtkDesignSystem, } from "../../exports";
-import { uiState, uiStore } from "../../utils/sync-with-store/ui-store";
+import { h, Host } from "@stencil/core";
+import { createDefaultConfig, useLanguage, defaultIconPack, } from "../../exports";
+import { uiStore as legacyGlobalUIStore, createPeerStore, } from "../../utils/sync-with-store/ui-store";
 import deepMerge from "lodash-es/merge";
 import { getSize } from "../../utils/size";
 const LEAVE_ROOM_TIMER = 10000;
 export class RtkUiProvider {
     constructor() {
+        this.peerStore = null;
+        this.providerId = 'provider-' + Math.floor(Math.random() * 100);
+        /** Meeting */
+        this.meeting = null;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language utility */
+        this.t = useLanguage();
         /** Config */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
+        /** Fill type */
+        this.mode = 'fixed';
         /** Whether to show setup screen or not */
         this.showSetupScreen = false;
-        /**
-         * Do not render children until meeting is initialized
-         * @default false
-         */
-        this.noRenderUntilMeeting = false;
         this.handleResize = () => {
             this.size = getSize(this.host.clientWidth);
         };
-        this.loadTheme = () => {
-            var _a;
-            if (this.config === defaultConfig) {
-                const { config } = generateConfig(this.meeting.self.config, this.meeting);
-                this.config = config;
-            }
-            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.designTokens) {
-                provideRtkDesignSystem(document.documentElement, this.config.designTokens);
-            }
-        };
         this.roomJoinedListener = () => {
             this.updateStates({ meeting: 'joined' });
         };
@@ -35,7 +30,6 @@ export class RtkUiProvider {
             this.updateStates({ meeting: 'waiting' });
         };
         this.roomLeftListener = ({ state }) => {
-            // Let socketConnectionUpdate listener handle this case.
             if (state === 'disconnected' || state === 'failed')
                 return;
             this.updateStates({ meeting: 'ended', roomLeftState: state });
@@ -43,7 +37,7 @@ export class RtkUiProvider {
         this.mediaPermissionUpdateListener = ({ kind, message }) => {
             if (['audio', 'video'].includes(kind)) {
                 if ((message === 'DENIED' || message === 'SYSTEM_DENIED') &&
-                    uiState.states.activeDebugger !== true) {
+                    (this.peerStore || legacyGlobalUIStore).state.states.activeDebugger !== true) {
                     const permissionModalSettings = {
                         enabled: true,
                         kind,
@@ -60,19 +54,12 @@ export class RtkUiProvider {
             }
         };
         this.handleChangingMeeting = (destinationMeetingId) => {
+            const currentStates = this.peerStore.state.states;
             this.updateStates({
-                activeBreakoutRoomsManager: Object.assign(Object.assign({}, uiState.states.activeBreakoutRoomsManager), { destinationMeetingId }),
+                activeBreakoutRoomsManager: Object.assign(Object.assign({}, currentStates.activeBreakoutRoomsManager), { destinationMeetingId }),
             });
         };
     }
-    listenState(e) {
-        this.updateStates(e.detail);
-    }
-    updateStates(states) {
-        const newStates = Object.assign({}, uiState.states);
-        uiState.states = deepMerge(newStates, states);
-        this.statesUpdate.emit(uiState.states);
-    }
     connectedCallback() {
         if (typeof window !== 'undefined') {
             this.authErrorListener = (ev) => {
@@ -82,6 +69,8 @@ export class RtkUiProvider {
             };
             window.addEventListener('rtkError', this.authErrorListener);
         }
+        // Listen for store requests from child components
+        this.setupStoreRequestListener();
         this.onMeetingChange(this.meeting);
         this.onIconPackChange(this.iconPack);
         this.onTChange(this.t);
@@ -93,6 +82,13 @@ export class RtkUiProvider {
     disconnectedCallback() {
         this.resizeObserver.disconnect();
         window.removeEventListener('rtkError', this.authErrorListener);
+        // Remove event listeners
+        if (this.storeRequestListener) {
+            this.host.removeEventListener('rtkRequestStore', this.storeRequestListener);
+        }
+        if (this.stateUpdateListener) {
+            this.host.removeEventListener('rtkStateUpdate', this.stateUpdateListener);
+        }
         if (!this.meeting)
             return;
         this.meeting.self.removeListener('roomLeft', this.roomLeftListener);
@@ -101,47 +97,123 @@ export class RtkUiProvider {
         this.meeting.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
         this.meeting.meta.removeListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
     }
-    onMeetingChange(meeting) {
-        uiStore.state.meeting = meeting;
-        if (!meeting)
-            return;
-        this.updateStates({ viewType: meeting.meta.viewType });
-        this.loadTheme();
-        meeting.self.addListener('roomJoined', this.roomJoinedListener);
-        meeting.self.addListener('waitlisted', this.waitlistedListener);
-        meeting.self.addListener('roomLeft', this.roomLeftListener);
-        meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
-        meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-        if (meeting.connectedMeetings.supportsConnectedMeetings) {
-            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
+    updateStates(states) {
+        // Use peer specific store if available, otherwise fall back to global store
+        const targetStore = this.peerStore || legacyGlobalUIStore;
+        const newStates = Object.assign({}, targetStore.state.states);
+        targetStore.state.states = deepMerge(newStates, states);
+        // Emit unscoped event for backward compatibility
+        this.statesUpdate.emit(targetStore.state.states);
+        // Also emit a scoped event that only this meeting's components should listen to
+        const scopedEvent = new CustomEvent('rtkStatesUpdate', {
+            detail: targetStore.state.states,
+            bubbles: true,
+            composed: true,
+        });
+        this.host.dispatchEvent(scopedEvent);
+    }
+    setupStateUpdateListener() {
+        // Remove existing listener if any
+        if (this.stateUpdateListener) {
+            this.host.removeEventListener('rtkStateUpdate', this.stateUpdateListener);
         }
-        if (meeting.self.roomJoined) {
-            this.updateStates({ meeting: 'joined' });
+        // Create new listener
+        this.stateUpdateListener = (event) => {
+            this.updateStates(event.detail);
+        };
+        // Listen for both generic events (backward compatibility) and peer-specific events
+        this.host.addEventListener('rtkStateUpdate', this.stateUpdateListener);
+    }
+    setupStoreRequestListener() {
+        // Remove existing listener if any
+        if (this.storeRequestListener) {
+            this.host.removeEventListener('rtkRequestStore', this.storeRequestListener);
         }
-        else {
-            if (this.showSetupScreen) {
-                this.updateStates({ meeting: 'setup' });
+        // Listen for store requests from child components
+        this.storeRequestListener = (event) => {
+            if (!this.peerStore)
+                return;
+            // Provide the actual store object, not a wrapper
+            const responseEvent = new CustomEvent('rtkProvideStore', {
+                detail: { store: this.peerStore, requestId: event.detail.requestId },
+            });
+            document.dispatchEvent(responseEvent);
+            // Stop the event from bubbling further to prevent other providers from handling it
+            event.stopPropagation();
+        };
+        this.host.addEventListener('rtkRequestStore', this.storeRequestListener);
+    }
+    onMeetingChange(meeting) {
+        if (meeting) {
+            this.peerStore = createPeerStore({
+                meeting,
+                config: this.config,
+                iconPack: this.iconPack,
+                t: this.t,
+                size: this.size,
+                providerId: this.providerId,
+            });
+            // Notify components that peer specific store is now available
+            document.dispatchEvent(new CustomEvent('rtkPeerStoreReady', {
+                detail: {
+                    peerId: meeting.self.id,
+                },
+            }));
+        }
+        // Setup state update listener now that we have peerId
+        this.setupStateUpdateListener();
+        if (meeting) {
+            const targetStore = this.peerStore || legacyGlobalUIStore;
+            targetStore.state.meeting = meeting;
+            this.updateStates({ viewType: meeting.meta.viewType });
+            meeting.self.addListener('roomJoined', this.roomJoinedListener);
+            meeting.self.addListener('waitlisted', this.waitlistedListener);
+            meeting.self.addListener('roomLeft', this.roomLeftListener);
+            meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+            meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
+            if (meeting.connectedMeetings.supportsConnectedMeetings) {
+                meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
+            }
+            if (meeting.self.roomJoined) {
+                this.updateStates({ meeting: 'joined' });
             }
             else {
-                meeting.joinRoom();
+                if (this.showSetupScreen) {
+                    this.updateStates({ meeting: 'setup' });
+                }
+                else {
+                    meeting.joinRoom();
+                }
             }
+            window.removeEventListener('rtkError', this.authErrorListener);
         }
-        window.removeEventListener('rtkError', this.authErrorListener);
     }
     onIconPackChange(newIconPack) {
-        uiStore.state.iconPack = newIconPack;
+        if (this.peerStore) {
+            this.peerStore.state.iconPack = newIconPack;
+        }
     }
     onTChange(newT) {
-        uiStore.state.t = newT;
+        if (this.peerStore) {
+            this.peerStore.state.t = newT;
+        }
     }
     onConfigChange(config) {
-        uiStore.state.config = config;
+        if (this.peerStore) {
+            this.peerStore.state.config = config;
+        }
     }
     onSizeChange(newSize) {
-        uiStore.state.size = newSize;
+        if (this.peerStore) {
+            this.peerStore.state.size = newSize;
+        }
     }
     render() {
-        return h(Host, { key: '255d40656744b2906c20a139a1af87c66acc310a' }, this.noRenderUntilMeeting && !this.meeting ? null : h("slot", null));
+        // Don't render children until meeting is properly initialized
+        if (!this.meeting) {
+            return null;
+        }
+        return (h(Host, null, h("slot", null)));
     }
     static get is() { return "rtk-ui-provider"; }
     static get originalStyleUrls() {
@@ -160,7 +232,7 @@ export class RtkUiProvider {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Meeting",
+                    "original": "Meeting | null",
                     "resolved": "RealtimeKitClient",
                     "references": {
                         "Meeting": {
@@ -177,7 +249,8 @@ export class RtkUiProvider {
                     "text": "Meeting"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "null"
             },
             "iconPack": {
                 "type": "unknown",
@@ -200,7 +273,8 @@ export class RtkUiProvider {
                     "text": "Icon pack"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "defaultIconPack"
             },
             "t": {
                 "type": "unknown",
@@ -223,7 +297,8 @@ export class RtkUiProvider {
                     "text": "Language utility"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "useLanguage()"
             },
             "config": {
                 "type": "unknown",
@@ -247,7 +322,33 @@ export class RtkUiProvider {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MeetingMode",
+                    "resolved": "\"fill\" | \"fixed\"",
+                    "references": {
+                        "MeetingMode": {
+                            "location": "import",
+                            "path": "../rtk-meeting/rtk-meeting",
+                            "id": "src/components/rtk-meeting/rtk-meeting.tsx::MeetingMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fill type"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "'fixed'"
             },
             "size": {
                 "type": "string",
@@ -293,29 +394,6 @@ export class RtkUiProvider {
                 "attribute": "show-setup-screen",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "noRenderUntilMeeting": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Do not render children until meeting is initialized"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "no-render-until-meeting",
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }
@@ -328,7 +406,7 @@ export class RtkUiProvider {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "States event"
+                    "text": "Emits `rtkStatesUpdate` so that developers can listen to onRtkStatesUpdate and update their own stores\nDo not confuse this with `rtkStateUpdate` that other components emit"
                 },
                 "complexType": {
                     "original": "States",
@@ -362,13 +440,4 @@ export class RtkUiProvider {
                 "methodName": "onSizeChange"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "rtkStateUpdate",
-                "method": "listenState",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

package/dist/collection/components/rtk-virtualized-list/rtk-virtualized-participant-list.js

@@ -112,12 +112,12 @@ export class RtkVirtualizedParticipantList {
     render() {
         var _a;
         const totalHeight = this.items.length * this.itemHeight; // Total height of the list
-        return (h("div", { key: '02cd1150b5e7b65f25178c0ce673ee823feec9d8', class: "virtual-list-container", style: {
+        return (h("div", { key: 'b2f64c371659124c270ecb75efe4ec12498bdf8e', class: "virtual-list-container", style: {
                 position: 'relative',
                 height: '100%',
                 overflowX: 'hidden',
                 overflowY: 'auto',
-            } }, h("div", { key: '0f886b79c861b3010d60df73a7b343955e97a8f2', style: { height: `${totalHeight}px`, position: 'relative' } }, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ? this.emptyListElement : this.renderItems()), h("div", { key: 'd290097b0d363d9a580e71da1260e87456248dc4', style: { height: `${this.itemHeight}px` } })));
+            } }, h("div", { key: '3467332664e7bc167748dea0ec64da614ad4915c', style: { height: `${totalHeight}px`, position: 'relative' } }, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ? this.emptyListElement : this.renderItems()), h("div", { key: '738cc8ac54467c1a5b6d257885a19e29c10de5e1', style: { height: `${this.itemHeight}px` } })));
     }
     static get is() { return "rtk-virtualized-participant-list"; }
     static get originalStyleUrls() {

package/dist/collection/components/rtk-waiting-screen/rtk-waiting-screen.js

@@ -11,19 +11,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Host, h } from "@stencil/core";
 import { useLanguage } from "../../lib/lang";
 import { defaultIconPack } from "../../lib/icons";
-import { defaultConfig } from "../../exports";
+import { createDefaultConfig } from "../../exports";
 import { SyncWithStore } from "../../utils/sync-with-store";
 export class RtkWaitingScreen {
     constructor() {
         /** Config */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '06c3f95f6b37b0b6dac40c39f0006dfd8e2f1527' }, h("slot", { key: '76e9f7369a1aa9c2b5a6bbb602ff1f26289c5d80' }, h("div", { key: '8214ae3640c401b4d1ba1333aaa996ef49b7ec1c', class: "centered", part: "content" }, h("rtk-logo", { key: 'ec1f1f220f39f674510e1c95699f92d53a9fbf00', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), h("p", { key: '9123734c61b424b323701f99ac8da6ee0b2885e4' }, this.t('waitlist.body_text'))))));
+        return (h(Host, { key: '42ab084403fb118e17ca88c0aa9ca896d44893b7' }, h("slot", { key: 'd92a248417603793da8efb8d3b914f1730bd2fc0' }, h("div", { key: '45a4c570273ee8e070fea17c340c800859ee72e3', class: "centered", part: "content" }, h("rtk-logo", { key: '7c5fe652ea18ed2cac0c20351525250c83cf8a1d', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), h("p", { key: 'a3ac66ef146ac1f04a9a8e912befa3de40d534a1' }, this.t('waitlist.body_text'))))));
     }
     static get is() { return "rtk-waiting-screen"; }
     static get encapsulation() { return "shadow"; }
@@ -84,7 +84,7 @@ export class RtkWaitingScreen {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             },
             "iconPack": {
                 "type": "unknown",
@@ -140,6 +140,9 @@ export class RtkWaitingScreen {
 __decorate([
     SyncWithStore()
 ], RtkWaitingScreen.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkWaitingScreen.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkWaitingScreen.prototype, "iconPack", void 0);

package/dist/collection/exports.js

@@ -5,11 +5,11 @@ export { provideRtkDesignSystem } from './utils/provide-design-system';
 export { extendConfig, generateConfig } from './utils/config';
 export { sendNotification } from './utils/notification';
 export { RtkUiBuilder } from './lib/builder';
-export { uiStore, getInitialStates } from './utils/sync-with-store/ui-store';
+export { uiStore, uiState, getInitialStates, createPeerStore } from './utils/sync-with-store/ui-store';
 // addons
 export { registerAddons } from './lib/addons';
 // UIConfig, Icon Pack, i18n and Notification Sounds
-export { defaultConfig } from './lib/default-ui-config';
+export { defaultConfig, createDefaultConfig } from './lib/default-ui-config';
 export { defaultIconPack } from './lib/icons';
 export { defaultLanguage, useLanguage } from './lib/lang';
 export { default as RtkNotificationsAudio } from './lib/notification';

package/dist/collection/lib/builder/index.js

@@ -1,4 +1,4 @@
-import { defaultConfig } from "../default-ui-config";
+import { createDefaultConfig } from "../default-ui-config";
 /* eslint-disable no-console */
 /*
     Elements can be of two types
@@ -120,7 +120,7 @@ export class UIElemEditor {
 /* eslint-enable no-console */
 export class RtkUiBuilder {
     constructor(config) {
-        this.config = config || defaultConfig;
+        this.config = config || createDefaultConfig();
     }
     /**
      * Find an element anywhere in the hierarachy and returns an editor object

package/dist/collection/lib/default-ui-config.js

@@ -1,3 +1,4 @@
+import clone from "../utils/clone";
 /**
  * The default UI Config
  */
@@ -322,3 +323,6 @@ export const defaultConfig = {
         videoFit: 'cover',
     },
 };
+export const createDefaultConfig = () => {
+    return clone(defaultConfig);
+};

package/dist/collection/utils/config.js

@@ -1,4 +1,4 @@
-import { defaultConfig } from "../lib/default-ui-config";
+import { createDefaultConfig } from "../lib/default-ui-config";
 import { isValidHexColor } from "./color";
 import deepMerge from "lodash-es/merge";
 import { isLiveStreamHost } from "./livestream";
@@ -7,7 +7,7 @@ import { isLiveStreamHost } from "./livestream";
  * @param config Your extended UI Config
  * @returns New extended UI Config object
  */
-export const extendConfig = (config, baseConfig = defaultConfig) => {
+export const extendConfig = (config, baseConfig = createDefaultConfig()) => {
     let newConfig = Object.assign({}, baseConfig);
     deepMerge(newConfig, config);
     return newConfig;

package/dist/collection/utils/sync-with-store/index.js

@@ -1,20 +1,82 @@
 import { getElement } from "@stencil/core";
-import { uiStore as store, appendElement, removeElement } from "./ui-store";
+import { uiStore as legacyGlobalUIStore, appendElement, removeElement, } from "./ui-store";
 export function SyncWithStore() {
     return function (proto, propName) {
         const { connectedCallback, disconnectedCallback } = proto;
         proto.connectedCallback = function () {
             const host = getElement(this);
             const value = host[propName];
+            host[`_rtkStoreToCleanup-${propName}`] = legacyGlobalUIStore;
+            /**
+             * NOTE(ravindra-dyte):
+             * For backward compatibility, let's use global store.
+             * If rtk-ui-provider in parent hierarchy is available, we will use peer specific store.
+             * If provider is found, All states will be solely controlled by RtkUiProvider.
+             */
             if (!value) {
-                const storeValue = store.state[propName];
+                const storeValue = legacyGlobalUIStore.state[propName];
                 host[propName] = storeValue;
-                appendElement(propName, host);
+                appendElement(propName, host, legacyGlobalUIStore);
             }
+            // Listen for provider response
+            const storeResponseListener = (event) => {
+                const requestId = host._storeRequestId;
+                if (event.detail.requestId === requestId) {
+                    // Blindly put peer specific store's value for propName in host propName
+                    const storeValue = event.detail.store.state[propName];
+                    host[propName] = storeValue;
+                    appendElement(propName, host, event.detail.store);
+                    host[`_rtkStoreToCleanup-${propName}`] = event.detail.store;
+                    // Since peer specific store is available, remove element prop from global store
+                    removeElement(propName, host, legacyGlobalUIStore);
+                    document.removeEventListener('rtkProvideStore', storeResponseListener);
+                }
+            };
+            // Store listener reference for cleanup
+            host[`_rtkStoreResponseListener-${propName}`] = storeResponseListener;
+            document.addEventListener('rtkProvideStore', storeResponseListener);
+            // Generate unique request ID
+            const requestId = `${host.tagName}-${Date.now()}-${Math.random()}`;
+            host._storeRequestId = requestId;
+            // Request store from provider
+            const requestEvent = new CustomEvent('rtkRequestStore', {
+                detail: { element: host, propName, requestId },
+                bubbles: true,
+                composed: true, // Allow event to cross shadow DOM boundaries
+            });
+            host.dispatchEvent(requestEvent);
+            // Listen for peer specific store ready event to use the correct store
+            const storeReadyListener = () => {
+                // Re-request store (peer specific store should now be available)
+                const newRequestId = `${host.tagName}-${Date.now()}-${Math.random().toString(36)}`;
+                host._storeRequestId = newRequestId;
+                const retryRequestEvent = new CustomEvent('rtkRequestStore', {
+                    detail: { element: host, propName, requestId: newRequestId },
+                    bubbles: true,
+                    composed: true,
+                });
+                host.dispatchEvent(retryRequestEvent);
+                document.removeEventListener('rtkPeerStoreReady', storeReadyListener);
+            };
+            // Store listener reference for cleanup
+            host[`_rtkStoreReadyListener-${propName}`] = storeReadyListener;
+            document.addEventListener('rtkPeerStoreReady', storeReadyListener);
             return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
         };
         proto.disconnectedCallback = function () {
-            removeElement(propName, getElement(this));
+            const host = getElement(this);
+            removeElement(propName, host, host[`_rtkStoreToCleanup-${propName}`]);
+            // Clean up event listeners to prevent memory leaks
+            const storeResponseListener = host[`_rtkStoreResponseListener-${propName}`];
+            if (storeResponseListener) {
+                document.removeEventListener('rtkProvideStore', storeResponseListener);
+                delete host[`_rtkStoreResponseListener-${propName}`];
+            }
+            const storeReadyListener = host[`_rtkStoreReadyListener-${propName}`];
+            if (storeReadyListener) {
+                document.removeEventListener('rtkPeerStoreReady', storeReadyListener);
+                delete host[`_rtkStoreReadyListener-${propName}`];
+            }
             return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
         };
     };