@solid-primitives/active-element - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.d.ts

@@ -1,2 +0,3 @@
-import { Fn, MaybeAccessor } from '@solid-primitives/utils';
+import { ClearListeners } from '@solid-primitives/event-listener';
+import { MaybeAccessor } from '@solid-primitives/utils';
 import { JSX, Accessor } from 'solid-js';
@@ -20,9 +21,3 @@
  */
-declare function createActiveElement(): [
-    getter: Accessor<null | Element>,
-    actions: {
-        stop: Fn;
-        start: Fn;
-    }
-];
+declare function createActiveElement(): [getter: Accessor<null | Element>, clear: ClearListeners];
 /**
@@ -35,6 +30,3 @@ * Pass in an element, and see if it's focused.
  */
-declare function createIsElementActive(target: MaybeAccessor<Element>): [getter: Accessor<boolean>, actions: {
-    stop: Fn;
-    start: Fn;
-}];
+declare function createIsElementActive(target: MaybeAccessor<Element>): [getter: Accessor<boolean>, clear: ClearListeners];
 /**
@@ -41,0 +33,0 @@ * Use as a directive. Notifies you when the element becomes active or inactive.

dist/index.js

 // src/index.ts
-import { access } from "@solid-primitives/utils";
-import { createComputed, createEffect, createSignal, onCleanup } from "solid-js";
+import { createEventListenerMap } from "@solid-primitives/event-listener";
+import { access, createCallbackStack } from "@solid-primitives/utils";
+import { createComputed, createEffect, createSignal } from "solid-js";
 function createActiveElement() {
   const [active, setActive] = createSignal(null);
   const handleChange = () => setActive(window.document.activeElement);
-  let stop = () => {
-  };
+  const toCleanup = createCallbackStack();
   const start = () => {
-    stop();
+    toCleanup.execute();
     handleChange();
-    window.addEventListener("blur", handleChange, true);
-    window.addEventListener("focus", handleChange, true);
-    stop = () => {
-      window.removeEventListener("blur", handleChange, true);
-      window.removeEventListener("focus", handleChange, true);
-      stop = () => {
-      };
-    };
+    toCleanup.push(createEventListenerMap(window, { blur: handleChange, focus: handleChange }, true));
   };
   start();
-  onCleanup(() => stop());
-  return [
-    active,
-    {
-      stop,
-      start
-    }
-  ];
+  return [active, toCleanup.execute];
 }
@@ -35,20 +21,10 @@ function createIsElementActive(target) {
   const handleBlur = () => setIsActive(false);
-  let stop = () => {
-  };
+  const toCleanup = createCallbackStack();
   const start = () => {
-    stop();
+    toCleanup.execute();
     const el2 = access(target);
-    if (!el2) {
-      setIsActive(false);
-      return;
-    }
+    if (!el2)
+      return setIsActive(false);
     setIsActive(window.document.activeElement === el2);
-    el2.addEventListener("blur", handleBlur, true);
-    el2.addEventListener("focus", handleFocus, true);
-    stop = () => {
-      el2.removeEventListener("blur", handleBlur, true);
-      el2.removeEventListener("focus", handleFocus, true);
-      stop = () => {
-      };
-    };
+    toCleanup.push(createEventListenerMap(el2, { blur: handleBlur, focus: handleFocus }, true));
   };
@@ -58,4 +34,3 @@ const el = access(target);
   createEffect(start);
-  onCleanup(() => stop());
-  return [isActive, { stop, start }];
+  return [isActive, toCleanup.execute];
 }
@@ -62,0 +37,0 @@ function isElementActive(target, callback) {

package.json

 {
   "name": "@solid-primitives/active-element",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A reactive document.activeElement. Check which element is currently focused.",
@@ -65,4 +65,5 @@ "author": "Damian Tarnawski @thetarnav <[e-mail]>",
   "dependencies": {
-    "@solid-primitives/utils": "^0.0.250"
+    "@solid-primitives/event-listener": "^1.3.8",
+    "@solid-primitives/utils": "^0.0.260"
   }
 }

README.md

@@ -6,2 +6,3 @@ # @solid-primitives/active-element
 [![size](https://img.shields.io/npm/v/@solid-primitives/active-element?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/active-element)
+[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fdavedbase%2Fsolid-primitives%2Fstage-badges%2Fassets%2Fbadges%2Fstage-2.json)](https://github.com/davedbase/solid-primitives#contribution-process)
 
@@ -11,2 +12,10 @@ - [`createActiveElement`](#createActiveElement) - A reactive `document.activeElement`. Check which element is currently focused.
 
+## Installation
+
+```bash
+npm install @solid-primitives/active-element
+# or
+yarn add @solid-primitives/active-element
+```
+
 ## `createActiveElement`
@@ -21,4 +30,10 @@
 
-const [activeEl, { stop, start }] = createActiveElement();
-// "stop" and "start" are for adding and removing event listeners
+const [activeEl, clear] = createActiveElement();
+
+createEffect(() => {
+  console.log(activeEl());
+});
+
+// clear all event listeners
+clear();
 ```
@@ -29,6 +44,3 @@
 ```ts
-function createActiveElement(): [
-  getter: Accessor<null | Element>,
-  actions: { stop: Fn; start: Fn }
-];
+function createActiveElement(): [getter: Accessor<null | Element>, clear: ClearListeners];
 ```
@@ -45,3 +57,3 @@
 
-const [isFocused, { stop, start }] = createIsElementActive(() => el);
+const [isFocused, clear] = createIsElementActive(() => el);
 // "stop" and "start" are for adding and removing event listeners
@@ -54,2 +66,5 @@
 // the "isFocused" will start checking the new element
+
+// clear all event listeners
+clear();
 ```
@@ -74,3 +89,3 @@
   target: MaybeAccessor<Element>
-): [getter: Accessor<boolean>, actions: { stop: Fn; start: Fn }];
+): [getter: Accessor<boolean>, clear: ClearListeners];
 
@@ -93,2 +108,6 @@ type IsElementActiveProps = (isActive: boolean) => void;
 
+1.0.1
+
+Updated event listener and util dependencies.
+
 </details>

No alert changes

Improved metrics

Number of lines in readme file

106

increased by21.84%

Worsened metrics

Total package byte prevSize

13270

decreased by-0.73%

Dependency count

3

increased by50%

Lines of code

219

decreased by-20.94%

Dependency changes

• + Added@solid-primitives/event-listener@^1.3.8

• + Added@solid-primitives/event-listener@1.6.1(transitive)

• + Added@solid-primitives/rootless@0.1.0(transitive)

• + Added@solid-primitives/utils@0.0.2601.5.2(transitive)

• - Removed@solid-primitives/utils@0.0.250(transitive)

• Updated@solid-primitives/utils@^0.0.260