@peter.naydenov/shortcuts 3.5.0 → 3.5.1

package/Changelog.md

@@ -2,6 +2,11 @@
 
 
 
+### 3.5.1 ( 2025-10-20 )
+- [x] Update in package.json. Field 'types' was added;
+
+
+
 ### 3.5.0 ( 2025-10-19)
 - [x] Featire: New method 'listPlugins' to get list of enabled plugins;
 - [x] Upgrade: Improvment of type definitions. New d.ts files were added;

package/README.md

@@ -6,14 +6,15 @@
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40peter.naydenov%2Fshortcuts)
 
 
- 
-Describe all page activities as list of shortcuts wrapped in contexts. Switch among available contexts.
-Library has a plugin system to extend the possible `shortcut names`/`event coverage`. Plugins role is to convert DOM events to shortcut strings, then the core part will trigger the action functions related to the shortcut. At the moment we have 3 plugins:
-- `key`   - converts keyboard events to shortcut names;
-- `click` - converts mouse events to shortcut names;
-- `form`  - watches for form elements changes;
 
-Planned work on the plugins for `scroll`, `drag-drop`, etc...
+A shortcut management library that wrappes shortcut definitions in a context and allows to switch between contexts. Shortcuts are events triggered by keyboard, mouse, and DOM events. The library has a plugin system that makes the library extensible.
+
+Currently existing plugins:
+- `key`   - Converts keyboard events to shortcuts;
+- `click` - Converts mouse events to shortcuts;
+- `form`  - Form element changes to shortcuts;
+
+Planned work on plugins: `scroll`, `drag-drop`, etc.
 
 
 
@@ -49,9 +50,9 @@ Load a shortcut definition by calling `load` method.
 
 ```js
 // for es6 module projects:
-include { shortcuts, pluginKey, pluginClick } from '@peter.naydenov/shortcuts'
+import { shortcuts, pluginKey, pluginClick, pluginForm } from '@peter.naydenov/shortcuts'
 // for commonjs projects:
-const { shortcuts, pluginKey, pluginClick } = require('@peter.naydenov/shortcuts')
+const { shortcuts, pluginKey, pluginClick, pluginForm } = require('@peter.naydenov/shortcuts')
 
 
 
@@ -484,6 +485,32 @@ Plugin options are provided as a second argument during the plugin enabling. It'
 
 
 
+## TypeScript Support
+
+The library includes TypeScript definitions. Install the package and TypeScript will automatically detect the types.
+
+```typescript
+import { shortcuts, pluginKey, pluginClick, pluginForm } from '@peter.naydenov/shortcuts';
+
+const short: ShortcutsAPI = shortcuts();
+short.enablePlugin(pluginKey);
+short.enablePlugin(pluginClick);
+short.enablePlugin(pluginForm);
+
+// Type-safe shortcut definitions
+const shortcutDefinition = {
+  myContext: {
+    'key:ctrl+s': () => console.log('Saved'),
+    'click:left-1': (args: { target: HTMLElement }) => console.log('Clicked', args.target)
+  }
+};
+
+short.load(shortcutDefinition);
+short.changeContext('myContext');
+```
+
+The `ShortcutsAPI` interface provides full type safety for all methods and their parameters.
+
 ## Links
 
 - [History of changes](https://github.com/PeterNaydenov/shortcuts/blob/main/Changelog.md)

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@peter.naydenov/shortcuts",
   "description": "Context control of shortcuts based on keyboard and mouse events",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "license": "MIT",
   "author": "Peter Naydenov",
   "main": "./dist/shortcuts.umd.js",
+  "types": "./dist/main.d.ts",
   "type": "module",
   "exports": {
     ".": {
@@ -21,7 +22,7 @@
     "dev": "vite",
     "build": "rollup -c && npm run types",
     "test": "vitest",
-    "test:ui": "vitest --ui",
+    "test:ui": "vitest --ui --open",
     "cover": "vitest run --coverage",
     "types": "tsc"
   },
@@ -49,7 +50,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "typescript": "^5.9.3",
-    "vite": "^7.1.10",
+    "vite": "^7.1.11",
     "vitest": "^3.2.4"
   },
   "keywords": [

package/test/04-form.test.js

@@ -53,13 +53,13 @@ const contextDefinition = {
                 , extend : {
                               'form : watch' : () => 'input'
                             , 'form : define' : () => 'input'
-                            , 'form : action' : () => [
-                                {
-                                      fn : (e) => console.log ( e.target )
-                                    , type : 'input'
-                                    , mode : 'in'
-                                }
-                            ]
+                             , 'form : action' : () => [
+                                 {
+                                       fn : (e) => console.log ( e.target )
+                                     , type : 'input'
+                                     , timing : 'in'
+                                 }
+                             ]
                     }
       }
 
@@ -67,7 +67,7 @@ let short = shortcuts ();
 
 
 
-describe.skip ( 'Form plugin', () => {
+describe.only ( 'Form plugin', () => {
 
       beforeEach ( async  () => {
                   short.load ( contextDefinition )
@@ -86,5 +86,48 @@ describe.skip ( 'Form plugin', () => {
           }) // afterEach
 
 
-
+      it ( 'Shortcut when plugin is not installed', async () => {
+                  const ls = short.listShortcuts ( 'extend' )
+                  expect ( ls ).to.includes ( 'form : action' )
+          }) // it Shortcuts when plugin is not installed
+
+      
+      it ( 'Shortcuts when plugin is enabled', async () => {
+                  short.enablePlugin ( pluginForm )
+                  const ls = short.listShortcuts ( 'extend' )
+                  expect ( ls ).to.includes ( 'FORM:WATCH' )
+                  // Shortcut names are normalized by the plugins!               
+                  expect ( ls ).to.not.includes ( 'form : watch' )                  
+          }) // it Shortcuts when plugin is enabled
+
+
+
+      it ( 'Simpler form listener. Only "form:action" defined', async () => {
+                  // Uses predefined 'watch' and 'define' functions
+                  short.enablePlugin ( pluginForm )
+                  let edit = 'none';
+
+                  const contextExtension = {
+                                  'local' : {
+                                          'form: action' : () => [{
+                                                                    fn : () => edit = 'changed'
+                                                                  , type : 'input'
+                                                                  , timing : 'instant'
+                                                                }]
+                                        }
+                            };
+                  short.load ( contextExtension )
+                  short.changeContext ( 'local' )
+                  let input = document.getElementById ( 'name' )
+                  input.focus ()
+                  await userEvent.keyboard ( 'hello' )
+                  await wait ( 50 )
+                  await waitFor ( () => {
+                              expect ( edit ).to.equal ( 'changed' )
+                      }, { timeout: 1000, interval: 12 })
+          }) // it Simpler form listener
+
+
+
+      
 }) // describe