refactor: Combine event-bus and typed-event-bus

n8n-io · Aug 12, 2024 · d59b08d · d59b08d
1 parent f7bb739
commit d59b08d
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 58 deletions.
diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.vue b/packages/design-system/src/components/N8nFormBox/FormBox.vue
@@ -44,7 +44,7 @@ import N8nHeading from '../N8nHeading';
 import N8nLink from '../N8nLink';
 import N8nButton from '../N8nButton';
 import type { IFormInput } from 'n8n-design-system/types';
-import { createEventBus } from '../../utils';
+import { createFormEventBus } from '../../utils';
 
 interface FormBoxProps {
 	title?: string;
@@ -67,7 +67,7 @@ withDefaults(defineProps<FormBoxProps>(), {
 	redirectLink: '',
 });
 
-const formBus = createEventBus();
+const formBus = createFormEventBus();
 const emit = defineEmits<{
 	submit: [value: { [key: string]: Value }];
 	update: [value: { name: string; value: Value }];

diff --git a/packages/design-system/src/utils/event-bus.ts b/packages/design-system/src/utils/event-bus.ts
@@ -2,17 +2,51 @@
 export type CallbackFn = Function;
 export type UnregisterFn = () => void;
 
-export interface EventBus {
-	on: (eventName: string, fn: CallbackFn) => UnregisterFn;
-	once: (eventName: string, fn: CallbackFn) => UnregisterFn;
-	off: (eventName: string, fn: CallbackFn) => void;
-	emit: <T = Event>(eventName: string, event?: T) => void;
+export type Listener<Payload> = (payload: Payload) => void;
+
+export type Payloads<ListenerMap> = {
+	[E in keyof ListenerMap]: unknown;
+};
+
+// TODO: Fix all usages of `createEventBus` and convert `any` to `unknown`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface EventBus<ListenerMap extends Payloads<ListenerMap> = Record<string, any>> {
+	on: <EventName extends keyof ListenerMap & string>(
+		eventName: EventName,
+		fn: Listener<ListenerMap[EventName]>,
+	) => UnregisterFn;
+
+	once: <EventName extends keyof ListenerMap & string>(
+		eventName: EventName,
+		fn: Listener<ListenerMap[EventName]>,
+	) => UnregisterFn;
+
+	off: <EventName extends keyof ListenerMap & string>(
+		eventName: EventName,
+		fn: Listener<ListenerMap[EventName]>,
+	) => void;
+
+	emit: <EventName extends keyof ListenerMap & string>(
+		eventName: EventName,
+		event?: ListenerMap[EventName],
+	) => void;
 }
 
 /**
- * @deprecated Use the typed version instead from `typed-event-bus.ts`
+ * Creates an event bus with the given listener map.
+ *
+ * @example
+ * ```ts
+ * const eventBus = createEventBus<{
+ *   'user-logged-in': { username: string };
+ *   'user-logged-out': never;
+ * }>();
  */
-export function createEventBus(): EventBus {
+export function createEventBus<
+	// TODO: Fix all usages of `createEventBus` and convert `any` to `unknown`
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	ListenerMap extends Payloads<ListenerMap> = Record<string, any>,
+>(): EventBus<ListenerMap> {
 	const handlers = new Map<string, CallbackFn[]>();
 
 	function off(eventName: string, fn: CallbackFn) {

diff --git a/packages/design-system/src/utils/form-event-bus.ts b/packages/design-system/src/utils/form-event-bus.ts
@@ -1,4 +1,4 @@
-import { createTypedEventBus } from './typed-event-bus';
+import { createEventBus } from './event-bus';
 
 export interface FormEventBusEvents {
 	submit: never;
@@ -9,6 +9,4 @@ export type FormEventBus = ReturnType<typeof createFormEventBus>;
 /**
  * Creates a new event bus to be used with the `FormInputs` component.
  */
-export function createFormEventBus() {
-	return createTypedEventBus<FormEventBusEvents>();
-}
+export const createFormEventBus = createEventBus<FormEventBusEvents>;
diff --git a/packages/design-system/src/utils/index.ts b/packages/design-system/src/utils/index.ts
@@ -1,5 +1,4 @@
 export * from './event-bus';
-export * from './typed-event-bus';
 export * from './form-event-bus';
 export * from './markdown';
 export * from './typeguards';

diff --git a/packages/design-system/src/utils/typed-event-bus.ts b/packages/design-system/src/utils/typed-event-bus.ts
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
@@ -1,7 +1,7 @@
 <template>
 	<el-dialog
 		:model-value="uiStore.modalsById[name].open"
-		:before-close="() => closeDialog()"
+		:before-close="onCloseDialog"
 		:class="{
 			'dialog-wrapper': true,
 			scrollable: scrollable,
@@ -34,7 +34,7 @@
 			class="modal-content"
 			@keydown.stop
 			@keydown.enter="handleEnter"
-			@keydown.esc="() => closeDialog()"
+			@keydown.esc="onCloseDialog"
 		>
 			<slot v-if="!loading" name="content" />
 			<div v-else :class="$style.loader">
@@ -182,6 +182,9 @@ export default defineComponent({
 				this.$emit('enter');
 			}
 		},
+		async onCloseDialog() {
+			await this.closeDialog();
+		},
 		async closeDialog(returnData?: unknown) {
 			if (this.beforeClose) {
 				const shouldClose = await this.beforeClose();

diff --git a/packages/editor-ui/src/event-bus/mfa.ts b/packages/editor-ui/src/event-bus/mfa.ts
@@ -1,9 +1,6 @@
-import {
-	createEventBus as createUntypedEventBus,
-	createTypedEventBus,
-} from 'n8n-design-system/utils';
+import { createEventBus } from 'n8n-design-system/utils';
 
-export const mfaEventBus = createUntypedEventBus();
+export const mfaEventBus = createEventBus();
 
 export interface MfaModalClosedEventPayload {
 	mfaCode: string;
@@ -18,4 +15,4 @@ export interface MfaModalEvents {
 /**
  * Event bus for transmitting the MFA code from a modal back to the view
  */
-export const promptMfaCodeBus = createTypedEventBus<MfaModalEvents>();
+export const promptMfaCodeBus = createEventBus<MfaModalEvents>();