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

Comparing version 1.3.2 to 1.3.4

dist/index.d.ts

@@ -1,5 +0,6 @@
-import { MaybeAccessor, Many } from '@solid-primitives/utils';
+import { Fn, MaybeAccessor, Many } from '@solid-primitives/utils';
 import { JSX, Accessor, Component } from 'solid-js';
 import { Store } from 'solid-js/store';
 
+declare type ClearListeners = Fn;
 declare type TargetWithEventMap = Window | Document | HTMLElement | MediaQueryList;
@@ -23,2 +24,6 @@ declare type EventMapOf<Target> = Target extends Window ? WindowEventMap : Target extends Document ? DocumentEventMap : Target extends HTMLElement ? HTMLElementEventMap : Target extends MediaQueryList ? MediaQueryListEventMap : never;
 
+declare type EventListenerSignalReturns<Event> = [
+    lastEvent: Accessor<Event | undefined>,
+    clear: ClearListeners
+];
 /**
@@ -32,2 +37,4 @@ * Creates an event listener, that will be automatically disposed on cleanup.
  *
+ * @returns Function clearing all event listeners form targets
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
@@ -37,6 +44,6 @@ * @see https://github.com/davedbase/solid-primitives/tree/main/packages/event-listener#createEventListener
  * @example
- * createEventListener(element, 'click', e => { ... }, { passive: true })
+ * const clear = createEventListener(element, 'click', e => { ... }, { passive: true })
  */
-declare function createEventListener<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, EventName extends keyof EventMap>(target: MaybeAccessor<Many<Target>>, eventName: MaybeAccessor<EventName>, handler: (event: EventMap[EventName]) => void, options?: MaybeAccessor<boolean | AddEventListenerOptions>): void;
-declare function createEventListener<EventMap extends Record<string, Event>, EventName extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, eventName: MaybeAccessor<EventName>, handler: (event: EventMap[EventName]) => void, options?: MaybeAccessor<boolean | AddEventListenerOptions>): void;
+declare function createEventListener<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, EventName extends keyof EventMap>(target: MaybeAccessor<Many<Target>>, eventName: MaybeAccessor<EventName>, handler: (event: EventMap[EventName]) => void, options?: MaybeAccessor<boolean | AddEventListenerOptions>): ClearListeners;
+declare function createEventListener<EventMap extends Record<string, Event>, EventName extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, eventName: MaybeAccessor<EventName>, handler: (event: EventMap[EventName]) => void, options?: MaybeAccessor<boolean | AddEventListenerOptions>): ClearListeners;
 /**
@@ -49,2 +56,4 @@ * Provides an reactive signal of last captured event.
  *
+ * @returns Signal of last captured event & function clearing all event listeners
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
@@ -55,5 +64,9 @@ * @see https://github.com/davedbase/solid-primitives/tree/main/packages/event-listener#createEventSignal
  * const lastEvent = createEventSignal(el, 'click', { passive: true })
+ *
+ * createEffect(() => {
+ *    console.log(lastEvent())
+ * })
  */
-declare function createEventSignal<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, EventName extends keyof EventMap>(target: MaybeAccessor<Many<Target>>, eventName: MaybeAccessor<EventName>, options?: MaybeAccessor<boolean | AddEventListenerOptions>): Accessor<EventMap[EventName] | undefined>;
-declare function createEventSignal<EventMap extends Record<string, Event>, EventName extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, eventName: MaybeAccessor<EventName>, options?: MaybeAccessor<boolean | AddEventListenerOptions>): Accessor<EventMap[EventName] | undefined>;
+declare function createEventSignal<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, EventName extends keyof EventMap>(target: MaybeAccessor<Many<Target>>, eventName: MaybeAccessor<EventName>, options?: MaybeAccessor<boolean | AddEventListenerOptions>): EventListenerSignalReturns<EventMap[EventName]>;
+declare function createEventSignal<EventMap extends Record<string, Event>, EventName extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, eventName: MaybeAccessor<EventName>, options?: MaybeAccessor<boolean | AddEventListenerOptions>): EventListenerSignalReturns<EventMap[EventName]>;
 /**
@@ -72,2 +85,3 @@ * Directive Usage. Creates an event listener, that will be automatically disposed on cleanup.
 };
+declare type EventListnenerStoreReturns<E> = [lastEvents: Store<Partial<E>>, clear: ClearListeners];
 /**
@@ -80,2 +94,4 @@ * A helpful primitive that listens to a map of events. Handle them by individual callbacks.
  *
+ * @returns Function clearing all event listeners form targets
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
@@ -85,3 +101,3 @@ * @see https://github.com/davedbase/solid-primitives/tree/main/packages/event-listener#createEventListenerMap
  * @example
- * createEventListenerMap(element, {
+ * const clear = createEventListenerMap(element, {
  *   mousemove: mouseHandler,
@@ -92,4 +108,4 @@ *   mouseenter: e => {},
  */
