mjolnir.js - npm Package Compare versions

Comparing version 2.7.0-alpha.2 to 2.7.0-alpha.3

CHANGELOG.md

 # Change Log
 
+#### [2.7.0-alpha.3] - May 23, 2022
+
+- Better types for event handler
+
 #### [2.7.0-alpha.2] - Feb 25, 2022
@@ -4,0 +8,0 @@

dist/es5/event-manager.d.ts

@@ -1,7 +0,5 @@
-import type { HammerManagerConstructor, RecognizerOptions, RecognizerTuple, MjolnirEventHandler } from './types';
+import type { HammerManagerConstructor, MjolnirEvent, RecognizerOptions, RecognizerTuple, MjolnirEventHandlers } from './types';
 import { HandlerOptions } from './utils/event-registrar';
 export declare type EventManagerOptions = {
-    events?: {
-        [type: string]: MjolnirEventHandler;
-    };
+    events?: MjolnirEventHandlers;
     recognizers?: RecognizerTuple[];
@@ -29,11 +27,7 @@ recognizerOptions?: {
     /** Register multiple event handlers */
-    on(events: {
-        [eventType: string]: MjolnirEventHandler;
-    }, opts?: HandlerOptions): void;
-    on(event: string, handler: MjolnirEventHandler, opts?: HandlerOptions): void;
+    on(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
+    on<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void, opts?: HandlerOptions): void;
     /** Register an event handler function to be called on `event`, then remove it */
-    once(events: {
-        [eventType: string]: MjolnirEventHandler;
-    }, opts?: HandlerOptions): void;
-    once(event: string, handler: MjolnirEventHandler, opts?: HandlerOptions): void;
+    once(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
+    once<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void, opts?: HandlerOptions): void;
     /** Register an event handler function to be called on `event`
@@ -43,13 +37,9 @@ * This handler does not ask the event to be recognized at all times.
      */
-    watch(events: {
-        [eventType: string]: MjolnirEventHandler;
-    }, opts?: HandlerOptions): void;
-    watch(event: string, handler: MjolnirEventHandler, opts?: HandlerOptions): void;
+    watch(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
+    watch<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void, opts?: HandlerOptions): void;
     /**
      * Deregister a previously-registered event handler.
      */
-    off(events: {
-        [eventType: string]: MjolnirEventHandler;
-    }): void;
-    off(event: string, handler: MjolnirEventHandler): void;
+    off(events: MjolnirEventHandlers): void;
+    off<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void): void;
     private _toggleRecognizer;
@@ -56,0 +46,0 @@ /**

dist/es5/types.d.ts

@@ -65,3 +65,3 @@ export declare type Point = {
     /** Name of the event. */
-    type: 'tap' | 'anytap' | 'doubletap' | 'press' | 'pinch' | 'pinchin' | 'pinchout' | 'pinchstart' | 'pinchmove' | 'pinchend' | 'pinchcancel' | 'rotate' | 'rotatestart' | 'rotatemove' | 'rotateend' | 'rotatecancel' | 'tripan' | 'tripanstart' | 'tripanmove' | 'tripanup' | 'tripandown' | 'tripanleft' | 'tripanright' | 'tripanend' | 'tripancancel' | 'pan' | 'panstart' | 'panmove' | 'panup' | 'pandown' | 'panleft' | 'panright' | 'panend' | 'pancancel' | 'swipe' | 'swipeleft' | 'swiperight' | 'swipeup' | 'swipedown';
+    type: 'tap' | 'anytap' | 'doubletap' | 'press' | 'pinch' | 'pinchin' | 'pinchout' | 'pinchstart' | 'pinchmove' | 'pinchend' | 'pinchcancel' | 'rotate' | 'rotatestart' | 'rotatemove' | 'rotateend' | 'rotatecancel' | 'tripan' | 'tripanstart' | 'tripanmove' | 'tripanup' | 'tripandown' | 'tripanleft' | 'tripanright' | 'tripanend' | 'tripancancel' | 'pan' | 'panstart' | 'panmove' | 'panup' | 'pandown' | 'panleft' | 'panright' | 'panend' | 'pancancel' | 'swipe' | 'swipeleft' | 'swiperight' | 'swipeup' | 'swipedown' | 'click' | 'anyclick' | 'dblclick';
     /** Movement of the X axis. */
@@ -113,4 +113,2 @@ deltaX: number;
     timeStamp: number;
-    /** Reference to the srcEvent.preventDefault() method. Only for experts! */
-    preventDefault: () => void;
 };
