[RS-FE] Start FE rewrite in Dioxus

rs-front/.gitignore

@@ -0,0 +1,5 @@
+dist
+.directory
+target
+public/tailwind.css
+

rs-front/Cargo.toml

@@ -0,0 +1,22 @@
+[package]
+name = "rs-frontend"
+version = "0.1.0"
+authors = ["Araozu <fernando@eegsac.com>"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+
+dioxus-web = { version = "0.4" }
+dioxus = { version = "0.4" }
+
+dioxus-router = { version = "0.4", features = ["web"] }
+
+# Debug
+log = "0.4.19"
+dioxus-logger = "0.4.1"
+
+console_error_panic_hook = "0.1.7"
+serde = "1.0.193"
+

rs-front/Dioxus.toml

@@ -0,0 +1,43 @@
+[application]
+
+# App (Project) Name
+name = "rs-frontend"
+
+# Dioxus App Default Platform
+# desktop, web, mobile, ssr
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (public) file folder
+asset_dir = "public"
+
+[web.app]
+
+# HTML title tag content
+title = "dioxus | ⛺"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "public"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+
+style = ["tailwind.css"]
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

rs-front/README.md

@@ -0,0 +1,9 @@
+# Development
+
+1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
+2. Install the tailwind css cli: https://tailwindcss.com/docs/installation
+3. Run the following command in the root of the project to start the tailwind CSS compiler:
+
+```bash
+pnpx tailwindcss -i ./input.css -o ./public/tailwind.css --watch
+```

rs-front/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

rs-front/src/main.rs

@@ -0,0 +1,66 @@
+#![allow(non_snake_case)]
+
+use dioxus_router::prelude::*;
+
+use dioxus::prelude::*;
+use log::LevelFilter;
+
+fn main() {
+    // Init debug
+    dioxus_logger::init(LevelFilter::Info).expect("failed to init logger");
+    console_error_panic_hook::set_once();
+
+    log::info!("starting app");
+    dioxus_web::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    render! {
+        Router::<Route> {}
+    }
+}
+
+#[derive(Clone, Routable, Debug, PartialEq)]
+enum Route {
+    #[route("/")]
+    Home {},
+    #[route("/blog/:id")]
+    Blog { id: i32 },
+}
+
+#[component]
+fn Blog(cx: Scope, id: i32) -> Element {
+    render! {
+        Link { to: Route::Home {}, "Go to counter" }
+        "Blog post {id}"
+    }
+}
+
+#[component]
+fn Home(cx: Scope) -> Element {
+    let mut count = use_state(cx, || 0);
+
+    cx.render(rsx! {
+        Link {
+            to: Route::Blog {
+                id: *count.get()
+            },
+            "Go to blog"
+        }
+        div {
+            h1 { 
+                class: "text-red-400 text-2xl py-2 px-4 border border-red-400 rounded-md",
+                "High-Five counter: {count} :D (Are classes slow?)"
+            }
+            button { onclick: move |_| count += 1, "Up high!" }
+            button { onclick: move |_| count -= 1, "Down low!" }
+            br {}
+            p {
+                "Huh, it looks like using a project using dx makes it slower. We'll have to see how it goes..."
+            }
+            p {
+                "Or maybe not?"
+            }
+        }
+    })
+}

rs-front/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    mode: "all",
+    content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};