merge todo-app-sqlite-axum

examples/todo-app-sqlite-axum/Cargo.toml

@@ -0,0 +1,62 @@
+[package]
+name = "todo-app-sqlite-axum"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+anyhow = "1.0.66"
+console_log = "0.2.0"
+console_error_panic_hook = "0.1.7"
+futures = "0.3.25"
+cfg-if = "1.0.0"
+leptos = { path = "../../../leptos/leptos", default-features = false, features = [
+	"serde",
+] }
+leptos_axum = { path = "../../../leptos/integrations/axum", default-features = false, optional = true }
+leptos_meta = { path = "../../../leptos/meta", default-features = false }
+leptos_router = { path = "../../../leptos/router", default-features = false }
+log = "0.4.17"
+simple_logger = "4.0.0"
+serde = { version = "1.0.148", features = ["derive"] }
+serde_json = "1.0.89"
+gloo-net = { version = "0.2.5", features = ["http"] }
+reqwest = { version = "0.11.13", features = ["json"] }
+axum = { version = "0.6.1", optional = true }
+tower = { version = "0.4.13", optional = true }
+tower-http = { version = "0.3.4", features = ["fs"], optional = true }
+tokio = { version = "1.22.0", features = ["full"], optional = true }
+http = { version = "0.2.8" }
+sqlx = { version = "0.6.2", features = [
+	"runtime-tokio-rustls",
+	"sqlite",
+], optional = true }
+
+[features]
+default = ["csr"]
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+ssr = [
+	"dep:axum",
+	"dep:tower",
+	"dep:tower-http",
+	"dep:tokio",
+	"dep:sqlx",
+	"leptos/ssr",
+	"leptos_meta/ssr",
+	"leptos_router/ssr",
+	"leptos_axum",
+]
+
+[package.metadata.cargo-all-features]
+denylist = [
+	"axum",
+	"tower",
+	"tower-http",
+	"tokio",
+	"sqlx",
+	"leptos_axum",
+]
+skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]

examples/todo-app-sqlite-axum/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-axum/README.md

