@rocketc/react-use-shortcuts 0.0.1-alpha.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 heychenfq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,596 @@
+# @rocketc/react-use-shortcuts
+
+---
+
+Full React shortcut solution built on top of [`@rocketc/shortcuts`](../shortcuts/README.md).
+
+## Features
+
+- **React Hooks**: Use `useShortcut` hook to access shortcut APIs
+- **Context Provider**: `ReactShortcutProvider` for React context integration
+- **Strict/Loose mode**: Support both strict and loose matching modes
+- **Page scoped register**: Register shortcuts scoped to specific elements
+- **Dynamic register**: Register and unregister shortcuts at runtime
+- **Dynamic enable/disable**: Enable or disable registered shortcuts dynamically
+- **Flexible key combinations**: Support complex modifier and normal key combinations
+- **Use modern browser API**: Uses modern browser APIs (`KeyboardEvent.code`)
+- **Full TypeScript support**: Complete type definitions included
+- **Shortcut validation**: Built-in validation for accelerator strings
+
+## Installation
+
+```bash
+# npm
+npm install @rocketc/react-use-shortcuts
+
+# yarn
+yarn add @rocketc/react-use-shortcuts
+
+# pnpm
+pnpm add @rocketc/react-use-shortcuts
+```
+
+**Note**: This package depends on [`@rocketc/shortcuts`](../shortcuts/README.md) for core functionality. It will be installed automatically.
+
+## Supported Keys
+
+See the [Supported Keys section](../shortcuts/README.md#supported-keys) in `@rocketc/shortcuts` documentation.
+
+## Quick Start
+
+```tsx
+import React, { useEffect } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <ReactShortcutProvider>
+      <Main />
+    </ReactShortcutProvider>
+  );
+}
+
+function Main() {
+  const { registerShortcut, unregisterShortcut } = useShortcut();
+
+  useEffect(() => {
+    registerShortcut('Ctrl+a', (event) => {
+      console.log('Ctrl+A pressed!');
+      event.preventDefault();
+    });
+
+    return () => {
+      unregisterShortcut('Ctrl+a');
+    };
+  }, []);
+
+  return <h1>Hello World!</h1>;
+}
+```
+
+## Examples
+
+### 1. Register Single Key Shortcut
+
+```tsx
+import React, { useEffect } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <ReactShortcutProvider>
+      <Main />
+    </ReactShortcutProvider>
+  );
+}
+
+function Main() {
+  const { registerShortcut, unregisterShortcut } = useShortcut();
+
+  useEffect(() => {
+    registerShortcut('a', (event) => {
+      event.preventDefault();
+      console.log('You pressed A');
+    });
+    return () => {
+      unregisterShortcut('a');
+    };
+  }, []);
+
+  return <h1>Hello World!</h1>;
+}
+```
+
+### 2. Register Shortcut with Modifiers
+
+```tsx
+import React, { useEffect } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <ReactShortcutProvider>
+      <Main />
+    </ReactShortcutProvider>
+  );
+}
+
+function Main() {
+  const { registerShortcut, unregisterShortcut } = useShortcut();
+
+  useEffect(() => {
+    registerShortcut('Ctrl+a', (event) => {
+      console.log('You pressed Ctrl and A');
+    });
+    return () => {
+      unregisterShortcut('Ctrl+a');
+    };
+  }, []);
+
+  return <h1>Hello World!</h1>;
+}
+```
+
+### 3. Register Scoped Shortcut
+
+```tsx
+import React, { useEffect, useRef } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <div id="root">
+      <ReactShortcutProvider options={{ auto: false }}>
+        <Main />
+      </ReactShortcutProvider>
+      <ReactShortcutProvider options={{ auto: false }}>
+        <Main />
+        <Main />
+      </ReactShortcutProvider>
+    </div>
+  );
+}
+
+function Main() {
+  const { registerShortcut, unregisterShortcut, attachElement } = useShortcut();
+
+  const root = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (root.current) {
+      return attachElement(root.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    registerShortcut('Ctrl+a', (event) => {
+      console.log('You pressed Ctrl and A');
+    });
+    return () => {
+      unregisterShortcut('Ctrl+a');
+    };
+  }, []);
+
+  return (
+    <h1 ref={root} tabIndex={-1}>
+      Hello World!
+    </h1>
+  );
+}
+```
+
+‼️ **Important**: Set element `tabIndex` property to `-1` to make the element focusable. Scoped shortcuts will not work without this.
+
+### 4. Loose Mode
+
+`@rocketc/react-use-shortcuts` works in strict mode by default (`strict: true`). Set `strict: false` to enable loose mode. This only affects the `getCurrentKeyPressed` API.
+
+```tsx
+import React, { useEffect } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <ReactShortcutProvider options={{ strict: false }}>
+      <Main />
+    </ReactShortcutProvider>
+  );
+}
+
+function Main() {
+  const { onKeyPressedChanged, getCurrentKeyPressed } = useShortcut();
+
+  useEffect(() => {
+    return onKeyPressedChanged((event) => {
+      // If you pressed ControlLeft and A:
+      // - strict mode: prints 'ControlLeft+A'
+      // - loose mode: prints 'Ctrl+A'
+      console.log(getCurrentKeyPressed());
+      // event.detail indicates the event type: 'keydown' or 'keyup'
+      console.log('Event type:', event.detail);
+    });
+  }, []);
+
+  return <h1>Hello World!</h1>;
+}
+```
+
+### 5. Dynamic Enable/Disable Shortcut
+
+```tsx
+import React, { useEffect, useCallback, useState } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <ReactShortcutProvider>
+      <Main />
+    </ReactShortcutProvider>
+  );
+}
+
+function Main() {
+  const {
+    registerShortcut,
+    unregisterShortcut,
+    enableShortcut,
+    disableShortcut,
+  } = useShortcut();
+  const [enable, setEnable] = useState<boolean>(true);
+
+  const handleClick = useCallback(() => {
+    setEnable((prev) => {
+      if (prev) {
+        disableShortcut('Ctrl+a');
+      } else {
+        enableShortcut('Ctrl+a');
+      }
+      return !prev;
+    });
+  }, []);
+
+  useEffect(() => {
+    registerShortcut('Ctrl+a', (event) => {
+      console.log('You pressed Control and A');
+    });
+    return () => {
+      unregisterShortcut('Ctrl+a');
+    };
+  }, []);
+
+  return <button onClick={handleClick}>{enable ? 'disable' : 'enable'}</button>;
+}
+```
+
+### 6. Multiple Callbacks for the Same Shortcut
+
+You can register multiple callbacks for the same accelerator and manage them individually:
+
+```tsx
+import React, { useEffect, useCallback } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <ReactShortcutProvider>
+      <Main />
+    </ReactShortcutProvider>
+  );
+}
+
+function Main() {
+  const {
+    registerShortcut,
+    unregisterShortcut,
+    enableShortcut,
+    disableShortcut,
+  } = useShortcut();
+
+  useEffect(() => {
+    const handler1 = () => console.log('Handler 1');
+    const handler2 = () => console.log('Handler 2');
+
+    // Register multiple handlers for the same shortcut
+    registerShortcut('Ctrl+a', handler1);
+    registerShortcut('Ctrl+a', handler2);
+
+    // Disable only handler1
+    disableShortcut('Ctrl+a', handler1);
+
+    // Enable handler1 again
+    enableShortcut('Ctrl+a', handler1);
+
+    // Unregister only handler1
+    unregisterShortcut('Ctrl+a', handler1);
+
+    return () => {
+      // Unregister all handlers for Ctrl+a
+      unregisterShortcut('Ctrl+a');
+    };
+  }, []);
+
+  return <h1>Hello World!</h1>;
+}
+```
+
+### 7. Custom Event Filter
+
+The default filter automatically filters out:
+
+- `event.repeat` (key repeat events)
+- `event.isComposing` (IME composition events, e.g., when typing Chinese/Japanese/Korean)
+- Events from `INPUT`, `TEXTAREA`, `SELECT` elements
+- Events from `contentEditable` elements
+
+You can provide a custom filter to override this behavior:
+
+```tsx
+import React, { useEffect } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <ReactShortcutProvider
+      options={{
+        filter: (event) => (event.target as HTMLElement)?.tagName !== 'INPUT',
+      }}
+    >
+      <Main />
+    </ReactShortcutProvider>
+  );
+}
+
+function Main() {
+  const { registerShortcut, unregisterShortcut } = useShortcut();
+
+  useEffect(() => {
+    registerShortcut('Ctrl+a', (event) => {
+      console.log('You pressed Control and A');
+    });
+    return () => {
+      unregisterShortcut('Ctrl+a');
+    };
+  }, []);
+
+  return (
+    <div>
+      <input />
+    </div>
+  );
+}
+```
+
+### 8. Custom Key Aliases
+
+You can define custom key name aliases to use in your shortcuts:
+
+```tsx
+import React, { useEffect } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <ReactShortcutProvider
+      options={{
+        alias: {
+          Save: 'Ctrl',
+          I: 'i',
+        },
+      }}
+    >
+      <Main />
+    </ReactShortcutProvider>
+  );
+}
+
+function Main() {
+  const { registerShortcut, unregisterShortcut } = useShortcut();
+
+  useEffect(() => {
+    // Use the custom alias 'Save' instead of 'Ctrl'
+    registerShortcut('Save+s', () => {
+      console.log('Save shortcut triggered');
+    });
+
+    return () => {
+      unregisterShortcut('Save+s');
+    };
+  }, []);
+
+  return <h1>Hello World!</h1>;
+}
+```
+
+### 9. Custom Debug Function
+
+You can provide a custom debug function instead of using the default debug logger:
+
+```tsx
+import React, { useEffect } from 'react';
+import {
+  ReactShortcutProvider,
+  useShortcut,
+} from '@rocketc/react-use-shortcuts';
+
+function App() {
+  return (
+    <ReactShortcutProvider
+      options={{
+        debug: (...args) => {
+          console.log('[Shortcut Debug]', ...args);
+        },
+      }}
+    >
+      <Main />
+    </ReactShortcutProvider>
+  );
+}
+
+function Main() {
+  const { registerShortcut, unregisterShortcut } = useShortcut();
+
+  useEffect(() => {
+    registerShortcut('Ctrl+a', () => {
+      console.log('You pressed Control and A');
+    });
+    return () => {
+      unregisterShortcut('Ctrl+a');
+    };
+  }, []);
+
+  return <h1>Hello World!</h1>;
+}
+```
+
+## API Reference
+
+### `ReactShortcutProvider`
+
+React Context Provider component. Wrap your app or component tree with this provider.
+
+**Props:**
+
+```typescript
+interface ReactShortcutProviderProps {
+  options?: ReactShortcutOptions;
+  children?: ReactNode;
+}
+
+interface ReactShortcutOptions {
+  strict?: boolean; // Default: false (strict mode by default)
+  debug?: boolean | ((...args: any[]) => void); // Default: false
+  auto?: boolean; // Default: true
+  filter?: Filter;
+  alias?: Record<string, string>;
+  separator?: string; // Default: '+'
+}
+```
+
+### `useShortcut`
+
+React Hook to access shortcut APIs.
+
+**Returns:**
+
+```typescript
+interface ReactShortcutContextValue {
+  registerShortcut(
+    accelerator: Accelerator,
+    callback: KeyboardEventListener,
+  ): boolean;
+  unregisterShortcut(
+    accelerator: Accelerator,
+    cb?: KeyboardEventListener,
+  ): boolean;
+  enableShortcut(accelerator: Accelerator, cb?: KeyboardEventListener): boolean;
+  disableShortcut(
+    accelerator: Accelerator,
+    cb?: KeyboardEventListener,
+  ): boolean;
+  isShortcutRegistered(accelerator: Accelerator): boolean;
+  getCurrentKeyPressed(): Accelerator;
+  onKeyPressedChanged(listener: KeyPressedChangedEventListener): Dispose;
+  attachElement(ele: Window | HTMLElement): Dispose;
+  getOptions(): ReactShortcutOptions;
+  getShortcutRegisters(accelerator?: Accelerator): Array<ShortcutRegister>;
+}
+```
+
+### `acceleratorParser`
+
+Utility object for parsing and validating accelerator strings. Re-exported from `@rocketc/shortcuts`.
+
+```tsx
+import { acceleratorParser } from '@rocketc/react-use-shortcuts';
+
+// Validate accelerator
+const isValid = acceleratorParser.validate('Ctrl+a');
+
+// Convert to loose mode
+const loose = acceleratorParser.convertAcceleratorToLooseMode('ControlLeft+a');
+
+// Parse accelerator
+const parsed = acceleratorParser.parse('Ctrl+Shift+a');
+console.log(parsed); // ['Ctrl', 'Shift', 'a']
+
+// Check if key code name is supported
+const isSupported = acceleratorParser.isKeyCodeNameSupported('Ctrl');
+console.log(isSupported); // true
+
+// Check if accelerators match
+const isMatched = acceleratorParser.isAcceleratorMatched(
+  'Ctrl+a',
+  'ControlLeft+KeyA',
+);
+console.log(isMatched); // true
+
+// Get default separator
+const separator = acceleratorParser.defaultSeparator;
+console.log(separator); // '+'
+```
+
+For complete API documentation, see [`@rocketc/shortcuts`](../shortcuts/README.md#api-reference).
+
+## Shortcut Match Rules
+
+See the [Shortcut Match Rules section](../shortcuts/README.md#shortcut-match-rules) in `@rocketc/shortcuts` documentation.
+
+## Browser Compatibility
+
+- Chrome ≥ 48
+- Firefox ≥ 38
+- Safari ≥ 10.1
+- Edge ≥ 79
+
+## Core Library
+
+This package is built on top of [`@rocketc/shortcuts`](../shortcuts/README.md), which provides the core shortcut functionality without React dependencies. If you need to use shortcuts in a non-React environment, use `@rocketc/shortcuts` directly.
+
+## Alternatives
+
+- [react-hotkeys-hook](https://www.npmjs.com/package/react-hotkeys-hook)
+- [react-hot-keys](https://www.npmjs.com/package/react-hot-keys)
+
+## Comparisons
+
+| **Features**                               | **@rocketc/react-use-shortcuts** | **react-hotkeys-hook** | **react-hot-keys** |
+| ------------------------------------------ | -------------------------------- | ---------------------- | ------------------ |
+| Dynamic register                           | ✅                               | ❌                     | ❌                 |
+| Page scoped register                       | ✅                               | ✅                     | ❌                 |
+| Strict/Loose mode                          | ✅                               | ❌                     | ❌                 |
+| Dynamic enable/disable shortcut registered | ✅                               | ✅                     | ❌                 |
+| Normal key combinations                    | ❌                               | ✅                     | ✅                 |
+| Namespace                                  | ❌                               | ❌                     | ✅                 |
+| Shortcuts validation                       | ✅                               | ❌                     | ❌                 |
+| Used React ≤ 18.0.0                        | ❌                               | ❌                     | ✅                 |
+
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import { Accelerator } from '@rocketc/shortcuts';
+import { default as default_2 } from 'react';
+import { Dispose } from '@rocketc/shortcuts';
+import { Filter } from '@rocketc/shortcuts';
+import { KeyboardEventListener } from '@rocketc/shortcuts';
+import { KeyPressedChangedEventListener } from '@rocketc/shortcuts';
+import { PropsWithChildren } from 'react';
+import { ShortcutRegister } from '@rocketc/shortcuts';
+
+declare interface ReactShortcutContextValue {
+    registerShortcut(accelerator: Accelerator, callback: KeyboardEventListener): boolean;
+    unregisterShortcut(accelerator: Accelerator, cb?: KeyboardEventListener): boolean;
+    enableShortcut(accelerator: Accelerator, cb?: KeyboardEventListener): boolean;
+    disableShortcut(accelerator: Accelerator, cb?: KeyboardEventListener): boolean;
+    isShortcutRegistered(accelerator: Accelerator): boolean;
+    getCurrentKeyPressed(): Accelerator;
+    onKeyPressedChanged(listener: KeyPressedChangedEventListener): Dispose;
+    attachElement(ele: Window | HTMLElement): Dispose;
+    getOptions(): ReactShortcutOptions;
+    getShortcutRegisters(accelerator?: Accelerator): Array<ShortcutRegister>;
+}
+
+export declare interface ReactShortcutOptions {
+    separator?: string;
+    strict?: boolean;
+    debug?: boolean | ((...args: any[]) => void);
+    auto?: boolean;
+    filter?: Filter;
+    alias?: Record<string, string>;
+}
+
+export declare const ReactShortcutProvider: {
+    (props: ReactShortcutProviderProps): default_2.JSX.Element;
+    displayName: string;
+};
+
+export declare type ReactShortcutProviderProps = PropsWithChildren<{
+    options?: ReactShortcutOptions;
+}>;
+
+export declare const useShortcut: () => ReactShortcutContextValue;
+
+
+export * from "@rocketc/shortcuts";
+
+export { }

package/dist/index.js

@@ -0,0 +1,145 @@
+import React, { createContext, useRef, useMemo, useCallback, useEffect, useContext } from "react";
+import { ShortcutRegistry } from "@rocketc/shortcuts";
+export * from "@rocketc/shortcuts";
+const defaultShortcutRegistry = new ShortcutRegistry({
+  strict: false,
+  // Default to loose mode
+  debug: false
+});
+let autoWindowDispose = null;
+if (typeof window !== "undefined") {
+  autoWindowDispose = defaultShortcutRegistry.attachElement(window);
+}
+const createDefaultContextValue = () => {
+  return {
+    registerShortcut: defaultShortcutRegistry.registerShortcut.bind(
+      defaultShortcutRegistry
+    ),
+    unregisterShortcut: defaultShortcutRegistry.unregisterShortcut.bind(
+      defaultShortcutRegistry
+    ),
+    enableShortcut: defaultShortcutRegistry.enableShortcut.bind(
+      defaultShortcutRegistry
+    ),
+    disableShortcut: defaultShortcutRegistry.disableShortcut.bind(
+      defaultShortcutRegistry
+    ),
+    isShortcutRegistered: defaultShortcutRegistry.isShortcutRegistered.bind(
+      defaultShortcutRegistry
+    ),
+    getCurrentKeyPressed: defaultShortcutRegistry.getCurrentKeyPressed.bind(
+      defaultShortcutRegistry
+    ),
+    onKeyPressedChanged: defaultShortcutRegistry.onKeyPressedChanged.bind(
+      defaultShortcutRegistry
+    ),
+    attachElement: (ele) => {
+      return defaultShortcutRegistry.attachElement(ele);
+    },
+    getOptions: () => {
+      const options = defaultShortcutRegistry.getOptions();
+      return {
+        strict: options.strict ?? false,
+        debug: options.debug ?? false,
+        auto: autoWindowDispose !== null,
+        filter: options.filter,
+        alias: options.alias,
+        separator: options.separator
+      };
+    },
+    getShortcutRegisters: defaultShortcutRegistry.getShortcutRegisters.bind(
+      defaultShortcutRegistry
+    )
+  };
+};
+const ReactShortcutContext = createContext(
+  createDefaultContextValue()
+);
+const ReactShortcutProvider = function ReactShortcutProvider2(props) {
+  const {
+    children,
+    options: {
+      strict = false,
+      debug = false,
+      auto = true,
+      filter,
+      separator,
+      alias
+    } = {}
+  } = props;
+  const autoRef = useRef(auto);
+  autoRef.current = auto;
+  const shortcutRegistry = useRef(
+    new ShortcutRegistry({ strict, debug, filter, alias })
+  );
+  const staticsContextValue = useMemo(() => {
+    return {
+      getOptions: shortcutRegistry.current.getOptions.bind(
+        shortcutRegistry.current
+      ),
+      getShortcutRegisters: shortcutRegistry.current.getShortcutRegisters.bind(
+        shortcutRegistry.current
+      ),
+      registerShortcut: shortcutRegistry.current.registerShortcut.bind(
+        shortcutRegistry.current
+      ),
+      unregisterShortcut: shortcutRegistry.current.unregisterShortcut.bind(
+        shortcutRegistry.current
+      ),
+      enableShortcut: shortcutRegistry.current.enableShortcut.bind(
+        shortcutRegistry.current
+      ),
+      disableShortcut: shortcutRegistry.current.disableShortcut.bind(
+        shortcutRegistry.current
+      ),
+      isShortcutRegistered: shortcutRegistry.current.isShortcutRegistered.bind(
+        shortcutRegistry.current
+      ),
+      getCurrentKeyPressed: shortcutRegistry.current.getCurrentKeyPressed.bind(
+        shortcutRegistry.current
+      ),
+      onKeyPressedChanged: shortcutRegistry.current.onKeyPressedChanged.bind(
+        shortcutRegistry.current
+      )
+    };
+  }, []);
+  const attachElement = useCallback((ele) => {
+    if (autoRef.current) {
+      throw new Error("attachElement is not supported when auto is true");
+    }
+    return shortcutRegistry.current.attachElement(ele);
+  }, []);
+  useEffect(() => {
+    if (auto) {
+      return shortcutRegistry.current.attachElement(window);
+    }
+  }, [auto]);
+  useEffect(() => {
+    shortcutRegistry.current.setOptions({
+      strict,
+      debug,
+      filter,
+      separator,
+      alias
+    });
+  }, [strict, debug, filter, separator, alias]);
+  return /* @__PURE__ */ React.createElement(
+    ReactShortcutContext.Provider,
+    {
+      value: {
+        ...staticsContextValue,
+        attachElement
+      }
+    },
+    children
+  );
+};
+ReactShortcutProvider.displayName = "ReactShortcutProvider";
+const useShortcut = () => {
+  return useContext(ReactShortcutContext);
+};
+export {
+  ReactShortcutProvider,
+  useShortcut
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/shortcut-context.ts","../src/shortcut-provider.tsx","../src/use-shortcut.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { ShortcutRegistry } from '@rocketc/shortcuts';\nimport type { ReactShortcutOptions } from './shortcut-provider';\nimport type {\n  Accelerator,\n  ShortcutRegister,\n  KeyboardEventListener,\n  Dispose,\n  KeyPressedChangedEventListener,\n} from '@rocketc/shortcuts';\n\nexport interface ReactShortcutContextValue {\n  registerShortcut(\n    accelerator: Accelerator,\n    callback: KeyboardEventListener,\n  ): boolean;\n  unregisterShortcut(\n    accelerator: Accelerator,\n    cb?: KeyboardEventListener,\n  ): boolean;\n  enableShortcut(accelerator: Accelerator, cb?: KeyboardEventListener): boolean;\n  disableShortcut(\n    accelerator: Accelerator,\n    cb?: KeyboardEventListener,\n  ): boolean;\n  isShortcutRegistered(accelerator: Accelerator): boolean;\n  getCurrentKeyPressed(): Accelerator;\n  onKeyPressedChanged(listener: KeyPressedChangedEventListener): Dispose;\n  attachElement(ele: Window | HTMLElement): Dispose;\n  getOptions(): ReactShortcutOptions;\n  getShortcutRegisters(accelerator?: Accelerator): Array<ShortcutRegister>;\n}\n\n// Create a default ShortcutRegistry instance for use without Provider\nconst defaultShortcutRegistry = new ShortcutRegistry({\n  strict: false, // Default to loose mode\n  debug: false,\n});\n\n// Track the dispose function for auto-attached window\n// Since attachElement returns different dispose functions each time,\n// we only track the one created by auto option\nlet autoWindowDispose: Dispose | null = null;\n\n// Auto-attach to window by default\nif (typeof window !== 'undefined') {\n  autoWindowDispose = defaultShortcutRegistry.attachElement(window);\n}\n\n// Create default context value\nconst createDefaultContextValue = (): ReactShortcutContextValue => {\n  return {\n    registerShortcut: defaultShortcutRegistry.registerShortcut.bind(\n      defaultShortcutRegistry,\n    ),\n    unregisterShortcut: defaultShortcutRegistry.unregisterShortcut.bind(\n      defaultShortcutRegistry,\n    ),\n    enableShortcut: defaultShortcutRegistry.enableShortcut.bind(\n      defaultShortcutRegistry,\n    ),\n    disableShortcut: defaultShortcutRegistry.disableShortcut.bind(\n      defaultShortcutRegistry,\n    ),\n    isShortcutRegistered: defaultShortcutRegistry.isShortcutRegistered.bind(\n      defaultShortcutRegistry,\n    ),\n    getCurrentKeyPressed: defaultShortcutRegistry.getCurrentKeyPressed.bind(\n      defaultShortcutRegistry,\n    ),\n    onKeyPressedChanged: defaultShortcutRegistry.onKeyPressedChanged.bind(\n      defaultShortcutRegistry,\n    ),\n    attachElement: (ele: Window | HTMLElement) => {\n      // Simply delegate to the registry\n      // The registry handles reference counting internally\n      return defaultShortcutRegistry.attachElement(ele);\n    },\n    getOptions: () => {\n      const options = defaultShortcutRegistry.getOptions();\n      return {\n        strict: options.strict ?? false,\n        debug: options.debug ?? false,\n        auto: autoWindowDispose !== null,\n        filter: options.filter,\n        alias: options.alias,\n        separator: options.separator,\n      };\n    },\n    getShortcutRegisters: defaultShortcutRegistry.getShortcutRegisters.bind(\n      defaultShortcutRegistry,\n    ),\n  };\n};\n\nexport const ReactShortcutContext = createContext<ReactShortcutContextValue>(\n  createDefaultContextValue(),\n);\n","/* eslint-disable react-hooks/refs */\nimport React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useCallback,\n  type PropsWithChildren,\n} from 'react';\nimport {\n  ReactShortcutContext,\n  type ReactShortcutContextValue,\n} from './shortcut-context';\nimport { ShortcutRegistry, type Filter } from '@rocketc/shortcuts';\n\nexport interface ReactShortcutOptions {\n  separator?: string;\n  strict?: boolean;\n  debug?: boolean | ((...args: any[]) => void);\n  auto?: boolean;\n  filter?: Filter;\n  alias?: Record<string, string>;\n}\n\nexport type ReactShortcutProviderProps = PropsWithChildren<{\n  options?: ReactShortcutOptions;\n}>;\n\nconst ReactShortcutProvider = function ReactShortcutProvider(\n  props: ReactShortcutProviderProps,\n) {\n  const {\n    children,\n    options: {\n      strict = false,\n      debug = false,\n      auto = true,\n      filter,\n      separator,\n      alias,\n    } = {},\n  } = props;\n\n  const autoRef = useRef(auto);\n  autoRef.current = auto;\n\n  const shortcutRegistry = useRef<ShortcutRegistry>(\n    new ShortcutRegistry({ strict, debug, filter, alias }),\n  );\n\n  const staticsContextValue = useMemo<\n    Omit<ReactShortcutContextValue, 'attachElement'>\n  >(() => {\n    return {\n      getOptions: shortcutRegistry.current.getOptions.bind(\n        shortcutRegistry.current,\n      ),\n      getShortcutRegisters: shortcutRegistry.current.getShortcutRegisters.bind(\n        shortcutRegistry.current,\n      ),\n      registerShortcut: shortcutRegistry.current.registerShortcut.bind(\n        shortcutRegistry.current,\n      ),\n      unregisterShortcut: shortcutRegistry.current.unregisterShortcut.bind(\n        shortcutRegistry.current,\n      ),\n      enableShortcut: shortcutRegistry.current.enableShortcut.bind(\n        shortcutRegistry.current,\n      ),\n      disableShortcut: shortcutRegistry.current.disableShortcut.bind(\n        shortcutRegistry.current,\n      ),\n      isShortcutRegistered: shortcutRegistry.current.isShortcutRegistered.bind(\n        shortcutRegistry.current,\n      ),\n      getCurrentKeyPressed: shortcutRegistry.current.getCurrentKeyPressed.bind(\n        shortcutRegistry.current,\n      ),\n      onKeyPressedChanged: shortcutRegistry.current.onKeyPressedChanged.bind(\n        shortcutRegistry.current,\n      ),\n    };\n  }, []);\n\n  const attachElement = useCallback((ele: Window | HTMLElement) => {\n    if (autoRef.current) {\n      throw new Error('attachElement is not supported when auto is true');\n    }\n    return shortcutRegistry.current.attachElement(ele);\n  }, []);\n\n  useEffect(() => {\n    if (auto) {\n      return shortcutRegistry.current.attachElement(window);\n    }\n  }, [auto]);\n\n  useEffect(() => {\n    shortcutRegistry.current.setOptions({\n      strict,\n      debug,\n      filter,\n      separator,\n      alias,\n    });\n  }, [strict, debug, filter, separator, alias]);\n\n  return (\n    <ReactShortcutContext.Provider\n      value={{\n        ...staticsContextValue,\n        attachElement,\n      }}\n    >\n      {children}\n    </ReactShortcutContext.Provider>\n  );\n};\n\nReactShortcutProvider.displayName = 'ReactShortcutProvider';\n\nexport default ReactShortcutProvider;\n","import { useContext } from 'react';\nimport {\n  ReactShortcutContext,\n  type ReactShortcutContextValue,\n} from './shortcut-context';\n\nconst useShortcut = () => {\n  return useContext<ReactShortcutContextValue>(ReactShortcutContext);\n};\n\nexport default useShortcut;\n"],"names":["ReactShortcutProvider"],"mappings":"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"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@rocketc/react-use-shortcuts",
+  "version": "0.0.1-alpha.10",
+  "type": "module",
+  "description": "a full react shortcut solution",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chenfq95/rocketc.git",
+    "directory": "packages/libs/react-use-shortcuts"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "shortcut"
+  ],
+  "author": "chenfq95 <chenfq95@foxmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@rocketc/shortcuts": "0.0.1-alpha.4"
+  }
+}