@peter.naydenov/shortcuts 3.1.3 → 3.2.0

package/src/plugins/form/_registerShortcutEvents.js

@@ -0,0 +1,71 @@
+'use strict'
+
+function _registerShortcutEvents ( dependencies, pluginState ) {
+const 
+          { regex, _defaults, ev } = dependencies
+        , { 
+                  currentContext : { name: contextName }
+                , shortcuts 
+                , callbacks
+           } = pluginState
+        ;
+        let watch=[], define=[], action=[];
+        if ( contextName == null )   return false
+        Object.entries ( shortcuts[contextName] ).forEach ( ([shortcutName, list ]) => {   
+                        let isFormEv = regex.test ( shortcutName );
+                        if ( !isFormEv ) return                
+                        if ( shortcutName === 'FORM:WATCH' )    watch = list
+                        if ( shortcutName === 'FORM:DEFINE' )   define = list
+                        if ( shortcutName === 'FORM:ACTION' )   action = list
+                })
+        
+        if ( action.length === 0 )   return false
+        
+        let setTypes = new Set ();
+        if ( define.length === 0 )  define = [ _defaults.define ]
+        if ( watch.length === 0  )  watch  = [ _defaults.watch ] 
+        let watchList = watch.map ( el => el() )
+                                        .reduce ( ( res, el) => {
+                                                res.push ( el ) 
+                                                return res
+                                        }, [])
+        pluginState.watchList = document.querySelectorAll ( watchList )
+        pluginState.watchList.forEach ( el => setTypes.add (define[0](el)) ) 
+
+        pluginState.typeFn = define[0] ? define[0] : _defaults.define
+        action.forEach ( act => {
+                        
+                        if ( !(act instanceof Function)) {  
+                                console.warn ( `Warning: The 'form:action' should be a function.` )
+                                return false
+                           }
+                        let list = act ()
+                        if ( !(list instanceof Array) ) {
+                                console.warn ( `Warning: The 'form:action' function should RETURN an array.` )
+                                return false
+                           }
+                        act().forEach ( ({fn, type, timing, wait=0 }) => {
+                                        if ( setTypes.has ( type) && fn instanceof Function ) {
+                                                let key = `${type}/${timing}`
+                                                const hasProperty = callbacks.hasOwnProperty ( key );
+                                                hasProperty ? 
+                                                                callbacks[key].push ( fn ) :
+                                                                callbacks[key] = [ fn ]
+                                                if ( !hasProperty ) {
+                                                                ev.on ( key, ( props, callbacks ) => {   // Register the 'type/timing' as an event
+                                                                                callbacks.forEach ( cb => { if ( cb instanceof Function )   cb ( props )   })
+                                                                        }) 
+                                                        }  
+                                        } // if function
+                                        if ( timing === 'instant' )   pluginState.wait[`${type}`] = wait
+                                }) // for each act
+                }) // for each action
+        if ( Object.keys(pluginState.callbacks).length > 0 )   return true
+        else                                                   return false
+} // _registerShortcutEvents func.
+
+
+
+export default _registerShortcutEvents
+
+

package/src/plugins/form/index.js

