Add the possibility to disable unloading of event handlers onUnmount (#7)

Adds parameter object with property `disableUnloadingEventHandlers` to `useFind` to disable automatic unloading of feathers service event listeners on component unmount.

This makes it possible to change the component and keep the event listeners attached and therefore enable the use of singleton patterns to load data.

Co-authored-by: Anbraten <[email protected]>

Author: raphaelschwinger

src/useFind.ts

@@ -8,10 +8,10 @@ function loadServiceEventHandlers<
   CustomApplication extends Application,
   T extends keyof ServiceTypes<CustomApplication>,
   M,
->(
-  service: FeathersService<CustomApplication, ServiceTypes<CustomApplication>[T]>,
-  params: Ref<Params>,
-  data: Ref<M[]>,
+  >(
+    service: FeathersService<CustomApplication, ServiceTypes<CustomApplication>[T]>,
+    params: Ref<Params>,
+    data: Ref<M[]>,
 ): () => void {
   const onCreated = (item: M): void => {
     // ignore items which are not matching the query
@@ -67,7 +67,7 @@ export type UseFind<T> = {
 export type UseFindFunc<CustomApplication> = <
   T extends keyof ServiceTypes<CustomApplication>,
   M = ServiceModel<CustomApplication, T>,
->(
+  >(
   serviceName: T,
   params?: Ref<Params>,
 ) => UseFind<M>;
@@ -76,6 +76,7 @@ export default <CustomApplication extends Application>(feathers: CustomApplicati
   <T extends keyof ServiceTypes<CustomApplication>, M = ServiceModel<CustomApplication, T>>(
     serviceName: T,
     params: Ref<Params> = ref({ paginate: false, query: {} }),
+    { disableUnloadingEventHandlers } = { disableUnloadingEventHandlers: false },
   ): UseFind<M> => {
     // type cast is fine here (source: https://github.com/vuejs/vue-next/issues/2136#issuecomment-693524663)
     const data = ref<M[]>([]) as Ref<M[]>;
@@ -110,10 +111,12 @@ export default <CustomApplication extends Application>(feathers: CustomApplicati
       await find();
     });
 
-    onBeforeUnmount(() => {
-      unloadEventHandlers();
-      feathers.off('connect', connectListener);
-    });
+    if (!disableUnloadingEventHandlers) {
+      onBeforeUnmount(() => {
+        unloadEventHandlers();
+        feathers.off('connect', connectListener);
+      });
+    }
 
     return { data, isLoading };
   };

src/useGet.ts

@@ -7,10 +7,10 @@ function loadServiceEventHandlers<
   CustomApplication extends Application,
   T extends keyof ServiceTypes<CustomApplication>,
   M,
->(
-  service: FeathersService<CustomApplication, ServiceTypes<CustomApplication>[T]>,
-  _id: Ref<Id | undefined>,
-  data: Ref<M | undefined>,
+  >(
+    service: FeathersService<CustomApplication, ServiceTypes<CustomApplication>[T]>,
+    _id: Ref<Id | undefined>,
+    data: Ref<M | undefined>,
 ): () => void {
   const onCreated = (item: M): void => {
     if (_id.value === getId(item)) {
@@ -54,7 +54,7 @@ export type UseGet<T> = {
 export type UseGetFunc<CustomApplication> = <
   T extends keyof ServiceTypes<CustomApplication>,
   M = ServiceModel<CustomApplication, T>,
->(
+  >(
   serviceName: T,
   _id: Ref<Id | undefined>,
 ) => UseGet<M>;
@@ -63,6 +63,7 @@ export default <CustomApplication extends Application>(feathers: CustomApplicati
   <T extends keyof ServiceTypes<CustomApplication>, M = ServiceModel<CustomApplication, T>>(
     serviceName: T,
     _id: Ref<Id | undefined>,
+    { disableUnloadingEventHandlers } = { disableUnloadingEventHandlers: false },
   ): UseGet<M> => {
     const data = ref<M>();
     const isLoading = ref(false);
@@ -97,10 +98,12 @@ export default <CustomApplication extends Application>(feathers: CustomApplicati
       await get();
     });
 
-    onBeforeUnmount(() => {
-      unloadEventHandlers();
-      feathers.off('connect', connectListener);
-    });
+    if (!disableUnloadingEventHandlers) {
+      onBeforeUnmount(() => {
+        unloadEventHandlers();
+        feathers.off('connect', connectListener);
+      });
+    }
 
     return { isLoading, data };
   };

test/useFind.test.ts

@@ -466,5 +466,37 @@ describe('Find composition', () => {
       expect(serviceOff).toHaveBeenCalledWith('patched', expect.anything());
       expect(serviceOff).toHaveBeenCalledWith('removed', expect.anything());
     });
+
+    it('should not unmount the event handlers when desired', () => {
+      expect.assertions(3);
+
+      // given
+      const serviceOff = jest.fn();
+      const feathersOff = jest.fn();
+      const feathersMock = {
+        service: () => ({
+          find: jest.fn(),
+          on: jest.fn(),
+          off: serviceOff,
+        }),
+        on: jest.fn(),
+        off: feathersOff,
+      } as unknown as Application;
+      const useFind = useFindOriginal(feathersMock);
+      let findComposition = null as UseFind<TestModel> | null;
+      const wrapper = mountComposition(() => {
+        findComposition = useFind('testModels', ref({ paginate: false, query: {} }), {
+          disableUnloadingEventHandlers: true,
+        });
+      });
+
+      // when
+      wrapper.unmount();
+
+      // then
+      expect(findComposition).toBeTruthy();
+      expect(feathersOff).not.toHaveBeenCalled();
+      expect(serviceOff).not.toHaveBeenCalled();
+    });
   });
 });

test/useGet.test.ts

@@ -518,5 +518,34 @@ describe('Get composition', () => {
       expect(serviceOff).toHaveBeenCalledWith('patched', expect.anything());
       expect(serviceOff).toHaveBeenCalledWith('removed', expect.anything());
     });
+    it('should not unmount the event handlers when desired', () => {
+      expect.assertions(3);
+
+      // given
+      const serviceOff = jest.fn();
+      const feathersOff = jest.fn();
+      const feathersMock = {
+        service: () => ({
+          get: jest.fn(),
+          on: jest.fn(),
+          off: serviceOff,
+        }),
+        on: jest.fn(),
+        off: feathersOff,
+      } as unknown as Application;
+      const useGet = useGetOriginal(feathersMock);
+      let getComposition = null as UseGet<TestModel> | null;
+      const wrapper = mountComposition(() => {
+        getComposition = useGet('testModels', ref(testModel._id), { disableUnloadingEventHandlers: true });
+      });
+
+      // when
+      wrapper.unmount();
+
+      // then
+      expect(getComposition).toBeTruthy();
+      expect(feathersOff).not.toHaveBeenCalled();
+      expect(serviceOff).not.toHaveBeenCalled();
+    });
   });
 });