v0.2.1

Author: metonym

CHANGELOG.md

@@ -5,8 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.1](https://github.com/metonym/svelte-keydown/releases/tag/v0.2.1) - 2020-12-21
+
+**Fixes**
+
+- add index type in TypeScript definitions for generic key events
+
 ## [0.2.0](https://github.com/metonym/svelte-keydown/releases/tag/v0.2.0) - 2020-11-18
 
+**Features**
+
 - add TypeScript definitions
 
 ## [0.1.0](https://github.com/metonym/svelte-keydown/releases/tag/v0.1.0) - 2020-04-26

README.md

@@ -5,34 +5,47 @@
 
 > Utility to listen for keyboard events.
 
-Simple wrapper using [svelte:body](https://svelte.dev/docs#svelte_body) to listen for [keydown](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event) events.
+Utility component leveraging the [svelte:body API](https://svelte.dev/docs#svelte_body) to listen for [keydown](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event) events.
 
-This can be used to close modals or listen for a combination of keydown events.
+**Use Cases**
+
+- toggle modals
+- capture a combination of keys (i.e., "Meta-s")
+
+---
+
+<!-- TOC -->
 
 ## Install
 
 ```bash
 yarn add -D svelte-keydown
+# OR
+npm i -D svelte-keydown
 ```
 
 ## Usage
 
 ```svelte
 <script>
   import Keydown from "svelte-keydown";
+
+  let events = [];
 </script>
 
-<Keydown on:Enter="{() => { console.log('Enter'); }}" />
+<Keydown on:Enter="{() => { events = [...events, 'enter'] }}" />
+
+Press "enter": {events.join(', ')}
 ```
 
 ## Examples
 
 ### Escape to Close Modal
 
+In this use case, keydown events are paused if the modal is not open.
+
 ```svelte
 <script>
-  import Keydown from "svelte-keydown";
-
   let showModal = true;
 
   function closeModal() {
@@ -41,52 +54,64 @@ yarn add -D svelte-keydown
 </script>
 
 <Keydown paused="{!showModal}" on:Escape="{closeModal}" />
+
+<button on:click="{() => { showModal = !showModal; }}">Toggle modal</button>
+<br />
+Toggled {showModal}
+
 ```
 
 ### "Command+S" to Save
 
+Use the `combo` dispatched event to listen for a combination of keys.
+
 ```svelte
 <script>
-  import Keydown from "svelte-keydown";
+  let save = [];
 </script>
 
 <Keydown
-  on:combo="{({detail}) => {
-    if (detail === 'Meta-s') {
+  on:combo="{(e) => {
+    if (e.detail === 'Meta-s') {
       console.log('Save');
+      save = [...save, e.detail]
     }
   }}"
 />
+
+{save.join(', ')}
 ```
 
 ## API
 
-| Property name | Value                        |
-| :------------ | :--------------------------- |
-| paused        | `boolean` (default: `false`) |
+| Prop name | Value                        |
+| :-------- | :--------------------------- |
+| paused    | `boolean` (default: `false`) |
 
 ### Dispatched events
 
-#### `on:{Key}`
+#### `on:[Key]`
 
 Example:
 
 ```svelte
-<Keydown on:Enter={() => {}} />
+<Keydown on:Enter />
+<Keydown on:Escape />
+
 ```
 
 #### `on:key`
 
-Alternative API to `on:{Key}`.
+Alternative API to `on:[Key]`.
 
 Example:
 
 ```svelte
 <Keydown
   on:key={({ detail }) => {
-    console.log(detail); // "Enter"
-  }}
-/>
+    console.log(detail); // string | "Enter"
+  }} />
+
 ```
 
 #### `on:combo`
@@ -99,11 +124,17 @@ Example:
 <Keydown
   on:combo={({ detail }) => {
     console.log(detail); // "Meta-Shift-a"
-  }}
-/>
+  }} />
+
 ```
 
-## [Changelog](CHANGELOG.md)
+## TypeScript
+
+Svelte version 3.31 or greater is required to use this module with TypeScript.
+
+## Changelog
+
+[CHANGELOG.md](CHANGELOG.md)
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-keydown",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "description": "Utility to listen for keyboard events",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -10,13 +10,21 @@
   "types": "./types/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "prepack": "rollup -c"
+    "dev": "rollup -cw",
+    "predeploy": "rollup -c",
+    "deploy": "npx gh-pages -d dist",
+    "prepack": "BUNDLE=true rollup -c",
+    "svelte-check": "svelte-check"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "rollup": "^2.33.3",
-    "rollup-plugin-svelte": "^6.1.1",
-    "svelte": "^3.29.7"
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@tsconfig/svelte": "^1.0.10",
+    "rollup": "^2.34.2",
+    "rollup-plugin-svelte": "^7.0.0",
+    "svelte": "^3.31.0",
+    "svelte-check": "^1.1.23",
+    "svelte-readme": "^1.3.0",
+    "typescript": "^4.1.3"
   },
   "repository": {
     "type": "git",

rollup.config.js

@@ -1,17 +1,30 @@
 import resolve from "@rollup/plugin-node-resolve";
 import svelte from "rollup-plugin-svelte";
+import svelteReadme from "svelte-readme";
 import pkg from "./package.json";
 
-export default ["es", "umd"].map((format) => {
-  const UMD = format === "umd";
+const DEV = process.env.ROLLUP_WATCH;
+const BUNDLE = process.env.BUNDLE === "true";
 
-  return {
-    input: pkg.svelte,
-    output: {
-      format,
-      file: UMD ? pkg.main : pkg.module,
-      name: UMD ? pkg.name : undefined,
-    },
-    plugins: [svelte(), resolve()],
-  };
-});
+export default () => {
+  if (!BUNDLE) {
+    return svelteReadme({
+      svelte: { dev: DEV, immutable: true },
+      minify: !DEV,
+    });
+  }
+
+  return ["es", "umd"].map((format) => {
+    const UMD = format === "umd";
+
+    return {
+      input: pkg.svelte,
+      output: {
+        format,
+        file: UMD ? pkg.main : pkg.module,
+        name: UMD ? pkg.name : undefined,
+      },
+      plugins: [svelte(), resolve()],
+    };
+  });
+};

test.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Keydown from "./types";
+
+  let showModal = true;
+
+  function closeModal() {
+    showModal = false;
+  }
+</script>
+
+<Keydown
+  paused={!showModal}
+  on:Escape={closeModal}
+  on:combo={(e) => {
+    console.log(e.detail);
+  }} />
+
+Toggled
+{showModal}
+<button
+  on:click={() => {
+    showModal = !showModal;
+  }}>Toggle modal</button>

tsconfig.json

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface KeydownProps {
   /**
@@ -7,11 +8,12 @@ export interface KeydownProps {
   paused?: boolean;
 }
 
-export default class Keydown {
-  $$prop_def: KeydownProps;
-  $$slot_def: {};
-
-  $on(eventname: "combo", cb: (event: CustomEvent<string>) => void): () => void;
-  $on(eventname: "key", cb: (event: CustomEvent<string>) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class Keydown extends SvelteComponentTyped<
+  KeydownProps,
+  {
+    combo: CustomEvent<string>;
+    key: CustomEvent<string>;
+    [key: string]: CustomEvent<any>;
+  },
+  {}
+> {}

types/Keydown.d.ts

@@ -1 +1 @@
-export { default } from "./Keydown";
+export { default as default } from "./Keydown";