Provide helpers for media queries

[futursolo]

In React, material-ui and some other hook snippet libraries provide a useMediaQuery hook to trigger re-render when the media rule changes.

However, Hooks are not coming to stable Yew until 0.19.

I am leaning towards macro generated HOC as a solution to this.

[futursolo]

Purposed Syntax:

#[derive(Properties, Clone, Debug, MediaQuery)]
pub struct CompProps {
    #[media_query("screen and (max-width: 500px)")]
    #[prop_or_default]
    pub is_small_screen: Option<bool>,

    pub other_prop: String,
}

pub struct BaseComp;

impl Component for BaseComp {
    type Properties = CompProps;
    type Message = ();

    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
        Self { props }
    }

    fn view(&self) -> Html {
        if self.props.is_small_screen {
            html! {<div>{"You are using a small screen!"}</div>}
        } else {
            html! {<div>{"You are using a big screen!"}</div>}
        }
    }

    fn change(&mut self, props: Self::Properties) -> ShouldRender {
        self.props.neq_assign(props)
    }
    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
        false
    }
}

pub type Comp = WithMediaQuery<BaseComp>;

[futursolo]

I think this might need to be postponed as yew 0.19 will also break existing struct components by making Properties RC’ed which means no mutations can be applied on props unless cloned and cloning is also not required on props anymore. Which makes HOC more difficult to implement. I think we can probably get away with it by simply waiting for the hooks to become available.