@thednp/shorty 2.0.0-alpha1 → 2.0.0-alpha11

package/src/misc/createElement.ts

@@ -1,34 +1,38 @@
-import setAttribute from "../attr/setAttribute";
-import getDocument from "../get/getDocument";
-import ObjectEntries from "./ObjectEntries";
+import isString from '../is/isString';
+import setAttribute from '../attr/setAttribute';
+import getDocument from '../get/getDocument';
+import ObjectEntries from './ObjectEntries';
 
 /**
- * This is a shortie for `document.createElement` method
+ * Shortie for `document.createElement` method
  * which allows you to create a new `HTMLElement` for a given `tagName`
- * or based on an object with specific non-readonly attributes:
+ * or based on an object with specific non-readonly attributes with string values:
  * `id`, `className`, `textContent`, `style`, etc.
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
  *
  * @param param `tagName` or object
- * @return a new `HTMLElement` or `Element`
+ * @return a new `HTMLElement`
  */
 const createElement = (param?: string | Partial<HTMLElement>): HTMLElement | undefined => {
   if (!param) return undefined;
 
-  if (typeof param === "string") {
+  if (isString(param)) {
     return getDocument().createElement(param);
   }
 
   const { tagName } = param;
-  const newElement = createElement(tagName);
+  const newElement = createElement(tagName as string);
 
   if (!newElement) return undefined;
 
-  const attr = { ...param };
+  const attr = { ...(param as Record<string, unknown>) };
   delete attr.tagName;
 
   ObjectEntries(attr).forEach(([key, value]) => {
-    setAttribute(newElement, key, value);
+    if (isString(key as string) && isString(value as string)) {
+      setAttribute(newElement, key as string, value as string);
+    }
   });
   return newElement;
 };

package/src/misc/createElementNS.ts

@@ -1,12 +1,14 @@
-import getDocument from "../get/getDocument";
-import ObjectEntries from "./ObjectEntries";
-import setAttribute from "../attr/setAttribute";
+import getDocument from '../get/getDocument';
+import ObjectEntries from './ObjectEntries';
+import setAttribute from '../attr/setAttribute';
+import isString from '../is/isString';
 
 /**
- * This is a shortie for `document.createElementNS` method
+ * Shortie for `document.createElementNS` method
  * which allows you to create a new `HTMLElement` for a given `tagName`
- * or based on an object with specific non-readonly attributes:
+ * or based on an object with specific non-readonly attributes with string values:
  * `id`, `className`, `textContent`, `style`, etc.
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
  *
  * @param ns `namespaceURI` to associate with the new `HTMLElement`
@@ -14,25 +16,27 @@ import setAttribute from "../attr/setAttribute";
  * @return a new `HTMLElement`
  */
 const createElementNS = (
-  ns?: string,
-  param?: string | Partial<HTMLElement>
+  ns: string,
+  param?: string | Partial<HTMLElement>,
 ): HTMLElement | undefined => {
-  if (!ns && !param) return undefined;
+  if (!ns || !param) return undefined;
 
-  if (typeof param === "string") {
+  if (isString(param)) {
     return getDocument().createElementNS(ns, param) as HTMLElement;
   }
 
   const { tagName } = param;
-  const newElement = createElementNS(ns, tagName as string);
+  const newElement = createElementNS(ns, tagName);
 
   if (!newElement) return undefined;
 
-  const attr = { ...param };
+  const attr = { ...(param as Record<string, unknown>) };
   delete attr.tagName;
 
   ObjectEntries(attr).forEach(([key, value]) => {
-    setAttribute(newElement, key, value);
+    if (isString(key as string) && isString(value as string)) {
+      setAttribute(newElement, key as string, value as string);
+    }
   });
 
   return newElement;

package/src/misc/data.ts

@@ -1,65 +1,73 @@
-import isHTMLElement from "../is/isHTMLElement";
+import isHTMLElement from '../is/isHTMLElement';
 
-type ComponentDataMap = Map<string, Map<HTMLElement, Record<string, any>>>;
-
-const componentData: ComponentDataMap = new Map();
+const componentData = new Map<string, Map<HTMLElement, any>>();
 
 /**
  * An interface for web components background data.
+ *
  * @see https://github.com/thednp/bootstrap.native/blob/master/src/components/base-component.js
  */
 const Data = {
   /**
    * Sets web components data.
+   *
    * @param element target element
    * @param component the component's name or a unique key
    * @param instance the component instance
    */
-  set: (element: HTMLElement, component: string, instance: Record<string, any>): void => {
+  set: <T>(element: HTMLElement, component: string, instance: T): void => {
     if (!isHTMLElement(element)) return;
 
     /* istanbul ignore else */
     if (!componentData.has(component)) {
-      componentData.set(component, new Map());
+      componentData.set(component, new Map<HTMLElement, T>());
     }
 
-    const instanceMap = componentData.get(component);
+    const instanceMap = componentData.get(component) as Map<HTMLElement, T>;
     // not undefined, but defined right above
     instanceMap.set(element, instance);
   },
 
   /**
    * Returns all instances for specified component.
+   *
    * @param component the component's name or a unique key
-   * @returns {} all the component instances
+   * @returns all the component instances
    */
-  getAllFor: (component: string): Map<HTMLElement, Record<string, any>> | null => {
-    const instanceMap = componentData.get(component);
+  getAllFor: <T>(component: string): Map<HTMLElement, T> | null => {
+    const instanceMap = componentData.get(component) as Map<HTMLElement, T>;
 
     return instanceMap || null;
   },
 
   /**
    * Returns the instance associated with the target.
+   *
    * @param element target element
    * @param component the component's name or a unique key
    * @returns the instance
    */
-  get: (element: HTMLElement, component: string): Record<string, any> | null => {
+  get: <T>(element: HTMLElement, component: string): T | null => {
     if (!isHTMLElement(element) || !component) return null;
-    const allForC = Data.getAllFor(component);
-    const instance = element && allForC && allForC.get(element);
+    const instanceMap = Data.getAllFor<T>(component);
+    // const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
+
+    const instance = element && instanceMap && instanceMap.get(element);
 
+    // return (instance as T) || null;
     return instance || null;
   },
 
   /**
    * Removes web components data.
+   *
    * @param element target element
    * @param component the component's name or a unique key
    */
-  remove: (element: HTMLElement, component: string): void => {
-    const instanceMap = componentData.get(component);
+  remove: <T>(element: HTMLElement, component: string): void => {
+    const instanceMap = Data.getAllFor<T>(component);
+    // const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
+
     if (!instanceMap || !isHTMLElement(element)) return;
 
     instanceMap.delete(element);
@@ -71,9 +79,4 @@ const Data = {
   },
 };
 
-/**
- * An alias for `Data.get()`.
- */
-export const getInstance = (target: HTMLElement, component: string) => Data.get(target, component);
-
 export default Data;

package/src/misc/dispatchEvent.ts

@@ -4,6 +4,6 @@
  * @param element is the target
  * @param event is the `Event` object
  */
-const dispatchEvent = (element: HTMLElement, event: Event): boolean => element.dispatchEvent(event);
+const dispatchEvent = (element: EventTarget, event: Event): boolean => element.dispatchEvent(event);
 
 export default dispatchEvent;

package/src/misc/distinct.ts

@@ -1,5 +1,6 @@
 /**
  * JavaScript `Array` distinct.
+ *
  * @see https://codeburst.io/javascript-array-distinct-5edc93501dc4
  *
  * @example
@@ -7,11 +8,11 @@
  * [0,1,1,2].filter(distinct)
  * // => [0,1,2]
  * ```
- * @param value aray item value
+ * @param value array item value
  * @param index array item index
- * @param self the array
+ * @param arr a clone of the target array
  * @returns the query result
  */
-const distinct = (value: any, index: number, self: any[]): boolean => self.indexOf(value) === index;
+const distinct = <T>(value: T, index: number, arr: T[]): boolean => arr.indexOf(value) === index;
 
 export default distinct;

package/src/misc/emulateAnimationEnd.ts

@@ -1,7 +1,7 @@
-import animationEndEvent from "../strings/animationEndEvent";
-import getElementAnimationDelay from "../get/getElementAnimationDelay";
-import getElementAnimationDuration from "../get/getElementAnimationDuration";
-import dispatchEvent from "./dispatchEvent";
+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
@@ -17,9 +17,7 @@ const emulateAnimationEnd = (element: HTMLElement, handler: EventListener): void
   const delay = getElementAnimationDelay(element);
 
   if (duration) {
-    /**
-     * Wrap the handler in on -> off callback
-     */
+    /** Wrap the handler in on -> off callback */
     const animationEndWrapper = (e: Event): void => {
       /* istanbul ignore else */
       if (e.target === element) {

package/src/misc/emulateTransitionEnd.ts

@@ -1,7 +1,7 @@
-import transitionEndEvent from "../strings/transitionEndEvent";
-import getElementTransitionDelay from "../get/getElementTransitionDelay";
-import getElementTransitionDuration from "../get/getElementTransitionDuration";
-import dispatchEvent from "./dispatchEvent";
+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
@@ -17,10 +17,8 @@ const emulateTransitionEnd = (element: HTMLElement, handler: EventListener): voi
   const delay = getElementTransitionDelay(element);
 
   if (duration) {
-    /**
-     * Wrap the handler in on -> off callback
-     */
-    const transitionEndWrapper = (e: Event) => {
+    /** Wrap the handler in on -> off callback */
+    const transitionEndWrapper = (e: Event): void => {
       /* istanbul ignore else */
       if (e.target === element) {
         handler.apply(element, [e]);

package/src/misc/focus.ts

@@ -1,8 +1,9 @@
 /**
- * Utility to focus an `HTMLElement` target.
+ * Shortie for `HTMLElement.focus()` method.
  *
  * @param element is the target
+ * @param options allows to pass additional options such as `preventScroll: boolean`
  */
-const focus = (element: HTMLElement) => element.focus();
+const focus = (element: HTMLOrSVGElement, options?: FocusOptions): void => element.focus(options);
 
 export default focus;

package/src/misc/getInstance.ts

@@ -0,0 +1,9 @@
+import Data from './data';
+
+/**
+ * An alias for `Data.get()`.
+ */
+const getInstance = <T>(target: HTMLElement, component: string): T | null =>
+  Data.get(target, component);
+
+export default getInstance;

package/src/misc/noop.ts

@@ -1,4 +1,6 @@
 /** A generic function with empty body. */
-const noop = () => {};
+const noop = () => {
+  // this is a noop
+};
 
 export default noop;

package/src/misc/normalizeOptions.ts

@@ -1,7 +1,8 @@
-import getAttribute from "../attr/getAttribute";
-import normalizeValue from "./normalizeValue";
-import ObjectKeys from "./ObjectKeys";
-import toLowerCase from "./toLowerCase";
+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.
@@ -12,36 +13,39 @@ import toLowerCase from "./toLowerCase";
  * @param ns component namespace
  * @return normalized component options object
  */
-const normalizeOptions = (
+const normalizeOptions = <T extends { [key: string]: any }>(
   element: HTMLElement,
-  defaultOps: Record<string, any>,
-  inputOps: Record<string, any>,
-  ns?: string
-) => {
+  defaultOps: T,
+  inputOps: Partial<T>,
+  ns?: string,
+): T => {
+  const INPUT = { ...inputOps };
   const data = { ...element.dataset };
-  const normalOps: Record<string, any> = {};
-  const dataOps: Record<string, any> = {};
-  const title = "title";
+  const normalOps = { ...defaultOps };
+  const dataOps: Partial<T> = {};
+  const title = 'title';
 
-  ObjectKeys(data).forEach((k) => {
-    const key =
-      ns && k.includes(ns) ? k.replace(ns, "").replace(/[A-Z]/, (match) => toLowerCase(match)) : k;
+  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(data[k]);
+    dataOps[key] = normalizeValue(v) as T[keyof T];
   });
 
-  ObjectKeys(inputOps).forEach((k) => {
-    inputOps[k] = normalizeValue(inputOps[k]);
+  ObjectEntries(INPUT).forEach(([k, v]) => {
+    INPUT[k] = normalizeValue(v) as T[keyof T];
   });
 
-  ObjectKeys(defaultOps).forEach((k) => {
+  ObjectEntries(defaultOps).forEach(([k, v]) => {
     /* istanbul ignore else */
-    if (k in inputOps) {
-      normalOps[k] = inputOps[k];
+    if (k in INPUT) {
+      normalOps[k] = INPUT[k] as T[keyof T];
     } else if (k in dataOps) {
-      normalOps[k] = dataOps[k];
+      normalOps[k] = dataOps[k] as T[keyof T];
     } else {
-      normalOps[k] = k === title ? getAttribute(element, title) : defaultOps[k];
+      normalOps[k] = (k === title ? getAttribute(element, title) : v) as T[keyof T];
     }
   });
 

package/src/misc/normalizeValue.ts

@@ -1,8 +1,4 @@
-/**
- * The raw value or a given component option.
- *
- * @typedef {} niceValue
- */
+type NormalValue = boolean | number | string | ((...args: any[]) => any) | null;
 
 /**
  * Utility to normalize component options
@@ -10,31 +6,25 @@
  * @param value the input value
  * @return the normalized value
  */
-const normalizeValue = (value: any): string | HTMLElement | Function | number | boolean | null => {
-  if (["true", true].includes(value)) {
-    // boolean
-    // if ('true' === value) { // boolean
+const normalizeValue = (value?: boolean | number | string): NormalValue => {
+  if (['true', true].includes(value as boolean)) {
     return true;
   }
 
-  if (["false", false].includes(value)) {
-    // boolean
-    // if ('false' === value) { // boolean
+  if (['false', false].includes(value as boolean)) {
     return false;
   }
 
-  if (value === "" || value === "null") {
-    // null
+  if (['null', '', null, undefined].includes(value as string | undefined)) {
     return null;
   }
 
-  if (value !== "" && !Number.isNaN(+value)) {
-    // number
-    return +value;
+  if (value !== '' && !Number.isNaN(+(value as string))) {
+    return +(value as string);
   }
 
-  // string / function / HTMLElement / object
-  return value;
+  // string / function / HTMLElement / object / undefined
+  return value as NormalValue;
 };
 
 export default normalizeValue;

package/src/misc/setElementStyle.ts

@@ -1,17 +1,20 @@
-import ObjectAssign from "./ObjectAssign";
-import ObjectEntries from "./ObjectEntries";
+import ObjectAssign from './ObjectAssign';
+import ObjectEntries from './ObjectEntries';
+import isString from '../is/isString';
+import type { 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: Partial<CSSStyleDeclaration>): void => {
-  ObjectEntries(styles).forEach(([key, value]: [string, string]) => {
-    if (key.includes("--")) {
-      element.style.setProperty(key, value);
+const setElementStyle = (element: HTMLElement, styles: Partial<CSS4Declaration>): void => {
+  ObjectEntries(styles).forEach(([key, value]) => {
+    if (value && isString(key as string) && (key as string).includes('--')) {
+      element.style.setProperty(key as string, value);
     } else {
-      const propObject: Record<string, string> = {};
+      const propObject: Partial<CSS4Declaration> = {};
       propObject[key] = value;
       ObjectAssign(element.style, propObject);
     }

package/src/misc/timer.ts

@@ -1,19 +1,26 @@
-import isHTMLElement from "../is/isHTMLElement";
+import isMap from '../is/isMap';
+import isHTMLElement from '../is/isHTMLElement';
+import isNumber from '../is/isNumber';
 
-const TimeCache = new Map();
+type KeyMap = Map<string, number>;
+type TimeMap = Map<HTMLElement, number | KeyMap>;
+
+const TimeCache: TimeMap = new Map() as TimeMap;
 /**
  * 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: ReturnType<any>, delay: number, key?: string) => {
+  set: (element: HTMLElement, callback: TimerHandler, delay: number, key?: string): void => {
     if (!isHTMLElement(element)) return;
 
     /* istanbul ignore else */
@@ -22,50 +29,53 @@ const Timer = {
       if (!TimeCache.has(element)) {
         TimeCache.set(element, new Map());
       }
-      const keyTimers = TimeCache.get(element);
-      keyTimers.set(key, setTimeout(callback, delay));
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      (TimeCache.get(element) as KeyMap).set(key, setTimeout(callback, delay));
     } else {
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
       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) => {
+  get: (element: HTMLElement, key?: string): number | null => {
     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;
+    if (key && keyTimers && isMap(keyTimers as KeyMap)) {
+      return (keyTimers as KeyMap).get(key) || /* istanbul ignore next */ null;
+    } else if (isNumber(keyTimers as number)) {
+      return keyTimers as number;
     }
-    return keyTimers || null;
+    return null;
   },
 
   /**
    * Clears the element's timer.
+   *
    * @param element target element
    * @param key a unique key
    */
-  clear: (element: HTMLElement, key: string) => {
+  clear: (element: HTMLElement, key?: string): void => {
     if (!isHTMLElement(element)) return;
 
-    if (key && key.length) {
-      const keyTimers = TimeCache.get(element);
+    const keyTimers = TimeCache.get(element);
+
+    if (key && key.length && isMap(keyTimers as KeyMap)) {
+      clearTimeout((keyTimers as KeyMap).get(key));
+      (keyTimers as KeyMap).delete(key);
       /* istanbul ignore else */
-      if (keyTimers && keyTimers.get) {
-        clearTimeout(keyTimers.get(key));
-        keyTimers.delete(key);
-        /* istanbul ignore else */
-        if (keyTimers.size === 0) {
-          TimeCache.delete(element);
-        }
+      if ((keyTimers as KeyMap).size === 0) {
+        TimeCache.delete(element);
       }
     } else {
-      clearTimeout(TimeCache.get(element));
+      clearTimeout(keyTimers as number);
       TimeCache.delete(element);
     }
   },

package/src/selectors/getCustomElements.ts

@@ -1,16 +1,18 @@
-import isCustomElement from "../is/isCustomElement";
-import getElementsByTagName from "./getElementsByTagName";
+import isCustomElement from '../is/isCustomElement';
+import getElementsByTagName from './getElementsByTagName';
+import type { CustomElement } from '../interface/customElement';
 
 /**
  * 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): HTMLElement[] => {
-  const collection = getElementsByTagName("*", parent);
+const getCustomElements = (parent?: ParentNode): CustomElement[] => {
+  const collection = getElementsByTagName('*', parent);
 
   return [...collection].filter(isCustomElement);
 };

package/src/selectors/getElementById.ts

@@ -1,7 +1,7 @@
-import getDocument from "../get/getDocument";
+import getDocument from '../get/getDocument';
 
 /**
- * Returns an `Element` that matches the id in the document.
+ * Returns an `HTMLElement` that matches the id in the document.
  * Within multiple <iframe> elements, a `parent` parameter
  * would decisively locate the correct element.
  *
@@ -9,7 +9,7 @@ import getDocument from "../get/getDocument";
  * @param context an element in it's document or document
  * @returns the requested element
  */
-const getElementById = (id: string, context?: ParentNode): HTMLElement | null => {
+const getElementById = (id: string, context?: Node): HTMLElement | null => {
   return getDocument(context).getElementById(id) || null;
 };
 

package/src/selectors/getElementsByClassName.ts

@@ -1,21 +1,21 @@
-import getDocument from "../get/getDocument";
-import isNode from "../is/isNode";
+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 elector the class name
+ * @param selector the class name
  * @param parent optional Element to look into
  * @return the 'HTMLCollection'
  */
 const getElementsByClassName = (
   selector: string,
-  parent?: ParentNode
+  parent?: ParentNode,
 ): HTMLCollectionOf<HTMLElement> => {
   const lookUp = parent && isNode(parent) ? parent : getDocument();
   return (lookUp as HTMLElement | Document).getElementsByClassName(
-    selector
+    selector,
   ) as HTMLCollectionOf<HTMLElement>;
 };