@svelte-put/shortcut - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

lib/index.js

@@ -28,17 +28,5 @@ /******************************************************************************
 /**
- * Listen for keyboard event and trigger 'shortcut' event
+ * Listen for keyboard event and trigger `shortcut` {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent | CustomEvent }
  * @public
  *
- * @param node - HTMLElement to add event listener to
- * @param params - svelte action parameters
- * @returns svelte action interface
- *
- * @remarks
- *
- * You can either pass multiple callbacks to their associated triggers, or
- * pass one single handler to the `on:shortcut` event, in which case you should
- * provide an ID to each trigger to be able to distinguish what trigger was activated
- * in the event handler. Either way, only use `callback` or `on:shortcut` and not both to
- * avoid handler duplication.
- *
  * @example Typical usage
@@ -65,3 +53,3 @@ *
  *  function onShortcut(event: CustomEvent<ShortcutEventDetails>) {
- *    if (event.detail.trigger === 'do-something-else') {
+ *    if (event.detail.trigger.id === 'do-something-else') {
  *      console.log('Same as doSomethingElse()');
@@ -109,2 +97,28 @@ *      // be careful here doSomethingElse would have been called too
  *
+ * @remarks
+ *
+ * As with any svelte action, `shortcut` should be use with element and not component.
+ *
+ * ```svelte
+ * <-- correct usage-->
+ *  <div use:intersect />
+ *
+ * <-- incorrect usage-->
+ * <Component use:intersect/>
+ * ```
+ *
+ * You can either:
+ *
+ * - pass multiple callbacks to their associated triggers, or
+ *
+ * - pass one single handler to the `on:shortcut` event, in which case you should
+ * provide an ID to each trigger to be able to distinguish what trigger was activated
+ * in the event handler.
+ *
+ * Either way, only use `callback` or `on:shortcut` and not both to
+ * avoid handler duplication.
+ *
+ * @param node - HTMLElement to add event listener to
+ * @param params - svelte action parameters
+ * @returns svelte action interface
  */
