@solid-primitives/keyboard 1.1.0 → 1.2.0

package/README.md

@@ -11,6 +11,7 @@
 
 A library of reactive promitives helping handling user's keyboard input.
 
+- [`useKeyDownEvent`](#useKeyDownEvent) — Provides a signal with the last keydown event.
 - [`useKeyDownList`](#useKeyDownList) — Provides a signal with the list of currently held keys
 - [`useCurrentlyHeldKey`](#useCurrentlyHeldKey) — Provides a signal with the currently held single key.
 - [`useKeyDownSequence`](#useKeyDownSequence) — Provides a signal with a sequence of currently held keys, as they were pressed down and up.
@@ -22,9 +23,37 @@ A library of reactive promitives helping handling user's keyboard input.
 ```bash
 npm install @solid-primitives/keyboard
 # or
+pnpm add @solid-primitives/keyboard
+# or
 yarn add @solid-primitives/keyboard
 ```
 
+## `useKeyDownEvent`
+
+Provides a signal with the last keydown event.
+
+This is a [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) primitive that will reuse event listeners and signals across dependents.
+
+### How to use it
+
+`useKeyDownEvent` takes no arguments, and returns a signal with the last keydown event.
+
+```tsx
+import { useKeyDownEvent } from "@solid-primitives/keyboard";
+
+const event = useKeyDownEvent();
+
+createEffect(() => {
+  const e = event();
+  console.log(e); // => KeyboardEvent | null
+
+  if (e) {
+    console.log(e.key); // => "Q" | "ALT" | ... or null
+    e.preventDefault(); // prevent default behavior or last keydown event
+  }
+});
+```
+
 ## `useKeyDownList`
 
 Provides a signal with the list of currently held keys, ordered from least recent to most recent.
@@ -33,16 +62,15 @@ This is a [singleton root](https://github.com/solidjs-community/solid-primitives
 
 ### How to use it
 
-`useKeyDownList` takes no arguments, and returns a signal with the list of currently held keys, and last keydown event.
+`useKeyDownList` takes no arguments, and returns a signal with the list of currently held keys
 
 ```tsx
 import { useKeyDownList } from "@solid-primitives/keyboard";
 
-const [keys, { event }] = useKeyDownList();
+const keys = useKeyDownList();
 
 createEffect(() => {
   console.log(keys()); // => string[] — list of currently held keys
-  console.log(event()); // => KeyboardEvent | null — last keydown event
 });
 
 <For each={keys()}>

package/dist/index.cjs

@@ -15,23 +15,49 @@ function equalsKeyHoldSequence(sequence, model) {
   }
   return true;
 }
+exports.useKeyDownEvent = /* @__PURE__ */ rootless.createSingletonRoot(
+  () => {
+    if (web.isServer) {
+      return () => null;
+    }
+    const [event, setEvent] = solidJs.createSignal(null);
+    eventListener.makeEventListener(window, "keydown", (e) => {
+      setEvent(e);
+      setTimeout(() => setEvent(null));
+    });
+    return event;
+  }
+);
 exports.useKeyDownList = /* @__PURE__ */ rootless.createSingletonRoot(() => {
   if (web.isServer) {
-    return [() => [], { event: () => null }];
+    const keys = () => [];
+    keys[0] = keys;
+    keys[1] = { event: () => null };
+    keys[Symbol.iterator] = function* () {
+      yield keys[0];
+      yield keys[1];
+    };
+    return keys;
   }
-  const [pressedKeys, setPressedKeys] = solidJs.createSignal([]);
-  const [event, setEvent] = solidJs.createSignal(null);
-  const reset = () => setPressedKeys([]);
+  const [pressedKeys, setPressedKeys] = solidJs.createSignal([]), reset = () => setPressedKeys([]), event = exports.useKeyDownEvent();
   eventListener.makeEventListener(window, "keydown", (e) => {
     if (e.repeat || typeof e.key !== "string")
       return;
-    const key = e.key.toUpperCase();
-    if (pressedKeys().includes(key))
+    const key = e.key.toUpperCase(), currentKeys = pressedKeys();
+    if (currentKeys.includes(key))
       return;
-    solidJs.batch(() => {
-      setEvent(e);
-      setPressedKeys((prev) => [...prev, key]);
-    });
+    const keys = [...currentKeys, key];
+    if (currentKeys.length === 0 && key !== "ALT" && key !== "CONTROL" && key !== "META" && key !== "SHIFT") {
+      if (e.shiftKey)
+        keys.unshift("SHIFT");
+      if (e.altKey)
+        keys.unshift("ALT");
+      if (e.ctrlKey)
+        keys.unshift("CONTROL");
+      if (e.metaKey)
+        keys.unshift("META");
+    }
+    setPressedKeys(keys);
   });
   eventListener.makeEventListener(window, "keyup", (e) => {
     if (typeof e.key !== "string")
@@ -43,14 +69,20 @@ exports.useKeyDownList = /* @__PURE__ */ rootless.createSingletonRoot(() => {
   eventListener.makeEventListener(window, "contextmenu", (e) => {
     e.defaultPrevented || reset();
   });
-  return [pressedKeys, { event }];
+  pressedKeys[0] = pressedKeys;
+  pressedKeys[1] = { event };
+  pressedKeys[Symbol.iterator] = function* () {
+    yield pressedKeys[0];
+    yield pressedKeys[1];
+  };
+  return pressedKeys;
 });
 exports.useCurrentlyHeldKey = /* @__PURE__ */ rootless.createSingletonRoot(
   () => {
     if (web.isServer) {
       return () => null;
     }
-    const [keys] = exports.useKeyDownList();
+    const keys = exports.useKeyDownList();
     let prevKeys = solidJs.untrack(keys);
     return solidJs.createMemo(() => {
       const _keys = keys();
@@ -66,7 +98,7 @@ exports.useKeyDownSequence = /* @__PURE__ */ rootless.createSingletonRoot(() =>
   if (web.isServer) {
     return () => [];
   }
-  const [keys] = exports.useKeyDownList();
+  const keys = exports.useKeyDownList();
   return solidJs.createMemo((prev) => {
     if (keys().length === 0)
       return [];
@@ -78,25 +110,15 @@ function createKeyHold(key, options = {}) {
     return () => false;
   }
   key = key.toUpperCase();
-  const { preventDefault = true } = options;
-  const [, { event }] = exports.useKeyDownList();
-  const heldKey = exports.useCurrentlyHeldKey();
-  return solidJs.createMemo(() => {
-    if (heldKey() === key) {
-      preventDefault && event().preventDefault();
-      return true;
-    }
-    return false;
-  });
+  const { preventDefault = true } = options, event = exports.useKeyDownEvent(), heldKey = exports.useCurrentlyHeldKey();
+  return solidJs.createMemo(() => heldKey() === key && (preventDefault && event()?.preventDefault(), true));
 }
 function createShortcut(keys, callback, options = {}) {
   if (web.isServer || !keys.length) {
     return;
   }
   keys = keys.map((key) => key.toUpperCase());
-  const { preventDefault = true, requireReset = false } = options;
-  const [, { event }] = exports.useKeyDownList();
-  const sequence = exports.useKeyDownSequence();
+  const { preventDefault = true } = options, event = exports.useKeyDownEvent(), sequence = exports.useKeyDownSequence();
   let reset = false;
   const handleSequenceWithReset = (sequence2) => {
     if (!sequence2.length)
@@ -106,14 +128,14 @@ function createShortcut(keys, callback, options = {}) {
     const e = event();
     if (sequence2.length < keys.length) {
       if (equalsKeyHoldSequence(sequence2, keys.slice(0, sequence2.length))) {
-        preventDefault && e.preventDefault();
+        preventDefault && e && e.preventDefault();
       } else {
         reset = true;
       }
     } else {
       reset = true;
       if (equalsKeyHoldSequence(sequence2, keys)) {
-        preventDefault && e.preventDefault();
+        preventDefault && e && e.preventDefault();
         callback(e);
       }
     }
@@ -125,19 +147,21 @@ function createShortcut(keys, callback, options = {}) {
     const e = event();
     if (preventDefault && last.length < keys.length) {
       if (utils.arrayEquals(last, keys.slice(0, keys.length - 1))) {
-        e.preventDefault();
+        e && e.preventDefault();
       }
       return;
     }
     if (utils.arrayEquals(last, keys)) {
       const prev = sequence2.at(-2);
       if (!prev || utils.arrayEquals(prev, keys.slice(0, keys.length - 1))) {
-        preventDefault && e.preventDefault();
+        preventDefault && e && e.preventDefault();
         callback(e);
       }
     }
   };
-  solidJs.createEffect(solidJs.on(sequence, requireReset ? handleSequenceWithReset : handleSequenceWithoutReset));
+  solidJs.createEffect(
+    solidJs.on(sequence, options.requireReset ? handleSequenceWithReset : handleSequenceWithoutReset)
+  );
 }
 
 exports.createKeyHold = createKeyHold;

package/dist/index.d.ts

@@ -2,6 +2,35 @@ import { Accessor } from 'solid-js';
 
 type ModifierKey = "Alt" | "Control" | "Meta" | "Shift";
 type KbdKey = ModifierKey | (string & {});
+/**
+ * Provides a signal with the last keydown event.
+ *
+ * The signal is `null` initially, and is reset to that after a timeout.
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#useKeyDownEvent
+ *
+ * @returns
+ * Returns a signal of the last keydown event
+ * ```ts
+ * Accessor<KeyboardEvent | null>
+ * ```
+ *
+ * @example
+ * ```ts
+ * const event = useKeyDownEvent();
+ *
+ * createEffect(() => {
+ *   const e = event();
+ *   console.log(e) // => KeyboardEvent | null
+ *
+ *   if (e) {
+ *     console.log(e.key) // => "Q" | "ALT" | ... or null
+ *     e.preventDefault(); // prevent default behavior or last keydown event
+ *   }
+ * })
+ * ```
+ */
+declare const useKeyDownEvent: () => Accessor<KeyboardEvent | null>;
 /**
  * Provides a signal with the list of currently held keys, ordered from least recent to most recent.
  *
@@ -10,22 +39,20 @@ type KbdKey = ModifierKey | (string & {});
  * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#useKeyDownList
  *
  * @returns
- * Returns a signal of a list of keys, and a signal of last keydown event.
+ * Returns a signal of a list of keys
  * ```ts
- * [keys: Accessor<string[]>, other: { event: Accessor<KeyboardEvent | null> }]
+ * Accessor<string[]>
  * ```
  *
  * @example
  * ```ts
- * const [keys] = useKeyDownList();
+ * const keys = useKeyDownList();
  * createEffect(() => {
  *    console.log(keys()) // => ["ALT", "CONTROL", "Q", "A"]
  * })
  * ```
  */
-declare const useKeyDownList: () => [keys: Accessor<string[]>, other: {
-    event: Accessor<KeyboardEvent | null>;
-}];
+declare const useKeyDownList: () => Accessor<string[]>;
 /**
  * Provides a signal with the currently held single key. Pressing any other key at the same time will reset the signal to `null`.
  *
@@ -112,9 +139,9 @@ declare function createKeyHold(key: KbdKey, options?: {
  * });
  * ```
  */
-declare function createShortcut(keys: KbdKey[], callback: (event: KeyboardEvent) => void, options?: {
+declare function createShortcut(keys: KbdKey[], callback: (event: KeyboardEvent | null) => void, options?: {
     preventDefault?: boolean;
     requireReset?: boolean;
 }): void;
 
-export { KbdKey, ModifierKey, createKeyHold, createShortcut, useCurrentlyHeldKey, useKeyDownList, useKeyDownSequence };
+export { KbdKey, ModifierKey, createKeyHold, createShortcut, useCurrentlyHeldKey, useKeyDownEvent, useKeyDownList, useKeyDownSequence };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { makeEventListener } from '@solid-primitives/event-listener';
 import { createSingletonRoot } from '@solid-primitives/rootless';
 import { arrayEquals } from '@solid-primitives/utils';
-import { createSignal, batch, untrack, createMemo, createEffect, on } from 'solid-js';
+import { createSignal, untrack, createMemo, createEffect, on } from 'solid-js';
 import { isServer } from 'solid-js/web';
 
 // src/index.ts
@@ -13,23 +13,49 @@ function equalsKeyHoldSequence(sequence, model) {
   }
   return true;
 }
+var useKeyDownEvent = /* @__PURE__ */ createSingletonRoot(
+  () => {
+    if (isServer) {
+      return () => null;
+    }
+    const [event, setEvent] = createSignal(null);
+    makeEventListener(window, "keydown", (e) => {
+      setEvent(e);
+      setTimeout(() => setEvent(null));
+    });
+    return event;
+  }
+);
 var useKeyDownList = /* @__PURE__ */ createSingletonRoot(() => {
   if (isServer) {
-    return [() => [], { event: () => null }];
+    const keys = () => [];
+    keys[0] = keys;
+    keys[1] = { event: () => null };
+    keys[Symbol.iterator] = function* () {
+      yield keys[0];
+      yield keys[1];
+    };
+    return keys;
   }
-  const [pressedKeys, setPressedKeys] = createSignal([]);
-  const [event, setEvent] = createSignal(null);
-  const reset = () => setPressedKeys([]);
+  const [pressedKeys, setPressedKeys] = createSignal([]), reset = () => setPressedKeys([]), event = useKeyDownEvent();
   makeEventListener(window, "keydown", (e) => {
     if (e.repeat || typeof e.key !== "string")
       return;
-    const key = e.key.toUpperCase();
-    if (pressedKeys().includes(key))
+    const key = e.key.toUpperCase(), currentKeys = pressedKeys();
+    if (currentKeys.includes(key))
       return;
-    batch(() => {
-      setEvent(e);
-      setPressedKeys((prev) => [...prev, key]);
-    });
+    const keys = [...currentKeys, key];
+    if (currentKeys.length === 0 && key !== "ALT" && key !== "CONTROL" && key !== "META" && key !== "SHIFT") {
+      if (e.shiftKey)
+        keys.unshift("SHIFT");
+      if (e.altKey)
+        keys.unshift("ALT");
+      if (e.ctrlKey)
+        keys.unshift("CONTROL");
+      if (e.metaKey)
+        keys.unshift("META");
+    }
+    setPressedKeys(keys);
   });
   makeEventListener(window, "keyup", (e) => {
     if (typeof e.key !== "string")
@@ -41,14 +67,20 @@ var useKeyDownList = /* @__PURE__ */ createSingletonRoot(() => {
   makeEventListener(window, "contextmenu", (e) => {
     e.defaultPrevented || reset();
   });
-  return [pressedKeys, { event }];
+  pressedKeys[0] = pressedKeys;
+  pressedKeys[1] = { event };
+  pressedKeys[Symbol.iterator] = function* () {
+    yield pressedKeys[0];
+    yield pressedKeys[1];
+  };
+  return pressedKeys;
 });
 var useCurrentlyHeldKey = /* @__PURE__ */ createSingletonRoot(
   () => {
     if (isServer) {
       return () => null;
     }
-    const [keys] = useKeyDownList();
+    const keys = useKeyDownList();
     let prevKeys = untrack(keys);
     return createMemo(() => {
       const _keys = keys();
@@ -64,7 +96,7 @@ var useKeyDownSequence = /* @__PURE__ */ createSingletonRoot(() => {
   if (isServer) {
     return () => [];
   }
-  const [keys] = useKeyDownList();
+  const keys = useKeyDownList();
   return createMemo((prev) => {
     if (keys().length === 0)
       return [];
@@ -76,25 +108,15 @@ function createKeyHold(key, options = {}) {
     return () => false;
   }
   key = key.toUpperCase();
-  const { preventDefault = true } = options;
-  const [, { event }] = useKeyDownList();
-  const heldKey = useCurrentlyHeldKey();
-  return createMemo(() => {
-    if (heldKey() === key) {
-      preventDefault && event().preventDefault();
-      return true;
-    }
-    return false;
-  });
+  const { preventDefault = true } = options, event = useKeyDownEvent(), heldKey = useCurrentlyHeldKey();
+  return createMemo(() => heldKey() === key && (preventDefault && event()?.preventDefault(), true));
 }
 function createShortcut(keys, callback, options = {}) {
   if (isServer || !keys.length) {
     return;
   }
   keys = keys.map((key) => key.toUpperCase());
-  const { preventDefault = true, requireReset = false } = options;
-  const [, { event }] = useKeyDownList();
-  const sequence = useKeyDownSequence();
+  const { preventDefault = true } = options, event = useKeyDownEvent(), sequence = useKeyDownSequence();
   let reset = false;
   const handleSequenceWithReset = (sequence2) => {
     if (!sequence2.length)
@@ -104,14 +126,14 @@ function createShortcut(keys, callback, options = {}) {
     const e = event();
     if (sequence2.length < keys.length) {
       if (equalsKeyHoldSequence(sequence2, keys.slice(0, sequence2.length))) {
-        preventDefault && e.preventDefault();
+        preventDefault && e && e.preventDefault();
       } else {
         reset = true;
       }
     } else {
       reset = true;
       if (equalsKeyHoldSequence(sequence2, keys)) {
-        preventDefault && e.preventDefault();
+        preventDefault && e && e.preventDefault();
         callback(e);
       }
     }
@@ -123,19 +145,21 @@ function createShortcut(keys, callback, options = {}) {
     const e = event();
     if (preventDefault && last.length < keys.length) {
       if (arrayEquals(last, keys.slice(0, keys.length - 1))) {
-        e.preventDefault();
+        e && e.preventDefault();
       }
       return;
     }
     if (arrayEquals(last, keys)) {
       const prev = sequence2.at(-2);
       if (!prev || arrayEquals(prev, keys.slice(0, keys.length - 1))) {
-        preventDefault && e.preventDefault();
+        preventDefault && e && e.preventDefault();
         callback(e);
       }
     }
   };
-  createEffect(on(sequence, requireReset ? handleSequenceWithReset : handleSequenceWithoutReset));
+  createEffect(
+    on(sequence, options.requireReset ? handleSequenceWithReset : handleSequenceWithoutReset)
+  );
 }
 
-export { createKeyHold, createShortcut, useCurrentlyHeldKey, useKeyDownList, useKeyDownSequence };
+export { createKeyHold, createShortcut, useCurrentlyHeldKey, useKeyDownEvent, useKeyDownList, useKeyDownSequence };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solid-primitives/keyboard",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A library of reactive promitives helping handling user's keyboard input.",
   "author": "Damian Tarnwski <gthetarnav@gmail.com>",
   "contributors": [],
@@ -52,7 +52,7 @@
   "dependencies": {
     "@solid-primitives/event-listener": "^2.2.10",
     "@solid-primitives/rootless": "^1.3.2",
-    "@solid-primitives/utils": "^6.0.0"
+    "@solid-primitives/utils": "^6.1.0"
   },
   "peerDependencies": {
     "solid-js": "^1.6.12"