Use leptos

dyesub-tool/Cargo.toml

@@ -8,9 +8,9 @@ askama = "0.12.0"
 derive_more = "0.99.17"
 kle-serial = "0.2.2"
 lazy_static = "1.4.0"
+leptos = { version = "0.4.8", features = ["csr", "nightly"] }
 regex = "1.9.3"
 serde_json = "1.0.105"
 strum = "0.25.0"
 strum_macros = "0.25.2"
-sycamore = "0.9.0-beta.1"
+wasm-bindgen = "0.2.87"
-web-sys = "0.3.64"

dyesub-tool/src/main.rs

@@ -1,49 +1,22 @@
 mod render;
 pub mod svg;
 
-use svg::{SVGUnit, SVGMeasure};
+use leptos::*;
-use sycamore::{prelude::*, view::ToView, builder::t};
+use wasm_bindgen::JsCast;
 
-#[derive(Clone, Copy, PartialEq, Eq, Default)]
+#[component]
-struct Color {
+fn App(cx: Scope) -> impl IntoView {
-    red: u8,
+    let (count, set_count) = create_signal(cx, 0);
-    green: u8,
-    blue: u8,
-}
 
-impl<G: Html> ToView<G> for SVGUnit {
-    fn to_view(&self) -> View<G> {
-        t(self.to_string())
-    }
-}
-
-#[component(inline_props)]
-fn Slider<'a, G: Html>(cx: Scope<'a>, value: &'a Signal<f64>, unit: Option<SVGUnit>) -> View<G> {
     view! { cx,
-        div(class="f-row align-items:center") {
+        <button on:click=move |_| set_count(count.get() + 1)>
-            span { (value.get())(unit) }
+            "Click me: "
-            input(type="range", bind:valueAsNumber=value)
+            {move || count.get()}
-        }
+        </button>
     }
 }
 
-fn main() {
+pub fn main() {
-    sycamore::render_to(
+    let root = document().query_selector("main").unwrap().unwrap();
-        |cx| {
+    mount_to(root.unchecked_into(), |cx| view! { cx, <App/> });
-            let x = create_signal(cx, 0.0);
+}
-            let y = create_signal(cx, 0.0);
-            let z = create_signal(cx, 0.0);
-            view! { cx,
-                "Total: "(*x.get() + *y.get() + *z.get())
-                Slider(value=x, unit=SVGUnit::Inch)
-                Slider(value=y)
-                Slider(value=z)
-            }
-        },
-        {
-            let window = web_sys::window().unwrap();
-            let document = window.document().unwrap();
-            &document.query_selector("main").unwrap().unwrap()
-        },
-    );
-}

flake.nix

@@ -38,7 +38,9 @@ Updating `cargoHash`:
     in {
       devShells.${system}.default = with pkgs; mkShell {
         packages = [
-          (pkgs.rust-bin.stable.latest.default.override {
+          # nightly is required for function signal syntax in leptos
+          # https://leptos-rs.github.io/leptos/02_getting_started.html
+          (pkgs.rust-bin.nightly.latest.default.override {
             targets = [ "wasm32-unknown-unknown" ];
             extensions = [ "rust-src" ];
           })
@@ -53,7 +55,7 @@ Updating `cargoHash`:
           version = "0.1.0";
           buildAndTestSubdir = "dyesub-tool";
           buildInputs = with pkgs; [ trunk ];
-          cargoHash = "sha256-Nh+XIRDru7wMnEqXP1V1zMK7B4uDQqT9Fg18BZtGEYQ=";
+          cargoHash = "sha256-Bxc2koMKq8cGFiJtA0qL1geWQls1k2PgtByg7LZwdlc=";
           meta = meta // {
             description = "A tool for generating dye sublimation transfer sheet SVGs for Japanese thumb shift 拇指シフト keycaps.";
           };