@@ -0,0 +1,22 @@
+# Leptos Todo App Sqlite with Axum
+
+This example creates a basic todo app with an Axum backend that uses Leptos' server functions to call sqlx from the client and seamlessly run it on the server.
+
+## 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 --debug --no-default-features --features=hydrate
+```
+
+to generate the WebAssembly to hydrate the HTML that is generated on 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/todo-app-sqlite-axum/migrations/20221118172000_create_todo_table.sql

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

examples/todo-app-sqlite-axum/src/lib.rs

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

examples/todo-app-sqlite-axum/src/main.rs

@@ -0,0 +1,81 @@
+use cfg_if::cfg_if;
+use leptos::*;
+
+// boilerplate to run in different modes
+cfg_if! {
+if #[cfg(feature = "ssr")] {
+    use axum::{
+        routing::{post},
+        error_handling::HandleError,
+        Router,
+    };
+    use std::net::SocketAddr;
+    use crate::todo::*;
+    use todo_app_sqlite_axum::*;
+    use http::StatusCode;
+    use tower_http::services::ServeDir;
+    use std::env;
+
+    #[tokio::main]
+    async fn main() {
+        let addr = SocketAddr::from(([127, 0, 0, 1], 3000));
+        log::debug!("serving at {addr}");
+
+        simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
+
+        let mut conn = db().await.expect("couldn't connect to DB");
+        /* sqlx::migrate!()
+            .run(&mut conn)
+            .await
+            .expect("could not run SQLx migrations"); */
+
+        crate::todo::register_server_functions();
+
+        // These are Tower Services that will serve files from the static and pkg repos.
+        // HandleError is needed as Axum requires services to implement Infallible Errors
+        // because all Errors are converted into Responses
+        let static_service = HandleError::new( ServeDir::new("./static"), handle_file_error);
+        let pkg_service = HandleError::new( ServeDir::new("./pkg"), handle_file_error);
+
+        /// Convert the Errors from ServeDir to a type that implements IntoResponse
+        async fn handle_file_error(err: std::io::Error) -> (StatusCode, String) {
+            (
+                StatusCode::NOT_FOUND,
+                format!("File Not Found: {}", err),
+            )
+        }
+
+
+        let render_options: RenderOptions = RenderOptions::builder().pkg_path("/pkg/todo_app_sqlite_axum").socket_address(addr).reload_port(3001).environment(&env::var("RUST_ENV")).build();
+        render_options.write_to_file();
+        // build our application with a route
+        let app = Router::new()
+        .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
+        .nest_service("/pkg", pkg_service)
+        .nest_service("/static", static_service)
+        .fallback(leptos_axum::render_app_to_stream(render_options.clone(), |cx| view! { cx, <TodoApp/> }));
+
+        // run our app with hyper
+        // `axum::Server` is a re-export of `hyper::Server`
+        log!("listening on {}", &render_options.socket_address);
+        axum::Server::bind(&render_options.socket_address)
+            .serve(app.into_make_service())
+            .await
+            .unwrap();
+    }
+}
+
+    // client-only stuff for Trunk
+    else {
+        use todo_app_sqlite_axum::todo::*;
+
+        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, <TodoApp/> }
+            });
+        }
+    }
+}

examples/todo-app-sqlite-axum/src/todo.rs

@@ -0,0 +1,227 @@
+use cfg_if::cfg_if;
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+use serde::{Deserialize, Serialize};
+
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use sqlx::{Connection, SqliteConnection};
+        use http::{header::SET_COOKIE, HeaderMap, HeaderValue, StatusCode};
+
+        pub async fn db() -> Result<SqliteConnection, ServerFnError> {
+            Ok(SqliteConnection::connect("sqlite:Todos.db").await.map_err(|e| ServerFnError::ServerError(e.to_string()))?)
+        }
+
+        pub fn register_server_functions() {
+            GetTodos::register();
+            AddTodo::register();
+            DeleteTodo::register();
+        }
+
+        #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize, sqlx::FromRow)]
+        pub struct Todo {
+            id: u16,
+            title: String,
+            completed: bool,
+        }
+    } else {
+        #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
+        pub struct Todo {
+            id: u16,
+            title: String,
+            completed: bool,
+        }
+    }
+}
+
+#[server(GetTodos, "/api")]
+pub async fn get_todos(cx: Scope) -> Result<Vec<Todo>, ServerFnError> {
+    // this is just an example of how to access server context injected in the handlers
+    // http::Request doesn't implement Clone, so more work will be needed to do use_context() on this
+    let req_parts = use_context::<leptos_axum::RequestParts>(cx).unwrap();
+    println!("\ncalling server fn");
+    println!("Uri = {:?}", req_parts.uri);
+
+    use futures::TryStreamExt;
+
+    let mut conn = db().await?;
+
+    let mut todos = Vec::new();
+    let mut rows = sqlx::query_as::<_, Todo>("SELECT * FROM todos").fetch(&mut conn);
+    while let Some(row) = rows
+        .try_next()
+        .await
+        .map_err(|e| ServerFnError::ServerError(e.to_string()))?
+    {
+        todos.push(row);
+    }
+
+    // Add a random header(because why not)
+    let mut res_headers = HeaderMap::new();
+    res_headers.insert(SET_COOKIE, HeaderValue::from_str("fizz=buzz").unwrap());
+
+    let res_parts = leptos_axum::ResponseParts {
+        headers: res_headers,
+        status: Some(StatusCode::IM_A_TEAPOT),
+    };
+
+    let res_options_outer = use_context::<leptos_axum::ResponseOptions>(cx);
+    if let Some(res_options) = res_options_outer {
+        res_options.overwrite(res_parts).await;
+    }
+
+    Ok(todos)
+}
+
+#[server(AddTodo, "/api")]
+pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
+    let mut conn = db().await?;
+
+    // fake API delay
+    std::thread::sleep(std::time::Duration::from_millis(1250));
+
+    match sqlx::query("INSERT INTO todos (title, completed) VALUES ($1, false)")
+        .bind(title)
+        .execute(&mut conn)
+        .await
+    {
+        Ok(_row) => Ok(()),
+        Err(e) => Err(ServerFnError::ServerError(e.to_string())),
+    }
+}
+
+#[server(DeleteTodo, "/api")]
+pub async fn delete_todo(id: u16) -> Result<(), ServerFnError> {
+    let mut conn = db().await?;
+
+    sqlx::query("DELETE FROM todos WHERE id = $1")
+        .bind(id)
+        .execute(&mut conn)
+        .await
+        .map(|_| ())
+        .map_err(|e| ServerFnError::ServerError(e.to_string()))
+}
+
+#[component]
+pub fn TodoApp(cx: Scope) -> impl IntoView {
+    view! {
+        cx,
+        <Stylesheet href="/style.css"/>
+        <Router>
+            <header>
+                <h1>"My Tasks"</h1>
+            </header>
+            <main>
+                <Routes>
+                    <Route path="" view=|cx| view! {
+                        cx,
+                        <Todos/>
+                    }/>
+                </Routes>
+            </main>
+        </Router> 
+    }
+}
+
+#[component]
+pub fn Todos(cx: Scope) -> impl IntoView {
+    let add_todo = create_server_multi_action::<AddTodo>(cx);
+    let delete_todo = create_server_action::<DeleteTodo>(cx);
+    let submissions = add_todo.submissions();
+
+    // track mutations that should lead us to refresh the list
+    let add_changed = add_todo.version;
+    let todo_deleted = delete_todo.version;
+
+    // list of todos is loaded from the server in reaction to changes
+    let todos = create_resource(
+        cx,
+        move || (add_changed(), todo_deleted()),
+        move |_| get_todos(cx),
+    );
+
+    view! {
+        cx,
+        <div>
+            <MultiActionForm action=add_todo>
+                <label>
+                    "Add a Todo"
+                    <input type="text" name="title"/>
+                </label>
+                <input type="submit" value="Add"/>
+            </MultiActionForm>
+            <Suspense fallback=move || view! {cx, <p>"Loading..."</p> }>
+                {
+                    let delete_todo = delete_todo.clone();
+                    move || {
+                    let existing_todos = {
+                        let delete_todo = delete_todo.clone();
+                        move || {
+                            todos
+                            .read()
+                            .map({
+                                let delete_todo = delete_todo.clone();
+                                move |todos| match todos {
+                                    Err(e) => {
+                                        vec![view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_any()]
+                                    }
+                                    Ok(todos) => {
+                                        if todos.is_empty() {
+                                            vec![view! { cx, <p>"No tasks were found."</p> }.into_any()]
+                                        } else {
+                                            todos
+                                                .into_iter()
+                                                .map({
+                                                    let delete_todo = delete_todo.clone();
+                                                    move |todo| {
+                                                        let delete_todo = delete_todo.clone();
+                                                        view! {
+                                                            cx,
+                                                            <li>
+                                                                {todo.title}
+                                                                <ActionForm action=delete_todo.clone()>
+                                                                    <input type="hidden" name="id" value={todo.id}/>
+                                                                    <input type="submit" value="X"/>
+                                                                </ActionForm>
+                                                            </li>
+                                                        }
+                                                        .into_any()
+                                                    }
+                                                })
+                                                .collect::<Vec<_>>()
+                                        }
+                                    }
+                                }
+                            })
+                            .unwrap_or_default()
+                        }
+                    };
+
+                    let pending_todos = move || {
+                        submissions
+                        .get()
+                        .into_iter()
+                        .filter(|submission| submission.pending().get())
+                        .map(|submission| {
+                            view! {
+                                cx,
+                                <li class="pending">{move || submission.input.get().map(|data| data.title) }</li>
+                            }
+                        })
+                        .collect::<Vec<_>>()
+                    };
+
+                    view! {
+                        cx,
+                        <ul>
+                            {existing_todos}
+                            {pending_todos}
+                        </ul>
+                    }
+                }
+            }
+            </Suspense>
+        </div>
+    }
+}