From 9a998b1dd4d3a266f72f6e40d62973d0f2e0a115 Mon Sep 17 00:00:00 2001 From: Maccesch Date: Thu, 27 Jul 2023 19:48:21 +0100 Subject: [PATCH] rustfmt for all examples --- examples/on_click_outside/src/main.rs | 95 +++++----- examples/signal_debounced/src/main.rs | 2 +- examples/signal_throttled/src/main.rs | 2 +- examples/ssr/src/app.rs | 16 +- examples/ssr/src/error_template.rs | 11 +- examples/use_abs/src/main.rs | 5 +- examples/use_active_element/src/main.rs | 14 +- examples/use_breakpoints/src/main.rs | 175 ++++++++++++------ examples/use_ceil/src/main.rs | 5 +- examples/use_color_mode/src/main.rs | 7 +- examples/use_css_var/src/main.rs | 13 +- examples/use_cycle_list/src/main.rs | 5 +- examples/use_debounce_fn/src/main.rs | 18 +- examples/use_document_visibility/src/main.rs | 5 +- examples/use_draggable/src/main.rs | 10 +- examples/use_drop_zone/src/main.rs | 48 +++-- examples/use_element_hover/src/main.rs | 7 +- examples/use_element_size/src/main.rs | 7 +- examples/use_element_visibility/src/main.rs | 13 +- examples/use_event_listener/src/main.rs | 23 ++- examples/use_favicon/src/main.rs | 100 +++++++--- examples/use_floor/src/main.rs | 5 +- .../use_intersection_observer/src/main.rs | 64 ++++--- examples/use_interval/src/main.rs | 7 +- examples/use_interval_fn/src/main.rs | 13 +- examples/use_intl_number_format/src/main.rs | 13 +- examples/use_media_query/src/main.rs | 7 +- examples/use_mouse/src/main.rs | 23 ++- examples/use_mutation_observer/src/main.rs | 8 +- examples/use_raf_fn/src/main.rs | 16 +- examples/use_resize_observer/src/main.rs | 7 +- examples/use_round/src/main.rs | 7 +- examples/use_scroll/src/main.rs | 86 ++++----- examples/use_storage/src/main.rs | 24 ++- examples/use_throttle_fn/src/main.rs | 18 +- examples/use_websocket/src/main.rs | 117 +++++++----- examples/use_window_focus/src/main.rs | 5 +- examples/use_window_scroll/src/main.rs | 18 +- examples/watch_debounced/src/main.rs | 9 +- examples/watch_pausable/src/main.rs | 17 +- examples/watch_throttled/src/main.rs | 9 +- .../src/main.ffizer.hbs.rs | 4 +- 42 files changed, 642 insertions(+), 416 deletions(-) diff --git a/examples/on_click_outside/src/main.rs b/examples/on_click_outside/src/main.rs index 6571e51..aad7606 100644 --- a/examples/on_click_outside/src/main.rs +++ b/examples/on_click_outside/src/main.rs @@ -10,58 +10,67 @@ fn Demo() -> impl IntoView { let _ = on_click_outside(modal_ref, move |_| set_show_modal.set(false)); - view! { + view! { +
- +

"Demo Modal"

"Click outside this modal to close it."

 - + } } @@ -70,6 +79,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { } + view! { } }) } diff --git a/examples/signal_debounced/src/main.rs b/examples/signal_debounced/src/main.rs index a947e2d..ae29c3d 100644 --- a/examples/signal_debounced/src/main.rs +++ b/examples/signal_debounced/src/main.rs @@ -14,6 +14,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { } + view! { } }) } diff --git a/examples/signal_throttled/src/main.rs b/examples/signal_throttled/src/main.rs index 0be60a7..2003396 100644 --- a/examples/signal_throttled/src/main.rs +++ b/examples/signal_throttled/src/main.rs @@ -14,6 +14,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { } + view! { } }) } diff --git a/examples/ssr/src/app.rs b/examples/ssr/src/app.rs index 018718e..55e0066 100644 --- a/examples/ssr/src/app.rs +++ b/examples/ssr/src/app.rs @@ -14,7 +14,6 @@ pub fn App() -> impl IntoView { provide_meta_context(); view! { - @@ -22,9 +21,7 @@ pub fn App() -> impl IntoView { <Router fallback=|| { let mut outside_errors = Errors::default(); outside_errors.insert_with_default_key(AppError::NotFound); - view! { <ErrorTemplate outside_errors/> - } - .into_view() + view! { <ErrorTemplate outside_errors/> }.into_view() }> <main> <Routes> @@ -67,10 +64,11 @@ fn HomePage() -> impl IntoView { ); debounced_fn(); - view! { <h1>"Leptos-Use SSR Example"</h1> - <button on:click=on_click>"Click Me: " { count }</button> - <p>"Locale \"zh-Hans-CN-u-nu-hanidec\": " { zh_count }</p> - <p>"Press any key: " { key }</p> - <p>"Debounced called: " { debounce_value }</p> + view! { + <h1>"Leptos-Use SSR Example"</h1> + <button on:click=on_click>"Click Me: " {count}</button> + <p>"Locale "zh-Hans-CN-u-nu-hanidec": " {zh_count}</p> + <p>"Press any key: " {key}</p> + <p>"Debounced called: " {debounce_value}</p> } } diff --git a/examples/ssr/src/error_template.rs b/examples/ssr/src/error_template.rs index 083aeab..25179a3 100644 --- a/examples/ssr/src/error_template.rs +++ b/examples/ssr/src/error_template.rs @@ -53,18 +53,19 @@ pub fn ErrorTemplate( } }} - view! { <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1> + view! { + <h1>{if errors.len() > 1 { "Errors" } else { "Error" }}</h1> <For // a function that returns the items we're iterating over; a signal is fine - each= move || {errors.clone().into_iter().enumerate()} + each=move || { errors.clone().into_iter().enumerate() } // a unique key for each item as a reference key=|(index, _error)| *index // renders each item to a view - view= move |error| { + view=move |error| { let error_string = error.1.to_string(); - let error_code= error.1.status_code(); + let error_code = error.1.status_code(); view! { - <h2>{error_code.to_string()}</h2> + <h2>{error_code.to_string()}</h2> <p>"Error: " {error_string}</p> } } diff --git a/examples/use_abs/src/main.rs b/examples/use_abs/src/main.rs index 2ae19df..b396c55 100644 --- a/examples/use_abs/src/main.rs +++ b/examples/use_abs/src/main.rs @@ -8,7 +8,8 @@ fn Demo() -> impl IntoView { let result: Signal<f64> = use_abs(value); - view! { <input + view! { + <input class="block" prop:value=move || value.get() on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap()) @@ -27,6 +28,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_active_element/src/main.rs b/examples/use_active_element/src/main.rs index 9849a28..6c84ab2 100644 --- a/examples/use_active_element/src/main.rs +++ b/examples/use_active_element/src/main.rs @@ -15,21 +15,21 @@ fn Demo() -> impl IntoView { ) }; - view! { <Note class="mb-3">"Select the inputs below to see the changes"</Note> + view! { + <Note class="mb-3">"Select the inputs below to see the changes"</Note> <div class="grid grid-cols-1 md:grid-cols-3 gap-2"> <For each=move || (1..7) key=|i| *i - view=move |i| view! { <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i /> + view=move |i| { + view! { <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i/> } } /> + </div> - <div class="mt-2"> - "Current Active Element: " - <span class="text-primary">{ key }</span> - </div> + <div class="mt-2">"Current Active Element: " <span class="text-primary">{key}</span></div> } } @@ -38,6 +38,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_breakpoints/src/main.rs b/examples/use_breakpoints/src/main.rs index 63cfc09..16aa495 100644 --- a/examples/use_breakpoints/src/main.rs +++ b/examples/use_breakpoints/src/main.rs @@ -24,118 +24,181 @@ fn Demo() -> impl IntoView { let label_classes = "justify-self-end".to_string(); let svg_classes = "align-middle ml-3 mr-1 opacity-60".to_string(); - view! { <div class="grid grid-cols-2 gap-x-4 gap-y-3"> + view! { + <div class="grid grid-cols-2 gap-x-4 gap-y-3"> <div class=label_classes.clone()>"Current breakpoints :"</div> - <code>{move || format!("{:?}", current.get()) }</code> + <code>{move || format!("{:?}", current.get())}</code> <div class=label_classes.clone()> <code class="font-bold">"xs"</code> - <small> - " (< " - { move || sm_width.to_string() } - "px)" - </small> + <small>" (< " {move || sm_width.to_string()} "px)"</small> - <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"/> - <path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" /> - <path d="M11 4h2" /> - <path d="M12 17v.01" /> + <svg + xmlns="http://www.w3.org/2000/svg" + class=svg_classes.clone() + width="24" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z"></path> + <path d="M11 4h2"></path> + <path d="M12 17v.01"></path> </svg> ":" </div> - <BooleanDisplay value=xs /> + <BooleanDisplay value=xs/> <div class=label_classes.clone()> <code class="font-bold">"xs"</code> - <small> - " (<= " - { move || sm_width.to_string() } - "px)" - </small> + <small>" (<= " {move || sm_width.to_string()} "px)"</small> - <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"/> - <path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" /> - <path d="M11 4h2" /> - <path d="M12 17v.01" /> + <svg + xmlns="http://www.w3.org/2000/svg" + class=svg_classes.clone() + width="24" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z"></path> + <path d="M11 4h2"></path> + <path d="M12 17v.01"></path> </svg> ":" </div> - <BooleanDisplay value=xse /> + <BooleanDisplay value=xse/> <div class=label_classes.clone()> <code class="font-bold">"sm"</code> - <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"/> - <path d="M3 6m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /> - <path d="M20 11v2" /> - <path d="M7 12h-.01" /> + <svg + xmlns="http://www.w3.org/2000/svg" + class=svg_classes.clone() + width="24" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M3 6m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path> + <path d="M20 11v2"></path> + <path d="M7 12h-.01"></path> </svg> ":" </div> - <BooleanDisplay value=sm /> + <BooleanDisplay value=sm/> <div class=label_classes.clone()> <code class="font-bold">"md"</code> - <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"/> - <path d="M5 4a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1v-16z" /> - <path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> + <svg + xmlns="http://www.w3.org/2000/svg" + class=svg_classes.clone() + width="24" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M5 4a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1v-16z"></path> + <path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path> </svg> ":" </div> - <BooleanDisplay value=md /> + <BooleanDisplay value=md/> <div class=label_classes.clone()> <code class="font-bold">"lg"</code> - <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"/> - <path d="M3 19l18 0" /> - <path d="M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z" /> + <svg + xmlns="http://www.w3.org/2000/svg" + class=svg_classes.clone() + width="24" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M3 19l18 0"></path> + <path d="M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"></path> </svg> ":" </div> - <BooleanDisplay value=lg /> + <BooleanDisplay value=lg/> <div class=label_classes.clone()> <code class="font-bold">"xl"</code> - <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"/> - <path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z" /> - <path d="M7 20h10" /> - <path d="M9 16v4" /> - <path d="M15 16v4" /> + <svg + xmlns="http://www.w3.org/2000/svg" + class=svg_classes.clone() + width="24" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z"></path> + <path d="M7 20h10"></path> + <path d="M9 16v4"></path> + <path d="M15 16v4"></path> </svg> ":" </div> - <BooleanDisplay value=xl /> + <BooleanDisplay value=xl/> <div class=label_classes.clone()> <code class="font-bold">"xxl"</code> - <svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"/> - <path d="M13 16h-9a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v5.5" /> - <path d="M7 20h6.5" /> - <path d="M9 16v4" /> - <path d="M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5" /> - <path d="M19 21v1m0 -8v1" /> + <svg + xmlns="http://www.w3.org/2000/svg" + class=svg_classes.clone() + width="24" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M13 16h-9a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v5.5"></path> + <path d="M7 20h6.5"></path> + <path d="M9 16v4"></path> + <path d="M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5"></path> + <path d="M19 21v1m0 -8v1"></path> </svg> ":" </div> - <BooleanDisplay value=xxl /> + <BooleanDisplay value=xxl/> </div> } } @@ -145,6 +208,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_ceil/src/main.rs b/examples/use_ceil/src/main.rs index 1eaada8..773150a 100644 --- a/examples/use_ceil/src/main.rs +++ b/examples/use_ceil/src/main.rs @@ -8,7 +8,8 @@ fn Demo() -> impl IntoView { let result: Signal<f64> = use_ceil(value); - view! { <input + view! { + <input class="block" prop:value=move || value.get() on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap()) @@ -27,6 +28,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_color_mode/src/main.rs b/examples/use_color_mode/src/main.rs index 7a7c2ce..ca6beb7 100644 --- a/examples/use_color_mode/src/main.rs +++ b/examples/use_color_mode/src/main.rs @@ -30,9 +30,8 @@ fn Demo() -> impl IntoView { UseCycleListOptions::default().initial_value(Some((mode, set_mode).into())), ); - view! { <button on:click=move |_| next()> - { move || format!("{}", state.get()) } - </button> + view! { + <button on:click=move |_| next()>{move || format!("{}", state.get())}</button> <Note>"Click to change the color mode"</Note> } } @@ -42,6 +41,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_css_var/src/main.rs b/examples/use_css_var/src/main.rs index 2388185..58ed393 100644 --- a/examples/use_css_var/src/main.rs +++ b/examples/use_css_var/src/main.rs @@ -33,16 +33,21 @@ fn Demo() -> impl IntoView { ) }; - view! { <div> + view! { + <div> <div node_ref=el style="--color: #7fa998; color: var(--color)"> - "Sample text, " {color} + "Sample text, " + {color} </div> <button on:click=switch_color>"Change color value"</button> </div> <div> <div node_ref=elv style=style class="mt-4"> - "Sample text, " {key} ": " {color_val} + "Sample text, " + {key} + ": " + {color_val} </div> <button on:click=change_var>"Change color variable"</button> </div> @@ -54,6 +59,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_cycle_list/src/main.rs b/examples/use_cycle_list/src/main.rs index c272078..4fcb600 100644 --- a/examples/use_cycle_list/src/main.rs +++ b/examples/use_cycle_list/src/main.rs @@ -10,7 +10,8 @@ fn Demo() -> impl IntoView { "Dog", "Cat", "Lizard", "Shark", "Whale", "Dolphin", "Octopus", "Seal", ]); - view! { <div> + view! { + <div> <div class="text-primary text-lg font-bold">{state}</div> <button on:click=move |_| { prev() }>"Prev"</button> <button on:click=move |_| { next() }>"Next"</button> @@ -23,6 +24,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_debounce_fn/src/main.rs b/examples/use_debounce_fn/src/main.rs index a2cb9f8..08d5dbf 100644 --- a/examples/use_debounce_fn/src/main.rs +++ b/examples/use_debounce_fn/src/main.rs @@ -13,17 +13,17 @@ fn Demo() -> impl IntoView { DebounceOptions::default().max_wait(Some(5000.0)), ); - view! { <button - on:click=move |_| { - set_click_count.set(click_count.get_untracked() + 1); - debounced_fn(); - } - > + view! { + <button on:click=move |_| { + set_click_count.set(click_count.get_untracked() + 1); + debounced_fn(); + }> + "Smash me!" </button> <Note>"Delay is set to 1000ms and max_wait is set to 5000ms for this demo."</Note> - <p>"Button clicked: " { click_count }</p> - <p>"Event handler called: " { debounced_count }</p> + <p>"Button clicked: " {click_count}</p> + <p>"Event handler called: " {debounced_count}</p> } } @@ -32,6 +32,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_document_visibility/src/main.rs b/examples/use_document_visibility/src/main.rs index 54b0e92..bb84247 100644 --- a/examples/use_document_visibility/src/main.rs +++ b/examples/use_document_visibility/src/main.rs @@ -30,8 +30,7 @@ fn Demo() -> impl IntoView { false, ); - view! { <div>{ message }</div> - } + view! { <div>{message}</div> } } fn main() { @@ -39,6 +38,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_draggable/src/main.rs b/examples/use_draggable/src/main.rs index ff1a082..9b9315f 100644 --- a/examples/use_draggable/src/main.rs +++ b/examples/use_draggable/src/main.rs @@ -20,7 +20,8 @@ fn Demo() -> impl IntoView { .prevent_default(true), ); - view! { <p class="italic op50 text-center"> + view! { + <p class="italic op50 text-center"> Check the floating box </p> <div @@ -30,7 +31,10 @@ fn Demo() -> impl IntoView { > "👋 Drag me!" <div class="text-sm opacity-50"> - I am at { move || x().round() }, { move || y().round() } + I am + {move || x().round()} + ) + {move || y().round()} </div> </div> } @@ -41,6 +45,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_drop_zone/src/main.rs b/examples/use_drop_zone/src/main.rs index 086acd5..67b8588 100644 --- a/examples/use_drop_zone/src/main.rs +++ b/examples/use_drop_zone/src/main.rs @@ -19,30 +19,52 @@ fn Demo() -> impl IntoView { .on_enter(move |_| set_dropped(false)), ); - view! { <div class="flex"> + view! { + <div class="flex"> <div class="w-full h-auto relative"> - <p>Drop files into dropZone</p> + <p> + Drop files into dropZone + </p> <img width="64" src="use_drop_zone/demo/img/leptos-use-logo.svg" alt="Drop me"/> <div node_ref=drop_zone_el class="flex flex-col w-full min-h-[200px] h-auto bg-gray-400/10 justify-center items-center pt-6" > <div> - is_over_drop_zone: <BooleanDisplay value=is_over_drop_zone /> + is_over_drop_zone: + <BooleanDisplay value=is_over_drop_zone/> </div> <div> - dropped: <BooleanDisplay value=dropped /> + dropped: + <BooleanDisplay value=dropped/> </div> <div class="flex flex-wrap justify-center items-center"> - <For each=files key=|f| f.name() view=move |file| { - view! { <div class="w-200px bg-black-200/10 ma-2 pa-6"> - <p>Name: {file.name()}</p> - <p>Size: {file.size()}</p> - <p>Type: {file.type_()}</p> - <p>Last modified: {file.last_modified()}</p> - </div> + <For + each=files + key=|f| f.name() + view=move |file| { + view! { + <div class="w-200px bg-black-200/10 ma-2 pa-6"> + <p> + Name: + {file.name()} + </p> + <p> + Size: + {file.size()} + </p> + <p> + Type: + {file.type_()} + </p> + <p> + Last modified: + {file.last_modified()} + </p> + </div> + } } - } /> + /> </div> </div> </div> @@ -55,6 +77,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_element_hover/src/main.rs b/examples/use_element_hover/src/main.rs index 5f3b9c2..a847134 100644 --- a/examples/use_element_hover/src/main.rs +++ b/examples/use_element_hover/src/main.rs @@ -14,7 +14,10 @@ fn Demo() -> impl IntoView { .delay_leave(600), ); - view! { <button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button> + view! { + <button node_ref=el> + {move || if is_hovered.get() { "Thank you!" } else { "Hover me" }} + </button> } } @@ -23,6 +26,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_element_size/src/main.rs b/examples/use_element_size/src/main.rs index 781c8b2..1986084 100644 --- a/examples/use_element_size/src/main.rs +++ b/examples/use_element_size/src/main.rs @@ -11,13 +11,14 @@ fn Demo() -> impl IntoView { let text = move || format!("width: {}\nheight: {}", width.get(), height.get()); - view! { <Note class="mb-2">"Resize the box to see changes"</Note> + view! { + <Note class="mb-2">"Resize the box to see changes"</Note> <textarea node_ref=el readonly class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10" prop:value=text - /> + ></textarea> } } @@ -26,6 +27,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_element_visibility/src/main.rs b/examples/use_element_visibility/src/main.rs index 9c88ac9..4e7eddf 100644 --- a/examples/use_element_visibility/src/main.rs +++ b/examples/use_element_visibility/src/main.rs @@ -9,7 +9,8 @@ fn Demo() -> impl IntoView { let is_visible = use_element_visibility(el); - view! { <div> + view! { + <div> <Note class="mb-4">"Info on the right bottom corner"</Note> <div node_ref=el class="max-w-lg relative area dark:bg-gray-800 shadow-lg z-60"> "Target Element (scroll down)" @@ -17,8 +18,12 @@ fn Demo() -> impl IntoView { </div> <div class="float m-5 area shadow-lg"> "Element " - <BooleanDisplay value=is_visible true_str="inside" false_str="outside" class="font-bold"/> - " the viewport" + <BooleanDisplay + value=is_visible + true_str="inside" + false_str="outside" + class="font-bold" + /> " the viewport" </div> } } @@ -28,6 +33,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_event_listener/src/main.rs b/examples/use_event_listener/src/main.rs index 77a0c36..067c17e 100644 --- a/examples/use_event_listener/src/main.rs +++ b/examples/use_event_listener/src/main.rs @@ -22,11 +22,13 @@ fn Demo() -> impl IntoView { let (cond, set_cond) = create_signal(true); - view! { <p>"Check in the dev tools console"</p> + view! { + <p>"Check in the dev tools console"</p> <p> <label> <input - type="checkbox" on:change=move |evt| set_cond.set(event_target_checked(&evt)) + type="checkbox" + on:change=move |evt| set_cond.set(event_target_checked(&evt)) prop:checked=move || cond.get() /> "Condition enabled" @@ -34,13 +36,17 @@ fn Demo() -> impl IntoView { </p> <Show when=move || cond.get() - fallback=move || view! { <a node_ref=element href="#"> - "Condition" - <b>" false "</b> - "[click me]" - </a> + fallback=move || { + view! { + <a node_ref=element href="#"> + "Condition" + <b>" false "</b> + "[click me]" + </a> + } } > + <a node_ref=element href="#"> "Condition " <b>"true"</b> @@ -55,7 +61,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to_body(|| { - view! { <Demo /> - } + view! { <Demo/> } }) } diff --git a/examples/use_favicon/src/main.rs b/examples/use_favicon/src/main.rs index 96d9e68..6e9775c 100644 --- a/examples/use_favicon/src/main.rs +++ b/examples/use_favicon/src/main.rs @@ -10,41 +10,87 @@ fn Demo() -> impl IntoView { let classes = "border border-solid border-b-4 rounded p-2 block border-gray-500/50 bg-[--bg] active:translate-y-1 active:border-b".to_string(); let img_classes = "block".to_string(); - view! { <p>"Click on an icon to change the favicon"</p> + view! { + <p>"Click on an icon to change the favicon"</p> <p class="flex gap-2"> - <a class=classes.clone() href="#" on:click=move |e| { - e.prevent_default(); - set_icon.set(Some("favicon-leptos.ico".into())); - }> - <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-leptos.ico" alt="favicon-red" /> + <a + class=classes.clone() + href="#" + on:click=move |e| { + e.prevent_default(); + set_icon.set(Some("favicon-leptos.ico".into())); + } + > + <img + class=img_classes.clone() + width="32" + src="use_favicon/demo/img/favicon-leptos.ico" + alt="favicon-red" + /> </a> - <a class=classes.clone() href="#" on:click=move |e| { - e.prevent_default(); - set_icon.set(Some("favicon-red.svg".into())); - }> - <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-red.svg" alt="favicon-red" /> + <a + class=classes.clone() + href="#" + on:click=move |e| { + e.prevent_default(); + set_icon.set(Some("favicon-red.svg".into())); + } + > + <img + class=img_classes.clone() + width="32" + src="use_favicon/demo/img/favicon-red.svg" + alt="favicon-red" + /> </a> - <a class=classes.clone() href="#" on:click=move |e| { - e.prevent_default(); - set_icon.set(Some("favicon-green.svg".into())); - }> - <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-green.svg" alt="favicon-green" /> + <a + class=classes.clone() + href="#" + on:click=move |e| { + e.prevent_default(); + set_icon.set(Some("favicon-green.svg".into())); + } + > + <img + class=img_classes.clone() + width="32" + src="use_favicon/demo/img/favicon-green.svg" + alt="favicon-green" + /> </a> - <a class=classes.clone() href="#" on:click=move |e| { - e.prevent_default(); - set_icon.set(Some("favicon-blue.svg".into())); - }> - <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-blue.svg" alt="favicon-blue" /> + <a + class=classes.clone() + href="#" + on:click=move |e| { + e.prevent_default(); + set_icon.set(Some("favicon-blue.svg".into())); + } + > + <img + class=img_classes.clone() + width="32" + src="use_favicon/demo/img/favicon-blue.svg" + alt="favicon-blue" + /> </a> - <a class=classes.clone() href="#" on:click=move |e| { - e.prevent_default(); - set_icon.set(Some("favicon-orange.svg".into())); - }> - <img class=img_classes width="32" src="use_favicon/demo/img/favicon-orange.svg" alt="favicon-orange" /> + <a + class=classes.clone() + href="#" + on:click=move |e| { + e.prevent_default(); + set_icon.set(Some("favicon-orange.svg".into())); + } + > + <img + class=img_classes + width="32" + src="use_favicon/demo/img/favicon-orange.svg" + alt="favicon-orange" + /> </a> </p> } @@ -55,6 +101,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_floor/src/main.rs b/examples/use_floor/src/main.rs index 17804bd..48b304d 100644 --- a/examples/use_floor/src/main.rs +++ b/examples/use_floor/src/main.rs @@ -8,7 +8,8 @@ fn Demo() -> impl IntoView { let result: Signal<f64> = use_floor(value); - view! { <input + view! { + <input class="block" prop:value=move || value.get() on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap()) @@ -27,6 +28,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_intersection_observer/src/main.rs b/examples/use_intersection_observer/src/main.rs index b82f922..aa69103 100644 --- a/examples/use_intersection_observer/src/main.rs +++ b/examples/use_intersection_observer/src/main.rs @@ -25,7 +25,8 @@ fn Demo() -> impl IntoView { UseIntersectionObserverOptions::default().root(Some(root)), ); - view! { <div class="text-center"> + view! { + <div class="text-center"> <label class="checkbox"> <input type="checkbox" @@ -39,6 +40,7 @@ fn Demo() -> impl IntoView { } } /> + <span>"Enabled"</span> </label> </div> @@ -52,34 +54,40 @@ fn Demo() -> impl IntoView { <div class="text-center"> "Element " - <BooleanDisplay value=is_visible true_str="inside" false_str="outside" class="font-bold"/> - " the viewport" + <BooleanDisplay + value=is_visible + true_str="inside" + false_str="outside" + class="font-bold" + /> " the viewport" </div> - <style>" -.root { - border: 2px dashed #ccc; - height: 200px; - margin: 2rem 1rem; - overflow-y: scroll; -} - -.notice { - text-align: center; - padding: 3em 0; - margin-bottom: 300px; - font-style: italic; - font-size: 1.8rem; - opacity: 0.8; -} - -.target { - border: 2px dashed var(--brand-color); - padding: 10px; - max-height: 150px; - margin: 0 2rem 400px; -} - "</style> + <style> + " + .root { + border: 2px dashed #ccc; + height: 200px; + margin: 2rem 1rem; + overflow-y: scroll; + } + + .notice { + text-align: center; + padding: 3em 0; + margin-bottom: 300px; + font-style: italic; + font-size: 1.8rem; + opacity: 0.8; + } + + .target { + border: 2px dashed var(--brand-color); + padding: 10px; + max-height: 150px; + margin: 0 2rem 400px; + } + " + </style> } } @@ -88,6 +96,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_interval/src/main.rs b/examples/use_interval/src/main.rs index 66afee3..f6dbfbd 100644 --- a/examples/use_interval/src/main.rs +++ b/examples/use_interval/src/main.rs @@ -6,8 +6,9 @@ use leptos_use::{use_interval, UseIntervalReturn}; fn Demo() -> impl IntoView { let UseIntervalReturn { counter, .. } = use_interval(200); - view! { <div> - <p>"Interval fired: " { counter }</p> + view! { + <div> + <p>"Interval fired: " {counter}</p> </div> } } @@ -17,6 +18,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_interval_fn/src/main.rs b/examples/use_interval_fn/src/main.rs index 59184a9..b46d655 100644 --- a/examples/use_interval_fn/src/main.rs +++ b/examples/use_interval_fn/src/main.rs @@ -34,7 +34,8 @@ fn Demo() -> impl IntoView { interval, ); - view! { <p>{move || word.get()}</p> + view! { + <p>{move || word.get()}</p> <p> "Interval:" <input @@ -48,15 +49,15 @@ fn Demo() -> impl IntoView { when=move || is_active.get() fallback=move || { let resume = resume.clone(); - view! { <button on:click=move |_| resume()>"Resume"</button> - } + view! { <button on:click=move |_| resume()>"Resume"</button> } } > + { let pause = pause.clone(); - view! { <button on:click=move |_| pause()>"Pause"</button> - } + view! { <button on:click=move |_| pause()>"Pause"</button> } } + </Show> } } @@ -66,6 +67,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_intl_number_format/src/main.rs b/examples/use_intl_number_format/src/main.rs index e9623df..db01751 100644 --- a/examples/use_intl_number_format/src/main.rs +++ b/examples/use_intl_number_format/src/main.rs @@ -29,7 +29,8 @@ fn Demo() -> impl IntoView { ); let in_num = in_nf.format::<f64>(number); - view! { <input + view! { + <input class="block" prop:value=number on:input=move |e| set_number(event_target_value(&e).parse().unwrap()) @@ -38,10 +39,10 @@ fn Demo() -> impl IntoView { max="1000000" step="0.01" /> - <p>"Number: " { number }</p> - <p>"German currency (EUR): " { de_num }</p> - <p>"Japanese currency (JPY): " { ja_num }</p> - <p>"Indian 3 max significant digits: " { in_num }</p> + <p>"Number: " {number}</p> + <p>"German currency (EUR): " {de_num}</p> + <p>"Japanese currency (JPY): " {ja_num}</p> + <p>"Indian 3 max significant digits: " {in_num}</p> } } @@ -50,6 +51,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_media_query/src/main.rs b/examples/use_media_query/src/main.rs index 75fd6c0..5a86e75 100644 --- a/examples/use_media_query/src/main.rs +++ b/examples/use_media_query/src/main.rs @@ -7,8 +7,9 @@ fn Demo() -> impl IntoView { let is_large_screen = use_media_query("(min-width: 1024px)"); let is_dark_preferred = use_media_query("(prefers-color-scheme: dark)"); - view! { <p>"Is large screen: " <BooleanDisplay value=is_large_screen /></p> - <p>"Is dark preferred: " <BooleanDisplay value=is_dark_preferred /></p> + view! { + <p>"Is large screen: " <BooleanDisplay value=is_large_screen/></p> + <p>"Is dark preferred: " <BooleanDisplay value=is_dark_preferred/></p> } } @@ -17,6 +18,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_mouse/src/main.rs b/examples/use_mouse/src/main.rs index d15df65..cb469f8 100644 --- a/examples/use_mouse/src/main.rs +++ b/examples/use_mouse/src/main.rs @@ -33,21 +33,32 @@ fn Demo() -> impl IntoView { .coord_type(UseMouseCoordType::Custom(Extractor)), ); - view! { <div node_ref=el> + view! { + <div node_ref=el> <p class="font-semibold">"Basic Usage"</p> <pre lang="yaml"> - { move || format!(r#" x: {} + {move || { + format!( + r#" x: {} y: {} source_type: {:?} -"#, mouse_default.x.get(), mouse_default.y.get(), mouse_default.source_type.get()) } +"#, mouse_default.x.get(), + mouse_default.y.get(), mouse_default.source_type.get() + ) + }} </pre> <p class="font-semibold">"Extractor Usage"</p> <Note>"Only works when the mouse is over the demo element"</Note> <pre lang="yaml"> - { move || format!(r#" x: {} + {move || { + format!( + r#" x: {} y: {} source_type: {:?} -"#, mouse_with_extractor.x.get(), mouse_with_extractor.y.get(), mouse_with_extractor.source_type.get()) } +"#, mouse_with_extractor.x + .get(), mouse_with_extractor.y.get(), mouse_with_extractor.source_type.get() + ) + }} </pre> </div> } @@ -58,6 +69,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_mutation_observer/src/main.rs b/examples/use_mutation_observer/src/main.rs index b5c3654..2d06506 100644 --- a/examples/use_mutation_observer/src/main.rs +++ b/examples/use_mutation_observer/src/main.rs @@ -43,10 +43,12 @@ fn Demo() -> impl IntoView { let enum_msgs = Signal::derive(move || messages.get().into_iter().enumerate().collect::<Vec<_>>()); - view! { <div node_ref=el class=move || class_name.get() style=move || style.get()> + view! { + <div node_ref=el class=move || class_name.get() style=move || style.get()> <For each=move || enum_msgs.get() - key=|message| message.0 // list only grows so this is fine here + // list only grows so this is fine here + key=|message| message.0 view=|message| view! { <div>"Mutation Attribute: " <code>{message.1}</code></div> } /> </div> @@ -58,6 +60,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_raf_fn/src/main.rs b/examples/use_raf_fn/src/main.rs index 0742a76..4e794a2 100644 --- a/examples/use_raf_fn/src/main.rs +++ b/examples/use_raf_fn/src/main.rs @@ -14,9 +14,17 @@ fn Demo() -> impl IntoView { set_count.update(|count| *count += 1); }); - view! { <div>Count: { count }</div> - <button on:click=move |_| pause() disabled=move || !is_active()>Pause</button> - <button on:click=move |_| resume() disabled=is_active>Resume</button> + view! { + <div> + Count: + {count} + </div> + <button on:click=move |_| pause() disabled=move || !is_active()> + Pause + </button> + <button on:click=move |_| resume() disabled=is_active> + Resume + </button> } } @@ -25,6 +33,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_resize_observer/src/main.rs b/examples/use_resize_observer/src/main.rs index 9ea1548..7394bbb 100644 --- a/examples/use_resize_observer/src/main.rs +++ b/examples/use_resize_observer/src/main.rs @@ -17,13 +17,14 @@ fn Demo() -> impl IntoView { )); }); - view! { <Note class="mb-2">"Resize the box to see changes"</Note> + view! { + <Note class="mb-2">"Resize the box to see changes"</Note> <textarea node_ref=el readonly class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10" prop:value=move || text.get() - /> + ></textarea> } } @@ -32,6 +33,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_round/src/main.rs b/examples/use_round/src/main.rs index ab8dd55..fa84815 100644 --- a/examples/use_round/src/main.rs +++ b/examples/use_round/src/main.rs @@ -8,7 +8,8 @@ fn Demo() -> impl IntoView { let result: Signal<f64> = use_round(value); - view! { <input + view! { + <input class="block" prop:value=move || value.get() on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap()) @@ -17,7 +18,7 @@ fn Demo() -> impl IntoView { max="10" step="0.01" /> - <p>"Value: " {move|| value.get()}</p> + <p>"Value: " {move || value.get()}</p> <p>"Rounded: " {move || result.get()}</p> } } @@ -27,6 +28,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_scroll/src/main.rs b/examples/use_scroll/src/main.rs index 0df3d36..cd01592 100644 --- a/examples/use_scroll/src/main.rs +++ b/examples/use_scroll/src/main.rs @@ -42,33 +42,29 @@ fn Demo() -> impl IntoView { .on_scroll(on_scroll.clone()), ); - view! { <div class="flex"> - <div node_ref=el class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded"> + view! { + <div class="flex"> + <div + node_ref=el + class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded" + > <div class="w-[500px] h-[400px] relative"> - <div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1"> - "top_left" - </div> + <div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">"top_left"</div> <div class="absolute left-0 bottom-0 bg-gray-500/5 px-2 py-1"> "bottom_left" </div> - <div class="absolute right-0 top-0 bg-gray-500/5 px-2 py-1"> - "top_right" - </div> + <div class="absolute right-0 top-0 bg-gray-500/5 px-2 py-1">"top_right"</div> <div class="absolute right-0 bottom-0 bg-gray-500/5 px-2 py-1"> "bottom_right" </div> - <div class="absolute left-1/3 top-1/3 bg-gray-500/5 px-2 py-1"> - "Scroll Me" - </div> + <div class="absolute left-1/3 top-1/3 bg-gray-500/5 px-2 py-1">"Scroll Me"</div> </div> </div> <div class="my-10 w-280px pl-4"> <div class="px-6 py-4 rounded grid grid-cols-[120px_auto] gap-4 bg-gray-500/5"> - <span class="text-right opacity-75 py-4"> - "X Position" - </span> + <span class="text-right opacity-75 py-4">"X Position"</span> <div class="text-primary"> <div> <input @@ -78,6 +74,7 @@ fn Demo() -> impl IntoView { set_x(num); } } + type="number" min="0" max="200" @@ -85,9 +82,7 @@ fn Demo() -> impl IntoView { /> </div> </div> - <span class="text-right opacity-75 py-4"> - "Y Position" - </span> + <span class="text-right opacity-75 py-4">"Y Position"</span> <div class="text-primary"> <div> <input @@ -97,6 +92,7 @@ fn Demo() -> impl IntoView { set_y(num); } } + type="number" min="0" max="200" @@ -115,42 +111,24 @@ fn Demo() -> impl IntoView { type="checkbox" /> </span> - <span class="text-right opacity-75"> - "Is Scrolling" - </span> - <BooleanDisplay value=is_scrolling /> - <div class="text-right opacity-75"> - "Top Arrived" - </div> - <BooleanDisplay value=Signal::derive(move || arrived_state.get().top) /> - <div class="text-right opacity-75"> - "Right Arrived" - </div> - <BooleanDisplay value=Signal::derive(move || arrived_state.get().right) /> - <div class="text-right opacity-75"> - "Bottom Arrived" - </div> - <BooleanDisplay value=Signal::derive(move || arrived_state.get().bottom) /> - <div class="text-right opacity-75"> - "Left Arrived" - </div> - <BooleanDisplay value=Signal::derive(move || arrived_state.get().left) /> - <div class="text-right opacity-75"> - "Scrolling Up" - </div> - <BooleanDisplay value=Signal::derive(move || directions.get().top) /> - <div class="text-right opacity-75"> - "Scrolling Right" - </div> - <BooleanDisplay value=Signal::derive(move || directions.get().right) /> - <div class="text-right opacity-75"> - "Scrolling Down" - </div> - <BooleanDisplay value=Signal::derive(move || directions.get().bottom) /> - <div class="text-right opacity-75"> - "Scrolling Left" - </div> - <BooleanDisplay value=Signal::derive(move || directions.get().left) /> + <span class="text-right opacity-75">"Is Scrolling"</span> + <BooleanDisplay value=is_scrolling/> + <div class="text-right opacity-75">"Top Arrived"</div> + <BooleanDisplay value=Signal::derive(move || arrived_state.get().top)/> + <div class="text-right opacity-75">"Right Arrived"</div> + <BooleanDisplay value=Signal::derive(move || arrived_state.get().right)/> + <div class="text-right opacity-75">"Bottom Arrived"</div> + <BooleanDisplay value=Signal::derive(move || arrived_state.get().bottom)/> + <div class="text-right opacity-75">"Left Arrived"</div> + <BooleanDisplay value=Signal::derive(move || arrived_state.get().left)/> + <div class="text-right opacity-75">"Scrolling Up"</div> + <BooleanDisplay value=Signal::derive(move || directions.get().top)/> + <div class="text-right opacity-75">"Scrolling Right"</div> + <BooleanDisplay value=Signal::derive(move || directions.get().right)/> + <div class="text-right opacity-75">"Scrolling Down"</div> + <BooleanDisplay value=Signal::derive(move || directions.get().bottom)/> + <div class="text-right opacity-75">"Scrolling Left"</div> + <BooleanDisplay value=Signal::derive(move || directions.get().left)/> </div> </div> </div> @@ -162,6 +140,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_storage/src/main.rs b/examples/use_storage/src/main.rs index 81f40e3..f95165f 100644 --- a/examples/use_storage/src/main.rs +++ b/examples/use_storage/src/main.rs @@ -24,7 +24,8 @@ fn Demo() -> impl IntoView { let (state2, ..) = use_storage("banana-state", the_default.clone()); - view! { <input + view! { + <input class="block" prop:value=move || state.get().name on:input=move |e| set_state.update(|s| s.name = event_target_value(&e)) @@ -46,20 +47,27 @@ fn Demo() -> impl IntoView { class="block" prop:value=move || state.get().count value=move || state.get().count - on:input=move |e| set_state.update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32) + on:input=move |e| { + set_state + .update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32) + } type="number" min="0" step="1" max="1000" /> - <p>"Second "<b><code>"use_storage"</code></b>":"</p> + <p> + "Second " <b> + <code>"use_storage"</code> + </b> ":" + </p> - <pre> - { move || format!("{:#?}", state2.get()) } - </pre> + <pre>{move || format!("{:#?}", state2.get())}</pre> - <Note>"The values are persistent. When you reload the page the values will be the same."</Note> + <Note> + "The values are persistent. When you reload the page the values will be the same." + </Note> } } @@ -68,6 +76,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_throttle_fn/src/main.rs b/examples/use_throttle_fn/src/main.rs index 17ccc49..fbf5bf4 100644 --- a/examples/use_throttle_fn/src/main.rs +++ b/examples/use_throttle_fn/src/main.rs @@ -12,17 +12,17 @@ fn Demo() -> impl IntoView { 1000.0, ); - view! { <button - on:click=move |_| { - set_click_count.set(click_count.get_untracked() + 1); - throttled_fn(); - } - > + view! { + <button on:click=move |_| { + set_click_count.set(click_count.get_untracked() + 1); + throttled_fn(); + }> + "Smash me!" </button> <Note>"Delay is set to 1000ms for this demo."</Note> - <p>"Button clicked: " { click_count }</p> - <p>"Event handler called: " { throttled_count }</p> + <p>"Button clicked: " {click_count}</p> + <p>"Event handler called: " {throttled_count}</p> } } @@ -31,6 +31,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_websocket/src/main.rs b/examples/use_websocket/src/main.rs index 1dde4bf..2c304f2 100644 --- a/examples/use_websocket/src/main.rs +++ b/examples/use_websocket/src/main.rs @@ -152,53 +152,80 @@ fn Demo() -> impl IntoView { let connected2 = move || ready_state2.get() == UseWebSocketReadyState::Open; - view! { <div class="container"> - <div class="flex flex-col lg:flex-row gap-4"> - <div class="w-full lg:w-1/2"> - <h1 class="text-xl lg:text-4xl mb-2">"use_websocket"</h1> - <p>"status: " {status}</p> - <button on:click=send_message disabled=move || !connected()>"Send"</button> - <button on:click=send_byte_message disabled=move || !connected()>"Send bytes"</button> - <button on:click=open_connection disabled=connected>"Open"</button> - <button on:click=close_connection disabled=move || !connected()>"Close"</button> - <div class="flex items-center"> - <h3 class="text-2xl mr-2">"History"</h3> - <button on:click=move |_| set_history(vec![]) disabled=move || history.get().len() <= 0>"Clear"</button> - </div> - <For - each=move || history.get().into_iter().enumerate() - key=|(index, _)| *index - view=move |(_, message)| { - view! { <div>{message}</div> } - } - /> + view! { + <div class="container"> + <div class="flex flex-col lg:flex-row gap-4"> + <div class="w-full lg:w-1/2"> + <h1 class="text-xl lg:text-4xl mb-2">"use_websocket"</h1> + <p>"status: " {status}</p> + <button on:click=send_message disabled=move || !connected()> + "Send" + </button> + <button on:click=send_byte_message disabled=move || !connected()> + "Send bytes" + </button> + <button on:click=open_connection disabled=connected> + "Open" + </button> + <button on:click=close_connection disabled=move || !connected()> + "Close" + </button> + <div class="flex items-center"> + <h3 class="text-2xl mr-2">"History"</h3> + <button + on:click=move |_| set_history(vec![]) + disabled=move || history.get().len() <= 0 + > + "Clear" + </button> + </div> + <For + each=move || history.get().into_iter().enumerate() + key=|(index, _)| *index + view=move |(_, message)| { + view! { <div>{message}</div> } + } + /> - </div> - <div class="w-full lg:w-1/2"> - <h1 class="text-xl lg:text-4xl mb-2">"use_websocket_with_options"</h1> - <p>"status: " {status2}</p> - <button on:click=open_connection2 disabled={connected2}>"Connect"</button> - <button on:click=close_connection2 disabled=move || !connected2()>"Close"</button> - <button on:click=send_message2 disabled=move || !connected2()>"Send"</button> - <button on:click=send_byte_message2 disabled=move || !connected2()>"Send Bytes"</button> - <div class="flex items-center"> - <h3 class="text-2xl mr-2">"History"</h3> - <button on:click=move |_| set_history2(vec![]) disabled=move || history2.get().len() <= 0>"Clear"</button> + </div> + <div class="w-full lg:w-1/2"> + <h1 class="text-xl lg:text-4xl mb-2">"use_websocket_with_options"</h1> + <p>"status: " {status2}</p> + <button on:click=open_connection2 disabled=connected2> + "Connect" + </button> + <button on:click=close_connection2 disabled=move || !connected2()> + "Close" + </button> + <button on:click=send_message2 disabled=move || !connected2()> + "Send" + </button> + <button on:click=send_byte_message2 disabled=move || !connected2()> + "Send Bytes" + </button> + <div class="flex items-center"> + <h3 class="text-2xl mr-2">"History"</h3> + <button + on:click=move |_| set_history2(vec![]) + disabled=move || history2.get().len() <= 0 + > + "Clear" + </button> + </div> + <ul> + <For + each=move || history2.get().into_iter().enumerate() + key=|(index, _)| *index + view=move |(_, message)| { + view! { <li>{message}</li> } + } + /> + + </ul> + </div> </div> - <ul> - <For - each=move || history2.get().into_iter().enumerate() - key=|(index, _)| *index - view=move |(_, message)| { - view! { <li>{message}</li> } - } - /> - </ul> - </div> + </div> - - - </div> } } @@ -207,6 +234,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_window_focus/src/main.rs b/examples/use_window_focus/src/main.rs index 675bfe4..f97ab80 100644 --- a/examples/use_window_focus/src/main.rs +++ b/examples/use_window_focus/src/main.rs @@ -22,8 +22,7 @@ fn Demo() -> impl IntoView { false, ); - view! { <div>{ message }</div> - } + view! { <div>{message}</div> } } fn main() { @@ -31,6 +30,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/use_window_scroll/src/main.rs b/examples/use_window_scroll/src/main.rs index ad7519b..627db6d 100644 --- a/examples/use_window_scroll/src/main.rs +++ b/examples/use_window_scroll/src/main.rs @@ -15,12 +15,20 @@ fn Demo() -> impl IntoView { document().body().unwrap().append_child(&div).unwrap(); - view! { <div>See scroll values in the lower right corner of the screen.</div> + view! { + <div> + See scroll values in the lower right corner of the screen. + </div> <div class="float m-5 area shadow-lg"> - <Note class="mb-2">Scroll value</Note> + <Note class="mb-2"> + Scroll value + </Note> <div> - x: { move || format!("{:.1}", x()) } <br /> - y: { move || format!("{:.1}", y()) } + x: + {move || format!("{:.1}", x())} + <br/> + y: + {move || format!("{:.1}", y())} </div> </div> } @@ -31,6 +39,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/watch_debounced/src/main.rs b/examples/watch_debounced/src/main.rs index f97630b..4a7d40a 100644 --- a/examples/watch_debounced/src/main.rs +++ b/examples/watch_debounced/src/main.rs @@ -16,7 +16,8 @@ fn Demo() -> impl IntoView { WatchDebouncedOptions::default().max_wait(Some(5000.0)), ); - view! { <input + view! { + <input class="block" prop:value=move || input.get() on:input=move |e| set_input.set(event_target_value(&e)) @@ -29,8 +30,8 @@ fn Demo() -> impl IntoView { <code>"max_wait"</code> " is set to 5000ms for this demo." </Note> - <p>"Input: " { input }</p> - <p>"Times Updated: " { updated }</p> + <p>"Input: " {input}</p> + <p>"Times Updated: " {updated}</p> } } @@ -39,6 +40,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/watch_pausable/src/main.rs b/examples/watch_pausable/src/main.rs index 60b694f..0e450ec 100644 --- a/examples/watch_pausable/src/main.rs +++ b/examples/watch_pausable/src/main.rs @@ -33,7 +33,8 @@ fn Demo() -> impl IntoView { resume(); }; - view! { <Note class="mb-2">"Type something below to trigger the watch"</Note> + view! { + <Note class="mb-2">"Type something below to trigger the watch"</Note> <input node_ref=input class="block" @@ -42,11 +43,15 @@ fn Demo() -> impl IntoView { type="text" /> <p>"Value: " {source}</p> - <button prop:disabled=move || !is_active.get() class="orange" on:click=pause>"Pause"</button> - <button prop:disabled=move || is_active.get() on:click=resume>"Resume"</button> + <button prop:disabled=move || !is_active.get() class="orange" on:click=pause> + "Pause" + </button> + <button prop:disabled=move || is_active.get() on:click=resume> + "Resume" + </button> <button on:click=clear>"Clear Log"</button> - <br /> - <br /> + <br/> + <br/> <Note>"Log"</Note> <pre>{log}</pre> } @@ -57,6 +62,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/examples/watch_throttled/src/main.rs b/examples/watch_throttled/src/main.rs index 0007f0d..c332fe4 100644 --- a/examples/watch_throttled/src/main.rs +++ b/examples/watch_throttled/src/main.rs @@ -15,7 +15,8 @@ fn Demo() -> impl IntoView { 1000.0, ); - view! { <input + view! { + <input class="block" prop:value=move || input.get() on:input=move |e| set_input.set(event_target_value(&e)) @@ -26,8 +27,8 @@ fn Demo() -> impl IntoView { <code>"ms"</code> " is set to 1000ms for this demo." </Note> - <p>"Input: " { input }</p> - <p>"Times Updated: " { updated }</p> + <p>"Input: " {input}</p> + <p>"Times Updated: " {updated}</p> } } @@ -36,6 +37,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) } diff --git a/template/examples/{{ function_name }}/src/main.ffizer.hbs.rs b/template/examples/{{ function_name }}/src/main.ffizer.hbs.rs index fef870c..cba5fea 100644 --- a/template/examples/{{ function_name }}/src/main.ffizer.hbs.rs +++ b/template/examples/{{ function_name }}/src/main.ffizer.hbs.rs @@ -7,7 +7,7 @@ fn Demo() -> impl IntoView { {{ function_name }}(); - view! { } + view! { } } fn main() { @@ -15,6 +15,6 @@ fn main() { console_error_panic_hook::set_once(); mount_to(demo_or_body(), || { - view! { <Demo /> } + view! { <Demo/> } }) }