@thednp/shorty 2.0.0-alpha17 → 2.0.0-alpha18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/shorty",
-  "version": "2.0.0alpha17",
+  "version": "2.0.0alpha18",
   "description": "TypeScript shorties for the web",
   "source": "./src/index.ts",
   "main": "./dist/shorty.js",
@@ -12,18 +12,6 @@
       "import": "./dist/shorty.mjs"
     }
   },
-  "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/"
@@ -45,14 +33,14 @@
   "homepage": "https://github.com/thednp/shorty",
   "devDependencies": {
     "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
-    "@cypress/code-coverage": "^3.11.0",
+    "@cypress/code-coverage": "^3.12.0",
     "@types/istanbul-lib-instrument": "^1.7.4",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "cypress": "^12.17.4",
     "dts-bundle-generator": "^8.0.1",
-    "eslint": "^8.47.0",
-    "eslint-plugin-jsdoc": "^46.4.6",
+    "eslint": "^8.48.0",
+    "eslint-plugin-jsdoc": "^46.5.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
     "istanbul-lib-coverage": "^3.2.0",
@@ -60,7 +48,24 @@
     "nyc": "^15.1.0",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9"
+  },
+  "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",
+    "build": "pnpm lint:ts && vite build && pnpm dts",
+    "dts": "dts-bundle-generator --config ./dts.config.ts"
   }
-}
+}

package/src/event/off.ts

@@ -1,10 +1,12 @@
+import { NativeEventTypes, PossibleEventTarget, SupportedEventHandler } from '../interface/event';
+
 /**
  * Remove eventListener from an `EventTarget` object.
  */
