Updated hacker news example to new SFA format and added a README

Cargo.toml

@@ -20,9 +20,7 @@ members = [
   "examples/counters",
   "examples/counters-stable",
   "examples/fetch",
-  "examples/hackernews/hackernews-app",
-  "examples/hackernews/hackernews-client",
-  "examples/hackernews/hackernews-server",
+  "examples/hackernews",
   "examples/parent-child",
   "examples/router",
   "examples/todomvc",

examples/hackernews/Cargo.toml

@@ -0,0 +1,40 @@
+[package]
+name = "leptos-sfa"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+anyhow = "1"
+actix-files = { version = "0.6", optional = true }
+actix-web = { version = "4", optional = true, features = ["openssl", "macros"] }
+console_log = "0.2"
+console_error_panic_hook = "0.1"
+futures = "0.3"
+cfg-if = "1"
+leptos = { path = "../../../leptos/leptos", default-features = false, features = [
+	"serde",
+] }
+leptos_meta = { path = "../../../leptos/meta", default-features = false }
+leptos_router = { path = "../../../leptos/router", default-features = false }
+log = "0.4"
+simple_logger = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+gloo-net = { version = "0.2", features = ["http"] }
+reqwest = { version = "0.11", features = ["json"] }
+# openssl = { version = "0.10", features = ["v110"] }
+
+[features]
+default = ["csr"]
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+ssr = [
+	"dep:actix-files",
+	"dep:actix-web",
+	"leptos/ssr",
+	"leptos_meta/ssr",
+	"leptos_router/ssr",
+]

examples/hackernews/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Greg Johnston
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/hackernews/README.md

@@ -0,0 +1,20 @@
+# Leptos Hacker News Example
+
+This example creates a basic clone of the Hacker News site. It showcases Leptos' ability to create both a client-side rendered app, and a server side rendered app with hydration, in a single repository
+
+## Client Side Rendering
+To run it as a Client Side App, you can issue  `trunk serve --open` in the root. This will build the entire
+app into one CRS bundle
+
+## Server Side Rendering With Hydration
+To run it as a server side app with hydration, first you should run 
+```bash
+wasm-pack build --target=web --no-default-features --features=hydrate
+```
+to generate the Webassembly to provide hydration features for the server.
+Then run the server with `cargo run` to serve the server side rendered HTML and the WASM bundle for hydration. 
+```bash
+cargo run --no-default-features --features=ssr`
+```
+> Note that if your hydration code changes, you will have to rerun the wasm-pack command above
+> This should be temporary, and vastly improve once cargo-leptos becomes ready for prime time!

examples/hackernews/hackernews-app/Cargo.toml

@@ -1,26 +0,0 @@
-[package]
-name = "hackernews-app"
-version = "0.1.0"
-edition = "2021"
-
-[dependencies]
-anyhow = "1"
-console_log = "0.2"
-leptos = { path = "../../../leptos", default-features = false, features = [
-	"serde",
-] }
-leptos_meta = { path = "../../../meta", default-features = false }
-leptos_router = { path = "../../../router", default-features = false }
-log = "0.4"
-gloo-net = { version = "0.2", features = ["http"] }
-reqwest = { version = "0.11", features = ["json"] }
-serde = { version = "1", features = ["derive"] }
-serde_json = "1"
-console_error_panic_hook = "0.1.7"
-
-
-[features]
-default = ["csr"]
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
-ssr = ["leptos/ssr", "leptos_meta/ssr", "leptos_router/ssr"]

examples/hackernews/hackernews-app/src/main.rs

@@ -1,11 +0,0 @@
-use hackernews_app::*;
-use leptos::*;
-
-pub fn main() {
-    console_error_panic_hook::set_once();
-    _ = console_log::init_with_level(log::Level::Debug);
-    console_error_panic_hook::set_once();
-    mount_to_body(|cx| {
-        view! { cx, <App/> }
-    });
-}

examples/hackernews/hackernews-client/Cargo.toml

@@ -1,14 +0,0 @@
-[package]
-name = "hackernews-client"
-version = "0.1.0"
-edition = "2021"
-
-[lib]
-crate-type = ["cdylib", "rlib"]
-
-[dependencies]
-console_log = "0.2"
-console_error_panic_hook = "0.1"
-hackernews-app = { path = "../hackernews-app", default-features = false, features = ["hydrate"] }
-leptos = { path = "../../../leptos", default-features = false, features = ["hydrate", "serde"] }
-log = "0.4"

examples/hackernews/hackernews-client/build.sh

@@ -1 +0,0 @@
-wasm-pack build --target=web --release

examples/hackernews/hackernews-client/src/lib.rs

@@ -1,12 +0,0 @@
-use hackernews_app::*;
-use leptos::*;
-use wasm_bindgen::prelude::wasm_bindgen;
-
-#[wasm_bindgen]
-pub fn main() {
-    _ = console_log::init_with_level(log::Level::Debug);
-    console_error_panic_hook::set_once();
-    leptos::hydrate(body().unwrap(), move |cx| {
-        view! { cx, <App/> }
-    });
-}

examples/hackernews/hackernews-server/.gitignore

@@ -1,2 +0,0 @@
-key.pem
-cert.pem

examples/hackernews/hackernews-server/Cargo.toml

@@ -1,17 +0,0 @@
-[package]
-name = "hackernews-server"
-version = "0.1.0"
-edition = "2021"
-
-[dependencies]
-actix-files = "0.6"
-actix-web = { version = "4", features = ["openssl", "macros"] }
-futures = "0.3"
-leptos = { path = "../../../leptos", default-features = false, features = ["ssr", "serde"] }
-leptos_router = { path = "../../../router", default-features = false, features = ["ssr"] }
-leptos_meta = { path = "../../../meta", default-features = false, features = ["ssr"] }
-log = "0.4"
-hackernews-app = { path = "../hackernews-app", default-features = false, features = ["ssr"] }
-openssl = { version = "0.10", features = ["v110"] }
-simple_logger = "2"
-serde_json = "1.0.85"

examples/hackernews/hackernews-server/src/main.rs

@@ -1,91 +0,0 @@
-use actix_files::{Files, NamedFile};
-use actix_web::*;
-use futures::StreamExt;
-use hackernews_app::*;
-use leptos::*;
-use leptos_meta::*;
-use leptos_router::*;
-use openssl::ssl::{SslAcceptor, SslFiletype, SslMethod};
-
-#[get("/static/style.css")]
-async fn css() -> impl Responder {
-    NamedFile::open_async("../hackernews-app/style.css").await
-}
-
-// match every path — our router will handle actual dispatch
-#[get("{tail:.*}")]
-async fn render_app(req: HttpRequest) -> impl Responder {
-    let path = req.path();
-
-    let query = req.query_string();
-    let path = if query.is_empty() {
-        "http://leptos".to_string() + path
-    } else {
-        "http://leptos".to_string() + path + "?" + query
-    };
-
-    let app = move |cx| {
-        let integration = ServerIntegration { path: path.clone() };
-        provide_context(cx, RouterIntegrationContext::new(integration));
-
-        view! { cx, <App/> }
-    };
-
-    let head = r#"<!DOCTYPE html>
-        <html lang="en">
-            <head>
-                <meta charset="utf-8"/>
-                <meta name="viewport" content="width=device-width, initial-scale=1"/>
-                <script type="module">import init, { main } from '/pkg/hackernews_client.js'; init().then(main);</script>"#;
-    let tail = "</body></html>";
-
-    HttpResponse::Ok().content_type("text/html").streaming(
-        futures::stream::once(async { head.to_string() })
-            .chain(render_to_stream(move |cx| {
-                let app = app(cx);
-                let head = use_context::<MetaContext>(cx)
-                    .map(|meta| meta.dehydrate())
-                    .unwrap_or_default();
-                format!("{head}</head><body>{app}")
-            }))
-            .chain(futures::stream::once(async { tail.to_string() }))
-            .map(|html| Ok(web::Bytes::from(html)) as Result<web::Bytes>),
-    )
-}
-
-#[actix_web::main]
-async fn main() -> std::io::Result<()> {
-    let host = std::env::var("HOST").unwrap_or_else(|_| "127.0.0.1".to_string());
-    let port = std::env::var("PORT").unwrap_or_else(|_| "8080".to_string());
-    log::debug!("serving at {host}:{port}");
-
-    simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
-
-    // uncomment these lines (and .bind_openssl() below) to enable HTTPS, which is sometimes
-    // necessary for proper HTTP/2 streaming
-
-    // load TLS keys
-    // to create a self-signed temporary cert for testing:
-    // `openssl req -x509 -newkey rsa:4096 -nodes -keyout key.pem -out cert.pem -days 365 -subj '/CN=localhost'`
-    // let mut builder = SslAcceptor::mozilla_intermediate(SslMethod::tls()).unwrap();
-    // builder
-    //     .set_private_key_file("key.pem", SslFiletype::PEM)
-    //     .unwrap();
-    // builder.set_certificate_chain_file("cert.pem").unwrap();
-
-    HttpServer::new(|| {
-        App::new()
-            .service(css)
-            .service(
-                web::scope("/pkg")
-                    .service(Files::new("", "../hackernews-client/pkg"))
-                    .wrap(middleware::Compress::default()),
-            )
-            .service(render_app)
-    })
-    .bind(("127.0.0.1", 8080))?
-    // replace .bind with .bind_openssl to use HTTPS
-    //.bind_openssl(&format!("{}:{}", host, port), builder)?
-    .run()
-    .await
-}

examples/hackernews/src/lib.rs

@@ -1,19 +1,13 @@
-// This is essentially a port of a Solid Hacker News demo
-// https://github.com/solidjs/solid-hackernews
-
+use cfg_if::cfg_if;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
-
 mod api;
-mod nav;
-mod stories;
-mod story;
-mod users;
-use nav::*;
-use stories::*;
-use story::*;
-use users::*;
+mod routes;
+use routes::nav::*;
+use routes::stories::*;
+use routes::story::*;
+use routes::users::*;
 
 #[component]
 pub fn App(cx: Scope) -> Element {
@@ -36,3 +30,19 @@ pub fn App(cx: Scope) -> Element {
         </div>
     }
 }
+
+// Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.
+cfg_if! {
+    if #[cfg(feature = "hydrate")] {
+        use wasm_bindgen::prelude::wasm_bindgen;
+
+        #[wasm_bindgen]
+        pub fn main() {
+            _ = console_log::init_with_level(log::Level::Debug);
+            console_error_panic_hook::set_once();
+            leptos::hydrate(body().unwrap(), move |cx| {
+                view! { cx, <App/> }
+            });
+        }
+    }
+}

examples/hackernews/src/main.rs

@@ -0,0 +1,110 @@
+use cfg_if::cfg_if;
+use leptos::*;
+
+// boilerplate to run in different modes
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use actix_files::{Files, NamedFile};
+        use actix_web::*;
+        use futures::StreamExt;
+        use leptos_meta::*;
+        use leptos_router::*;
+        use leptos_sfa::*;
+    #[get("/static/style.css")]
+    async fn css() -> impl Responder {
+        NamedFile::open_async("./style.css").await
+    }
+
+    // match every path — our router will handle actual dispatch
+    #[get("{tail:.*}")]
+    async fn render_app(req: HttpRequest) -> impl Responder {
+        let path = req.path();
+
+        let query = req.query_string();
+        let path = if query.is_empty() {
+            "http://leptos".to_string() + path
+        } else {
+            "http://leptos".to_string() + path + "?" + query
+        };
+
+        let app = move |cx| {
+            let integration = ServerIntegration { path: path.clone() };
+            provide_context(cx, RouterIntegrationContext::new(integration));
+
+            view! { cx, <App/> }
+        };
+
+        let head = r#"<!DOCTYPE html>
+            <html lang="en">
+                <head>
+                    <meta charset="utf-8"/>
+                    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+                    <script type="module">import init, { main } from '/pkg/hackernews_client.js'; init().then(main);</script>"#;
+        let tail = "</body></html>";
+
+        HttpResponse::Ok().content_type("text/html").streaming(
+            futures::stream::once(async { head.to_string() })
+                .chain(render_to_stream(move |cx| {
+                    let app = app(cx);
+                    let head = use_context::<MetaContext>(cx)
+                        .map(|meta| meta.dehydrate())
+                        .unwrap_or_default();
+                    format!("{head}</head><body>{app}")
+                }))
+                .chain(futures::stream::once(async { tail.to_string() }))
+                .map(|html| Ok(web::Bytes::from(html)) as Result<web::Bytes>),
+        )
+    }
+
+    #[actix_web::main]
+    async fn main() -> std::io::Result<()> {
+        let host = std::env::var("HOST").unwrap_or_else(|_| "127.0.0.1".to_string());
+        let port = std::env::var("PORT").unwrap_or_else(|_| "8080".to_string());
+        log::debug!("serving at {host}:{port}");
+
+        simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
+
+        // uncomment these lines (and .bind_openssl() below) to enable HTTPS, which is sometimes
+        // necessary for proper HTTP/2 streaming
+
+        // load TLS keys
+        // to create a self-signed temporary cert for testing:
+        // `openssl req -x509 -newkey rsa:4096 -nodes -keyout key.pem -out cert.pem -days 365 -subj '/CN=localhost'`
+        // let mut builder = SslAcceptor::mozilla_intermediate(SslMethod::tls()).unwrap();
+        // builder
+        //     .set_private_key_file("key.pem", SslFiletype::PEM)
+        //     .unwrap();
+        // builder.set_certificate_chain_file("cert.pem").unwrap();
+
+        HttpServer::new(|| {
+            App::new()
+                .service(css)
+                .service(
+                    web::scope("/pkg")
+                        .service(Files::new("", "./dist"))
+                        .wrap(middleware::Compress::default()),
+                )
+                .service(render_app)
+        })
+        .bind(("127.0.0.1", 8080))?
+        // replace .bind with .bind_openssl to use HTTPS
+        //.bind_openssl(&format!("{}:{}", host, port), builder)?
+        .run()
+        .await
+    }
+}
+
+    // client-only stuff for Trunk
+    else if #[cfg(feature = "csr")] {
+        use leptos_sfa::*;
+
+        pub fn main() {
+            console_error_panic_hook::set_once();
+            _ = console_log::init_with_level(log::Level::Debug);
+            console_error_panic_hook::set_once();
+            mount_to_body(|cx| {
+                view! { cx, <App/> }
+            });
+        }
+    }
+}

examples/hackernews/src/routes.rs

@@ -0,0 +1,4 @@
+pub mod nav;
+pub mod stories;
+pub mod story;
+pub mod users;