fix: expo compatibility layer (#466)

Author: filipecabaco

package.json

@@ -62,5 +62,15 @@
     "typescript": "^5.7.3",
     "vitest": "^2.1.9",
     "web-worker": "1.2.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/module/index.js",
+      "require": "./dist/main/index.js"
+    },
+    "./websocket": {
+      "node": "./src/node.js",
+      "default": "./src/native.js"
+    }
   }
 }

src/RealtimeClient.ts

@@ -1,4 +1,4 @@
-import type { WebSocket as WSWebSocket } from 'ws'
+import WebSocket from './WebSocket'
 
 import {
   CHANNEL_EVENTS,
@@ -54,7 +54,7 @@ export interface WebSocketLikeConstructor {
   ): WebSocketLike
 }
 
-export type WebSocketLike = WebSocket | WSWebSocket | WSWebSocketDummy
+export type WebSocketLike = WebSocket | WSWebSocketDummy
 
 export interface WebSocketLikeError {
   error: any
@@ -81,13 +81,13 @@ export type RealtimeClientOptions = {
   accessToken?: () => Promise<string | null>
 }
 
-const NATIVE_WEBSOCKET_AVAILABLE = typeof WebSocket !== 'undefined'
 const WORKER_SCRIPT = `
   addEventListener("message", (e) => {
     if (e.data.event === "start") {
       setInterval(() => postMessage({ event: "keepAlive" }), e.data.interval);
     }
   });`
+
 export default class RealtimeClient {
   accessTokenValue: string | null = null
   apiKey: string | null = null
@@ -209,33 +209,21 @@ export default class RealtimeClient {
     if (this.conn) {
       return
     }
-
+    if (!this.transport) {
+      this.transport = WebSocket
+    }
     if (this.transport) {
       this.conn = new this.transport(this.endpointURL(), undefined, {
         headers: this.headers,
       })
       this.setupConnection()
       return
     }
-
-    if (NATIVE_WEBSOCKET_AVAILABLE) {
-      this.conn = new WebSocket(this.endpointURL())
-      this.setupConnection()
-      return
-    }
-
     this.conn = new WSWebSocketDummy(this.endpointURL(), undefined, {
       close: () => {
         this.conn = null
       },
     })
-
-    import('ws').then(({ default: WS }) => {
-      this.conn = new WS(this.endpointURL(), undefined, {
-        headers: this.headers,
-      })
-      this.setupConnection()
-    })
   }
 
   /**
@@ -560,7 +548,7 @@ export default class RealtimeClient {
   }
 
   /** @internal */
-  private async _onConnOpen() {
+  private _onConnOpen() {
     this.log('transport', `connected to ${this.endpointURL()}`)
     this.flushSendBuffer()
     this.reconnectTimer.reset()
@@ -576,11 +564,10 @@ export default class RealtimeClient {
       } else {
         this.log('worker', `starting default worker`)
       }
-
       const objectUrl = this._workerObjectUrl(this.workerUrl!)
       this.workerRef = new Worker(objectUrl)
       this.workerRef.onerror = (error) => {
-        this.log('worker', 'worker error', error.message)
+        this.log('worker', 'worker error', (error as ErrorEvent).message)
         this.workerRef!.terminate()
       }
       this.workerRef.onmessage = (event) => {
@@ -593,12 +580,10 @@ export default class RealtimeClient {
         interval: this.heartbeatIntervalMs,
       })
     }
-
-    this.stateChangeCallbacks.open.forEach((callback) => callback())!
+    this.stateChangeCallbacks.open.forEach((callback) => callback())
   }
 
   /** @internal */
-
   private _onConnClose(event: any) {
     this.log('transport', 'close', event)
     this._triggerChanError()
@@ -631,7 +616,6 @@ export default class RealtimeClient {
     }
     const prefix = url.match(/\?/) ? '&' : '?'
     const query = new URLSearchParams(params)
-
     return `${url}${prefix}${query}`
   }
 

src/WebSocket.native.ts

@@ -0,0 +1,4 @@
+// Native/browser WebSocket entry point
+const NativeWebSocket = typeof WebSocket !== 'undefined' ? WebSocket : undefined
+
+export default NativeWebSocket

src/WebSocket.ts

@@ -0,0 +1,4 @@
+// Node.js WebSocket entry point
+import WebSocket from 'ws'
+
+export default WebSocket