Skip to content

Conversation

@cecton
Copy link
Contributor

@cecton cecton commented Dec 13, 2022

Description

Since Classes is now cheap to clone, it only makes sense to be able to pass a
reference to a Classes to an extend method and having it clone all the things
automatically.

This is on par with &AttrValue being accepted in components properties.

Real life example:

use yew::prelude::*;
use yew::virtual_dom::AttrValue;

#[derive(Clone, PartialEq, Properties)]
pub struct ButtonGroupProps {
    #[prop_or_default]
    pub minimal: bool,
    #[prop_or_default]
    pub vertical: bool,
    #[prop_or_default]
    pub fill: bool,
    #[prop_or_default]
    pub large: bool,
    #[prop_or_default]
    pub style: Option<AttrValue>,
    #[prop_or_default]
    pub children: html::Children,
    #[prop_or_default]
    pub class: Classes,
}

#[function_component(ButtonGroup)]
pub fn button_group(props: &ButtonGroupProps) -> Html {
    let ButtonGroupProps {
        minimal,
        vertical,
        fill,
        large,
        style,
        children,
        class,
    } = props;

    html! {
        <div
            class={classes!(
                "bp3-button-group",
                minimal.then_some("bp3-minimal"),
                fill.then_some("bp3-fill"),
                large.then_some("bp3-large"),
                vertical.then_some("bp3-vertical"),
                class,              // <--- this PR change
            )}
            {style}                 // <-- already supported for AttrValue
        >
            {children.clone()}
        </div>
    }
}

Checklist

  • I have reviewed my own code
  • I have added tests

@github-actions
Copy link

Visit the preview URL for this PR (updated for commit 81acbcf):

https://yew-rs-api--pr3038-add-impl-from-ref-cl-hmjssapu.web.app

(expires Tue, 20 Dec 2022 14:39:42 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

@github-actions
Copy link

Benchmark - SSR

Yew Master

Details
Benchmark Round Min (ms) Max (ms) Mean (ms) Standard Deviation
Baseline 10 344.252 345.825 344.792 0.499
Hello World 10 654.050 659.326 655.463 2.013
Function Router 10 2261.310 2274.487 2267.688 3.809
Concurrent Task 10 1008.314 1009.682 1009.000 0.463

Pull Request

Details
Benchmark Round Min (ms) Max (ms) Mean (ms) Standard Deviation
Baseline 10 344.243 344.933 344.562 0.238
Hello World 10 646.877 651.143 648.079 1.560
Function Router 10 2284.957 2296.601 2290.855 3.548
Concurrent Task 10 1008.222 1009.675 1008.965 0.457

@github-actions
Copy link

Size Comparison

Details
examples master (KB) pull request (KB) diff (KB) diff (%)
async_clock 108.258 108.259 +0.001 +0.001%
boids 172.289 172.295 +0.006 +0.003%
communication_child_to_parent 92.363 92.360 -0.003 -0.003%
communication_grandchild_with_grandparent 106.797 106.799 +0.002 +0.002%
communication_grandparent_to_grandchild 102.658 102.652 -0.006 -0.006%
communication_parent_to_child 89.445 89.444 -0.001 -0.001%
contexts 109.335 109.336 +0.001 +0.001%
counter 87.386 87.385 -0.001 -0.001%
counter_functional 87.802 87.798 -0.004 -0.004%
dyn_create_destroy_apps 90.233 90.234 +0.001 +0.001%
file_upload 101.708 101.706 -0.002 -0.002%
function_memory_game 166.475 166.475 0 0.000%
function_router 350.031 350.035 +0.004 +0.001%
function_todomvc 161.419 161.418 -0.001 -0.001%
futures 226.534 226.535 +0.001 +0.000%
game_of_life 108.142 108.142 0 0.000%
immutable 183.999 183.999 0 0.000%
inner_html 83.808 83.807 -0.001 -0.001%
js_callback 113.015 113.009 -0.006 -0.005%
keyed_list 197.806 197.808 +0.002 +0.001%
mount_point 86.957 86.956 -0.001 -0.001%
nested_list 114.942 114.942 0 0.000%
node_refs 94.876 94.872 -0.004 -0.004%
password_strength 1552.856 1552.857 +0.001 +0.000%
portals 98.146 98.146 0 0.000%
router 320.127 320.122 -0.005 -0.002%
simple_ssr 153.047 153.056 +0.009 +0.006%
ssr_router 394.512 394.511 -0.001 -0.000%
suspense 110.762 110.762 0 0.000%
timer 90.282 90.279 -0.003 -0.003%
todomvc 142.749 142.748 -0.001 -0.001%
two_apps 88.016 88.014 -0.002 -0.002%
web_worker_fib 154.376 154.375 -0.001 -0.001%
webgl 86.532 86.533 +0.001 +0.001%

✅ None of the examples has changed their size significantly.

Copy link
Member

@WorldSEnder WorldSEnder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense to me to support this. Lgtm

Copy link
Member

@ranile ranile left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, this is a nice addition!

@ranile ranile merged commit d14fcd2 into yewstack:master Dec 13, 2022
@cecton cecton deleted the add-impl-from-ref-classes branch December 14, 2022 05:10
@WorldSEnder WorldSEnder added the A-yew Area: The main yew crate label Jan 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-yew Area: The main yew crate

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants