@solid-primitives/event-listener - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

dist/cjs/index.js

@@ -5,7 +5,34 @@ "use strict";
 var solid_js_1 = require("solid-js");
-function createEventListener(target, nameOrProps, handler, options) {
+/**
+ * Creates an event listener helper primitive.
+ *
+ * @param target - ref to HTMLElement, EventTarget or Array thereof
+ * @param nameOrProps - name of the event or Accessor with the event props ([name, handler, options?])
+ * @param handler - if nameOrProps contains a name, you can specify the handler here
+ * @param options - if nameOrProps contains a name, you can specify event listener options
+ *
+ * @example
+ * ```tsx
+ * const [add, remove] = createEventListener(
+ *   document.getElementById("mybutton"),
+ *   "mouseDown",
+ *   () => console.log("Click")
+ * );
+ * // or as a directive
+ * <MyButton use:createEventListener={() => ['click', () => console.log("Click")]}>Click!</MyButton>
+ * // you can provide your own event map type:
+ * createEventListener<{ myCustomEvent: Event }>(window, 'myCustomEvent', () => console.log("yup!"));
+ * ```
+ */
+var createEventListener = function (target) {
+    var propsArray = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        propsArray[_i - 1] = arguments[_i];
+    }
     var targets = Array.isArray(target) ? target : [target];
-    var props = typeof nameOrProps === "function"
-        ? nameOrProps
-        : function () { return [nameOrProps !== null && nameOrProps !== void 0 ? nameOrProps : "", handler !== null && handler !== void 0 ? handler : null, options]; };
+    var props = typeof propsArray[0] === "function"
+        ? propsArray[0]
+        : (function (props) { return function () {
+            return props;
+        }; })(propsArray.slice(1));
     var add = function (target) {
@@ -34,4 +61,15 @@ targets.includes(target) || targets.push(target);
     return [add, remove];
-}
+};
 exports.createEventListener = createEventListener;
-exports.default = createEventListener;
+exports.default = exports.createEventListener;
+// /* TypeCheck */
+// wrong event names:
+// createEventListener<{}, Document>(document, () => ['fullscreenchenge', () => console.log('test')]);
+// createEventListener<{}, Window>(window, 'fullscreenchange', () => console.log('test'));
+// valid events:
+// createEventListener<{}, Document>(document, () => ['fullscreenchange', () => console.log('test')]);
+// createEventListener<{}, Document>(document, () => ['abort', () => console.log('test')]);
+// createEventListener<{}, Window>(window, 'abort', () => console.log('test'));
+// createEventListener<{test: Event}, Window>(window, 'scroll', () => console.log('test'))
+// createEventListener<{test: Event}, EventTarget>(new EventTarget(), 'test', () => console.log('test'));
+// /**/

dist/index.d.ts

 import { Accessor } from "solid-js";
 import type { JSX } from "solid-js";
