@thednp/shorty 1.0.2 → 2.0.0-alpha2

package/src/misc/normalizeOptions.ts

@@ -0,0 +1,55 @@
+import getAttribute from '../attr/getAttribute';
+import normalizeValue from './normalizeValue';
+import ObjectEntries from './ObjectEntries';
+import toLowerCase from './toLowerCase';
+import { optionValues } from '../types';
+
+/**
+ * Utility to normalize component options.
+ *
+ * @param element target
+ * @param defaultOps component default options
+ * @param inputOps component instance options
+ * @param ns component namespace
+ * @return normalized component options object
+ */
+const normalizeOptions = <T extends { [key: string]: optionValues }>(
+  element: HTMLElement,
+  defaultOps: T,
+  inputOps: Partial<T>,
+  ns?: string
+): T => {
+  const INPUT = { ...inputOps };
+  const data = { ...element.dataset } as Partial<T> & { [key: string]: any };
+  const normalOps = { ...defaultOps };
+  const dataOps: Partial<T> = {};
+  const title = 'title';
+
+  ObjectEntries(data).forEach(([k, v]) => {
+    const key: keyof T =
+      ns && typeof k === 'string' && k.includes(ns)
+        ? k.replace(ns, '').replace(/[A-Z]/g, (match: string) => toLowerCase(match))
+        : k;
+
+    dataOps[key] = normalizeValue(v) as T[keyof T];
+  });
+
+  ObjectEntries(INPUT).forEach(([k, v]) => {
+    INPUT[k] = normalizeValue(v) as T[keyof T];
+  });
+
+  ObjectEntries(defaultOps).forEach(([k, v]) => {
+    /* istanbul ignore else */
+    if (k in INPUT) {
+      normalOps[k] = INPUT[k];
+    } else if (k in dataOps) {
+      normalOps[k] = dataOps[k];
+    } else {
+      normalOps[k] = (k === title ? getAttribute(element, title) : v) as T[keyof T];
+    }
+  });
+
+  return normalOps;
+};
+
+export default normalizeOptions;

package/src/misc/normalizeValue.js

@@ -1,34 +1,16 @@
-/**
- * The raw value or a given component option.
- *
- * @typedef {string | HTMLElement | Function | number | boolean | null} niceValue
- */
-
-/**
- * Utility to normalize component options
- *
- * @param {any} value the input value
- * @return {niceValue} the normalized value
- */
-export default function normalizeValue(value) {
-  if (['true', true].includes(value)) { // boolean
-  // if ('true' === value) { // boolean
-    return true;
-  }
-
-  if (['false', false].includes(value)) { // boolean
-  // if ('false' === value) { // boolean
-    return false;
-  }
-
-  if (value === '' || value === 'null') { // null
-    return null;
-  }
-
-  if (value !== '' && !Number.isNaN(+value)) { // number
-    return +value;
-  }
-
-  // string / function / HTMLElement / object
-  return value;
-}
+const normalizeValue = (value) => {
+    if (['true', true].includes(value)) {
+        return true;
+    }
+    if (['false', false].includes(value)) {
+        return false;
+    }
+    if (['null', '', null].includes(value)) {
+        return null;
+    }
+    if (value !== '' && !Number.isNaN(+value)) {
+        return +value;
+    }
+    return value;
+};
+export default normalizeValue;

package/src/misc/normalizeValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeValue.js","sourceRoot":"","sources":["normalizeValue.ts"],"names":[],"mappings":"AAQA,MAAM,cAAc,GAAG,CAAC,KAAW,EAAgB,EAAE;IACnD,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;QAClC,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;QACpC,OAAO,KAAK,CAAC;KACd;IAED,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;QACtC,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE;QACzC,OAAO,CAAC,KAAK,CAAC;KACf;IAGD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/src/misc/normalizeValue.ts

