@thednp/shorty 2.0.0-alpha9 → 2.0.0

package/dts.config.ts

@@ -0,0 +1,21 @@
+const packageJson = require("./package.json");
+
+const getPackageName = () => {
+  return packageJson.name.includes('@') ? packageJson.name.split('/')[1] : packageJson.name;
+};
+
+const config = {
+  entries: [
+    {
+      filePath: "./src/index.ts",
+      outFile: `./dist/${getPackageName()}.d.ts`,
+      noCheck: false,
+      output: {
+        umdModuleName: 'SHORTY',
+        noBanner: true,
+      }
+    },
+  ],
+};
+
+module.exports = config;

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "@thednp/shorty",
-  "version": "2.0.0alpha9",
-  "type": "module",
-  "description": "TypeScript shorties for the web",
-  "source": "./src/index.ts",
-  "main": "./dist/shorty.js",
-  "types": "./dist/shorty.d.ts",
-  "module": "./dist/shorty.mjs",
-  "exports": {
-    ".": {
-      "import": "./dist/shorty.mjs",
-      "require": "./dist/shorty.cjs",
-      "types": "./dist/shorty.d.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "pre-test": "npm run clean-coverage",
-    "test": "npm run pre-test && npx cypress run",
-    "clean-coverage": "rimraf coverage .nyc_output",
-    "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": "eslint -c .eslintrc.cjs --ext .ts src",
-    "fix:ts": "eslint -c .eslintrc.cjs --ext .ts src --fix",
-    "build": "npm run lint:ts && vite build && npm run dts",
-    "dts": "dts-bundle-generator --config ./dts.config.ts"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/thednp/shorty.git"
-  },
-  "keywords": [
-    "shorty",
-    "javascript",
-    "typescript"
-  ],
-  "author": "dnp_theme",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/thednp/shorty/issues"
-  },
-  "homepage": "https://github.com/thednp/shorty",
-  "devDependencies": {
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
-    "@cypress/code-coverage": "^3.10.0",
-    "@types/istanbul-lib-instrument": "^1.7.4",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
-    "cypress": "^12.4.1",
-    "dts-bundle-generator": "^7.2.0",
-    "eslint": "^8.29.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",
-    "nyc": "^15.1.0",
-    "prettier": "^2.8.3",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4"
-  }
-}
+{
+  "name": "@thednp/shorty",
+  "version": "2.0.0",
+  "description": "TypeScript shorties for the web",
+  "source": "./src/index.ts",
+  "main": "./dist/shorty.js",
+  "module": "./dist/shorty.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/shorty.d.ts",
+      "require": "./dist/shorty.cjs",
+      "import": "./dist/shorty.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thednp/shorty.git"
+  },
+  "keywords": [
+    "shorty",
+    "javascript",
+    "typescript"
+  ],
+  "author": "thednp",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/thednp/shorty/issues"
+  },
+  "homepage": "https://github.com/thednp/shorty",
+  "devDependencies": {
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
+    "@cypress/code-coverage": "^3.12.12",
+    "@types/istanbul-lib-instrument": "^1.7.7",
+    "@types/node": "^20.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "cypress": "^13.6.0",
+    "dts-bundle-generator": "^8.1.2",
+    "eslint": "^8.54.0",
+    "eslint-plugin-jsdoc": "^46.9.0",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-prettier": "^4.2.1",
+    "istanbul-lib-coverage": "^3.2.2",
+    "istanbul-lib-instrument": "^5.2.1",
+    "nyc": "^15.1.0",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.3.2",
+    "vite": "^4.5.0"
+  },
+  "packageManager": "pnpm@8.6.12",
+  "engines": {
+    "node": ">=16",
+    "pnpm": ">=8.6.0"
+  },
+  "scripts": {
+    "pre-test": "pnpm clean-coverage",
+    "test": "pnpm pre-test && npx cypress run",
+    "clean-coverage": "rimraf coverage .nyc_output",
+    "cypress": "pnpm 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": "eslint -c .eslintrc.cjs --ext .ts src",
+    "fix:ts": "eslint -c .eslintrc.cjs --ext .ts src --fix",
+    "check:ts": "tsc -noEmit",
+    "build": "pnpm check:ts && pnpm lint:ts && vite build && pnpm dts",
+    "dts": "dts-bundle-generator --config ./dts.config.ts"
+  }
+}

package/src/event/off.ts

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

package/src/event/on.ts

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

package/src/event/one.ts

@@ -1,21 +1,22 @@
 import on from './on';
 import off from './off';
+import { NativeEventHandler } from '../interface/event';
 
 /**
  * Add an `eventListener` to an `EventTarget`
  * element and remove it once callback is called.
  */
