Leptos でHello World

micchi

Leptos

Full stack, fully typed.
A cutting-edge Rust framework for the modern web.

をうたうLeptos を触ってみます。

micchi

Getting Started によると、プロジェクト構成の方法には２つある模様。

Client-side rendering (CSR) with Trunk
Full-stack, server-side rendering (SSR) with cargo-leptos

We’ll introduce cargo-leptos in Part 2 of this book, which is all about working with the full power of Leptos in its full-stack, SSR mode.

とあるものの、ドキュメントの順番に従って1. からやってみる。

micchi

Hello World! Getting Set up for Leptos CSR Development

下準備

cargo install trunk

プロジェクトひな形作成

cargo init leptos-tutorial
cd $_
cargo add leptos --features=csr,nightly

Using nightly Rust, and the nightly feature in Leptos enables the function-call syntax for signal getters and setters that is used in most of this book.

とのことなので、Rust もnightly に

rustup default nightly
rustup override set nightly

WebAsssembly 用のtarget を追加

rustup target add wasm32-unknown-unknown

micchi

プロジェクト直下にindex.html を作成し、以下の内容にする。

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

src/main.rs を以下の内容に編集

use leptos::*;

fn main() {
    mount_to_body(|| view! { <p>"Hello, world!"</p> });
}

micchi

Build & Run

trunk serve --open
...（中略）...
 INFO downloading wasm-bindgen version="0.2.92"
 INFO installing wasm-bindgen
 INFO applying new distribution
 INFO ✅ success
 INFO 📡 serving static assets at -> /
 INFO 📡 server listening at:
 INFO     🏠 http://127.0.0.1:8080/
 INFO     🏠 http://[::1]:8080/
ERROR error opening browser error=Os { code: 2, kind: NotFound, message: "No such file or directory" }

とエラーが出ているが、ウェブブラウザでhttp://127.0.0.1:8080/ を開くと、Hello, world! と表示されています。

micchi

引き続き、開発者体験を向上する機能の有効化
Leptos Developer Experience Improvements

console_error_panic_hook

cargo add console_error_panic_hook

[rustwasm / console_error_panic_hook] Readme / Usage の２つ目のやり方でhook を設定。

use leptos::*;

fn main() {
+    // set console error panic hook
+    console_error_panic_hook::set_once();

    mount_to_body(|| view! { <p>"Hello, world!"</p> });
}

micchi

2) Editor Autocompletion inside #[component] and #[server]

指示に従い、.vscode/setting.json に追記

{
    "rust-analyzer.procMacro.ignored": {
        "leptos_macro": [
            // optional:
            // "component",
            "server"
        ],
    },

    // if code that is cfg-gated for the `ssr` feature is shown as inactive,
    // you may want to tell rust-analyzer to enable the `ssr` feature by default
    //
    // you can also use `rust-analyzer.cargo.allFeatures` to enable all features
    "rust-analyzer.cargo.features": ["ssr"],
}

micchi

3) Set up leptosfmt With Rust Analyzer (optional)

cargo install leptosfmt

[GitHub] bram209/leptosfmt > Readme に従い、leptosfmt をセットアップ

settings.json

{
    "rust-analyzer.procMacro.ignored": {
        "leptos_macro": [
            // optional:
            // "component",
            "server"
        ],
    },

    // if code that is cfg-gated for the `ssr` feature is shown as inactive,
    // you may want to tell rust-analyzer to enable the `ssr` feature by default
    //
    // you can also use `rust-analyzer.cargo.allFeatures` to enable all features
    "rust-analyzer.cargo.features": ["ssr"],

+    // using with rust analyzer with leptosfmt
+    "rust-analyzer.rustfmt.overrideCommand": ["leptosfmt", "--stdin", "--rustfmt"]
}

rustfmt.toml

edition = "2021"