Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tracking issue for yew 0.8.0 #553

Closed
jstarry opened this issue Aug 3, 2019 · 2 comments
Closed

Tracking issue for yew 0.8.0 #553

jstarry opened this issue Aug 3, 2019 · 2 comments

Comments

@jstarry
Copy link
Member

jstarry commented Aug 3, 2019 •
edited
Loading

Required properties

Until now, there was no way to ensure that a component would receive certain properties at compile time. Components were required to handle cases where properties were not set. Furthermore, the Properties associated type must implement the Default trait.

For example, if a component had a struct as a property, you were forced to pick a default value for it or wrap it in an Option:

#[derive(PartialEq, Clone)]
pub struct GameStatus {
    pub difficulty: GameDifficulty,
    pub start: Option<Date>,
    pub end: Option<Date>,
}

#[derive(PartialEq, Clone, Default)]
pub struct Props {
    pub game_status: Option<GameStatus>,
}

This pattern forced a component to handle a default case that could have been avoided. Of course, you could always risk a runtime panic by using unwrap.

In yew 0.8, these workaround are no longer necessary since properties can be annotated as required. Yew will add a compile time guarantee that these props are present, avoiding the risk of a runtime panic. Properties must now implement the yew::Properties trait which can be derived with a macro like so:

use yew::Properties;

#[derive(PartialEq, Properties)]
pub struct Props {
    #[props(required)]
    pub game_status: GameStatus,
}

SVG support

It's now possible to render <svg> tags with Yew! This has been requested for a long time 😅. This change helped polish the html! {} macro as well since the SVG namespace uses a whole bunch of new attributes that need to be supported.

  • Dashed attribute and tag names are supported!
  • All rust keywords can now be used as attributes!

Here's a snippet of a complex svg image that works now with Yew:

html! {
    <svg width="120" height="120" viewBox="0 0 149 147" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="71" cy="99" r="5" fill="white" fill-opacity="0.75" stroke="black" stroke-width="3"/>
        <defs>
            <filter id="filter0_d" x="16.3326" y="18.4918" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
                <feOffset dy="4"/>
                <feGaussianBlur stdDeviation="2"/>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
            </filter>
        </defs>
    </svg>
}

Community Updates

Huge thanks to those who helped since the last release!

Breaking changes

  • Component::Properties associated type must implement the new Properties trait

    This change enables required properties and can be derived with #[derive(Properties)]. Additionally, the Clone + PartialEq + Default traits are no longer necessary but PartialEq is recommended for efficient updates.

    use yew::Properties;

#[derive(PartialEq, Properties)]
pub struct Props {
    #[props(required)]
    pub game_status: GameStatus,
 }

  • Callbacks no longer transform into Option types

    html! {
    <Counter initial=x onclick=Msg::ChildClicked />
}

    Props before:

    #[derive(PartialEq, Clone, Default)]
pub struct CounterProps {
    value: u32,
    onclick: Option<Callback<u32>>,
}

    Props after (note the props(required) attribute):

    #[derive(PartialEq, Properties)]
pub struct CounterProps {
    value: u32,
    #[props(required)]
    onclick: Callback<u32>,
}
@jstarry jstarry pinned this issue Aug 4, 2019
@jstarry jstarry mentioned this issue Aug 4, 2019
Closed
@jstarry
Copy link
Member Author

jstarry commented Aug 10, 2019

Changelog has been updated here: #575

@jstarry
Copy link
Member Author

jstarry commented Aug 10, 2019

Released 🎉

@jstarry jstarry closed this as completed Aug 10, 2019
@jstarry jstarry unpinned this issue Aug 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jstarry