Create proper DOM events from string (completed 💚)

[fregante]

When creating events, you should use the right constructor. For example new MouseEvent('click') instead of a plain new Event('click').

As far as I know there's no way to this automatically so there could be DOM event creator that includes such map.

import createEvent from '✨';

document.body.dispatchEvent(createEvent('keydown', {key: 'a'}))

This particularly useful when your app can trigger a variety of events and you can't be bothered to match them manually 😃

import createEvent from '✨';

const eventsToDispatch = ['mousedown', 'pointerdown', 'click', 'mouseup', 'pointerup']
for (const eventName of eventsToDispatch)
	document.body.dispatchEvent(createEvent(eventName))

[Richienb]

I was able to compile a list of dom events but I ran into a bit of trouble when writing the TypeScript definition since the event name needs to be detected to determine the return value.

[fregante]

It's not super easy, but you can use generics to maintain the mapping. Something like:

const events = {
	click: MouseEvent
} as const;
type Events = typeof events;
function createEvent<Name extends keyof Events >(name: Name): Events[Name] {
//
}

What's missing from here:

• allowing unknown events
• mapping unknown events to CustomEvent

[eavichay]

Object.keys(HTMLElement.prototype).filter(key => key.startsWith('on')).map(ev => ev.slice(2));

[fregante]

Object.keys(HTMLElement.prototype).filter(key => key.startsWith('on')).map(ev => ev.slice(2));

That only builds the eventsToDispatch array from my example, it doesn't link that to MouseEvent and such

[fregante]

It's finally out: https://github.com/fregante/proper-event

Suggestion welcome.