Use web-sys (jetli#8)

* Use web-sys * Upgrade to yew 0.13
jgreenbaum · Mar 3, 2020 · 3bf8b7c · 3bf8b7c
1 parent 3d1f438
commit 3bf8b7c
Show file tree

Hide file tree

Showing 21 changed files with 46 additions and 82 deletions.
diff --git a/crates/conduit-wasm/Cargo.toml b/crates/conduit-wasm/Cargo.toml
@@ -22,15 +22,21 @@ parking_lot = "0.10.0"
 pulldown-cmark = "0.6.1"
 serde = "1.0.104"
 serde_json = "1.0.44"
-stdweb = "0.4.20"
 thiserror = "1"
 web_logger = "0.2.0"
-yew = "0.11.0"
-#yew = {git = "https://github.com/yewstack/yew", branch = "master"}
-yew-router = "0.8.1"
-#yew-router = {git = "https://github.com/yewstack/yew_router", branch = "master"}
+yew = { version="0.13.0", features = ["web_sys"] }
+yew-router = { version="0.10.0", features = ["web_sys"] }
 wasm-bindgen = "0.2.58"
 wee_alloc = "0.4.5"
 
+[dependencies.web-sys]
+version = "0.3"
+features = [
+  "Document",
+  "Element",
+  "Node",
+  "Window",
+]
+
 [dev-dependencies]
 wasm-bindgen-test = "0.3.8"
diff --git a/crates/conduit-wasm/src/agent.rs b/crates/conduit-wasm/src/agent.rs
@@ -22,7 +22,7 @@ const TOKEN_KEY: &str = "yew.token";
 lazy_static! {
     /// Jwt token read from local storage.
     pub static ref TOKEN: RwLock<Option<String>> = {
-        let storage = StorageService::new(Area::Local);
+        let storage = StorageService::new(Area::Local).expect("storage was disabled by the user");
         if let Ok(token) = storage.restore(TOKEN_KEY) {
             RwLock::new(Some(token))
         } else {
@@ -33,7 +33,7 @@ lazy_static! {
 
 /// Set jwt token to local storage.
 pub fn set_token(token: Option<String>) {
-    let mut storage = StorageService::new(Area::Local);
+    let mut storage = StorageService::new(Area::Local).expect("storage was disabled by the user");
     if let Some(t) = token.clone() {
         storage.store(TOKEN_KEY, Ok(t));
     } else {
@@ -122,7 +122,7 @@ impl Requests {
         let request = builder.body(body).unwrap();
         debug!("Request: {:?}", request);
 
-        self.fetch.fetch(request, handler.into())
+        self.fetch.fetch(request, handler.into()).unwrap()
     }
 
     /// Delete request

diff --git a/crates/conduit-wasm/src/components/article_list.rs b/crates/conduit-wasm/src/components/article_list.rs
@@ -20,7 +20,6 @@ pub struct ArticleList {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub filter: ArticleListFilter,
 }
 

diff --git a/crates/conduit-wasm/src/components/article_preview.rs b/crates/conduit-wasm/src/components/article_preview.rs
@@ -1,6 +1,5 @@
-use stdweb::web::event::IEvent;
 use yew::services::fetch::FetchTask;
-use yew::{html, Callback, ClickEvent, Component, ComponentLink, Html, Properties, ShouldRender};
+use yew::{html, Callback, MouseEvent, Component, ComponentLink, Html, Properties, ShouldRender};
 use yew_router::prelude::*;
 
 use crate::agent::Articles;
@@ -27,7 +26,6 @@ pub enum Msg {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub article: ArticleInfo,
 }
 
@@ -83,7 +81,7 @@ impl Component for ArticlePreview {
         } else {
             NOT_FAVORITED_CLASS
         };
-        let onclick = self.link.callback(|ev: ClickEvent| {
+        let onclick = self.link.callback(|ev: MouseEvent| {
             ev.prevent_default();
             Msg::Request
         });

diff --git a/crates/conduit-wasm/src/components/header.rs b/crates/conduit-wasm/src/components/header.rs
@@ -10,7 +10,6 @@ pub struct Header {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub current_user: Option<UserInfo>,
 }
 

diff --git a/crates/conduit-wasm/src/components/list_errors.rs b/crates/conduit-wasm/src/components/list_errors.rs
@@ -8,7 +8,6 @@ pub struct ListErrors {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub error: Option<Error>,
 }
 

diff --git a/crates/conduit-wasm/src/components/list_pagination.rs b/crates/conduit-wasm/src/components/list_pagination.rs
@@ -1,5 +1,4 @@
-use stdweb::web::event::IEvent;
-use yew::{html, Callback, ClickEvent, Component, ComponentLink, Html, Properties, ShouldRender};
+use yew::{html, Callback, MouseEvent, Component, ComponentLink, Html, Properties, ShouldRender};
 
 const ITEMS_PER_PAGE: u32 = 10;
 
@@ -11,11 +10,8 @@ pub struct ListPagination {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub articles_count: u32,
-    #[props(required)]
     pub current_page: u32,
-    #[props(required)]
     pub callback: Callback<u32>,
 }
 
@@ -68,7 +64,7 @@ impl Component for ListPagination {
                         "page-item"
                     };
                     let page = page.clone();
-                    let onclick = self.link.callback(move |ev: ClickEvent| {ev.prevent_default(); Msg::PaginationChanged(page)});
+                    let onclick = self.link.callback(move |ev: MouseEvent| {ev.prevent_default(); Msg::PaginationChanged(page)});
                     html! {
                         <li
                             class=page_item_class

diff --git a/crates/conduit-wasm/src/routes/article/article_actions.rs b/crates/conduit-wasm/src/routes/article/article_actions.rs
@@ -22,9 +22,7 @@ pub struct ArticleActions {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub slug: String,
-    #[props(required)]
     pub can_modify: bool,
 }
 

diff --git a/crates/conduit-wasm/src/routes/article/article_meta.rs b/crates/conduit-wasm/src/routes/article/article_meta.rs
@@ -11,13 +11,9 @@ pub struct ArticleMeta {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub slug: String,
-    #[props(required)]
     pub can_modify: bool,
-    #[props(required)]
     pub author: ProfileInfo,
-    #[props(required)]
     pub created_at: String,
 }
 

diff --git a/crates/conduit-wasm/src/routes/article/comment.rs b/crates/conduit-wasm/src/routes/article/comment.rs
@@ -11,13 +11,9 @@ pub struct Comment {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub slug: String,
-    #[props(required)]
     pub comment: CommentInfo,
-    #[props(required)]
     pub current_user: Option<UserInfo>,
-    #[props(required)]
     pub callback: Callback<u32>,
 }
 

diff --git a/crates/conduit-wasm/src/routes/article/comment_input.rs b/crates/conduit-wasm/src/routes/article/comment_input.rs
@@ -1,8 +1,7 @@
-use stdweb::web::event::IEvent;
 use yew::services::fetch::FetchTask;
 use yew::{
     html, Callback, Component, ComponentLink, Html, InputData, Properties, ShouldRender,
-    SubmitEvent,
+    Event,
 };
 
 use crate::agent::Comments;
@@ -25,11 +24,8 @@ pub struct CommentInput {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub slug: String,
-    #[props(required)]
     pub current_user: UserInfo,
-    #[props(required)]
     pub callback: Callback<CommentInfo>,
 }
 
@@ -90,7 +86,7 @@ impl Component for CommentInput {
     }
 
     fn view(&self) -> Html {
-        let onsubmit = self.link.callback(|ev: SubmitEvent| {
+        let onsubmit = self.link.callback(|ev: Event| {
             ev.prevent_default();
             Msg::Request
         });

diff --git a/crates/conduit-wasm/src/routes/article/comment_list.rs b/crates/conduit-wasm/src/routes/article/comment_list.rs
@@ -21,9 +21,7 @@ pub struct CommentList {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub slug: String,
-    #[props(required)]
     pub current_user: Option<UserInfo>,
 }
 

diff --git a/crates/conduit-wasm/src/routes/article/delete_button.rs b/crates/conduit-wasm/src/routes/article/delete_button.rs
@@ -16,11 +16,8 @@ pub struct DeleteButton {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub slug: String,
-    #[props(required)]
     pub comment_id: u32,
-    #[props(required)]
     pub callback: Callback<u32>,
 }
 

diff --git a/crates/conduit-wasm/src/routes/article/mod.rs b/crates/conduit-wasm/src/routes/article/mod.rs
@@ -6,9 +6,7 @@ mod comment_list;
 mod delete_button;
 
 use pulldown_cmark;
-use stdweb::js;
-use stdweb::unstable::TryFrom;
-use stdweb::web::Node;
+use web_sys::Node;
 use yew::services::fetch::FetchTask;
 use yew::virtual_dom::VNode;
 use yew::{html, Callback, Component, ComponentLink, Html, Properties, ShouldRender};
@@ -31,9 +29,7 @@ pub struct Article {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub slug: String,
-    #[props(required)]
     pub current_user: Option<UserInfo>,
 }
 
@@ -140,12 +136,14 @@ impl Article {
         let mut html_text = String::new();
         pulldown_cmark::html::push_html(&mut html_text, parser);
 
-        let js_body = js! {
-            var div = document.createElement("div");
-            div.innerHTML = @{&html_text};
-            return div;
-        };
-        let node = Node::try_from(js_body).expect("convert js");
+        let div = web_sys::window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .create_element("div")
+            .unwrap();
+        div.set_inner_html(html_text.as_str());
+        let node = Node::from(div);
         VNode::VRef(node)
     }
 }
diff --git a/crates/conduit-wasm/src/routes/editor.rs b/crates/conduit-wasm/src/routes/editor.rs
@@ -1,8 +1,7 @@
-use stdweb::web::event::{IEvent, IKeyboardEvent};
 use yew::services::fetch::FetchTask;
 use yew::{
     agent::Bridged, html, Bridge, Callback, Component, ComponentLink, Html, InputData,
-    KeyPressEvent, KeyUpEvent, Properties, ShouldRender, SubmitEvent,
+    KeyboardEvent, Properties, ShouldRender, Event,
 };
 use yew_router::{agent::RouteRequest::ChangeRoute, prelude::*};
 
@@ -28,6 +27,7 @@ pub struct Editor {
 
 #[derive(Properties, Clone)]
 pub struct Props {
+    #[prop_or_default]
     pub slug: Option<String>,
 }
 
@@ -149,7 +149,7 @@ impl Component for Editor {
     }
 
     fn view(&self) -> Html {
-        let onsubmit = self.link.callback(|ev: SubmitEvent| {
+        let onsubmit = self.link.callback(|ev: Event| {
             ev.prevent_default();
             Msg::Request
         });
@@ -165,14 +165,14 @@ impl Component for Editor {
         let oninput_tag = self
             .link
             .callback(|ev: InputData| Msg::UpdateTagInput(ev.value));
-        let onkeypress = self.link.callback(|ev: KeyPressEvent| {
+        let onkeypress = self.link.callback(|ev: KeyboardEvent| {
             // Prevent submit the form when press Enter
             if ev.code() == "Enter" {
                 ev.prevent_default();
             }
             Msg::Ignore
         });
-        let onkeyup = self.link.callback(|ev: KeyUpEvent| {
+        let onkeyup = self.link.callback(|ev: KeyboardEvent| {
             // Add a new tag when press Enter
             if ev.code() == "Enter" {
                 ev.prevent_default();

diff --git a/crates/conduit-wasm/src/routes/home/main_view.rs b/crates/conduit-wasm/src/routes/home/main_view.rs
@@ -1,5 +1,4 @@
-use stdweb::web::event::IEvent;
-use yew::{html, ClickEvent, Component, ComponentLink, Html, Properties, ShouldRender};
+use yew::{html, MouseEvent, Component, ComponentLink, Html, Properties, ShouldRender};
 
 use crate::agent::is_authenticated;
 use crate::components::article_list::{ArticleList, ArticleListFilter};
@@ -104,7 +103,7 @@ impl MainView {
     fn your_feed_tab(&self) -> Html {
         if is_authenticated() {
             let (msg, class) = self.get_tab_msg_class(Tab::Feed);
-            let onclick = self.link.callback(move |ev: ClickEvent| {
+            let onclick = self.link.callback(move |ev: MouseEvent| {
                 ev.prevent_default();
                 msg.clone()
             });
@@ -125,7 +124,7 @@ impl MainView {
 
     fn global_feed_tab(&self) -> Html {
         let (msg, class) = self.get_tab_msg_class(Tab::All);
-        let onclick = self.link.callback(move |ev: ClickEvent| {
+        let onclick = self.link.callback(move |ev: MouseEvent| {
             ev.prevent_default();
             msg.clone()
         });
@@ -145,7 +144,7 @@ impl MainView {
     fn tag_filter_tab(&self) -> Html {
         if let Some(tag) = &self.props.tag {
             let (msg, class) = self.get_tab_msg_class(Tab::Tag);
-            let onclick = self.link.callback(move |ev: ClickEvent| {
+            let onclick = self.link.callback(move |ev: MouseEvent| {
                 ev.prevent_default();
                 msg.clone()
             });

diff --git a/crates/conduit-wasm/src/routes/home/tags.rs b/crates/conduit-wasm/src/routes/home/tags.rs
@@ -1,6 +1,5 @@
-use stdweb::web::event::IEvent;
 use yew::services::fetch::FetchTask;
-use yew::{html, Callback, ClickEvent, Component, ComponentLink, Html, Properties, ShouldRender};
+use yew::{html, Callback, MouseEvent, Component, ComponentLink, Html, Properties, ShouldRender};
 
 use crate::agent::Tags as TagsAgent;
 use crate::error::Error;
@@ -18,7 +17,6 @@ pub struct Tags {
 
 #[derive(Properties, Clone)]
 pub struct Props {
-    #[props(required)]
     pub callback: Callback<String>,
 }
 
@@ -67,7 +65,7 @@ impl Component for Tags {
                 <div className="tag-list">
                     {for tag_list.tags.iter().map(|tag| {
                         let tag_filtered = tag.clone();
-                        let onclick = self.link.callback(move |ev: ClickEvent| { ev.prevent_default(); Msg::TagFiltered(tag_filtered.to_string()) });
+                        let onclick = self.link.callback(move |ev: MouseEvent| { ev.prevent_default(); Msg::TagFiltered(tag_filtered.to_string()) });
                         html! {
                             <a
                                 href=""

diff --git a/crates/conduit-wasm/src/routes/login.rs b/crates/conduit-wasm/src/routes/login.rs
@@ -1,8 +1,7 @@
-use stdweb::web::event::IEvent;
 use yew::services::fetch::FetchTask;
 use yew::{
     agent::Bridged, html, Bridge, Callback, Component, ComponentLink, Html, InputData, Properties,
-    ShouldRender, SubmitEvent,
+    ShouldRender, Event,
 };
 use yew_router::{agent::RouteRequest::ChangeRoute, prelude::*};
 
@@ -27,7 +26,6 @@ pub struct Login {
 #[derive(PartialEq, Properties, Clone)]
 pub struct Props {
     /// Callback when user is logged in successfully
-    #[props(required)]
     pub callback: Callback<UserInfo>,
 }
 
@@ -89,7 +87,7 @@ impl Component for Login {
     }
 
     fn view(&self) -> Html {
-        let onsubmit = self.link.callback(|ev: SubmitEvent| {
+        let onsubmit = self.link.callback(|ev: Event| {
             ev.prevent_default(); /* Prevent event propagation */
             Msg::Request
         });