-declare function createEventListenerMap<EventMap extends Record<string, Event>, UsedEvents extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, handlersMap: Partial<Pick<EventHandlersMap<EventMap>, UsedEvents>>, options?: MaybeAccessor<boolean | AddEventListenerOptions>): void;
-declare function createEventListenerMap<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, HandlersMap extends Partial<EventHandlersMap<EventMap>>>(target: MaybeAccessor<Many<Target>>, handlersMap: HandlersMap, options?: MaybeAccessor<boolean | AddEventListenerOptions>): void;
+declare function createEventListenerMap<EventMap extends Record<string, Event>, UsedEvents extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, handlersMap: Partial<Pick<EventHandlersMap<EventMap>, UsedEvents>>, options?: MaybeAccessor<boolean | AddEventListenerOptions>): ClearListeners;
+declare function createEventListenerMap<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, HandlersMap extends Partial<EventHandlersMap<EventMap>>>(target: MaybeAccessor<Many<Target>>, handlersMap: HandlersMap, options?: MaybeAccessor<boolean | AddEventListenerOptions>): ClearListeners;
 /**
@@ -102,3 +118,3 @@ * A helpful primitive that listens to target events and provides a reactive store with the latest captured events.
  *
- * @returns reactive store with the latest captured events
+ * @returns reactive store with the latest captured events & clear function
  *
@@ -109,3 +125,3 @@ * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
  * @example
- * const lastEvents = createEventStore(el, "mousemove", "touchend", "click");
+ * const [lastEvents, clear] = createEventStore(el, "mousemove", "touchend", "click");
  *
@@ -116,6 +132,6 @@ * createEffect(() => {
  */
