@stream-io/video-client 1.11.11 → 1.11.13

package/dist/src/Call.d.ts

@@ -81,6 +81,7 @@ export declare class Call {
     private reconnectAttempts;
     private reconnectStrategy;
     private fastReconnectDeadlineSeconds;
+    private disconnectionTimeoutSeconds;
     private lastOfflineTimestamp;
     private networkAvailableTask;
     private trackPublishOrder;
@@ -652,4 +653,10 @@ export declare class Call {
      * and removes any preference for preferred resolution.
      */
     setIncomingVideoEnabled: (enabled: boolean) => void;
+    /**
+     * Sets the maximum amount of time a user can remain waiting for a reconnect
+     * after a network disruption
+     * @param timeoutSeconds Timeout in seconds, or 0 to keep reconnecting indefinetely
+     */
+    setDisconnectionTimeout: (timeoutSeconds: number) => void;
 }

package/dist/src/StreamSfuClient.d.ts

@@ -72,7 +72,6 @@ export declare class StreamSfuClient {
     private pingIntervalInMs;
     private unhealthyTimeoutInMs;
     private lastMessageTimestamp?;
-    private readonly restoreWebSocketConcurrencyTag;
     private readonly unsubscribeIceTrickle;
     private readonly unsubscribeNetworkChanged;
     private readonly onSignalClose;
@@ -80,7 +79,7 @@ export declare class StreamSfuClient {
     private readonly logTag;
     private readonly credentials;
     private readonly dispatcher;
-    private readonly joinResponseTimeout?;
+    private readonly joinResponseTimeout;
     private networkAvailableTask;
     /**
      * Promise that resolves when the JoinResponse is received.
@@ -119,7 +118,6 @@ export declare class StreamSfuClient {
     constructor({ dispatcher, credentials, sessionId, logTag, joinResponseTimeout, onSignalClose, streamClient, }: StreamSfuClientConstructor);
     private createWebSocket;
     private cleanUpWebSocket;
-    private restoreWebSocket;
     get isHealthy(): boolean;
     get joinTask(): Promise<JoinResponse>;
     private handleWebSocketClose;

package/dist/src/coordinator/connection/connection.d.ts

@@ -23,7 +23,7 @@ export declare class StableWSConnection {
     private connectionOpenSafe?;
     consecutiveFailures: number;
     pingInterval: number;
-    healthCheckTimeoutRef?: NodeJS.Timeout;
+    healthCheckTimeoutRef?: number;
     isConnecting: boolean;
     isDisconnected: boolean;
     isHealthy: boolean;

package/dist/src/coordinator/connection/types.d.ts

@@ -119,6 +119,11 @@ export type StreamClientOptions = Partial<AxiosRequestConfig> & {
      * In Node.js environment, you can use the `ws` package.
      */
     WebSocketImpl?: typeof WebSocket;
+    /**
+     * Create Web Worker to initiate timer events like health checks. Can possibly prevent
+     * timer throttling issues in inactive browser tabs.
+     */
+    expertimental_enableTimerWorker?: boolean;
 };
 export type TokenProvider = () => Promise<string>;
 export type TokenOrProvider = null | string | TokenProvider | undefined;

package/dist/src/helpers/promise.d.ts

@@ -16,3 +16,17 @@ export interface SafePromise<T> {
  * with the original promise
  */
 export declare function makeSafePromise<T>(promise: Promise<T>): SafePromise<T>;
+export type PromiseWithResolvers<T> = {
+    promise: Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason: any) => void;
+    isResolved: boolean;
+    isRejected: boolean;
+};
+/**
+ * Creates a new promise with resolvers.
+ *
+ * Based on:
+ * - https://github.com/tc39/proposal-promise-with-resolvers/blob/main/polyfills.js
+ */
+export declare const promiseWithResolvers: <T = void>() => PromiseWithResolvers<T>;

package/dist/src/timers/index.d.ts

@@ -0,0 +1,22 @@
+declare class TimerWorker {
+    private currentTimerId;
+    private callbacks;
+    private worker;
+    private fallback;
+    setup({ useTimerWorker }?: {
+        useTimerWorker?: boolean;
+    }): void;
+    destroy(): void;
+    get ready(): boolean;
+    setInterval(callback: () => void, timeout: number): number;
+    clearInterval(id?: number): void;
+    setTimeout(callback: () => void, timeout: number): number;
+    clearTimeout(id?: number): void;
+    private setTimer;
+    private clearTimer;
+    private getTimerId;
+    private sendMessage;
+}
+export declare const enableTimerWorker: () => void;
+export declare const getTimers: () => TimerWorker;
+export {};

package/dist/src/timers/types.d.ts

@@ -0,0 +1,12 @@
+export type TimerWorkerRequest = {
+    type: 'setInterval' | 'setTimeout';
+    id: number;
+    timeout: number;
+} | {
+    type: 'clearInterval' | 'clearTimeout';
+    id: number;
+};
+export type TimerWorkerEvent = {
+    type: 'tick';
+    id: number;
+};

package/dist/src/timers/worker.build.d.ts

@@ -0,0 +1,3 @@
+export declare const timerWorker: {
+    src: string;
+};

package/dist/src/timers/worker.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.11.11",
+  "version": "1.11.13",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -11,12 +11,13 @@
   "scripts": {
     "clean": "rimraf dist",
     "start": "rollup -w -c",
-    "build": "yarn clean && rollup -c",
+    "build": "yarn clean && ./generate-timer-worker.sh && rollup -c",
     "test": "vitest",
     "clean:docs": "rimraf generated-docs",
     "test-ci": "vitest --coverage",
     "generate:open-api": "./generate-openapi.sh protocol",
-    "generate:open-api:dev": "./generate-openapi.sh chat"
+    "generate:open-api:dev": "./generate-openapi.sh chat",
+    "generate:timer-worker": "./generate-timer-worker.sh"
   },
   "files": [
     "dist",

package/src/Call.ts

@@ -120,9 +120,10 @@ import { getSdkSignature } from './stats/utils';
 import { withoutConcurrency } from './helpers/concurrency';
 import { ensureExhausted } from './helpers/ensureExhausted';
 import {
+  makeSafePromise,
   PromiseWithResolvers,
   promiseWithResolvers,
-} from './helpers/withResolvers';
+} from './helpers/promise';
 
 /**
  * An object representation of a `Call`.
@@ -213,6 +214,7 @@ export class Call {
   private reconnectAttempts = 0;
   private reconnectStrategy = WebsocketReconnectStrategy.UNSPECIFIED;
   private fastReconnectDeadlineSeconds: number = 0;
+  private disconnectionTimeoutSeconds: number = 0;
   private lastOfflineTimestamp: number = 0;
   private networkAvailableTask: PromiseWithResolvers<void> | undefined;
   // maintain the order of publishing tracks to restore them after a reconnection
@@ -1051,6 +1053,9 @@ export class Call {
    */
   private handleSfuSignalClose = (sfuClient: StreamSfuClient) => {
     this.logger('debug', '[Reconnect] SFU signal connection closed');
+    // SFU WS closed before we finished current join, no need to schedule reconnect
+    // because join operation will fail
+    if (this.state.callingState === CallingState.JOINING) return;
     // normal close, no need to reconnect
     if (sfuClient.isLeaving) return;
     this.reconnect(WebsocketReconnectStrategy.REJOIN).catch((err) => {
@@ -1068,14 +1073,35 @@ export class Call {
   private reconnect = async (
     strategy: WebsocketReconnectStrategy,
   ): Promise<void> => {
+    if (
+      this.state.callingState === CallingState.RECONNECTING ||
+      this.state.callingState === CallingState.RECONNECTING_FAILED
+    )
+      return;
+
     return withoutConcurrency(this.reconnectConcurrencyTag, async () => {
       this.logger(
         'info',
         `[Reconnect] Reconnecting with strategy ${WebsocketReconnectStrategy[strategy]}`,
       );
 
+      let reconnectStartTime = Date.now();
       this.reconnectStrategy = strategy;
+
       do {
+        if (
+          this.disconnectionTimeoutSeconds > 0 &&
+          (Date.now() - reconnectStartTime) / 1000 >
+            this.disconnectionTimeoutSeconds
+        ) {
+          this.logger(
+            'warn',
+            '[Reconnect] Stopping reconnection attempts after reaching disconnection timeout',
+          );
+          this.state.setCallingState(CallingState.RECONNECTING_FAILED);
+          return;
+        }
+
         // we don't increment reconnect attempts for the FAST strategy.
         if (this.reconnectStrategy !== WebsocketReconnectStrategy.FAST) {
           this.reconnectAttempts++;
@@ -1193,7 +1219,7 @@ export class Call {
     currentSubscriber?.detachEventHandlers();
     currentPublisher?.detachEventHandlers();
 
-    const migrationTask = currentSfuClient.enterMigration();
+    const migrationTask = makeSafePromise(currentSfuClient.enterMigration());
 
     try {
       const currentSfu = currentSfuClient.edgeName;
@@ -1211,7 +1237,7 @@ export class Call {
       // Wait for the migration to complete, then close the previous SFU client
       // and the peer connection instances. In case of failure, the migration
       // task would throw an error and REJOIN would be attempted.
-      await migrationTask;
+      await migrationTask();
 
       // in MIGRATE, we can consider the call as joined only after
       // `participantMigrationComplete` event is received, signaled by
@@ -2337,4 +2363,13 @@ export class Call {
     );
     this.dynascaleManager.applyTrackSubscriptions();
   };
+
+  /**
+   * Sets the maximum amount of time a user can remain waiting for a reconnect
+   * after a network disruption
+   * @param timeoutSeconds Timeout in seconds, or 0 to keep reconnecting indefinetely
+   */
+  setDisconnectionTimeout = (timeoutSeconds: number) => {
+    this.disconnectionTimeoutSeconds = timeoutSeconds;
+  };
 }

package/src/StreamSfuClient.ts

@@ -25,15 +25,17 @@ import {
 } from './gen/video/sfu/signal_rpc/signal';
 import { ICETrickle, TrackType } from './gen/video/sfu/models/models';
 import { StreamClient } from './coordinator/connection/client';
-import { generateUUIDv4, sleep } from './coordinator/connection/utils';
+import { generateUUIDv4 } from './coordinator/connection/utils';
 import { Credentials } from './gen/coordinator';
 import { Logger } from './coordinator/connection/types';
 import { getLogger, getLogLevel } from './logger';
-import { withoutConcurrency } from './helpers/concurrency';
 import {
   promiseWithResolvers,
   PromiseWithResolvers,
-} from './helpers/withResolvers';
+  makeSafePromise,
+  SafePromise,
+} from './helpers/promise';
+import { getTimers } from './timers';
 
 export type StreamSfuClientConstructor = {
   /**
@@ -101,7 +103,7 @@ export class StreamSfuClient {
   /**
    * Promise that resolves when the WebSocket connection is ready (open).
    */
-  private signalReady!: Promise<WebSocket>;
+  private signalReady!: SafePromise<WebSocket>;
 
   /**
    * Flag to indicate if the client is in the process of leaving the call.
@@ -110,13 +112,12 @@ export class StreamSfuClient {
   isLeaving = false;
 
   private readonly rpc: SignalServerClient;
-  private keepAliveInterval?: NodeJS.Timeout;
+  private keepAliveInterval?: number;
   private connectionCheckTimeout?: NodeJS.Timeout;
   private migrateAwayTimeout?: NodeJS.Timeout;
   private pingIntervalInMs = 10 * 1000;
   private unhealthyTimeoutInMs = this.pingIntervalInMs + 5 * 1000;
   private lastMessageTimestamp?: Date;
-  private readonly restoreWebSocketConcurrencyTag = Symbol('recoverWebSocket');
   private readonly unsubscribeIceTrickle: () => void;
   private readonly unsubscribeNetworkChanged: () => void;
   private readonly onSignalClose: (() => void) | undefined;
@@ -124,7 +125,7 @@ export class StreamSfuClient {
   private readonly logTag: string;
   private readonly credentials: Credentials;
   private readonly dispatcher: Dispatcher;
-  private readonly joinResponseTimeout?: number;
+  private readonly joinResponseTimeout: number;
   private networkAvailableTask: PromiseWithResolvers<void> | undefined;
   /**
    * Promise that resolves when the JoinResponse is received.
@@ -227,32 +228,31 @@ export class StreamSfuClient {
     });
 
     this.signalWs.addEventListener('close', this.handleWebSocketClose);
-    this.signalWs.addEventListener('error', this.restoreWebSocket);
-
-    this.signalReady = new Promise((resolve) => {
-      const onOpen = () => {
-        this.signalWs.removeEventListener('open', onOpen);
-        resolve(this.signalWs);
-      };
-      this.signalWs.addEventListener('open', onOpen);
-    });
+
+    this.signalReady = makeSafePromise(
+      Promise.race<WebSocket>([
+        new Promise((resolve) => {
+          const onOpen = () => {
+            this.signalWs.removeEventListener('open', onOpen);
+            resolve(this.signalWs);
+          };
+          this.signalWs.addEventListener('open', onOpen);
+        }),
+
+        new Promise((resolve, reject) => {
+          setTimeout(
+            () => reject(new Error('SFU WS connection timed out')),
+            this.joinResponseTimeout,
+          );
+        }),
+      ]),
+    );
   };
 
   private cleanUpWebSocket = () => {
-    this.signalWs.removeEventListener('error', this.restoreWebSocket);
     this.signalWs.removeEventListener('close', this.handleWebSocketClose);
   };
 
-  private restoreWebSocket = () => {
-    withoutConcurrency(this.restoreWebSocketConcurrencyTag, async () => {
-      await this.networkAvailableTask?.promise;
-      this.logger('debug', 'Restoring SFU WS connection');
-      this.cleanUpWebSocket();
-      await sleep(500);
-      this.createWebSocket();
-    }).catch((err) => this.logger('debug', `Can't restore WS connection`, err));
-  };
-
   get isHealthy() {
     return this.signalWs.readyState === WebSocket.OPEN;
   }
@@ -263,7 +263,7 @@ export class StreamSfuClient {
 
   private handleWebSocketClose = () => {
     this.signalWs.removeEventListener('close', this.handleWebSocketClose);
-    clearInterval(this.keepAliveInterval);
+    getTimers().clearInterval(this.keepAliveInterval);
     clearTimeout(this.connectionCheckTimeout);
     this.onSignalClose?.();
   };
@@ -409,7 +409,7 @@ export class StreamSfuClient {
     data: Omit<JoinRequest, 'sessionId' | 'token'>,
   ): Promise<JoinResponse> => {
     // wait for the signal web socket to be ready before sending "joinRequest"
-    await this.signalReady;
+    await this.signalReady();
     if (this.joinResponseTask.isResolved || this.joinResponseTask.isRejected) {
       // we need to lock the RPC requests until we receive a JoinResponse.
       // that's why we have this primitive lock mechanism.
@@ -478,7 +478,7 @@ export class StreamSfuClient {
   };
 
   private send = async (message: SfuRequest) => {
-    await this.signalReady; // wait for the signal ws to be open
+    await this.signalReady(); // wait for the signal ws to be open
     const msgJson = SfuRequest.toJson(message);
     if (this.signalWs.readyState !== WebSocket.OPEN) {
       this.logger('debug', 'Signal WS is not open. Skipping message', msgJson);
@@ -489,8 +489,9 @@ export class StreamSfuClient {
   };
 
   private keepAlive = () => {
-    clearInterval(this.keepAliveInterval);
-    this.keepAliveInterval = setInterval(() => {
+    const timers = getTimers();
+    timers.clearInterval(this.keepAliveInterval);
+    this.keepAliveInterval = timers.setInterval(() => {
       this.ping().catch((e) => {
         this.logger('error', 'Error sending healthCheckRequest to SFU', e);
       });

package/src/StreamVideoClient.ts

@@ -31,6 +31,7 @@ import { getLogger, logToConsole, setLogger } from './logger';
 import { getSdkInfo } from './client-details';
 import { SdkType } from './gen/video/sfu/models/models';
 import { withoutConcurrency } from './helpers/concurrency';
+import { enableTimerWorker } from './timers';
 
 /**
  * A `StreamVideoClient` instance lets you communicate with our API, and authenticate users.
@@ -86,9 +87,12 @@ export class StreamVideoClient {
     if (typeof apiKeyOrArgs === 'string') {
       logLevel = opts?.logLevel || logLevel;
       logger = opts?.logger || logger;
+      if (opts?.expertimental_enableTimerWorker) enableTimerWorker();
     } else {
       logLevel = apiKeyOrArgs.options?.logLevel || logLevel;
       logger = apiKeyOrArgs.options?.logger || logger;
+      if (apiKeyOrArgs.options?.expertimental_enableTimerWorker)
+        enableTimerWorker();
     }
 
     setLogger(logger, logLevel);

package/src/coordinator/connection/connection.ts

@@ -15,6 +15,7 @@ import type {
   WSAuthMessage,
 } from '../../gen/coordinator';
 import { makeSafePromise, type SafePromise } from '../../helpers/promise';
+import { getTimers } from '../../timers';
 
 /**
  * StableWSConnection - A WS connection that reconnects upon failure.
@@ -39,7 +40,7 @@ export class StableWSConnection {
   private connectionOpenSafe?: SafePromise<ConnectedEvent>;
   consecutiveFailures: number;
   pingInterval: number;
-  healthCheckTimeoutRef?: NodeJS.Timeout;
+  healthCheckTimeoutRef?: number;
   isConnecting: boolean;
   isDisconnected: boolean;
   isHealthy: boolean;
@@ -224,8 +225,12 @@ export class StableWSConnection {
     this.isDisconnected = true;
 
     // start by removing all the listeners
-    clearInterval(this.healthCheckTimeoutRef);
-    clearInterval(this.connectionCheckTimeoutRef);
+    if (this.healthCheckTimeoutRef) {
+      getTimers().clearInterval(this.healthCheckTimeoutRef);
+    }
+    if (this.connectionCheckTimeoutRef) {
+      clearInterval(this.connectionCheckTimeoutRef);
+    }
 
     removeConnectionEventListeners(this.onlineStatusChanged);
 
@@ -689,9 +694,13 @@ export class StableWSConnection {
    * Schedules a next health check ping for websocket.
    */
   scheduleNextPing = () => {
+    const timers = getTimers();
+    if (this.healthCheckTimeoutRef) {
+      timers.clearTimeout(this.healthCheckTimeoutRef);
+    }
+
     // 30 seconds is the recommended interval (messenger uses this)
-    clearTimeout(this.healthCheckTimeoutRef);
-    this.healthCheckTimeoutRef = setTimeout(() => {
+    this.healthCheckTimeoutRef = timers.setTimeout(() => {
       // send the healthcheck..., server replies with a health check event
       const data = [{ type: 'health.check', client_id: this.client.clientID }];
       // try to send on the connection

package/src/coordinator/connection/types.ts

@@ -146,6 +146,12 @@ export type StreamClientOptions = Partial<AxiosRequestConfig> & {
    * In Node.js environment, you can use the `ws` package.
    */
   WebSocketImpl?: typeof WebSocket;
+
+  /**
+   * Create Web Worker to initiate timer events like health checks. Can possibly prevent
+   * timer throttling issues in inactive browser tabs.
+   */
+  expertimental_enableTimerWorker?: boolean;
 };
 
 export type TokenProvider = () => Promise<string>;

package/src/helpers/promise.ts

@@ -45,3 +45,47 @@ export function makeSafePromise<T>(promise: Promise<T>): SafePromise<T> {
   unwrapPromise.checkPending = () => isPending;
   return unwrapPromise;
 }
+
+export type PromiseWithResolvers<T> = {
+  promise: Promise<T>;
+  resolve: (value: T | PromiseLike<T>) => void;
+  reject: (reason: any) => void;
+  isResolved: boolean;
+  isRejected: boolean;
+};
+
+/**
+ * Creates a new promise with resolvers.
+ *
+ * Based on:
+ * - https://github.com/tc39/proposal-promise-with-resolvers/blob/main/polyfills.js
+ */
+export const promiseWithResolvers = <T = void>(): PromiseWithResolvers<T> => {
+  let resolve: (value: T | PromiseLike<T>) => void;
+  let reject: (reason: any) => void;
+  const promise = new Promise<T>((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+
+  let isResolved = false;
+  let isRejected = false;
+
+  const resolver = (value: T | PromiseLike<T>) => {
+    isResolved = true;
+    resolve(value);
+  };
+
+  const rejecter = (reason: any) => {
+    isRejected = true;
+    reject(reason);
+  };
+
+  return {
+    promise,
+    resolve: resolver,
+    reject: rejecter,
+    isResolved,
+    isRejected,
+  };
+};

package/src/timers/index.ts

@@ -0,0 +1,137 @@
+import { lazy } from '../helpers/lazy';
+import { getLogger } from '../logger';
+import { TimerWorkerEvent, TimerWorkerRequest } from './types';
+import { timerWorker } from './worker.build';
+
+class TimerWorker {
+  private currentTimerId = 1;
+  private callbacks = new Map<number, () => void>();
+  private worker: Worker | undefined;
+  private fallback = false;
+
+  setup({ useTimerWorker = true }: { useTimerWorker?: boolean } = {}): void {
+    if (!useTimerWorker) {
+      this.fallback = true;
+      return;
+    }
+
+    try {
+      const source = timerWorker.src;
+      const blob = new Blob([source], {
+        type: 'application/javascript; charset=utf-8',
+      });
+      const script = URL.createObjectURL(blob);
+      this.worker = new Worker(script, { name: 'str-timer-worker' });
+      this.worker.addEventListener('message', (event) => {
+        const { type, id } = event.data as TimerWorkerEvent;
+        if (type === 'tick') {
+          this.callbacks.get(id)?.();
+        }
+      });
+    } catch (err: any) {
+      getLogger(['timer-worker'])('error', err);
+      this.fallback = true;
+    }
+  }
+
+  destroy(): void {
+    this.callbacks.clear();
+    this.worker?.terminate();
+    this.worker = undefined;
+    this.fallback = false;
+  }
+
+  get ready() {
+    return this.fallback || Boolean(this.worker);
+  }
+
+  setInterval(callback: () => void, timeout: number): number {
+    return this.setTimer('setInterval', callback, timeout);
+  }
+
+  clearInterval(id?: number): void {
+    this.clearTimer('clearInterval', id);
+  }
+
+  setTimeout(callback: () => void, timeout: number): number {
+    return this.setTimer('setTimeout', callback, timeout);
+  }
+
+  clearTimeout(id?: number): void {
+    this.clearTimer('clearTimeout', id);
+  }
+
+  private setTimer(
+    type: 'setTimeout' | 'setInterval',
+    callback: () => void,
+    timeout: number,
+  ) {
+    if (!this.ready) {
+      this.setup();
+    }
+
+    if (this.fallback) {
+      return (type === 'setTimeout' ? setTimeout : setInterval)(
+        callback,
+        timeout,
+      ) as unknown as number;
+    }
+
+    const id = this.getTimerId();
+
+    this.callbacks.set(id, () => {
+      callback();
+
+      // Timeouts are one-off operations, so no need to keep callback reference
+      // after timer has fired
+      if (type === 'setTimeout') {
+        this.callbacks.delete(id);
+      }
+    });
+
+    this.sendMessage({ type, id, timeout });
+    return id;
+  }
+
+  private clearTimer(type: 'clearTimeout' | 'clearInterval', id?: number) {
+    if (!id) {
+      return;
+    }
+
+    if (!this.ready) {
+      this.setup();
+    }
+
+    if (this.fallback) {
+      (type === 'clearTimeout' ? clearTimeout : clearInterval)(id);
+      return;
+    }
+
+    this.callbacks.delete(id);
+    this.sendMessage({ type, id });
+  }
+
+  private getTimerId() {
+    return this.currentTimerId++;
+  }
+
+  private sendMessage(message: TimerWorkerRequest) {
+    if (!this.worker) {
+      throw new Error("Cannot use timer worker before it's set up");
+    }
+
+    this.worker.postMessage(message);
+  }
+}
+
+let timerWorkerEnabled = false;
+
+export const enableTimerWorker = () => {
+  timerWorkerEnabled = true;
+};
+
+export const getTimers = lazy(() => {
+  const instance = new TimerWorker();
+  instance.setup({ useTimerWorker: timerWorkerEnabled });
+  return instance;
+});

package/src/timers/types.ts

@@ -0,0 +1,15 @@
+export type TimerWorkerRequest =
+  | {
+      type: 'setInterval' | 'setTimeout';
+      id: number;
+      timeout: number;
+    }
+  | {
+      type: 'clearInterval' | 'clearTimeout';
+      id: number;
+    };
+
+export type TimerWorkerEvent = {
+  type: 'tick';
+  id: number;
+};