@@ -0,0 +1,30 @@
+import { optionValues } from '../types';
+
+/**
+ * Utility to normalize component options
+ *
+ * @param value the input value
+ * @return the normalized value
+ */
+const normalizeValue = (value?: any): optionValues => {
+  if (['true', true].includes(value)) {
+    return true;
+  }
+
+  if (['false', false].includes(value)) {
+    return false;
+  }
+
+  if (['null', '', null].includes(value)) {
+    return null;
+  }
+
+  if (value !== '' && !Number.isNaN(+value)) {
+    return +value;
+  }
+
+  // string / function / HTMLElement / object / undefined
+  return value;
+};
+
+export default normalizeValue;

package/src/misc/passiveHandler.js

@@ -1,7 +1,2 @@
-/**
- * A global namespace for most scroll event listeners.
- * @type {Partial<AddEventListenerOptions>}
- */
-const passiveHandler = { passive: true };
-
-export default passiveHandler;
+const passiveHandler = { passive: true };
+export default passiveHandler;

package/src/misc/passiveHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"passiveHandler.js","sourceRoot":"","sources":["passiveHandler.ts"],"names":[],"mappings":"AAGA,MAAM,cAAc,GAAqC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAE3E,eAAe,cAAc,CAAC"}

package/src/misc/passiveHandler.ts

@@ -0,0 +1,6 @@
+/**
+ * A global namespace for most scroll event listeners.
+ */
+const passiveHandler: Partial<AddEventListenerOptions> = { passive: true };
+
+export default passiveHandler;

package/src/misc/reflow.js

@@ -1,8 +1,2 @@
-/**
- * Utility to force re-paint of an `HTMLElement` target.
- *
- * @param {HTMLElement} element is the target
- * @return {number} the `Element.offsetHeight` value
- */
-const reflow = (element) => element.offsetHeight;
-export default reflow;
+const reflow = (element) => element.offsetHeight;
+export default reflow;

package/src/misc/reflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reflow.js","sourceRoot":"","sources":["reflow.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,GAAG,CAAC,OAAoB,EAAU,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;AAEtE,eAAe,MAAM,CAAC"}

package/src/misc/reflow.ts

@@ -0,0 +1,9 @@
+/**
+ * Utility to force re-paint of an `HTMLElement` target.
+ *
+ * @param element is the target
+ * @return the `Element.offsetHeight` value
+ */
+const reflow = (element: HTMLElement): number => element.offsetHeight;
+
+export default reflow;

package/src/misc/setElementStyle.js

@@ -1,19 +1,15 @@
-import ObjectAssign from './ObjectAssign';
-import ObjectEntries from './ObjectEntries';
-
-/**
- * Shortcut for multiple uses of `HTMLElement.style.propertyName` method.
- * @param  {HTMLElement} element target element
- * @param  {Partial<CSSStyleDeclaration>} styles attribute value
- */
-const setElementStyle = (element, styles) => {
-  ObjectEntries(styles).forEach(([key, value]) => {
-    if (key.includes('--')) {
-      element.style.setProperty(key, value);
-    } else {
-      const propObject = {}; propObject[key] = value;
-      ObjectAssign(element.style, propObject);
-    }
-  });
-};
-export default setElementStyle;
+import ObjectAssign from './ObjectAssign';
+import ObjectEntries from './ObjectEntries';
+const setElementStyle = (element, styles) => {
+    ObjectEntries(styles).forEach(([key, value]) => {
+        if (key.includes('--')) {
+            element.style.setProperty(key, value);
+        }
+        else {
+            const propObject = {};
+            propObject[key] = value;
+            ObjectAssign(element.style, propObject);
+        }
+    });
+};
+export default setElementStyle;

package/src/misc/setElementStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setElementStyle.js","sourceRoot":"","sources":["setElementStyle.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAQ5C,MAAM,eAAe,GAAG,CAAC,OAAoB,EAAE,MAAuB,EAAQ,EAAE;IAC9E,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAmB,EAAE,EAAE;QAC/D,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YACtB,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;SACvC;aAAM;YACL,MAAM,UAAU,GAA6B,EAAE,CAAC;YAChD,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YACxB,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;SACzC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AACF,eAAe,eAAe,CAAC"}

