MPA setup

sycamore-rs · Oct 15, 2024 · f5702d1 · f5702d1
1 parent a0f46c4
commit f5702d1
Show file tree

Hide file tree

Showing 8 changed files with 593 additions and 17 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -6,4 +6,8 @@ publish = false
 
 [dependencies]
 console_error_panic_hook = "0.1.7"
-sycamore = "0.9.0-beta.4"
+sycamore = { version = "0.9.0-beta.4", features = ["hydrate", "suspense"] }
+sycamore-router = "0.9.0-beta.4"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+tokio = { version = "1.40.0", features = ["full"] }
diff --git a/Trunk.toml b/Trunk.toml
@@ -0,0 +1,7 @@
+[build]
+filehash = false
+
+[[hooks]]
+stage = "post_build"
+command = "cargo"
+command_arguments = ["run"]
diff --git a/index.html b/index.html
@@ -1,20 +1,11 @@
 <!doctype html>
-<html lang="en-us">
+<html>
 
 <head>
-	<meta charset="utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-	<meta name="description" content="A reactive library for creating web apps in Rust and WebAssembly" />
-	<meta name="keywords" content="rust wasm web reactive" />
-
+	<!--This file is only used as configuration for trunk. The actual HTML shell is defined in code.-->
 	<link data-trunk rel="rust" data-wasm-opt="3" />
-
 	<link data-trunk rel="tailwind-css" href="assets/index.scss" />
 	<link data-trunk rel="icon" href="assets/favicon.ico" />
 </head>
 
-<body></body>
-
 </html>
diff --git a/src/main.rs b/src/main.rs
@@ -1,14 +1,55 @@
+pub mod pages;
+pub mod shell;
+
+use self::shell::*;
+
 use sycamore::prelude::*;
+use sycamore_router::Route;
+
+static ROUTES: &[&str] = &["/index.html", "/404.html"];
+static PUBLIC_PATH: &str = "dist/.stage";
+
+#[cfg_ssr]
+#[tokio::main]
+async fn main() {
+    use std::path::PathBuf;
+    use tokio::fs;
+
+    for route in ROUTES {
+        let path = PathBuf::from(PUBLIC_PATH).join(route.trim_start_matches('/'));
+
+        eprintln!("Rendering `{route}` to `{}`", path.display());
+
+        let html = sycamore::render_to_string_await_suspense(|| {
+            view! {
+                Shell {
+                    sycamore_router::StaticRouter(route=Routes::default().match_path(route), view=App)
+                }
+            }
+        })
+        .await;
 
-#[component]
-fn App() -> View {
-    view! {
-        h1(class="bg-red-400") { "Sycamore!" }
+        fs::create_dir_all(PUBLIC_PATH)
+            .await
+            .expect("failed to create public dir");
+        fs::write(path, html)
+            .await
+            .expect("failed to write html file");
     }
 }
 
+#[cfg_not_ssr]
 fn main() {
     console_error_panic_hook::set_once();
 
-    sycamore::render(App);
+    sycamore::hydrate_to(
+        || {
+            view! {
+                Shell {
+                    sycamore_router::Router(integration=sycamore_router::HistoryIntegration::new(), view=App)
+                }
+            }
+        },
+        &document(),
+    );
 }
diff --git a/src/pages/index.rs b/src/pages/index.rs
diff --git a/src/pages/mod.rs b/src/pages/mod.rs
@@ -0,0 +1 @@
+pub mod index;
diff --git a/src/shell.rs b/src/shell.rs
@@ -0,0 +1,51 @@
+use sycamore::prelude::*;
+use sycamore_router::Route;
+
+#[derive(Debug, Clone, Route)]
+pub enum Routes {
+    #[to("/")]
+    Index,
+    #[to("/index.html")]
+    IndexHtml,
+    #[to("/404.html")]
+    #[not_found]
+    NotFound,
+}
+
+#[component(inline_props)]
+pub fn Shell(children: Children) -> View {
+    let children = children.call();
+    view! {
+        html {
+            sycamore::web::NoHydrate {
+                head {
+                    script(r#type="module") {
+                        r#"import init from "/sycamore-website.js"; init();"#
+                    }
+                    link(rel="stylesheet", href="/index.css")
+                    link(rel="icon", href="/favicon.ico")
+                }
+            }
+            body {
+                (children)
+            }
+        }
+    }
+}
+
+#[component]
+pub fn App(route: ReadSignal<Routes>) -> View {
+    view! {
+        (match route.get_clone() {
+            Routes::Index | Routes::IndexHtml => view! {
+                h1 { "Index" }
+            },
+            Routes::NotFound => view! {
+                h1 { "404 Not Found" }
+                p {
+                    a(href="/") { "Return to the home page" }
+                }
+            },
+        })
+    }
+}