@solid-primitives/keyboard 0.0.100

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Solid Primitives Working Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=keyboard" alt="Solid Primitives keyboard">
+</p>
+
+# @solid-primitives/keyboard
+
+[![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/keyboard?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/keyboard)
+[![version](https://img.shields.io/npm/v/@solid-primitives/keyboard?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/keyboard)
+[![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-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
+
+A library of reactive promitives helping handling user's keyboard input.
+
+- [`makeKeyHoldListener`](#makeKeyHoldListener) - Attaches keyboard event-listeners, and triggers callback whenever user holds or stops holding specified key.
+
+## Installation
+
+```bash
+npm install @solid-primitives/keyboard
+# or
+yarn add @solid-primitives/keyboard
+```
+
+## `makeKeyHoldListener`
+
+Attaches keyboard event-listeners to `window`, and calls provided callback whenever user holds or stops holding specified key.
+
+Event listeners are automatically cleaned on root dispose.
+
+### How to use it
+
+`makeKeyHoldListener` takes three arguments:
+
+- `key` keyboard key or modifier to listen for
+- `onHoldChange` callback fired when the hold state changes
+- `options` additional configuration:
+  - `preventDefault` — call `e.preventDefault()` on the keyboard event, when the specified key is pressed. _(Defaults to `false`)_
+  - `allowOtherKeys` — Should the user be allowed to press other keys while holding the specified one _(Defaults to `false`)_
+
+```tsx
+import { makeKeyHoldListener } from "@solid-primitives/keyboard";
+
+const [pressing, setPressing] = createSignal(false);
+
+makeKeyHoldListener("altKey", setPressing, {
+  preventDefault: true
+});
+
+<p>Is pressing Alt? {pressing() ? "YES" : "NO"}</p>;
+```
+
+## Changelog
+
+<details>
+<summary><b>Expand Changelog</b></summary>
+
+0.0.100
+
+Initial release as a Stage-0 primitive.
+
+</details>

package/dist/index.cjs

@@ -0,0 +1,73 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  makeKeyHoldListener: () => makeKeyHoldListener
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/holdKeyListener.ts
+var import_event_listener = require("@solid-primitives/event-listener");
+var keyModifiers = ["altKey", "ctrlKey", "metaKey", "shiftKey"];
+function makeKeyHoldListener(key, onHoldChange, options = {}) {
+  const { preventDefault, allowOtherKeys } = options;
+  const modifier = keyModifiers.includes(key) ? key : void 0;
+  let state = false;
+  let actualPressed = false;
+  const updateState = (newState) => {
+    newState !== state && onHoldChange(state = newState);
+  };
+  (0, import_event_listener.makeEventListener)(window, "keydown", modifier ? (e) => {
+    if (e.repeat)
+      return;
+    if (e[modifier]) {
+      if (!state && !actualPressed) {
+        preventDefault && e.preventDefault();
+        onHoldChange(state = actualPressed = true);
+      } else if (!allowOtherKeys)
+        updateState(false);
+    } else
+      updateState(actualPressed = false);
+  } : (e) => {
+    if (e.key !== key) {
+      allowOtherKeys || updateState(false);
+      return;
+    }
+    if (e.repeat)
+      return;
+    updateState(true);
+  });
+  (0, import_event_listener.makeEventListener)(window, "keyup", modifier ? (e) => {
+    if (e[modifier])
+      allowOtherKeys || updateState(false);
+    else
+      updateState(actualPressed = false);
+  } : (e) => {
+    if (e.key !== key)
+      allowOtherKeys || updateState(false);
+    else
+      updateState(false);
+  });
+  (0, import_event_listener.makeEventListener)(document, "visibilitychange", () => document.visibilityState !== "visible" && updateState(false));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  makeKeyHoldListener
+});

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+declare type KeyModifier = "altKey" | "ctrlKey" | "metaKey" | "shiftKey";
+declare type KeyToHold = KeyModifier | (string & {});
+/**
+ * Attaches keyboard event-listeners to `window`, and calls {@link onHoldChange} callback whenever user holds or stops holding specified {@link key}.
+ *
+ * Event listeners are automatically cleaned on root dispose.
+ *
+ * @param key keyboard key or modifier to listen for
+ * @param onHoldChange callback fired when the hold state changes
+ * @param options additional configuration
+ * - `options.preventDefault` — call `e.preventDefault()` on the keyboard event, when the specified {@link key} is pressed. *(Defaults to `false`)*
+ * - `options.allowOtherKeys` — Should the user be allowed to press other keys while holding the specified one *(Defaults to `false`)*
+ */
+declare function makeKeyHoldListener(key: KeyToHold, onHoldChange: (isHolding: boolean) => void, options?: {
+    preventDefault?: boolean;
+    allowOtherKeys?: boolean;
+}): void;
+
+export { KeyModifier, KeyToHold, makeKeyHoldListener };

package/dist/index.js

@@ -0,0 +1,47 @@
+// src/holdKeyListener.ts
+import { makeEventListener } from "@solid-primitives/event-listener";
+var keyModifiers = ["altKey", "ctrlKey", "metaKey", "shiftKey"];
+function makeKeyHoldListener(key, onHoldChange, options = {}) {
+  const { preventDefault, allowOtherKeys } = options;
+  const modifier = keyModifiers.includes(key) ? key : void 0;
+  let state = false;
+  let actualPressed = false;
+  const updateState = (newState) => {
+    newState !== state && onHoldChange(state = newState);
+  };
+  makeEventListener(window, "keydown", modifier ? (e) => {
+    if (e.repeat)
+      return;
+    if (e[modifier]) {
+      if (!state && !actualPressed) {
+        preventDefault && e.preventDefault();
+        onHoldChange(state = actualPressed = true);
+      } else if (!allowOtherKeys)
+        updateState(false);
+    } else
+      updateState(actualPressed = false);
+  } : (e) => {
+    if (e.key !== key) {
+      allowOtherKeys || updateState(false);
+      return;
+    }
+    if (e.repeat)
+      return;
+    updateState(true);
+  });
+  makeEventListener(window, "keyup", modifier ? (e) => {
+    if (e[modifier])
+      allowOtherKeys || updateState(false);
+    else
+      updateState(actualPressed = false);
+  } : (e) => {
+    if (e.key !== key)
+      allowOtherKeys || updateState(false);
+    else
+      updateState(false);
+  });
+  makeEventListener(document, "visibilitychange", () => document.visibilityState !== "visible" && updateState(false));
+}
+export {
+  makeKeyHoldListener
+};

package/dist/server.cjs

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/server.ts
+var server_exports = {};
+__export(server_exports, {
+  makeKeyHoldListener: () => makeKeyHoldListener
+});
+module.exports = __toCommonJS(server_exports);
+var makeKeyHoldListener = () => {
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  makeKeyHoldListener
+});

package/dist/server.js

@@ -0,0 +1,6 @@
+// src/server.ts
+var makeKeyHoldListener = () => {
+};
+export {
+  makeKeyHoldListener
+};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@solid-primitives/keyboard",
+  "version": "0.0.100",
+  "description": "A library of reactive promitives helping handling user's keyboard input.",
+  "author": "Damian Tarnwski <gthetarnav@gmail.com>",
+  "contributors": [],
+  "license": "MIT",
+  "homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/solidjs-community/solid-primitives/issues"
+  },
+  "primitive": {
+    "name": "keyboard",
+    "stage": 0,
+    "list": [
+      "makeKeyHoldListener"
+    ],
+    "category": "Inputs"
+  },
+  "private": false,
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/server.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "node": {
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "vite serve dev --host",
+    "dev": "npm run start",
+    "build": "tsup",
+    "test": "uvu -r solid-register",
+    "test:watch": "watchlist src test -- npm test"
+  },
+  "keywords": [
+    "solid",
+    "primitives",
+    "keyboard",
+    "keystroke",
+    "hotkey"
+  ],
+  "devDependencies": {
+    "jsdom": "^19.0.0",
+    "prettier": "^2.7.1",
+    "solid-register": "^0.2.5",
+    "tslib": "^2.4.0",
+    "tsup": "^6.1.2",
+    "typescript": "^4.7.3",
+    "unocss": "0.39.0",
+    "uvu": "^0.5.3",
+    "vite": "2.9.12",
+    "vite-plugin-solid": "2.2.6",
+    "watchlist": "^0.3.1",
+    "solid-js": "^1.4.4"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.4.0"
+  },
+  "dependencies": {
+    "@solid-primitives/event-listener": "^2.2.0"
+  }
+}