@supabase/realtime-js 2.99.3-canary.0 → 2.99.3

package/src/RealtimePresence.ts

@@ -3,10 +3,10 @@
   License: https://github.com/phoenixframework/phoenix/blob/d344ec0a732ab4ee204215b31de69cf4be72e3bf/LICENSE.md
 */
 
+import type { PresenceOpts, PresenceOnJoinCallback, PresenceOnLeaveCallback } from 'phoenix'
 import type RealtimeChannel from './RealtimeChannel'
-import PresenceAdapter from './phoenix/presenceAdapter'
 
-export type Presence<T extends { [key: string]: any } = {}> = {
+type Presence<T extends { [key: string]: any } = {}> = {
   presence_ref: string
 } & T
 
@@ -34,16 +34,42 @@ export enum REALTIME_PRESENCE_LISTEN_EVENTS {
   LEAVE = 'leave',
 }
 
-export type RealtimePresenceOptions = {
-  events?: { state: string; diff: string }
+type PresenceDiff = {
+  joins: RealtimePresenceState
+  leaves: RealtimePresenceState
 }
 
-export default class RealtimePresence {
-  get state() {
-    return this.presenceAdapter.state
+type RawPresenceState = {
+  [key: string]: {
+    metas: {
+      phx_ref?: string
+      phx_ref_prev?: string
+      [key: string]: any
+    }[]
   }
+}
+
+type RawPresenceDiff = {
+  joins: RawPresenceState
+  leaves: RawPresenceState
+}
+
+type PresenceChooser<T> = (key: string, presences: Presence[]) => T
 
-  private presenceAdapter: PresenceAdapter
+export default class RealtimePresence {
+  state: RealtimePresenceState = {}
+  pendingDiffs: RawPresenceDiff[] = []
+  joinRef: string | null = null
+  enabled: boolean = false
+  caller: {
+    onJoin: PresenceOnJoinCallback
+    onLeave: PresenceOnLeaveCallback
+    onSync: () => void
+  } = {
+    onJoin: () => {},
+    onLeave: () => {},
+    onSync: () => {},
+  }
 
   /**
    * Creates a Presence helper that keeps the local presence state in sync with the server.
@@ -62,8 +88,259 @@ export default class RealtimePresence {
    */
   constructor(
     public channel: RealtimeChannel,
-    opts?: RealtimePresenceOptions
+    opts?: PresenceOpts
   ) {
-    this.presenceAdapter = new PresenceAdapter(this.channel.channelAdapter, opts)
+    const events = opts?.events || {
+      state: 'presence_state',
+      diff: 'presence_diff',
+    }
+
+    this.channel._on(events.state, {}, (newState: RawPresenceState) => {
+      const { onJoin, onLeave, onSync } = this.caller
+
+      this.joinRef = this.channel._joinRef()
+
+      this.state = RealtimePresence.syncState(this.state, newState, onJoin, onLeave)
+
+      this.pendingDiffs.forEach((diff) => {
+        this.state = RealtimePresence.syncDiff(this.state, diff, onJoin, onLeave)
+      })
+
+      this.pendingDiffs = []
+
+      onSync()
+    })
+
+    this.channel._on(events.diff, {}, (diff: RawPresenceDiff) => {
+      const { onJoin, onLeave, onSync } = this.caller
+
+      if (this.inPendingSyncState()) {
+        this.pendingDiffs.push(diff)
+      } else {
+        this.state = RealtimePresence.syncDiff(this.state, diff, onJoin, onLeave)
+
+        onSync()
+      }
+    })
+
+    this.onJoin((key, currentPresences, newPresences) => {
+      this.channel._trigger('presence', {
+        event: 'join',
+        key,
+        currentPresences,
+        newPresences,
+      })
+    })
+
+    this.onLeave((key, currentPresences, leftPresences) => {
+      this.channel._trigger('presence', {
+        event: 'leave',
+        key,
+        currentPresences,
+        leftPresences,
+      })
+    })
+
+    this.onSync(() => {
+      this.channel._trigger('presence', { event: 'sync' })
+    })
+  }
+
+  /**
+   * Used to sync the list of presences on the server with the
+   * client's state.
+   *
+   * An optional `onJoin` and `onLeave` callback can be provided to
+   * react to changes in the client's local presences across
+   * disconnects and reconnects with the server.
+   *
+   * @internal
+   */
+  private static syncState(
+    currentState: RealtimePresenceState,
+    newState: RawPresenceState | RealtimePresenceState,
+    onJoin: PresenceOnJoinCallback,
+    onLeave: PresenceOnLeaveCallback
+  ): RealtimePresenceState {
+    const state = this.cloneDeep(currentState)
+    const transformedState = this.transformState(newState)
+    const joins: RealtimePresenceState = {}
+    const leaves: RealtimePresenceState = {}
+
+    this.map(state, (key: string, presences: Presence[]) => {
+      if (!transformedState[key]) {
+        leaves[key] = presences
+      }
+    })
+
+    this.map(transformedState, (key, newPresences: Presence[]) => {
+      const currentPresences: Presence[] = state[key]
+
+      if (currentPresences) {
+        const newPresenceRefs = newPresences.map((m: Presence) => m.presence_ref)
+        const curPresenceRefs = currentPresences.map((m: Presence) => m.presence_ref)
+        const joinedPresences: Presence[] = newPresences.filter(
+          (m: Presence) => curPresenceRefs.indexOf(m.presence_ref) < 0
+        )
+        const leftPresences: Presence[] = currentPresences.filter(
+          (m: Presence) => newPresenceRefs.indexOf(m.presence_ref) < 0
+        )
+
+        if (joinedPresences.length > 0) {
+          joins[key] = joinedPresences
+        }
+
+        if (leftPresences.length > 0) {
+          leaves[key] = leftPresences
+        }
+      } else {
+        joins[key] = newPresences
+      }
+    })
+
+    return this.syncDiff(state, { joins, leaves }, onJoin, onLeave)
+  }
+
+  /**
+   * Used to sync a diff of presence join and leave events from the
+   * server, as they happen.
+   *
+   * Like `syncState`, `syncDiff` accepts optional `onJoin` and
+   * `onLeave` callbacks to react to a user joining or leaving from a
+   * device.
+   *
+   * @internal
+   */
+  private static syncDiff(
+    state: RealtimePresenceState,
+    diff: RawPresenceDiff | PresenceDiff,
+    onJoin: PresenceOnJoinCallback,
+    onLeave: PresenceOnLeaveCallback
+  ): RealtimePresenceState {
+    const { joins, leaves } = {
+      joins: this.transformState(diff.joins),
+      leaves: this.transformState(diff.leaves),
+    }
+
+    if (!onJoin) {
+      onJoin = () => {}
+    }
+
+    if (!onLeave) {
+      onLeave = () => {}
+    }
+
+    this.map(joins, (key, newPresences: Presence[]) => {
+      const currentPresences: Presence[] = state[key] ?? []
+      state[key] = this.cloneDeep(newPresences)
+
+      if (currentPresences.length > 0) {
+        const joinedPresenceRefs = state[key].map((m: Presence) => m.presence_ref)
+        const curPresences: Presence[] = currentPresences.filter(
+          (m: Presence) => joinedPresenceRefs.indexOf(m.presence_ref) < 0
+        )
+
+        state[key].unshift(...curPresences)
+      }
+
+      onJoin(key, currentPresences, newPresences)
+    })
+
+    this.map(leaves, (key, leftPresences: Presence[]) => {
+      let currentPresences: Presence[] = state[key]
+
+      if (!currentPresences) return
+
+      const presenceRefsToRemove = leftPresences.map((m: Presence) => m.presence_ref)
+      currentPresences = currentPresences.filter(
+        (m: Presence) => presenceRefsToRemove.indexOf(m.presence_ref) < 0
+      )
+
+      state[key] = currentPresences
+
+      onLeave(key, currentPresences, leftPresences)
+
+      if (currentPresences.length === 0) delete state[key]
+    })
+
+    return state
+  }
+
+  /** @internal */
+  private static map<T = any>(obj: RealtimePresenceState, func: PresenceChooser<T>): T[] {
+    return Object.getOwnPropertyNames(obj).map((key) => func(key, obj[key]))
+  }
+
+  /**
+   * Remove 'metas' key
+   * Change 'phx_ref' to 'presence_ref'
+   * Remove 'phx_ref' and 'phx_ref_prev'
+   *
+   * @example
+   * // returns {
+   *  abc123: [
+   *    { presence_ref: '2', user_id: 1 },
+   *    { presence_ref: '3', user_id: 2 }
+   *  ]
+   * }
+   * RealtimePresence.transformState({
+   *  abc123: {
+   *    metas: [
+   *      { phx_ref: '2', phx_ref_prev: '1' user_id: 1 },
+   *      { phx_ref: '3', user_id: 2 }
+   *    ]
+   *  }
+   * })
+   *
+   * @internal
+   */
+  private static transformState(
+    state: RawPresenceState | RealtimePresenceState
+  ): RealtimePresenceState {
+    state = this.cloneDeep(state)
+
+    return Object.getOwnPropertyNames(state).reduce((newState, key) => {
+      const presences = state[key]
+
+      if ('metas' in presences) {
+        newState[key] = presences.metas.map((presence) => {
+          presence['presence_ref'] = presence['phx_ref']
+
+          delete presence['phx_ref']
+          delete presence['phx_ref_prev']
+
+          return presence
+        }) as Presence[]
+      } else {
+        newState[key] = presences
+      }
+
+      return newState
+    }, {} as RealtimePresenceState)
+  }
+
+  /** @internal */
+  private static cloneDeep(obj: { [key: string]: any }) {
+    return JSON.parse(JSON.stringify(obj))
+  }
+
+  /** @internal */
+  private onJoin(callback: PresenceOnJoinCallback): void {
+    this.caller.onJoin = callback
+  }
+
+  /** @internal */
+  private onLeave(callback: PresenceOnLeaveCallback): void {
+    this.caller.onLeave = callback
+  }
+
+  /** @internal */
+  private onSync(callback: () => void): void {
+    this.caller.onSync = callback
+  }
+
+  /** @internal */
+  private inPendingSyncState(): boolean {
+    return !this.joinRef || this.joinRef !== this.channel._joinRef()
   }
 }

package/src/lib/constants.ts

@@ -1,19 +1,10 @@
 import { version } from './version'
-import type {
-  SocketState,
-  ChannelState,
-  ChannelEvent as PhoenixChannelEvent,
-  Transport,
-  Vsn,
-} from '../phoenix/types'
-
-export type { SocketState, ChannelState, Transport }
 
 export const DEFAULT_VERSION = `realtime-js/${version}`
 
-export const VSN_1_0_0: Vsn = '1.0.0'
-export const VSN_2_0_0: Vsn = '2.0.0'
-export const DEFAULT_VSN: Vsn = VSN_2_0_0
+export const VSN_1_0_0: string = '1.0.0'
+export const VSN_2_0_0: string = '2.0.0'
+export const DEFAULT_VSN: string = VSN_2_0_0
 
 export const VERSION = version
 
@@ -22,41 +13,37 @@ export const DEFAULT_TIMEOUT = 10000
 export const WS_CLOSE_NORMAL = 1000
 export const MAX_PUSH_BUFFER_SIZE = 100
 
-export const SOCKET_STATES = {
-  connecting: 0,
-  open: 1,
-  closing: 2,
-  closed: 3,
-} as const
-
-export const CHANNEL_STATES = {
-  closed: 'closed',
-  errored: 'errored',
-  joined: 'joined',
-  joining: 'joining',
-  leaving: 'leaving',
-} as const
-
-export type ChannelEvent = PhoenixChannelEvent | 'access_token'
-
-export const CHANNEL_EVENTS = {
-  close: 'phx_close',
-  error: 'phx_error',
-  join: 'phx_join',
-  reply: 'phx_reply',
-  leave: 'phx_leave',
-  access_token: 'access_token',
-} as const
-
-export const TRANSPORTS = {
-  websocket: 'websocket',
-} as const
-
-export type ConnectionState = 'connecting' | 'open' | 'closing' | 'closed'
-
-export const CONNECTION_STATE = {
-  connecting: 'connecting',
-  open: 'open',
-  closing: 'closing',
-  closed: 'closed',
-} as const
+export enum SOCKET_STATES {
+  connecting = 0,
+  open = 1,
+  closing = 2,
+  closed = 3,
+}
+
+export enum CHANNEL_STATES {
+  closed = 'closed',
+  errored = 'errored',
+  joined = 'joined',
+  joining = 'joining',
+  leaving = 'leaving',
+}
+
+export enum CHANNEL_EVENTS {
+  close = 'phx_close',
+  error = 'phx_error',
+  join = 'phx_join',
+  reply = 'phx_reply',
+  leave = 'phx_leave',
+  access_token = 'access_token',
+}
+
+export enum TRANSPORTS {
+  websocket = 'websocket',
+}
+
+export enum CONNECTION_STATE {
+  Connecting = 'connecting',
+  Open = 'open',
+  Closing = 'closing',
+  Closed = 'closed',
+}

package/src/lib/push.ts

@@ -0,0 +1,121 @@
+import { DEFAULT_TIMEOUT } from '../lib/constants'
+import type RealtimeChannel from '../RealtimeChannel'
+
+export default class Push {
+  sent: boolean = false
+  timeoutTimer: number | undefined = undefined
+  ref: string = ''
+  receivedResp: {
+    status: string
+    response: { [key: string]: any }
+  } | null = null
+  recHooks: {
+    status: string
+    callback: Function
+  }[] = []
+  refEvent: string | null = null
+
+  /**
+   * Initializes the Push
+   *
+   * @param channel The Channel
+   * @param event The event, for example `"phx_join"`
+   * @param payload The payload, for example `{user_id: 123}`
+   * @param timeout The push timeout in milliseconds
+   */
+  constructor(
+    public channel: RealtimeChannel,
+    public event: string,
+    public payload: { [key: string]: any } = {},
+    public timeout: number = DEFAULT_TIMEOUT
+  ) {}
+
+  resend(timeout: number) {
+    this.timeout = timeout
+    this._cancelRefEvent()
+    this.ref = ''
+    this.refEvent = null
+    this.receivedResp = null
+    this.sent = false
+    this.send()
+  }
+
+  send() {
+    if (this._hasReceived('timeout')) {
+      return
+    }
+    this.startTimeout()
+    this.sent = true
+    this.channel.socket.push({
+      topic: this.channel.topic,
+      event: this.event,
+      payload: this.payload,
+      ref: this.ref,
+      join_ref: this.channel._joinRef(),
+    })
+  }
+
+  updatePayload(payload: { [key: string]: any }): void {
+    this.payload = { ...this.payload, ...payload }
+  }
+
+  receive(status: string, callback: Function) {
+    if (this._hasReceived(status)) {
+      callback(this.receivedResp?.response)
+    }
+
+    this.recHooks.push({ status, callback })
+    return this
+  }
+
+  startTimeout() {
+    if (this.timeoutTimer) {
+      return
+    }
+    this.ref = this.channel.socket._makeRef()
+    this.refEvent = this.channel._replyEventName(this.ref)
+
+    const callback = (payload: any) => {
+      this._cancelRefEvent()
+      this._cancelTimeout()
+      this.receivedResp = payload
+      this._matchReceive(payload)
+    }
+
+    this.channel._on(this.refEvent, {}, callback)
+
+    this.timeoutTimer = <any>setTimeout(() => {
+      this.trigger('timeout', {})
+    }, this.timeout)
+  }
+
+  trigger(status: string, response: any) {
+    if (this.refEvent) this.channel._trigger(this.refEvent, { status, response })
+  }
+
+  destroy() {
+    this._cancelRefEvent()
+    this._cancelTimeout()
+  }
+
+  private _cancelRefEvent() {
+    if (!this.refEvent) {
+      return
+    }
+
+    this.channel._off(this.refEvent, {})
+  }
+
+  private _cancelTimeout() {
+    clearTimeout(this.timeoutTimer)
+    this.timeoutTimer = undefined
+  }
+
+  private _matchReceive({ status, response }: { status: string; response: Function }) {
+    this.recHooks.filter((h) => h.status === status).forEach((h) => h.callback(response))
+  }
+
+  private _hasReceived(status: string) {
+    return this.receivedResp && this.receivedResp.status === status
+  }
+}

package/src/lib/timer.ts

@@ -0,0 +1,43 @@
+/**
+ * Creates a timer that accepts a `timerCalc` function to perform calculated timeout retries, such as exponential backoff.
+ *
+ * @example
+ *    let reconnectTimer = new Timer(() => this.connect(), function(tries){
+ *      return [1000, 5000, 10000][tries - 1] || 10000
+ *    })
+ *    reconnectTimer.scheduleTimeout() // fires after 1000
+ *    reconnectTimer.scheduleTimeout() // fires after 5000
+ *    reconnectTimer.reset()
+ *    reconnectTimer.scheduleTimeout() // fires after 1000
+ */
+export default class Timer {
+  timer: number | undefined = undefined
+  tries: number = 0
+
+  constructor(
+    public callback: Function,
+    public timerCalc: Function
+  ) {
+    this.callback = callback
+    this.timerCalc = timerCalc
+  }
+
+  reset() {
+    this.tries = 0
+    clearTimeout(this.timer)
+    this.timer = undefined
+  }
+
+  // Cancels any previous scheduleTimeout and schedules callback
+  scheduleTimeout() {
+    clearTimeout(this.timer)
+
+    this.timer = <any>setTimeout(
+      () => {
+        this.tries = this.tries + 1
+        this.callback()
+      },
+      this.timerCalc(this.tries + 1)
+    )
+  }
+}

package/src/lib/version.ts

@@ -4,4 +4,4 @@
 // - Debugging and support (identifying which version is running)
 // - Telemetry and logging (version reporting in errors/analytics)
 // - Ensuring build artifacts match the published package version
-export const version = '2.99.3-canary.0'
+export const version = '2.99.3'

package/src/lib/websocket-factory.ts

@@ -156,6 +156,19 @@ export class WebSocketFactory {
     throw new Error(errorMessage)
   }
 
+  /**
+   * Creates a WebSocket using the detected constructor.
+   *
+   * @example
+   * ```ts
+   * const socket = WebSocketFactory.createWebSocket('wss://realtime.supabase.co/socket')
+   * ```
+   */
+  public static createWebSocket(url: string | URL, protocols?: string | string[]): WebSocketLike {
+    const WS = this.getWebSocketConstructor()
+    return new WS(url, protocols)
+  }
+
   /**
    * Detects whether the runtime can establish WebSocket connections.
    *

package/dist/main/phoenix/channelAdapter.d.ts

@@ -1,32 +0,0 @@
-import type { RealtimeChannelOptions } from '../RealtimeChannel';
-import SocketAdapter from './socketAdapter';
-import type { ChannelBindingCallback, ChannelOnMessage, ChannelOnErrorCallback, ChannelFilterBindings, ChannelState, Push, Timer } from './types';
-export default class ChannelAdapter {
-    private channel;
-    private socket;
-    constructor(socket: SocketAdapter, topic: string, params: RealtimeChannelOptions);
-    get state(): ChannelState;
-    set state(state: ChannelState);
-    get joinedOnce(): boolean;
-    get joinPush(): Push;
-    get rejoinTimer(): Timer;
-    on(event: string, callback: ChannelBindingCallback): number;
-    off(event: string, refNumber?: number): void;
-    subscribe(timeout?: number): Push;
-    unsubscribe(timeout?: number): Push;
-    teardown(): void;
-    onClose(callback: ChannelBindingCallback): void;
-    onError(callback: ChannelOnErrorCallback): number;
-    push(event: string, payload: {
-        [key: string]: any;
-    }, timeout?: number): Push;
-    updateJoinPayload(payload: Record<string, any>): void;
-    canPush(): boolean;
-    isJoined(): boolean;
-    isJoining(): boolean;
-    isClosed(): boolean;
-    isLeaving(): boolean;
-    updateFilterBindings(filterBindings: ChannelFilterBindings): void;
-    updatePayloadTransform(callback: ChannelOnMessage): void;
-}
-//# sourceMappingURL=channelAdapter.d.ts.map

package/dist/main/phoenix/channelAdapter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"channelAdapter.d.ts","sourceRoot":"","sources":["../../../src/phoenix/channelAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EAErB,YAAY,EACZ,IAAI,EACJ,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,MAAM,CAAC,OAAO,OAAO,cAAc;IACjC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAe;gBAEjB,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,sBAAsB;IAMhF,IAAI,KAAK,IAAI,YAAY,CAExB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,YAAY,EAE5B;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,IAAI,QAAQ,IAAI,IAAI,CAEnB;IAED,IAAI,WAAW,IAAI,KAAK,CAEvB;IAED,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,sBAAsB,GAAG,MAAM;IAI3D,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM;IAIrC,SAAS,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAIjC,WAAW,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAInC,QAAQ;IAIR,OAAO,CAAC,QAAQ,EAAE,sBAAsB;IAIxC,OAAO,CAAC,QAAQ,EAAE,sBAAsB,GAAG,MAAM;IAIjD,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAqB5E,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAK9C,OAAO;IAIP,QAAQ;IAIR,SAAS;IAIT,QAAQ;IAIR,SAAS;IAIT,oBAAoB,CAAC,cAAc,EAAE,qBAAqB;IAI1D,sBAAsB,CAAC,QAAQ,EAAE,gBAAgB;CAUlD"}