[HMR API] add the ability to remove listeners added using import.meta.hot.on()

[Tofandel]

Description

While the ability to add events to communicate with the vite websocket is great, it would be even greater if we could also remove the events we added using import.meta.hot.on('event', () => {})

Suggested solution

Add an off and maybe a once method, or return a callback from on that can be called to remove the listener

Alternative

There is no alternative, right now once an event is added it can never be removed

Code reference

vite/packages/vite/src/client/client.ts

Lines 598 to 606 in 220a413

	on(event, cb) {
	const addToMap = (map: Map<string, any[]>) => {
	const existing = map.get(event) || []
	existing.push(cb)
	map.set(event, existing)
	}
	addToMap(customListenersMap)
	addToMap(newListeners)
	},

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[bluwy]

I think this is a nice idea. Can you further explain your usecase for this feature?

[Tofandel]

It's mostly for advanced use case with vite, where you create a plugin to communicate with the websocket

Because those events can basically be used to request something from vite, you'll send an event with send and wait for the answer with .on but you don't need to keep listening once you received your result so you need to be able to remove the listener or you end up with memory leaks

[bluwy]

Alright 👍 So sounds like the main use-case is to listen to something once. I guess you could used a temporary variable to block it so the listener only runs once. FYI import.meta.env.on has self cleanups so there shouldn't be memory leaks:

vite/packages/vite/src/client/client.ts

Lines 521 to 533 in c58fc41

	// clear stale custom event listeners
	const staleListeners = ctxToListenersMap.get(ownerPath)
	if (staleListeners) {
	for (const [event, staleFns] of staleListeners) {
	const listeners = customListenersMap.get(event)
	if (listeners) {
	customListenersMap.set(
	event,
	listeners.filter((l) => !staleFns.includes(l)),
	)
	}
	}
	}