Dynamic Prop Labels #3509
Dynamic Prop Labels #3509
Conversation
|
Visit the preview URL for this PR (updated for commit 5fc9058): https://yew-rs-api--pr3509-dyn-prop-0vcn3vrd.web.app (expires Mon, 04 Dec 2023 08:06:38 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 |
|
My local setup told me nothing about which Rust version is used, wow... Fixing 1.64.0 compiler support shortly I guess, there is nothing special, just |
Size ComparisonDetails
✅ None of the examples has changed their size significantly. |
Benchmark - SSRYew MasterDetails
Pull RequestDetails
|
|
Uh sorry, will check what it fails on tomorrow |
|
Wow, I passed even the benchmark lol |
Allows not only literals, e.g. "hx-on:click", but all expressions
|
You need both passing and failing tests for it. You can copy a |
|
If there are any |
There was a problem hiding this comment.
Awesome! I need this. At the moment I'm building the component linearGradient manually and it's such a pain
#[function_component(LinearGradient)]
pub fn linear_gradient(
Props {
id,
gradient_transform,
children,
}: &Props,
) -> Html {
let mut vtag = yew::virtual_dom::VTag::new("linearGradient");
vtag.add_children(children.clone());
vtag.add_attribute("id", id.clone());
if let Some(x) = gradient_transform.clone() {
vtag.add_attribute("gradientTransform", x);
}
vtag.into()
}
Now with autoprops + dyn prop labels, I can simplify this code a lot
|
I tried to add following to the // property literal
_ = ::yew::html! { <span ~"hx-on:click"="alert('Clicked!')" /> };
_ = ::yew::html! { <span ~"hx-on:click"="alert('Clicked!')" ~"hx-on:click"="alert('Clicked!')" /> };
_ = ::yew::html! { <span ~{ "hx-on:click" }={ "alert('Clicked!')" } /> };
_ = ::yew::html! { <span ~{ "hx-on:click" }={ "alert('Clicked!')" } ~{ "hx-on:click" }={ "alert('Clicked!')" } /> };
// property expr
_ = ::yew::html! { <span ~{ dyn_prop() }={ "alert('Clicked!')" } /> };
_ = ::yew::html! { <span ~{ dyn_prop() }={ "alert('Clicked!')" } ~{ dyn_prop() }={ "alert('Clicked!')" } /> };Tests ( As I was trying to find out whether any tests would help me figure out how to test the feature, I performed a quick search on all tests, only to find out that nobody tested |
Either this is an outdated comment or you missed something, because there are Wasm tests that use |
| fn to_tokens(&self, tokens: &mut TokenStream) { | ||
| tokens.extend(match self { | ||
| PropLabel::Static(dashed_name) => quote! {#dashed_name}, | ||
| PropLabel::Dynamic(expr) => quote! {#expr}, // FIXME this probably wanted its group back |
There was a problem hiding this comment.
What did you mean by this fixme?
There was a problem hiding this comment.
no idea. probably that dynamic label { ... } should be emitted as { ... }, not as ..., and so that spans are preserved that group should be saved somehow or something
There was a problem hiding this comment.
Unrelated, but it'd be better to write that to_tokens impl as
match self {
Self::Static(name) => name.to_tokens(tokens),
Self::Dynamic(expr) => expr.to_tokens(tokens),
}to avoid allocating a temporary TokenStream just to feed it into another TokenStream
| tokens.extend(match self { | ||
| Key::Static(dashed_name) => quote! { #dashed_name }, | ||
| Key::Dynamic(expr) => quote! { #expr }, | ||
| }); |
There was a problem hiding this comment.
Same here
| tokens.extend(match self { | |
| Key::Static(dashed_name) => quote! { #dashed_name }, | |
| Key::Dynamic(expr) => quote! { #expr }, | |
| }); | |
| match self { | |
| Key::Static(dashed_name) => dashed_name.to_tokens(tokens), | |
| Key::Dynamic(expr) => expr.to_tokens(tokens), | |
| } |
4 participants
Description
Partially implements features from discussion #3477. This PR adds Dynamic Prop Labels, so that anyone can write their favorite attributes like HTMX's
hx-on:click:It works by using new
PropLabelenum everywhere, which can be either aStaticHtmlDashedNamelike before, orDynamicExpr. When parsing, if it meets=token after the expression group, it will read a value following it instead of assuming that it is shorthand syntax.Checklist