!LtIECwsjkkjinzHTTB:matrix.org

Support/Help

771 Members
4 Servers

Load older messages


SenderMessageTime
27 May 2023
@_discord_126396905205923840:t2bot.iotazjin Is there an example of how to use yew_router with struct components in recent yew? I feel like a child trying to put mismatching lego pieces together 😅

I guess https://github.com/yewstack/yew/blob/yew-v0.20.0/examples/router/src/main.rs is the closest, but I can't figure out how to get the context back after going through the Switch component.
10:10:52
@_discord_326088262118670337:t2bot.ioKirill Semyonkin if you mean passing data over to children routes,
1. you can actually add another param to switch, and use a move closure, something along the lines of render={ move |route| switch(route, some_extra_data) } (some_extra_data is very likely to be required to be not a &)
2. try figuring out how to use some equivalent of ContextProvider (which is probably used the same way) and use_context in struct components, i am however not familiar with struct components so i cannot help with that
10:13:57
@_discord_326088262118670337:t2bot.ioKirill Semyonkin * if you mean passing data over to children routes,
1. you can actually add another param to switch, and use a move closure, something along the lines of render={ move |route| switch(route, some_extra_data) } (some_extra_data is very likely to be required to be not a &, so if you are using those, your best bet may be Rc and .clone(), im not familiar with struct components to tell how would it determine re-renders and such in such case)
2. try figuring out how to use some equivalent of ContextProvider (which is probably used the same way) and use_context in struct components, i am however not familiar with struct components so i cannot help with that
10:15:09
@_discord_326088262118670337:t2bot.ioKirill Semyonkin * if you mean passing data over to children routes,
1. you can actually add another param to switch, and use a move closure, something along the lines of render={ move |route| switch(route, some_extra_data) } (some_extra_data is very likely to be required to be not a &, so if you are using those, your best bet may be Rc and .clone(), im not familiar with struct components to tell how would it determine re-renders and such in such case). be wary of prop drilling in this case though, apply 2nd solution at your discretion
2. try figuring out how to use some equivalent of ContextProvider (which is probably used the same way) and use_context in struct components, i am however not familiar with struct components so i cannot help with that
10:18:24
@_discord_126396905205923840:t2bot.iotazjin Hm, interesting, thanks. I didn't expect that to be so difficult. Cloning and wrapping the context in Rcs is probably not great. 10:19:46
@_discord_326088262118670337:t2bot.ioKirill Semyonkin not the context, but individual component's fields if they are not Copy 10:20:30
@_discord_326088262118670337:t2bot.ioKirill Semyonkin for example, bool is Copy, so its easy to move &bool across a move || boundary 10:21:09
@_discord_126396905205923840:t2bot.iotazjin thinking it might be easier with struct components to just get the location through web_sys, and invoke the route parsing and dispatching manually 10:21:16
@_discord_126396905205923840:t2bot.iotazjin I'm trying to stay away from all the "magic" features and sticking to only functions with simple values being passed around 10:21:45
@_discord_126396905205923840:t2bot.iotazjin for the record, that seems to work fine, I just added gloo::history::BrowserHistory to the component and then did

        let location = self.history.location();
        let route = Route::recognize(location.path()).unwrap_or(Route::NotFound);

        match route {
            Route::Home => include!("home.html"),
            Route::PrivacyPolicy => include!("privacy-policy.html"),
            Route::NotFound => todo!(),
        }
10:39:03
@_discord_886648165451845694:t2bot.io*daymare*#4748 hey um does anytone have some projects i can work on to get comfy w yew and webdev 16:09:22
28 May 2023
@_discord_136305723599486979:t2bot.ioAwesome joined the room.01:16:29
29 May 2023
@_discord_276227047968210945:t2bot.ioHarley Queens#2800 joined the room.01:16:06
@_discord_276227047968210945:t2bot.ioHarley Queens#2800 1. Does Yew have codesplitting?
2. Does Yew minify JS,CSS and HTML on trunk build --release?
01:16:07
@_discord_326088262118670337:t2bot.ioKirill Semyonkin https://discord.com/channels/701068342760570933/703449306497024049/1106573060741546104 05:16:29
@_discord_326088262118670337:t2bot.ioKirill Semyonkin as for minifying, first of all yew does not modify external resources like those (ssr though?), and second of all, i dont think trunk does either - i believe its made for dev only, although you can probably take all of the assets, minify, and put on a separate production web server which has more capabilities 05:19:52
@_discord_326088262118670337:t2bot.ioKirill Semyonkin stylist crate could minify its generated css, but im not sure if it actually does 05:23:04
@_discord_589014218498375680:t2bot.ioNano#2724 changed their profile picture.19:45:27
30 May 2023
@_discord_245409854737481729:t2bot.ioNeuromancer joined the room.05:38:53
@_discord_245409854737481729:t2bot.ioNeuromancerRedacted or Malformed Event05:38:54
@_discord_245409854737481729:t2bot.ioNeuromancer This is probably a really dumb question, but I can't find an example that shows me how to do this... How do I create a component that is composed of nested components? I've figured out how to write components as tags inside an html! macro, but that breaks down pretty fast. The following code snippet demonstrates what I (think) I want to do:

