Update to yew 0.19

README.md

@@ -10,7 +10,7 @@ use yew::html;
 
 html! {
     <MatButton label="Click me!" />
-}
+};
 ```
 
 ## Getting started

material-yew/Cargo.toml

@@ -14,7 +14,7 @@ description = "Yew wrapper for Material Web Components"
 
 [dependencies]
 wasm-bindgen = "0.2"
-yew = { version = "0.18", default-features = false, features = ["web_sys"] }
+yew = { version = "0.19"}
 js-sys = "0.3"
 paste = "1.0"
 gloo = "0.2"

material-yew/src/button.rs

@@ -1,7 +1,7 @@
 use crate::bool_to_option;
-use std::borrow::Cow;
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
 
 #[wasm_bindgen(module = "/build/mwc-button.js")]
 extern "C" {
@@ -19,11 +19,11 @@ loader_hack!(Button);
 /// Props for [`MatButton`]
 ///
 /// [MWC Documentation for properties](https://github.com/material-components/material-components-web-components/tree/master/packages/button#propertiesattributes)
-#[derive(Debug, Properties, Clone)]
+#[derive(Debug, Properties, PartialEq, Clone)]
 pub struct ButtonProps {
     pub label: String,
     #[prop_or_default]
-    pub icon: Option<Cow<'static, str>>,
+    pub icon: Option<AttrValue>,
     #[prop_or_default]
     pub raised: bool,
     #[prop_or_default]
@@ -43,16 +43,16 @@ component!(
     ButtonProps,
     |props: &ButtonProps| {
         html! {
-            <mwc-button
-            icon=props.icon.clone()
-            label=props.label.clone()
-            disabled=props.disabled
-            raised=bool_to_option(props.raised)
-            unelevated=bool_to_option(props.unelevated)
-            outlined=bool_to_option(props.outlined)
-            dense=bool_to_option(props.dense)
-            trailingIcon=bool_to_option(props.trailing_icon)
-            ></mwc-button>
+             <mwc-button
+             icon={props.icon.clone()}
+             label={props.label.clone()}
+             disabled={props.disabled}
+             raised={bool_to_option(props.raised)}
+             unelevated={bool_to_option(props.unelevated)}
+             outlined={bool_to_option(props.outlined)}
+             dense={bool_to_option(props.dense)}
+             trailingIcon={bool_to_option(props.trailing_icon)}
+             ></mwc-button>
         }
     },
     Button,

material-yew/src/checkbox.rs

@@ -1,9 +1,9 @@
 use crate::bool_to_option;
 use gloo::events::EventListener;
-use std::borrow::Cow;
 use wasm_bindgen::prelude::*;
 use web_sys::{Element, Node};
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
 
 #[wasm_bindgen(module = "/build/mwc-checkbox.js")]
 extern "C" {
@@ -27,7 +27,6 @@ loader_hack!(Checkbox);
 ///
 /// [MWC Documentation](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox)
 pub struct MatCheckbox {
-    props: CheckboxProps,
     node_ref: NodeRef,
     change_listener: Option<EventListener>,
 }
@@ -38,7 +37,7 @@ pub struct MatCheckbox {
 ///
 /// - [Properties](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox#propertiesattributes)
 /// - [Events](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox#events)
-#[derive(Debug, Properties, Clone)]
+#[derive(Debug, Properties, PartialEq, Clone)]
 pub struct CheckboxProps {
     #[prop_or_default]
     pub checked: bool,
@@ -47,7 +46,7 @@ pub struct CheckboxProps {
     #[prop_or_default]
     pub disabled: bool,
     #[prop_or_default]
-    pub value: Cow<'static, str>,
+    pub value: Option<AttrValue>,
     #[prop_or_default]
     pub reduced_touch_target: bool,
     /// Binds to `change` event on `mwc-checkbox`
@@ -61,42 +60,34 @@ impl Component for MatCheckbox {
     type Message = ();
     type Properties = CheckboxProps;
 
-    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(_: &Context<Self>) -> Self {
         Checkbox::ensure_loaded();
         Self {
-            props,
             node_ref: NodeRef::default(),
             change_listener: None,
         }
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        false
-    }
-
-    fn change(&mut self, props: Self::Properties) -> bool {
-        self.props = props;
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
         html! {
-              <mwc-checkbox
-                  indeterminate=bool_to_option(self.props.indeterminate)
-                  disabled=self.props.disabled
-                  value=self.props.value.clone()
-                  reducedTouchTarget=bool_to_option(self.props.reduced_touch_target)
-                  ref=self.node_ref.clone()
-              ></mwc-checkbox>
+               <mwc-checkbox
+                   indeterminate={bool_to_option(props.indeterminate)}
+                   disabled={props.disabled}
+                   value={props.value.clone()}
+                   reducedTouchTarget={bool_to_option(props.reduced_touch_target)}
+                   ref={self.node_ref.clone()}
+               ></mwc-checkbox>
         }
     }
 
-    fn rendered(&mut self, _first_render: bool) {
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
+        let props = ctx.props();
         let element = self.node_ref.cast::<Checkbox>().unwrap();
-        element.set_checked(self.props.checked);
+        element.set_checked(props.checked);
 
         if self.change_listener.is_none() {
-            let callback = self.props.onchange.clone();
+            let callback = props.onchange.clone();
             let target = self.node_ref.cast::<Element>().unwrap();
             self.change_listener = Some(EventListener::new(&target, "change", move |_| {
                 callback.emit(element.checked());

material-yew/src/circular_progress.rs

@@ -18,7 +18,7 @@ loader_hack!(CircularProgress);
 /// Props for [`MatCircularProgress`]
 ///
 /// [MWC Documentation for properties](https://github.com/material-components/material-components-web-components/tree/master/packages/circular-progress#propertiesattributes)
-#[derive(Debug, Properties, Clone)]
+#[derive(Debug, Properties, PartialEq, Clone)]
 pub struct CircularProgressProps {
     #[prop_or_default]
     pub indeterminate: bool,
@@ -35,12 +35,12 @@ component!(
     CircularProgressProps,
     |props: &CircularProgressProps| {
         html! {
-            <mwc-circular-progress
-                indeterminate=bool_to_option(props.indeterminate)
-                progress=to_option_string(props.progress)
-                density=to_option_string(props.density)
-                closed=bool_to_option(props.closed)
-            ></mwc-circular-progress>
+             <mwc-circular-progress
+                 indeterminate={bool_to_option(props.indeterminate)}
+                 progress={to_option_string(props.progress)}
+                 density={to_option_string(props.density)}
+                 closed={bool_to_option(props.closed)}
+             ></mwc-circular-progress>
         }
     },
     CircularProgress,

material-yew/src/circular_progress_four_color.rs

@@ -18,7 +18,7 @@ loader_hack!(CircularProgressFourColor);
 /// Props for [`MatCircularProgressFourColor`]
 ///
 /// [MWC Documentation for properties](https://github.com/material-components/material-components-web-components/tree/master/packages/circular-progress-four-color#propertiesattributes)
-#[derive(Debug, Properties, Clone)]
+#[derive(Debug, Properties, PartialEq, Clone)]
 pub struct CircularProgressFourColorProps {
     #[prop_or_default]
     pub indeterminate: bool,
@@ -35,12 +35,12 @@ component!(
     CircularProgressFourColorProps,
     |props: &CircularProgressFourColorProps| {
         html! {
-        <mwc-circular-progress-four-color
-            indeterminate=bool_to_option(props.indeterminate)
-            progress=to_option_string(props.progress)
-            density=to_option_string(props.density)
-            closed=bool_to_option(props.closed)
-        ></mwc-circular-progress-four-color>
+         <mwc-circular-progress-four-color
+             indeterminate={bool_to_option(props.indeterminate)}
+             progress={to_option_string(props.progress)}
+             density={to_option_string(props.density)}
+             closed={bool_to_option(props.closed)}
+         ></mwc-circular-progress-four-color>
         }
     },
     CircularProgressFourColor,

material-yew/src/dialog.rs

@@ -4,10 +4,10 @@ pub use dialog_action::*;
 
 use crate::{bool_to_option, event_details_into, WeakComponentLink};
 use gloo::events::EventListener;
-use std::borrow::Cow;
 use wasm_bindgen::prelude::*;
 use web_sys::{Element, Node};
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
 
 #[wasm_bindgen(module = "/build/mwc-dialog.js")]
 extern "C" {
@@ -42,7 +42,6 @@ loader_hack!(Dialog);
 /// In order to pass actions, [`MatDialogAction`] component should be
 /// used.
 pub struct MatDialog {
-    props: DialogProps,
     node_ref: NodeRef,
     opening_listener: Option<EventListener>,
     opened_listener: Option<EventListener>,
@@ -56,7 +55,7 @@ pub struct MatDialog {
 ///
 /// - [Properties](https://github.com/material-components/material-components-web-components/tree/master/packages/dialog#propertiesattributes)
 /// - [Events](https://github.com/material-components/material-components-web-components/tree/master/packages/dialog#events)
-#[derive(Properties, Clone)]
+#[derive(Properties, PartialEq, Clone)]
 pub struct DialogProps {
     #[prop_or_default]
     pub open: bool,
@@ -65,17 +64,17 @@ pub struct DialogProps {
     #[prop_or_default]
     pub stacked: bool,
     #[prop_or_default]
-    pub heading: Option<Cow<'static, str>>,
+    pub heading: Option<AttrValue>,
     #[prop_or_default]
-    pub scrim_click_action: Option<Cow<'static, str>>,
+    pub scrim_click_action: Option<AttrValue>,
     #[prop_or_default]
-    pub escape_key_action: Option<Cow<'static, str>>,
+    pub escape_key_action: Option<AttrValue>,
     #[prop_or_default]
-    pub default_action: Option<Cow<'static, str>>,
+    pub default_action: Option<AttrValue>,
     #[prop_or_default]
-    pub action_attribute: Option<Cow<'static, str>>,
+    pub action_attribute: Option<AttrValue>,
     #[prop_or_default]
-    pub initial_focus_attribute: Option<Cow<'static, str>>,
+    pub initial_focus_attribute: Option<AttrValue>,
     /// Binds to `opening` event on `mwc-dialog`
     ///
     /// See events docs to learn more.
@@ -113,11 +112,13 @@ impl Component for MatDialog {
     type Message = ();
     type Properties = DialogProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        props.dialog_link.borrow_mut().replace(link);
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.props()
+            .dialog_link
+            .borrow_mut()
+            .replace(ctx.link().clone());
         Dialog::ensure_loaded();
         Self {
-            props,
             node_ref: NodeRef::default(),
             opening_listener: None,
             opened_listener: None,
@@ -126,58 +127,52 @@ impl Component for MatDialog {
         }
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        false
-    }
-
-    fn change(&mut self, props: Self::Properties) -> bool {
-        self.props = props;
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
         html! {
         <mwc-dialog
-            open=self.props.open
-            hideActions=bool_to_option(self.props.hide_action)
-            stacked=bool_to_option(self.props.stacked)
-            heading=self.props.heading.clone()
-            scrimClickAction=self.props.scrim_click_action.clone()
-            escapeKeyAction=self.props.escape_key_action.clone()
-            defaultAction=self.props.default_action.clone()
-            actionAttribute=self.props.action_attribute.clone()
-            initialFocusAttribute=self.props.initial_focus_attribute.clone()
-            ref=self.node_ref.clone()>
-            { self.props.children.clone() }
+            open={props.open}
+            hideActions={bool_to_option(props.hide_action)}
+            stacked={bool_to_option(props.stacked)}
+            heading={props.heading.clone()}
+            scrimClickAction={props.scrim_click_action.clone()}
+            escapeKeyAction={props.escape_key_action.clone()}
+            defaultAction={props.default_action.clone()}
+            actionAttribute={props.action_attribute.clone()}
+            initialFocusAttribute={props.initial_focus_attribute.clone()}
+            ref={self.node_ref.clone()}
+            >
+            {props.children.clone()}
         </mwc-dialog>
-                }
+               }
     }
 
-    fn rendered(&mut self, _first_render: bool) {
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
+        let props = ctx.props();
         let element = self.node_ref.cast::<Element>().unwrap();
         if self.opening_listener.is_none() {
-            let onopening = self.props.onopening.clone();
+            let onopening = props.onopening.clone();
             self.opening_listener = Some(EventListener::new(&element, "opening", move |_| {
                 onopening.emit(())
             }));
         }
 
         if self.opened_listener.is_none() {
-            let onopened = self.props.onopened.clone();
+            let onopened = props.onopened.clone();
             self.opened_listener = Some(EventListener::new(&element, "opened", move |_| {
                 onopened.emit(())
             }));
         }
 
         if self.closing_listener.is_none() {
-            let onclosing = self.props.onclosing.clone();
+            let onclosing = props.onclosing.clone();
             self.closing_listener = Some(EventListener::new(&element, "closing", move |event| {
                 onclosing.emit(action_from_event(event))
             }));
         }
 
         if self.closed_listener.is_none() {
-            let onclosed = self.props.onclosed.clone();
+            let onclosed = props.onclosed.clone();
             self.closed_listener = Some(EventListener::new(&element, "closed", move |event| {
                 onclosed.emit(action_from_event(event))
             }));