@@ -0,0 +1,84 @@
+'use strict'
+
+// import all plugin files here
+import _listenDOM from './_listenDOM.js'
+import _normalizeShortcutName from './_normalizeShortcutName.js'
+import _registerShortcutEvents from './_registerShortcutEvents.js'
+import _defaults from './_defaults.js'
+
+
+
+function pluginForm ( dependencies, state, options ) {
+  /**
+   * 'form: watch' - A function. Should return a string. Define a selection that will be watched for changes. example: 'input, select.color, textarea, #name'
+   * 'form: define' - A function that receives every watched element. Should return text value that represents the type of the
+   *                  element according custom specification. Types could be specific for every single form.
+   * 'form:action' - List of Callback objects.
+   *  Callback definition object:
+   * {
+   *   fn: function to be called
+   *   type: fn should be executed on type of the element
+   *   timing: 'in' | 'out' | 'instant' - when to execute the function 
+   *   wait: time in milliseconds to wait before executing the function again. Works only with mode 'instant'.
+   * }
+   */
+
+    let 
+                  { currentContext, shortcuts } = state
+                , { inAPI } = dependencies
+                , deps = {
+                               ev: dependencies.ev
+                             , mainDependencies : dependencies
+                             , regex : /FORM\s*\:/i
+                             , _defaults
+                        }
+                , pluginState = {
+                                  currentContext
+                                , shortcuts
+                                , callbacks : {} // Functions callbacks arranged by 'type/timing' : [ callback, ...otherCallbacks ]
+                                , typeFn    : '' // Type definition function
+                                , watchList : [] // list of watched elements
+                                , wait      : {} // wait time for 'instant' mode
+                            } // pluginState
+                ;
+    function resetState () {
+            pluginState.callbacks = {}
+            pluginState.typeFn    = ''
+            pluginState.watchList = []
+            pluginState.wait      = {}
+      } // resetState func.
+
+    // Read shortcuts names from all context entities and normalize entries related to the plugin
+    inAPI._normalizeWithPlugins ( _normalizeShortcutName )
+    let formListener = _listenDOM ( deps, pluginState );
+    
+    if ( currentContext.name ) {
+          let hasFormShortcuts = _registerShortcutEvents ( deps, pluginState )
+          if ( hasFormShortcuts )    formListener.start ()
+      }
+       
+    let pluginAPI = {
+                       getPrefix     : ( ) => 'form'
+                     , shortcutName  : key => {   // Format a key string according plugin needs
+                                             return _normalizeShortcutName ( key )   
+                                        }
+                     , contextChange : ( )  => {
+                                        resetState ()
+                                        let hasFormShortcuts = _registerShortcutEvents ( deps, pluginState )
+                                        if ( hasFormShortcuts )    formListener.start ()
+                                        else                       formListener.stop ()                                          
+                                }
+                     , mute          : () => formListener.stop ()
+                     , unmute        : () => formListener.start ()
+                     , destroy       : () => {
+                                                formListener.stop ()
+                                                pluginState = null
+                                                pluginAPI = null
+                                        }
+              }; // pluginAPI
+        Object.freeze ( pluginAPI )
+        return pluginAPI
+} // pluginForm func.
+
+
+export default pluginForm

package/src/plugins/key/_listenDOM.js

