Support/Help - Public Room Timeline

	Support/Help	771 Members
		4 Servers

Load older messages

Sender	Message	Time
27 May 2023
tazjin	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
Kirill 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
Kirill 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
Kirill 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
tazjin	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
Kirill Semyonkin	not the context, but individual component's fields if they are not `Copy`	10:20:30
Kirill Semyonkin	for example, `bool` is `Copy`, so its easy to move `&bool` across a `move \|\|` boundary	10:21:09
tazjin	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
tazjin	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
tazjin	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
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
	Awesome joined the room.	01:16:29
29 May 2023
	Harley Queens#2800 joined the room.	01:16:06
Harley Queens#2800	1. Does Yew have codesplitting? 2. Does Yew minify JS,CSS and HTML on trunk build --release?	01:16:07
Kirill Semyonkin	https://discord.com/channels/701068342760570933/703449306497024049/1106573060741546104	05:16:29
Kirill 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
Kirill Semyonkin	`stylist` crate could minify its generated css, but im not sure if it actually does	05:23:04
	Nano#2724 changed their profile picture.	19:45:27
30 May 2023
	Neuromancer joined the room.	05:38:53
Neuromancer	Redacted or Malformed Event	05:38:54
Neuromancer	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
WorldSEnder#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
Spanishpear	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
Spanishpear	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
Kirill 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
Kirill 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
Spanishpear	oh yeah of course if you need to handle larger loads	08:57:28
1 Jun 2023
	FU3X joined the room.	00:47:00
FU3X	rust is the worst language	00:47:02
FU3X	Redacted or Malformed Event	03:55:48

There are no newer messages yet.

Back to Room ListRoom Version: 6