Merge pull request #34 from futursolo/update-yew-0-20

Update to Yew 0.20.

crates/fl-www-agents/Cargo.toml

@@ -21,8 +21,8 @@ console_log = { version = "0.2.0", features = ["color"] }
 log = "0.4.17"
 console_error_panic_hook = "0.1.7"
 
-yew = "0.19.3"
-yew-agent = "0.1.0"
+yew = "0.20.0"
+yew-agent = "0.2.0"
 
 # bincode = "1.0"
 serde = "1.0.139"
@@ -32,4 +32,8 @@ once_cell = "1.13.0"
 pulldown-cmark = { version = "0.9.2", default-features = false }
 unicode-segmentation = "1.9.0"
 
-syntect = { version = "5.0.0", default-features = false, features = ["default-syntaxes", "default-themes", "regex-fancy"] }
+syntect = { version = "5.0.0", default-features = false, features = [
+    "default-syntaxes",
+    "default-themes",
+    "regex-fancy",
+] }

crates/fl-www-agents/src/bin/fl-agent-highlight.rs

@@ -1,4 +1,4 @@
-use yew_agent::Threaded;
+use yew_agent::PublicWorker;
 
 fn main() {
     use log::Level;

crates/fl-www-agents/src/bin/fl-agent-markdown.rs

@@ -1,4 +1,4 @@
-use yew_agent::Threaded;
+use yew_agent::PublicWorker;
 
 fn main() {
     use log::Level;

crates/fl-www-agents/src/highlight/mod.rs

@@ -1,6 +1,6 @@
 use serde::{Deserialize, Serialize};
 use styling::{Colour, ThemeKind};
-use yew_agent::{Agent, AgentLink, HandlerId, Public};
+use yew_agent::{HandlerId, Public, Worker as Agent, WorkerLink as AgentLink};
 
 use crate::prelude::*;
 use crate::types::Msg;
@@ -56,8 +56,8 @@ impl Agent for Worker {
     }
 
     fn handle_input(&mut self, msg: Self::Input, who: HandlerId) {
-        self.link
-            .send_future(async move { Msg::Respond((highlight(msg).await, who)) })
+        let link = self.link.clone();
+        spawn_local(async move { link.send_message(Msg::Respond((highlight(msg).await, who))) })
     }
 
     fn name_of_resource() -> &'static str {

crates/fl-www-agents/src/markdown/mod.rs

@@ -1,7 +1,7 @@
 use fl_www_core::markdown::{HtmlCreator, Root};
 use serde::{Deserialize, Serialize};
 use unicode_segmentation::UnicodeSegmentation;
-use yew_agent::{Agent, AgentLink, HandlerId, Public};
+use yew_agent::{HandlerId, Public, Worker as Agent, WorkerLink as AgentLink};
 
 use crate::prelude::*;
 use crate::types::Msg;
@@ -65,8 +65,8 @@ impl Agent for Worker {
     }
 
     fn handle_input(&mut self, msg: Self::Input, who: HandlerId) {
-        self.link
-            .send_future(async move { Msg::Respond((markdown(msg).await, who)) })
+        let link = self.link.clone();
+        spawn_local(async move { link.send_message(Msg::Respond((markdown(msg).await, who))) })
     }
 
     fn name_of_resource() -> &'static str {

crates/fl-www-cli/src/feed.rs

@@ -52,10 +52,10 @@ impl Feed {
                     .link(
                         LinkBuilder::default()
                             .href(format!("https://www.futures.moe/zh/writings/{}", m.slug))
-                            .hreflang(m.lang.as_str().to_owned())
+                            .hreflang(Some(m.lang.as_str().to_owned()))
                             .mime_type(Some("text/html".to_owned()))
-                            .rel("alternate")
-                            .title(m.title.to_string())
+                            .rel("alternate".to_string())
+                            .title(Some(m.title.to_string()))
                             .build(),
                     )
                     .summary(Text::plain(&m.summary))
@@ -77,10 +77,10 @@ impl Feed {
                     .link(
                         LinkBuilder::default()
                             .href(format!("https://www.futures.moe/zh/writings/{}", m.slug))
-                            .hreflang(m.lang.as_str().to_owned())
+                            .hreflang(Some(m.lang.as_str().to_owned()))
                             .mime_type(Some("text/html".to_owned()))
-                            .rel("alternate")
-                            .title(m.title.to_string())
+                            .rel("alternate".to_string())
+                            .title(Some(m.title.to_string()))
                             .build(),
                     )
                     .summary(Text::plain(&m.summary))
@@ -94,16 +94,16 @@ impl Feed {
             .entries(zh_entries)
             .link(
                 LinkBuilder::default()
-                    .href("https://www.futures.moe/zh/")
-                    .hreflang(Language::Chinese.as_str().to_owned())
+                    .href("https://www.futures.moe/zh/".to_string())
+                    .hreflang(Some(Language::Chinese.as_str().to_owned()))
                     .mime_type(Some("text/html".to_owned()))
-                    .rel("alternate")
+                    .rel("alternate".to_string())
                     .title(Some("星川の秘密部屋".to_string()))
                     .build(),
             )
             .generator(
                 GeneratorBuilder::default()
-                    .value("Furtherland")
+                    .value("Furtherland".to_string())
                     .uri(Some(
                         "https://github.com/futursolo/furtherland-www".to_string(),
                     ))
@@ -118,16 +118,16 @@ impl Feed {
             .entries(en_entries)
             .link(
                 LinkBuilder::default()
-                    .href("https://www.futures.moe/en/")
-                    .hreflang(Language::Chinese.as_str().to_owned())
+                    .href("https://www.futures.moe/en/".to_string())
+                    .hreflang(Some(Language::Chinese.as_str().to_owned()))
                     .mime_type(Some("text/html".to_owned()))
-                    .rel("alternate")
+                    .rel("alternate".to_string())
                     .title(Some("Hoshikawa's Secret Room".to_string()))
                     .build(),
             )
             .generator(
                 GeneratorBuilder::default()
-                    .value("Furtherland")
+                    .value("Furtherland".to_string())
                     .uri(Some(
                         "https://github.com/futursolo/furtherland-www".to_string(),
                     ))

crates/fl-www-common/Cargo.toml

@@ -18,8 +18,12 @@ gloo = { version = "0.8.0", features = ["futures"] }
 
 log = "0.4.17"
 
-yew = "0.19.3"
-stylist = { git = "https://github.com/futursolo/stylist-rs", branch = "css-vars", features = ["yew_integration", "macros", "parser"], default-features = false }
+yew = "0.20.0"
+stylist = { git = "https://github.com/futursolo/stylist-rs", branch = "css-vars", features = [
+  "yew_integration",
+  "macros",
+  "parser",
+], default-features = false }
 
 serde = "1.0.139"
 serde_json = "1.0.82"

crates/fl-www-common/src/hooks.rs

@@ -7,6 +7,7 @@ use yew::prelude::*;
 
 use crate::prelude::*;
 
+#[hook]
 pub fn use_event<E, F>(target: &EventTarget, event_type: E, callback: F)
 where
     E: Into<Cow<'static, str>>,
@@ -54,6 +55,7 @@ where
     );
 }
 
+#[hook]
 pub fn use_render_event<E>(target: &EventTarget, event_type: E)
 where
     E: Into<Cow<'static, str>>,
@@ -65,6 +67,7 @@ where
     });
 }
 
+#[hook]
 pub fn use_viewport_height() -> u64 {
     let vh = use_state_eq(get_viewport_height);
 

crates/fl-www/Cargo.toml

@@ -9,7 +9,7 @@ fl-www-core = { path = "../fl-www-core" }
 fl-www-common = { path = "../fl-www-common" }
 fl-www-agents = { path = "../fl-www-agents" }
 
-bounce = { version = "0.3.0", features = ["query", "helmet"] }
+bounce = { version = "0.8.0", features = ["query", "helmet"] }
 
 yew-query = { path = "../yew-query" }
 
@@ -24,13 +24,20 @@ async-trait = "0.1.56"
 console_log = { version = "0.2.0", features = ["color"] }
 log = "0.4.17"
 
-yew-feather = { git = "https://github.com/futursolo/yew-feather", branch = "compiled" }
-yew-router = "0.16.0"
-yew = "0.19.3"
-yew-agent = "0.1.0"
-stylist = { git = "https://github.com/futursolo/stylist-rs", branch = "css-vars", features = ["yew_integration", "macros", "parser"], default-features = false }
+yew-feather = "1.0.0"
+yew-router = "0.17.0"
+yew = { version = "0.20.0", features = ["csr"] }
+yew-agent = "0.2.0"
+stylist = { git = "https://github.com/futursolo/stylist-rs", branch = "css-vars", features = [
+  "yew_integration",
+  "macros",
+  "parser",
+], default-features = false }
 
-i18n-embed = { version = "0.13.4", features = ["fluent-system", "web-sys-requester"] }
+i18n-embed = { version = "0.13.4", features = [
+  "fluent-system",
+  "web-sys-requester",
+] }
 rust-embed = { version = "6.4.0", features = ["debug-embed"] }
 i18n-embed-fl = "0.6.4"
 unic-langid = "0.9.0"

crates/fl-www/src/atoms/i18n.rs

@@ -58,6 +58,7 @@ impl Reducible for LanguageState {
     }
 }
 
+#[hook]
 pub(crate) fn use_language() -> Language {
     use_slice_value::<LanguageState>().lang
 }

crates/fl-www/src/atoms/token.rs

@@ -21,6 +21,6 @@ impl Default for TokenState {
 
 impl Observed for TokenState {
     fn changed(self: Rc<Self>) {
-        LocalStorage::set(STORAGE_KEY, &self).expect_throw("failed to set theme.");
+        LocalStorage::set(STORAGE_KEY, self).expect_throw("failed to set theme.");
     }
 }

crates/fl-www/src/components/author.rs

@@ -56,9 +56,9 @@ pub(crate) fn author(props: &AuthorProps) -> Html {
             html! {
                 <div class={css!(
                     r#"
-                font-size: ${font_size};
-                color: ${colour};
-            "#,
+                        font-size: ${font_size};
+                        color: ${colour};
+                    "#,
                     font_size = &theme.font_size.secondary,
                     colour = css_var!(theme.colour.text.secondary),
                 )}>{m}{time_str}</div>

crates/fl-www/src/components/codeblock.rs

@@ -14,6 +14,7 @@ pub(crate) struct CodeBlockProps {
     pub content: String,
 }
 
+#[hook]
 pub(crate) fn use_highlight(
     content: String,
     language: Option<String>,

crates/fl-www/src/components/error_popup.rs

@@ -1,5 +1,5 @@
 use bounce::prelude::*;
-use yew_feather::alert_circle::AlertCircle;
+use yew_feather::AlertCircle;
 
 use crate::prelude::*;
 
@@ -48,7 +48,7 @@ pub(crate) fn error_popup() -> Html {
                 "#,
                 invalid_bg = css_var!(theme.colour.invalid),
             )}>
-                <AlertCircle size={20} />
+                <AlertCircle size="20" />
                 <div class={css!(r#"width: 7px;"#)} />
                 <div>{error_message}</div>
             </div>

crates/fl-www/src/components/header/home_content.rs

@@ -1,6 +1,6 @@
 use styling::use_media_query;
 use web_sys::{ScrollBehavior, ScrollIntoViewOptions};
-use yew_feather::chevron_down::ChevronDown;
+use yew_feather::ChevronDown;
 
 use crate::prelude::*;
 
@@ -66,7 +66,7 @@ pub(crate) fn home_content() -> Html {
                     "#)}
                     onclick={*scroll_to_main}
                 >
-                    <ChevronDown size={down_arrow_size} />
+                    <ChevronDown size={down_arrow_size.to_string()} />
                 </div>
             </div>
         </div>

crates/fl-www/src/components/header/lang_toggle.rs

@@ -1,6 +1,6 @@
 use components::Link;
 use styling::Colour;
-use yew_feather::globe::Globe;
+use yew_feather::Globe;
 
 use crate::prelude::*;
 
@@ -37,7 +37,7 @@ pub(crate) fn lang_toggle(props: &LangToggleProps) -> Html {
                 "#,
                 colour = props.colour,
             )}>
-                <Globe size={24} />
+                <Globe size="24" />
             </div>
         </Link>
     }

crates/fl-www/src/components/header/theme_toggle.rs

@@ -1,6 +1,5 @@
 use styling::ThemeKind;
-use yew_feather::moon::Moon;
-use yew_feather::sun::Sun;
+use yew_feather::{Moon, Sun};
 
 use crate::prelude::*;
 
@@ -9,8 +8,8 @@ pub(crate) fn theme_toggle() -> Html {
     let theme = use_theme();
 
     let theme_icon = match &theme.kind() {
-        ThemeKind::Light => html! {<Moon size=24 />},
-        ThemeKind::Dark => html! {<Sun size=24 />},
+        ThemeKind::Light => html! {<Moon size="24" />},
+        ThemeKind::Dark => html! {<Sun size="24" />},
     };
 
     let alt_text = match &theme.kind() {

crates/fl-www/src/components/placeholder.rs

@@ -37,7 +37,7 @@ pub(crate) fn placeholder(props: &Props) -> Html {
         ThemeKind::Dark => "rgb(255, 255, 255, 0.05)",
     };
 
-    let data_status = props.set_data_status.then(|| "loading");
+    let data_status = props.set_data_status.then_some("loading");
 
     html! {
         <div data-status={data_status} class={css!(

crates/fl-www/src/components/replies.rs

@@ -4,7 +4,7 @@ use bounce::*;
 use components::{Author, AuthoringResident, Placeholder, PlaceholderKind, Textarea};
 use serde::{Deserialize, Serialize};
 use web_sys::HtmlTextAreaElement;
-use yew_feather::github::Github;
+use yew_feather::Github;
 
 use crate::api::{CurrentResidentQuery, RepliesQuery, RepliesQueryInput};
 use crate::prelude::*;
@@ -406,7 +406,7 @@ pub(crate) fn new_reply() -> Html {
                         )}
                         onclick={navigate_to_github}
                     >
-                        <Github size={15} />
+                        <Github size="15" />
                         <div class={css!("width: 5px;")} />
                         {fl!("signin-github")}
                     </div>

crates/fl-www/src/components/textarea.rs

@@ -23,7 +23,7 @@ pub fn textarea(props: &TextareaProps) -> HtmlResult {
 
     let theme = use_theme();
 
-    return html! {
+    Ok(html! {
         <div
             class={classes!(
                 class,
@@ -65,5 +65,5 @@ pub fn textarea(props: &TextareaProps) -> HtmlResult {
                 )}
             />
         </div>
-    };
+    })
 }

crates/fl-www/src/contexts/metadata.rs

@@ -10,6 +10,7 @@ pub(crate) struct MetadataState {
     value: Option<Rc<Metadata>>,
 }
 
+#[hook]
 pub(crate) fn use_metadata() -> Option<Rc<Metadata>> {
     let set_error = use_atom_setter::<ErrorState>();
 

crates/fl-www/src/contexts/mod.rs

@@ -1,5 +1,3 @@
-use std::rc::Rc;
-
 use bounce::helmet::HelmetBridge as BaseHelmetBridge;
 use bounce::BounceRoot;
 use yew_router::prelude::BrowserRouter;
@@ -24,7 +22,7 @@ use worker::WorkerProvider;
 pub(crate) fn helmet_bridge() -> Html {
     use_language();
 
-    let format_fn = Rc::new(|m: &str| fl!("title", title = m)) as Rc<dyn Fn(&str) -> String>;
+    let format_fn = |m: AttrValue| fl!("title", title = m.to_string()).into();
 
     html! {
         <BaseHelmetBridge

crates/fl-www/src/contexts/routing.rs

@@ -3,6 +3,7 @@ use bounce::prelude::*;
 use crate::atoms::LanguageState;
 use crate::prelude::*;
 
+#[hook]
 pub(crate) fn use_app_route() -> AppRoute {
     use_route::<AppRoute>().unwrap_or_default()
 }