diff options
| -rw-r--r-- | README.md | 20 | ||||
| -rw-r--r-- | dist/css/main.css | 79 | ||||
| -rw-r--r-- | dist/index.html | 21 | ||||
| -rw-r--r-- | src-tauri/Cargo.lock | 56 | ||||
| -rw-r--r-- | src-tauri/Cargo.toml | 1 | ||||
| -rw-r--r-- | src-tauri/src/main.rs | 34 | ||||
| -rw-r--r-- | src-ui/src/main.ts | 33 |
7 files changed, 226 insertions, 18 deletions
@@ -1 +1,19 @@ -Rust Tauri App Introduction from YouTube video:
\ No newline at end of file + +Source code for the [Rust Tauri Introduction Video](https://www.youtube.com/watch?v=kRoGYgAuZQE&list=PL7r-PXl6ZPcCIOFaL7nVHXZvBmHNhrh_Q) + +## Setup + +```sh +npm install +``` + +## Run + +```sh +# terminal 1 (UI localhost for hot-reload) +npm run ui-dev + +# terminal 2 (for the Tauri ho) +npm +``` + diff --git a/dist/css/main.css b/dist/css/main.css new file mode 100644 index 00000000..2b5cbee0 --- /dev/null +++ b/dist/css/main.css @@ -0,0 +1,79 @@ +/* #region --- Base */ + +* { + /* best practice for application */ + box-sizing: border-box; + /* To allow flex/grid box to shrink smaller than content. + see: https://stackoverflow.com/a/36247448/686724 */ + min-width: 0; + min-height: 0; + /* layout normalization */ + margin: 0; + padding: 0; +} + +html, +body { + height: 100%; + font-size: 16px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + /* make sure the canvas is the browser window */ +} + +html { + overflow: hidden; + /* prevent the browser 'bounce' (but will prevent screen scroll as well)*/ +} + +/* #endregion --- Base */ + +div.hello { + cursor: pointer; + user-select: none; + -webkit-user-select: none; + padding: .5rem .5rem; + border: solid 1px #dedede; + color: #888; + font-size: 1.rem; +} + +counter-button { + cursor: pointer; + user-select: none; + -webkit-user-select: none; + border: solid 1px hsl(210, 78%, 37%); + border-radius: 5px; + background: hsl(210, 90%, 76%); + padding: .875rem 3rem; + font-size: 1.5rem; +} + +counter-button:active { + background: hsl(210, 90%, 84%); +} + +counter-result { + border: solid 1px #dedede; + font-size: 1.5rem; + padding: 1.5rem 1rem; +} + +backend-ping { + position: absolute; + top: 1rem; + right: 1rem; + border-radius: 3rem; + width: 1rem; + height: 1rem; + background-color: hsl(217, 100%, 50%); + transition: scale .125s; +} + +backend-ping.on { + scale: 1.25; + background-color: hsl(120, 100%, 32%); +}
\ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 47f32451..c57eabc8 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,22 +1,11 @@ <!DOCTYPE html> <html> - <style> - html, - body { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - } - - body { - display: flex; - align-items: center; - justify-content: center; - } - </style> + <link rel="stylesheet" href="css/main.css"> <script src="js/app-bundle.js"></script> <body> - <h1>Cool Stuff!!!</h1> + <div class="hello">Click for Hello</div> + <counter-button>ADD</counter-button> + <counter-result>.</counter-result> + <backend-ping class="server"></backend-ping> </body> </html> diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 3a3fb8e8..4081fd8d 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -61,6 +61,7 @@ dependencies = [ "serde_json", "tauri", "tauri-build", + "tokio", ] [[package]] @@ -1460,6 +1461,18 @@ dependencies = [ ] [[package]] +name = "mio" +version = "0.8.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "713d550d9b44d89174e066b7a6217ae06234c10cb47819a88290d2b353c31799" +dependencies = [ + "libc", + "log", + "wasi 0.11.0+wasi-snapshot-preview1", + "windows-sys", +] + +[[package]] name = "native-tls" version = "0.2.10" source = "registry+https://github.com/rust-lang/crates.io-index" @@ -2487,6 +2500,15 @@ dependencies = [ ] [[package]] +name = "signal-hook-registry" +version = "1.4.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "e51e73328dc4ac0c7ccbda3a494dfa03df1de2f46018127f60c693f2648455b0" +dependencies = [ + "libc", +] + +[[package]] name = "siphasher" version = "0.3.10" source = "registry+https://github.com/rust-lang/crates.io-index" @@ -2505,6 +2527,16 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "f2dd574626839106c320a323308629dcb1acfc96e32a8cba364ddc61ac23ee83" [[package]] +name = "socket2" +version = "0.4.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "66d72b759436ae32898a2af0a14218dbf55efde3feeb170eb623637db85ee1e0" +dependencies = [ + "libc", + "winapi", +] + +[[package]] name = "soup2" version = "0.2.1" source = "registry+https://github.com/rust-lang/crates.io-index" @@ -2968,10 +3000,28 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "c51a52ed6686dd62c320f9b89299e9dfb46f730c7a48e635c19f21d116cb1439" dependencies = [ "bytes", + "libc", "memchr", + "mio", "num_cpus", "once_cell", + "parking_lot 0.12.0", "pin-project-lite", + "signal-hook-registry", + "socket2", + "tokio-macros", + "winapi", +] + +[[package]] +name = "tokio-macros" +version = "1.8.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9724f9a975fb987ef7a3cd9be0350edcbe130698af5b8f7a631e23d42d052484" +dependencies = [ + "proc-macro2", + "quote", + "syn", ] [[package]] @@ -3210,6 +3260,12 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "fd6fbd9a79829dd1ad0cc20627bf1ed606756a7f77edff7b66b7064f9cb327c6" [[package]] +name = "wasi" +version = "0.11.0+wasi-snapshot-preview1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423" + +[[package]] name = "wasm-bindgen" version = "0.2.80" source = "registry+https://github.com/rust-lang/crates.io-index" diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index afafa6e4..a07e4d24 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -18,6 +18,7 @@ tauri-build = { version = "1.0.0", features = [] } serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } tauri = { version = "1.0.0", features = ["api-all"] } +tokio = { version = "1", features = ["full"] } [features] # by default Tauri runs in production mode diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 65bb630c..464a5430 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -2,9 +2,43 @@ all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )] +use std::sync::{Arc, Mutex}; +use std::time::Duration; +use tauri::{Manager, State}; +use tokio::time::sleep; + +#[derive(Default)] +struct Counter(Arc<Mutex<i32>>); fn main() { tauri::Builder::default() + .setup(|app| { + let app_handle = app.app_handle(); + tauri::async_runtime::spawn(async move { + loop { + sleep(Duration::from_millis(2000)).await; + println!("sending backend-ping"); + app_handle.emit_all("backend-ping", "ping").unwrap(); + } + }); + + Ok(()) + }) + .manage(Counter::default()) + .invoke_handler(tauri::generate_handler![hello_world, add_count]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } + +#[tauri::command] +fn hello_world() -> String { + "Hello World!!!!".to_string() +} + +#[tauri::command] +fn add_count(num: i32, counter: State<'_, Counter>) -> String { + let mut val = counter.0.lock().unwrap(); + *val += num; + + format!("{val}") +} diff --git a/src-ui/src/main.ts b/src-ui/src/main.ts index aa31bb93..6492a32a 100644 --- a/src-ui/src/main.ts +++ b/src-ui/src/main.ts @@ -1,4 +1,35 @@ +import { invoke } from '@tauri-apps/api'; +import { Event as TauriEvent, listen } from '@tauri-apps/api/event'; +const $ = document.querySelector.bind(document); document.addEventListener("DOMContentLoaded", async function () { - document.body.textContent = "Hello from main.ts"; + // get the elements + const helloEl = $("div.hello") as HTMLElement; + const counterButtonEl = $("counter-button") as HTMLElement; + const counterResultEl = $("counter-result") as HTMLElement; + const pingEl = $("backend-ping") as HTMLElement; + + // listen backend-ping event + listen("backend-ping", function (evt: TauriEvent<any>) { + pingEl.classList.add("on"); + setTimeout(function () { + pingEl.classList.remove("on") + }, 500); + }) + + // counter button click + counterButtonEl.addEventListener("pointerup", async function () { + const result = await invoke("add_count", { num: 3 }) as string; + counterResultEl.textContent = result; + }); + + // hello click + helloEl.addEventListener("pointerup", async function () { + const result = await invoke("hello_world") as string; + helloEl.textContent = result; + setTimeout(function () { + helloEl.textContent = "Click again"; + }, 1000); + }); + });
\ No newline at end of file |