Merge pull request #47 from gaucho-labs/make-provide-hotkeys-reactive

gaucho-labs · Mar 11, 2024 · dcddac2 · dcddac2
2 parents bb3726a + afbec22
commit dcddac2
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 165 deletions.
diff --git a/README.md b/README.md
@@ -165,20 +165,35 @@ leptos_hotkeys = { version = "0.1.6", features = ["hydrate"] }
 
 We also other feature flags that enhance developer experience, to learn more read [feature-flags](#feature-flags).
 
-### Hotkey Provider
+### `provide_hotkeys_context()`
 
-Wrap your project with `<HotkeysProvider />`:
+Call `provide_hotkeys_context()` in the `App()` component. This will provide the `HotkeysContext` for the current reactive node and all of its descendents. 
+This function takes three parameters, the `node_ref`, a flag to disable blur events (*you should go `false`*), and a list of `initially_active_scopes`.
 
-```html
-view! {
-    <HotkeysProvider>
-        <Router>
-            <Routes>
-                <Route path="/" view=HomePage/>
-                <Route path="/:else" view=ErrorPage/>
-            </Routes>
-        </Router>
-    </HotkeysProvider>
+> [!NOTE]
+>
+> `provide_hotkeys_context()` returns a `HotkeysContext`. To learn more, see [HotkeysContext](#hotkeyscontext).
+
+```rust
+#[component]
+pub fn App() -> impl IntoView {
+    provide_meta_context();
+
+    let main_ref = create_node_ref::<html::Main>();
+    provide_hotkeys_context(main_ref, false, scopes!()); 
+
+    view! {
+        <HotkeysProvider>
+            <Router>
+                <main _ref=main_ref>  // <-- attach main ref here!
+                    <Routes>
+                        <Route path="/" view=HomePage/>
+                        <Route path="/:else" view=ErrorPage/>
+                    </Routes>
+                </main>
+            </Router>
+        </HotkeysProvider>
+    }
 }
 ```
 

diff --git a/src/hotkeys_provider.rs b/src/hotkeys_provider.rs
@@ -13,11 +13,12 @@ use wasm_bindgen::closure::Closure;
 #[cfg(any(feature = "hydrate", feature = "csr"))]
 use wasm_bindgen::JsCast;
 
+use crate::types::Hotkey;
 #[cfg(any(feature = "hydrate", feature = "csr"))]
 use web_sys::{EventTarget, KeyboardEvent};
 
 // Defining a hotkey context structure
-#[derive(Clone)]
+#[derive(Clone, Copy)]
 pub struct HotkeysContext {
     #[cfg(any(feature = "hydrate", feature = "csr"))]
     pub(crate) pressed_keys: RwSignal<HashMap<String, KeyboardEvent>>,
@@ -34,14 +35,13 @@ pub struct HotkeysContext {
 }
 
 pub fn provide_hotkeys_context<T>(
+    node_ref: NodeRef<T>,
     allow_blur_event: bool,
     initially_active_scopes: HashSet<String>,
-) -> NodeRef<T>
+) -> HotkeysContext
 where
     T: ElementDescriptor + 'static + Clone,
 {
-    let node_ref = create_node_ref::<T>();
-
     #[cfg(any(feature = "hydrate", feature = "csr"))]
     let active_ref_target: RwSignal<Option<EventTarget>> = RwSignal::new(None);
 
@@ -91,22 +91,6 @@ where
         })
     });
 
-    provide_context(HotkeysContext {
-        #[cfg(any(feature = "hydrate", feature = "csr"))]
-        pressed_keys,
-
-        #[cfg(any(feature = "hydrate", feature = "csr"))]
-        active_ref_target,
-
-        #[cfg(any(feature = "hydrate", feature = "csr"))]
-        set_ref_target,
-
-        active_scopes,
-        enable_scope,
-        disable_scope,
-        toggle_scope,
-    });
-
     #[cfg(feature = "debug")]
     if cfg!(any(feature = "hydrate", feature = "csr")) {
         create_effect(move |_| {
@@ -121,7 +105,7 @@ where
             if cfg!(feature = "debug") {
                 logging::log!("Window lost focus");
             }
-            pressed_keys.set(HashMap::new());
+            pressed_keys.set_untracked(HashMap::new());
         }) as Box<dyn Fn()>);
 
         let keydown_listener = Closure::wrap(Box::new(move |event: KeyboardEvent| {
@@ -176,7 +160,24 @@ where
         });
     });
 
-    node_ref
+    let hotkeys_context = HotkeysContext {
+        #[cfg(any(feature = "hydrate", feature = "csr"))]
+        pressed_keys,
+
+        #[cfg(any(feature = "hydrate", feature = "csr"))]
+        active_ref_target,
+
+        #[cfg(any(feature = "hydrate", feature = "csr"))]
+        set_ref_target,
+
+        active_scopes,
+        enable_scope,
+        disable_scope,
+        toggle_scope,
+    };
+
+    provide_context(hotkeys_context);
+    hotkeys_context
 }
 
 pub fn use_hotkeys_context() -> HotkeysContext {

diff --git a/src/macros.rs b/src/macros.rs
@@ -112,9 +112,10 @@ macro_rules! use_hotkeys {
 #[macro_export]
 macro_rules! use_hotkeys_ref {
 
-    (($key_combo:literal) => $($code:tt)*) => {
+    (($node_ref:expr, $key_combo:literal) => $($code:tt)*) => {
         {
             use_hotkeys_ref_scoped(
+                $node_ref,
                 $key_combo.to_string(),
                 Callback::new(
                 $($code)*
@@ -124,9 +125,10 @@ macro_rules! use_hotkeys_ref {
         }
     };
 
-    (($key_combo:expr) => $($code:tt)*) => {
+    (($node_ref:expr, $key_combo:expr) => $($code:tt)*) => {
         {
             use_hotkeys_ref_scoped(
+                $node_ref,
                 $key_combo.to_string(),
                 Callback::new(
                 $($code)*
@@ -136,9 +138,10 @@ macro_rules! use_hotkeys_ref {
         }
     };
 
-    (($key_combo:expr $(, $scopes:literal)*) => $($code:tt)*) => {
+    (($node_ref:expr, $key_combo:expr $(, $scopes:literal)*) => $($code:tt)*) => {
         {
             use_hotkeys_ref_scoped(
+                $node_ref,
                 $key_combo.to_string(),
                 Callback::new(
                     $($code)*
@@ -148,9 +151,10 @@ macro_rules! use_hotkeys_ref {
         }
     };
 
-    (($key_combo:literal $(, $scopes:literal)*) => $($code:tt)*) => {
+    (($node_ref:expr, $key_combo:literal $(, $scopes:literal)*) => $($code:tt)*) => {
         {
             use_hotkeys_ref_scoped(
+                $node_ref,
                 $key_combo.to_string(),
                 Callback::new(
                     $($code)*