feat(leptos-v0.7): error

This commit is contained in:
luoxiao 2024-07-09 15:04:20 +08:00 committed by luoxiaozero
parent 8ccef81e44
commit 54b23447ee
16 changed files with 91 additions and 48 deletions

View file

@ -16,5 +16,5 @@ thaw_components = { version = "0.1.1", path = "./thaw_components" }
thaw_macro = { version = "0.1.0", path = "./thaw_macro" } thaw_macro = { version = "0.1.0", path = "./thaw_macro" }
thaw_utils = { version = "0.0.3", path = "./thaw_utils" } thaw_utils = { version = "0.0.3", path = "./thaw_utils" }
leptos = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" } leptos = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
leptos_meta = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" } leptos_meta = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }

View file

@ -9,14 +9,14 @@ edition = "2021"
[dependencies] [dependencies]
leptos = { workspace = true } leptos = { workspace = true }
leptos_meta = { workspace = true } leptos_meta = { workspace = true }
leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" } leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
thaw = { path = "../thaw" } thaw = { path = "../thaw" }
demo_markdown = { path = "../demo_markdown" } demo_markdown = { path = "../demo_markdown" }
icondata = "0.3.0" icondata = "0.3.0"
palette = "0.7.4" palette = "0.7.4"
chrono = "0.4.33" chrono = "0.4.33"
cfg-if = "1.0.0" cfg-if = "1.0.0"
leptos-use = "0.10.10" # leptos-use = "0.10.10"
send_wrapper = "0.6" send_wrapper = "0.6"
[features] [features]

View file

