feat: expose unloading function and only auto-unload inside components (#67)

* Update useFind.ts

* improve loading / unloading of composition

* fix lint

* fix tests

* do not expose load function for now

* readd disableUnloadingEventHandlers option

* use unload instead of unmount for events

Co-authored-by: Lukas Hass <[email protected]>

Author: anbraten

src/useFind.ts

@@ -1,6 +1,6 @@
 import type { Application, FeathersService, Params, ServiceMethods } from '@feathersjs/feathers';
 import sift from 'sift';
-import { onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
+import { getCurrentInstance, onBeforeUnmount, Ref, ref, watch } from 'vue';
 
 import { getId, ServiceModel, ServiceTypes } from './utils';
 
@@ -69,6 +69,7 @@ function loadServiceEventHandlers<
 export type UseFind<T> = {
   data: Ref<T[]>;
   isLoading: Ref<boolean>;
+  unload: () => void;
 };
 
 // TODO: workaround, since extracting the type with ReturnType<T> does not work for generic functions. See https://stackoverflow.com/a/52964723
@@ -108,26 +109,21 @@ export default <CustomApplication extends Application>(feathers: CustomApplicati
       isLoading.value = false;
     };
 
-    watch(params, () => {
-      void find();
-    });
-
-    const connectListener = () => {
+    const load = () => {
       void find();
     };
 
-    feathers.on('connect', connectListener);
+    const unload = () => {
+      unloadEventHandlers();
+      feathers.off('connect', load);
+    };
 
-    onMounted(async () => {
-      await find();
-    });
+    watch(params, load, { immediate: true });
+    feathers.on('connect', load);
 
-    if (!disableUnloadingEventHandlers) {
-      onBeforeUnmount(() => {
-        unloadEventHandlers();
-        feathers.off('connect', connectListener);
-      });
+    if (disableUnloadingEventHandlers === false && getCurrentInstance()) {
+      onBeforeUnmount(unload);
     }
 
-    return { data, isLoading };
+    return { data, isLoading, unload };
   };

src/useGet.ts

@@ -1,5 +1,5 @@
 import type { Application, FeathersService, Id, Params, ServiceMethods } from '@feathersjs/feathers';
-import { onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
+import { getCurrentInstance, onBeforeUnmount, Ref, ref, watch } from 'vue';
 
 import { getId, ServiceModel, ServiceTypes } from './utils';
 
@@ -56,6 +56,7 @@ function loadServiceEventHandlers<
 export type UseGet<T> = {
   data: Ref<T | undefined>;
   isLoading: Ref<boolean>;
+  unload: () => void;
 };
 
 // TODO: workaround, since extracting the type with ReturnType<T> does not work for generic functions. See https://stackoverflow.com/a/52964723
@@ -94,26 +95,21 @@ export default <CustomApplication extends Application>(feathers: CustomApplicati
       isLoading.value = false;
     };
 
-    watch(_id, async () => {
-      await get();
-    });
-
-    const connectListener = () => {
+    const load = () => {
       void get();
     };
 
-    feathers.on('connect', connectListener);
+    const unload = () => {
+      unloadEventHandlers();
+      feathers.off('connect', load);
+    };
 
-    onMounted(async () => {
-      await get();
-    });
+    watch(_id, load, { immediate: true });
+    feathers.on('connect', load);
 
-    if (!disableUnloadingEventHandlers) {
-      onBeforeUnmount(() => {
-        unloadEventHandlers();
-        feathers.off('connect', connectListener);
-      });
+    if (disableUnloadingEventHandlers === false && getCurrentInstance()) {
+      onBeforeUnmount(unload);
     }
 
-    return { isLoading, data };
+    return { isLoading, data, unload };
   };

test/useFind.test.ts

@@ -606,7 +606,7 @@ describe('Find composition', () => {
       expect(findComposition && findComposition.data.value).not.toContainEqual(testModel);
     });
 
-    it('should unmount the event handlers', () => {
+    it('should unload the event handlers', () => {
       expect.assertions(7);
 
       // given
@@ -640,7 +640,7 @@ describe('Find composition', () => {
       expect(serviceOff).toHaveBeenCalledWith('removed', expect.anything());
     });
 
-    it('should not unmount the event handlers when desired', () => {
+    it('should not unload the event handlers when desired', () => {
       expect.assertions(3);
 
       // given
@@ -671,5 +671,32 @@ describe('Find composition', () => {
       expect(feathersOff).not.toHaveBeenCalled();
       expect(serviceOff).not.toHaveBeenCalled();
     });
+
+    it('should unload 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);
+      const findComposition = useFind('testModels', ref({ paginate: false, query: {} }));
+
+      // when
+      findComposition.unload();
+
+      // then
+      expect(findComposition).toBeTruthy();
+      expect(feathersOff).toHaveBeenCalledTimes(1);
+      expect(serviceOff).toHaveBeenCalledTimes(4); // unload of: created, updated, patched, removed events
+    });
   });
 });

test/useGet.test.ts

@@ -486,7 +486,7 @@ describe('Get composition', () => {
       expect(getComposition && getComposition.data.value).toStrictEqual(testModel);
     });
 
-    it('should unmount the event handlers', () => {
+    it('should unload the event handlers', () => {
       expect.assertions(7);
 
       // given
@@ -519,7 +519,8 @@ describe('Get composition', () => {
       expect(serviceOff).toHaveBeenCalledWith('patched', expect.anything());
       expect(serviceOff).toHaveBeenCalledWith('removed', expect.anything());
     });
-    it('should not unmount the event handlers when desired', () => {
+
+    it('should not unload the event handlers when desired', () => {
       expect.assertions(3);
 
       // given
@@ -548,5 +549,32 @@ describe('Get composition', () => {
       expect(feathersOff).not.toHaveBeenCalled();
       expect(serviceOff).not.toHaveBeenCalled();
     });
+
+    it('should unload 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);
+      const getComposition = useGet('testModels', ref(testModel._id), ref());
+
+      // when
+      getComposition.unload();
+
+      // then
+      expect(getComposition).toBeTruthy();
+      expect(feathersOff).toHaveBeenCalledTimes(1);
+      expect(serviceOff).toHaveBeenCalledTimes(4); // unload of: created, updated, patched, removed events
+    });
   });
 });