-export declare type EventListenerProps<E extends Record<string, Event> = {}> = [
-    name: (keyof WindowEventMap | keyof E) & string,
+export declare type EventMapOf<T> = T extends Window ? WindowEventMap : T extends Document ? DocumentEventMap : T extends HTMLElement ? HTMLElementEventMap : T extends MediaQueryList ? MediaQueryListEventMap : {};
+export declare type EventMapOfMultiple<T> = T extends EventTarget ? EventMapOf<T> : T extends EventTarget[] ? EventMapOf<T[number]> : never;
+export declare type EventListenerProps<T extends EventTarget | EventTarget[], E extends Record<string, Event> = {}> = [
+    name: [{}, {}] extends [EventMapOfMultiple<T>, E] ? string : string & (keyof EventMapOfMultiple<T> | keyof E),
     handler: EventListenerOrEventListenerObject | null,
     options?: AddEventListenerOptions
 ];
+export declare type CreateEventListenerReturn = [
+    add: (el: EventTarget) => void,
+    remove: (el: EventTarget) => void
+];
 declare module "solid-js" {
     namespace JSX {
         interface Directives {
-            createEventListener: (ref: HTMLElement, props: Accessor<EventListenerProps<{}>>) => [add: (target: EventTarget) => void, remove: (target: EventTarget) => void];
+            createEventListener: (ref: HTMLElement, props: Accessor<EventListenerProps<HTMLElement, {}>>) => [add: (target: EventTarget) => void, remove: (target: EventTarget) => void];
         }
@@ -16,2 +22,3 @@ }
 export declare type E = JSX.Element;
+declare type CreateEventListenerFn = <EventMap extends Record<string, Event>, Target extends EventTarget | EventTarget[]>(target: Target, ...props: [Accessor<EventListenerProps<Target, EventMap>>] | EventListenerProps<Target, EventMap>) => CreateEventListenerReturn;
 /**
@@ -38,4 +45,3 @@ * Creates an event listener helper primitive.
  */
-export declare function createEventListener<E extends Record<string, Event> = {}>(ref: EventTarget | EventTarget[], props: Accessor<EventListenerProps<E>>): readonly [add: (el: EventTarget) => void, remove: (el: EventTarget) => void];
-export declare function createEventListener<E extends Record<string, Event> = {}>(target: EventTarget | EventTarget[], eventName: keyof E & string, handler: EventListenerOrEventListenerObject | null, options?: EventListenerOptions): readonly [add: (el: EventTarget) => void, remove: (el: EventTarget) => void];
+export declare const createEventListener: CreateEventListenerFn;
 export default createEventListener;

dist/index.js

 import { createEffect, onCleanup } from "solid-js";
-export function createEventListener(target, nameOrProps, handler, options) {
+/**
+ * Creates an event listener helper primitive.
+ *
+ * @param target - ref to HTMLElement, EventTarget or Array thereof
+ * @param nameOrProps - name of the event or Accessor with the event props ([name, handler, options?])
+ * @param handler - if nameOrProps contains a name, you can specify the handler here
+ * @param options - if nameOrProps contains a name, you can specify event listener options
+ *
+ * @example
+ * ```tsx
+ * const [add, remove] = createEventListener(
+ *   document.getElementById("mybutton"),
+ *   "mouseDown",
+ *   () => console.log("Click")
+ * );
+ * // or as a directive
+ * <MyButton use:createEventListener={() => ['click', () => console.log("Click")]}>Click!</MyButton>
+ * // you can provide your own event map type:
+ * createEventListener<{ myCustomEvent: Event }>(window, 'myCustomEvent', () => console.log("yup!"));
+ * ```
+ */
+export const createEventListener = (target, ...propsArray) => {
     const targets = Array.isArray(target) ? target : [target];
-    const props = typeof nameOrProps === "function"
-        ? nameOrProps
-        : () => [nameOrProps ?? "", handler ?? null, options];
+    const props = typeof propsArray[0] === "function"
+        ? propsArray[0]
+        : (props => () => props)(propsArray.slice(1));
     const add = (target) => {
@@ -17,3 +38,3 @@ targets.includes(target) || targets.push(target);
     targets.forEach(add);
-    createEffect((previousProps) => {
+    createEffect(previousProps => {
         const currentProps = props();
@@ -31,3 +52,14 @@ if (previousProps !== currentProps) {
     return [add, remove];
-}
+};
 export default createEventListener;
+// /* TypeCheck */
+// wrong event names:
+// createEventListener<{}, Document>(document, () => ['fullscreenchenge', () => console.log('test')]);
+// createEventListener<{}, Window>(window, 'fullscreenchange', () => console.log('test'));
+// valid events:
+// createEventListener<{}, Document>(document, () => ['fullscreenchange', () => console.log('test')]);
+// createEventListener<{}, Document>(document, () => ['abort', () => console.log('test')]);
+// createEventListener<{}, Window>(window, 'abort', () => console.log('test'));
+// createEventListener<{test: Event}, Window>(window, 'scroll', () => console.log('test'))
+// createEventListener<{test: Event}, EventTarget>(new EventTarget(), 'test', () => console.log('test'));
+// /**/

package.json

 {
   "name": "@solid-primitives/event-listener",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Primitive to manage creating event listeners.",
@@ -12,2 +12,3 @@ "author": "David Di Biase <[e-mail]>",
   "types": "dist/index.d.ts",
+  "type": "module",
   "files": [
@@ -42,3 +43,3 @@ "dist"
     "tslib": "^2.0.1",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.4"
   },
@@ -45,0 +46,0 @@ "dependencies": {

README.md

@@ -11,5 +11,5 @@ ---
 
-[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
-[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/event-listener)](https://bundlephobia.com/package/@solid-primitives/event-listener)
-[![size](https://img.shields.io/npm/v/@solid-primitives/event-listener)](https://www.npmjs.com/package/@solid-primitives/event-listener)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=for-the-badge)](https://lerna.js.org/)
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/event-listener?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/event-listener)
+[![size](https://img.shields.io/npm/v/@solid-primitives/event-listener?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/event-listener)
 
@@ -65,3 +65,3 @@ A helpful event listener primitive that binds window and any element supplied.
 
-1.2.4
+1.2.5
 
@@ -68,0 +68,0 @@ Added CJS build.

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

Improved metrics

Total package byte prevSize

13172

increased by38.74%

Lines of code

181

increased by70.75%

Is type module

Yes

No dependency changes