@ -30,7 +30,7 @@ pub fn App() -> impl IntoView {
#[component] #[component]
fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView { fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
let loading_bar = use_loading_bar(); let loading_bar = LoadingBarInjection::expect_use();
_ = is_routing.watch(move |is_routing| { _ = is_routing.watch(move |is_routing| {
if *is_routing { if *is_routing {
loading_bar.start(); loading_bar.start();

View file

@ -22,7 +22,7 @@ pub fn Home() -> impl IntoView {
<Button <Button
appearance=ButtonAppearance::Primary appearance=ButtonAppearance::Primary
on_click=move |_| { on_click=move |_| {
let navigate = use_navigate(); let navigate = use_navigate();
navigate("/components/button", Default::default()); navigate("/components/button", Default::default());
} }
> >

View file

@ -10,16 +10,16 @@
</MessageBar> </MessageBar>
```rust demo ```rust demo
let loading_bar = use_loading_bar(); let loading_bar = LoadingBarInjection::expect_use();
let start = Callback::new(move |_| { let start = move |_| {
loading_bar.start(); loading_bar.start();
}); };
let finish = Callback::new(move |_| { let finish = move |_| {
loading_bar.finish(); loading_bar.finish();
}); };
let error = Callback::new(move |_| { let error = move |_| {
loading_bar.error(); loading_bar.error();
}); };
view! { view! {
<Space> <Space>

View file

@ -28,7 +28,7 @@ web-sys = { version = "0.3.69", features = [
wasm-bindgen = "0.2.92" wasm-bindgen = "0.2.92"
icondata_core = "0.1.0" icondata_core = "0.1.0"
icondata_ai = "0.0.10" icondata_ai = "0.0.10"
uuid = { version = "1.7.0", features = ["v4"] } uuid = { version = "1.10.0", features = ["v4", "js"] }
cfg-if = "1.0.0" cfg-if = "1.0.0"
chrono = "0.4.35" chrono = "0.4.35"
palette = "0.7.5" palette = "0.7.5"

View file

@ -132,9 +132,9 @@ pub fn AutoComplete(
//} //}
//} //}
//}; //};
input_ref.on_load(move |_| { comp_ref.load(AutoCompleteRef { input_ref });
comp_ref.load(AutoCompleteRef { input_ref }); // input_ref.on_load(move |_| {
}); // });
view! { view! {
<Binder target_ref=auto_complete_ref> <Binder target_ref=auto_complete_ref>

View file

@ -1,5 +1,4 @@
use leptos::prelude::*; use leptos::{either::Either, prelude::*};
use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style}; use thaw_utils::{class_list, mount_style};
#[component] #[component]
@ -26,9 +25,13 @@ pub fn Badge(
move || format!("thaw-badge--{}", color.get().as_str()), move || format!("thaw-badge--{}", color.get().as_str()),
class class
]> ]>
<OptionComp value=children let:children> {
{children()} if let Some(children) = children {
</OptionComp> Either::Left(children())
} else {
Either::Right(())
}
}
</div> </div>
} }
} }

View file

@ -26,6 +26,10 @@ pub struct LoadingBarInjection {
impl Copy for LoadingBarInjection {} impl Copy for LoadingBarInjection {}
impl LoadingBarInjection { impl LoadingBarInjection {
pub fn expect_use() -> Self {
expect_context::<Self>()
}
pub fn start(&self) { pub fn start(&self) {
if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() { if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() {
loading_bar_ref.start(); loading_bar_ref.start();
@ -44,7 +48,3 @@ impl LoadingBarInjection {
} }
} }
} }
pub fn use_loading_bar() -> LoadingBarInjection {
expect_context::<LoadingBarInjection>()
}

View file

@ -1,6 +1,6 @@
mod loading_bar_provider; mod loading_bar_provider;
pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider}; pub use loading_bar_provider::*;
use crate::ConfigInjection; use crate::ConfigInjection;
use leptos::{html, prelude::*}; use leptos::{html, prelude::*};
@ -26,7 +26,7 @@ impl LoadingBarRef {
} }
#[component] #[component]
pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView { fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
mount_style("loading-bar", include_str!("./loading-bar.css")); mount_style("loading-bar", include_str!("./loading-bar.css"));
let config_provider = ConfigInjection::use_(); let config_provider = ConfigInjection::use_();
let loading_bar_ref = NodeRef::<html::Div>::new(); let loading_bar_ref = NodeRef::<html::Div>::new();
@ -83,7 +83,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
<div <div
class="thaw-config-provider thaw-loading-bar-container" class="thaw-config-provider thaw-loading-bar-container"
data-thaw-id=config_provider.id().clone() data-thaw-id=config_provider.id().clone()
style=move || (!loading.get()).then_some("display: none;").unwrap_or_default() style=move || if loading.get() { "" } else { "display: none;" }
> >
<div <div
class="thaw-loading-bar" class="thaw-loading-bar"

View file

@ -105,6 +105,7 @@ impl SpaceJustify {
#[cfg(test)] #[cfg(test)]
mod test { mod test {
#[test]
fn main() { fn main() {
use leptos::prelude::*; use leptos::prelude::*;
use super::Space; use super::Space;

View file

@ -16,7 +16,7 @@ leptos = { workspace = true }
thaw_utils = { workspace = true } thaw_utils = { workspace = true }
web-sys = { version = "0.3.69", features = ["DomRect"] } web-sys = { version = "0.3.69", features = ["DomRect"] }
cfg-if = "1.0.0" cfg-if = "1.0.0"
uuid = { version = "1.7.0", features = ["v4"] } uuid = { version = "1.10.0", features = ["v4", "js"] }
send_wrapper = "0.6" send_wrapper = "0.6"
[features] [features]

View file

@ -30,28 +30,35 @@ pub fn Teleport(
let render_root = element; let render_root = element;
let mut mountable = render_root.build(); let mut mountable = render_root.build();
mountable.mount(&mount, None); mountable.mount(&mount, None);
// TODO on_cleanup({
// on_cleanup(move || { let mut mountable = send_wrapper::SendWrapper::new(mountable);
// mountable.unmount(); move || {
// }); mountable.unmount();
}
});
} else if let Some(children) = children.take() { } else if let Some(children) = children.take() {
let container = document() let container = document()
.create_element("div") .create_element("div")
.expect("element creation to work"); .expect("element creation to work");
thaw_utils::with_hydration_off(|| { let mountable = thaw_utils::with_hydration_off(|| {
// use leptos::leptos_dom::Mountable;
// let _ = container.append_child(&children().into_view().get_mountable_node());
let view = children().into_view(); let view = children().into_view();
let mut mountable = view.build(); let mut mountable = view.build();
mountable.mount(&container, None); mountable.mount(&container, None);
mountable
}); });
let render_root = container; let render_root = container;
let _ = mount.append_child(&render_root); let _ = mount.append_child(&render_root);
// on_cleanup(move || { on_cleanup({
// let _ = mount.remove_child(&render_root); let mount = send_wrapper::SendWrapper::new(mount);
// }); let render_root = send_wrapper::SendWrapper::new(render_root);
let mut mountable = send_wrapper::SendWrapper::new(mountable);
move || {
mountable.unmount();
let _ = mount.remove_child(&render_root);
}
});
} }
}))); })));

View file

@ -13,7 +13,7 @@ license = "MIT"
[dependencies] [dependencies]
leptos = { workspace = true } leptos = { workspace = true }
leptos_meta = { version = "0.6.10", optional = true } leptos_meta = { workspace = true, optional = true }
web-sys = "0.3.69" web-sys = "0.3.69"
wasm-bindgen = "0.2.92" wasm-bindgen = "0.2.92"
cfg-if = "1.0.0" cfg-if = "1.0.0"

View file

@ -3,7 +3,6 @@ use leptos::reactive_graph::wrappers::read::MaybeSignal;
pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) { pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
#[cfg(any(feature = "csr", feature = "hydrate"))] #[cfg(any(feature = "csr", feature = "hydrate"))]
{ {
// use leptos::{create_render_effect, document, on_cleanup, SignalGet, StoredValue};
use leptos::prelude::{ use leptos::prelude::{
document, effect::RenderEffect, on_cleanup, traits::Get, StoredValue, document, effect::RenderEffect, on_cleanup, traits::Get, StoredValue,
}; };
@ -19,7 +18,7 @@ pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
}); });
}; };
let _ = RenderEffect::new(move |_| { let effect = RenderEffect::new(move |_| {
if is_lock.get() { if is_lock.get() {
let head = document().head().expect("head no exist"); let head = document().head().expect("head no exist");
let style = document() let style = document()
@ -36,7 +35,10 @@ pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
} }
}); });
on_cleanup(remove_style_el) on_cleanup(move || {
drop(effect);
remove_style_el();
});
} }
#[cfg(not(any(feature = "csr", feature = "hydrate")))] #[cfg(not(any(feature = "csr", feature = "hydrate")))]

