yew组件

一个简单的宏，用于生成yew组件

一个简单的宏，可以从单个结构体声明生成yew组件

如何使用

1. 在您的Cargo.toml中导入宏

yew-component = "<version-number-here>"
yewtil = "<version-number-here>"

2. 声明您的组件

use yew_component::component;
use yew::{ShouldRender, Html, html};

component! {
    pub struct SampleComponent {
        // Declare your Message variants here
        type Message = {
            Login,
            SignUp,
            OnDataLoad
        }

        // Declare your props here
        type Props = {
            enabled: bool,
            error_message: Option<String>,
        }

        // Declare your state here
        type State = {
            value: u32,
            username: String,
        }

        // Declare your update function as well
        fn update(&mut self, msg: Self::Message) -> ShouldRender {
            match msg {
                Self::Message::Login => {
                    // self.state contains the state value
                    self.state.value = 2;
                    true
                }
                Self::Message::SignUp => {
                    self.state.value = 1;
                    true
                }
                Self::Message::OnDataLoad => {
                    self.state.username = get_data();
                    false
                }
            }
        }

        // Declare the function that will create your state
        fn create(link: &mut ComponentLink<SampleComponent>) -> Self {
            Self {
                value: 0,
                username: String::default()
            }
        }

        fn view(&self) -> Html {
            html! {
                <div>
                    {
                        format!(
                            "My sample component. Value is: {}",
                            self.state.value
                        )
                    }
                </div>
            }
        }
    }
}

3. 它将自动展开为以下内容

pub enum SampleComponentMessage {
    Login,
    SignUp,
    OnDataLoad
}

#[derive(yew::Properties, Clone, Debug, PartialEq)]
pub struct SampleComponentProps {
    enabled: bool,
    error_message: Option<String>,
}

#[derive(Clone, Debug, PartialEq)]
pub struct SampleComponentState {
    value: u32,
    username: String,
}

impl SampleComponentState {
    fn create(link: &mut ComponentLink<SampleComponent>) -> Self {
        Self {
            value: 0,
            username: String::default()
        }
    }
}

pub struct SampleComponent {
    link: yew::ComponentLink<Self>,
    props: SampleComponentProps,
    state: SampleComponentState,
}

impl yew::Component for SampleComponent {
    type Properties = SampleComponentProps;
    type Message = SampleComponentMessage;

    fn create(props: Self::Properties, mut link: yew::ComponentLink<Self>) -> Self {
        let state = SampleComponentState::create(&mut link);
        Self {
            link,
            props,
            state,
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Self::Message::Login => {
                self.state.value = 2;
                true
            }
            Self::Message::SignUp => {
                self.state.value = 1;
                true
            }
            Self::Message::OnDataLoad => {
                self.state.username = get_data();
                false
            }
        }
    }

    fn change(&mut self, props: Self::Properties) -> yew::ShouldRender {
        use yewtil::NeqAssign;

        self.props.neq_assign(props)
    }

    fn view(&self) -> Html {
        html! {
            <div>
                {
                    format!(
                        "My sample component. Value is: {}",
                        self.state.value
                    )
                }
            </div>
        }
    }
}

这使得生成新组件变得更容易