Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for generic Event utility types #175

Open
mindplay-dk opened this issue Nov 3, 2021 · 0 comments
Open

Add support for generic Event utility types #175

mindplay-dk opened this issue Nov 3, 2021 · 0 comments

Comments

@mindplay-dk
Copy link

Is your feature request related to a real problem or use-case?

Yes, anything involving custom functions calling e.g. addEventListener on DOM elements.

Describe a solution including usage in code example

I found my solution here - and here's a real world example:

    type EventMap<T extends EventTarget> = T extends MediaQueryList
      ? MediaQueryListEventMap
      : T extends Document
      ? DocumentEventMap
      : T extends Window
      ? WindowEventMap
      : HTMLElementEventMap;
      
    type EventTypes<T extends EventTarget> = keyof EventMap<T> & string;

    async function firstEvent<T extends EventTarget>(source: T, types: Array<EventTypes<T>>): Promise<Event> {
      return new Promise(resolve => {
        function onEvent(event: Event) {
          for (const type of types) {
            source.removeEventListener(type, onEvent);
          }

          resolve(event);
        }

        for (const type of types) {
          source.addEventListener(type, onEvent);
        }
      });
    }

This utility function returns a Promise containing the first of a list of possible events - whatever the event target emits first. This is useful to avoid polling, to see if a media (or script other other types of) element successfully loads, so for example:

(async () => {
  const media = document.querySelector("video#my-video");

  media.load();

  const event = await firstEvent(media, ["loadedmetadata", "abort", "error"]);

  // if (event.type === "error") { ... } etc.
})();

Who does this impact? Who is this for?

Anyone working with DOM events.

Describe alternatives you've considered (optional)

The example above is my workaround.

I understand if this is more DOM specific than typing-specific, and therefore might be out of scope for this library - I looked around for other type-only libraries, perhaps with a DOM focus, but didn't find any. I don't know where else to look though. Personally, this library is my go-to for all things types. (and if there was an easier/simpler way to derive the DOM event types using some of the utility-types in this library, that might alleviate some pain as well...)

Additional context (optional)

Open feature request in microsoft/Typescript repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant