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

Comparing version 2.4.5 to 3.0.0-next.0

dist/components.js

@@ -1,2 +0,2 @@
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 import { keys } from "@solid-primitives/utils";
@@ -3,0 +3,0 @@ import {} from "solid-js";

dist/eventListener.js

 import { access, asArray, tryOnCleanup, } from "@solid-primitives/utils";
 import { createEffect, createRenderEffect, createSignal } from "solid-js";
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 export function makeEventListener(target, type, handler, options) {
@@ -11,15 +11,22 @@ target.addEventListener(type, handler, options);
         return;
-    const attachListeners = () => {
-        asArray(access(targets)).forEach(el => {
-            if (el)
-                asArray(access(type)).forEach(type => makeEventListener(el, type, handler, options));
-        });
+    const compute = () => ({
+        els: asArray(access(targets)).filter(x => !!x),
+        types: asArray(access(type)),
+    });
+    const apply = ({ els, types }) => {
+        const cleanups = [];
+        for (const el of els)
+            for (const t of types) {
+                el.addEventListener(t, handler, options);
+                cleanups.push(el.removeEventListener.bind(el, t, handler, options));
+            }
+        return () => cleanups.forEach(c => c());
     };
-    // if the target is an accessor the listeners will be added on the first effect (onMount)
-    // so that when passed a jsx ref it will be availabe
+    // if the target is an accessor the listeners will be added on the first effect (after mount)
+    // so that when passed a jsx ref it will be available
     if (typeof targets === "function")
-        createEffect(attachListeners);
+        createEffect(compute, apply);
     // if the target prop is NOT an accessor, the event listeners can be added right away
     else
-        createRenderEffect(attachListeners);
+        createRenderEffect(compute, apply);
 }
@@ -43,5 +50,5 @@ export function createEventSignal(target, type, options) {
 export const eventListener = (target, props) => {
-    createEffect(() => {
-        const [type, handler, options] = props();
-        makeEventListener(target, type, handler, options);
+    createEffect(props, ([type, handler, options]) => {
+        target.addEventListener(type, handler, options);
+        return () => target.removeEventListener(type, handler, options);
     });
@@ -48,0 +55,0 @@ };

dist/eventListenerMap.js

 import { entries } from "@solid-primitives/utils";
 import { createEventListener } from "./eventListener.js";
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 export function createEventListenerMap(targets, handlersMap, options) {
@@ -5,0 +5,0 @@ if (isServer) {

dist/eventListenerStack.js

 import { createCallbackStack } from "@solid-primitives/utils";
 import { onCleanup } from "solid-js";
 import { makeEventListener } from "./eventListener.js";
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 export function makeEventListenerStack(target, options) {
@@ -6,0 +6,0 @@ if (isServer) {

dist/types.d.ts

@@ -1,5 +0,5 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 export type EventListenerOptions = boolean | AddEventListenerOptions;
-export type TargetWithEventMap = Window | Document | XMLDocument | HTMLBodyElement | HTMLFrameSetElement | HTMLMediaElement | HTMLVideoElement | HTMLElement | SVGSVGElement | SVGElement | MathMLElement | Element | AbortSignal | AbstractWorker | Animation | BroadcastChannel | CSSAnimation | CSSTransition | FileReader | IDBDatabase | IDBOpenDBRequest | IDBRequest | IDBTransaction | MediaDevices | MediaKeySession | MediaQueryList | MediaRecorder | MediaSource | MediaStream | MediaStreamTrack | MessagePort | Notification | PaymentRequest | Performance | PermissionStatus | PictureInPictureWindow | RemotePlayback | ScreenOrientation | ServiceWorker | ServiceWorkerContainer | ServiceWorkerRegistration | ShadowRoot | SharedWorker | SourceBuffer | SourceBufferList | SpeechSynthesis | SpeechSynthesisUtterance | VisualViewport | WebSocket | Worker | XMLHttpRequest | XMLHttpRequestEventTarget | XMLHttpRequestUpload | EventSource;
-export type EventMapOf<Target> = Target extends Window ? WindowEventMap : Target extends Document | XMLDocument ? DocumentEventMap : Target extends HTMLBodyElement ? HTMLBodyElementEventMap : Target extends HTMLFrameSetElement ? HTMLFrameSetElementEventMap : Target extends HTMLMediaElement ? HTMLMediaElementEventMap : Target extends HTMLVideoElement ? HTMLVideoElementEventMap : Target extends HTMLElement ? HTMLElementEventMap : Target extends SVGSVGElement ? SVGSVGElementEventMap : Target extends SVGElement ? SVGElementEventMap : Target extends MathMLElement ? MathMLElementEventMap : Target extends Element ? ElementEventMap : Target extends AbortSignal ? AbortSignalEventMap : Target extends AbstractWorker ? AbstractWorkerEventMap : Target extends Animation ? AnimationEventMap : Target extends BroadcastChannel ? BroadcastChannelEventMap : Target extends CSSAnimation ? AnimationEventMap : Target extends CSSTransition ? AnimationEventMap : Target extends FileReader ? FileReaderEventMap : Target extends IDBDatabase ? IDBDatabaseEventMap : Target extends IDBOpenDBRequest ? IDBOpenDBRequestEventMap : Target extends IDBRequest ? IDBRequestEventMap : Target extends IDBTransaction ? IDBTransactionEventMap : Target extends MediaDevices ? MediaDevicesEventMap : Target extends MediaKeySession ? MediaKeySessionEventMap : Target extends MediaQueryList ? MediaQueryListEventMap : Target extends MediaRecorder ? MediaRecorderEventMap : Target extends MediaSource ? MediaSourceEventMap : Target extends MediaStream ? MediaStreamEventMap : Target extends MediaStreamTrack ? MediaStreamTrackEventMap : Target extends MessagePort ? MessagePortEventMap : Target extends Notification ? NotificationEventMap : Target extends PaymentRequest ? PaymentRequestEventMap : Target extends Performance ? PerformanceEventMap : Target extends PermissionStatus ? PermissionStatusEventMap : Target extends PictureInPictureWindow ? PictureInPictureWindowEventMap : Target extends RemotePlayback ? RemotePlaybackEventMap : Target extends ScreenOrientation ? ScreenOrientationEventMap : Target extends ServiceWorker ? ServiceWorkerEventMap : Target extends ServiceWorkerContainer ? ServiceWorkerContainerEventMap : Target extends ServiceWorkerRegistration ? ServiceWorkerRegistrationEventMap : Target extends ShadowRoot ? ShadowRootEventMap : Target extends SharedWorker ? AbstractWorkerEventMap : Target extends SourceBuffer ? SourceBufferEventMap : Target extends SourceBufferList ? SourceBufferListEventMap : Target extends SpeechSynthesis ? SpeechSynthesisEventMap : Target extends SpeechSynthesisUtterance ? SpeechSynthesisUtteranceEventMap : Target extends VisualViewport ? VisualViewportEventMap : Target extends WebSocket ? WebSocketEventMap : Target extends Worker ? WorkerEventMap : Target extends XMLHttpRequest ? XMLHttpRequestEventMap : Target extends XMLHttpRequestEventTarget ? XMLHttpRequestEventTargetEventMap : Target extends XMLHttpRequestUpload ? XMLHttpRequestEventTargetEventMap : Target extends EventSource ? EventSourceEventMap : never;
+export type TargetWithEventMap = Window | Document | XMLDocument | HTMLBodyElement | HTMLMediaElement | HTMLVideoElement | HTMLElement | SVGSVGElement | SVGElement | MathMLElement | Element | AbortSignal | AbstractWorker | Animation | BroadcastChannel | CSSAnimation | CSSTransition | FileReader | IDBDatabase | IDBOpenDBRequest | IDBRequest | IDBTransaction | MediaDevices | MediaKeySession | MediaQueryList | MediaRecorder | MediaSource | MediaStream | MediaStreamTrack | MessagePort | Notification | PaymentRequest | Performance | PermissionStatus | PictureInPictureWindow | RemotePlayback | ScreenOrientation | ServiceWorker | ServiceWorkerContainer | ServiceWorkerRegistration | ShadowRoot | SharedWorker | SourceBuffer | SourceBufferList | SpeechSynthesis | SpeechSynthesisUtterance | VisualViewport | WebSocket | Worker | XMLHttpRequest | XMLHttpRequestEventTarget | XMLHttpRequestUpload | EventSource;
+export type EventMapOf<Target> = Target extends Window ? WindowEventMap : Target extends Document | XMLDocument ? DocumentEventMap : Target extends HTMLBodyElement ? HTMLBodyElementEventMap : Target extends HTMLMediaElement ? HTMLMediaElementEventMap : Target extends HTMLVideoElement ? HTMLVideoElementEventMap : Target extends HTMLElement ? HTMLElementEventMap : Target extends SVGSVGElement ? SVGSVGElementEventMap : Target extends SVGElement ? SVGElementEventMap : Target extends MathMLElement ? MathMLElementEventMap : Target extends Element ? ElementEventMap : Target extends AbortSignal ? AbortSignalEventMap : Target extends AbstractWorker ? AbstractWorkerEventMap : Target extends Animation ? AnimationEventMap : Target extends BroadcastChannel ? BroadcastChannelEventMap : Target extends CSSAnimation ? AnimationEventMap : Target extends CSSTransition ? AnimationEventMap : Target extends FileReader ? FileReaderEventMap : Target extends IDBDatabase ? IDBDatabaseEventMap : Target extends IDBOpenDBRequest ? IDBOpenDBRequestEventMap : Target extends IDBRequest ? IDBRequestEventMap : Target extends IDBTransaction ? IDBTransactionEventMap : Target extends MediaDevices ? MediaDevicesEventMap : Target extends MediaKeySession ? MediaKeySessionEventMap : Target extends MediaQueryList ? MediaQueryListEventMap : Target extends MediaRecorder ? MediaRecorderEventMap : Target extends MediaSource ? MediaSourceEventMap : Target extends MediaStream ? MediaStreamEventMap : Target extends MediaStreamTrack ? MediaStreamTrackEventMap : Target extends MessagePort ? MessagePortEventMap : Target extends Notification ? NotificationEventMap : Target extends PaymentRequest ? PaymentRequestEventMap : Target extends Performance ? PerformanceEventMap : Target extends PermissionStatus ? PermissionStatusEventMap : Target extends PictureInPictureWindow ? PictureInPictureWindowEventMap : Target extends RemotePlayback ? RemotePlaybackEventMap : Target extends ScreenOrientation ? ScreenOrientationEventMap : Target extends ServiceWorker ? ServiceWorkerEventMap : Target extends ServiceWorkerContainer ? ServiceWorkerContainerEventMap : Target extends ServiceWorkerRegistration ? ServiceWorkerRegistrationEventMap : Target extends ShadowRoot ? ShadowRootEventMap : Target extends SharedWorker ? AbstractWorkerEventMap : Target extends SourceBuffer ? SourceBufferEventMap : Target extends SourceBufferList ? SourceBufferListEventMap : Target extends SpeechSynthesis ? SpeechSynthesisEventMap : Target extends SpeechSynthesisUtterance ? SpeechSynthesisUtteranceEventMap : Target extends VisualViewport ? VisualViewportEventMap : Target extends WebSocket ? WebSocketEventMap : Target extends Worker ? WorkerEventMap : Target extends XMLHttpRequest ? XMLHttpRequestEventMap : Target extends XMLHttpRequestEventTarget ? XMLHttpRequestEventTargetEventMap : Target extends XMLHttpRequestUpload ? XMLHttpRequestEventTargetEventMap : Target extends EventSource ? EventSourceEventMap : never;
 export type EventListenerDirectiveProps = [
@@ -6,0 +6,0 @@ type: string,

package.json

 {
   "name": "@solid-primitives/event-listener",
-  "version": "2.4.5",
+  "version": "3.0.0-next.0",
   "description": "SolidJS Primitives to manage creating event listeners.",
@@ -25,3 +25,4 @@ "author": "David Di Biase <[e-mail]>",
     ],
-    "category": "Browser APIs"
+    "category": "Browser APIs",
+    "gzip": 890
   },
@@ -51,10 +52,12 @@ "private": false,
   "dependencies": {
-    "@solid-primitives/utils": "^6.4.0"
+    "@solid-primitives/utils": "^7.0.0-next.0"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.12"
+    "@solidjs/web": "^2.0.0-beta.15",
+    "solid-js": "^2.0.0-beta.15"
   },
   "typesVersions": {},
   "devDependencies": {
-    "solid-js": "^1.9.7"
+    "@solidjs/web": "2.0.0-beta.15",
+    "solid-js": "2.0.0-beta.15"
   },
@@ -61,0 +64,0 @@ "scripts": {

README.md

@@ -7,5 +7,6 @@ <p>
 
-[![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/badge/size-890_B-blue?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)
 [![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
+[![tested with vitest](https://img.shields.io/badge/tested_with-vitest-6E9F18?style=for-the-badge&logo=vitest)](https://vitest.dev)
 
@@ -42,2 +43,4 @@ A set of primitives that help with listening to DOM and Custom Events.
 yarn add @solid-primitives/event-listener
+# or
+pnpm add @solid-primitives/event-listener
 ```
@@ -332,8 +335,4 @@
 
-## Demo
-
-You may view a working example here: https://codesandbox.io/s/solid-primitives-event-listener-elti5
-
 ## Changelog
 
 See [CHANGELOG.md](./CHANGELOG.md)

New alerts

No v1

Quality

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

Improved metrics

Total package byte prevSize

35318

1.09%

Lines of code

453

1.57%

Worsened metrics

Dependency count

3

50%

Dev dependency count

2

100%

Number of low quality alerts

1

Infinity%

Number of lines in readme file

336

-0.3%

Dependency changes

• + Added

  @solid-primitives/utils@7.0.0-next.4
  (transitive)

• + Added

  @solidjs/signals@2.0.0-rc.1
  (transitive)

• + Added

  @solidjs/web@2.0.0-rc.1
  (transitive)

• + Added

  solid-js@2.0.0-rc.1
  (transitive)

• - Removed

  @solid-primitives/utils@6.4.1
  (transitive)

• - Removed

  solid-js@1.9.15
  (transitive)

• Updated

  @solid-primitives/utils@^7.0.0-next.0