package/src/misc/setElementStyle.ts

@@ -0,0 +1,21 @@
+import ObjectAssign from './ObjectAssign';
+import ObjectEntries from './ObjectEntries';
+import CSS4Declaration from '../interface/css4Declaration';
+
+/**
+ * Shortcut for multiple uses of `HTMLElement.style.propertyName` method.
+ * @param element target element
+ * @param styles attribute value
+ */
+const setElementStyle = (element: HTMLElement, styles: CSS4Declaration): void => {
+  ObjectEntries(styles).forEach(([key, value]: [string, string]) => {
+    if (key.includes('--')) {
+      element.style.setProperty(key, value);
+    } else {
+      const propObject: Partial<CSS4Declaration> = {};
+      propObject[key] = value;
+      ObjectAssign(element.style, propObject);
+    }
+  });
+};
+export default setElementStyle;

package/src/misc/timer.js

@@ -1,75 +1,50 @@
-import isHTMLElement from '../is/isHTMLElement';
-
-/** @type {Map<HTMLElement, any>} */
-const TimeCache = new Map();
-/**
- * An interface for one or more `TimerHandler`s per `Element`.
- * @see https://github.com/thednp/navbar.js/
- */
-const Timer = {
-  /**
-   * Sets a new timeout timer for an element, or element -> key association.
-   * @param {HTMLElement} element target element
-   * @param {ReturnType<TimerHandler>} callback the callback
-   * @param {number} delay the execution delay
-   * @param {string=} key a unique key
-   */
-  set: (element, callback, delay, key) => {
-    if (!isHTMLElement(element)) return;
-
-    /* istanbul ignore else */
-    if (key && key.length) {
-      /* istanbul ignore else */
-      if (!TimeCache.has(element)) {
-        TimeCache.set(element, new Map());
-      }
-      const keyTimers = TimeCache.get(element);
-      keyTimers.set(key, setTimeout(callback, delay));
-    } else {
-      TimeCache.set(element, setTimeout(callback, delay));
-    }
-  },
-
-  /**
-   * Returns the timer associated with the target.
-   * @param {HTMLElement} element target element
-   * @param {string=} key a unique
-   * @returns {number?} the timer
-   */
-  get: (element, key) => {
-    if (!isHTMLElement(element)) return null;
-    const keyTimers = TimeCache.get(element);
-
-    if (key && key.length && keyTimers && keyTimers.get) {
-      return keyTimers.get(key) || /* istanbul ignore next */null;
-    }
-    return keyTimers || null;
-  },
-
-  /**
-   * Clears the element's timer.
-   * @param {HTMLElement} element target element
-   * @param {string=} key a unique key
-   */
-  clear: (element, key) => {
-    if (!isHTMLElement(element)) return;
-
-    if (key && key.length) {
-      const keyTimers = TimeCache.get(element);
-      /* istanbul ignore else */
-      if (keyTimers && keyTimers.get) {
-        clearTimeout(keyTimers.get(key));
-        keyTimers.delete(key);
-        /* istanbul ignore else */
-        if (keyTimers.size === 0) {
-          TimeCache.delete(element);
-        }
-      }
-    } else {
-      clearTimeout(TimeCache.get(element));
-      TimeCache.delete(element);
-    }
-  },
-};
-
-export default Timer;
+import isMap from '../is/isMap';
+import isHTMLElement from '../is/isHTMLElement';
+import isNumber from '../is/isNumber';
+const TimeCache = new Map();
+const Timer = {
+    set: (element, callback, delay, key) => {
+        if (!isHTMLElement(element))
+            return;
+        if (key && key.length) {
+            if (!TimeCache.has(element)) {
+                TimeCache.set(element, new Map());
+            }
+            TimeCache.get(element).set(key, setTimeout(callback, delay));
+        }
+        else {
+            TimeCache.set(element, setTimeout(callback, delay));
+        }
+    },
+    get: (element, key) => {
+        if (!isHTMLElement(element))
+            return null;
+        const keyTimers = TimeCache.get(element);
+        if (isMap(keyTimers)) {
+            return keyTimers.get(key) || null;
+        }
+        else if (isNumber(keyTimers)) {
+            return keyTimers;
+        }
+        return null;
+    },
+    clear: (element, key) => {
+        if (!isHTMLElement(element))
+            return;
+        const keyTimers = TimeCache.get(element);
+        if (key && key.length && isMap(keyTimers)) {
+            if (isMap(keyTimers)) {
+                clearTimeout(keyTimers.get(key));
+                keyTimers.delete(key);
+                if (keyTimers.size === 0) {
+                    TimeCache.delete(element);
+                }
+            }
+        }
+        else {
+            clearTimeout(keyTimers);
+            TimeCache.delete(element);
+        }
+    },
+};
+export default Timer;

