feat: Support matchMedia in DomWatcher

MediaQueryList instances can now be watched
for changes using DomWatcher.

package.json

@@ -40,13 +40,15 @@
     ],
     "exclude": [
       "_ava",
+      "_typedoc_theme",
       "**/*.d.ts",
       "docs/",
       "examples/",
       "coverage/",
       "lib/",
       "webpack/",
-      "src/playground"
+      "src/playground",
+      "server.js"
     ],
     "reporter": [
       "html",

src/dom/dom-watcher.ts

@@ -1,5 +1,13 @@
 import * as bom from '../dom/bom';
 
+type MediaQueryListListener = (
+  this: MediaQueryList,
+  ev: MediaQueryListEventMap[keyof MediaQueryListEventMap]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => any;
+type ResizeObserverListener = (a: ResizeObserverEntry[]) => void;
+type MutationObserverListener = (a: MutationRecord[]) => void;
+
 export interface DomWatcherConfig {
   // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
   // The default event listerner options including passive, once etc.
@@ -8,7 +16,7 @@ export interface DomWatcherConfig {
   /**
    * The element to Watch
    */
-  element: HTMLElement | Window | Document;
+  element: HTMLElement | Window | Document | MediaQueryList;
 
   /**
    * The name of the event to watch.
@@ -230,6 +238,42 @@ export interface DomWatcherConfig {
  *
  * ```
  *
+ * #### MatchMedia
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+ * DomWatcher supports MediaQueryLists that result from calls to matchMedia.
+ * That way DomWatcher can be configured to watch for changes across any/all
+ * breakpoints a site is designed around.
+ *
+ * ```ts
+ * const mediaQueries = new Map([
+ *   [
+ *     'desktop',
+ *     window.matchMedia('(min-width: 1440px)')],
+ *   [
+ *     'laptop',
+ *     window.matchMedia('(min-width: 1024px) and (max-width: 1439px)')],
+ *   [
+ *     'tablet',
+ *     window.matchMedia('(min-width: 600px) and (max-width: 1023px)')],
+ *   [
+ *     'mobile',
+ *     window.matchMedia('(max-width: 599px)')],
+ * ]);
+ * const watchBreakpoints = () => {
+ *     Array.from(mediaQueries.entries())
+ *       .forEach(([breakpoint, mediaQuery]) => {
+ *         watcher.add({
+ *           element: mediaQuery,
+ *           on: 'change',
+ *           callback: (e) => {
+ *              if (e.matches) {
+ *                // Handle the breakpoint
+ *              }
+ *           },
+ *         });
+ *       });
+ * }
+ * ```
  *
  */
 export class DomWatcher {
@@ -285,23 +329,39 @@ export class DomWatcher {
     // Use the resizeObserver if we want to listen to resizing of DOM elements.
     else if (config.on === 'resize' && config.element !== window) {
       const resizeObserver = new ResizeObserver(entries => {
-        listener(entries);
+        (<ResizeObserverListener>listener)(entries);
       });
       resizeObserver.observe(config.element as HTMLElement);
       config.remover = () => {
         resizeObserver.unobserve(config.element as HTMLElement);
       };
     } else if (config.on === 'mutation') {
       const mutationObserver = new MutationObserver(mutationsList => {
-        listener(mutationsList);
+        (<MutationObserverListener>listener)(mutationsList);
       });
       mutationObserver.observe(
         config.element as HTMLElement,
-        config.eventOptions
+        <MutationObserverInit | undefined>config.eventOptions
       );
       config.remover = () => {
         mutationObserver.disconnect();
       };
+    } else if (config.element instanceof MediaQueryList) {
+      // Add listening.
+      config.element.addEventListener(
+        config.on as keyof MediaQueryListEventMap,
+        <MediaQueryListListener>listener,
+        <boolean | AddEventListenerOptions>config.eventOptions || {}
+      );
+
+      // Generate the remover.
+      config.remover = () => {
+        config.element.removeEventListener(
+          config.on as keyof MediaQueryListEventMap,
+          <MediaQueryListListener>listener,
+          <boolean | EventListenerOptions>config.eventOptions || {}
+        );
+      };
     } else {
       // Add listening.
       config.element.addEventListener(