-const off = (
-  element: EventTarget,
-  eventName: string,
-  listener: EventListener,
+const off = <T extends PossibleEventTarget>(
+  element: T,
+  eventName: NativeEventTypes,
+  listener: EventListenerObject & SupportedEventHandler<T>,
   options?: AddEventListenerOptions,
 ) => {
   const ops = options || false;

package/src/event/on.ts

@@ -1,10 +1,12 @@
+import { NativeEventTypes, PossibleEventTarget, SupportedEventHandler } from '../interface/event';
+
 /**
  * Add eventListener to an `EventTarget` object.
  */
-const on = (
-  element: EventTarget,
-  eventName: string,
-  listener: EventListener,
+const on = <T extends PossibleEventTarget>(
+  element: T,
+  eventName: NativeEventTypes,
+  listener: EventListenerObject & SupportedEventHandler<T>,
   options?: AddEventListenerOptions,
 ) => {
   const ops = options || false;

package/src/event/one.ts

@@ -1,3 +1,11 @@
+import {
+  EventHandler,
+  NativeEvent,
+  NativeEventTypes,
+  PossibleEventTarget,
+  SupportedEventHandler,
+} from '../interface/event';
+
 import on from './on';
 import off from './off';
 
@@ -5,21 +13,31 @@ 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,
+const one = <T extends PossibleEventTarget>(
+  element: T,
+  eventName: NativeEventTypes,
+  listener: SupportedEventHandler<T>,
   options?: AddEventListenerOptions,
 ) => {
   /** Wrap the listener for easy on -> off */
-  const handlerWrapper = (e: Event): void => {
+  const handlerWrapper = (e: NativeEvent): void => {
     /* istanbul ignore else */
     if (e.target === element || e.currentTarget === element) {
-      listener.apply(element, [e]);
-      off(element, eventName, handlerWrapper, options);
+      (listener as EventHandler<typeof e>).apply(element, [e]);
+      off(
+        element,
+        eventName,
+        handlerWrapper as unknown as EventListenerObject & SupportedEventHandler<T>,
+        options,
+      );
     }
   };
-  on(element, eventName, handlerWrapper, options);
+  on(
+    element,
+    eventName,
+    handlerWrapper as unknown as EventListenerObject & SupportedEventHandler<T>,
+    options,
+  );
 };
 
 export default one;

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';
@@ -362,6 +363,7 @@ export {
   keyControl,
   keyDelete,
   keyEnter,
+  keyNumpadEnter,
   keyEscape,
   keyInsert,
   keyMeta,

package/src/interface/event.d.ts

@@ -0,0 +1,337 @@
+/**
+ * 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 = unknown, C = unknown, T = unknown> {
+  nativeEvent: Event & E;
+  currentTarget: C & EventTarget;
+  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 & NativeEventTypes;
+}
+
+/**
+ * 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 = PossibleEventTarget, E = Event> = BaseEvent<E, EventTarget & T, EventTarget>;
+
+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;
+}
+
+export 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
+// ----------------------------------------------------------------------
+type EventHandler<E extends NativeEvent<unknown, unknown>> = //   (this: unknown & EventTarget, event: E): void;
+  (event: E) => void;
+type NativeEventHandler<T = Element> = EventHandler<NativeEvent<T>>;
+type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
+type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
+type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
+type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
+type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
+type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
+type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
+type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
+type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
+type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
+type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
+type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
+type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
+type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
+
+type SupportedEventObject<T> =
+  | NativeEvent<T>
+  | ClipboardEvent<T>
+  | CompositionEvent<T>
+  | DragEvent<T>
+  | FocusEvent<T>
+  | FormEvent<T>
+  | ChangeEvent<T>
+  | KeyboardEvent<T>
+  | MouseEvent<T>
+  | TouchEvent<T>
+  | PointerEvent<T>
+  | UIEvent<T>
+  | WheelEvent<T>
+  | AnimationEvent<T>
+  | TransitionEvent<T>;
+
+type SupportedEventHandler<T> =
+  | NativeEventHandler<T>
+  | ClipboardEventHandler<T>
+  | CompositionEventHandler<T>
+  | DragEventHandler<T>
+  | FocusEventHandler<T>
+  | FormEventHandler<T>
+  | ChangeEventHandler<T>
+  | KeyboardEventHandler<T>
+  | MouseEventHandler<T>
+  | TouchEventHandler<T>
+  | PointerEventHandler<T>
+  | UIEventHandler<T>
+  | WheelEventHandler<T>
+  | AnimationEventHandler<T>
+  | TransitionEventHandler<T>;
+
+type NativeEventTypes =
+  | 'DOMContentLoaded'
+  | 'DOMMouseScroll'
+  | 'abort'
+  | 'beforeunload'
+  | 'blur'
+  | 'change'
+  | 'click'
+  | 'contextmenu'
+  | 'dblclick'
+  | 'error'
+  | 'focus'
+  | 'focusin'
+  | 'focusout'
+  | 'gesturechange'
+  | 'gestureend'
+  | 'gesturestart'
+  | 'hover'
+  | 'keydown'
+  | 'keypress'
+  | 'keyup'
+  | 'load'
+  | 'mousedown'
+  | 'mouseenter'
+  | 'mousein'
+  | 'mouseleave'
+  | 'mousemove'
+  | 'mouseout'
+  | 'mouseover'
+  | 'mouseup'
+  | 'mousewheel'
+  | 'move'
+  | 'orientationchange'
+  | 'pointercancel'
+  | 'pointerdown'
+  | 'pointerleave'
+  | 'pointermove'
+  | 'pointerup'
+  | 'readystatechange'
+  | 'reset'
+  | 'resize'
+  | 'scroll'
+  | 'select'
+  | 'selectend'
+  | 'selectstart'
+  | 'submit'
+  | 'touchcancel'
+  | 'touchend'
+  | 'touchmove'
+  | 'touchstart'
+  | 'unload';
+type PossibleEventTarget = EventTarget & (Element | Document | Window);
+
+export {
+  SupportedEventObject,
+  SupportedEventHandler,
+  EventHandler,
+  NativeEventTypes,
+  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,
+};