package/src/misc/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","sourceRoot":"","sources":["timer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAKtC,MAAM,SAAS,GAAY,IAAI,GAAG,EAAE,CAAC;AAKrC,MAAM,KAAK,GAAG;IAQZ,GAAG,EAAE,CAAC,OAAoB,EAAE,QAAsB,EAAE,KAAa,EAAE,GAAY,EAAQ,EAAE;QACvF,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;YAAE,OAAO;QAGpC,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,EAAE;YAErB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBAC3B,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;aACnC;YACA,SAAS,CAAC,GAAG,CAAC,OAAO,CAAY,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;SAC1E;aAAM;YACL,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;SACrD;IACH,CAAC;IAQD,GAAG,EAAE,CAAC,OAAoB,EAAE,GAAY,EAAiB,EAAE;QACzD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;YAAE,OAAO,IAAI,CAAC;QACzC,MAAM,SAAS,GAAG,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEzC,IAAI,KAAK,CAAC,SAAS,CAAC,EAAE;YACpB,OAAO,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,IAA+B,IAAI,CAAC;SAC9D;aAAM,IAAI,QAAQ,CAAC,SAAS,CAAC,EAAE;YAC9B,OAAO,SAAS,CAAC;SAClB;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAOD,KAAK,EAAE,CAAC,OAAoB,EAAE,GAAY,EAAQ,EAAE;QAClD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;YAAE,OAAO;QAEpC,MAAM,SAAS,GAAG,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEzC,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS,CAAC,EAAE;YAEzC,IAAI,KAAK,CAAC,SAAS,CAAC,EAAE;gBACpB,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;gBACjC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAEtB,IAAI,SAAS,CAAC,IAAI,KAAK,CAAC,EAAE;oBACxB,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;iBAC3B;aACF;SACF;aAAM;YACL,YAAY,CAAC,SAAmB,CAAC,CAAC;YAClC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;SAC3B;IACH,CAAC;CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/src/misc/timer.ts

@@ -0,0 +1,81 @@
+import isMap from '../is/isMap';
+import isHTMLElement from '../is/isHTMLElement';
+import isNumber from '../is/isNumber';
+
+type KeyMap = Map<string, number>;
+type TimeMap = Map<HTMLElement, number | KeyMap>;
+
+const TimeCache: TimeMap = new Map();
+/**
+ * An interface for one or more `TimerHandler`s per `Element`.
+ * @see https://github.com/thednp/navbar/
+ */
+const Timer = {
+  /**
+   * Sets a new timeout timer for an element, or element -> key association.
+   * @param element target element
+   * @param callback the callback
+   * @param delay the execution delay
+   * @param key a unique key
+   */
+  set: (element: HTMLElement, callback: TimerHandler, delay: number, key?: string): void => {
+    if (!isHTMLElement(element)) return;
+
+    /* istanbul ignore else */
+    if (key && key.length) {
+      /* istanbul ignore else */
+      if (!TimeCache.has(element)) {
+        TimeCache.set(element, new Map());
+      }
+      (TimeCache.get(element) as KeyMap).set(key, setTimeout(callback, delay));
+    } else {
+      TimeCache.set(element, setTimeout(callback, delay));
+    }
+  },
+
+  /**
+   * Returns the timer associated with the target.
+   * @param element target element
+   * @param key a unique
+   * @returns the timer
+   */
+  get: (element: HTMLElement, key?: string): number | null => {
+    if (!isHTMLElement(element)) return null;
+    const keyTimers = TimeCache.get(element);
+
+    if (isMap(keyTimers)) {
+      return keyTimers.get(key) || /* istanbul ignore next */ null;
+    } else if (isNumber(keyTimers)) {
+      return keyTimers;
+    }
+    return null;
+  },
+
+  /**
+   * Clears the element's timer.
+   * @param element target element
+   * @param key a unique key
+   */
+  clear: (element: HTMLElement, key?: string): void => {
+    if (!isHTMLElement(element)) return;
+
+    const keyTimers = TimeCache.get(element);
+
+    if (key && key.length && isMap(keyTimers)) {
+      /* istanbul ignore else */
+      if (isMap(keyTimers)) {
+        clearTimeout(keyTimers.get(key));
+        keyTimers.delete(key);
+        /* istanbul ignore else */
+        if (keyTimers.size === 0) {
+          TimeCache.delete(element);
+        }
+      }
+    } else {
+      clearTimeout(keyTimers as number);
+      TimeCache.delete(element);
+    }
+  },
+};
+
+export default Timer;

