tomevault-io 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+)
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
#[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:
#[component]
fn Profile(id: u32) -> Element {
let user = get_user(id)?; // Early return on error
rsx! { "{user.name}" }
}
Suspense for Async
rsx! {
SuspenseBoundary {
fallback: |_| rsx! { "Loading..." },
AsyncChild {}
}
}
fn AsyncChild() -> Element {
let data = use_resource(fetch_data).suspend()?;
rsx! { "{data}" }
}
Document Head
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+)
#[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+)
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
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:
// 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:
// GOOD: Proper reactivity
rsx! {
p {
font_weight: if bold() { "bold" } else { "normal" },
text_align: "{align}",
}
}
Native FFI Bridge (0.7.4+)
Write mobile plugins in Kotlin/Java/Swift with dioxus_platform_bridge. CLI auto-bundles via linker metadata:
#[cfg(all(feature = "metadata", target_os = "android"))]
dioxus_platform_bridge::android_plugin!(
plugin = "geolocation",
aar = { env = "DIOXUS_ANDROID_ARTIFACT" },
deps = ["implementation(\"com.google.android.gms:play-services-location:21.3.0\")"]
);
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
Workspace hot-patching (0.7.4+): Subsecond now patches across workspace library crates, not just the tip crate.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.