Upgrade to Yew 0.21 (#174)

Cargo.toml

@@ -18,12 +18,12 @@ default = ["tree"]
 tree = ["id_tree"]
 
 [dependencies]
-gloo = "0.8"
+gloo = "0.10"
 id_tree = { version = "1.8", optional = true }
-implicit-clone = "0.3.5"
+implicit-clone = "0.4.1"
 wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["DomRect", "Element", "Event", "HtmlSelectElement", "DomTokenList", "CssStyleDeclaration", "Window", "MediaQueryList"] }
-yew = "0.20"
+yew = "0.21"
 yew-callbacks = "0.2.1"
 
 [workspace]

src/alert.rs

@@ -3,7 +3,7 @@ use yew::prelude::*;
 
 #[derive(Debug)]
 pub struct Alert {
-    cb: MsgCallbacks<Self>,
+    cb: AlertMsgCallbacks<Self>,
 }
 
 #[derive(Debug, PartialEq, Properties)]
@@ -33,7 +33,7 @@ pub struct AlertProps {
 }
 
 #[derive(yew_callbacks::Callbacks)]
-pub enum Msg {
+pub enum AlertMsg {
     OnCancel,
     OnConfirmClick(MouseEvent),
     OnCancelClick(MouseEvent),
@@ -41,7 +41,7 @@ pub enum Msg {
 
 impl Component for Alert {
     type Properties = AlertProps;
-    type Message = Msg;
+    type Message = AlertMsg;
 
     fn create(ctx: &Context<Self>) -> Self {
         Self {
@@ -54,19 +54,19 @@ impl Component for Alert {
         let Self::Properties { loading, .. } = ctx.props();
 
         match msg {
-            Msg::OnCancel => {
+            AlertMsg::OnCancel => {
                 if !loading {
                     onclose.emit(false);
                 }
                 false
             }
-            Msg::OnConfirmClick(_event) => {
+            AlertMsg::OnConfirmClick(_event) => {
                 if !loading {
                     onclose.emit(true);
                 }
                 false
             }
-            Msg::OnCancelClick(_event) => {
+            AlertMsg::OnCancelClick(_event) => {
                 if !loading {
                     onclose.emit(false);
                 }

src/dialog.rs

@@ -5,7 +5,7 @@ use yew::prelude::*;
 #[derive(Debug)]
 pub struct Dialog {
     title_id: AttrValue,
-    cb: MsgCallbacks<Self>,
+    cb: DialogMsgCallbacks<Self>,
 }
 
 #[derive(Debug, PartialEq, Properties)]
@@ -37,13 +37,13 @@ pub struct DialogProps {
 }
 
 #[derive(yew_callbacks::Callbacks)]
-pub enum Msg {
+pub enum DialogMsg {
     OnClose(MouseEvent),
 }
 
 impl Component for Dialog {
     type Properties = DialogProps;
-    type Message = Msg;
+    type Message = DialogMsg;
 
     fn create(ctx: &Context<Self>) -> Self {
         thread_local! {
@@ -63,7 +63,7 @@ impl Component for Dialog {
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            Msg::OnClose(_event) => {
+            DialogMsg::OnClose(_event) => {
                 ctx.props().onclose.emit(());
                 false
             }

src/numeric_input.rs

@@ -65,7 +65,7 @@ where
     pub buttons_on_the_left: bool,
 }
 
-pub enum Msg {
+pub enum NumericInputMsg {
     InputUpdate(String),
     Up,
     Down,
@@ -83,7 +83,7 @@ where
         + PartialOrd
         + 'static,
 {
-    type Message = Msg;
+    type Message = NumericInputMsg;
     type Properties = NumericInputProps<T>;
 
     fn create(_ctx: &Context<Self>) -> Self {
@@ -107,16 +107,16 @@ where
         };
 
         match msg {
-            Msg::InputUpdate(new_value) => {
+            NumericInputMsg::InputUpdate(new_value) => {
                 if let Ok(new_value) = new_value.trim().parse::<T>() {
                     update_value(new_value)
                 } else {
                     false
                 }
             }
-            Msg::Up => update_value(ctx.props().value + ctx.props().increment),
+            NumericInputMsg::Up => update_value(ctx.props().value + ctx.props().increment),
-            Msg::Down => update_value(ctx.props().value - ctx.props().increment),
+            NumericInputMsg::Down => update_value(ctx.props().value - ctx.props().increment),
-            Msg::Noop => false,
+            NumericInputMsg::Noop => false,
         }
     }
 
@@ -157,13 +157,13 @@ where
                     <Button
                         icon={Icon::ChevronUp}
                         disabled={button_up_disabled}
-                        onclick={ctx.link().callback(|_| Msg::Up)}
+                        onclick={ctx.link().callback(|_| NumericInputMsg::Up)}
                         {intent}
                     />
                     <Button
                         icon={Icon::ChevronDown}
                         disabled={button_down_disabled}
-                        onclick={ctx.link().callback(|_| Msg::Down)}
+                        onclick={ctx.link().callback(|_| NumericInputMsg::Down)}
                         {intent}
                     />
                 </ButtonGroup>
@@ -181,15 +181,15 @@ where
                 value={self.input.clone()}
                 oninput={ctx.link().callback(|e: InputEvent| {
                     let value = e.target_unchecked_into::<HtmlInputElement>().value();
-                    Msg::InputUpdate(value)
+                    NumericInputMsg::InputUpdate(value)
                 })}
                 onkeydown={ctx.link().callback(|e: KeyboardEvent| {
                     if e.key() == "ArrowUp" {
-                        Msg::Up
+                        NumericInputMsg::Up
                     } else if e.key() == "ArrowDown" {
-                        Msg::Down
+                        NumericInputMsg::Down
                     } else {
-                        Msg::Noop
+                        NumericInputMsg::Noop
                     }
                 })}
             />

src/overlay.rs

@@ -46,7 +46,7 @@ pub struct OverlayProps {
     pub children: Children,
 }
 
-pub enum Msg {
+pub enum OverlayMsg {
     OnKeyDown(KeyboardEvent),
     OnClick(MouseEvent),
     FocusFirstElement,
@@ -56,13 +56,13 @@ pub enum Msg {
 
 impl Component for Overlay {
     type Properties = OverlayProps;
-    type Message = Msg;
+    type Message = OverlayMsg;
 
     fn create(ctx: &Context<Self>) -> Self {
         let content_ref = NodeRef::default();
 
         let document_focus_closure = {
-            let callback = ctx.link().callback(|_| Msg::FocusFirstElement);
+            let callback = ctx.link().callback(|_| OverlayMsg::FocusFirstElement);
             let content_ref = content_ref.clone();
             Closure::new(Box::new(move |_event| {
                 let active_element_in_content = content_ref
@@ -146,15 +146,15 @@ impl Component for Overlay {
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            Msg::OnKeyDown(event) => {
+            OverlayMsg::OnKeyDown(event) => {
                 if event.key() == "Escape" {
                     ctx.props().onclose.emit(());
                 }
                 false
             }
-            Msg::OnClick(_event) => {
+            OverlayMsg::OnClick(_event) => {
                 if self.callback_timeout.is_none() {
-                    let callback = ctx.link().callback(|_| Msg::Close);
+                    let callback = ctx.link().callback(|_| OverlayMsg::Close);
                     self.callback_timeout
                         .replace(Timeout::new(0, move || callback.emit(())));
                 } else {
@@ -162,7 +162,7 @@ impl Component for Overlay {
                 }
                 false
             }
-            Msg::FocusFirstElement => {
+            OverlayMsg::FocusFirstElement => {
                 // always delay focus manipulation to just before repaint to prevent scroll jumping
                 gloo::utils::window()
                     .request_animation_frame(
@@ -171,7 +171,7 @@ impl Component for Overlay {
                     .unwrap();
                 false
             }
-            Msg::FocusLastElement => {
+            OverlayMsg::FocusLastElement => {
                 // always delay focus manipulation to just before repaint to prevent scroll jumping
                 gloo::utils::window()
                     .request_animation_frame(
@@ -180,7 +180,7 @@ impl Component for Overlay {
                     .unwrap();
                 false
             }
-            Msg::Close => {
+            OverlayMsg::Close => {
                 self.callback_timeout.take();
                 ctx.props().onclose.emit(());
                 false
@@ -216,14 +216,14 @@ impl Component for Overlay {
                     // NOTE: I am not 100% sure this is correct. In Blueprint they capture the
                     //       Shift+Tab combination but it looks like it's more for historic
                     //       reason... well, it seems to work on current Chrome and Firefox so...
-                    onfocus={ctx.link().callback(|_| Msg::FocusLastElement)}
+                    onfocus={ctx.link().callback(|_| OverlayMsg::FocusLastElement)}
                 />
                 {backdrop}
                 <div
                     class={classes!("bp3-overlay-content", class.clone())}
                     {style}
                     ref={self.content_ref.clone()}
-                    onclick={ctx.link().callback(Msg::OnClick)}
+                    onclick={ctx.link().callback(OverlayMsg::OnClick)}
                 >
                     {for children.iter()}
                 </div>
@@ -231,7 +231,7 @@ impl Component for Overlay {
                     class="bp3-overlay-end-focus-trap"
                     ref={self.start_focus_trap.clone()}
                     tabindex=0
-                    onfocus={ctx.link().callback(|_| Msg::FocusFirstElement)}
+                    onfocus={ctx.link().callback(|_| OverlayMsg::FocusFirstElement)}
                 />
                 </>
             }
@@ -248,8 +248,8 @@ impl Component for Overlay {
                         Dark.classes_with_override(*dark),
                     )}
                     aria-live="polite"
-                    onkeydown={ctx.link().callback(Msg::OnKeyDown)}
+                    onkeydown={ctx.link().callback(OverlayMsg::OnKeyDown)}
-                    onclick={ctx.link().callback(Msg::OnClick)}
+                    onclick={ctx.link().callback(OverlayMsg::OnClick)}
                 >
                     {inner}
                 </div>
@@ -262,7 +262,7 @@ impl Component for Overlay {
 
         if *open && !self.initial_open {
             self.initial_open = true;
-            ctx.link().send_message(Msg::FocusFirstElement);
+            ctx.link().send_message(OverlayMsg::FocusFirstElement);
         }
     }
 }

src/text_area.rs

@@ -48,13 +48,10 @@ pub fn text_area(
 ) -> Html {
     {
         let node_ref = r#ref.clone();
-        use_effect_with_deps(
+        use_effect_with(node_ref, move |node_ref| {
-            move |node_ref| {
+            let input = node_ref.cast::<HtmlTextAreaElement>().unwrap();
-                let input = node_ref.cast::<HtmlTextAreaElement>().unwrap();
+            resize(&input);
-                resize(&input);
+        });
-            },
-            node_ref,
-        );
     }
     let oninput = {
         let grow_vertically = *grow_vertically;

yewprint-doc/Cargo.toml

@@ -16,7 +16,7 @@ crate-type = ["cdylib"]
 # code size when deploying.
 console_error_panic_hook = { version = "0.1.7", optional = true }
 gloo = "0.8"
-implicit-clone = "0.3.3"
+implicit-clone = "0.4.1"
 wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["Window", "MediaQueryList", "Event", "HtmlInputElement"] }
 # `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
@@ -25,8 +25,8 @@ web-sys = { version = "0.3", features = ["Window", "MediaQueryList", "Event", "H
 #
 # Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
 wee_alloc = { version = "0.4.5", optional = true }
-yew = { version = "0.20", features = ["csr"] }
+yew = { version = "0.21", features = ["csr"] }
-yew-router = "0.17"
+yew-router = "0.18"
 yewprint = { path = ".." }
 
 [build-dependencies]

yewprint-doc/src/example.rs

@@ -5,7 +5,7 @@ pub struct ExampleContainer {
     collapsed: bool,
 }
 
-pub enum Msg {
+pub enum ExampleContainerMsg {
     ToggleSource,
 }
 
@@ -18,7 +18,7 @@ pub struct ExampleContainerProps {
 }
 
 impl Component for ExampleContainer {
-    type Message = Msg;
+    type Message = ExampleContainerMsg;
     type Properties = ExampleContainerProps;
 
     fn create(_ctx: &Context<Self>) -> Self {
@@ -27,7 +27,7 @@ impl Component for ExampleContainer {
 
     fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            Msg::ToggleSource => self.collapsed ^= true,
+            ExampleContainerMsg::ToggleSource => self.collapsed ^= true,
         }
         true
     }
@@ -57,7 +57,7 @@ impl Component for ExampleContainer {
                         fill={{true}}
                         intent={{Intent::Primary}}
                         minimal={{true}}
-                        onclick={ctx.link().callback(|_| Msg::ToggleSource)}
+                        onclick={ctx.link().callback(|_| ExampleContainerMsg::ToggleSource)}
                     >
                         {"View source"}
                     </Button>

yewprint-doc/src/input_group/example.rs

@@ -60,9 +60,9 @@ impl Component for Example {
             }
             Msg::UpdatePassword(value) => {
                 self.password_strength = match value.len() {
-                    n if n == 0 => html!(),
+                    0 => html!(),
-                    n if n < 4 => html!(<Tag>{"weak"}</Tag>),
+                    1..=4 => html!(<Tag>{"weak"}</Tag>),
-                    n if n < 8 => html!(<Tag>{"medium"}</Tag>),
+                    5..=8 => html!(<Tag>{"medium"}</Tag>),
                     _ => html!(<Tag>{"strong"}</Tag>),
                 };
 

yewprint-doc/src/text/example.rs

@@ -12,7 +12,7 @@ pub fn example(props: &ExampleProps) -> Html {
     html! {
         <div style="width: 150px; height: 20px">
             <Text ellipsize={props.ellipsize}>
-                {&props.text}
+                {&*props.text}
             </Text>
         </div>
     }