Leptosを触ってみる

# trunk : WASMで動かすWebアプリ用のバンドラ
# cargo-generate : gitリポジトリをテンプレートとして新規プロジェクトを作成
cargo install trunk cargo-generate

# 提供されているテンプレから作成。他にもstart-awsとかがある
# ドキュメント上だとOrganizationが `leptos-community` だったが `leptos-rs` にリダイレクトされてた
cargo generate --git https://github.com/leptos-community/start-csr

# 起動
trunk serve --port 3000 --open

use leptos::prelude::*;

#[component]
fn App() -> impl IntoView {
    let (count, set_count) = signal(0);

    view! {
        <button
            on:click=move |_| set_count.set(3)
        >
            "Click me: "
            {count}
        </button>
        <p>
            "Double count: "
            {move || count.get() * 2}
        </p>
    }
}

let (count, set_count) = signal(0);

        <p>
            <strong>"Reactive: "</strong>
            {move || count.get()}
        </p>
        <p>
            <strong>"Reactive shorthand: "</strong>
            {count}
        </p>
        <p>
            <strong>"Not reactive: "</strong>
            {count.get()}
        </p>