package/src/misc/toLowerCase.js

@@ -1,8 +1,2 @@
-/**
- * Shortcut for `String.toLowerCase()`.
- *
- * @param {string} source input string
- * @returns {string} lowercase output string
- */
-const toLowerCase = (source) => source.toLowerCase();
-export default toLowerCase;
+const toLowerCase = (source) => source.toLowerCase();
+export default toLowerCase;

package/src/misc/toLowerCase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toLowerCase.js","sourceRoot":"","sources":["toLowerCase.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,GAAG,CAAC,MAAc,EAAU,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;AAErE,eAAe,WAAW,CAAC"}

package/src/misc/toLowerCase.ts

@@ -0,0 +1,9 @@
+/**
+ * Shortcut for `String.toLowerCase()`.
+ *
+ * @param source input string
+ * @returns lowercase output string
+ */
+const toLowerCase = (source: string): string => source.toLowerCase();
+
+export default toLowerCase;

package/src/misc/toUpperCase.js

@@ -1,8 +1,2 @@
-/**
- * Shortcut for `String.toUpperCase()`.
- *
- * @param {string} source input string
- * @returns {string} uppercase output string
- */
-const toUpperCase = (source) => source.toUpperCase();
-export default toUpperCase;
+const toUpperCase = (source) => source.toUpperCase();
+export default toUpperCase;

package/src/misc/toUpperCase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toUpperCase.js","sourceRoot":"","sources":["toUpperCase.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,GAAG,CAAC,MAAc,EAAU,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;AAErE,eAAe,WAAW,CAAC"}

package/src/misc/toUpperCase.ts

@@ -0,0 +1,9 @@
+/**
+ * Shortcut for `String.toUpperCase()`.
+ *
+ * @param source input string
+ * @returns uppercase output string
+ */
+const toUpperCase = (source: string): string => source.toUpperCase();
+
+export default toUpperCase;

package/src/selectors/closest.js

@@ -1,16 +1,7 @@
-/**
- * Shortcut for `HTMLElement.closest` method which also works
- * with children of `ShadowRoot`. The order of the parameters
- * is intentional since they're both required.
- *
- * @see https://stackoverflow.com/q/54520554/803358
- *
- * @param {HTMLElement} element Element to look into
- * @param {string} selector the selector name
- * @return {HTMLElement?} the query result
- */
-export default function closest(element, selector) {
-  return element ? (element.closest(selector)
-    // break out of `ShadowRoot`
-    || closest(element.getRootNode().host, selector)) : null;
-}
+const closest = (element, selector) => {
+    return element
+        ? element.closest(selector) ||
+            closest(element.getRootNode().host, selector)
+        : null;
+};
+export default closest;

