@thednp/shorty 1.0.1 → 1.0.2

package/src/misc/data.js

@@ -1,6 +1,6 @@
-import querySelector from '../selectors/querySelector';
+import isHTMLElement from '../is/isHTMLElement';
 
-/** @type {Map<string, Map<HTMLElement | Element, Record<string, any>>>} */
+/** @type {Map<string, Map<HTMLElement, Record<string, any>>>} */
 const componentData = new Map();
 /**
  * An interface for web components background data.
@@ -9,27 +9,27 @@ const componentData = new Map();
 const Data = {
   /**
    * Sets web components data.
-   * @param {HTMLElement | Element | string} target target element
+   * @param {HTMLElement} element target element
    * @param {string} component the component's name or a unique key
    * @param {Record<string, any>} instance the component instance
    */
-  set: (target, component, instance) => {
-    const element = querySelector(target);
-    if (!element) return;
+  set: (element, component, instance) => {
+    if (!isHTMLElement(element)) return;
 
+    /* istanbul ignore else */
     if (!componentData.has(component)) {
       componentData.set(component, new Map());
     }
 
     const instanceMap = componentData.get(component);
-    // @ts-ignore - not undefined, but defined right above
+    // not undefined, but defined right above
     instanceMap.set(element, instance);
   },
 
   /**
    * Returns all instances for specified component.
    * @param {string} component the component's name or a unique key
-   * @returns {Map<HTMLElement | Element, Record<string, any>>?} all the component instances
+   * @returns {Map<HTMLElement, Record<string, any>>?} all the component instances
    */
   getAllFor: (component) => {
     const instanceMap = componentData.get(component);
@@ -39,12 +39,12 @@ const Data = {
 
   /**
    * Returns the instance associated with the target.
-   * @param {HTMLElement | Element | string} target target element
+   * @param {HTMLElement} element target element
    * @param {string} component the component's name or a unique key
    * @returns {Record<string, any>?} the instance
    */
-  get: (target, component) => {
-    const element = querySelector(target);
+  get: (element, component) => {
+    if (!isHTMLElement(element) || !component) return null;
     const allForC = Data.getAllFor(component);
     const instance = element && allForC && allForC.get(element);
 
@@ -53,16 +53,16 @@ const Data = {
 
   /**
    * Removes web components data.
-   * @param {HTMLElement | Element | string} target target element
+   * @param {HTMLElement} element target element
    * @param {string} component the component's name or a unique key
    */
-  remove: (target, component) => {
-    const element = querySelector(target);
+  remove: (element, component) => {
     const instanceMap = componentData.get(component);
-    if (!instanceMap || !element) return;
+    if (!instanceMap || !isHTMLElement(element)) return;
 
     instanceMap.delete(element);
 
+    /* istanbul ignore else */
     if (instanceMap.size === 0) {
       componentData.delete(component);
     }
@@ -71,7 +71,7 @@ const Data = {
 
 /**
  * An alias for `Data.get()`.
- * @type {SHORTER.getInstance<any>}
+ * @type {SHORTY.getInstance<any>}
  */
 export const getInstance = (target, component) => Data.get(target, component);
 

package/src/misc/dispatchEvent.js

@@ -1,7 +1,7 @@
 /**
  * Shortcut for the `Element.dispatchEvent(Event)` method.
  *
- * @param {HTMLElement | Element} element is the target
+ * @param {HTMLElement} element is the target
  * @param {Event} event is the `Event` object
  */
 const dispatchEvent = (element, event) => element.dispatchEvent(event);

package/src/misc/emulateAnimationEnd.js

@@ -1,12 +1,13 @@
 import animationEndEvent from '../strings/animationEndEvent';
 import getElementAnimationDelay from '../get/getElementAnimationDelay';
 import getElementAnimationDuration from '../get/getElementAnimationDuration';
+import dispatchEvent from './dispatchEvent';
 
 /**
  * Utility to make sure callbacks are consistently
  * called when animation ends.
  *
- * @param {HTMLElement | Element} element target
+ * @param {HTMLElement} element target
  * @param {EventListener} handler `animationend` callback
  */
 export default function emulateAnimationEnd(element, handler) {
@@ -21,6 +22,7 @@ export default function emulateAnimationEnd(element, handler) {
      * @type {EventListener}
      */
     const animationEndWrapper = (e) => {
+      /* istanbul ignore else */
       if (e.target === element) {
         handler.apply(element, [e]);
         element.removeEventListener(animationEndEvent, animationEndWrapper);
@@ -29,7 +31,8 @@ export default function emulateAnimationEnd(element, handler) {
     };
     element.addEventListener(animationEndEvent, animationEndWrapper);
     setTimeout(() => {
-      if (!called) element.dispatchEvent(endEvent);
+      /* istanbul ignore next */
+      if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {
     handler.apply(element, [endEvent]);

package/src/misc/emulateAnimationEndLegacy.js

@@ -1,18 +1,19 @@
 import supportAnimation from '../boolean/supportAnimation';
-import animationEndEvent from '../strings/animationEndEventLegacy';
+import animationEndEventLegacy from '../strings/animationEndEventLegacy';
 import getElementAnimationDelay from '../get/getElementAnimationDelayLegacy';
 import getElementAnimationDuration from '../get/getElementAnimationDurationLegacy';
+import dispatchEvent from './dispatchEvent';
 
 /**
  * Utility to make sure callbacks are consistently
  * called when animation ends.
  *
- * @param {HTMLElement | Element} element target
+ * @param {HTMLElement} element target
  * @param {EventListener} handler `animationend` callback
  */
 export default function emulateAnimationEnd(element, handler) {
   let called = 0;
-  const endEvent = new Event(animationEndEvent);
+  const endEvent = new Event(animationEndEventLegacy);
   const duration = getElementAnimationDuration(element);
   const delay = getElementAnimationDelay(element);
 
@@ -22,15 +23,17 @@ export default function emulateAnimationEnd(element, handler) {
      * @param {Event} e Event object
      */
     const animationEndWrapper = (e) => {
+      /* istanbul ignore else */
       if (e.target === element) {
         handler.apply(element, [e]);
-        element.removeEventListener(animationEndEvent, animationEndWrapper);
+        element.removeEventListener(animationEndEventLegacy, animationEndWrapper);
         called = 1;
       }
     };
-    element.addEventListener(animationEndEvent, animationEndWrapper);
+    element.addEventListener(animationEndEventLegacy, animationEndWrapper);
     setTimeout(() => {
-      if (!called) element.dispatchEvent(endEvent);
+      /* istanbul ignore next */
+      if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {
     handler.apply(element, [endEvent]);

package/src/misc/emulateTransitionEnd.js

@@ -1,12 +1,13 @@
 import transitionEndEvent from '../strings/transitionEndEvent';
 import getElementTransitionDelay from '../get/getElementTransitionDelay';
 import getElementTransitionDuration from '../get/getElementTransitionDuration';
+import dispatchEvent from './dispatchEvent';
 
 /**
  * Utility to make sure callbacks are consistently
  * called when transition ends.
  *
- * @param {HTMLElement | Element} element target
+ * @param {HTMLElement} element target
  * @param {EventListener} handler `transitionend` callback
  */
 export default function emulateTransitionEnd(element, handler) {
@@ -21,6 +22,7 @@ export default function emulateTransitionEnd(element, handler) {
      * @type {EventListener} e Event object
      */
     const transitionEndWrapper = (e) => {
+      /* istanbul ignore else */
       if (e.target === element) {
         handler.apply(element, [e]);
         element.removeEventListener(transitionEndEvent, transitionEndWrapper);
@@ -29,7 +31,8 @@ export default function emulateTransitionEnd(element, handler) {
     };
     element.addEventListener(transitionEndEvent, transitionEndWrapper);
     setTimeout(() => {
-      if (!called) element.dispatchEvent(endEvent);
+      /* istanbul ignore next */
+      if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {
     handler.apply(element, [endEvent]);

package/src/misc/emulateTransitionEndLegacy.js

@@ -1,18 +1,19 @@
 import supportTransition from '../boolean/supportTransition';
-import transitionEndEvent from '../strings/transitionEndEventLegacy';
+import transitionEndEventLegacy from '../strings/transitionEndEventLegacy';
 import getElementTransitionDelay from '../get/getElementTransitionDelayLegacy';
 import getElementTransitionDuration from '../get/getElementTransitionDurationLegacy';
+import dispatchEvent from './dispatchEvent';
 
 /**
  * Utility to make sure callbacks are consistently
  * called when transition ends.
  *
- * @param {HTMLElement | Element} element target
+ * @param {HTMLElement} element target
  * @param {EventListener} handler `transitionend` callback
  */
 export default function emulateTransitionEnd(element, handler) {
   let called = 0;
-  const endEvent = new Event(transitionEndEvent);
+  const endEvent = new Event(transitionEndEventLegacy);
   const duration = getElementTransitionDuration(element);
   const delay = getElementTransitionDelay(element);
 
@@ -22,15 +23,17 @@ export default function emulateTransitionEnd(element, handler) {
      * @param {Event} e Event object
      */
     const transitionEndWrapper = (e) => {
+      /* istanbul ignore else */
       if (e.target === element) {
         handler.apply(element, [e]);
-        element.removeEventListener(transitionEndEvent, transitionEndWrapper);
+        element.removeEventListener(transitionEndEventLegacy, transitionEndWrapper);
         called = 1;
       }
     };
-    element.addEventListener(transitionEndEvent, transitionEndWrapper);
+    element.addEventListener(transitionEndEventLegacy, transitionEndWrapper);
     setTimeout(() => {
-      if (!called) element.dispatchEvent(endEvent);
+      /* istanbul ignore next */
+      if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {
     handler.apply(element, [endEvent]);

package/src/misc/focus.js

@@ -1,8 +1,7 @@
 /**
  * Utility to focus an `HTMLElement` target.
  *
- * @param {HTMLElement | Element} element is the target
+ * @param {HTMLElement} element is the target
  */
-// @ts-ignore -- `Element`s resulted from querySelector can focus too
 const focus = (element) => element.focus();
 export default focus;

package/src/misc/normalizeOptions.js

@@ -6,14 +6,13 @@ import toLowerCase from './toLowerCase';
 /**
  * Utility to normalize component options.
  *
- * @param {HTMLElement | Element} element target
+ * @param {HTMLElement} element target
  * @param {Record<string, any>} defaultOps component default options
  * @param {Record<string, any>} inputOps component instance options
  * @param {string=} ns component namespace
  * @return {Record<string, any>} normalized component options object
  */
 export default function normalizeOptions(element, defaultOps, inputOps, ns) {
-  // @ts-ignore -- our targets are always `HTMLElement`
   const data = { ...element.dataset };
   /** @type {Record<string, any>} */
   const normalOps = {};
@@ -34,6 +33,7 @@ export default function normalizeOptions(element, defaultOps, inputOps, ns) {
   });
 
   ObjectKeys(defaultOps).forEach((k) => {
+    /* istanbul ignore else */
     if (k in inputOps) {
       normalOps[k] = inputOps[k];
     } else if (k in dataOps) {

package/src/misc/normalizeValue.js

@@ -11,22 +11,24 @@
  * @return {niceValue} the normalized value
  */
 export default function normalizeValue(value) {
-  if (value === 'true') { // boolean
+  if (['true', true].includes(value)) { // boolean
+  // if ('true' === value) { // boolean
     return true;
   }
 
-  if (value === 'false') { // boolean
+  if (['false', false].includes(value)) { // boolean
+  // if ('false' === value) { // boolean
     return false;
   }
 
-  if (!Number.isNaN(+value)) { // number
-    return +value;
-  }
-
   if (value === '' || value === 'null') { // null
     return null;
   }
 
+  if (value !== '' && !Number.isNaN(+value)) { // number
+    return +value;
+  }
+
   // string / function / HTMLElement / object
   return value;
 }

package/src/misc/passiveHandlerLegacy.js

@@ -4,6 +4,7 @@ import supportPassive from '../boolean/supportPassive';
  * A global namespace for most scroll event listeners in legacy browsers.
  * @type {Partial<AddEventListenerOptions> | boolean}
  */
-const passiveHandler = supportPassive ? { passive: true } : false;
+const passiveHandler = supportPassive ? { passive: true }
+  : /* istanbul ignore next */false;
 
 export default passiveHandler;

package/src/misc/reflow.js

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

package/src/misc/setElementStyle.js

@@ -1,10 +1,19 @@
 import ObjectAssign from './ObjectAssign';
+import ObjectEntries from './ObjectEntries';
 
 /**
  * Shortcut for multiple uses of `HTMLElement.style.propertyName` method.
- * @param  {HTMLElement | Element} element target element
+ * @param  {HTMLElement} element target element
  * @param  {Partial<CSSStyleDeclaration>} styles attribute value
  */
-// @ts-ignore
-const setElementStyle = (element, styles) => { ObjectAssign(element.style, styles); };
+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/timer.js

@@ -1,6 +1,6 @@
-import querySelector from '../selectors/querySelector';
+import isHTMLElement from '../is/isHTMLElement';
 
-/** @type {Map<HTMLElement | Element, any>} */
+/** @type {Map<HTMLElement, any>} */
 const TimeCache = new Map();
 /**
  * An interface for one or more `TimerHandler`s per `Element`.
@@ -9,17 +9,17 @@ const TimeCache = new Map();
 const Timer = {
   /**
    * Sets a new timeout timer for an element, or element -> key association.
-   * @param {HTMLElement | Element | string} target target element
+   * @param {HTMLElement} element target element
    * @param {ReturnType<TimerHandler>} callback the callback
    * @param {number} delay the execution delay
    * @param {string=} key a unique key
    */
-  set: (target, callback, delay, key) => {
-    const element = querySelector(target);
-
-    if (!element) return;
+  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());
       }
@@ -32,38 +32,35 @@ const Timer = {
 
   /**
    * Returns the timer associated with the target.
-   * @param {HTMLElement | Element | string} target target element
+   * @param {HTMLElement} element target element
    * @param {string=} key a unique
    * @returns {number?} the timer
    */
-  get: (target, key) => {
-    const element = querySelector(target);
-
-    if (!element) return null;
+  get: (element, key) => {
+    if (!isHTMLElement(element)) return null;
     const keyTimers = TimeCache.get(element);
 
     if (key && key.length && keyTimers && keyTimers.get) {
-      return keyTimers.get(key) || null;
+      return keyTimers.get(key) || /* istanbul ignore next */null;
     }
     return keyTimers || null;
   },
 
   /**
    * Clears the element's timer.
-   * @param {HTMLElement | Element | string} target target element
+   * @param {HTMLElement} element target element
    * @param {string=} key a unique key
    */
-  clear: (target, key) => {
-    const element = querySelector(target);
-
-    if (!element) return;
+  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);
         }

package/src/misc/version.js

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { version } from '../../package.json';
 
 /**

package/src/selectors/closest.js

@@ -5,12 +5,12 @@
  *
  * @see https://stackoverflow.com/q/54520554/803358
  *
- * @param {HTMLElement | Element} element Element to look into
+ * @param {HTMLElement} element Element to look into
  * @param {string} selector the selector name
- * @return {(HTMLElement | Element)?} the query result
+ * @return {HTMLElement?} the query result
  */
 export default function closest(element, selector) {
   return element ? (element.closest(selector)
-    // @ts-ignore -- break out of `ShadowRoot`
+    // break out of `ShadowRoot`
     || closest(element.getRootNode().host, selector)) : null;
 }

package/src/selectors/getCustomElements.js

@@ -1,4 +1,3 @@
-import documentAll from './documentAll';
 import isCustomElement from '../is/isCustomElement';
 import getElementsByTagName from './getElementsByTagName';
 
@@ -7,11 +6,11 @@ import getElementsByTagName from './getElementsByTagName';
  * `CustomElement`.
  * @see https://stackoverflow.com/questions/27334365/how-to-get-list-of-registered-custom-elements
  *
- * @param {(HTMLElement | Element | Node | Document)=} parent parent to look into
- * @returns {Array<HTMLElement | Element>} the query result
+ * @param {ParentNode=} parent parent to look into
+ * @returns {Array<HTMLElement>} the query result
  */
 export default function getCustomElements(parent) {
-  const collection = parent && typeof parent === 'object'
-    ? getElementsByTagName('*', parent) : documentAll;
+  const collection = getElementsByTagName('*', parent);
+
   return [...collection].filter(isCustomElement);
 }

package/src/selectors/getElementById.js

@@ -2,10 +2,13 @@ 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
- * @returns {(HTMLElement | Element)?}
+ * @param {ParentNode=} context
+ * @returns {HTMLElement?}
  */
-export default function getElementById(id) {
-  return getDocument().getElementById(id);
+export default function getElementById(id, context) {
+  return getDocument(context).getElementById(id);
 }

package/src/selectors/getElementsByClassName.js

@@ -1,14 +1,15 @@
 import getDocument from '../get/getDocument';
+import isNode from '../is/isNode';
 
 /**
  * Shortcut for `HTMLElement.getElementsByClassName` method. Some `Node` elements
  * like `ShadowRoot` do not support `getElementsByClassName`.
  *
  * @param {string} selector the class name
- * @param {(HTMLElement | Element | Document)=} parent optional Element to look into
- * @return {HTMLCollectionOf<HTMLElement | Element>} the 'HTMLCollection'
+ * @param {ParentNode=} parent optional Element to look into
+ * @return {HTMLCollectionOf<HTMLElement>} the 'HTMLCollection'
  */
 export default function getElementsByClassName(selector, parent) {
-  const lookUp = typeof parent !== 'object' ? getDocument() : parent;
+  const lookUp = isNode(parent) ? parent : getDocument();
   return lookUp.getElementsByClassName(selector);
 }

package/src/selectors/getElementsByTagName.js

@@ -1,14 +1,15 @@
 import getDocument from '../get/getDocument';
+import isNode from '../is/isNode';
 
 /**
  * Shortcut for `HTMLElement.getElementsByTagName` method. Some `Node` elements
  * like `ShadowRoot` do not support `getElementsByTagName`.
  *
  * @param {string} selector the tag name
- * @param {(HTMLElement | Element | Document)=} parent optional Element to look into
- * @return {HTMLCollectionOf<HTMLElement | Element>} the 'HTMLCollection'
+ * @param {ParentNode=} parent optional Element to look into
+ * @return {HTMLCollectionOf<HTMLElement>} the 'HTMLCollection'
  */
 export default function getElementsByTagName(selector, parent) {
-  const lookUp = typeof parent !== 'object' ? getDocument() : parent;
+  const lookUp = isNode(parent) ? parent : getDocument();
   return lookUp.getElementsByTagName(selector);
 }

package/src/selectors/matches.js

@@ -1,7 +1,7 @@
 /**
  * Check if element matches a CSS selector.
  *
- * @param {HTMLElement | Element} target
+ * @param {HTMLElement} target
  * @param {string} selector
  * @returns {boolean}
  */

package/src/selectors/matchesLegacy.js

@@ -1,12 +1,12 @@
-// @ts-nocheck
 const ElementProto = Element.prototype;
+
 const matchesFn = ElementProto.matches
-  || ElementProto.matchesSelector
-  || ElementProto.webkitMatchesSelector
-  || ElementProto.mozMatchesSelector
-  || ElementProto.msMatchesSelector
-  || ElementProto.oMatchesSelector
-  || function matchesNotSupported() {
+  || /* istanbul ignore next */ ElementProto.matchesSelector
+  || /* istanbul ignore next */ ElementProto.webkitMatchesSelector
+  || /* istanbul ignore next */ ElementProto.mozMatchesSelector
+  || /* istanbul ignore next */ ElementProto.msMatchesSelector
+  || /* istanbul ignore next */ ElementProto.oMatchesSelector
+  || /* istanbul ignore next */ function matchesNotSupported() {
     return false;
   };
 
@@ -14,7 +14,7 @@ const matchesFn = ElementProto.matches
  * Check if element matches a CSS selector,
  * supporting a range of legacy browsers.
  *
- * @param {HTMLElement | Element} target
+ * @param {HTMLElement} target
  * @param {string} selector
  * @returns {boolean}
  */

package/src/selectors/querySelector.js

@@ -1,17 +1,19 @@
 import getDocument from '../get/getDocument';
+import isNode from '../is/isNode';
 
 /**
  * Utility to check if target is typeof `HTMLElement`, `Element`, `Node`
  * or find one that matches a selector.
  *
- * @param {Node | HTMLElement | Element | string} selector the input selector or target element
- * @param {(Node | HTMLElement | Element | Document)=} parent optional node to look into
- * @return {(HTMLElement | Element)?} the `HTMLElement` or `querySelector` result
+ * @param {Node | string} selector the input selector or target element
+ * @param {ParentNode=} parent optional node to look into
+ * @return {HTMLElement?} the `HTMLElement` or `querySelector` result
  */
 export default function querySelector(selector, parent) {
-  if (typeof selector === 'string') {
-    const lookUp = typeof parent !== 'object' ? getDocument() : parent;
-    return lookUp.querySelector(selector);
+  if (isNode(selector)) {
+    return selector;
   }
-  return selector;
+  const lookUp = isNode(parent) ? parent : getDocument();
+
+  return lookUp.querySelector(selector);
 }

package/src/selectors/querySelectorAll.js

@@ -1,13 +1,14 @@
 import getDocument from '../get/getDocument';
+import isNode from '../is/isNode';
 
 /**
  * A shortcut for `(document|Element).querySelectorAll`.
  *
  * @param {string} selector the input selector
- * @param {(HTMLElement | Element | Document | Node)=} parent optional node to look into
- * @return {NodeListOf<HTMLElement | Element>} the query result
+ * @param {ParentNode=} parent optional node to look into
+ * @return {NodeListOf<HTMLElement>} the query result
  */
 export default function querySelectorAll(selector, parent) {
-  const lookUp = typeof parent !== 'object' ? getDocument() : parent;
+  const lookUp = isNode(parent) ? parent : getDocument();
   return lookUp.querySelectorAll(selector);
 }

package/src/strings/animationDelayLegacy.js

@@ -4,5 +4,6 @@ import documentHead from '../blocks/documentHead';
  * A global namespace for 'animationDelay' string.
  * @type {string}
  */
-const animationDelay = 'webkitAnimation' in documentHead.style ? 'webkitAnimationDelay' : 'animationDelay';
+const animationDelay = 'webkitAnimation' in documentHead.style ? 'webkitAnimationDelay'
+  : /* istanbul ignore next */'animationDelay';
 export default animationDelay;

package/src/strings/animationDurationLegacy.js

@@ -4,5 +4,6 @@ import documentHead from '../blocks/documentHead';
  * A global namespace for 'animationDuration' string.
  * @type {string}
  */
-const animationDuration = 'webkitAnimation' in documentHead.style ? 'webkitAnimationDuration' : 'animationDuration';
+const animationDuration = 'webkitAnimation' in documentHead.style ? 'webkitAnimationDuration'
+  : /* istanbul ignore next */'animationDuration';
 export default animationDuration;