refactor: add subscribable

Author: boschni

src/core/focusManager.ts

@@ -1,25 +1,13 @@
+import { Subscribable } from './subscribable'
 import { isServer } from './utils'
 
-type FocusListener = () => void
-
-class FocusManager {
-  private listeners: FocusListener[]
+class FocusManager extends Subscribable {
   private removeHandler?: () => void
 
-  constructor() {
-    this.listeners = []
-  }
-
-  subscribe(listener: FocusListener): () => void {
+  protected onSubscribe(): void {
     if (!this.removeHandler) {
       this.setDefaultHandler()
     }
-
-    this.listeners.push(listener)
-
-    return () => {
-      this.listeners = this.listeners.filter(x => x === listener)
-    }
   }
 
   setHandler(init: (onFocus: () => void) => () => void): void {

src/core/mutationCache.ts

@@ -3,20 +3,20 @@ import type { QueryClient } from './queryClient'
 import { notifyManager } from './notifyManager'
 import { Mutation, MutationState } from './mutation'
 import { noop } from './utils'
+import { Subscribable } from './subscribable'
 
 // TYPES
 
 type MutationCacheListener = (mutation?: Mutation) => void
 
 // CLASS
 
-export class MutationCache {
-  private listeners: MutationCacheListener[]
+export class MutationCache extends Subscribable<MutationCacheListener> {
   private mutations: Mutation<any, any, any, any>[]
   private mutationId: number
 
   constructor() {
-    this.listeners = []
+    super()
     this.mutations = []
     this.mutationId = 0
   }
@@ -63,13 +63,6 @@ export class MutationCache {
     return this.mutations
   }
 
-  subscribe(listener: MutationCacheListener): () => void {
-    this.listeners.push(listener)
-    return () => {
-      this.listeners = this.listeners.filter(x => x !== listener)
-    }
-  }
-
   notify(mutation?: Mutation<any, any, any, any>) {
     notifyManager.batch(() => {
       this.listeners.forEach(listener => {

src/core/mutationObserver.ts

@@ -1,6 +1,7 @@
 import { getDefaultState, Mutation } from './mutation'
 import { notifyManager } from './notifyManager'
 import type { QueryClient } from './queryClient'
+import { Subscribable } from './subscribable'
 import type {
   MutateOptions,
   MutationObserverResult,
@@ -21,6 +22,8 @@ export class MutationObserver<
   TError = unknown,
   TVariables = void,
   TContext = unknown
+> extends Subscribable<
+  MutationObserverListener<TData, TError, TVariables, TContext>
 > {
   options!: MutationObserverOptions<TData, TError, TVariables, TContext>
 
@@ -32,19 +35,14 @@ export class MutationObserver<
     TContext
   >
   private currentMutation?: Mutation<TData, TError, TVariables, TContext>
-  private listeners: MutationObserverListener<
-    TData,
-    TError,
-    TVariables,
-    TContext
-  >[]
 
   constructor(
     client: QueryClient,
     options: MutationObserverOptions<TData, TError, TVariables, TContext>
   ) {
+    super()
+
     this.client = client
-    this.listeners = []
     this.setOptions(options)
 
     // Bind exposed methods
@@ -61,20 +59,7 @@ export class MutationObserver<
     this.options = this.client.defaultMutationOptions(options)
   }
 
-  subscribe(
-    listener?: MutationObserverListener<TData, TError, TVariables, TContext>
-  ): () => void {
-    const callback = listener || (() => undefined)
-    this.listeners.push(callback)
-    return () => {
-      this.unsubscribe(callback)
-    }
-  }
-
-  private unsubscribe(
-    listener: MutationObserverListener<TData, TError, TVariables, TContext>
-  ): void {
-    this.listeners = this.listeners.filter(x => x !== listener)
+  protected onUnsubscribe(): void {
     if (!this.listeners.length) {
       this.currentMutation?.removeObserver(this)
     }

src/core/onlineManager.ts

@@ -1,25 +1,13 @@
+import { Subscribable } from './subscribable'
 import { isServer } from './utils'
 
-type OnlineListener = () => void
-
-class OnlineManager {
-  private listeners: OnlineListener[]
+class OnlineManager extends Subscribable {
   private removeHandler?: () => void
 
-  constructor() {
-    this.listeners = []
-  }
-
-  subscribe(listener: OnlineListener): () => void {
+  protected onSubscribe(): void {
     if (!this.removeHandler) {
       this.setDefaultHandler()
     }
-
-    this.listeners.push(listener)
-
-    return () => {
-      this.listeners = this.listeners.filter(x => x === listener)
-    }
   }
 
   setHandler(init: (onOnline: () => void) => () => void): void {

src/core/queriesObserver.ts

@@ -3,47 +3,39 @@ import { notifyManager } from './notifyManager'
 import type { QueryObserverOptions, QueryObserverResult } from './types'
 import type { QueryClient } from './queryClient'
 import { QueryObserver } from './queryObserver'
+import { Subscribable } from './subscribable'
 
 type QueriesObserverListener = (result: QueryObserverResult[]) => void
 
-export class QueriesObserver {
+export class QueriesObserver extends Subscribable<QueriesObserverListener> {
   private client: QueryClient
   private result: QueryObserverResult[]
   private queries: QueryObserverOptions[]
   private observers: QueryObserver[]
-  private listeners: QueriesObserverListener[]
 
   constructor(client: QueryClient, queries?: QueryObserverOptions[]) {
+    super()
+
     this.client = client
     this.queries = queries || []
     this.result = []
     this.observers = []
-    this.listeners = []
 
     // Subscribe to queries
     this.updateObservers()
   }
 
-  subscribe(listener?: QueriesObserverListener): () => void {
-    const callback = listener || (() => undefined)
-
-    this.listeners.push(callback)
-
+  protected onSubscribe(): void {
     if (this.listeners.length === 1) {
       this.observers.forEach(observer => {
         observer.subscribe(result => {
           this.onUpdate(observer, result)
         })
       })
     }
-
-    return () => {
-      this.unsubscribe(callback)
-    }
   }
 
-  private unsubscribe(listener: QueriesObserverListener): void {
-    this.listeners = this.listeners.filter(x => x !== listener)
+  protected onUnsubscribe(): void {
     if (!this.listeners.length) {
       this.destroy()
     }

src/core/queryCache.ts

@@ -8,6 +8,7 @@ import { Query, QueryState } from './query'
 import type { QueryKey, QueryOptions } from './types'
 import { notifyManager } from './notifyManager'
 import type { QueryClient } from './queryClient'
+import { Subscribable } from './subscribable'
 
 // TYPES
 
@@ -19,13 +20,13 @@ type QueryCacheListener = (query?: Query) => void
 
 // CLASS
 
-export class QueryCache {
-  private listeners: QueryCacheListener[]
+export class QueryCache extends Subscribable<QueryCacheListener> {
   private queries: Query<any, any>[]
   private queriesMap: QueryHashMap
 
   constructor() {
-    this.listeners = []
+    super()
+
     this.queries = []
     this.queriesMap = {}
   }
@@ -108,13 +109,6 @@ export class QueryCache {
       : this.queries
   }
 
-  subscribe(listener: QueryCacheListener): () => void {
-    this.listeners.push(listener)
-    return () => {
-      this.listeners = this.listeners.filter(x => x !== listener)
-    }
-  }
-
   notify(query?: Query<any, any>) {
     notifyManager.batch(() => {
       this.listeners.forEach(listener => {

src/core/queryObserver.ts

@@ -18,6 +18,7 @@ import type {
 import type { Query, QueryState, Action, FetchOptions } from './query'
 import type { QueryClient } from './queryClient'
 import { focusManager } from './focusManager'
+import { Subscribable } from './subscribable'
 
 type QueryObserverListener<TData, TError> = (
   result: QueryObserverResult<TData, TError>
@@ -39,15 +40,14 @@ export class QueryObserver<
   TError = unknown,
   TQueryFnData = TData,
   TQueryData = TQueryFnData
-> {
+> extends Subscribable<QueryObserverListener<TData, TError>> {
   options: QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>
 
   private client: QueryClient
   private currentQuery!: Query<TQueryData, TError, TQueryFnData>
   private currentResult!: QueryObserverResult<TData, TError>
   private currentResultState?: QueryState<TQueryData, TError>
   private previousQueryResult?: QueryObserverResult<TData, TError>
-  private listeners: QueryObserverListener<TData, TError>[]
   private initialDataUpdateCount: number
   private staleTimeoutId?: number
   private refetchIntervalId?: number
@@ -56,9 +56,10 @@ export class QueryObserver<
     client: QueryClient,
     options: QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>
   ) {
+    super()
+
     this.client = client
     this.options = options
-    this.listeners = []
     this.initialDataUpdateCount = 0
 
     // Bind exposed methods
@@ -76,11 +77,7 @@ export class QueryObserver<
     this.setOptions(options)
   }
 
-  subscribe(listener?: QueryObserverListener<TData, TError>): () => void {
-    const callback = listener || (() => undefined)
-
-    this.listeners.push(callback)
-
+  protected onSubscribe(): void {
     if (this.listeners.length === 1) {
       this.currentQuery.addObserver(this)
 
@@ -90,14 +87,9 @@ export class QueryObserver<
 
       this.updateTimers()
     }
-
-    return () => {
-      this.unsubscribe(callback)
-    }
   }
 
-  private unsubscribe(listener: QueryObserverListener<TData, TError>): void {
-    this.listeners = this.listeners.filter(x => x !== listener)
+  protected onUnsubscribe(): void {
     if (!this.listeners.length) {
       this.destroy()
     }

src/core/subscribable.ts

@@ -0,0 +1,30 @@
+type Listener = () => void
+
+export class Subscribable<TListener = Listener> {
+  protected listeners: TListener[]
+
+  constructor() {
+    this.listeners = []
+  }
+
+  subscribe(listener?: TListener): () => void {
+    const callback = listener || (() => undefined)
+
+    this.listeners.push(callback as TListener)
+
+    this.onSubscribe()
+
+    return () => {
+      this.listeners = this.listeners.filter(x => x !== callback)
+      this.onUnsubscribe()
+    }
+  }
+
+  protected onSubscribe(): void {
+    // Do nothing
+  }
+
+  protected onUnsubscribe(): void {
+    // Do nothing
+  }
+}