🚧 Add client side render.

celestia-island · Dec 20, 2023 · 6543dff · 6543dff
1 parent f452415
commit 6543dff
Show file tree

Hide file tree

Showing 19 changed files with 169 additions and 437 deletions.
diff --git a/Makefile.toml b/Makefile.toml
@@ -11,4 +11,7 @@ exec wasm-bindgen --out-dir ./target/wasm32-html --out-name a --target no-module
 
 cp ./target/wasm32-html/a_bg.wasm ./examples/app/res/a.wasm
 cp ./target/wasm32-html/a.js ./examples/app/res/a.js
+
+html_raw = set "<body><div id='app' style='width: 100vw; height: 100vh; position: fixed;'><script src='./a.js'></script><script>(async () => {await __wasm_vendor_entry('./a.wasm');(await (new __wasm_vendor_entry.WebHandle())).start();})()</script></div></body>"
+writefile ./examples/app/res/index.html ${html_raw}
 '''
diff --git a/examples/web/Cargo.toml b/examples/web/Cargo.toml
@@ -14,6 +14,7 @@ hikari-components = { path = "../../packages/components" }
 hikari-boot = { path = "../../packages/boot" }
 
 anyhow = "^1"
+async-trait = "^0.1"
 base64 = "^0.21"
 derive_more = "*"
 gloo = "^0.11"

diff --git a/examples/web/src/app.rs b/examples/web/src/app.rs
@@ -1,12 +1,51 @@
-use hikari_boot::register_routes;
-
-register_routes!(
-    app,
-    crate::utils::routes::Route,
-    crate::utils::routes::switch,
-    crate::utils::contexts::app_props::AppPageProps,
-    crate::utils::contexts::app_props::AppPropsContextShell,
-    crate::utils::contexts::app_states::AppStatesContextShell
-);
-
-pub use app::{App, AppProps, ServerApp};
+use serde::{Deserialize, Serialize};
+
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+use crate::pages::*;
+use hikari_boot::{DeclType, DeriveApplication, DeriveRoutes, RoutesOutsideProps};
+
+use self::_HikariContextShellProps::states;
+
+#[derive(PartialEq, Clone, Debug, DeriveRoutes, Routable)]
+pub enum Routes {
+    #[at("/")]
+    #[component(Portal)]
+    Portal,
+
+    #[at("/t/:id")]
+    #[component(Thread)]
+    Thread { id: String },
+
+    #[at("/u/:id")]
+    #[component(Personal)]
+    Personal { id: String },
+
+    #[not_found]
+    #[at("/404")]
+    #[component(NotFound)]
+    NotFound,
+}
+
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
+pub struct AppStates {
+    pub user: String,
+}
+
+#[derive(Clone, Debug, DeriveApplication)]
+pub struct App;
+
+impl DeclType for App {
+    type Routes = Routes;
+    type AppStates = AppStates;
+
+    fn decl_render_outside(props: &RoutesOutsideProps) -> yew::Html {
+        yew::html! {
+            <>
+                <h1>{"Hikari DEMO"}</h1>
+                {props.children.clone()}
+            </>
+        }
+    }
+}
diff --git a/examples/web/src/lib.rs b/examples/web/src/lib.rs
@@ -1,6 +1,5 @@
 pub mod app;
 pub mod pages;
-pub mod utils;
 
 #[cfg(target_arch = "wasm32")]
 mod web_entry;

diff --git a/examples/web/src/pages/mod.rs b/examples/web/src/pages/mod.rs
@@ -1,9 +1,9 @@
-mod page_not_found;
+mod not_found;
 mod personal;
 mod portal;
 mod thread;
 
-pub use page_not_found::PageNotFound;
+pub use not_found::NotFound;
 pub use personal::Personal;
 pub use portal::Portal;
 pub use thread::Thread;
diff --git a/examples/web/src/pages/page_not_found.rs → examples/web/src/pages/not_found.rs b/examples/web/src/pages/page_not_found.rs → examples/web/src/pages/not_found.rs
@@ -1,7 +1,7 @@
 use yew::prelude::*;
 
 #[function_component]
-pub fn PageNotFound() -> Html {
+pub fn NotFound() -> Html {
     html! {
         <>
             <h1>{"Page not found."}</h1>

diff --git a/examples/web/src/pages/personal.rs b/examples/web/src/pages/personal.rs
@@ -3,8 +3,6 @@ use log::info;
 use stylist::yew::styled_component;
 use yew::prelude::*;
 
-use crate::utils::contexts::app_props::{AppPageProps, AppPropsContextProviderType, Sex};
-
 #[derive(Properties, Debug, PartialEq)]
 pub struct PersonalProps {
     #[prop_or_default]
@@ -14,30 +12,11 @@ pub struct PersonalProps {
 #[styled_component]
 pub fn Personal(props: &PersonalProps) -> Html {
     info!("Personal page {} loaded.", props.id);
-    let page_props = use_context::<AppPropsContextProviderType>().unwrap();
-    match &page_props.page_props {
-        AppPageProps::Personal {
-            id,
-            name,
-            email,
-            sex,
-        } => {
-            html! {
-                <>
-                  <p>{format!("id: {}", id)}</p>
-                  <p>{format!("name: {}", name)}</p>
-                  <p>{format!("email: {}", email)}</p>
-                  <p>{format!("sex: {}", match sex {
-                    Sex::Male => "Male",
-                    Sex::Female => "Female"
-                  })}</p>
-                </>
-            }
-        }
-        _ => {
-            html! {
-              <>{"WAHT?"}</>
-            }
-        }
+
+    html! {
+        <>
+            <h1>{"Personal"}</h1>
+            <p>{format!("Personal {}", props.id)}</p>
+        </>
     }
 }
diff --git a/examples/web/src/pages/portal.rs b/examples/web/src/pages/portal.rs
@@ -5,6 +5,7 @@ use web_sys::{Event, HtmlInputElement, InputEvent};
 use gloo::net::http::Request;
 use stylist::yew::styled_component;
 use yew::prelude::*;
+use yew_router::prelude::*;
 
 use hikari_components::prelude::*;
 
@@ -14,6 +15,8 @@ pub fn Portal() -> Html {
     let uri = use_state(|| "/test".to_string());
     let data = use_state(|| "Ready to fetch".to_string());
 
+    let navigator = use_navigator().unwrap();
+
     let onclick = {
         let is_fetching = is_fetching.clone();
         let uri = uri.clone();
@@ -64,54 +67,28 @@ pub fn Portal() -> Html {
             </Button>
             <p>{&*data}</p>
             <div>
-                <Button outlined={true} size={SizeType::Large}>
-                    {"Test Biiiiiig Button"}
-                </Button>
-                <Button outlined={true}>
-                    {"Test"}
-                </Button>
-                <Button outlined={true} size={SizeType::Small}>
-                    {"Test Small Button"}
-                </Button>
-                <Button>
-                    {"Test"}
-                </Button>
-                <Button color={ColorType::Secondary}>
-                    {"Test"}
-                </Button>
                 <Button color={ColorType::Success}>
                     {"Test"}
                 </Button>
-                <Button color={ColorType::Warning}>
-                    {"Test"}
-                </Button>
-                <Button color={ColorType::Error}>
-                    {"Test"}
-                </Button>
-                <Button color={ColorType::Info}>
-                    {"Test"}
-                </Button>
             </div>
             <ButtonGroup />
             <ButtonGroup>
-                <Button>{"Test"}</Button>
-            </ButtonGroup>
-            <ButtonGroup size={SizeType::Large}>
-                <Button>{"Test"}</Button>
-                <Button>{"Test"}</Button>
-            </ButtonGroup>
-            <ButtonGroup outlined={true} color={ColorType::Success}>
-                <Button>{"Test"}</Button>
-                <Button>{"Test"}</Button>
-                <Button>{"Test"}</Button>
-            </ButtonGroup>
-            <ButtonGroup size={SizeType::Small} color={ColorType::Warning}>
-                <Button>{"Test"}</Button>
-                <Button>{"Test"}</Button>
-                <Button>{"Test"}</Button>
-                <Button>{"Test"}</Button>
-                <Button>{"Test"}</Button>
-                <Button>{"Test"}</Button>
+                <Button onclick={{
+                    let navigator = navigator.clone();
+                    Callback::from(move |_| {
+                        navigator.push(&crate::app::Routes::Personal { id: "123".to_string() });
+                    })
+                }}>
+                    {"Personal"}
+                </Button>
+                <Button onclick={{
+                    let navigator = navigator.clone();
+                    Callback::from(move |_| {
+                        navigator.push(&crate::app::Routes::Thread { id: "123".to_string() });
+                    })
+                }}>
+                    {"Thread"}
+                </Button>
             </ButtonGroup>
         </>
     }

diff --git a/examples/web/src/pages/thread.rs b/examples/web/src/pages/thread.rs
@@ -3,8 +3,6 @@ use log::info;
 use stylist::yew::styled_component;
 use yew::prelude::*;
 
-use crate::utils::contexts::app_props::{AppPageProps, AppPropsContextProviderType};
-
 #[derive(Properties, Debug, PartialEq)]
 pub struct ThreadProps {
     #[prop_or_default]
@@ -14,27 +12,11 @@ pub struct ThreadProps {
 #[styled_component]
 pub fn Thread(props: &ThreadProps) -> Html {
     info!("Thread page {} loaded.", props.id);
-    let page_props = use_context::<AppPropsContextProviderType>().unwrap();
-    match &page_props.page_props {
-        AppPageProps::Thread {
-            id,
-            title,
-            content,
-            comments,
-        } => {
-            html! {
-                <>
-                  <p>{format!("id: {}", id)}</p>
-                  <p>{format!("title: {}", title)}</p>
-                  <p>{format!("content: {}", content)}</p>
-                  <p>{format!("comments: {}", comments.join(", "))}</p>
-                </>
-            }
-        }
-        _ => {
-            html! {
-              <>{"WAHT?"}</>
-            }
-        }
+
+    html! {
+        <>
+            <h1>{"Thread"}</h1>
+            <p>{format!("Thread {}", props.id)}</p>
+        </>
     }
 }
diff --git a/examples/web/src/utils/contexts/app_props.rs b/examples/web/src/utils/contexts/app_props.rs