bind-event-listener - npm Package Compare versions

Comparing version 3.0.0-beta.1 to 3.0.0

package.json

 {
   "name": "bind-event-listener",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Making binding and unbinding DOM events easier",

README.md

@@ -7,4 +7,3 @@ # bind-event-listener
 
-> A utility to make binding and (**especially**) unbinding DOM events easier.
-> I seem to write this again with every new project, so I made it a library
+A well typed utility to make creating and removing DOM event listeners safer and more ergonomic.
 
@@ -219,5 +218,6 @@ ```ts
 
-Thanks to the great work by [@Ayub-Begimkulov](https://github.com/Ayub-Begimkulov) `bind-event-listener` has fantastic TypeScript types
+Thanks to the great work by [@Ayub-Begimkulov](https://github.com/Ayub-Begimkulov) and [@Andarist](https://github.com/Andarist) `bind-event-listener` has fantastic TypeScript types and auto complete.
 
-> ⚠️ TypeScript 4.1+ is required
+> ⚠️ TypeScript 4.1+ is required for types
+> ⚠️ TypeScript 5.0+ is required for event name autocompletion
 
@@ -260,2 +260,78 @@ ```ts
 
+`bind` and `bindAll` accept type arguments (generics), but it is generally best to let these be inferred
+
+```ts
+// with explicit type arguments
+bind<HTMLElement, 'click'>(button, {
+  type: 'click',
+  listener: function onClick() {},
+});
+
+// ✨ types will automatically be inferred for you ✨
+bind(button, {
+  type: 'click',
+  listener: function onClick() {},
+});
+
+// with explicit type arguments
+bindAll<HTMLElement, ['click', 'keydown']>(button, [
+  {
+    type: 'click',
+    listener: function onClick() {},
+  },
+  {
+    type: 'keydown',
+    listener: function onKeyDown() {},
+  },
+]);
+
+// ✨ types will automatically be inferred for you ✨
+bindAll(button, [
+  {
+    type: 'click',
+    listener: function onClick() {},
+  },
+  {
+    type: 'keydown',
+    listener: function onKeyDown() {},
+  },
+]);
+```
+
+> Typescript built in DOM types: [raw view](https://raw.githubusercontent.com/microsoft/TypeScript/master/lib/lib.dom.d.ts), [pretty view](https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts) (warning: pretty view seems to crash Github!)
+
+### Type helpers
+
+```ts
+import { Binding, Listener, UnbindFn } from 'bind-event-listener';
+```
+
+`Listener`: the `function` or `object` that you provide to the `listener` property of a `Binding`
+
+```ts
+bind(button, {
+  type: 'click',
+  listener: function onClick() {}, // ← `Listener`
+});
+```
+
+`Binding`: the definition of an event binding.
+
+```ts
+bind(
+  button,
+  // ↓ `Binding`
+  {
+    type: 'click',
+    listener: function onClick() {},
+  },
+);
+```
+
+`UnbindFn`: a named type for `() => void` to make it clearer that the function will unbind the added event listener(s):
+
+```ts
+const unbind: UnbindFn = bind(button, { type: 'click', listener: function onClick() {} });
+```
+
 ## Recipe: [`react`](https://reactjs.org/) effect
@@ -287,28 +363,4 @@
 
-## Types
-
-```ts
-function bind(target: EventTarget, binding: Binding): UnbindFn;
-
-function bindAll(
-  target: EventTarget,
-  bindings: Binding[],
-  // AddEventListenerOptions is a built in TypeScript type
-  sharedOptions?: boolean | AddEventListenerOptions,
-): UnbindFn;
-
-type Binding = {
-  type: string;
-  // EventListenerOrEventListenerObject is a built in TypeScript type
-  listener: EventListenerOrEventListenerObject;
-  options?: boolean | AddEventListenerOptions;
-};
-
-type UnbindFn = () => void;
-```
-
-> Typescript built in DOM types: [raw view](https://raw.githubusercontent.com/microsoft/TypeScript/master/lib/lib.dom.d.ts), [pretty view](https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts) (warning: pretty view seems to crash Github!)
-
 ## Cheers 👋
 
 Brought to you by [@alexandereardon](https://twitter.com/alexandereardon)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20811

increased by5.36%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

363

increased by16.72%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes