@thednp/shorty 1.0.3 → 2.0.0-alpha10

package/src/is/isShadowRoot.ts

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

package/src/is/isString.ts

@@ -0,0 +1,9 @@
+/**
+ * Shortie for `typeof SOMETHING === "string"`.
+ *
+ * @param str input value
+ * @returns the query result
+ */
+const isString = (str?: unknown): str is string => typeof str === 'string' || false;
+
+export default isString;

package/src/is/isTableElement.ts

@@ -0,0 +1,14 @@
+import isNode from './isNode';
+
+/**
+ * Check if a target element is a `<table>`, `<td>` or `<th>`.
+ * This specific check is important for determining
+ * the `offsetParent` of a given element.
+ *
+ * @param element the target element
+ * @returns the query result
+ */
+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

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

package/src/is/isWindow.ts

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

package/src/misc/ArrayFrom.ts

@@ -0,0 +1,11 @@
+/**
+ * Shortie for `Array.from()` static method.
+ * The utility should also work with any typed arrays
+ * like Float64Array or Int32Array.
+ *
+ * @param arr array-like iterable object
+ * @returns a new array from iterable object
+ */
+const ArrayFrom = <T>(arr: ArrayLike<T> | Iterable<T>): T[] => Array.from(arr);
+
+export default ArrayFrom;

package/src/misc/Float32ArrayFrom.ts

@@ -0,0 +1,10 @@
+/**
+ * Shortcut for `Float32Array.from()` static method.
+ *
+ * @param arr array-like iterable object
+ * @returns a new Float32Array
+ */
+const Float32ArrayFrom = (arr: ArrayLike<number> | Iterable<number>): Float32Array =>
+  Float32Array.from(Array.from(arr));
+
+export default Float32ArrayFrom;

package/src/misc/Float64ArrayFrom.ts

@@ -0,0 +1,10 @@
+/**
+ * Shortcut for `Float64Array.from()` static method.
+ *
+ * @param arr array-like iterable object
+ * @returns a new Float64Array
+ */
+const Float64ArrayFrom = (arr: ArrayLike<number> | Iterable<number>): Float64Array =>
+  Float64Array.from(Array.from(arr));
+
+export default Float64ArrayFrom;

package/src/misc/ObjectAssign.ts

@@ -0,0 +1,43 @@
+/**
+ * Overloads for Object.assign.
+ *
+ * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/object-assign/index.d.ts
+ */
+declare function ObjectAssignTyped<T, U>(target: T, source: U): T & U;
+declare function ObjectAssignTyped<T, U, V>(target: T, source1: U, source2: V): T & U & V;
+declare function ObjectAssignTyped<T, U, V, W>(
+  target: T,
+  source1: U,
+  source2: V,
+  source3: W,
+): T & U & V & W;
+declare function ObjectAssignTyped<T, U, V, W, Q>(
+  target: T,
+  source1: U,
+  source2: V,
+  source3: W,
+  source4: Q,
+): T & U & V & W & Q;
+declare function ObjectAssignTyped<T, U, V, W, Q, R>(
+  target: T,
+  source1: U,
+  source2: V,
+  source3: W,
+  source4: Q,
+  source5: R,
+): T & U & V & W & Q & R;
+declare function ObjectAssignTyped(target: any, ...sources: any[]): any;
+
+/**
+ * Shortcut for `Object.assign()` static method.
+ *
+ * @param obj a target object
+ * @param source source object(s)
+ * @see https://github.com/devinrhode2/ObjectTyped/blob/master/src/index.ts
+ */
+const ObjectAssign: typeof ObjectAssignTyped = <A extends Record<string, any>, B>(
+  obj: A,
+  ...source: B[]
+): B extends Record<string, any>[] ? any : A & B => Object.assign(obj, ...source);
+
+export default ObjectAssign;

package/src/misc/ObjectEntries.ts

@@ -0,0 +1,11 @@
+/**
+ * Shortcut for `Object.entries()` static method.
+ *
+ * @param obj a target object
+ * @returns the entries of an object in an array format [key, value][]
+ * @see https://github.com/devinrhode2/ObjectTyped/blob/master/src/index.ts
+ */
+const ObjectEntries = <O extends Record<string, any>>(obj: O) =>
+  Object.entries(obj) as [keyof O, O[keyof O]][];
+
+export default ObjectEntries;

package/src/misc/ObjectHasOwn.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 ObjectHasOwn = <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 ObjectHasOwn;

