@thednp/shorty 2.0.0-alpha4 → 2.0.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/shorty",
-  "version": "2.0.0alpha4",
+  "version": "2.0.0alpha5",
   "description": "TypeScript shorties for the web",
   "source": "./src/index.ts",
   "main": "./dist/shorty.js",
@@ -25,7 +25,8 @@
     "cypress": "npm run pre-test && npx cypress open",
     "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
     "format": "prettier --write \"src/**/*.ts\"",
-    "lint:ts": "tslint -p tsconfig.json",
+    "lint:ts": "eslint -c .eslintrc.js --ext .ts src",
+    "fix:ts": "eslint -c .eslintrc.js --ext .ts src --fix",
     "build": "npm run clean && tsc && vite build && dts-bundle-generator --config ./dts.config.ts"
   },
   "publishConfig": {
@@ -52,17 +53,22 @@
     "@cypress/code-coverage": "^3.10.0",
     "@testing-library/cypress": "^8.0.3",
     "@types/istanbul-lib-instrument": "^1.7.4",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
     "cypress": "^10.6.0",
     "dts-bundle-generator": "^6.12.0",
     "esbuild": "^0.14.30",
+    "eslint": "^8.23.0",
+    "eslint-plugin-jsdoc": "^39.3.6",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-prettier": "^4.2.1",
     "istanbul-lib-coverage": "^3.2.0",
     "istanbul-lib-instrument": "^5.2.0",
+    "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0",
     "typescript": "^4.7.4",
     "vite": "^3.0.9"
   }

package/src/attr/getAttribute.ts

@@ -1,9 +1,11 @@
 /**
  * Shortcut for `HTMLElement.getAttribute()` method.
+ *
  * @param element target element
  * @param att attribute name
  * @returns attribute value
  */
-const getAttribute = (element: HTMLElement, att: string): string | null => element.getAttribute(att);
+const getAttribute = (element: HTMLElement, att: string): string | null =>
+  element.getAttribute(att);
 
 export default getAttribute;

package/src/attr/getAttributeNS.ts

@@ -1,10 +1,12 @@
 /**
  * Shortcut for `HTMLElement.getAttributeNS()` method.
+ *
  * @param ns attribute namespace
  * @param element target element
  * @param att attribute name
  * @returns attribute value
  */
-const getAttributeNS = (ns: string, element: HTMLElement, att: string) => element.getAttributeNS(ns, att);
+const getAttributeNS = (ns: string, element: HTMLElement, att: string) =>
+  element.getAttributeNS(ns, att);
 
 export default getAttributeNS;

package/src/attr/hasAttribute.ts

@@ -1,5 +1,6 @@
 /**
  * Shortcut for `HTMLElement.hasAttribute()` method.
+ *
  * @param element target element
  * @param att attribute name
  * @returns the query result

package/src/attr/hasAttributeNS.ts

@@ -1,10 +1,12 @@
 /**
  * Shortcut for `HTMLElement.hasAttributeNS()` method.
+ *
  * @param ns attribute namespace
  * @param element target element
  * @param att attribute name
  * @returns the query result
  */
-const hasAttributeNS = (ns: string, element: HTMLElement, att: string): boolean => element.hasAttributeNS(ns, att);
+const hasAttributeNS = (ns: string, element: HTMLElement, att: string): boolean =>
+  element.hasAttributeNS(ns, att);
 
 export default hasAttributeNS;

package/src/attr/removeAttribute.ts

@@ -1,5 +1,6 @@
 /**
  * Shortcut for `HTMLElement.removeAttribute()` method.
+ *
  * @param element target element
  * @param att attribute name
  */

package/src/attr/removeAttributeNS.ts

@@ -1,9 +1,11 @@
 /**
  * Shortcut for `HTMLElement.removeAttributeNS()` method.
+ *
  * @param ns attribute namespace
  * @param  element target element
  * @param att attribute name
  */
