chore: add examples

Author: fundon

Cargo.toml

@@ -1,3 +1,27 @@
+[workspace]
+resolver = "2"
+members = [
+  "examples/*",
+]
+
+[workspace.dependencies]
+viz = "0.8.0"
+futures = "0.3"
+http = "1.0.0"
+http-body-util = "0.1.0"
+hyper = "1.1.0"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+tokio = { version = "1", default-features = false }
+parking_lot = "0.12.1"
+
+leptos_viz = { path = "." }
+leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "1eaf886" }
+leptos_meta = { git = "https://github.com/leptos-rs/leptos.git", rev = "1eaf886" }
+leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "1eaf886" }
+leptos_reactive = { git = "https://github.com/leptos-rs/leptos.git", rev = "1eaf886" }
+leptos_integration_utils = { git = "https://github.com/leptos-rs/leptos.git", rev = "1eaf886" }
+
 [package]
 name = "leptos_viz"
 version = "0.6.0"
@@ -8,18 +32,21 @@ repository = "https://github.com/leptos-rs/leptos"
 description = "Viz integrations for the Leptos web framework."
 
 [dependencies]
-viz = "0.8.0"
-futures = "0.3"
-http = "1.0.0"
-http-body-util = "0.1.0"
-hyper = "1.1.0"
-leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "1eaf886", features = ["ssr"] }
-leptos_meta = { git = "https://github.com/leptos-rs/leptos.git", rev = "1eaf886", features = ["ssr"] }
-leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "1eaf886", features = ["ssr"] }
-leptos_integration_utils = { git = "https://github.com/leptos-rs/leptos.git", rev = "1eaf886" }
-serde_json = "1"
-tokio = { version = "1", features = ["full"] }
-parking_lot = "0.12.1"
+viz.workspace = true
+futures.workspace = true
+http.workspace = true
+http-body-util.workspace = true
+hyper.workspace = true
+leptos = { workspace = true, features = ["ssr"] }
+leptos_meta = { workspace = true, features = ["ssr"] }
+leptos_router = { workspace = true, features = ["ssr"] }
+leptos_integration_utils.workspace = true
+serde_json.workspace = true
+tokio.workspace = true
+parking_lot.workspace = true
+
+[dev-dependencies]
+tokio = { workspace = true, features = ["full"] }
 
 [features]
 nonce = ["leptos/nonce"]

examples/todo_app_sqlite_viz/Cargo.toml

@@ -0,0 +1,92 @@
+[package]
+name = "todo_app_sqlite_viz"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+console_log = "1.0.0"
+console_error_panic_hook = "0.1.7"
+cfg-if = "1.0.0"
+log = "0.4.17"
+simple_logger = "4.0.0"
+sqlx = { version = "0.6.2", features = [
+  "runtime-tokio-rustls",
+  "sqlite",
+], optional = true }
+thiserror = "1.0.38"
+wasm-bindgen = "0.2"
+
+serde.workspace = true
+viz = { workspace = true, optional = true }
+tokio = { workspace = true, features = ["full"], optional = true }
+http.workspace = true
+futures.workspace = true
+leptos.workspace = true
+leptos_viz = { workspace = true, optional = true }
+leptos_meta = { workspace = true, features = ["nightly"] }
+leptos_router = { workspace = true, features = ["nightly"] }
+leptos_reactive = { workspace = true, features = ["nightly"] }
+
+[features]
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+ssr = [
+  "dep:viz",
+  "dep:tokio",
+  "dep:sqlx",
+  "leptos/ssr",
+  "leptos_meta/ssr",
+  "leptos_router/ssr",
+  "dep:leptos_viz",
+]
+
+[package.metadata.cargo-all-features]
+denylist = ["viz", "tokio", "sqlx", "leptos_viz"]
+skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
+
+[package.metadata.leptos]
+# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
+output-name = "todo_app_sqlite_viz"
+# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
+site-root = "target/site"
+# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
+# Defaults to pkg
+site-pkg-dir = "pkg"
+# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
+style-file = "./style.css"
+# [Optional] Files in the asset-dir will be copied to the site-root directory
+assets-dir = "public"
+# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
+site-addr = "127.0.0.1:3000"
+# The port to use for automatic reload monitoring
+reload-port = 3001
+# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+end2end-cmd = "npx playwright test"
+#  The browserlist query used for optimizing the CSS.
+browserquery = "defaults"
+# Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head
+watch = false
+# The environment Leptos will run in, usually either "DEV" or "PROD"
+env = "DEV"
+# The features to use when compiling the bin target
+#
+# Optional. Can be over-ridden with the command line parameter --bin-features
+bin-features = ["ssr"]
+
+# If the --no-default-features flag should be used when compiling the bin target
+#
+# Optional. Defaults to false.
+bin-default-features = false
+
+# The features to use when compiling the lib target
+#
+# Optional. Can be over-ridden with the command line parameter --lib-features
+lib-features = ["hydrate"]
+
+# If the --no-default-features flag should be used when compiling the lib target
+#
+# Optional. Defaults to false.
+lib-default-features = false

examples/todo_app_sqlite_viz/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/todo_app_sqlite_viz/README.md

@@ -0,0 +1,15 @@
+# Leptos Todo App Sqlite with Viz
+
+This example creates a basic todo app with a Viz backend that uses Leptos' server functions to call sqlx from the client and seamlessly run it on the server.
+
+## Getting Started
+
+See the [Examples README](../README.md) for setup and run instructions.
+
+## Rendering
+
+See the [SSR Notes](../SSR_NOTES.md) for more information about Server Side Rendering.
+
+## Quick Start
+
+Run `cargo leptos watch` to run this example.

examples/todo_app_sqlite_viz/Todos.db