package/src/misc/ObjectKeys.ts

@@ -0,0 +1,10 @@
+/**
+ * Shortcut for `Object.keys()` static method.
+ *
+ * @param obj a target object
+ * @returns an array with object keys
+ * @see https://github.com/devinrhode2/ObjectTyped/blob/master/src/index.ts
+ */
+const ObjectKeys = <O extends Record<string, any>>(obj: O) => Object.keys(obj) as (keyof O)[];
+
+export default ObjectKeys;

package/src/misc/ObjectValues.ts

@@ -0,0 +1,11 @@
+/**
+ * Shortcut for `Object.values()` static method.
+ *
+ * @param obj a target object
+ * @returns an array with the object values
+ * @see https://github.com/devinrhode2/ObjectTyped/blob/master/src/index.ts
+ */
+const ObjectValues = <O extends Record<string, unknown>>(obj: O): O[keyof O][] =>
+  Object.values(obj) as O[keyof O][];
+
+export default ObjectValues;

package/src/misc/createCustomEvent.ts

@@ -0,0 +1,28 @@
+import type { OriginalEvent } from '../interface/originalEvent';
+import isObject from '../is/isObject';
+import ObjectAssign from './ObjectAssign';
+
+/**
+ * Returns a namespaced `CustomEvent` specific to each component.
+ *
+ * @param eventType Event.type
+ * @param config Event.options | Event.properties
+ * @returns a new namespaced event
+ */
+const createCustomEvent = <T extends OriginalEvent>(
+  eventType: string,
+  config?: CustomEventInit<any>,
+): T => {
+  const OriginalCustomEvent = new CustomEvent<any>(eventType, {
+    cancelable: true,
+    bubbles: true,
+  } as CustomEventInit<any>) as T;
+
+  /* istanbul ignore else */
+  if (isObject(config)) {
+    ObjectAssign(OriginalCustomEvent, config);
+  }
+  return OriginalCustomEvent;
+};
+
+export default createCustomEvent;

package/src/misc/createElement.ts

@@ -0,0 +1,40 @@
+import isString from '../is/isString';
+import setAttribute from '../attr/setAttribute';
+import getDocument from '../get/getDocument';
+import ObjectEntries from './ObjectEntries';
+
+/**
+ * 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 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`
+ */
+const createElement = (param?: string | Partial<HTMLElement>): HTMLElement | undefined => {
+  if (!param) return undefined;
+
+  if (isString(param)) {
+    return getDocument().createElement(param);
+  }
+
+  const { tagName } = param;
+  const newElement = createElement(tagName as string);
+
+  if (!newElement) return undefined;
+
+  const attr = { ...(param as Record<string, unknown>) };
+  delete attr.tagName;
+
+  ObjectEntries(attr).forEach(([key, value]) => {
+    if (isString(key as string) && isString(value as string)) {
+      setAttribute(newElement, key as string, value as string);
+    }
+  });
+  return newElement;
+};
+
+export default createElement;

package/src/misc/createElementNS.ts

@@ -0,0 +1,45 @@
+import getDocument from '../get/getDocument';
+import ObjectEntries from './ObjectEntries';
+import setAttribute from '../attr/setAttribute';
+import isString from '../is/isString';
+
+/**
+ * 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 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`
+ * @param param `tagName` or object
+ * @return a new `HTMLElement`
+ */
+const createElementNS = (
+  ns: string,
+  param?: string | Partial<HTMLElement>,
+): HTMLElement | undefined => {
+  if (!ns || !param) return undefined;
+
+  if (isString(param)) {
+    return getDocument().createElementNS(ns, param) as HTMLElement;
+  }
+
+  const { tagName } = param;
+  const newElement = createElementNS(ns, tagName);
+
+  if (!newElement) return undefined;
+
+  const attr = { ...(param as Record<string, unknown>) };
+  delete attr.tagName;
+
+  ObjectEntries(attr).forEach(([key, value]) => {
+    if (isString(key as string) && isString(value as string)) {
+      setAttribute(newElement, key as string, value as string);
+    }
+  });
+
+  return newElement;
+};
+
+export default createElementNS;

package/src/misc/data.ts

@@ -0,0 +1,82 @@
+import isHTMLElement from '../is/isHTMLElement';
+
+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: <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, T>());
+    }
+
+    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
+   */
+  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: <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;
+    return instance || null;
+  },
+
+  /**
+   * Removes web components data.
+   *
+   * @param element target element
+   * @param component the component's name or a unique key
+   */
+  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);
+
+    /* istanbul ignore else */
+    if (instanceMap.size === 0) {
+      componentData.delete(component);
+    }
+  },
+};
+
+export default Data;