-const removeAttributeNS = (ns: string, element: HTMLElement, att: string): void => element.removeAttributeNS(ns, att);
+const removeAttributeNS = (ns: string, element: HTMLElement, att: string): void =>
+  element.removeAttributeNS(ns, att);
 
 export default removeAttributeNS;

package/src/attr/setAttribute.ts

@@ -1,9 +1,11 @@
 /**
  * Shortcut for `HTMLElement.setAttribute()` method.
+ *
  * @param element target element
  * @param att attribute name
  * @param value attribute value
  */
-const setAttribute = (element: HTMLElement, att: string, value: string) => element.setAttribute(att, value);
+const setAttribute = (element: HTMLElement, att: string, value: string) =>
+  element.setAttribute(att, value);
 
 export default setAttribute;

package/src/attr/setAttributeNS.ts

@@ -1,5 +1,6 @@
 /**
  * Shortcut for `SVGElement.setAttributeNS()` method.
+ *
  * @param ns attribute namespace
  * @param element target element
  * @param att attribute name

package/src/boolean/isMobile.ts

@@ -6,7 +6,7 @@ let isMobileCheck = false;
 
 /* istanbul ignore else */
 if (userAgentData) {
-  isMobileCheck = userAgentData.brands.some((x) => mobileBrands.test(x.brand));
+  isMobileCheck = userAgentData.brands.some(x => mobileBrands.test(x.brand));
 } else {
   isMobileCheck = mobileBrands.test(userAgent);
 }

package/src/boolean/support3DTransform.ts

@@ -3,6 +3,6 @@ import documentHead from '../blocks/documentHead';
 /**
  * A global `boolean` for CSS3 3D transform support.
  */
-const support3DTransform = ['webkitPerspective', 'perspective'].some((p) => p in documentHead.style);
+const support3DTransform = ['webkitPerspective', 'perspective'].some(p => p in documentHead.style);
 
 export default support3DTransform;

package/src/boolean/supportAnimation.ts

@@ -3,6 +3,6 @@ import documentHead from '../blocks/documentHead';
 /**
  * A global `boolean` for CSS3 animation support.
  */
-const supportAnimation = ['webkitAnimation', 'animation'].some((p) => p in documentHead.style);
+const supportAnimation = ['webkitAnimation', 'animation'].some(p => p in documentHead.style);
 
 export default supportAnimation;

package/src/boolean/supportPassive.ts