@@ -0,0 +1,7 @@
+
+CREATE TABLE IF NOT EXISTS todos
+(
+  id          INTEGER NOT NULL PRIMARY KEY,
+  title       VARCHAR,
+  completed   BOOLEAN
+);

examples/todo_app_sqlite_viz/migrations/20221118172000_create_todo_table.sql

@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"

examples/todo_app_sqlite_viz/public/favicon.ico

@@ -0,0 +1,60 @@
+use crate::errors::TodoAppError;
+use cfg_if::cfg_if;
+use leptos::{Errors, *};
+#[cfg(feature = "ssr")]
+use leptos_viz::ResponseOptions;
+
+// A basic function to display errors served by the error boundaries. Feel free to do more complicated things
+// here than just displaying them
+#[component]
+pub fn ErrorTemplate(
+    #[prop(optional)] outside_errors: Option<Errors>,
+    #[prop(optional)] errors: Option<RwSignal<Errors>>,
+) -> impl IntoView {
+    let errors = match outside_errors {
+        Some(e) => create_rw_signal(e),
+        None => match errors {
+            Some(e) => e,
+            None => panic!("No Errors found and we expected errors!"),
+        },
+    };
+
+    // Get Errors from Signal
+    // Downcast lets us take a type that implements `std::error::Error`
+    let errors: Vec<TodoAppError> = errors
+        .get()
+        .into_iter()
+        .filter_map(|(_k, v)| v.downcast_ref::<TodoAppError>().cloned())
+        .collect();
+
+    // Only the response code for the first error is actually sent from the server
+    // this may be customized by the specific application
+    cfg_if! {
+      if #[cfg(feature="ssr")]{
+        let response = use_context::<ResponseOptions>();
+        if let Some(response) = response{
+          response.set_status(errors[0].status_code());
+        }
+      }
+    }
+
+    view! {
+      <h1>"Errors"</h1>
+      <For
+        // a function that returns the items we're iterating over; a signal is fine
+        each= move || {errors.clone().into_iter().enumerate()}
+        // a unique key for each item as a reference
+        key=|(index, _error)| *index
+        // renders each item to a view
+        children= move |error| {
+        let error_string = error.1.to_string();
+        let error_code= error.1.status_code();
+          view! {
+
+            <h2>{error_code.to_string()}</h2>
+            <p>"Error: " {error_string}</p>
+          }
+        }
+      />
+    }
+}

examples/todo_app_sqlite_viz/rust-toolchain.toml

@@ -0,0 +1,19 @@
+use http::status::StatusCode;
+use thiserror::Error;
+
+#[derive(Debug, Clone, Error)]
+pub enum TodoAppError {
+    #[error("Not Found")]
+    NotFound,
+    #[error("Internal Server Error")]
+    InternalServerError,
+}
+
+impl TodoAppError {
+    pub fn status_code(&self) -> StatusCode {
+        match self {
+            TodoAppError::NotFound => StatusCode::NOT_FOUND,
+            TodoAppError::InternalServerError => StatusCode::INTERNAL_SERVER_ERROR,
+        }
+    }
+}

examples/todo_app_sqlite_viz/src/error_template.rs

@@ -0,0 +1,58 @@
+use cfg_if::cfg_if;
+
+cfg_if! {
+if #[cfg(feature = "ssr")] {
+    use crate::{
+        error_template::ErrorTemplate,
+        errors::TodoAppError,
+    };
+    use http::Uri;
+    use std::sync::Arc;
+    use leptos::{view, Errors, LeptosOptions};
+    use viz::{
+        handlers::serve, header::HeaderMap, types::RouteInfo, Body, Error, Handler,
+        Request, RequestExt, Response, ResponseExt, Result,
+    };
+
+    pub async fn file_and_error_handler(req: Request<Body>) -> Result<Response> {
+        let uri = req.uri().clone();
+        let headers = req.headers().clone();
+        let route_info = req.route_info().clone();
+        let options = req.state::<LeptosOptions>().ok_or(
+            Error::Responder(Response::text("missing state type LeptosOptions")),
+        )?;
+        let root = &options.site_root;
+        let resp = get_static_file(uri, root, headers, route_info).await?;
+        let status = resp.status();
+
+        if status.is_success() || status.is_redirection() {
+            Ok(resp)
+        } else {
+            let mut errors = Errors::default();
+            errors.insert_with_default_key(TodoAppError::NotFound);
+            let handler = leptos_viz::render_app_to_stream(
+                options.to_owned(),
+                move || view! {<ErrorTemplate outside_errors=errors.clone()/>},
+            );
+            handler(req).await
+        }
+    }
+
+    async fn get_static_file(
+        uri: Uri,
+        root: &str,
+        headers: HeaderMap,
+        route_info: Arc<RouteInfo>,
+    ) -> Result<Response> {
+        let mut req = Request::builder()
+            .uri(uri.clone())
+            .extension(route_info)
+            .body(Body::empty())
+            .unwrap();
+        *req.headers_mut() = headers;
+        // This path is relative to the cargo root
+        serve::Dir::new(root).call(req).await
+    }
+
+}
+}

examples/todo_app_sqlite_viz/src/errors.rs

@@ -0,0 +1,24 @@
+use cfg_if::cfg_if;
+pub mod error_template;
+pub mod errors;
+pub mod fallback;
+pub mod todo;
+
+// 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 leptos::*;
+        use wasm_bindgen::prelude::wasm_bindgen;
+        use crate::todo::*;
+
+        #[wasm_bindgen]
+        pub fn hydrate() {
+            _ = console_log::init_with_level(log::Level::Debug);
+            console_error_panic_hook::set_once();
+
+            leptos::mount_to_body(|| {
+                view! { <TodoApp/> }
+            });
+        }
+    }
+}