From 03d2d8c2c6580046bcbcf2c55daf256c214b9b75 Mon Sep 17 00:00:00 2001
From: Rene Haas <king-sora@hotmail.de>
Date: Tue, 8 Nov 2022 00:14:36 +0100
Subject: [PATCH] add prefix to emits to prevent collisions

---
 .../src/OverlayScrollbarsComponent.vue        | 45 +++++++++++--------
 .../test/OverlayScrollbarsComponent.test.tsx  | 26 +++++++----
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue b/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
index 12c9415..dbcc760 100644
--- a/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
+++ b/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
@@ -8,7 +8,17 @@ import type {
 import type { PropType } from 'vue';
 import type { EventListeners, EventListenerMap } from 'overlayscrollbars';
 
-const emitNames: (keyof EventListenerMap)[] = ['initialized', 'updated', 'destroyed', 'scroll'];
+type EmitName<N extends keyof EventListenerMap = keyof EventListenerMap> = `os${Capitalize<N>}`;
+type EmitEventsMap = {
+  [N in keyof EventListenerMap]: EmitName<N>;
+};
+
+const emitEvents: EmitEventsMap = {
+  initialized: 'osInitialized',
+  updated: 'osUpdated',
+  destroyed: 'osDestroyed',
+  scroll: 'osScroll',
+};
 const props = defineProps({
   element: {
     type: String as PropType<OverlayScrollbarsComponentProps['element']>,
@@ -18,11 +28,11 @@ const props = defineProps({
   events: { type: Object as PropType<OverlayScrollbarsComponentProps['events']> },
 });
 const emits = defineEmits({
-  initialized: (...args: EventListenerMap['initialized']) => true,
-  updated: (...args: EventListenerMap['updated']) => true,
-  destroyed: (...args: EventListenerMap['destroyed']) => true,
-  scroll: (...args: EventListenerMap['scroll']) => true,
-} as Record<keyof EventListenerMap, any>);
+  osInitialized: (...args: EventListenerMap['initialized']) => true,
+  osUpdated: (...args: EventListenerMap['updated']) => true,
+  osDestroyed: (...args: EventListenerMap['destroyed']) => true,
+  osScroll: (...args: EventListenerMap['scroll']) => true,
+} as Record<EmitName, any>);
 
 const elementRef = shallowRef<HTMLElement | null>(null);
 const slotRef = shallowRef<HTMLElement | null>(null);
@@ -58,18 +68,17 @@ watch(
   () => unref(events),
   (rawCurrEvents) => {
     const currEvents = rawCurrEvents || {};
-    combinedEvents.value = emitNames.reduce<EventListeners>(
-      <N extends keyof EventListeners>(obj: EventListeners, name: N) => {
-        const eventListener = currEvents[name];
-        obj[name] = [
-          // @ts-ignore
-          (...args: EventListenerMap[N]) => emits(name, ...args),
-          ...(Array.isArray(eventListener) ? eventListener : [eventListener]).filter(Boolean),
-        ];
-        return obj;
-      },
-      {}
-    );
+    combinedEvents.value = (
+      Object.keys(emitEvents) as (keyof EventListeners)[]
+    ).reduce<EventListeners>(<N extends keyof EventListeners>(obj: EventListeners, name: N) => {
+      const eventListener = currEvents[name];
+      obj[name] = [
+        // @ts-ignore
+        (...args: EventListenerMap[N]) => emits(emitEvents[name], ...args),
+        ...(Array.isArray(eventListener) ? eventListener : [eventListener]).filter(Boolean),
+      ];
+      return obj;
+    }, {});
   },
   { deep: true, immediate: true }
 );
diff --git a/packages/overlayscrollbars-vue/test/OverlayScrollbarsComponent.test.tsx b/packages/overlayscrollbars-vue/test/OverlayScrollbarsComponent.test.tsx
index 2d69d1d..48c5ead 100644
--- a/packages/overlayscrollbars-vue/test/OverlayScrollbarsComponent.test.tsx
+++ b/packages/overlayscrollbars-vue/test/OverlayScrollbarsComponent.test.tsx
@@ -229,7 +229,7 @@ describe('OverlayScrollbarsComponent', () => {
     expect(onUpdatedInitial).toHaveBeenCalledTimes(2);
     expect(onUpdated).toHaveBeenCalledTimes(2);
 
-    // unregister works with `[]`, `null` or `undefined`
+    // unregister with `[]`, `null` or `undefined`
     await rerender({ events: { updated: null } });
 
     instance.update(true);
@@ -280,12 +280,12 @@ describe('OverlayScrollbarsComponent', () => {
   });
 
   test('emits', async () => {
-    const { emitted, unmount, container } = render(OverlayScrollbarsComponent);
+    const { emitted, rerender, unmount, container } = render(OverlayScrollbarsComponent);
 
-    expect(emitted('initialized')).toEqual([[expect.any(Object)]]);
-    expect(emitted('updated')).toEqual([[expect.any(Object), expect.any(Object)]]);
-    expect(emitted('scroll')).toBeUndefined();
-    expect(emitted('destroyed')).toBeUndefined();
+    expect(emitted('osInitialized')).toEqual([[expect.any(Object)]]);
+    expect(emitted('osUpdated')).toEqual([[expect.any(Object), expect.any(Object)]]);
+    expect(emitted('osDestroyed')).toBeUndefined();
+    expect(emitted('osScroll')).toBeUndefined();
 
     container.querySelectorAll('*').forEach((e) => {
       fireEvent.scroll(e);
@@ -293,11 +293,19 @@ describe('OverlayScrollbarsComponent', () => {
 
     await Promise.resolve();
 
-    expect(emitted('scroll')).toEqual([[expect.any(Object), expect.any(UIEvent)]]);
-    expect(emitted('destroyed')).toBeUndefined();
+    expect(emitted('osDestroyed')).toBeUndefined();
+    expect(emitted('osScroll')).toEqual([[expect.any(Object), expect.any(Event)]]);
+
+    const initializedCount = emitted('osInitialized').length;
+    const updatedCount = emitted('osUpdated').length;
+
+    await rerender({ element: 'span' });
+
+    expect(emitted('osInitialized').length).toBe(initializedCount + 1);
+    expect(emitted('osUpdated').length).toBe(updatedCount + 1);
 
     unmount();
 
-    expect(emitted('destroyed')).toEqual([[expect.any(Object), false]]);
+    expect(emitted('osDestroyed')).toEqual([[expect.any(Object), false]]);
   });
 });