@@ -12,7 +12,7 @@ const supportPassive = (() => {
   let result = false;
   try {
     const opts = Object.defineProperty({}, 'passive', {
-      get() {
+      get: () => {
         result = true;
         return result;
       },

package/src/boolean/supportTouch.ts

@@ -1,6 +1,7 @@
 /**
  * A global `boolean` for touch events support.
  */
-const supportTouch = 'ontouchstart' in window || /* istanbul ignore next */ 'msMaxTouchPoints' in navigator;
+const supportTouch =
+  'ontouchstart' in window || /* istanbul ignore next */ 'msMaxTouchPoints' in navigator;
 
 export default supportTouch;

package/src/boolean/supportTransform.ts

@@ -3,6 +3,6 @@ import documentHead from '../blocks/documentHead';
 /**
  * A global `boolean` for CSS3 transform support.
  */
-const supportTransform = ['webkitTransform', 'transform'].some((p) => p in documentHead.style);
+const supportTransform = ['webkitTransform', 'transform'].some(p => p in documentHead.style);
 
 export default supportTransform;

package/src/boolean/supportTransition.ts

@@ -3,6 +3,6 @@ import documentHead from '../blocks/documentHead';
 /**
  * A global `boolean` for CSS3 transition support.
  */
-const supportTransition = ['webkitTransition', 'transition'].some((p) => p in documentHead.style);
+const supportTransition = ['webkitTransition', 'transition'].some(p => p in documentHead.style);
 
 export default supportTransition;

package/src/event/off.ts

@@ -1,12 +1,14 @@
 /**
  * Remove eventListener from an `EventTarget` object.
  */
-export default function off(
+const off = (
   element: EventTarget,
   eventName: string,
   listener: EventListener,
   options?: AddEventListenerOptions,
-) {
+) => {
   const ops = options || false;
   element.removeEventListener(eventName, listener, ops);
-}
+};
+
+export default off;

package/src/event/on.ts

@@ -1,12 +1,14 @@
 /**
  * Add eventListener to an `EventTarget` object.
  */
-export default function on(
+const on = (
   element: EventTarget,
   eventName: string,
   listener: EventListener,
   options?: AddEventListenerOptions,
-) {
+) => {
   const ops = options || false;
   element.addEventListener(eventName, listener, ops);
-}
+};
+
+export default on;

package/src/event/one.ts

@@ -5,7 +5,12 @@ import off from './off';
  * Add an `eventListener` to an `EventTarget`
  * element and remove it once callback is called.
  */
-const one = (element: EventTarget, eventName: string, listener: EventListener, options?: AddEventListenerOptions) => {
+const one = (
+  element: EventTarget,
+  eventName: string,
+  listener: EventListener,
+  options?: AddEventListenerOptions,
+) => {
   /** Wrap the listener for easy on -> off */
   const handlerWrapper = (e: Event): void => {
     /* istanbul ignore else */

package/src/get/getBoundingClientRect.ts

@@ -3,13 +3,17 @@ import { BoundingClientRect } from '../interface/boundingClientRect';
 
 /**
  * Returns the bounding client rect of a target `HTMLElement`.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
  * @param element event.target
  * @param includeScale when *true*, the target scale is also computed
  * @returns the bounding client rect object
  */
-const getBoundingClientRect = (element: HTMLElement, includeScale?: boolean): BoundingClientRect => {
+const getBoundingClientRect = (
+  element: HTMLElement,
+  includeScale?: boolean,
+): BoundingClientRect => {
   const { width, height, top, right, bottom, left } = element.getBoundingClientRect();
   let scaleX = 1;
   let scaleY = 1;

package/src/get/getDocument.ts

@@ -4,18 +4,19 @@ import isDocument from '../is/isDocument';
 
 /**
  * Returns the `document` or the `#document` element.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
  * @param node the reference node
  * @returns the parent document of the given node
  */
-const getDocument = (node?: any): Document => {
+const getDocument = (node?: Node | Document | Window): Document => {
+  // node instanceof Window
+  if (isWindow(node)) return node.document;
   // node instanceof Document
   if (isDocument(node)) return node;
   // node instanceof Node
   if (isNode(node)) return node.ownerDocument as Document;
-  // node instanceof Window
-  if (isWindow(node)) return node.document;
   // node is undefined | NULL
   return window.document;
 };

package/src/get/getDocumentBody.ts

@@ -6,7 +6,7 @@ import getDocument from './getDocument';
  * @param node the reference node
  * @returns the parent `<body>` of the specified node
  */
-const getDocumentBody = (node?: any): HTMLElement => {
+const getDocumentBody = (node?: Node): HTMLElement => {
   return getDocument(node).body;
 };
 

package/src/get/getElementAnimationDelay.ts

@@ -13,7 +13,8 @@ const getElementAnimationDelay = (element: HTMLElement): number => {
   const propertyValue = getElementStyle(element, animationName);
   const durationValue = getElementStyle(element, animationDelay);
   const durationScale = durationValue.includes('ms') ? /* istanbul ignore next */ 1 : 1000;
-  const duration = propertyValue && propertyValue !== 'none' ? parseFloat(durationValue) * durationScale : 0;
+  const duration =
+    propertyValue && propertyValue !== 'none' ? parseFloat(durationValue) * durationScale : 0;
 
   return !Number.isNaN(duration) ? duration : /* istanbul ignore next */ 0;
 };

package/src/get/getElementAnimationDuration.ts

@@ -13,7 +13,8 @@ const getElementAnimationDuration = (element: HTMLElement): number => {
   const propertyValue = getElementStyle(element, animationName);
   const durationValue = getElementStyle(element, animationDuration);
   const durationScale = durationValue.includes('ms') ? /* istanbul ignore next */ 1 : 1000;
-  const duration = propertyValue && propertyValue !== 'none' ? parseFloat(durationValue) * durationScale : 0;
+  const duration =
+    propertyValue && propertyValue !== 'none' ? parseFloat(durationValue) * durationScale : 0;
 
   return !Number.isNaN(duration) ? duration : /* istanbul ignore next */ 0;
 };

package/src/get/getElementTransitionDelay.ts

@@ -13,7 +13,8 @@ const getElementTransitionDelay = (element: HTMLElement): number => {
   const propertyValue = getElementStyle(element, transitionProperty);
   const delayValue = getElementStyle(element, transitionDelay);
   const delayScale = delayValue.includes('ms') ? /* istanbul ignore next */ 1 : 1000;
-  const duration = propertyValue && propertyValue !== 'none' ? parseFloat(delayValue) * delayScale : 0;
+  const duration =
+    propertyValue && propertyValue !== 'none' ? parseFloat(delayValue) * delayScale : 0;
 
   return !Number.isNaN(duration) ? duration : /* istanbul ignore next */ 0;
 };

package/src/get/getElementTransitionDuration.ts

@@ -13,7 +13,8 @@ const getElementTransitionDuration = (element: HTMLElement): number => {
   const propertyValue = getElementStyle(element, transitionProperty);
   const durationValue = getElementStyle(element, transitionDuration);
   const durationScale = durationValue.includes('ms') ? /* istanbul ignore next */ 1 : 1000;
-  const duration = propertyValue && propertyValue !== 'none' ? parseFloat(durationValue) * durationScale : 0;
+  const duration =
+    propertyValue && propertyValue !== 'none' ? parseFloat(durationValue) * durationScale : 0;
 
   return !Number.isNaN(duration) ? duration : /* istanbul ignore next */ 0;
 };

package/src/get/getParentNode.ts

@@ -5,12 +5,13 @@ import isNode from '../is/isNode';
 
 /**
  * Returns the `parentNode` also going through `ShadowRoot`.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
  * @param {Node} node the target node
  * @returns {Node} the apropriate parent node
  */
-const getParentNode = (node: Node): Node => {
+const getParentNode = (node: Node): Node | ParentNode => {
   if (node.nodeName === 'HTML') {
     return node;
   }

package/src/get/getRectRelativeToOffsetParent.ts

@@ -5,6 +5,7 @@ import getBoundingClientRect from './getBoundingClientRect';
 
 /**
  * Returns the rect relative to a given offset parent and its scroll position.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
  * @param element target

package/src/get/getUID.ts

@@ -24,8 +24,8 @@ const getUID = (element: HTMLElement, key?: string): number => {
     if (!elementIDMap.has(elID)) {
       elementIDMap.set(elID, elMap);
     }
-    if (isMap(elMap) && !elMap.has(key)) {
-      elMap.set(key, result);
+    if (isMap(elMap as KeyIdMap) && !(elMap as KeyIdMap).has(key)) {
+      (elMap as KeyIdMap).set(key, result);
       elementUID += 1;
     } else result = (elMap as KeyIdMap).get(key) as number;
   } else {

package/src/get/getWindow.ts

@@ -3,6 +3,7 @@ import isNode from '../is/isNode';
 
 /**
  * Returns the `Window` object of a target node.
+ *
  * @see https://github.com/floating-ui/floating-ui
  *
  * @param node target node

package/src/index.ts

@@ -153,6 +153,11 @@ import on from './event/on';
 import off from './event/off';
 import one from './event/one';
 
+// blocks
+import documentBody from './blocks/documentBody';
+import documentElement from './blocks/documentElement';
+import documentHead from './blocks/documentHead';
+
 // misc
 import ArrayFrom from './misc/ArrayFrom';
 import Data, { getInstance } from './misc/data';
@@ -172,7 +177,7 @@ import ObjectAssign from './misc/ObjectAssign';
 import ObjectEntries from './misc/ObjectEntries';
 import ObjectKeys from './misc/ObjectKeys';
 import ObjectValues from './misc/ObjectValues';
-import OriginalEvent from './misc/OriginalEvent';
+import createCustomEvent from './misc/createCustomEvent';
 import passiveHandler from './misc/passiveHandler';
 import reflow from './misc/reflow';
 import setElementStyle from './misc/setElementStyle';
@@ -361,12 +366,16 @@ const SHORTY = {
   on,
   off,
   one,
+  documentBody,
+  documentElement,
+  documentHead,
   dispatchEvent,
   distinct,
   Data,
   getInstance,
   createElement,
   createElementNS,
+  createCustomEvent,
   toUpperCase,
   toLowerCase,
   Timer,
@@ -429,7 +438,6 @@ const SHORTY = {
   ObjectEntries,
   ObjectKeys,
   ObjectValues,
-  OriginalEvent,
   getBoundingClientRect,
   getDocument,
   getDocumentBody,

package/src/interface/originalEvent.ts

@@ -1,3 +1,4 @@
-export interface OriginalEvent<T> extends CustomEvent<T> {
+export interface OriginalEvent extends CustomEvent<any> {
+  readonly type: string;
   relatedTarget?: EventTarget;
 }

package/src/is/isCanvas.ts

@@ -5,7 +5,7 @@
  * @returns the query result
  */
 
-const isCanvas = (element?: any): element is HTMLCanvasElement =>
-  (element && element.constructor.name === 'HTMLCanvasElement') || false;
+const isCanvas = (element?: Node): element is HTMLCanvasElement =>
+  (element && element.nodeName === 'CANVAS') || false;
 
 export default isCanvas;

package/src/is/isCustomElement.ts

@@ -6,7 +6,7 @@ import { CustomElement } from '../interface/customElement';
  * @param element the target object
  * @returns the query result
  */
-const isCustomElement = <T extends CustomElement>(element?: any): element is T =>
-  (element && !!element.shadowRoot) || false;
+const isCustomElement = <T extends CustomElement>(element?: T | Node): element is T =>
+  (element && !!(element as CustomElement).shadowRoot) || false;
 
 export default isCustomElement;

package/src/is/isDocument.ts

@@ -1,10 +1,11 @@
 /**
  * Checks if an object is a `Document`.
+ *
  * @see https://dom.spec.whatwg.org/#node
  *
  * @param obj the target object
  * @returns the query result
  */
-const isDocument = (obj?: any): obj is Document => (obj && obj.nodeType === 9) || false;
+const isDocument = (obj?: Node | Document): obj is Document => (obj && obj.nodeType === 9) || false;
 
 export default isDocument;

package/src/is/isElement.ts

@@ -1,5 +1,6 @@
 /**
  * Checks if an object is an `Element`.
+ *
  * @see https://dom.spec.whatwg.org/#node
  *
  * ```
@@ -18,7 +19,7 @@
  * @param element the target object
  * @returns the query result
  */
-const isElement = (element?: any): element is Element =>
-  (element && [1, 2, 3, 4, 5, 6, 7, 8].some((x) => element.nodeType === x)) || false;
+const isElement = (element?: Element | Node): element is Element =>
+  (element && [1, 2, 3, 4, 5, 6, 7, 8].some(x => element.nodeType === x)) || false;
 
 export default isElement;

package/src/is/isElementsArray.ts

@@ -7,6 +7,7 @@ import isArray from './isArray';
  * @param obj the target object
  * @returns the query result
  */
-const isElementsArray = (obj?: any): obj is HTMLElement[] => (isArray(obj) && obj.every(isHTMLElement)) || false;
+const isElementsArray = (obj?: any): obj is HTMLElement[] =>
+  (isArray(obj) && obj.every(isHTMLElement)) || false;
 
 export default isElementsArray;

package/src/is/isFunction.ts

@@ -4,6 +4,7 @@
  * @param fn the target object
  * @returns the query result
  */
-const isFunction = (fn?: any): fn is (() => any) => (fn && fn.constructor.name === 'Function') || false;
+const isFunction = <T extends (...arg0: any[]) => any>(fn?: T): fn is T =>
+  typeof fn === 'function' || false;
 
 export default isFunction;

package/src/is/isHTMLCollection.ts

@@ -4,7 +4,7 @@
  * @param obj the target object
  * @returns the query result
  */
-const isHTMLCollection = (obj?: any): obj is HTMLCollection =>
+const isHTMLCollection = (obj?: HTMLCollection): obj is HTMLCollection =>
   (obj && obj.constructor.name === 'HTMLCollection') || false;
 
 export default isHTMLCollection;

package/src/is/isHTMLElement.ts

@@ -1,9 +1,11 @@
 /**
  * Checks if an element is an `HTMLElement`.
+ *
  * @see https://dom.spec.whatwg.org/#node
  *
  * @param element the target object
  * @returns the query result
  */
-const isHTMLElement = (element?: any): element is HTMLElement => (element && element.nodeType === 1) || false;
+const isHTMLElement = (element?: HTMLElement | Node): element is HTMLElement =>
+  (element && element.nodeType === 1) || false;
 export default isHTMLElement;

package/src/is/isHTMLImageElement.ts

@@ -1,9 +1,10 @@
 /**
  * Check if a target element is an `<img>`.
+ *
  * @param element the target element
  * @returns the query result
  */
-const isHTMLImageElement = (element?: any): element is HTMLImageElement =>
+const isHTMLImageElement = (element?: HTMLImageElement): element is HTMLImageElement =>
   (element && element.tagName === 'IMG') || false;
 
 export default isHTMLImageElement;

package/src/is/isJSON.ts

@@ -6,7 +6,7 @@ import isString from './isString';
  * @param str the target string
  * @returns the query result
  */
-const isJSON = (str?: any): boolean => {
+const isJSON = (str?: string): boolean => {
   if (!isString(str)) return false;
 
   try {

package/src/is/isMap.ts

@@ -4,5 +4,6 @@
  * @param obj the target object
  * @returns the query result
  */
-const isMap = (obj?: any): obj is Map<any, any> => (obj && obj.constructor.name === 'Map') || false;
+const isMap = <T extends Map<any, any>>(obj?: T): obj is T =>
+  (obj && obj.constructor.name === 'Map') || false;
 export default isMap;

package/src/is/isMedia.ts

@@ -3,14 +3,17 @@
  * `<img>`, `<video>` or `<canvas>`.
  *
  * *Tooltip* / *Popover* works different with media elements.
+ *
  * @param element the target element
  * @returns the query result
  */
 
-const isMedia = (element?: any): element is SVGElement | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement =>
+const isMedia = (
+  element?: SVGElement | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement,
+): element is SVGElement | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement =>
   (element &&
     element.nodeType === 1 &&
-    ['SVG', 'Image', 'Video', 'Canvas'].some((s) => element.constructor.name.includes(s))) ||
+    ['SVG', 'Image', 'Video', 'Canvas'].some(s => element.constructor.name.includes(s))) ||
   false;
 
 export default isMedia;

package/src/is/isNode.ts

@@ -5,7 +5,7 @@
  * @returns the query result
  */
 
-const isNode = (node?: any): node is Node =>
-  (node && [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].some((x) => node.nodeType === x)) || false;
+const isNode = (node?: Node): node is Node =>
+  (node && [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].some(x => node.nodeType === x)) || false;
 
 export default isNode;

package/src/is/isNodeList.ts

@@ -5,6 +5,7 @@
  * @param obj the target object
  * @returns the query result
  */
-const isNodeList = (obj?: any): obj is NodeList => (obj && obj.constructor.name === 'NodeList') || false;
+const isNodeList = (obj?: NodeList): obj is NodeList =>
+  (obj && obj.constructor.name === 'NodeList') || false;
 
 export default isNodeList;

package/src/is/isNumber.ts

@@ -4,6 +4,6 @@
  * @param num input value
  * @returns the query result
  */
-const isNumber = (num?: any): num is number => typeof num === 'number' || false;
+const isNumber = (num?: number): num is number => typeof num === 'number' || false;
 
 export default isNumber;