improved docs

.github/workflows/ci.yml

@@ -47,6 +47,7 @@ jobs:
         run: |
           cd docs/book
           mdbook build
+          python3 post_build.py
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

.idea/leptos-use.iml

@@ -13,6 +13,9 @@
       <sourceFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/target" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
+      <excludeFolder url="file://$MODULE_DIR$/docs/book/book" />
+      <excludeFolder url="file://$MODULE_DIR$/examples/use_event_listener/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/dist" />
       <excludeFolder url="file://$MODULE_DIR$/examples/use_throttle_fn/target" />
     </content>
     <orderEntry type="inheritedJdk" />

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "leptos-use"
-version = "0.1.1"
+version = "0.1.2"
 edition = "2021"
 authors = ["Marc-Stefan Cassola"]
 categories = ["gui", "web-programming"]

docs/book/src/extract_doc_comment.py

@@ -1,4 +1,5 @@
 import sys
+import re
 
 
 def main():
@@ -23,6 +24,9 @@ def main():
                 return
 
 
+interal_doc_link_pattern = re.compile(r"\[`([^]]+)\`](?!\()")
+
+
 def process_line(line, name):
     stripped = line.strip()
     result = line
@@ -34,6 +38,12 @@ def process_line(line, name):
     <iframe class="demo" src="{name}/demo/index.html" width="100%" frameborder="0">
     </iframe>
 </div>'''
+
+    else:
+        result = re.sub(interal_doc_link_pattern,
+                        r"[`\1`](https://docs.rs/leptos-use/latest/leptos_use/fn.\1.html)",
+                        line)
+
     return result
 
 

examples/use_throttle_fn/src/main.rs

@@ -19,7 +19,7 @@ fn Demo(cx: Scope) -> impl IntoView {
         >
             "Smash me!"
         </button>
-        <p class="my-2"><small class="block">"Delay is set to 1000ms for this demo.."</small></p>
+        <p class="my-2"><small class="block">"Delay is set to 1000ms for this demo."</small></p>
         <p class="my-3">"Button clicked: " { click_count }</p>
         <p>"Event handler called: " { throttled_count }</p>
     }

examples/use_throttle_fn/style/output.css

@@ -516,21 +516,11 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -549,39 +539,11 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
-.bg-gray-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
 .bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
-.bg-gray-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.p-5 {
-  padding: 1.25rem;
-}
-
 .p-6 {
   padding: 1.5rem;
 }
@@ -596,8 +558,9 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.font-bold {
+.text-gray-300 {
-  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
 .text-white {
@@ -605,47 +568,7 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-gray-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
-.text-gray-200 {
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.hover\:bg-blue-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
-
-.hover\:bg-blue-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}

src/use_event_listener.rs

@@ -27,7 +27,7 @@ use wasm_bindgen::JsCast;
 /// }
 /// ```
 ///
-/// You can also pass a [`leptos::NodeRef`] as the event target, `use_event_listener` will unregister the previous event and register
+/// You can also pass a [`NodeRef`](https://docs.rs/leptos/latest/leptos/struct.NodeRef.html) as the event target, [`use_event_listener`] will unregister the previous event and register
 /// the new one when you change the target.
 ///
 /// ```
@@ -78,7 +78,8 @@ use wasm_bindgen::JsCast;
 ///
 /// Note if your components also run in SSR (Server Side Rendering), you might get errors
 /// because DOM APIs like document and window are not available outside of the browser.
-/// To avoid that you can put the logic inside a [`leptos::create_effect`] hook
+/// To avoid that you can put the logic inside a
+/// [`create_effect`](https://docs.rs/leptos/latest/leptos/fn.create_effect.html) hook
 /// which only runs client side.
 #[allow(unused_must_use)]
 pub fn use_event_listener<Ev, El, T, F>(

src/use_scroll.rs

@@ -1,17 +1,53 @@
 use crate::core::EventTargetMaybeSignal;
-use crate::use_event_listener;
 use leptos::*;
 
-// pub fn use_scroll<El, T, Fx, Fy>(
+#[allow(unused_variables)]
-//     cx: Scope,
+pub fn use_scroll<El, T, Fx, Fy>(
-//     element: El,
+    cx: Scope,
-//     options: UseScrollOptions,
+    element: El,
-// ) -> UseScrollReturn<Fx, Fy>
+    options: UseScrollOptions,
-// where
+) -> UseScrollReturn
-//     (Scope, El): Into<EventTargetMaybeSignal<T>>,
+where
-//     T: Into<web_sys::EventTarget> + Clone + 'static,
+    (Scope, El): Into<EventTargetMaybeSignal<T>>,
-// {
+    T: Into<web_sys::EventTarget> + Clone + 'static,
-// }
+    Fx: Fn(f64),
+    Fy: Fn(f64),
+{
+    // TODO : implement
+
+    let (x, set_x) = create_signal(cx, 0.0);
+    let (y, set_y) = create_signal(cx, 0.0);
+
+    let (is_scrolling, _) = create_signal(cx, false);
+    let (arrived_state, _) = create_signal(
+        cx,
+        Directions {
+            left: false,
+            right: false,
+            top: false,
+            bottom: false,
+        },
+    );
+    let (directions, _) = create_signal(
+        cx,
+        Directions {
+            left: false,
+            right: false,
+            top: false,
+            bottom: false,
+        },
+    );
+
+    UseScrollReturn {
+        x: x.into(),
+        set_x: Box::new(move |x| set_x.set(x)),
+        y: y.into(),
+        set_y: Box::new(move |y| set_y.set(y)),
+        is_scrolling: is_scrolling.into(),
+        arrived_state: arrived_state.into(),
+        directions: directions.into(),
+    }
+}
 
 /// Options for [`use_scroll`].
 #[derive(Default)]
@@ -47,15 +83,11 @@ pub enum ScrollBehavior {
     Smooth,
 }
 
-pub struct UseScrollReturn<Fx, Fy>
+pub struct UseScrollReturn {
-where
-    Fx: FnMut(f64),
-    Fy: FnMut(f64),
-{
     pub x: Signal<f64>,
-    pub set_x: Fx,
+    pub set_x: Box<dyn Fn(f64)>,
     pub y: Signal<f64>,
-    pub set_y: Fy,
+    pub set_y: Box<dyn Fn(f64)>,
     pub is_scrolling: Signal<bool>,
     pub arrived_state: Signal<Directions>,
     pub directions: Signal<Directions>,

src/use_throttle_fn.rs

@@ -12,7 +12,7 @@ pub use crate::utils::ThrottleOptions;
 ///
 /// ## Demo
 ///
-/// [Link to Demo](https://github.com/synphonyte/leptos-use/tree/main/examples/use_throttle_fn)
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/master/examples/use_throttle_fn)
 ///
 /// ## Usage
 ///

src/utils/filters.rs

@@ -1,6 +1,6 @@
 use js_sys::Date;
 use leptos::leptos_dom::helpers::TimeoutHandle;
-use leptos::{set_timeout_with_handle, MaybeSignal, Scope, SignalGetUntracked};
+use leptos::{set_timeout_with_handle, MaybeSignal, SignalGetUntracked};
 use std::cell::{Cell, RefCell};
 use std::cmp::max;
 use std::rc::Rc;
@@ -80,7 +80,7 @@ where
         let elapsed = Date::now() - last_exec.get();
 
         let last_val = Rc::clone(&last_value);
-        let mut invoke = move || {
+        let invoke = move || {
             let return_value = _invoke();
 
             let mut val_mut = last_val.borrow_mut();