View file

@ -4,9 +4,10 @@
// }; // };
use leptos::{ use leptos::{
prelude::{request_animation_frame_with_handle, AnimationFrameRequestHandle}, prelude::window,
reactive_graph::owner::{on_cleanup, StoredValue}, reactive_graph::owner::{on_cleanup, StoredValue},
}; };
use wasm_bindgen::{closure::Closure, JsCast, JsValue, UnwrapThrowExt};
#[derive(Clone)] #[derive(Clone)]
pub struct NextFrame(StoredValue<Option<AnimationFrameRequestHandle>>); pub struct NextFrame(StoredValue<Option<AnimationFrameRequestHandle>>);
@ -35,10 +36,9 @@ impl NextFrame {
let next_frame_hadnle = self.0.clone(); let next_frame_hadnle = self.0.clone();
let handle = request_animation_frame_with_handle(move || { let handle = request_animation_frame_with_handle(move || {
let handle = request_animation_frame_with_handle(cb).unwrap(); let handle = request_animation_frame_with_handle(cb);
next_frame_hadnle.set_value(Some(handle)); next_frame_hadnle.set_value(Some(handle));
}) });
.unwrap();
self.0.set_value(Some(handle)); self.0.set_value(Some(handle));
} }
@ -50,3 +50,33 @@ impl NextFrame {
}); });
} }
} }
#[derive(Copy, Clone, Debug, PartialEq, Eq, Hash)]
pub struct AnimationFrameRequestHandle(i32);
impl AnimationFrameRequestHandle {
pub fn cancel(&self) {
let _ = window().cancel_animation_frame(self.0);
}
}
fn request_animation_frame_with_handle(cb: impl FnOnce() + 'static) -> AnimationFrameRequestHandle {
#[inline(never)]
fn raf(cb: JsValue) -> Result<AnimationFrameRequestHandle, JsValue> {
window()
.request_animation_frame(cb.as_ref().unchecked_ref())
.map(AnimationFrameRequestHandle)
}
raf(closure_once(cb)).expect_throw("request_animation_frame_with_handle")
}
fn closure_once(cb: impl FnOnce() + 'static) -> JsValue {
let mut wrapped_cb: Option<Box<dyn FnOnce()>> = Some(Box::new(cb));
let closure = Closure::new(move || {
if let Some(cb) = wrapped_cb.take() {
cb()
}
});
closure.into_js_value()
}