@@ -131,5 +129,6 @@ export interface MjolnirEventRaw {
     stopImmediatePropagation: () => void;
+    preventDefault: () => void;
 };
 export declare type MjolnirPointerEventRaw = MjolnirEventRaw & {
-    type: 'contextmenu' | 'pointermove' | 'pointerover' | 'pointerout' | 'pointerenter' | 'pointerleave';
+    type: 'pointerup' | 'pointerdown' | 'contextmenu' | 'pointermove' | 'pointerover' | 'pointerout' | 'pointerenter' | 'pointerleave';
     pointerType: 'mouse' | 'touch';
@@ -161,2 +160,10 @@ center: Point;
 export declare type MjolnirEvent = MjolnirGestureEvent | MjolnirPointerEvent | MjolnirWheelEvent | MjolnirKeyEvent;
-export declare type MjolnirEventHandler = (event: MjolnirEvent) => void;
+export declare type MjolnirEventHandlers = {
+    [type in MjolnirGestureEvent['type']]?: (event: MjolnirGestureEvent) => void;
+} & {
+    [type in MjolnirPointerEvent['type']]?: (event: MjolnirPointerEvent) => void;
+} & {
+    [type in MjolnirWheelEvent['type']]?: (event: MjolnirWheelEvent) => void;
+} & {
+    [type in MjolnirKeyEvent['type']]?: (event: MjolnirKeyEvent) => void;
+};

dist/es5/utils/event-registrar.d.ts

 import type EventManager from '../event-manager';
-import type { MjolnirEventRaw, MjolnirEventWrapper, MjolnirEventHandler } from '../types';
+import type { MjolnirEventRaw, MjolnirEventWrapper, MjolnirEvent } from '../types';
 export declare type HandlerOptions = {
@@ -9,3 +9,3 @@ srcElement?: 'root' | HTMLElement;
     type: string;
-    handler: MjolnirEventHandler;
+    handler: (event: MjolnirEvent) => void;
     once?: boolean;
@@ -22,4 +22,4 @@ passive?: boolean;
     isEmpty(): boolean;
-    add(type: string, handler: MjolnirEventHandler, options: HTMLElement | HandlerOptions, once?: boolean, passive?: boolean): void;
-    remove(type: string, handler: MjolnirEventHandler): void;
+    add(type: string, handler: (event: MjolnirEvent) => void, options: HTMLElement | HandlerOptions, once?: boolean, passive?: boolean): void;
+    remove(type: string, handler: (event: MjolnirEvent) => void): void;
     /**
@@ -26,0 +26,0 @@ * Handles hammerjs event

dist/es5/utils/event-registrar.js

@@ -148,3 +148,5 @@ "use strict";
         var rootElement = this.eventManager.getElement();
-        return __assign(__assign(__assign(__assign({}, event), (0, event_utils_1.whichButtons)(event)), (0, event_utils_1.getOffsetPosition)(event, rootElement)), { stopImmediatePropagation: null, stopPropagation: null, handled: false, rootElement: rootElement });
+        return __assign(__assign(__assign(__assign({}, event), (0, event_utils_1.whichButtons)(event)), (0, event_utils_1.getOffsetPosition)(event, rootElement)), { preventDefault: function () {
+                event.srcEvent.preventDefault();
+            }, stopImmediatePropagation: null, stopPropagation: null, handled: false, rootElement: rootElement });
     };
@@ -151,0 +153,0 @@ return EventRegistrar;

dist/esm/event-manager.d.ts

@@ -1,7 +0,5 @@
-import type { HammerManagerConstructor, RecognizerOptions, RecognizerTuple, MjolnirEventHandler } from './types';
+import type { HammerManagerConstructor, MjolnirEvent, RecognizerOptions, RecognizerTuple, MjolnirEventHandlers } from './types';
 import { HandlerOptions } from './utils/event-registrar';
 export declare type EventManagerOptions = {
-    events?: {
-        [type: string]: MjolnirEventHandler;
-    };
+    events?: MjolnirEventHandlers;
     recognizers?: RecognizerTuple[];
@@ -29,11 +27,7 @@ recognizerOptions?: {
     /** Register multiple event handlers */
-    on(events: {
-        [eventType: string]: MjolnirEventHandler;
-    }, opts?: HandlerOptions): void;
-    on(event: string, handler: MjolnirEventHandler, opts?: HandlerOptions): void;
+    on(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
+    on<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void, opts?: HandlerOptions): void;
     /** Register an event handler function to be called on `event`, then remove it */
-    once(events: {
-        [eventType: string]: MjolnirEventHandler;
-    }, opts?: HandlerOptions): void;
-    once(event: string, handler: MjolnirEventHandler, opts?: HandlerOptions): void;
+    once(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
+    once<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void, opts?: HandlerOptions): void;
     /** Register an event handler function to be called on `event`
@@ -43,13 +37,9 @@ * This handler does not ask the event to be recognized at all times.
      */
-    watch(events: {
-        [eventType: string]: MjolnirEventHandler;
-    }, opts?: HandlerOptions): void;
-    watch(event: string, handler: MjolnirEventHandler, opts?: HandlerOptions): void;
+    watch(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
+    watch<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void, opts?: HandlerOptions): void;
     /**
      * Deregister a previously-registered event handler.
      */
-    off(events: {
-        [eventType: string]: MjolnirEventHandler;
-    }): void;
-    off(event: string, handler: MjolnirEventHandler): void;
+    off(events: MjolnirEventHandlers): void;
+    off<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void): void;
     private _toggleRecognizer;
@@ -56,0 +46,0 @@ /**

dist/esm/types.d.ts

@@ -65,3 +65,3 @@ export declare type Point = {
     /** Name of the event. */
-    type: 'tap' | 'anytap' | 'doubletap' | 'press' | 'pinch' | 'pinchin' | 'pinchout' | 'pinchstart' | 'pinchmove' | 'pinchend' | 'pinchcancel' | 'rotate' | 'rotatestart' | 'rotatemove' | 'rotateend' | 'rotatecancel' | 'tripan' | 'tripanstart' | 'tripanmove' | 'tripanup' | 'tripandown' | 'tripanleft' | 'tripanright' | 'tripanend' | 'tripancancel' | 'pan' | 'panstart' | 'panmove' | 'panup' | 'pandown' | 'panleft' | 'panright' | 'panend' | 'pancancel' | 'swipe' | 'swipeleft' | 'swiperight' | 'swipeup' | 'swipedown';
+    type: 'tap' | 'anytap' | 'doubletap' | 'press' | 'pinch' | 'pinchin' | 'pinchout' | 'pinchstart' | 'pinchmove' | 'pinchend' | 'pinchcancel' | 'rotate' | 'rotatestart' | 'rotatemove' | 'rotateend' | 'rotatecancel' | 'tripan' | 'tripanstart' | 'tripanmove' | 'tripanup' | 'tripandown' | 'tripanleft' | 'tripanright' | 'tripanend' | 'tripancancel' | 'pan' | 'panstart' | 'panmove' | 'panup' | 'pandown' | 'panleft' | 'panright' | 'panend' | 'pancancel' | 'swipe' | 'swipeleft' | 'swiperight' | 'swipeup' | 'swipedown' | 'click' | 'anyclick' | 'dblclick';
     /** Movement of the X axis. */
@@ -113,4 +113,2 @@ deltaX: number;
     timeStamp: number;
-    /** Reference to the srcEvent.preventDefault() method. Only for experts! */
-    preventDefault: () => void;
 };