@@ -111,0 +125,0 @@ function shortcut(node, params) {

lib/shortcut.d.ts

 import type { ShortcutParameters } from './types';
 /**
- * Listen for keyboard event and trigger 'shortcut' event
+ * Listen for keyboard event and trigger `shortcut` {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent | CustomEvent }
  * @public
  *
- * @param node - HTMLElement to add event listener to
- * @param params - svelte action parameters
- * @returns svelte action interface
- *
- * @remarks
- *
- * You can either pass multiple callbacks to their associated triggers, or
- * pass one single handler to the `on:shortcut` event, in which case you should
- * provide an ID to each trigger to be able to distinguish what trigger was activated
- * in the event handler. Either way, only use `callback` or `on:shortcut` and not both to
- * avoid handler duplication.
- *
  * @example Typical usage
@@ -39,3 +27,3 @@ *
  *  function onShortcut(event: CustomEvent<ShortcutEventDetails>) {
- *    if (event.detail.trigger === 'do-something-else') {
+ *    if (event.detail.trigger.id === 'do-something-else') {
  *      console.log('Same as doSomethingElse()');
@@ -83,2 +71,28 @@ *      // be careful here doSomethingElse would have been called too
  *
+ * @remarks
+ *
+ * As with any svelte action, `shortcut` should be use with element and not component.
+ *
+ * ```svelte
+ * <-- correct usage-->
+ *  <div use:intersect />
+ *
+ * <-- incorrect usage-->
+ * <Component use:intersect/>
+ * ```
+ *
+ * You can either:
+ *
+ * - pass multiple callbacks to their associated triggers, or
+ *
+ * - pass one single handler to the `on:shortcut` event, in which case you should
+ * provide an ID to each trigger to be able to distinguish what trigger was activated
+ * in the event handler.
+ *
+ * Either way, only use `callback` or `on:shortcut` and not both to
+ * avoid handler duplication.
+ *
+ * @param node - HTMLElement to add event listener to
+ * @param params - svelte action parameters
+ * @returns svelte action interface
  */
@@ -85,0 +99,0 @@ export declare function shortcut(node: HTMLElement, params: ShortcutParameters): {

lib/types/index.d.ts

 /**
- * Supported modifier keys, map to event's altKey, ctrlKey, shiftKey, metaKey.
+ * Supported modifier keys, map to {@link https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent | KeyboardEvent}'s
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/altKey | altkey},
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey | ctrlKey},
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey | shiftKey},
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey | metaKey}.
+ *
  * @public
@@ -8,7 +13,8 @@ */
  * Possible variations for modifier definition
+ *
  * @public
  *
- * @example Single key
+ * @example
  *
- * A single key as modifier is checked.
+ * Listen for a single modifier
  *
@@ -22,4 +28,4 @@ * ```svelte
  *   trigger: {
- *    key: 'k ,
- *    modifier: ['ctrl'],
+ *    key: 'k' ,
+ *    modifier: 'ctrl',
  *   },
@@ -30,5 +36,5 @@ * }}
  *
- * @example Multiple possible keys (or)
+ * @example
  *
- * Multiple keys are checked, if any key is pressed, the trigger is activated.
+ * Listen for one of many modifiers (or)
  *
@@ -42,3 +48,3 @@ * ```svelte
  *   trigger: {
- *    key: 'k ,
+ *    key: 'k' ,
  *    modifier: ['ctrl', 'meta'],
@@ -50,5 +56,5 @@ *   },
  *
- * @example Key combinations (and)
+ * @example
  *
- * A combination of keys are checked, if all are pressed, the trigger is activated.
+ * Listen for a combination of multiple modifiers (and)
  *
@@ -62,3 +68,3 @@ * ```svelte
  *   trigger: {
- *    key: 'k ,
+ *    key: 'k' ,
  *    modifier: [['ctrl', 'shift']],
@@ -68,5 +74,6 @@ *   },
  * />
+ *
  * ```
  *
- * @example Mix & Match
+ * @example
  *
@@ -82,5 +89,5 @@ * A mix of the 3 previous examples
  *   trigger: {
- *    key: 'k ,
+ *    key: 'k' ,
  *    modifier: [
- *      ['ctrl', 'shift'], // ctrl & shift
+ *      ['ctrl', 'shift'], // ctrl and shift
  *                         // or
@@ -102,3 +109,3 @@ *      ['meta'],          // meta
     /**
-     * whether to enable this triggered
+     * whether to enable this triggered. Default to `true`
      *
@@ -111,6 +118,11 @@ * @remarks
     enabled?: boolean;
-    modifier?: ShortcutModifier | ShortcutModifier[] | ShortcutModifier[][];
+    /** modifier key to listen to in conjunction of `key` */
+    modifier?: ShortcutModifierDefinition;
+    /** id to distinguish this trigger from others */
     id?: string;
+    /** the {@link https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent | KeyboardEvent}.key to listen to */
     key: string;
+    /** callback for when the trigger is matched */
     callback?: (detail: ShortcutEventDetails) => void;
+    /** whether to call `event.preventDefault` before firing callback. Default to `false` */
     preventDefault?: boolean;
@@ -124,3 +136,3 @@ }
     /**
-     * whether to activate the action
+     * whether to activate the action. Default to `true`
      *
@@ -135,9 +147,9 @@ * @remarks
     enabled?: boolean;
-    /** Either a single ShortcutTrigger definition or multiple ones */
+    /** Either a single {@link ShortcutTrigger} definition or an array of multiple ones */
     trigger: Array<ShortcutTrigger> | ShortcutTrigger;
-    /** event type to place on node */
+    /** event type to place on node. Default to `keydown` */
     type?: 'keydown' | 'keyup';
 }
 /**
- * `detail` payload for 'shortcut' CustomEvent
+ * `detail` payload for 'shortcut' {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent | CustomEvent }
  * @public
@@ -144,0 +156,0 @@ *

package.json

 {
   "name": "@svelte-put/shortcut",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Action to move node on mousedown & mousemove",
@@ -15,11 +15,2 @@ "main": "lib/index.js",
   ],
-  "scripts": {
-    "lint": "eslint --ignore-path .gitignore \"./**/*/*{ts,js,cjs}\"",
-    "format": "prettier --check --ignore-path .gitignore --plugin-search-dir=. \"./**/*.{ts,js,cjs}\"",
-    "build": "rollup -c",
-    "semantic-release": "semantic-release",
-    "api:extract": "api-extractor run --local --verbose",
-    "api:document": "api-documenter markdown -i api/temp -o api/docs",
-    "api": "run-s api:extract api:document"
-  },
   "repository": {
@@ -44,20 +35,25 @@ "type": "git",
   "devDependencies": {
-    "@microsoft/api-documenter": "^7.17.12",
-    "@microsoft/api-extractor": "^7.23.1",
-    "@rollup/plugin-typescript": "^8.3.2",
-    "@svelte-put/apirc": "workspace:^",
-    "@svelte-put/eslint-config": "workspace:^",
-    "@svelte-put/prettierrc": "workspace:^",
-    "@svelte-put/releaserc": "workspace:^",
-    "@svelte-put/tsconfig": "workspace:^",
-    "eslint": "^8.15.0",
+    "@microsoft/api-documenter": "^7.19.0",
+    "@microsoft/api-extractor": "^7.28.6",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@svelte-put/apirc": "^0.0.0",
+    "@svelte-put/eslint-config": "^0.0.0",
+    "@svelte-put/prettierrc": "^0.0.0",
+    "@svelte-put/tsconfig": "^0.0.0",
+    "eslint": "^8.20.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
-    "rollup": "^2.72.1",
+    "prettier": "^2.7.1",
+    "rollup": "^2.77.0",
     "rollup-plugin-filesize": "^9.1.2",
-    "semantic-release": "^19.0.2",
-    "semantic-release-monorepo": "^7.0.5",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
+  },
+  "scripts": {
+    "lint": "eslint --ignore-path .gitignore \"./**/*/*{ts,js,cjs}\"",
+    "format": "prettier --check --ignore-path .gitignore --plugin-search-dir=. \"./**/*.{ts,js,cjs}\"",
+    "build": "rollup -c",
+    "api:extract": "api-extractor run --local --verbose",
+    "api:document": "api-documenter markdown -i api/temp -o api/docs",
+    "api": "run-s api:extract api:document"
   }
-}
+}