@@ -61,7 +61,7 @@ function _listenDOM ( dependencies, state ) {
                             
                     if ( sequence ) {
                             const signal = `KEY:${res.join(',')}`
-                            ev.emit ( signal, data )   
+                            ev.emit ( signal, data )
                             // Reset:
                             r = []
                             keyTimer = null

package/test/01-general.test.js

@@ -0,0 +1,299 @@
+import { beforeEach, describe, it, test } from 'vitest'
+import { userEvent } from '@vitest/browser/context'
+
+import Block from '../test-components/Block.jsx'
+import VisaulController from '@peter.naydenov/visual-controller-for-react'
+import '../test-components/style.css'
+
+import { 
+          pluginClick,
+          pluginKey
+        , pluginForm
+        , shortcuts 
+                } from '../src/main.js'
+import { expect } from 'chai'
+
+import askForPromise from 'ask-for-promise'
+
+const html = new VisaulController ();
+
+let
+       a = false
+     , b = false
+     ;
+
+
+function wait (ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+      }
+                                    
+const short = shortcuts ({onShortcut : ( shortcut, {context,note,type}) =>  console.log (shortcut, context, note, type)   });
+    
+short.load ({
+                  general : {
+                            ' key : shift+a': [ () => a = true ]
+                        }
+                , extra : {    
+                            'key : p,r,o,b,a': () => b = true                        
+                        }
+                , extend : {
+                              'form : watch' : () => 'input'
+                            , 'form : define' : () => 'input'
+                            , 'form : action' : () => [
+                                {
+                                      fn : (e) => console.log ( e.target )
+                                    , type : 'input'
+                                    , mode : 'in'
+                                }
+                            ]
+                    }
+        })
+
+beforeEach ( () => {
+    let container = document.createElement ( 'div' )
+    container.id = 'app'
+    document.body.appendChild ( container )
+    html.publish ( Block, {}, 'app' )
+    a = false, b = false
+}) // beforeEach
+
+
+
+
+
+describe ( "Shortcuts", () => {
+
+
+
+test ( 'Shortcut if no plugin installed', () => {
+            let res = new Promise ( (resolve,reject) => {
+                            short.changeContext ( 'general' )
+                            let r = short.listShortcuts ('general')
+                            expect ( r[0]).to.equal ( ' key : shift+a' ) // Shortcut name is the same as it was set
+                            resolve ('success')
+                })
+            return res
+    }) // test no plugin installed
+
+
+
+test ( 'Key plugin, no context selected', () => {
+            const res = new Promise ( ( resolve ) => {
+                        short.enablePlugin ( pluginKey )
+                        const r = short.listShortcuts ( 'general' )
+                        expect ( r[0] ).to.equal ( 'KEY:A+SHIFT' ) // Shortcut name is recognized by plugin and is normalized
+                        resolve ('success')
+                })
+            return res
+    }) // test key plugin installed, no context selected
+
+
+
+test ( 'Key plugin with context selected', () => {
+            const res = new Promise ( (resolve) => {
+                        short.enablePlugin ( pluginKey )
+                        short.changeContext ( 'general' )
+                        const r = short.listShortcuts ('general')
+                        expect ( r[0] ).to.equal ( 'KEY:A+SHIFT' ) // Shortcut name is recognized by plugin and is normalized
+                        resolve ( 'success' )
+                    })
+            return res
+    }) // test key plugin installed with context selected
+
+
+
+test ( 'Simple shortcut', () => {
+            const res = new Promise ( (resolve) => {
+                                    short.enablePlugin ( pluginKey )
+                                    short.changeContext ()
+                                    short.changeContext ( 'general'  )
+                                    userEvent.keyboard ( '{Shift>}a</Shift>' )
+                                    expect ( a ).to.be.false
+                                    wait ( 1000 ) 
+                                       .then ( () => { // Default wait sequence timeout is 480 ms, but maxSequence is 1, so we don't need to wait for timeout
+                                                expect ( a ).to.be.true 
+                                                resolve ( 'success' )
+                                       })
+                            })
+            return res
+    }) // test simple shortcut
+
+
+
+test ( 'Call sequence shortcut', async () => {
+        let res = new Promise ( async (resolve) => {
+                            b = false
+                            short.enablePlugin ( pluginKey )
+                            short.changeContext ()
+                            short.changeContext ( 'extra' )
+                            await userEvent.keyboard ( 'proba' )
+                            expect ( b ).to.be.true
+                            resolve ( 'success' )
+                    })
+        return res
+    }) // test call sequence shortcut
+
+
+
+test ( 'Single mouse click', done => {
+        const res = new Promise ( async (resolve) => {
+                                expect ( a ).to.be.false
+                                expect ( b ).to.be.false
+                                short.enablePlugin ( pluginClick )
+                                
+                                short.load ({ 'extra' : { 
+                                                        ' cLIck  : left - 1 ' : () => a = true   // Check if spaces, letter case can break the shortcut recognition
+                                                    }
+                                        })
+                                short.changeContext ()
+                                short.changeContext ( 'extra' )
+                                wait ( 100 )
+                                   .then ( async () => {
+                                            // Default wait mouse timeout is 320 ms, but maxClicks is 1, so we don't need to wait for timeout
+                                            let loc = document.querySelector('#rspan')  || false 
+                                            if ( loc )   await userEvent.click ( loc )
+                                            expect ( a ).to.be.true 
+                                            resolve ( 'success' ) 
+                                        })
+                                
+                                
+                        })
+        return res
+    }) // test single mouse click
+
+
+
+test ( 'Double mouse click', () => {
+        let res = new Promise ( async (resolve) => {
+                                    expect ( a ).to.be.false
+                                    expect ( b ).to.be.false
+
+                                    short.enablePlugin ( pluginClick )
+                                    short.changeContext ( 'extra' )
+                                    short.load ({ // load will restart the selected context
+                                                    'extra' : {   // load will overwrite existing 'extra' context definition
+                                                                'click: left-2' : () => a = true
+                                                            } 
+                                                }) 
+                                    wait ( 350 )
+                                        .then ( async () => {   // Default wait mouse timeout is 320 ms
+                                            let loc = document.querySelector ( '#rspan' )  || false
+                                            // Third click is ignored. Max clicks according definition is 2.
+                                            if ( loc )   await userEvent.tripleClick ( loc )
+                                            expect ( a ).to.be.true
+                                            resolve ( 'success' )
+                                        })
+                    })
+        return res
+    }) // test double mouse click
+
+
+
+test ( 'Dependencies on shortcuts', () => {
+        const res = new Promise ( async (resolve) => {
+                            const task = askForPromise ();
+                            expect ( a ).to.be.false
+                            expect ( b ).to.be.false
+
+                            short.enablePlugin ( pluginClick )
+                            short.setDependencies ({ task })
+                            
+                            short.load ({   
+                                            'extra' : {   // load will overwrite existing 'extra' context definition
+                                                        'click: left-1' : ({dependencies}) => {
+                                                                                            const { task } = dependencies;
+                                                                                            expect ( task ).to.have.property ( 'done' )
+                                                                                            expect ( task ).to.have.property ( 'promise' )
+                                                                                            a = true
+                                                                                        }
+                                                    } 
+                                        }) // load will restart the selected context
+                            short.changeContext ( 'extra' )
+                            wait ( 350 )   // Default wait mouse timeout is 320 ms
+                                .then ( async () => {
+                                        let loc = document.querySelector ( '#rspan' )  || false
+                                        if ( loc )   await userEvent.click ( loc )
+                                        resolve ( 'success' )
+                                })
+                    }) // res promise
+        return res
+    }) // test dependencies on shortcuts
+
+
+
+test ( 'Emit custom event', () => {
+        const res = new Promise ( async (resolve) => {
+                                let result = null;
+                                short.changeContext ()
+                                short.enablePlugin ( pluginClick )
+                                const myAllContext = { 
+                                                        myAll: {
+                                                                'click : leff-1' : () =>  console.log ( 'nothing' )
+                                                                , 'yo' : ({msg}) => result = msg
+                                                            }}
+                                short.load ( myAllContext )
+                                short.changeContext ( 'myAll' )    
+                                short.emit ( 'yo', { context: short.getContext(), note: 'tt', type:'custom', msg:'hello' })
+                                expect ( result ).to.be.equal ( 'hello' )
+                                short.changeContext ( 'general' )
+                                short.unload ( 'myAll' )
+                                resolve ( 'success' )
+                        })
+        return res
+    }) // test emit custom event
+
+
+
+test ( 'List shortcuts', () => {
+        short.enablePlugin ( pluginKey )
+        let general =  short.listShortcuts ('general');
+        expect ( general ).to.be.an ( 'array' )
+        expect ( general ).to.have.lengthOf ( 1 )
+        expect ( general[0] ).to.be.equal ( 'KEY:A+SHIFT' )
+        
+        let fail = short.listShortcuts ( 'somethingNotExisting' );
+        expect ( fail ).to.be.null
+    
+        let all = short.listShortcuts ();
+        expect ( all ).to.be.an ( 'array' )
+        
+        expect ( all ).to.have.lengthOf ( 3 )
+        expect ( all[0] ).to.have.property ( 'context' )
+        expect ( all[0] ).to.have.property ( 'shortcuts' )
+        expect ( all[0].shortcuts ).to.be.an('array')
+        expect ( all[0].shortcuts ).to.have.lengthOf ( 1 )
+        expect ( all[0].shortcuts[0] ).to.be.equal ( 'KEY:A+SHIFT' )
+        expect ( all[0].context ).to.be.equal ( 'general' )
+    }) // test list shortcuts
+
+
+
+test ( 'Click on anchor', () => {
+        const res = new Promise ( async (resolve) => {
+                                // Click on anchor that don't have click-data attribute.
+                                let result = 'none';
+                                short.enablePlugin ( pluginClick )
+                                short.load ({ 'extra' : { 
+                                                        'click: 1 - left' : ({target, context, event }) => {   // Order of button name and number of click is not important
+                                                                    event.preventDefault ()
+                                                                    expect ( context ).to.be.equal ( 'extra' )
+                                                                    expect ( target.nodeName ).to.be.equal ( 'A' )
+                                                                    result = target.nodeName
+                                                                }
+                                                    } 
+                                        })
+                                short.changeContext ( 'extra' )
+                                wait ( 10 )
+                                    .then ( async () => {
+                                            let loc = document.querySelector ( '#anchor' )  || false;
+                                            if ( loc )   await userEvent.click ( loc )
+                                            expect ( result ).to.be.equal ( 'A' )  
+                                            short.changeContext ( 'general' )
+                                            resolve ( 'success' )
+                                        })
+                        })
+        return res
+    }) // test click on anchor
+
+}) // describe
+

package/test-components/Block.jsx

@@ -3,6 +3,8 @@ return <>
     <div className="block" data-click="red"><span id='rspan'>Red</span> </div>
     <button className="big-btn" data-click="mega">Mega button</button>
     <p>Some text with <a href="#" target="_blank">link <span id="anchor">in</span></a> it</p>
+    <p><input id="name" type="text" /></p>
+    <p><input type="text" id="age" /></p>
 </> 
 }
 

package/vitest-example/HelloWorld.js

@@ -0,0 +1,9 @@
+export default function HelloWorld({ name }) {
+  const parent = document.createElement('div')
+
+  const h1 = document.createElement('h1')
+  h1.textContent = 'Hello ' + name + '!'
+  parent.appendChild(h1)
+
+  return parent
+}

package/vitest-example/HelloWorld.test.js

@@ -0,0 +1,11 @@
+import { expect, test } from 'vitest'
+import { getByText } from '@testing-library/dom'
+import HelloWorld from './HelloWorld.js'
+
+test('renders name', () => {
+  const parent = HelloWorld({ name: 'Vitest' })
+  document.body.appendChild(parent)
+
+  const element = getByText(parent, 'Hello Vitest!')
+  expect(element).toBeInTheDocument()
+})

package/vitest.workspace.js

@@ -0,0 +1,19 @@
+import { defineWorkspace } from 'vitest/config'
+
+export default defineWorkspace([
+  // If you want to keep running your existing tests in Node.js, uncomment the next line.
+  // 'vite.config.js',
+  {
+    extends: 'vite.config.js',
+    test: {
+      environment: 'browser',
+      browser: {
+        enabled: true,
+        name: 'chromium',
+        provider: 'playwright',
+        // https://vitest.dev/guide/browser/playwright
+        configs: [],
+      },
+    },
+  },
+])

package/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

package/cypress/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/component-index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-    <!-- Used by Next.js to inject CSS. -->
-    <div id="__next_css__DO_NOT_USE__"></div>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>

package/cypress/support/component.js

@@ -1,27 +0,0 @@
-// ***********************************************************
-// This example support/component.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
-import { mount } from 'cypress/react18'
-
-Cypress.Commands.add('mount', mount)
-
-// Example use:
-// cy.mount(<MyComponent />)

package/cypress/support/e2e.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/e2e.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

package/cypress.config.js

@@ -1,10 +0,0 @@
-import { defineConfig } from "cypress";
-
-export default defineConfig({
-  component: {
-    devServer: {
-      framework: "react",
-      bundler: "vite",
-    },
-  },
-});