event-from - npm Package Compare versions

Comparing version 0.0.0 to 0.1.0

package.json

 {
   "name": "event-from",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Determine if an event was caused by mouse, touch or key input.",
-  "main": "src/index.js",
+  "main": "dist/event-from.cjs.js",
+  "module": "dist/event-from.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "npm link && npm run watch && npm unlink -g",
+    "build": "rollpkg build",
+    "watch": "rollpkg watch",
+    "prepublishOnly": "npm run lint && npm test && npm run build",
+    "lint": "eslint src",
+    "test": "jest",
+    "test:watch": "jest --watchAll",
+    "coverage": "npx live-server coverage/lcov-report",
+    "lintStaged": "lint-staged"
   },
+  "files": [
+    "dist"
+  ],
   "repository": {
@@ -18,3 +32,28 @@ "type": "git",
   },
-  "homepage": "https://github.com/rafgraph/event-from#readme"
+  "homepage": "https://github.com/rafgraph/event-from#readme",
+  "dependencies": {
+    "detect-it": "^4.0.0"
+  },
+  "devDependencies": {
+    "lint-staged": "^10.5.3",
+    "pre-commit": "^1.2.2",
+    "rollpkg": "^0.2.1",
+    "typescript": "^4.1.3"
+  },
+  "pre-commit": "lintStaged",
+  "lint-staged": {
+    "src/**/*": [
+      "eslint",
+      "prettier --write --ignore-unknown"
+    ]
+  },
+  "prettier": "rollpkg/configs/prettier.json",
+  "eslintConfig": {
+    "extends": [
+      "./node_modules/rollpkg/configs/eslint"
+    ]
+  },
+  "jest": {
+    "preset": "rollpkg"
+  }
 }

README.md

@@ -1,7 +0,13 @@
-# ⚠️⚠️ Under Construction - Not Operational ⚠️⚠️
-
 # Event From
 
-Determine if a [DOM Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) was caused by `mouse`, `touch`, or `key` input.
+Determine if a browser event was caused by `mouse`, `touch`, or `key` input.
 
+[![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)
+
+---
+
+[Demo website](https://event-from.rafgraph.dev) (code in the [demo repo](https://github.com/rafgraph/event-from-demo))
+
+---
+
 ```
@@ -12,31 +18,62 @@ npm install --save event-from
 ```js
-import { eventFrom } from "event-from";
+import { eventFrom } from 'event-from';
 
-// event is any DOM Event
-eventFrom(event): "mouse" | "touch" | "key";
+const handleEvent = (event) => {
+  // event is any user generated DOM Event
+  // call eventFrom in the event handler
+  eventFrom(event); // returns 'mouse' | 'touch' | 'key'
+};
 ```
 
-### Ignore MouseEvents that were caused by `touch` input
+### Ignore `mouse` events caused by `touch` input
 
+> Note that a touch interaction will fire Touch Events as the interaction is in progress (touch on the screen), and will fire Mouse Events during a long press (extended touch on the screen), or after the touch interaction has finished (after the touch is removed from the screen) to support sites that only listen for Mouse Events.
+
 ```js
-import { eventFrom } from "event-from";
+import { eventFrom } from 'event-from';
 
-const handleMouseEnter = (e) => {
-  if (eventFrom(e) !== "mouse") return;
-  // code for handling mouse enter event from mouse input
+const handleMouseEvent = (e) => {
+  // early return to ignore mouse events not from mouse input
+  if (eventFrom(e) !== 'mouse') return;
+
+  // code for handling mouse events from mouse input
 };
 
-element.addEventListener("mouseenter", handleMouseEnter, false);
+element.addEventListener('mouseenter', handleMouseEvent, false);
 ```
 
-### Determine if a FocusEvent was caused by `key` input for accessibility
+### Determine if a `focus` event was from `key` input for accessibility
 
 ```js
-import { eventFrom } from "event-from";
+import { eventFrom } from 'event-from';
 
-const handleFocus = (e) => {
-  if (eventFrom(e) === "key") {
-    // set focus styles for accessibility from keyboard input
+const handleFocusEvent = (e) => {
+  if (eventFrom(e) === 'key') {
+    // set focus styles when focus is from keyboard input
   }
 };
+
+element.addEventListener('focus', handleFocusEvent, false);
 ```
+
+### Determine if a `click` event was from `mouse`, `touch`, or `key` input
+
+```js
+import { eventFrom } from 'event-from';
+
+const handleClickEvent = (e) => {
+  switch (eventFrom(e)) {
+    case 'mouse':
+      // click event from mouse
+      break;
+    case 'touch':
+      // click event from touch
+      break;
+    case 'key':
+      // click event from key
+      break;
+  }
+};
+
+element.addEventListener('click', handleClickEvent, false);
+```

New 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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93322

increased by5995.49%

Number of package files

14

increased by366.67%

Lines of code

535

increased byInfinity%

Number of lines in readme file

79

increased by88.1%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

4

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addeddetect-it@^4.0.0

• + Addeddetect-it@4.0.1(transitive)