@thednp/shorty 2.0.0-alpha5 → 2.0.0-alpha6

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@thednp/shorty",
-  "version": "2.0.0alpha5",
+  "version": "2.0.0alpha6",
   "description": "TypeScript shorties for the web",
   "source": "./src/index.ts",
   "main": "./dist/shorty.js",
   "types": "./dist/shorty.d.ts",
   "module": "./dist/shorty.mjs",
-  "exports": {
+  "*exports": {
     ".": {
       "import": "./dist/shorty.mjs",
       "require": "./dist/shorty.cjs",
@@ -55,7 +55,7 @@
     "@types/istanbul-lib-instrument": "^1.7.4",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",
-    "cypress": "^10.6.0",
+    "cypress": "^11.2.0",
     "dts-bundle-generator": "^6.12.0",
     "esbuild": "^0.14.30",
     "eslint": "^8.23.0",

package/src/event/one.ts

@@ -14,7 +14,7 @@ const one = (
   /** Wrap the listener for easy on -> off */
   const handlerWrapper = (e: Event): void => {
     /* istanbul ignore else */
-    if (e.target === element) {
+    if (e.target === element || e.currentTarget === element) {
       listener.apply(element, [e]);
       off(element, eventName, handlerWrapper, options);
     }

package/src/get/getElementTransitionDelay.ts

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

package/src/get/getElementTransitionDuration.ts

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

package/src/index.ts

@@ -171,6 +171,7 @@ import Float32ArrayFrom from './misc/Float32ArrayFrom';
 import Float64ArrayFrom from './misc/Float64ArrayFrom';
 import focus from './misc/focus';
 import noop from './misc/noop';
+import hasOwn from './misc/hasOwn';
 import normalizeOptions from './misc/normalizeOptions';
 import normalizeValue from './misc/normalizeValue';
 import ObjectAssign from './misc/ObjectAssign';
@@ -425,6 +426,7 @@ const SHORTY = {
   getElementsByClassName,
   getElementsByTagName,
   matches,
+  hasOwn,
   normalizeValue,
   normalizeOptions,
   reflow,

package/src/interface/customElement.ts

@@ -4,5 +4,5 @@ export interface CustomElement extends HTMLElement {
   disconnectedCallback?: () => void;
   adoptedCallback?: () => void;
   attributeChangedCallback?: () => void;
-  [key: string]: any;
+  // [key: PropertyKey]: any;
 }

package/src/is/isArray.ts

@@ -4,6 +4,6 @@
  * @param obj array-like iterable object
  * @returns the query result
  */
-const isArray = (obj?: any): obj is any[] => Array.isArray(obj) || false;
+const isArray = (obj?: unknown): obj is any[] => Array.isArray(obj) || false;
 
 export default isArray;

package/src/is/isCanvas.ts

@@ -1,3 +1,5 @@
+import isNode from './isNode';
+
 /**
  * Checks if an element is an `HTMLCanvasElement` or `<canvas>`.
  *
@@ -5,7 +7,7 @@
  * @returns the query result
  */
 
-const isCanvas = (element?: Node): element is HTMLCanvasElement =>
-  (element && element.nodeName === 'CANVAS') || false;
+const isCanvas = (element?: unknown): element is HTMLCanvasElement =>
+  (isNode(element) && element.nodeName === 'CANVAS') || false;
 
 export default isCanvas;

package/src/is/isCustomElement.ts

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

package/src/is/isDocument.ts

@@ -1,3 +1,5 @@
+import isNode from './isNode';
+
 /**
  * Checks if an object is a `Document`.
  *
@@ -6,6 +8,6 @@
  * @param obj the target object
  * @returns the query result
  */
-const isDocument = (obj?: Node | Document): obj is Document => (obj && obj.nodeType === 9) || false;
+const isDocument = (obj?: unknown): obj is Document => (isNode(obj) && obj.nodeType === 9) || false;
 
 export default isDocument;

package/src/is/isElement.ts

@@ -1,3 +1,5 @@
+import isNode from './isNode';
+
 /**
  * Checks if an object is an `Element`.
  *
@@ -19,7 +21,7 @@
  * @param element the target object
  * @returns the query result
  */
-const isElement = (element?: Element | Node): element is Element =>
-  (element && [1, 2, 3, 4, 5, 6, 7, 8].some(x => element.nodeType === x)) || false;
+const isElement = (element?: unknown): element is Element =>
+  (isNode(element) && [1, 2, 3, 4, 5, 6, 7, 8].some(x => element.nodeType === x)) || false;
 
 export default isElement;

package/src/is/isElementsArray.ts

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

package/src/is/isFunction.ts

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

package/src/is/isHTMLCollection.ts

@@ -1,10 +1,12 @@
+import isObject from './isObject';
+
 /**
  * Checks if an object is an `HTMLCollection`.
  *
  * @param obj the target object
  * @returns the query result
  */
-const isHTMLCollection = (obj?: HTMLCollection): obj is HTMLCollection =>
-  (obj && obj.constructor.name === 'HTMLCollection') || false;
+const isHTMLCollection = (obj?: unknown): obj is HTMLCollection =>
+  (isObject(obj) && obj.constructor.name === 'HTMLCollection') || false;
 
 export default isHTMLCollection;

package/src/is/isHTMLElement.ts

@@ -1,3 +1,5 @@
+import isNode from './isNode';
+
 /**
  * Checks if an element is an `HTMLElement`.
  *
@@ -6,6 +8,6 @@
  * @param element the target object
  * @returns the query result
  */
-const isHTMLElement = (element?: HTMLElement | Node): element is HTMLElement =>
-  (element && element.nodeType === 1) || false;
+const isHTMLElement = (element?: unknown): element is HTMLElement =>
+  (isNode(element) && element.nodeType === 1) || false;
 export default isHTMLElement;

package/src/is/isHTMLImageElement.ts

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

package/src/is/isMap.ts

@@ -1,9 +1,11 @@
+import isObject from './isObject';
+
 /**
  * Checks if an element is a `Map`.
  *
  * @param obj the target object
  * @returns the query result
  */
-const isMap = <T extends Map<any, any>>(obj?: T): obj is T =>
-  (obj && obj.constructor.name === 'Map') || false;
+const isMap = (obj?: unknown): obj is Map<any, any> =>
+  (isObject(obj) && obj.constructor.name === 'Map') || false;
 export default isMap;

package/src/is/isMedia.ts

@@ -1,3 +1,5 @@
+import isNode from './isNode';
+
 /**
  * Checks if an element is an `<svg>` (or any type of SVG element),
  * `<img>`, `<video>` or `<canvas>`.
@@ -9,10 +11,9 @@
  */
 
 const isMedia = (
-  element?: SVGElement | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement,
+  element?: unknown,
 ): element is SVGElement | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement =>
-  (element &&
-    element.nodeType === 1 &&
+  (isNode(element) &&
     ['SVG', 'Image', 'Video', 'Canvas'].some(s => element.constructor.name.includes(s))) ||
   false;
 

package/src/is/isNode.ts

@@ -1,11 +1,17 @@
+import isObject from './isObject';
+
+type NodeObject = object & { nodeType: number };
+
 /**
  * Checks if an object is a `Node`.
  *
  * @param node the target object
  * @returns the query result
  */
-
-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;
+const isNode = (node?: unknown): node is Node =>
+  (isObject(node) &&
+    typeof (node as NodeObject).nodeType === 'number' &&
+    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].some(x => (node as NodeObject).nodeType === x)) ||
+  false;
 
 export default isNode;

package/src/is/isNodeList.ts

@@ -1,3 +1,5 @@
+import isObject from './isObject';
+
 /**
  * Checks if an object is a `NodeList`.
  * => equivalent to `object instanceof NodeList`
@@ -5,7 +7,7 @@
  * @param obj the target object
  * @returns the query result
  */
-const isNodeList = (obj?: NodeList): obj is NodeList =>
-  (obj && obj.constructor.name === 'NodeList') || false;
+const isNodeList = (obj?: unknown): obj is NodeList =>
+  (isObject(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?: number): num is number => typeof num === 'number' || false;
+const isNumber = (num?: unknown): num is number => typeof num === 'number' || false;
 
 export default isNumber;

package/src/is/isObject.ts

@@ -4,6 +4,7 @@
  * @param obj the target object
  * @returns the query result
  */
-const isObject = (obj?: object): obj is object => typeof obj === 'object' || false;
+const isObject = (obj?: unknown): obj is object =>
+  (obj !== null && obj !== undefined && typeof obj === 'object') || false;
 
 export default isObject;

package/src/is/isSVGElement.ts

@@ -1,3 +1,5 @@
+import isNode from './isNode';
+
 /**
  * Check if an element is an `<svg>` or any other SVG element,
  * an equivalent to `SOMETHING instanceof SVGElement`.
@@ -5,7 +7,7 @@
  * @param element the target element
  * @returns the query result
  */
-const isSVGElement = (element?: SVGElement): element is SVGElement =>
-  (element && element.constructor.name.includes('SVG')) || false;
+const isSVGElement = (element?: unknown): element is SVGElement =>
+  (isNode(element) && element.constructor.name.includes('SVG')) || false;
 
 export default isSVGElement;

package/src/is/isShadowRoot.ts

@@ -1,10 +1,12 @@
+import isNode from './isNode';
+
 /**
  * Check if target is a `ShadowRoot`.
  *
  * @param element target
  * @returns the query result
  */
-const isShadowRoot = (element?: Node | ShadowRoot): element is ShadowRoot =>
-  (element && element.constructor.name === 'ShadowRoot') || false;
+const isShadowRoot = (element?: unknown): element is ShadowRoot =>
+  (isNode(element) && element.constructor.name === 'ShadowRoot') || false;
 
 export default isShadowRoot;

package/src/is/isString.ts

@@ -4,6 +4,6 @@
  * @param str input value
  * @returns the query result
  */
-const isString = (str?: string): str is string => typeof str === 'string' || false;
+const isString = (str?: unknown): str is string => typeof str === 'string' || false;
 
 export default isString;

package/src/is/isTableElement.ts

@@ -1,3 +1,5 @@
+import isNode from './isNode';
+
 /**
  * Check if a target element is a `<table>`, `<td>` or `<th>`.
  * This specific check is important for determining
@@ -6,9 +8,7 @@
  * @param element the target element
  * @returns the query result
  */
-const isTableElement = (
-  element?: HTMLTableElement | HTMLTableCellElement,
-): element is HTMLTableElement | HTMLTableCellElement =>
-  (element && ['TABLE', 'TD', 'TH'].includes(element.tagName)) || false;
+const isTableElement = (element?: unknown): element is HTMLTableElement | HTMLTableCellElement =>
+  (isNode(element) && ['TABLE', 'TD', 'TH'].includes(element.nodeName)) || false;
 
 export default isTableElement;

package/src/is/isWeakMap.ts

@@ -1,9 +1,11 @@
+import isObject from './isObject';
+
 /**
  * Checks if an element is a `WeakMap`.
  *
  * @param obj the target object
  * @returns the query result
  */
-const isWeakMap = <T extends WeakMap<any, unknown>>(obj?: T): obj is T =>
-  (obj && obj.constructor.name === 'WeakMap') || false;
+const isWeakMap = (obj?: unknown): obj is WeakMap<any, any> =>
+  (isObject(obj) && obj.constructor.name === 'WeakMap') || false;
 export default isWeakMap;

package/src/is/isWindow.ts

@@ -1,3 +1,5 @@
+import isObject from './isObject';
+
 /**
  * Check if a target object is `Window`.
  * => equivalent to `object instanceof Window`
@@ -5,7 +7,7 @@
  * @param obj the target object
  * @returns the query result
  */
-const isWindow = (obj?: Node | Window): obj is Window =>
-  (obj && obj.constructor.name === 'Window') || false;
+const isWindow = (obj?: unknown): obj is Window =>
+  (isObject(obj) && obj.constructor.name === 'Window') || false;
 
 export default isWindow;

package/src/misc/createElement.ts

@@ -14,9 +14,7 @@ import ObjectEntries from './ObjectEntries';
  * @param param `tagName` or object
  * @return a new `HTMLElement`
  */
-const createElement = (
-  param?: string | Exclude<HTMLElement, ((...args: any[]) => any) | object>,
-): HTMLElement | undefined => {
+const createElement = (param?: string | Partial<HTMLElement>): HTMLElement | undefined => {
   if (!param) return undefined;
 
   if (isString(param)) {

package/src/misc/createElementNS.ts

@@ -17,7 +17,7 @@ import isString from '../is/isString';
  */
 const createElementNS = (
   ns: string,
-  param?: string | Exclude<HTMLElement, ((...args: any[]) => any) | object>,
+  param?: string | Partial<HTMLElement>,
 ): HTMLElement | undefined => {
   if (!ns || !param) return undefined;
 

package/src/misc/data.ts

@@ -1,10 +1,6 @@
 import isHTMLElement from '../is/isHTMLElement';
 
-type MConstructor<T extends new (...args: any[]) => any> = new (
-  ...args: ConstructorParameters<T>
-) => InstanceType<T>;
-
-const componentData = new Map<MConstructor<any>, Map<HTMLElement, InstanceType<any>>>();
+const componentData = new Map<string, Map<HTMLElement, any>>();
 
 /**
  * An interface for web components background data.
@@ -19,19 +15,15 @@ const Data = {
    * @param component the component's name or a unique key
    * @param instance the component instance
    */
-  set: <T extends MConstructor<T>>(
-    element: HTMLElement,
-    component: T,
-    instance: InstanceType<T>,
-  ): 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<HTMLElement, InstanceType<T>>());
+      componentData.set(component, new Map<HTMLElement, T>());
     }
 
-    const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
+    const instanceMap = componentData.get(component) as Map<HTMLElement, T>;
     // not undefined, but defined right above
     instanceMap.set(element, instance);
   },
@@ -42,10 +34,8 @@ const Data = {
    * @param component the component's name or a unique key
    * @returns all the component instances
    */
-  getAllFor: <T extends MConstructor<T>>(
-    component: T,
-  ): Map<HTMLElement, InstanceType<T>> | null => {
-    const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
+  getAllFor: <T>(component: string): Map<HTMLElement, T> | null => {
+    const instanceMap = componentData.get(component) as Map<HTMLElement, T>;
 
     return instanceMap || null;
   },
@@ -57,9 +47,11 @@ const Data = {
    * @param component the component's name or a unique key
    * @returns the instance
    */
-  get: <T extends MConstructor<T>>(element: HTMLElement, component: T): InstanceType<T> | null => {
+  get: <T>(element: HTMLElement, component: string): T | null => {
     if (!isHTMLElement(element) || !component) return null;
     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;
@@ -72,8 +64,10 @@ const Data = {
    * @param element target element
    * @param component the component's name or a unique key
    */
-  remove: <T extends MConstructor<T>>(element: HTMLElement, component: T): void => {
+  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);
@@ -88,9 +82,7 @@ const Data = {
 /**
  * An alias for `Data.get()`.
  */
-export const getInstance = <T extends MConstructor<T>>(
-  target: HTMLElement,
-  component: T,
-): InstanceType<T> | null => Data.get<T>(target, component);
+export const getInstance = <T>(target: HTMLElement, component: string): T | null =>
+  Data.get(target, component);
 
 export default Data;

package/src/misc/hasOwn.ts

@@ -0,0 +1,17 @@
+import isObject from '../is/isObject';
+
+/**
+ * A shortcut to `Object.hasOwn()` static method to work
+ * with regular `Object` elements.
+ *
+ * @see https://fettblog.eu/typescript-hasownproperty/
+ * @param obj the target object
+ * @param prop the property to check
+ * @returns the query result
+ */
+const hasOwn = <T extends object, K extends PropertyKey>(
+  obj: T,
+  prop: K,
+): obj is T & Record<K, unknown> => isObject(obj) && (Object.hasOwn(obj, prop) || prop in obj);
+
+export default hasOwn;

package/src/selectors/querySelector.ts

@@ -1,5 +1,6 @@
 import getDocument from '../get/getDocument';
 import isNode from '../is/isNode';
+import isHTMLElement from '../is/isHTMLElement';
 
 /**
  * Utility to check if target is typeof `HTMLElement`, `Element`, `Node`
@@ -9,13 +10,13 @@ import isNode from '../is/isNode';
  * @param parent optional node to look into
  * @return the `HTMLElement` or `querySelector` result
  */
-const querySelector = (selector: Node | string, parent?: ParentNode): HTMLElement | null => {
-  if (isNode(selector as Node)) {
-    return selector as HTMLElement;
+const querySelector = (selector: HTMLElement | string, parent?: ParentNode): HTMLElement | null => {
+  if (isHTMLElement(selector)) {
+    return selector;
   }
-  const lookUp = parent && isNode(parent) ? parent : getDocument();
+  const lookUp = isNode(parent) ? parent : getDocument();
 
-  return lookUp.querySelector(selector as string);
+  return lookUp.querySelector(selector);
 };
 
 export default querySelector;