feat: add maxWait for debounce

- add throttle functionality for intense applications
- eg. a chat, where much messages will be created
- not relevant for most applications

Author: fratzinger

src/service-module/make-service-plugin.ts

@@ -6,7 +6,7 @@ eslint
 import { FeathersVuexOptions, MakeServicePluginOptions } from './types'
 import makeServiceModule from './make-service-module'
 import { globalModels, prepareAddModel } from './global-models'
-import { enableServiceEvents } from './service-module.events'
+import enableServiceEvents from './service-module.events'
 import { makeNamespace, getServicePath, assignIfNotPresent } from '../utils'
 import _get from 'lodash/get'
 
@@ -19,6 +19,7 @@ interface ServiceOptionsDefaults {
   actions: {}
   instanceDefaults: () => {}
   setupInstance: (instance: {}) => {}
+  debounceEventsMaxWait: number
 }
 
 const defaults: ServiceOptionsDefaults = {
@@ -29,7 +30,8 @@ const defaults: ServiceOptionsDefaults = {
   mutations: {}, // for custom mutations
   actions: {}, // for custom actions
   instanceDefaults: () => ({}), // Default instanceDefaults returns an empty object
-  setupInstance: instance => instance // Default setupInstance returns the instance
+  setupInstance: instance => instance, // Default setupInstance returns the instance
+  debounceEventsMaxWait: 1000
 }
 const events = ['created', 'patched', 'updated', 'removed']
 

src/service-module/service-module.events.ts

@@ -2,41 +2,63 @@ import { getId } from '../utils'
 import _debounce from 'lodash/debounce'
 import { globalModels } from './global-models'
 
-export function enableServiceEvents({ service, Model, store, options }): void {
-  const debounceMap = {
+export interface ServiceEventsDebouncedQueue {
+  addOrUpdateById: {}
+  removeItemById: {}
+  enqueueAddOrUpdate(item: any): void
+  enqueueRemoval(item: any): void
+  flushAddOrUpdateQueue(): void
+  flushRemoveItemQueue(): void
+}
+
+export default function enableServiceEvents({
+  service,
+  Model,
+  store,
+  options
+}): ServiceEventsDebouncedQueue {
+  const debouncedQueue: ServiceEventsDebouncedQueue = {
     addOrUpdateById: {},
     removeItemById: {},
-    queueAddOrUpdate(item): void {
+    enqueueAddOrUpdate(item): void {
       const id = getId(item, options.idField)
       this.addOrUpdateById[id] = item
       if (this.removeItemById.hasOwnProperty(id)) {
         delete this.removeItemById[id]
       }
       this.flushAddOrUpdateQueue()
     },
-    queueRemoval(item): void {
+    enqueueRemoval(item): void {
       const id = getId(item, options.idField)
       this.removeItemById[id] = item
       if (this.addOrUpdateById.hasOwnProperty(id)) {
         delete this.addOrUpdateById[id]
       }
       this.flushRemoveItemQueue()
     },
-    flushAddOrUpdateQueue: _debounce(async function () {
-      const values = Object.values(this.addOrUpdateById)
-      if (values.length === 0) return
-      await store.dispatch(`${options.namespace}/addOrUpdateList`, {
-        data: values,
-        disableRemove: true
-      })
-      this.addOrUpdateById = {}
-    }, options.debounceEventsTime || 20),
-    flushRemoveItemQueue: _debounce(function () {
-      const values = Object.values(this.removeItemById)
-      if (values.length === 0) return
-      store.commit(`${options.namespace}/removeItems`, values)
-      this.removeItemById = {}
-    }, options.debounceEventsTime || 20)
+    flushAddOrUpdateQueue: _debounce(
+      async function () {
+        const values = Object.values(this.addOrUpdateById)
+        if (values.length === 0) return
+        await store.dispatch(`${options.namespace}/addOrUpdateList`, {
+          data: values,
+          disableRemove: true
+        })
+        this.addOrUpdateById = {}
+      },
+      options.debounceEventsTime || 20,
+      { maxWait: options.debounceEventsMaxWait }
+    ),
+    flushRemoveItemQueue: _debounce(
+      function () {
+        const values = Object.values(this.removeItemById)
+        if (values.length === 0) return
+        store.commit(`${options.namespace}/removeItems`, values)
+        this.removeItemById = {}
+      },
+      options.debounceEventsTime || 20,
+      { maxWait: options.debounceEventsMaxWait }
+    )
   }
 
   const handleEvent = (eventName, item, mutationName): void => {
@@ -55,8 +77,8 @@ export function enableServiceEvents({ service, Model, store, options }): void {
           : store.dispatch(`${options.namespace}/${mutationName}`, modified)
       } else {
         eventName === 'removed'
-          ? debounceMap.queueRemoval(item)
-          : debounceMap.queueAddOrUpdate(item)
+          ? debouncedQueue.enqueueRemoval(item)
+          : debouncedQueue.enqueueAddOrUpdate(item)
       }
     }
   }
@@ -78,4 +100,6 @@ export function enableServiceEvents({ service, Model, store, options }): void {
     handleEvent('removed', item, 'removeItem')
     Model.emit && Model.emit('removed', item)
   })
+
+  return debouncedQueue
 }

src/service-module/service-module.state.ts

@@ -79,6 +79,7 @@ export interface ServiceState<M extends Model = Model> {
   }
   modelName?: string
   debounceEventsTime: number
+  debounceEventsMaxWait: number
 }
 
 export interface PaginationState {

src/service-module/types.ts

@@ -21,6 +21,7 @@ export interface FeathersVuexOptions {
   tempIdField?: string
   keepCopiesInStore?: boolean
   debounceEventsTime?: number
+  debounceEventsMaxWait?: number
   nameStyle?: string
   paramsForServer?: string[]
   preferUpdate?: boolean
@@ -52,6 +53,7 @@ export interface MakeServicePluginOptions {
   skipRequestIfExists?: boolean
   nameStyle?: string
   debounceEventsTime?: number
+  debounceEventsMaxWait?: number
 
   servicePath?: string
   namespace?: string