Small Vue3 helper for communicating and debugging webviews. Also removes events when unmounted.

altvHelper.ts

import { onUnmounted } from 'vue';

const insideAltV = 'alt' in window;

export function useAltV(removeEventsOnUnmount: boolean = true) {
	const eventHandlers: { [eventName: string]: Array<(...args: any[]) => Promise<void> | void> } = {};

	const instance = {
		insideAltV,
		on: (eventName: string, listener: (...args: any[]) => void): void => {
			if (!insideAltV) {
				console.log(`[alt:V] Adding Event Listener for event '${eventName}'`);
				return;
			}

			alt.on(eventName, listener);

			if (!eventHandlers[eventName]) eventHandlers[eventName] = [];
			eventHandlers[eventName].push(listener);
		},

		off: (eventName: string, listener: (...args: any[]) => void): void => {
			if (!insideAltV) {
				console.log(`[alt:V] Removing Event Listener for event '${eventName}'`);
				return;
			}

			alt.off(eventName, listener);

			if (eventHandlers[eventName]) {
				const index = eventHandlers[eventName].findIndex(listener);
				if (index > -1) eventHandlers[eventName].splice(index, 1);
				if (!eventHandlers[eventName].length) delete eventHandlers[eventName];
			}
		},

		emit: (eventName: string, ...args: any[]): void => {
			if (!insideAltV) {
				console.log(`[alt:V] Emitting event '${eventName}' with args: ${args}`);
				return;
			}

			alt.emit(eventName, ...args);
		},
	};

	if (removeEventsOnUnmount && insideAltV) {
		onUnmounted(() => {
			for (const eventName in eventHandlers) {
				for (const listener of eventHandlers[eventName]) {
					alt.off(eventName, listener);
				}

				delete eventHandlers[eventName];
			}
		});
	}

	return instance;
}