Initial version of todo app with sqlite

examples/todo-app-sqlite/Cargo.toml

@@ -0,0 +1,47 @@
+[package]
+name = "todo-app-sqlite"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+actix-files = { version = "0.6", optional = true }
+actix-web = { version = "4", optional = true, features = ["openssl", "macros"] }
+anyhow = "1"
+broadcaster = "1"
+console_log = "0.2"
+console_error_panic_hook = "0.1"
+serde = { version = "1", features = ["derive"] }
+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"
+gloo = { git = "https://github.com/rustwasm/gloo" }
+sqlx = { version = "0.6", 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:actix-files",
+	"dep:actix-web",
+	"dep:sqlx",
+	"leptos/ssr",
+	"leptos_meta/ssr",
+	"leptos_router/ssr",
+]
+
+[package.metadata.cargo-all-features]
+denylist = ["actix-files", "actix-web", "sqlx"]
+skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]

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

@@ -0,0 +1,21 @@
+# Leptos Counter Isomorphic Example
+
+This example demonstrates how to use a server functions and multi-actions to build a simple todo app.
+
+## 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/todo-app-sqlite/migrations/20221118172000_create_todo_table.sql

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

examples/todo-app-sqlite/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::hydrate(body().unwrap(), |cx| {
+                view! { cx,  <TodoApp/> }
+            });
+        }
+    }
+}

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

@@ -0,0 +1,108 @@
+use cfg_if::cfg_if;
+use leptos::*;
+use leptos_router::*;
+mod todo;
+
+// boilerplate to run in different modes
+cfg_if! {
+    // server-only stuff
+    if #[cfg(feature = "ssr")] {
+        use actix_files::{Files};
+        use actix_web::*;
+        use crate::todo::*;
+
+        #[get("{tail:.*}")]
+        async fn render(req: HttpRequest) -> impl Responder {
+            let path = req.path();
+            let path = "http://leptos".to_string() + path;
+            println!("path = {path}");
+
+            HttpResponse::Ok().content_type("text/html").body(format!(
+                r#"<!DOCTYPE html>
+                <html lang="en">
+                    <head>
+                        <meta charset="utf-8"/>
+                        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+                        <title>Leptos Todos</title>
+                    </head>
+                    <body>
+                        {}
+                    </body>
+                    <script type="module">import init, {{ hydrate }} from './pkg/todo_app_sqlite.js'; init().then(hydrate);</script>
+                </html>"#,
+                run_scope({
+                    move |cx| {
+                        let integration = ServerIntegration { path: path.clone() };
+                        provide_context(cx, RouterIntegrationContext::new(integration));
+
+                        view! { cx, <TodoApp/>}
+                    }
+                })
+            ))
+        }
+
+        #[post("/api/{tail:.*}")]
+        async fn handle_server_fns(
+            req: HttpRequest,
+            params: web::Path<String>,
+            body: web::Bytes,
+        ) -> impl Responder {
+            let path = params.into_inner();
+            let accept_header = req
+                .headers()
+                .get("Accept")
+                .and_then(|value| value.to_str().ok());
+
+            if let Some(server_fn) = server_fn_by_path(path.as_str()) {
+                let body: &[u8] = &body;
+                match server_fn(&body).await {
+                    Ok(serialized) => {
+                        // if this is Accept: application/json then send a serialized JSON response
+                        if let Some("application/json") = accept_header {
+                            HttpResponse::Ok().body(serialized)
+                        }
+                        // otherwise, it's probably a <form> submit or something: redirect back to the referrer
+                        else {
+                            HttpResponse::SeeOther()
+                                .insert_header(("Location", "/"))
+                                .content_type("application/json")
+                                .body(serialized)
+                        }
+                    }
+                    Err(e) => {
+                        eprintln!("server function error: {e:#?}");
+                        HttpResponse::InternalServerError().body(e.to_string())
+                    }
+                }
+            } else {
+                HttpResponse::BadRequest().body(format!("Could not find a server function at that route."))
+            }
+        }
+
+        #[actix_web::main]
+        async fn main() -> std::io::Result<()> {
+            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();
+
+            HttpServer::new(|| {
+                App::new()
+                    .service(Files::new("/pkg", "./pkg"))
+                    .service(handle_server_fns)
+                    .service(render)
+                //.wrap(middleware::Compress::default())
+            })
+            .bind(("127.0.0.1", 8081))?
+            .run()
+            .await
+        }
+        }
+
+    else {
+        // no client-only version is possible, because we're depending on the server
+    }
+}

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

@@ -0,0 +1,131 @@
+use cfg_if::cfg_if;
+use leptos::*;
+use leptos_router::*;
+use serde::{Deserialize, Serialize};
+
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use sqlx::{Connection, SqliteConnection};
+
+        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();
+        }
+
+        #[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() -> Result<Vec<Todo>, ServerFnError> {
+    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);
+    }
+
+    Ok(todos)
+}
+
+#[server(AddTodo, "/api")]
+pub async fn add_todo(title: String) -> Result<u16, ServerFnError> {
+    use futures::TryStreamExt;
+
+    let mut conn = db().await?;
+
+    match sqlx::query("INSERT INTO todos (title, completed) VALUES ($1, false)")
+        .bind(title)
+        .execute(&mut conn)
+        .await
+    {
+        Ok(row) => Ok(0),
+        Err(e) => Err(ServerFnError::ServerError(e.to_string())),
+    }
+}
+
+#[component]
+pub fn TodoApp(cx: Scope) -> Element {
+    view! {
+        cx,
+        <div>
+            <Router>
+                <header>
+                    <h1>"My Tasks"</h1>
+                </header>
+                <main>
+                    <Routes>
+                        <Route path="" element=|cx| view! {
+                            cx,
+                            <Todos/>
+                        }/>
+                    </Routes>
+                </main>
+            </Router>
+        </div>
+    }
+}
+
+#[component]
+pub fn Todos(cx: Scope) -> Element {
+    let add_todo = create_server_multi_action::<AddTodo>(cx);
+    let add_changed = add_todo.version;
+
+    let todos = create_resource(cx, move || add_changed(), |_| get_todos());
+    let todos_view = move || {
+        todos.read().map(|todos| match todos {
+            Err(e) => view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>},
+            Ok(todos) => {
+                if todos.is_empty() {
+                    view! { cx, <p>"No tasks were found."</p> }
+                } else {
+                    let todos = todos
+                        .into_iter()
+                        .map(|todo| view! { cx, <li>{todo.title}</li> })
+                        .collect::<Vec<_>>();
+                    view! {
+                        cx,
+                        <ul>{todos}</ul>
+                    }
+                }
+            }
+        })
+    };
+
+    view! {
+        cx,
+        <div>
+            <MultiActionForm action=add_todo>
+                <label>
+                    "Add a Todo"
+                    <input type="text" name="title"/>
+                </label>
+                <input type="submit" value="Add"/>
+            </MultiActionForm>
+            {todos_view}
+        </div>
+    }
+}