event-from - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/event-from.cjs.development.js

@@ -17,3 +17,4 @@ 'use strict';
 // in the case of a long running/blocking process from a touch event,
-// the browser will push the corresponding mouse event onto the callback queue at the time it should be executed,
+// the browser will push the corresponding mouse event (created by the touch interaction)
+// onto the callback queue at the time it should be executed,
 // and then push the timeout function onto the queue after the timer expires,
@@ -28,4 +29,4 @@ // even if the the main thread is still blocked (because the browser is multi-threaded).
 // it will be called before the timeout's function (so it can reset the timer),
-// and, this is the key part, if the previous timer has already finished, the call to `clearTimeout(recentTouchTimeoutId)`
-// will remove the timeout's function from the callback queue.
+// and, this is the key part, if the previous timer has finished and it's callback is added to the queue,
+// the call to clearTimeout(recentTouchTimeoutId) will remove the timeout's function from the callback queue.
 
@@ -122,3 +123,3 @@ var recentTouchTimeoutId;
   // this helps catch edge cases especially when a move event is passed to eventFrom
-  // because move event listeners are not set on the document
+  // because move event listeners are not set by Event From
   switch (event.pointerType) {
@@ -125,0 +126,0 @@ case 'mouse':

dist/event-from.esm.js

@@ -13,3 +13,4 @@ import { primaryInput, supportsPassiveEvents, deviceType } from 'detect-it';
 // in the case of a long running/blocking process from a touch event,
-// the browser will push the corresponding mouse event onto the callback queue at the time it should be executed,
+// the browser will push the corresponding mouse event (created by the touch interaction)
+// onto the callback queue at the time it should be executed,
 // and then push the timeout function onto the queue after the timer expires,
@@ -24,4 +25,4 @@ // even if the the main thread is still blocked (because the browser is multi-threaded).
 // it will be called before the timeout's function (so it can reset the timer),
-// and, this is the key part, if the previous timer has already finished, the call to `clearTimeout(recentTouchTimeoutId)`
-// will remove the timeout's function from the callback queue.
+// and, this is the key part, if the previous timer has finished and it's callback is added to the queue,
+// the call to clearTimeout(recentTouchTimeoutId) will remove the timeout's function from the callback queue.
 
@@ -118,3 +119,3 @@ var recentTouchTimeoutId;
   // this helps catch edge cases especially when a move event is passed to eventFrom
-  // because move event listeners are not set on the document
+  // because move event listeners are not set by Event From
   switch (event.pointerType) {
@@ -121,0 +122,0 @@ case 'mouse':

dist/event-from.umd.development.js

@@ -96,3 +96,4 @@ (function (global, factory) {
   // in the case of a long running/blocking process from a touch event,
-  // the browser will push the corresponding mouse event onto the callback queue at the time it should be executed,
+  // the browser will push the corresponding mouse event (created by the touch interaction)
+  // onto the callback queue at the time it should be executed,
   // and then push the timeout function onto the queue after the timer expires,
@@ -107,4 +108,4 @@ // even if the the main thread is still blocked (because the browser is multi-threaded).
   // it will be called before the timeout's function (so it can reset the timer),
-  // and, this is the key part, if the previous timer has already finished, the call to `clearTimeout(recentTouchTimeoutId)`
-  // will remove the timeout's function from the callback queue.
+  // and, this is the key part, if the previous timer has finished and it's callback is added to the queue,
+  // the call to clearTimeout(recentTouchTimeoutId) will remove the timeout's function from the callback queue.
 
@@ -201,3 +202,3 @@ var recentTouchTimeoutId;
     // this helps catch edge cases especially when a move event is passed to eventFrom
-    // because move event listeners are not set on the document
+    // because move event listeners are not set by Event From
     switch (event.pointerType) {
@@ -204,0 +205,0 @@ case 'mouse':

package.json

 {
   "name": "event-from",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Determine if an event was caused by mouse, touch or key input.",
@@ -32,3 +32,3 @@ "main": "dist/event-from.cjs.js",
   },
-  "homepage": "https://github.com/rafgraph/event-from#readme",
+  "homepage": "https://event-from.rafgraph.dev",
   "dependencies": {
@@ -35,0 +35,0 @@ "detect-it": "^4.0.0"

README.md

 # Event From
 
-Determine if a browser event was caused by `mouse`, `touch`, or `key` input.
+Determine if a browser event was caused by `mouse`, `touch`, or `key` input. Can be used to:
 
+- Ignore `mouse` events caused by `touch` input.
+- Determine if `focus` was initiated from the keyboard (to know when to add focus styles).
+- Determining if a `click` event was from `mouse`, `touch`, or `key` input.
+- And anything else where knowing the type of user interaction that generated the event is helpful.
+- You may also be interested in [Detect It](https://github.com/rafgraph/detect-it), which detects if a device is `mouseOnly`, `touchOnly`, or `hybrid`, and if the primary input is `mouse` or `touch`.
+
 [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/event-from?color=purple)](https://bundlephobia.com/result?p=event-from) ![npm type definitions](https://img.shields.io/npm/types/event-from?color=blue)
@@ -21,8 +27,10 @@
 const handleEvent = (event) => {
-  // event is any user generated DOM Event
-  // call eventFrom in the event handler
-  eventFrom(event); // returns 'mouse' | 'touch' | 'key'
+  // in the event handler call eventFrom and pass in the event
+  // eventFrom will return 1 of 3 strings: 'mouse' | 'touch' | 'key'
+  eventFrom(event);
 };
 ```
 
+---
+
 ### Ignore `mouse` events caused by `touch` input
@@ -45,2 +53,4 @@
 
+---
+
 ### Determine if a `focus` event was from `key` input for accessibility
@@ -60,2 +70,4 @@
 
+---
+
 ### Determine if a `click` event was from `mouse`, `touch`, or `key` input
@@ -82,1 +94,9 @@
 ```
+
+---
+
+## How it works
+
+Event From sets passive event listeners on the `document` and `window` and tracks the recent event history to know what input type is responsible for the event that's passed to `eventFrom(event)`.
+
+The listeners that Event From sets are all low frequency event listeners (enter/leave/down/up/focus/etc). Event From does not set any high frequency listeners such as `move` or `scroll` listeners.

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94835

increased by1.62%

Lines of code

538

increased by0.56%

Number of lines in readme file

99

increased by25.32%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes