Introduce aliasing to fix key press count bug

RobertWHurst · Dec 20, 2023 · b78a7e5 · b78a7e5
1 parent f9af78c
commit b78a7e5
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 29 deletions.
diff --git a/packages/keystrokes/src/browser-bindings.ts b/packages/keystrokes/src/browser-bindings.ts
@@ -134,19 +134,11 @@ export const browserOnKeyPressedBinder: OnKeyEventBinder<
 
       handler({
         key: e.key,
+        aliases: [`@${e.code}`],
         originalEvent: e,
         composedPath: () => e.composedPath(),
         preventDefault: () => e.preventDefault(),
       })
-
-      if (e.code) {
-        handler({
-          key: `@${e.code}`,
-          originalEvent: e,
-          composedPath: () => e.composedPath(),
-          preventDefault: () => e.preventDefault(),
-        })
-      }
     }
     getDoc().addEventListener('keydown', handlerWrapper)
     return () => getDoc().removeEventListener('keydown', handlerWrapper)
@@ -164,19 +156,11 @@ export const browserOnKeyReleasedBinder: OnKeyEventBinder<
 
       handler({
         key: e.key,
+        aliases: [`@${e.code}`],
         originalEvent: e,
         composedPath: () => e.composedPath(),
         preventDefault: () => e.preventDefault(),
       })
-
-      if (e.code) {
-        handler({
-          key: `@${e.code}`,
-          originalEvent: e,
-          composedPath: () => e.composedPath(),
-          preventDefault: () => e.preventDefault(),
-        })
-      }
     }
     getDoc().addEventListener('keyup', handlerWrapper)
     return () => getDoc().removeEventListener('keyup', handlerWrapper)

diff --git a/packages/keystrokes/src/handler-state.ts b/packages/keystrokes/src/handler-state.ts
@@ -1,5 +1,6 @@
 export type KeyEvent<OriginalEvent, KeyEventProps> = KeyEventProps & {
   key: string
+  aliases?: string[]
   originalEvent?: OriginalEvent
 }
 

diff --git a/packages/keystrokes/src/key-combo-state.ts b/packages/keystrokes/src/key-combo-state.ts
@@ -180,14 +180,22 @@ export class KeyComboState<OriginalEvent, KeyEventProps, KeyComboEventProps> {
   executePressed(event: KeyEvent<OriginalEvent, KeyEventProps>) {
     if (!this._isPressedWithFinalUnit?.has(event.key)) return
     this._handlerState.executePressed(
-      this._wrapEvent(this._lastActiveKeyPresses, { key: event.key, event }),
+      this._wrapEvent(this._lastActiveKeyPresses, {
+        key: event.key,
+        aliases: new Set(event.aliases),
+        event,
+      }),
     )
   }
 
   executeReleased(event: KeyEvent<OriginalEvent, KeyEventProps>) {
     if (!this._isPressedWithFinalUnit?.has(event.key)) return
     this._handlerState.executeReleased(
-      this._wrapEvent(this._lastActiveKeyPresses, { key: event.key, event }),
+      this._wrapEvent(this._lastActiveKeyPresses, {
+        key: event.key,
+        aliases: new Set(event.aliases),
+        event,
+      }),
     )
     this._isPressedWithFinalUnit = null
   }
@@ -245,7 +253,10 @@ export class KeyComboState<OriginalEvent, KeyEventProps, KeyComboEventProps> {
           i < activeKeyIndex + previousUnit.length;
           i += 1
         ) {
-          if (activeKeyPresses[i].key === key) {
+          if (
+            activeKeyPresses[i].key === key ||
+            activeKeyPresses[i].aliases.has(key)
+          ) {
             keyFound = true
             break
           }
@@ -271,7 +282,10 @@ export class KeyComboState<OriginalEvent, KeyEventProps, KeyComboEventProps> {
           i < activeKeyPresses.length && i < activeKeyIndex + unit.length;
           i += 1
         ) {
-          if (activeKeyPresses[i].key === key) {
+          if (
+            activeKeyPresses[i].key === key ||
+            activeKeyPresses[i].aliases.has(key)
+          ) {
             keyFound = true
             break
           }

diff --git a/packages/keystrokes/src/keystrokes.ts b/packages/keystrokes/src/keystrokes.ts
@@ -27,6 +27,7 @@ export type KeyComboEventMapper<
 
 export type KeyPress<OriginalEvent, KeyEventProps> = {
   key: string
+  aliases: Set<string>
   event: KeyEvent<OriginalEvent, KeyEventProps>
 }
 
@@ -317,8 +318,12 @@ export class Keystrokes<
     event = { ...event, key: event.key.toLowerCase() }
 
     const remappedKey = this._keyRemap[event.key]
-    if (remappedKey) {
-      event.key = remappedKey
+    if (remappedKey) event.key = remappedKey
+    if (event.aliases) {
+      for (let i = 0; i < event.aliases.length; i += 1) {
+        const remappedAlias = this._keyRemap[event.aliases[i]]
+        if (remappedAlias) event.aliases[i] = remappedAlias
+      }
     }
 
     const keyPressHandlerStates = this._handlerStates[event.key]
@@ -332,6 +337,7 @@ export class Keystrokes<
     } else {
       const keypress = {
         key: event.key,
+        aliases: new Set(event.aliases),
         event,
       }
       this._activeKeyMap.set(event.key, keypress)
@@ -348,8 +354,12 @@ export class Keystrokes<
     event = { ...event, key: event.key.toLowerCase() }
 
     const remappedKey = this._keyRemap[event.key]
-    if (remappedKey) {
-      event.key = remappedKey
+    if (remappedKey) event.key = remappedKey
+    if (event.aliases) {
+      for (let i = 0; i < event.aliases.length; i += 1) {
+        const remappedAlias = this._keyRemap[event.aliases[i]]
+        if (remappedAlias) event.aliases[i] = remappedAlias
+      }
     }
 
     const keyPressHandlerStates = this._handlerStates[event.key]

diff --git a/packages/keystrokes/src/tests/browser-bindings.spec.ts b/packages/keystrokes/src/tests/browser-bindings.spec.ts
@@ -155,10 +155,11 @@ describe('browserOnKeyPressedBinder(handler) -> void', () => {
     handler(keydownEvent)
 
     expect(handlerStub).nthCalledWith(
-      2,
+      1,
       expect.objectContaining({
         composedPath: expect.any(Function),
-        key: '@KeyA',
+        key: 'a',
+        aliases: ['@KeyA'],
         originalEvent: keydownEvent,
       }),
     )
@@ -226,7 +227,7 @@ describe('browserOnKeyPressedBinder(handler) -> void', () => {
         }),
       )
       expect(keyPressedHandlerStub).nthCalledWith(
-        3,
+        2,
         expect.objectContaining({
           composedPath: expect.any(Function),
           key: 'a',