dioxus-knowledge-patch: скилл для разработки Dioxus приложений

--- name: dioxus-knowledge-patch description: This skill should be used when writing Dioxus code, building Rust web/desktop/mobile apps with Dioxus, using RSX macro, signals, server functions, or any Dioxus features from 0.5+ (2024-2026). license: MIT metadata: author: Nevaberry version: "0.7.3" --- # Dioxus 0.5+ Knowledge Patch Claude's baseline knowledge covers Dioxus through 0.4.x. This skill provides features from 0.5 (2024) onwards. ## Quick Reference ### Component Syntax (0.5+) | Old (0.4) | New (0.5+) | |-----------|------------| | `fn App(cx: Scope) -> Element` | `fn App() -> Element` | | `cx.use_hook()` | `use_signal()`, `use_memo()` | | `use_state`, `use_ref` | `Signal<T>` (always Copy) | | Per-platform launchers | `dioxus::launch(App)` | ### Signals | Operation | Syntax | |-----------|--------| | Create | `let count = use_signal(|| 0);` | | Read (subscribes) | `count.read()` or `count()` | | Read (no subscribe) | `count.peek()` | | Write | `count.write()`, `count.set(5)`, `count += 1` | | Global | `static THEME: GlobalSignal<T> = GlobalSignal::new(|| ...)` | | Mapped | `user.map(|u| &u.name)` | See `references/signals-hooks.md` for hooks, effects, resources, coroutines. ### RSX Syntax | Pattern | Example | |---------|---------| | Conditional | `if show { Header {} }` | | Conditional attr | `class: if active { "active" }` | | List with key | `for item in items { li { key: "{item.id}", ... } }` | | Children prop | `fn Card(children: Element) -> Element` | | Optional prop | `#[props(default)] disabled: bool` | | Prop into | `#[props(into)] id: String` | See `references/rsx-patterns.md` for attributes, events, prop spreading. ### Assets (0.6+) ```rust const LOGO: Asset = asset!("/assets/logo.png"); const HERO: Asset = asset!("/hero.png", ImageAssetOptions::new() .format(ImageFormat::Avif).preload(true)); const STYLES: Asset = asset!("/app.css", CssAssetOptions::new().minify(true)); ``` ### Server Functions (0.7+) | Feature | Syntax | |---------|--------| | Basic | `#[server] async fn get_data() -> Result<T>` | | Route params | `#[get("/api/users/{id}")] async fn get_user(id: u32)` | | Query params | `#[get("/search?query")] async fn search(query: String)` | | Middleware | `#[server] #[middleware(AuthLayer)]` | | Extractors | `async fn auth(headers: HeaderMap, cookies: Cookies)` | See `references/fullstack.md` for WebSocket, SSR, streaming, server config. ### Router ```rust #[derive(Routable, Clone, PartialEq)] enum Route { #[route("/")] Home {}, #[route("/user/:id")] User { id: u32 }, #[route("/files/:..path")] // Catch-all Files { path: Vec<String> }, } ``` See `references/router.md` for layouts, navigation, nested routes. ### CLI Commands | Command | Purpose | |---------|---------| | `dx serve` | Dev server with hot-reload | | `dx serve --platform ios` | iOS simulator | | `dx build --release` | Production build | | `dx bundle` | Package for distribution | | `dx serve --wasm-split` | Route-based code splitting | See `references/cli-desktop.md` for desktop config, platform args. ## Reference Files | File | Contents | |------|----------| | `signals-hooks.md` | Signals, use_memo, use_effect, use_resource, context | | `rsx-patterns.md` | RSX syntax, props, events, conditionals, lists | | `fullstack.md` | Server functions, SSR, WebSocket, extractors | | `router.md` | Routes, layouts, navigation, parameters | | `cli-desktop.md` | CLI commands, desktop config, platforms | ## Critical Knowledge ### Element is Result (0.6+) Use `?` anywhere - propagates to ErrorBoundary: ```rust #[component] fn Profile(id: u32) -> Element { let user = get_user(id)?; // Early return on error rsx! { "{user.name}" } } ``` ### Suspense for Async ```rust rsx! { SuspenseBoundary { fallback: |_| rsx! { "Loading..." }, AsyncChild {} } } fn AsyncChild() -> Element { let data = use_resource(fetch_data).suspend()?; rsx! { "{data}" } } ``` ### Document Head ```rust use dioxus::document::{Title, Link, Meta}; rsx! { Title { "My Page" } Meta { name: "description", content: "..." } Link { rel: "stylesheet", href: asset!("/style.css") } } ``` ### Stores for Nested State (0.7+) ```rust #[derive(Store)] struct AppState { users: BTreeMap<String, User>, } #[component] fn UserList(state: Store<AppState>) -> Element { let users = state.users(); rsx! { for (id, user) in users.iter() { UserRow { key: "{id}", user } // Only changed items re-render } } } ``` ### CSS Modules (0.7.3+) ```rust css_module!(Styles = "/styles.module.css", AssetOptions::css_module()); rsx! { div { class: Styles::container, // Typed, compile-checked p { class: Styles::title, "Hello" } } } ``` ### Fullstack Server Setup ```rust use axum::Router; use dioxus::prelude::*; #[tokio::main] async fn main() { let app = Router::new() .serve_static_assets("dist") .serve_dioxus_application(ServeConfig::new(), App); let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap(); axum::serve(listener, app).await.unwrap(); } ``` ### Reactivity Gotchas **Memos in attributes don't subscribe properly:** ```rust // BAD: Won't update let style = use_memo(move || format!("color: {}", color())); rsx! { div { style: style } } // GOOD: Direct signal read rsx! { div { style: format!("color: {}", color()) } } ``` **Use individual CSS properties:** ```rust // GOOD: Proper reactivity rsx! { p { font_weight: if bold() { "bold" } else { "normal" }, text_align: "{align}", } } ``` ### Hot-Reload Boundaries **Instant reload:** Literal values, text, formatted segments, attribute order, template structure **Requires rebuild:** Rust logic, component structure, control flow conditions, struct field changes