@@ -131,5 +129,6 @@ export interface MjolnirEventRaw {
     stopImmediatePropagation: () => void;
+    preventDefault: () => void;
 };
 export declare type MjolnirPointerEventRaw = MjolnirEventRaw & {
-    type: 'contextmenu' | 'pointermove' | 'pointerover' | 'pointerout' | 'pointerenter' | 'pointerleave';
+    type: 'pointerup' | 'pointerdown' | 'contextmenu' | 'pointermove' | 'pointerover' | 'pointerout' | 'pointerenter' | 'pointerleave';
     pointerType: 'mouse' | 'touch';
@@ -161,2 +160,10 @@ center: Point;
 export declare type MjolnirEvent = MjolnirGestureEvent | MjolnirPointerEvent | MjolnirWheelEvent | MjolnirKeyEvent;
-export declare type MjolnirEventHandler = (event: MjolnirEvent) => void;
+export declare type MjolnirEventHandlers = {
+    [type in MjolnirGestureEvent['type']]?: (event: MjolnirGestureEvent) => void;
+} & {
+    [type in MjolnirPointerEvent['type']]?: (event: MjolnirPointerEvent) => void;
+} & {
+    [type in MjolnirWheelEvent['type']]?: (event: MjolnirWheelEvent) => void;
+} & {
+    [type in MjolnirKeyEvent['type']]?: (event: MjolnirKeyEvent) => void;
+};

dist/esm/utils/event-registrar.d.ts

 import type EventManager from '../event-manager';
-import type { MjolnirEventRaw, MjolnirEventWrapper, MjolnirEventHandler } from '../types';
+import type { MjolnirEventRaw, MjolnirEventWrapper, MjolnirEvent } from '../types';
 export declare type HandlerOptions = {
@@ -9,3 +9,3 @@ srcElement?: 'root' | HTMLElement;
     type: string;
-    handler: MjolnirEventHandler;
+    handler: (event: MjolnirEvent) => void;
     once?: boolean;
@@ -22,4 +22,4 @@ passive?: boolean;
     isEmpty(): boolean;
-    add(type: string, handler: MjolnirEventHandler, options: HTMLElement | HandlerOptions, once?: boolean, passive?: boolean): void;
-    remove(type: string, handler: MjolnirEventHandler): void;
+    add(type: string, handler: (event: MjolnirEvent) => void, options: HTMLElement | HandlerOptions, once?: boolean, passive?: boolean): void;
+    remove(type: string, handler: (event: MjolnirEvent) => void): void;
     /**
@@ -26,0 +26,0 @@ * Handles hammerjs event

dist/esm/utils/event-registrar.js

@@ -140,2 +140,5 @@ import { whichButtons, getOffsetPosition } from './event-utils';
             ...getOffsetPosition(event, rootElement),
+            preventDefault: () => {
+                event.srcEvent.preventDefault();
+            },
             stopImmediatePropagation: null,
@@ -142,0 +145,0 @@ stopPropagation: null,

package.json

 {
   "name": "mjolnir.js",
   "description": "An Event Manager",
-  "version": "2.7.0-alpha.2",
+  "version": "2.7.0-alpha.3",
   "keywords": [
@@ -6,0 +6,0 @@ "hammerjs",

src/event-manager.ts

@@ -6,5 +6,6 @@ import {Manager} from './utils/hammer';
   MjolnirEventRaw,
+  MjolnirEvent,
   RecognizerOptions,
   RecognizerTuple,
-  MjolnirEventHandler
+  MjolnirEventHandlers
 } from './types';
@@ -29,3 +30,3 @@
 export type EventManagerOptions = {
-  events?: {[type: string]: MjolnirEventHandler};
+  events?: MjolnirEventHandlers;
   recognizers?: RecognizerTuple[];
@@ -175,4 +176,8 @@ recognizerOptions?: {[type: string]: RecognizerOptions};
   /** Register multiple event handlers */
-  on(events: {[eventType: string]: MjolnirEventHandler}, opts?: HandlerOptions): void;
-  on(event: string, handler: MjolnirEventHandler, opts?: HandlerOptions): void;
+  on(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
+  on<EventT extends MjolnirEvent>(
+    event: EventT['type'],
+    handler: (event: EventT) => void,
+    opts?: HandlerOptions
+  ): void;
 
@@ -185,4 +190,8 @@ /** Register an event handler function to be called on `event` */
   /** Register an event handler function to be called on `event`, then remove it */
-  once(events: {[eventType: string]: MjolnirEventHandler}, opts?: HandlerOptions): void;
-  once(event: string, handler: MjolnirEventHandler, opts?: HandlerOptions): void;
+  once(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
+  once<EventT extends MjolnirEvent>(
+    event: EventT['type'],
+    handler: (event: EventT) => void,
+    opts?: HandlerOptions
+  ): void;
 
@@ -197,4 +206,8 @@ once(event: any, handler: any, opts?: any) {
    */
-  watch(events: {[eventType: string]: MjolnirEventHandler}, opts?: HandlerOptions): void;
-  watch(event: string, handler: MjolnirEventHandler, opts?: HandlerOptions): void;
+  watch(events: MjolnirEventHandlers, opts?: HandlerOptions): void;
+  watch<EventT extends MjolnirEvent>(
+    event: EventT['type'],
+    handler: (event: EventT) => void,
+    opts?: HandlerOptions
+  ): void;
 
@@ -208,4 +221,4 @@ watch(event: any, handler: any, opts?: any) {
    */
-  off(events: {[eventType: string]: MjolnirEventHandler}): void;
-  off(event: string, handler: MjolnirEventHandler): void;
+  off(events: MjolnirEventHandlers): void;
+  off<EventT extends MjolnirEvent>(event: EventT['type'], handler: (event: EventT) => void): void;
 
@@ -263,4 +276,4 @@ off(event: any, handler?: any) {
   private _addEventHandler(
-    event: string | {[type: string]: MjolnirEventHandler},
-    handler: MjolnirEventHandler,
+    event: string | MjolnirEventHandlers,
+    handler: (event: MjolnirEvent) => void,
     opts?: HandlerOptions,
@@ -305,4 +318,4 @@ once?: boolean,
   private _removeEventHandler(
-    event: string | {[type: string]: MjolnirEventHandler},
-    handler?: MjolnirEventHandler
+    event: string | MjolnirEventHandlers,
+    handler?: (event: MjolnirEvent) => void
   ) {
@@ -309,0 +322,0 @@ if (typeof event !== 'string') {

src/types.ts

@@ -126,3 +126,7 @@ export type Point = {
     | 'swipeup'
-    | 'swipedown';
+    | 'swipedown'
+    // Aliases
+    | 'click'
+    | 'anyclick'
+    | 'dblclick';
 
@@ -197,5 +201,2 @@ /** Movement of the X axis. */
   timeStamp: number;
-
-  /** Reference to the srcEvent.preventDefault() method. Only for experts! */
-  preventDefault: () => void;
 };
@@ -220,2 +221,3 @@
   stopImmediatePropagation: () => void;
+  preventDefault: () => void;
 };
@@ -225,2 +227,4 @@
   type:
+    | 'pointerup'
+    | 'pointerdown'
     | 'contextmenu'
@@ -268,2 +272,7 @@ | 'pointermove'
 
-export type MjolnirEventHandler = (event: MjolnirEvent) => void;
+export type MjolnirEventHandlers = {
+  [type in MjolnirGestureEvent['type']]?: (event: MjolnirGestureEvent) => void;
+} &
+  {[type in MjolnirPointerEvent['type']]?: (event: MjolnirPointerEvent) => void} &
+  {[type in MjolnirWheelEvent['type']]?: (event: MjolnirWheelEvent) => void} &
+  {[type in MjolnirKeyEvent['type']]?: (event: MjolnirKeyEvent) => void};

src/utils/event-registrar.ts

 import type EventManager from '../event-manager';
 import {whichButtons, getOffsetPosition} from './event-utils';
-import type {MjolnirEventRaw, MjolnirEventWrapper, MjolnirEventHandler} from '../types';
+import type {MjolnirEventRaw, MjolnirEventWrapper, MjolnirEvent} from '../types';
 
@@ -12,3 +12,3 @@ export type HandlerOptions = {
   type: string;
-  handler: MjolnirEventHandler;
+  handler: (event: MjolnirEvent) => void;
   once?: boolean;
@@ -46,3 +46,3 @@ passive?: boolean;
     type: string,
-    handler: MjolnirEventHandler,
+    handler: (event: MjolnirEvent) => void,
     options: HTMLElement | HandlerOptions,
@@ -95,3 +95,3 @@ once: boolean = false,
 
-  remove(type: string, handler: MjolnirEventHandler) {
+  remove(type: string, handler: (event: MjolnirEvent) => void) {
     const {handlers, handlersByElement} = this;
@@ -192,2 +192,5 @@
       ...getOffsetPosition(event, rootElement),
+      preventDefault: () => {
+        event.srcEvent.preventDefault();
+      },
       stopImmediatePropagation: null,
@@ -194,0 +197,0 @@ stopPropagation: null,

No alert changes

Improved metrics

Total package byte prevSize

246564

increased by0.64%

Lines of code

4680

increased by0.54%

No dependency changes