package/src/selectors/closest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"closest.js","sourceRoot":"","sources":["closest.ts"],"names":[],"mappings":"AAWA,MAAM,OAAO,GAAG,CAAC,OAAoB,EAAE,QAAgB,EAAsB,EAAE;IAC7E,OAAO,OAAO;QACZ,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;YAEvB,OAAO,CAAE,OAAO,CAAC,WAAW,EAA0C,CAAC,IAAI,EAAE,QAAQ,CAAC;QAC1F,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/src/selectors/closest.ts

@@ -0,0 +1,20 @@
+/**
+ * Shortcut for `HTMLElement.closest` method which also works
+ * with children of `ShadowRoot`. The order of the parameters
+ * is intentional since they're both required.
+ *
+ * @see https://stackoverflow.com/q/54520554/803358
+ *
+ * @param element Element to look into
+ * @param selector the selector name
+ * @return the query result
+ */
+const closest = (element: HTMLElement, selector: string): HTMLElement | null => {
+  return element
+    ? element.closest(selector) ||
+        // break out of `ShadowRoot`
+        closest((element.getRootNode() as HTMLElement & { host: HTMLElement }).host, selector)
+    : null;
+};
+
+export default closest;

package/src/selectors/getCustomElements.js

@@ -1,16 +1,7 @@
-import isCustomElement from '../is/isCustomElement';
-import getElementsByTagName from './getElementsByTagName';
-
-/**
- * Returns an `Array` of `Node` elements that are registered as
- * `CustomElement`.
- * @see https://stackoverflow.com/questions/27334365/how-to-get-list-of-registered-custom-elements
- *
- * @param {ParentNode=} parent parent to look into
- * @returns {Array<HTMLElement>} the query result
- */
-export default function getCustomElements(parent) {
-  const collection = getElementsByTagName('*', parent);
-
-  return [...collection].filter(isCustomElement);
-}
+import isCustomElement from '../is/isCustomElement';
+import getElementsByTagName from './getElementsByTagName';
+const getCustomElements = (parent) => {
+    const collection = getElementsByTagName('*', parent);
+    return [...collection].filter(isCustomElement);
+};
+export default getCustomElements;

package/src/selectors/getCustomElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCustomElements.js","sourceRoot":"","sources":["getCustomElements.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAU1D,MAAM,iBAAiB,GAAG,CAAC,MAAmB,EAAmB,EAAE;IACjE,MAAM,UAAU,GAAG,oBAAoB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IAErD,OAAO,CAAC,GAAG,UAAU,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/src/selectors/getCustomElements.ts

@@ -0,0 +1,19 @@
+import CustomElement from '../interface/customElement';
+import isCustomElement from '../is/isCustomElement';
+import getElementsByTagName from './getElementsByTagName';
+
+/**
+ * Returns an `Array` of `Node` elements that are registered as
+ * `CustomElement`.
+ * @see https://stackoverflow.com/questions/27334365/how-to-get-list-of-registered-custom-elements
+ *
+ * @param parent parent to look into
+ * @returns the query result
+ */
+const getCustomElements = (parent?: ParentNode): CustomElement[] => {
+  const collection = getElementsByTagName('*', parent);
+
+  return [...collection].filter(isCustomElement);
+};
+
+export default getCustomElements;

package/src/selectors/getElementById.js

@@ -1,14 +1,5 @@
-import getDocument from '../get/getDocument';
-
-/**
- * Returns an `Element` that matches the id in the document.
- * Within multiple <iframe> elements, a `parent` parameter
- * would decisively locate the correct element.
- *
- * @param {string} id
- * @param {ParentNode=} context
- * @returns {HTMLElement?}
- */
-export default function getElementById(id, context) {
-  return getDocument(context).getElementById(id);
-}
+import getDocument from '../get/getDocument';
+const getElementById = (id, context) => {
+    return getDocument(context).getElementById(id) || null;
+};
+export default getElementById;

package/src/selectors/getElementById.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getElementById.js","sourceRoot":"","sources":["getElementById.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAW7C,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,OAAc,EAAsB,EAAE;IACxE,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC;AACzD,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}