-const one = (
-  element: EventTarget,
+const one = <T extends EventTarget, L = EventListener>(
+  element: T,
   eventName: string,
-  listener: EventListener,
+  listener: L,
   options?: AddEventListenerOptions,
 ) => {
   /** Wrap the listener for easy on -> off */
-  const handlerWrapper = (e: Event): void => {
+  const handlerWrapper: NativeEventHandler<T> = e => {
     /* istanbul ignore else */
     if (e.target === element || e.currentTarget === element) {
-      listener.apply(element, [e]);
+      (listener as NativeEventHandler<T>).apply(element, [e]);
       off(element, eventName, handlerWrapper, options);
     }
   };

package/src/index.ts

@@ -96,6 +96,7 @@ import keyCapsLock from './strings/keyCapsLock';
 import keyControl from './strings/keyControl';
 import keyDelete from './strings/keyDelete';
 import keyEnter from './strings/keyEnter';
+import keyNumpadEnter from './strings/keyNumpadEnter';
 import keyEscape from './strings/keyEscape';
 import keyInsert from './strings/keyInsert';
 import keyMeta from './strings/keyMeta';
@@ -185,6 +186,7 @@ import ObjectEntries from './misc/ObjectEntries';
 import ObjectHasOwn from './misc/ObjectHasOwn';
 import ObjectKeys from './misc/ObjectKeys';
 import ObjectValues from './misc/ObjectValues';
+import ObjectFromEntries from './misc/ObjectFromEntries';
 import createCustomEvent from './misc/createCustomEvent';
 import passiveHandler from './misc/passiveHandler';
 import reflow from './misc/reflow';
@@ -249,6 +251,8 @@ import getElementsByTagName from './selectors/getElementsByTagName';
 import getElementsByClassName from './selectors/getElementsByClassName';
 import matches from './selectors/matches';
 
+import { version } from '../package.json';
+
 export {
   ariaChecked,
   ariaDescription,
@@ -359,6 +363,7 @@ export {
   keyControl,
   keyDelete,
   keyEnter,
+  keyNumpadEnter,
   keyEscape,
   keyInsert,
   keyMeta,
@@ -453,6 +458,7 @@ export {
   ObjectEntries,
   ObjectKeys,
   ObjectValues,
+  ObjectFromEntries,
   getBoundingClientRect,
   getDocument,
   getDocumentBody,
@@ -468,4 +474,7 @@ export {
   setAttributeNS,
   removeAttribute,
   removeAttributeNS,
+  version,
 };
+
+export * from './interface/event.d';

package/src/interface/event.d.ts

@@ -0,0 +1,247 @@
+/**
+ * Type definitions addapted from React 18.2
+ * Project: https://react.dev/
+ */
+
+type NativeAnimationEvent = AnimationEvent;
+type NativeClipboardEvent = ClipboardEvent;
+type NativeCompositionEvent = CompositionEvent;
+type NativeDragEvent = DragEvent;
+type NativeFocusEvent = FocusEvent;
+type NativeKeyboardEvent = KeyboardEvent;
+type NativeMouseEvent = MouseEvent;
+type NativeTouchEvent = TouchEvent;
+type NativePointerEvent = PointerEvent;
+type NativeTransitionEvent = TransitionEvent;
+type NativeUIEvent = UIEvent;
+type NativeWheelEvent = WheelEvent;
+
+interface AbstractView {
+  styleMedia: StyleMedia;
+  document: Document;
+}
+
+//
+// Event System
+// ----------------------------------------------------------------------
+// E = EventObject, C = e.currentTarget, T = e.target
+interface BaseEvent<E = Event, C = unknown, T = unknown> {
+  nativeEvent: E;
+  currentTarget: C | null;
+  target: T & EventTarget;
+  bubbles: boolean;
+  cancelable: boolean;
+  defaultPrevented: boolean;
+  eventPhase: number;
+  isTrusted: boolean;
+  preventDefault(): void;
+  isDefaultPrevented(): boolean;
+  stopPropagation(): void;
+  isPropagationStopped(): boolean;
+  persist(): void;
+  timeStamp: number;
+  type: string;
+}
+
+/**
+ * currentTarget - a reference to the element on which the event listener is registered.
+ *
+ * target - a reference to the element from which the event was originally dispatched.
+ * This might be a child element to the element on which the event listener is registered.
+ * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
+ */
+type NativeEvent<T = Element, E = Event> = BaseEvent<E, T, T>;
+
+interface ClipboardEvent<T = Element> extends NativeEvent<T, NativeClipboardEvent> {
+  clipboardData: DataTransfer;
+}
+
+interface CompositionEvent<T = Element> extends NativeEvent<T, NativeCompositionEvent> {
+  data: string;
+}
+
+interface DragEvent<T = Element> extends MouseEvent<T, NativeDragEvent> {
+  dataTransfer: DataTransfer;
+}
+
+interface PointerEvent<T = Element> extends MouseEvent<T, NativePointerEvent> {
+  pointerId: number;
+  pressure: number;
+  tangentialPressure: number;
+  tiltX: number;
+  tiltY: number;
+  twist: number;
+  width: number;
+  height: number;
+  pointerType: 'mouse' | 'pen' | 'touch';
+  isPrimary: boolean;
+}
+
+interface FocusEvent<T = Element, R = Element> extends NativeEvent<T, NativeFocusEvent> {
+  relatedTarget: (EventTarget & R) | null;
+  target: EventTarget & T;
+}
+
+type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+type FormEvent<T = FormControl> = NativeEvent<T>;
+
+interface ChangeEvent<T = FormControl> extends FormEvent<T> {
+  target: EventTarget & T;
+}
+
+type ModifierKey =
+  | 'Alt'
+  | 'AltGraph'
+  | 'CapsLock'
+  | 'Control'
+  | 'Fn'
+  | 'FnLock'
+  | 'Hyper'
+  | 'Meta'
+  | 'NumLock'
+  | 'ScrollLock'
+  | 'Shift'
+  | 'Super'
+  | 'Symbol'
+  | 'SymbolLock';
+
+interface KeyboardEvent<T = Element> extends UIEvent<T, NativeKeyboardEvent> {
+  altKey: boolean;
+  /** @deprecated */
+  charCode: number;
+  ctrlKey: boolean;
+  code: string;
+  /**
+   * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
+   */
+  getModifierState(key: ModifierKey): boolean;
+  /**
+   * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
+   */
+  key: string;
+  /** @deprecated */
+  keyCode: number;
+  locale: string;
+  location: number;
+  metaKey: boolean;
+  repeat: boolean;
+  shiftKey: boolean;
+  /** @deprecated */
+  which: number;
+}
+
+interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T, E> {
+  altKey: boolean;
+  button: number;
+  buttons: number;
+  clientX: number;
+  clientY: number;
+  ctrlKey: boolean;
+  /**
+   * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
+   */
+  getModifierState(key: ModifierKey): boolean;
+  metaKey: boolean;
+  movementX: number;
+  movementY: number;
+  pageX: number;
+  pageY: number;
+  relatedTarget: EventTarget | null;
+  screenX: number;
+  screenY: number;
+  shiftKey: boolean;
+}
+
+interface TouchEvent<T = Element> extends UIEvent<T, NativeTouchEvent> {
+  altKey: boolean;
+  changedTouches: TouchList;
+  ctrlKey: boolean;
+  /**
+   * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
+   */
+  getModifierState(key: ModifierKey): boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  targetTouches: TouchList;
+  touches: TouchList;
+}
+
+interface UIEvent<T = Element, E = NativeUIEvent> extends NativeEvent<T, E> {
+  detail: number;
+  view: AbstractView;
+}
+
+interface WheelEvent<T = Element> extends MouseEvent<T, NativeWheelEvent> {
+  deltaMode: number;
+  deltaX: number;
+  deltaY: number;
+  deltaZ: number;
+}
+
+interface AnimationEvent<T = Element> extends NativeEvent<T, NativeAnimationEvent> {
+  animationName: string;
+  elapsedTime: number;
+  pseudoElement: string;
+}
+
+interface TransitionEvent<T = Element> extends NativeEvent<T, NativeTransitionEvent> {
+  elapsedTime: number;
+  propertyName: string;
+  pseudoElement: string;
+}
+
+//
+// Event Handler Types
+// ----------------------------------------------------------------------
+// (this: unknown & EventTarget, event: E): void;
+type EventHandler<T = Element, E = Event | NativeEvent<T>> = (event: E) => void;
+type NativeEventHandler<T = Element> = EventHandler<T, NativeEvent<T>>;
+type ClipboardEventHandler<T = Element> = EventHandler<T, ClipboardEvent<T>>;
+type CompositionEventHandler<T = Element> = EventHandler<T, CompositionEvent<T>>;
+type DragEventHandler<T = Element> = EventHandler<T, DragEvent<T>>;
+type FocusEventHandler<T = Element> = EventHandler<T, FocusEvent<T>>;
+type FormEventHandler<T = Element> = EventHandler<T, FormEvent<T>>;
+type ChangeEventHandler<T = Element> = EventHandler<T, ChangeEvent<T>>;
+type KeyboardEventHandler<T = Element> = EventHandler<T, KeyboardEvent<T>>;
+type MouseEventHandler<T = Element> = EventHandler<T, MouseEvent<T>>;
+type TouchEventHandler<T = Element> = EventHandler<T, TouchEvent<T>>;
+type PointerEventHandler<T = Element> = EventHandler<T, PointerEvent<T>>;
+type UIEventHandler<T = Element> = EventHandler<T, UIEvent<T>>;
+type WheelEventHandler<T = Element> = EventHandler<T, WheelEvent<T>>;
+type AnimationEventHandler<T = Element> = EventHandler<T, AnimationEvent<T>>;
+type TransitionEventHandler<T = Element> = EventHandler<T, TransitionEvent<T>>;
+type PossibleEventTarget = EventTarget & (Element | Document | Window);
+
+export {
+  NativeEvent,
+  ClipboardEvent,
+  CompositionEvent,
+  DragEvent,
+  FocusEvent,
+  FormEvent,
+  ChangeEvent,
+  KeyboardEvent,
+  MouseEvent,
+  TouchEvent,
+  PointerEvent,
+  UIEvent,
+  WheelEvent,
+  AnimationEvent,
+  TransitionEvent,
+  NativeEventHandler,
+  ClipboardEventHandler,
+  CompositionEventHandler,
+  DragEventHandler,
+  FocusEventHandler,
+  FormEventHandler,
+  ChangeEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  TouchEventHandler,
+  PointerEventHandler,
+  UIEventHandler,
+  WheelEventHandler,
+  AnimationEventHandler,
+  TransitionEventHandler,
+  PossibleEventTarget,
+};

package/src/misc/ObjectFromEntries.ts

@@ -0,0 +1,11 @@
+/**
+ * Shortcut for `Object.fromEntries()` static method.
+ *
+ * @param entries a target entries object
+ * @returns a new Object created from the specified entries in array format [key, value][]
+ * @see https://github.com/devinrhode2/ObjectTyped/blob/master/src/index.ts
+ */
+const ObjectFromEntries = <K extends string, V>(entries: [K, V][]) =>
+  Object.fromEntries(entries) as Record<K, V>;
+
+export default ObjectFromEntries;

package/src/misc/createElement.ts

@@ -1,7 +1,6 @@
 import isString from '../is/isString';
-import setAttribute from '../attr/setAttribute';
 import getDocument from '../get/getDocument';
-import ObjectEntries from './ObjectEntries';
+import ObjectAssign from './ObjectAssign';
 
 /**
  * Shortie for `document.createElement` method
@@ -14,11 +13,11 @@ import ObjectEntries from './ObjectEntries';
  * @param param `tagName` or object
  * @return a new `HTMLElement`
  */
-const createElement = (param?: string | Partial<HTMLElement>): HTMLElement | undefined => {
+const createElement = <T extends HTMLElement>(param?: string | Partial<T>): T | undefined => {
   if (!param) return undefined;
 
   if (isString(param)) {
-    return getDocument().createElement(param);
+    return getDocument().createElement(param) as T;
   }
 
   const { tagName } = param;
@@ -29,12 +28,7 @@ const createElement = (param?: string | Partial<HTMLElement>): HTMLElement | und
   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;
+  return ObjectAssign(newElement, attr) as unknown as T;
 };
 
 export default createElement;

package/src/misc/createElementNS.ts

@@ -1,6 +1,5 @@
 import getDocument from '../get/getDocument';
-import ObjectEntries from './ObjectEntries';
-import setAttribute from '../attr/setAttribute';
+import ObjectAssign from './ObjectAssign';
 import isString from '../is/isString';
 
 /**
@@ -8,6 +7,8 @@ import isString from '../is/isString';
  * 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.
+ * Note: some elements resulted from this function call may not be compatible with
+ * some attributes.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
  *
@@ -15,14 +16,14 @@ import isString from '../is/isString';
  * @param param `tagName` or object
  * @return a new `HTMLElement`
  */
-const createElementNS = (
+const createElementNS = <T extends HTMLElement>(
   ns: string,
-  param?: string | Partial<HTMLElement>,
-): HTMLElement | undefined => {
+  param?: string | Partial<T>,
+): T | undefined => {
   if (!ns || !param) return undefined;
 
   if (isString(param)) {
-    return getDocument().createElementNS(ns, param) as HTMLElement;
+    return getDocument().createElementNS(ns, param) as T;
   }
 
   const { tagName } = param;
@@ -33,13 +34,7 @@ const createElementNS = (
   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;
+  return ObjectAssign(newElement, attr) as unknown as T;
 };
 
 export default createElementNS;

package/src/misc/data.ts

@@ -8,6 +8,7 @@ const componentData = new Map<string, Map<HTMLElement, any>>();
  * @see https://github.com/thednp/bootstrap.native/blob/master/src/components/base-component.js
  */
 const Data = {
+  data: componentData,
   /**
    * Sets web components data.
    *

package/src/strings/keyNumpadEnter.ts

@@ -0,0 +1,7 @@
+/**
+ * A global namespace for `Enter` key.
+ * e.which = 13 equivalent
+ */
+const keyNumpadEnter = 'NumpadEnter';
+
+export default keyNumpadEnter;