package/src/misc/dispatchEvent.ts

@@ -0,0 +1,9 @@
+/**
+ * Shortcut for the `Element.dispatchEvent(Event)` method.
+ *
+ * @param element is the target
+ * @param event is the `Event` object
+ */
+const dispatchEvent = (element: EventTarget, event: Event): boolean => element.dispatchEvent(event);
+
+export default dispatchEvent;

package/src/misc/distinct.ts

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

package/src/misc/{emulateAnimationEnd.js → emulateAnimationEnd.ts}

@@ -7,21 +7,18 @@ import dispatchEvent from './dispatchEvent';
  * Utility to make sure callbacks are consistently
  * called when animation ends.
  *
- * @param {HTMLElement} element target
- * @param {EventListener} handler `animationend` callback
+ * @param element target
+ * @param handler `animationend` callback
  */
-export default function emulateAnimationEnd(element, handler) {
+const emulateAnimationEnd = (element: HTMLElement, handler: EventListener): void => {
   let called = 0;
   const endEvent = new Event(animationEndEvent);
   const duration = getElementAnimationDuration(element);
   const delay = getElementAnimationDelay(element);
 
   if (duration) {
-    /**
-     * Wrap the handler in on -> off callback
-     * @type {EventListener}
-     */
-    const animationEndWrapper = (e) => {
+    /** Wrap the handler in on -> off callback */
+    const animationEndWrapper = (e: Event): void => {
       /* istanbul ignore else */
       if (e.target === element) {
         handler.apply(element, [e]);
@@ -37,4 +34,6 @@ export default function emulateAnimationEnd(element, handler) {
   } else {
     handler.apply(element, [endEvent]);
   }
-}
+};
+
+export default emulateAnimationEnd;

package/src/misc/{emulateTransitionEnd.js → emulateTransitionEnd.ts}

@@ -7,21 +7,18 @@ import dispatchEvent from './dispatchEvent';
  * Utility to make sure callbacks are consistently
  * called when transition ends.
  *
- * @param {HTMLElement} element target
- * @param {EventListener} handler `transitionend` callback
+ * @param element event target
+ * @param handler `transitionend` callback
  */
-export default function emulateTransitionEnd(element, handler) {
+const emulateTransitionEnd = (element: HTMLElement, handler: EventListener): void => {
   let called = 0;
   const endEvent = new Event(transitionEndEvent);
   const duration = getElementTransitionDuration(element);
   const delay = getElementTransitionDelay(element);
 
   if (duration) {
-    /**
-     * Wrap the handler in on -> off callback
-     * @type {EventListener} e Event object
-     */
-    const transitionEndWrapper = (e) => {
+    /** Wrap the handler in on -> off callback */
+    const transitionEndWrapper = (e: Event): void => {
       /* istanbul ignore else */
       if (e.target === element) {
         handler.apply(element, [e]);
@@ -37,4 +34,6 @@ export default function emulateTransitionEnd(element, handler) {
   } else {
     handler.apply(element, [endEvent]);
   }
-}
+};
+
+export default emulateTransitionEnd;

package/src/misc/focus.ts

@@ -0,0 +1,9 @@
+/**
+ * Shortie for `HTMLElement.focus()` method.
+ *
+ * @param element is the target
+ * @param options allows to pass additional options such as `preventScroll: boolean`
+ */
+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.js → noop.ts}

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

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]: any }>(
+  element: HTMLElement,
+  defaultOps: T,
+  inputOps: Partial<T>,
+  ns?: string,
+): T => {
+  const INPUT = { ...inputOps };
+  const data = { ...element.dataset };
+  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] as T[keyof T];
+    } else if (k in dataOps) {
+      normalOps[k] = dataOps[k] as T[keyof T];
+    } else {
+      normalOps[k] = (k === title ? getAttribute(element, title) : v) as T[keyof T];
+    }
+  });
+
+  return normalOps;
+};
+
+export default normalizeOptions;

package/src/misc/normalizeValue.ts

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

package/src/misc/{passiveHandler.js → passiveHandler.ts}

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

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.ts

@@ -0,0 +1,23 @@
+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<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: Partial<CSS4Declaration> = {};
+      propObject[key] = value;
+      ObjectAssign(element.style, propObject);
+    }
+  });
+};
+export default setElementStyle;