-declare function createEventStore<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, UsedEvents extends keyof EventMap>(target: MaybeAccessor<Many<Target>>, ...eventNames: UsedEvents[]): Store<Partial<Pick<EventMap, UsedEvents>>>;
-declare function createEventStore<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, UsedEvents extends keyof EventMap>(target: MaybeAccessor<Many<Target>>, options: MaybeAccessor<boolean | AddEventListenerOptions>, ...eventNames: UsedEvents[]): Store<Partial<Pick<EventMap, UsedEvents>>>;
-declare function createEventStore<EventMap extends Record<string, Event>, UsedEvents extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, ...eventNames: UsedEvents[]): Store<Partial<Pick<EventMap, UsedEvents>>>;
-declare function createEventStore<EventMap extends Record<string, Event>, UsedEvents extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, options: MaybeAccessor<boolean | AddEventListenerOptions>, ...eventNames: UsedEvents[]): Store<Partial<Pick<EventMap, UsedEvents>>>;
+declare function createEventStore<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, UsedEvents extends keyof EventMap>(target: MaybeAccessor<Many<Target>>, ...eventNames: UsedEvents[]): EventListnenerStoreReturns<Pick<EventMap, UsedEvents>>;
+declare function createEventStore<Target extends TargetWithEventMap, EventMap extends EventMapOf<Target>, UsedEvents extends keyof EventMap>(target: MaybeAccessor<Many<Target>>, options: MaybeAccessor<boolean | AddEventListenerOptions>, ...eventNames: UsedEvents[]): EventListnenerStoreReturns<Pick<EventMap, UsedEvents>>;
+declare function createEventStore<EventMap extends Record<string, Event>, UsedEvents extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, ...eventNames: UsedEvents[]): EventListnenerStoreReturns<Pick<EventMap, UsedEvents>>;
+declare function createEventStore<EventMap extends Record<string, Event>, UsedEvents extends keyof EventMap = keyof EventMap>(target: MaybeAccessor<Many<EventTarget>>, options: MaybeAccessor<boolean | AddEventListenerOptions>, ...eventNames: UsedEvents[]): EventListnenerStoreReturns<Pick<EventMap, UsedEvents>>;
 /**
@@ -159,2 +175,2 @@ * Directive Usage. A helpful primitive that listens to provided events. Handle them by callbacks.
 
-export { DocumentEventListener, E, EventHandlersMap, EventListenerDirectiveProps, EventListenerMapDirectiveProps, EventMapOf, TargetWithEventMap, WindowEventListener, createEventListener, createEventListenerMap, createEventSignal, createEventStore, eventListener, eventListenerMap };
+export { ClearListeners, DocumentEventListener, E, EventHandlersMap, EventListenerDirectiveProps, EventListenerMapDirectiveProps, EventListenerSignalReturns, EventListnenerStoreReturns, EventMapOf, TargetWithEventMap, WindowEventListener, createEventListener, createEventListenerMap, createEventSignal, createEventStore, eventListener, eventListenerMap };

dist/index.js

@@ -12,3 +12,4 @@ // src/eventListener.ts
   if (!isClient)
-    return;
+    return () => {
+    };
   const toCleanup = createCallbackStack();
@@ -27,7 +28,8 @@ createEffect(() => {
   onCleanup(toCleanup.execute);
+  return toCleanup.execute;
 }
 function createEventSignal(target, eventName, options) {
   const [lastEvent, setLastEvent] = createSignal();
-  createEventListener(target, eventName, setLastEvent, options);
-  return lastEvent;
+  const clear = createEventListener(target, eventName, setLastEvent, options);
+  return [lastEvent, clear];
 }
@@ -49,5 +51,7 @@ function eventListener(target, props) {
 function createEventListenerMap(targets, handlersMap, options) {
+  const { push, execute } = createCallbackStack2();
   entries(handlersMap).forEach(([eventName, handler]) => {
-    createEventListener(targets, eventName, (e) => handler == null ? void 0 : handler(e), options);
+    push(createEventListener(targets, eventName, (e) => handler == null ? void 0 : handler(e), options));
   });
+  return execute;
 }
@@ -65,8 +69,9 @@ function createEventStore(targets, ...rest) {
   const store = {};
+  const { push, execute } = createCallbackStack2();
   names.forEach((eventName) => {
     const [accessor, setter] = createSignal2();
     Object.defineProperty(store, eventName, { get: accessor, set: setter, enumerable: true });
-    createEventListener(targets, eventName, setter, options);
+    push(createEventListener(targets, eventName, setter, options));
   });
-  return store;
+  return [store, execute];
 }
@@ -73,0 +78,0 @@ function eventListenerMap(target, getProps) {

package.json

 {
   "name": "@solid-primitives/event-listener",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Primitive to manage creating event listeners.",
@@ -17,3 +17,7 @@ "author": "David Di Biase <[e-mail]>",
       "createEventListener",
-      "GlobalEventListener"
+      "createEventSignal",
+      "createEventListenerMap",
+      "createEventStore",
+      "WindowEventListener",
+      "DocumentEventListener"
     ],
@@ -20,0 +24,0 @@ "category": "Browser APIs"

README.md

@@ -7,3 +7,3 @@ # @solid-primitives/event-listener
 
-A helpful event listener primitive that binds window and any element supplied.
+A set of primitives that help with listening to DOM and Custom Events.
 
@@ -34,4 +34,4 @@ - [`createEventListener`](#createEventListener) - Very basic and straightforward primitive that handles multiple elements according to a single event binding.
 
-createEventListener(
-  document.getElementById("mybutton"),
+const clear = createEventListener(
+  document.getElementById("myButton"),
   "mousemove",
@@ -42,2 +42,5 @@ e => console.log("x:", e.pageX, "y:", e.pageY),
 
+// to clear all of the event listeners
+clear();
+
 // target element, event name and options can be reactive signals
@@ -77,3 +80,3 @@ const [ref, setRef] = createSignal<HTMLElement>();
   options?: MaybeAccessor<boolean | AddEventListenerOptions>
-): void;
+): ClearListeners;
 
@@ -103,3 +106,3 @@ // Directive
 // all arguments can be reactive signals
-const lastEvent = createEventSignal(el, "mousemove", { passive: true });
+const [lastEvent, clear] = createEventSignal(el, "mousemove", { passive: true });
 
@@ -109,4 +112,25 @@ createEffect(() => {
 });
+
+// to clear all the event listeners
+clear();
 ```
 
+### Types
+
+```ts
+function createEventSignal<
+  EventMap extends Record<string, Event>,
+  EventName extends keyof EventMap = keyof EventMap
+>(
+  target: MaybeAccessor<Many<EventTarget>>,
+  eventName: MaybeAccessor<EventName>,
+  options?: MaybeAccessor<boolean | AddEventListenerOptions>
+): EventListenerSignalReturns<EventMap[EventName]>;
+
+type EventListenerSignalReturns<Event> = [
+  lastEvent: Accessor<Event | undefined>,
+  clear: ClearListeners
+];
+```
+
 ## `createEventListenerMap`
@@ -121,3 +145,3 @@
 
-createEventListenerMap(element, {
+const clear = createEventListenerMap(element, {
   mousemove: mouseHandler,
@@ -128,2 +152,5 @@ mouseenter: e => {},
 
+// to clear all the event listeners
+clear();
+
 // both target and options args can be reactive:
@@ -182,3 +209,3 @@ const [target, setTarget] = createSignal(document.getElementById("abc"));
   options?: MaybeAccessor<boolean | AddEventListenerOptions>
-): void;
+): ClearListeners;
 ```
@@ -193,3 +220,3 @@
 ```ts
-const lastEvents = createEventStore(el, "mousemove", "touchend", "click");
+const [lastEvents, clear] = createEventStore(el, "mousemove", "touchend", "click");
 
@@ -200,9 +227,12 @@ createEffect(() => {
 
+// to clear all the event listeners
+clear()
+
 // both target and options args can be reactive:
 const [target, setTarget] = createSignal(document.getElementById("abc"));
 const [options, setOptions] = createSignal({ passive: true });
-const lastEvents = createEventStore(target, options, "mousemove", "touchmove");
+const [lastEvents] = createEventStore(target, options, "mousemove", "touchmove");
 
 // createEventStore can be used to listen to custom events
-const lastEvents = createEventStore<
+const [lastEvents] = createEventStore<
   {
@@ -216,3 +246,3 @@ myEvent: MyEvent;
 // DON'T DO THIS:
-const { mousemove } = createEventStore(target, "mousemove", ...);
+const [{ mousemove }] = createEventStore(target, "mousemove", ...);
 // the store cannot be destructured
@@ -230,3 +260,3 @@ ```
   ...eventNames: UsedEvents[]
-): Store<Partial<Pick<EventMap, UsedEvents>>>;
+): EventListnenerStoreReturns<Pick<EventMap, UsedEvents>>;
 
@@ -241,3 +271,5 @@ // with options:
   ...eventNames: UsedEvents[]
-): Store<Partial<Pick<EventMap, UsedEvents>>>;
+): EventListnenerStoreReturns<Pick<EventMap, UsedEvents>>;
+
+type EventListnenerStoreReturns<E> = [lastEvents: Store<Partial<E>>, clear: ClearListeners];
 ```
@@ -305,4 +337,4 @@
 **(minor breaking changes to type generics and returned functions)**
-Primitive rewritten to provide better types and more reliable usage. Added more primitives.
+Primitive rewritten to provide better types and more reliable usage. Added a lot more primitives.
 
 </details>

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

Improved metrics

Total package byte prevSize

30926

increased by7.55%

Lines of code

447

increased by6.18%

Number of lines in readme file

326

increased by10.88%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes