diff --git a/demo/Cargo.toml b/demo/Cargo.toml index 535423f..2dab5ad 100644 --- a/demo/Cargo.toml +++ b/demo/Cargo.toml @@ -7,10 +7,9 @@ edition = "2021" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -leptos = { version = "0.6.10" } -leptos_meta = { version = "0.6.10" } -leptos_router = { version = "0.6.10" } -leptos_devtools = { version = "0.0.1", optional = true } +leptos = { workspace = true } +leptos_meta = { workspace = true } +leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" } thaw = { path = "../thaw" } demo_markdown = { path = "../demo_markdown" } icondata = "0.3.0" @@ -22,15 +21,13 @@ leptos-use = "0.10.10" [features] default = ["csr"] tracing = ["leptos/tracing"] -csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr", "thaw/csr"] +csr = ["leptos/csr", "thaw/csr"] ssr = ["leptos/ssr", "leptos_meta/ssr", "leptos_router/ssr", "thaw/ssr"] hydrate = [ "leptos/hydrate", - "leptos_meta/hydrate", - "leptos_router/hydrate", "thaw/hydrate", ] -nightly = ["leptos/nightly", "leptos_meta/nightly", "leptos_router/nightly"] +nightly = ["leptos/nightly", "leptos_router/nightly"] # https://benw.is/posts/how-i-improved-my-rust-compile-times-by-seventy-five-percent#optimization-level diff --git a/demo/src/app.rs b/demo/src/app.rs index d120200..1cb1ec7 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -1,23 +1,26 @@ use crate::pages::*; -use leptos::*; +use leptos::{prelude::*, reactive_graph::wrappers::write::SignalSetter}; use leptos_meta::provide_meta_context; -use leptos_router::*; -use leptos_use::{ - storage::use_local_storage, - utils::{FromToStringCodec, StringCodec}, +use leptos_router::{ + components::{Route, Router, Routes}, + StaticSegment, }; +// use leptos_use::{ +// storage::use_local_storage, +// utils::{FromToStringCodec, StringCodec}, +// }; use thaw::*; #[component] pub fn App() -> impl IntoView { - let is_routing = create_rw_signal(false); + let is_routing = RwSignal::new(false); let set_is_routing = SignalSetter::map(move |is_routing_data| { is_routing.set(is_routing_data); }); provide_meta_context(); view! { - + @@ -37,65 +40,66 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { }); view! { - - - - - - - - - - - // - // - // - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - // - - - - - - - - - - - - - - - + + + + // + // + // + // + // + // + // + // + // // + // // + // // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // // + // + // + // + // + // + // // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // // // // @@ -105,11 +109,11 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { #[component] fn TheProvider(children: Children) -> impl IntoView { - let (read_theme, _, _) = use_local_storage::("theme"); - let theme = RwSignal::new(Theme::from(read_theme.get_untracked())); + // let (read_theme, _, _) = use_local_storage::("theme"); + // let theme = RwSignal::new(Theme::from(read_theme.get_untracked())); view! { - + {children()} diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs index ba488f0..e927023 100644 --- a/demo/src/components/demo.rs +++ b/demo/src/components/demo.rs @@ -1,4 +1,4 @@ -use leptos::*; +use leptos::prelude::*; use leptos_meta::Style; use thaw::*; @@ -6,7 +6,8 @@ use thaw::*; pub struct DemoCode { #[prop(default = true)] is_highlight: bool, - children: Children, + #[prop(into)] + text: String, } #[component] @@ -38,16 +39,7 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option) - let is_show_code = RwSignal::new(children.is_none()); let is_highlight = demo_code.is_highlight; - let frag = (demo_code.children)(); - let mut html = String::new(); - for node in frag.nodes { - match node { - View::Text(text) => html.push_str(&text.content), - _ => { - leptos::logging::warn!("Only text nodes are supported as children of .") - } - } - } + let html = demo_code.text; view! { - +
- - {gen_menu_data().into_view()} - + { + gen_menu_data().into_iter().map(|data| { + let MenuGroupOption { label, children } = data; + view! { + + {label} + + { + children.into_iter().map(|item| { + let MenuItemOption { label, value } = item; + view! { + {label} + } + }).collect_view() + } + } + }).collect_view() + }
@@ -72,31 +90,11 @@ pub(crate) struct MenuGroupOption { pub children: Vec, } -impl IntoView for MenuGroupOption { - fn into_view(self) -> View { - let Self { label, children } = self; - view! { - - {label} - - {children.into_iter().map(|v| v.into_view()).collect_view()} - } - .into_view() - } -} - pub(crate) struct MenuItemOption { pub label: String, pub value: String, } -impl IntoView for MenuItemOption { - fn into_view(self) -> View { - let Self { label, value } = self; - view! { {label} } - } -} - pub(crate) fn gen_menu_data() -> Vec { vec![ MenuGroupOption { diff --git a/demo/src/pages/home.rs b/demo/src/pages/home.rs index 3c67f3f..58d3085 100644 --- a/demo/src/pages/home.rs +++ b/demo/src/pages/home.rs @@ -1,5 +1,6 @@ -use leptos::*; -use leptos_router::{use_navigate, use_query_map}; +use leptos::prelude::*; +use leptos_router::hooks::{use_navigate, use_query_map}; +// use leptos_router::{use_navigate, use_query_map}; use thaw::*; #[component] @@ -8,7 +9,7 @@ pub fn Home() -> impl IntoView { // mobile page if let Some(path) = query_map.get("path") { let navigate = use_navigate(); - navigate(path, Default::default()); + navigate(&path, Default::default()); } view! { diff --git a/demo_markdown/docs/color_picker/mod.md b/demo_markdown/docs/color_picker/mod.md index e697529..8f95396 100644 --- a/demo_markdown/docs/color_picker/mod.md +++ b/demo_markdown/docs/color_picker/mod.md @@ -3,7 +3,7 @@ ```rust demo use palette::Srgb; -let value = create_rw_signal(Color::from(Srgb::new(0.0, 0.0, 0.0))); +let value = RwSignal::new(Color::from(Srgb::new(0.0, 0.0, 0.0))); view! { @@ -17,9 +17,9 @@ Encoding formats, support RGB, HSV, HSL. ```rust demo use palette::{Hsl, Hsv, Srgb}; -let rgb = create_rw_signal(Color::from(Srgb::new(0.0, 0.0, 0.0))); -let hsv = create_rw_signal(Color::from(Hsv::new(0.0, 0.0, 0.0))); -let hsl = create_rw_signal(Color::from(Hsl::new(0.0, 0.0, 0.0))); +let rgb = RwSignal::new(Color::from(Srgb::new(0.0, 0.0, 0.0))); +let hsv = RwSignal::new(Color::from(Hsv::new(0.0, 0.0, 0.0))); +let hsl = RwSignal::new(Color::from(Hsl::new(0.0, 0.0, 0.0))); view! { diff --git a/demo_markdown/docs/date_picker/mod.md b/demo_markdown/docs/date_picker/mod.md index fb9b264..d3f4783 100644 --- a/demo_markdown/docs/date_picker/mod.md +++ b/demo_markdown/docs/date_picker/mod.md @@ -2,7 +2,7 @@ ```rust demo use chrono::prelude::*; -let value = create_rw_signal(Some(Local::now().date_naive())); +let value = RwSignal::new(Some(Local::now().date_naive())); view! { diff --git a/demo_markdown/docs/input/mod.md b/demo_markdown/docs/input/mod.md index da8d71f..abc7586 100644 --- a/demo_markdown/docs/input/mod.md +++ b/demo_markdown/docs/input/mod.md @@ -59,7 +59,7 @@ view! { ### Invalid ```rust demo -let value = create_rw_signal(String::from("o")); +let value = RwSignal::new(String::from("o")); view! { @@ -71,8 +71,8 @@ view! { ### Imperative handle ```rust demo -let value = create_rw_signal(String::from("o")); -let input_ref = create_component_ref::(); +let value = RwSignal::new(String::from("o")); +let input_ref = ComponentRef::::new(); let focus = Callback::new(move |_| { input_ref.get_untracked().unwrap().focus() diff --git a/demo_markdown/docs/layout/mod.md b/demo_markdown/docs/layout/mod.md index 5cc994d..32424fb 100644 --- a/demo_markdown/docs/layout/mod.md +++ b/demo_markdown/docs/layout/mod.md @@ -3,10 +3,10 @@ ```rust demo view! { - + "Header" - "Content" + "Content" } ``` @@ -16,14 +16,14 @@ view! { ```rust demo view! { - + "Sider" - + "Header" - + "Content" diff --git a/demo_markdown/docs/select/mod.md b/demo_markdown/docs/select/mod.md index 38eddb2..ffe5b08 100644 --- a/demo_markdown/docs/select/mod.md +++ b/demo_markdown/docs/select/mod.md @@ -1,7 +1,7 @@ # Select ```rust demo -let value = create_rw_signal(None::); +let value = RwSignal::new(None::); let options = vec![ SelectOption::new("RwSignal", String::from("rw_signal")), @@ -16,7 +16,7 @@ view! { # Multiple Select ```rust demo -let value = create_rw_signal(vec![ +let value = RwSignal::new(vec![ "rust".to_string(), "javascript".to_string(), "zig".to_string(), diff --git a/demo_markdown/docs/time_picker/mod.md b/demo_markdown/docs/time_picker/mod.md index e9cc65c..7355e28 100644 --- a/demo_markdown/docs/time_picker/mod.md +++ b/demo_markdown/docs/time_picker/mod.md @@ -3,7 +3,7 @@ ```rust demo use chrono::prelude::*; -let value = create_rw_signal(Some(Local::now().time())); +let value = RwSignal::new(Some(Local::now().time())); view! { diff --git a/demo_markdown/docs/upload/mod.md b/demo_markdown/docs/upload/mod.md index 5c66ae7..b334827 100644 --- a/demo_markdown/docs/upload/mod.md +++ b/demo_markdown/docs/upload/mod.md @@ -2,7 +2,7 @@ ```rust demo let message = use_message(); -let custom_request = move |file_list: FileList| { +let custom_request = move |file_list| { message.create( format!("Number of uploaded files: {}", file_list.length()), MessageVariant::Success, @@ -23,7 +23,7 @@ view!{ ```rust demo let message = use_message(); -let custom_request = move |file_list: FileList| { +let custom_request = move |file_list| { message.create( format!("Number of uploaded files: {}", file_list.length()), MessageVariant::Success, diff --git a/demo_markdown/src/markdown/code_block.rs b/demo_markdown/src/markdown/code_block.rs index 92afdab..133a05c 100644 --- a/demo_markdown/src/markdown/code_block.rs +++ b/demo_markdown/src/markdown/code_block.rs @@ -28,8 +28,7 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec) -> TokenSt quote! { <#demo /> - - #literal + } @@ -45,8 +44,7 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec) -> TokenSt }); quote! { - - #literal + } diff --git a/thaw/src/upload/mod.rs b/thaw/src/upload/mod.rs index 84dce3c..145a586 100644 --- a/thaw/src/upload/mod.rs +++ b/thaw/src/upload/mod.rs @@ -4,13 +4,14 @@ pub use upload_dragger::UploadDragger; pub use web_sys::FileList; use leptos::{ev, html, prelude::*}; +use send_wrapper::SendWrapper; use thaw_utils::{add_event_listener, mount_style}; #[component] pub fn Upload( #[prop(optional, into)] accept: MaybeSignal, #[prop(optional, into)] multiple: MaybeSignal, - #[prop(optional, into)] custom_request: Option>, + #[prop(optional, into)] custom_request: Option, ()>>, children: Children, ) -> impl IntoView { mount_style("upload", include_str!("./upload.css")); @@ -34,7 +35,7 @@ pub fn Upload( let on_file_addition = move |files: FileList| { if let Some(custom_request) = custom_request { - custom_request.call(files); + custom_request.call(SendWrapper::new(files)); } }; diff --git a/thaw_components/src/teleport/mod.rs b/thaw_components/src/teleport/mod.rs index 8d09589..dcf6862 100644 --- a/thaw_components/src/teleport/mod.rs +++ b/thaw_components/src/teleport/mod.rs @@ -1,5 +1,5 @@ use cfg_if::cfg_if; -use leptos::prelude::*; +use leptos::{children, prelude::*}; use tachys::view::any_view::AnyView; /// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56 @@ -10,58 +10,67 @@ pub fn Teleport( #[prop(optional, into)] element: Option>, #[prop(optional)] children: Option, ) -> impl IntoView { - cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] { - let mount_fn = StoredValue::new(None:: ()>>); + // cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] { + let mount_fn = StoredValue::new(None::>); + let mount = send_wrapper::SendWrapper::new(mount); + let element = send_wrapper::SendWrapper::new(element); + let children = send_wrapper::SendWrapper::new(children); + mount_fn.set_value(Some(Box::new(move || { + let mount = if let Some(el) = mount.take() { + el + } else { + use leptos::wasm_bindgen::JsCast; + document() + .body() + .expect("body element to exist") + .unchecked_into() + }; - mount_fn.set_value(Some(Box::new(move || { - let mount = mount.unwrap_or_else(|| { - use leptos::wasm_bindgen::JsCast; - document() - .body() - .expect("body element to exist") - .unchecked_into() + if let Some(element) = element.take() { + let render_root = element; + let mut mountable = render_root.build(); + mountable.mount(&mount, None); + // TODO + // on_cleanup(move || { + // mountable.unmount(); + // }); + } else if let Some(children) = children.take() { + let container = document() + .create_element("div") + .expect("element creation to work"); + + 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 mut mountable = view.build(); + mountable.mount(&container, None); }); - if let Some(element) = element { - let render_root = element; - let _ = mount.append_child(&render_root); - on_cleanup(move || { - let _ = mount.remove_child(&render_root); - }); - } else if let Some(children) = children { - let container = document() - .create_element("div") - .expect("element creation to work"); + let render_root = container; + let _ = mount.append_child(&render_root); + // on_cleanup(move || { + // let _ = mount.remove_child(&render_root); + // }); + } + }))); - thaw_utils::with_hydration_off(|| { - use leptos::leptos_dom::Mountable; - let _ = container.append_child(&children().into_view().get_mountable_node()); - }); - - let render_root = container; - let _ = mount.append_child(&render_root); - on_cleanup(move || { - let _ = mount.remove_child(&render_root); - }); - } - }))); - - let owner = Owner::current(); - Effect::new(move |_| { - if immediate.get() { - mount_fn.update_value(|mount_fn| { - if let Some(f) = mount_fn.take() { - with_owner(owner.unwrap(), move || { - f(); - }); - } - }); - } - }); - } else { - let _ = mount; - let _ = immediate; - let _ = element; - let _ = children; - }} + let owner = Owner::current().unwrap(); + Effect::new(move |_| { + if immediate.get() { + mount_fn.update_value(|mount_fn| { + if let Some(f) = mount_fn.take() { + owner.with(|| { + f(); + }); + } + }); + } + }); + // } else { + // let _ = mount; + // let _ = immediate; + // let _ = element; + // let _ = children; + // }} }