README.md

@@ -5,3 +5,3 @@ <div align="center">
 
-[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![github.actions.release.badge]][github.actions.release]
+[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia]
 
@@ -38,3 +38,9 @@ Svelte action `use:shortcut` - add event listener for keyboard shortcuts
 npm install -D @svelte-put/shortcut
+```
+
+```bash
 yarn add -D @svelte-put/shortcut
+```
+
+```bash
 pnpm add -D @svelte-put/shortcut
@@ -45,3 +51,3 @@ ```
 
-See [example for typical usage here](https://github.com/vnphanquang/svelte-put/blob/main/packages/actions/shortcut/api/docs/shortcut.shortcut.md#example).
+See [examples here](https://github.com/vnphanquang/svelte-put/blob/main/packages/actions/shortcut/api/docs/shortcut.shortcut.md#example)
 
@@ -81,4 +87,2 @@ </details>
 [github.monorepo]: https://github.com/vnphanquang/svelte-put
-[github.actions.release.badge]: https://github.com/vnphanquang/svelte-put/actions/workflows/shortcut.release.yaml/badge.svg
-[github.actions.release]: https://github.com/vnphanquang/svelte-put/actions/workflows/shortcut.release.yaml
 [github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/actions/shortcut/CHANGELOG.md
@@ -85,0 +89,0 @@ [github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

No alert changes

Improved metrics

Total package byte prevSize

37463

5.87%

Dev dependency count

14

-17.65%

Number of package files

11

10%

Lines of code

456

9.62%

Number of lines in readme file

95

4.4%

No dependency changes