added the VisibilityMonitor code

Author: Samruddhi90

packages/remote-config/src/client/EventEmitter.ts

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { assert } from '@firebase/util';
+
+/**
+ * Base class to be used if you want to emit events. Call the constructor with
+ * the set of allowed event names.
+ */
+export abstract class EventEmitter {
+  private listeners_: {
+    [eventType: string]: Array<{
+      callback(...args: unknown[]): void;
+      context: unknown;
+    }>;
+  } = {};
+
+  constructor(private allowedEvents_: string[]) {
+    assert(
+      Array.isArray(allowedEvents_) && allowedEvents_.length > 0,
+      'Requires a non-empty array'
+    );
+  }
+
+  /**
+   * To be overridden by derived classes in order to fire an initial event when
+   * somebody subscribes for data.
+   *
+   * @returns {Array.<*>} Array of parameters to trigger initial event with.
+   */
+  abstract getInitialEvent(eventType: string): unknown[];
+
+  /**
+   * To be called by derived classes to trigger events.
+   */
+  protected trigger(eventType: string, ...varArgs: unknown[]) {
+    if (Array.isArray(this.listeners_[eventType])) {
+      // Clone the list, since callbacks could add/remove listeners.
+      const listeners = [...this.listeners_[eventType]];
+
+      for (let i = 0; i < listeners.length; i++) {
+        listeners[i].callback.apply(listeners[i].context, varArgs);
+      }
+    }
+  }
+
+  on(eventType: string, callback: (a: unknown) => void, context: unknown) {
+    this.validateEventType_(eventType);
+    this.listeners_[eventType] = this.listeners_[eventType] || [];
+    this.listeners_[eventType].push({ callback, context });
+
+    const eventData = this.getInitialEvent(eventType);
+    if (eventData) {
+      callback.apply(context, eventData);
+    }
+  }
+
+  off(eventType: string, callback: (a: unknown) => void, context: unknown) {
+    this.validateEventType_(eventType);
+    const listeners = this.listeners_[eventType] || [];
+    for (let i = 0; i < listeners.length; i++) {
+      if (
+        listeners[i].callback === callback &&
+        (!context || context === listeners[i].context)
+      ) {
+        listeners.splice(i, 1);
+        return;
+      }
+    }
+  }
+
+  private validateEventType_(eventType: string) {
+    assert(
+      this.allowedEvents_.find(et => {
+        return et === eventType;
+      }),
+      'Unknown event: ' + eventType
+    );
+  }
+}

packages/remote-config/src/client/VisibilityMonitor.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { assert } from '@firebase/util';
+
+import { EventEmitter } from './EventEmitter';
+
+declare const document: Document;
+
+export class VisibilityMonitor extends EventEmitter {
+  private visible_: boolean;
+
+  static getInstance() {
+    return new VisibilityMonitor();
+  }
+
+  constructor() {
+    super(['visible']);
+    let hidden: string;
+    let visibilityChange: string;
+    if (
+      typeof document !== 'undefined' &&
+      typeof document.addEventListener !== 'undefined'
+    ) {
+      if (typeof document['hidden'] !== 'undefined') {
+        // Opera 12.10 and Firefox 18 and later support
+        visibilityChange = 'visibilitychange';
+        hidden = 'hidden';
+      } else if (typeof document['mozHidden'] !== 'undefined') {
+        visibilityChange = 'mozvisibilitychange';
+        hidden = 'mozHidden';
+      } else if (typeof document['msHidden'] !== 'undefined') {
+        visibilityChange = 'msvisibilitychange';
+        hidden = 'msHidden';
+      } else if (typeof document['webkitHidden'] !== 'undefined') {
+        visibilityChange = 'webkitvisibilitychange';
+        hidden = 'webkitHidden';
+      }
+    }
+
+    // Initially, we always assume we are visible. This ensures that in browsers
+    // without page visibility support or in cases where we are never visible
+    // (e.g. chrome extension), we act as if we are visible, i.e. don't delay
+    // reconnects
+    this.visible_ = true;
+
+    if (visibilityChange) {
+      document.addEventListener(
+        visibilityChange,
+        () => {
+          const visible = !document[hidden];
+          if (visible !== this.visible_) {
+            this.visible_ = visible;
+            this.trigger('visible', visible);
+          }
+        },
+        false
+      );
+    }
+  }
+
+  getInitialEvent(eventType: string): boolean[] {
+    assert(eventType === 'visible', 'Unknown event type: ' + eventType);
+    return [this.visible_];
+  }
+}

packages/remote-config/src/client/realtime_handler.ts

@@ -21,7 +21,7 @@ import { ERROR_FACTORY, ErrorCode } from '../errors';
 import { _FirebaseInstallationsInternal } from '@firebase/installations';
 import { Storage } from '../storage/storage';
 import { calculateBackoffMillis, FirebaseError } from '@firebase/util';
-import { VisibilityMonitor } from '@firebase/database/dist/src/core/util/VisibilityMonitor';
+import { VisibilityMonitor } from './VisibilityMonitor';
 
 export class RealtimeHandler {
   constructor(
@@ -33,7 +33,7 @@ export class RealtimeHandler {
     private readonly apiKey: string,
     private readonly appId: string
   ) {
-      VisibilityMonitor.getInstance().on('visible', this.onVisibilityChange_, this);
+    VisibilityMonitor.getInstance().on('visible', this.onVisibilityChange, this);
   }
 
   private streamController?: AbortController;
@@ -268,7 +268,7 @@ export class RealtimeHandler {
     return new URL(urlString);
   }
 
-  private onVisibilityChange_(visible: unknown) {
+  private onVisibilityChange(visible: unknown) {
     const wasInBackground = this.isInBackground;
     this.isInBackground = !visible;
     if (wasInBackground !== this.isInBackground) {