[[
#[derive(Clone, PartialEq)]
pub struct A;

impl Component for A {
    type Message = ();
    type Properties = ();
    fn create(_ctx: &yew::Context<Self>) -> Self { Self {} }
    fn view(&self, _ctx: &yew::Context<Self>) -> yew::Html { html! {<p>{ "A" }</p>} }
}

#[derive(Clone, PartialEq)]
pub struct B;

impl Component for B {
    type Message = ();
    type Properties = ();
    fn create(_ctx: &yew::Context<Self>) -> Self { Self {} }
    fn view(&self, _ctx: &yew::Context<Self>) -> yew::Html { html! {<p>{ "B" }</p>} }
}

#[derive(Clone, PartialEq)]
pub enum ComponentTypes { A(A), B(B) }

#[derive(Clone, PartialEq, Properties)]
pub struct AppProperties {
    a: A,
    components: Vec<ComponentTypes>,
}

pub struct App;

impl Component for App {
    type Message = ();
    type Properties = AppProperties;

    fn create(_ctx: &yew::Context<Self>) -> Self { Self { } }

    fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
        let components = ctx.props().components;
        html! {
            <div>
                <A />
                { ctx.props().a } // How do I make this work just like the previous line?
                { for components } // Assuming it's meaningfully different, what about this line?
            </div>
        }
    }
}

]]
05:40:43
@_discord_120619855056601088:t2bot.ioWorldSEnder#8649
                <A />
                { ctx.props().a } // How do I make this work just like the previous line?

that really depends on if you want to supply props at this line, or if they come supplied with the components already. In the latter case, you're supposed to use components: Vec<Html> and use the html! macro upstream. In the former case, it depends if you have a closed universe of variants (as in your example) or want an open one.
For the example, implementing impl ComponentTypes { fn view(&self) -> Html { ... } } and using { for components.iter().map(|c| c.view()) } in the html! is I think the straight-forward way. In the open universe case, make a trait Viewable { fn view(&self) -> Html } and add relevant arguments there and store components: Vec<dyn Viewable>.
Hope that helps
05:59:57
@_discord_257075425233076224:t2bot.ioSpanishpear Trunk is not just dev only. Release mode will optimise the wasm file and any scss https://github.com/thedodd/trunk/issues/7 06:53:38
@_discord_257075425233076224:t2bot.ioSpanishpear You can find the latest minimisation work at https://github.com/thedodd/trunk/pull/449 - and can sk more in #trunk I'd imagine 06:54:32
@_discord_326088262118670337:t2bot.ioKirill Semyonkin while that is cool that it minifies things (or will) for you, i would still recommend putting those resources after that on some cdn 07:18:25
@_discord_326088262118670337:t2bot.ioKirill Semyonkin in my functional component look on things, you would not store a: A but rather store data that would be required to create it, and then use it like so:
<A />
{ <A somedata={ ... } /> }
{ for somedatalist.iter().map(|somedata| html! { <A somedata={ ... } }).collect::<Html>() }
07:26:22
@_discord_257075425233076224:t2bot.ioSpanishpear oh yeah of course if you need to handle larger loads 08:57:28
1 Jun 2023
@_discord_379840670677991425:t2bot.ioFU3X joined the room.00:47:00
@_discord_379840670677991425:t2bot.ioFU3X rust is the worst language 00:47:02
@_discord_379840670677991425:t2bot.ioFU3XRedacted or Malformed Event03:55:48

There are no newer messages yet.


Back to Room ListRoom Version: 6