Skip to content

Releases: DioxusLabs/dioxus

v0.5.1: Bug fixes!

05 Apr 00:14
@jkelleyrtp jkelleyrtp
v0.5.1
9c5e5f9
This commit was signed with the committer’s verified signature.
jkelleyrtp Jonathan Kelley
GPG key ID: 1FBB50F7EB0A08BE
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.5.1: Bug fixes! Latest
Latest

0.5.1: Bug Fixes!

Thanks everyone for the great feedback for the 0.5.0 launch! We're releasing 0.5.1 now with a bunch of bug fixes.

This includes some stuff like fixing async polling, some smalls issues with memos and resources, and a memory leak in EventHandler.

We strongly recommend you upgrade your dioxus project with cargo update!

The autoformatter also changed a bit, so if you're using the VSCode extension, you should get the updates automatically.

What's Changed

New Contributors

Full Changelog: v0.5.0...v0.5.1

Contributors

mullr, loverdos, and 11 other contributors
Assets 2

v0.5.0

28 Mar 01:27
@ealmloff ealmloff
v0.5.0
f6c3b27
This commit was signed with the committer’s verified signature.
jkelleyrtp Jonathan Kelley
GPG key ID: 1FBB50F7EB0A08BE
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.5.0

Dioxus 0.5: Signal Rewrite, Remove lifetimes/unsafe, CSS Hotreloading, 5x Faster Desktop, Asset System, and more!

Read the Full 0.5 release post on the Dioxus blog

The story

Here at Dioxus Labs, we have an unofficial rule: only one rewrite per year.

Our last rewrite brought some amazing features: templates, hotreloading, and insane performance. However, don’t be mistaken, rewrites are scary, time consuming, and a huge gamble. We started this new rewrite on January 1st of 2024, completed it by Feburary 1st, and then spent another month and a half writing tests, squashing bugs, and polishing documentation. Rewrites are absolutely not for the faint of heart.

If you’re new here, Dioxus (dye•ox•us) is a library for building GUIs in Rust. Originally, I built Dioxus as a rewrite of Yew with the intention of supporting proper server-side-rendering. Eventually, Dioxus got popular, we got some amazing sponsors, and I went full time. We’ve grown from a team of 1 (me) to a team of 4(!) - pulled entirely from the wonderful dioxus community.

Now, Dioxus is something a little different. Real life, actual companies are shipping web apps, desktop apps, and mobile apps with Dioxus. What was once just a fun little side project powers a small fraction of apps out in the wild. We now have lofty goals of simplifying the entire app development ecosystem. Web, Desktop, Mobile, all end-to-end typesafe, blazing fast, living under one codebase. The dream!

With 0.5 we took a hard look at how Dioxus would need to change to achieve those goals. The request we got from the community was clear: make it simpler, make it robust, make it polished.

What’s new?

This is probably the biggest release of Dioxus ever, with so many new features, bug fixes, and improvements that I can’t list them all. We churned over 100,000 lines of code (yes, 100,000+) with over 1,400 commits between 0.4.3 and 0.5.0. Here’s a quick overview:

  • Complete rewrite of dioxus-core, removing all unsafe code
  • Abandoning use_state and use_ref for a clone-free Signal-based API
  • Removal of all lifetimes and the cx: Scope state
  • A single, unified launch function that starts your app for any platform
  • Asset hotreloading that supports Tailwind and Vanilla CSS
  • Rewrite of events, allowing access to the native WebSys event types
  • Extension of components with element properties (IE a Link now takes all of <a/> properties)
  • Integrated Error Boundaries and Server Futures with Suspense integration
  • 5x faster desktop reconciliation and custom asset handlers for streaming bytes
  • Streaming server functions and fullstack hotreloading
  • Tons of QoL improvements, bug fixes, and more!
💡 If you are updating from DIoxus 0.4, a migration guide is available

Lifetime Problems

To make Dioxus simpler, we wanted to remove lifetimes entirely. Newcomers to rust are easily scared off by lifetime issues, and even experienced Rustaceans find wading through obtuse error messages exhausting.

In dioxus 0.1-0.4, every value in a component lives for a 'bump lifetime. This lifetime lets you easily use hooks, props and the scope within event listeners without cloning anything. It was the chief innovation that made Dioxus so much easier to use than Yew when it was released.

// Scope and Element have the lifetime 'bump
fn OldDioxusComponent(cx: Scope) -> Element {
  // hook has the lifetime 'bump
  let mut state = use_state(cx, || 0);
  cx.render(rsx! {
    button {
      // The closure has the lifetime 'bump which means you don't 
      // need to clone hook before you move it into the closure 
      onclick: move |_event| *state += 1,
    }
  })
}

This works great for hooks most of the time. The lifetime lets you omit a bunch of manual clones every time you want to use a value inside an EventHandler (onclick, oninput, etc).

However, the lifetime doesn’t work for futures. Futures in dioxus need to be 'static which means you always need to clone values before you use them in the future. Since a future might need to run while the component is rendering, it can’t share the component’s lifetime.

// Scope and Element have the lifetime 'bump
fn OldDioxusComponent(cx: Scope) -> Element {
  // state has the lifetime 'bump
  let state = use_state(cx, || 0);
  
  cx.spawn({
    // Because state has the lifetime 'bump, we need to clone it to make it 
    // 'static before we move it into the 'static future
    let state = state.clone();
    async move {
      println!("{state}");
    }
  });

  // ...
}

If you don’t clone the value, you will run into an error like this:

4  |   fn OldDioxusComponent(cx: Scope) -> Element {
   |                         --
   |                         |
   |                         `cx` is a reference that is only valid in the function body
   |                         has type `&'1 Scoped<'1>`
...
8  | /     cx.spawn(async move {
9  | |         println!("{state}");
10 | |     });
   | |      ^
   | |      |
   | |______`cx` escapes the function body here
   |        argument requires that `'1` must outlive `'static`

The error complains that cx must outlive 'static without mentioning the hook at all which can be very confusing.

Dioxus 0.5 fixes this issue by first removing scopes and the 'bump lifetime and then introducing a new Copy state management solution called signals. Here is what the component looks like in dioxus 0.5:

// Element has no lifetime, and you don't need a Scope
fn NewComponent() -> Element {
  // state is 'static and Copy, even if the inner value you store is not Copy
  let mut state = use_signal(|| 0);

  // State is already 'static and Copy, so it is copied into the future automatically
  spawn(async move {
    println!("{state}");
  });

  rsx! {
    button {
      // The closure has the lifetime 'static, but state is copy so you don't need to clone into the closure
      onclick: move |_event| state += 1,
    }
  }
}

While this might seem like a rather innocuous change, it has an impressively huge impact on how easy it is to write new components. I’d say building a new Dioxus app is about 2-5x easier with this change alone.

Goodbye scopes and lifetimes!

In the new version of dioxus, scopes and the 'bump lifetime have been removed! This makes declaring a component and using runtime functions within that component much easier:

You can now declare a component by just accepting your props directly instead of a scope parameter

#[component]
fn MyComponent(name: String) -> Element {
  rsx! { "Hello {name}!" }
}

And inside that component, you can use runtime functions directly

spawn(async move {
  tokio::time::sleep(Duration::from_millis(100)).await;
  // You can even use runtime functions inside futures and event handlers!
  let context: i32 = consume_context();
});

Now that lifetimes are gone, Elements are 'static which means you can use them in hooks or even provide them through the context API. This makes some APIs like virtual lists in dioxus significantly easier. We expect more interesting APIs to emerge from the community now that you don’t need to be a Rust wizard to implement things like virtualization and offscreen rendering.

Removal of all Unsafe in Core

Removing the 'bump lifetime along with the scope gave us a chance to remove a lot of unsafe from dioxus. dioxus-core 0.5 contains no unsafe code 🎉

Screenshot_2024-02-22_at_5 45 36_PM

There’s still a tiny bit of unsafe floating around various dependencies that we plan to remove throughout the 0.5 release cycle, but way less: all quite simple to cut or unfortunately necessary due to FFI.

Signals!

Dioxus 0.5 introduces Signals as the core state primitive for components. Signals have two key advantages over the existing use_state and use_ref hooks: They are always Copy and they don’t require manual subscriptions.

Copy state

Signal<T> is Copy, even if the inner T values is not. This is enabled by our new generational-box crate (implemented with zero unsafe). Signals can even optionally be Send+Sync if you need to move them between threads, removing the need for a whole class of specialized state management solutions.

The combination of Copy + Send + Sync Signals, and static components makes it incredibly easy to move state to anywhere you need it:

fn Parent() -> Element {
  // We use a sync signal here so that we can use it in other threads, 
  // but you could use a normal signal if you have !Send data
  let mut state = use_signal_sync(|| 0);

  spawn(async move {
    // Signals have a ton of helper methods that make them easy to work with. 
    // You can call a signal like a function to get the current value
    let value: i32 = state();
  });

  // Because signals can be sync, we can copy them into threads easily
  std::thread::spawn(move || {
    loop {
      std::thread::sleep(Duration::from_millis(100));
      println!("{state}");
    }
  });

  render! {
    button {
      // You can easily move it into an event handler just like use_state
      onclick: move |_| state += 1
    }
  }
}

With Copy state, we’ve essentially bolted on a light form of garbage collection into Rust that uses component lifecycles as the triggers for dropping state. From a memory perspective, this is basically the same as 0.4, but with the added benefit of...

Read more

Contributors

srid, benmanns, and 45 other contributors
Assets 30
2 Join discussion

v0.5.0-alpha.0: first prerelease

23 Feb 02:36
@jkelleyrtp jkelleyrtp
v0.5.0-alpha.0
8219b11
This commit was signed with the committer’s verified signature.
jkelleyrtp Jonathan Kelley
GPG key ID: 1FBB50F7EB0A08BE
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.5.0-alpha.0: first prerelease Pre-release
Pre-release

First prerelease of dioxus

v0.5 is coming soon! We've decided to start putting out pre-releases so developers on the "bleeding-edge" have a stable checkpoint to use as we release new breaking features.

The full release notes for 0.5 are here:

https://dioxus.notion.site/Dioxus-0-5-Signals-Unified-Launch-Native-Events-5x-Faster-Desktop-Error-Boundaries-9961963b731a4d9f8465e5bcdf8e9ab3?pvs=74

Migration guide:

https://ealmloff.github.io/docsite/learn/0.4/migration/

Feel free to hop into the discord to give feedback and/or chat about the new changes.

Full Changelog: v0.4.3...v0.5.0-alpha.0

Assets 26

v0.4.3

23 Feb 02:28
@jkelleyrtp jkelleyrtp
v0.4.3
d3f6ff7
This commit was signed with the committer’s verified signature.
jkelleyrtp Jonathan Kelley
GPG key ID: 1FBB50F7EB0A08BE
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.4.3

v0.4.3

This is the last release of the 0.4 cycle, containing a number of useful new features as well as many bug fixes.

You can now manipulate the dioxus runtime without going through the Scope object.

This was originally released many months ago, but we never made the release post.

What's Changed

Read more

Contributors

srid, skabber, and 37 other contributors
Assets 2

v0.4.2

07 Dec 00:37
@jkelleyrtp jkelleyrtp
v0.4.2
da4794d
This commit was signed with the committer’s verified signature.
jkelleyrtp Jonathan Kelley
GPG key ID: 1FBB50F7EB0A08BE
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.4.2

What's Changed

New Contributors

Full Changelog: v0.4.0...v0.4.2

Contributors

eventualbuddha, waywardmonkeys, and 14 other contributors
Assets 2

v0.4.1

04 Sep 20:12
@ealmloff ealmloff
v0.4.1
d5d974d
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.4.1

What's Changed

Contributors

eventualbuddha, vgobbo, and 7 other contributors
Assets 2

v0.4.0

02 Aug 17:15
@ealmloff ealmloff
v0.4.0
f80c3c9
This commit was signed with the committer’s verified signature.
jkelleyrtp Jonathan Kelley
GPG key ID: 1FBB50F7EB0A08BE
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.4.0

Dioxus 0.4 Github

The Dioxus 0.4 release includes 6 new crates, a ton of new features and a plethora of bug fixes!

Highlights:

  • Rewritten Type safe Router
  • Fullstack cross-platform meta framework
  • Suspense
  • CLI Linting
  • CLI Bundling
  • Rewritten Documentation
  • Cross platform system API wrappers: Dioxus STD

Router

The router has been revamped for the 0.4 release. The router now uses an enum to define routes. If you use this enum to link to a page, the compiler will insure you never link to a page that doesn’t exist. The new router also includes Nesting, Layout, and sitemap support:

use dioxus::prelude::*;
use dioxus_router::prelude::*;

#[derive(Routable, Clone)]
enum Route {
    #[route("/")]
    Home {},

    #[route("/blog")]
    Blog {},
}

fn App(cx: Scope) -> Element {
    render! {
        Router::<Route> {}
    }
}

#[inline_props]
fn Home(cx: Scope) -> Element {
    render! {
        Link {
            to: Route::Blog {},
            "Go to the blog"
        }
        h1 { "Welcome to the Dioxus Blog!" }
    }
}

#[inline_props]
fn Blog(cx: Scope) -> Element {
    render! {
        Link {
            to: Route::Home {},
            "Go to the home page"
        }
        h1 { "Blog" }
    }
}

Huge shoutout to @TeFiLeDo for creating many different prototypes and tests for the new router!

Fullstack

The 0.4 release introduces the Fullstack crate. The fullstack crate contains adapters for communicating with your

Fullstack Rendering

The fullstack crate makes it dead simple to create a server side rendered hydrated app with fullstack typesafety. The fullstack crate lets you render your page on the server on every request (or incrementally) and then hydrate it on the client.

use dioxus::prelude::*;
use dioxus_fullstack::prelude::*;

fn main() {
	LaunchBuilder::new(app).launch();
}

fn app(cx: Scope) -> Element {
	let mut count = use_state(cx, || 0);
	render! {
		h1 { "High-Five counter: {count}" }
		button { onclick: move |_| count += 1, "Up high!" }
		button { onclick: move |_| count -= 1, "Down low!" }
	}
}

Fullstack communication

In addition to fullstack rendering, the new fullstack create allows you to communicate with your server effortlessly. You can annotate a function with #[server] to make the code inside the function only run on the server. This makes it easy to build a backend for your web or desktop application!

use dioxus::prelude::*;
use dioxus_fullstack::prelude::*;

fn main() {
	LaunchBuilder::new(app).launch();
}

fn app(cx: Scope) -> Element {
	let mut count = use_state(cx, || 0);
	render! {
		h1 { "High-Five counter: {count}" }
		button { onclick: move |_| count += 1, "Up high!" }
		button { onclick: move |_| count -= 1, "Down low!" }
		button {
			onclick: move |_| {
				to_owned![count];
				async move {
					let double = double(*count).await.unwrap();
					count.set(double);
				}
			}
		}
	}
}

#[server]
async fn double(number: usize) -> Result<usize, ServerFnError> {
	// This will *only* run on the server
	Ok(number * 2)
}

Suspense

0.4 adds the long awaited suspense feature. This allows you to wait for a future on the server and then send the result to the client. You can combine suspense with server functions to wait for some code on your server to finish running before rendering a component:

use dioxus::prelude::*;
use dioxus_fullstack::prelude::*;

fn main() {
	LaunchBuilder::new(app).launch();
}

fn app(cx: Scope) -> Element {
	let mut server_data = use_server_future(cx, || get_server_data())?;

	render! {
		div {
			"{server_data:?}"
		}
	}
}

#[server]
async fn get_server_data() -> Result<usize, ServerFnError> {
	Ok(42)
}

CLI Improvements

The Dioxus CLI has moved into the dioxus main repo

The Dioxus CLI is now called dx instead of dioxus. The 0.4 release of the Dioxus CLI added three main features:

Dioxus Check

@eventualbuddha has done a fantastic job creating a new Dioxus check command to lint your Dioxus code for errors! It will warn you if your code violates the rules of hooks

dx check
Screenshot 2023-07-26 at 1 43 11 PM

Dioxus Bundle

The Dioxus CLI can now create installers for MacOs and Windows powered by tauri-bundle!

dioxus bundle
Screenshot 2023-07-26 at 1 50 31 PM

Desktop Hot Reload

In Dioxus 0.4, rsx hot reloading has moved from the hot reload macro to the CLI for desktop, liveview, fullstack, and TUI applications. Now every platform can use the CLI to start hot reloading:

dioxus serve --platform desktop --hot-reload

Mobile

Dioxus now has improved mobile support with a getting started guide and a mobile example!

Documentation

The documentation has been revamped for the 0.4 release. We now have a short getting started guide that teaches you how to build a hackernews clone in Dioxus.

The new documentation site takes full advantage of the fullstack crate to prerender the pages.

While working on the new docsite we also created two new crates:

  • Dioxus Mdbook makes it easy to use markdown into your Dioxus components and use Dioxus components in your markdown
  • Dioxus Search makes it easy to create instant search indexes for your Dioxus page's. It integrates with the Dioxus router's new site map feature to automatically detect searchable pages

Together these crates allow us to make our documentation fully interactive and instantly searchable. The new documentation site contains live code snippets of different components as you walk through the guide.

Dioxus STD

One of the biggest problems with cross platform development in rust today is finding ergonomic ways to interact with system APIs. @doge and @marc have created a new Dioxus std create that makes it easy to interact with a variety of system APIs in Dioxus across all platforms. It contains helpers for Geolocation, clipboard access, notifications, color schemes, translation, and more!

Async Eval

@doge has made the use_eval hook significantly more powerful for the 0.4 release of Dioxus. You can now send messages to and from Javascript asynchronously. This feature makes it possible to listen for Javascript events that Dioxus doesn’t officially support (for example the intersection observer API).

Dioxus HTML

The 0.4 release introduces file upload support for the dioxus-html crate. This makes it easy to upload files to you desktop, liveview, or web application.

This release also introduces a new onmounted event that provides access to some common node APIs like focusing an element or getting the size of an element in a cross platform way.

Rink and Blitz-core

Dioxus' TUI renderer Rink and WGPU renderer Blitz can now be used without Dioxus. This makes it possible to render your own html into either of these renderers or use these renderers in your own framework. To get started, see the Blitz and Rink framework-less examples.

Community

Office Hours

Dioxus now holds weekly office hours in the discord! If you are interested in the project, need help with your projects, or want to get started contributing, you should come to our weekly office hours!

The office hours happen every Friday at 9:00 AM (PDT) in the Dioxus discord server

Recordings of office hours are available on the Dioxus youtube channel

New contributors

There have been almost 50 new contributors since the 0.3 release!

@mirkootter, @davidpdrsn, @mwcz, @askreet, @marcerhans, @ndarilek, @arniu, @pickfire, @arqalite, @ProfXwing, @Icekey, @willothy, @rtwfroody, @attilio, @stephenandary, @Rigellute, @onweru, @Byron, @nicoburns, @serzhiio, @indiv0, @azriel91, @elliotwaite, @nmlt, @nicholastmosher, @TimothyStiles, @jpearnshaw, @jmsfltchr, @striezel, @echochamber, @xinglixing, @sean, @torsteingrindvik, @vanhouc, @terhechte, @traxys, @Mouradost, @DianQK, @eventualbuddha, @leahiel, @kaid, @frisoft, @Niedzwiedzw

Conclusion

For more information on the 0.4 release and all the new features that have been introduced, read the blogpost

Full Changelog: v0.3.2...v0.4.0

Contributors

marc, ndarilek, and 44 other contributors
Assets 2

v0.3.2

10 May 13:01
@ealmloff ealmloff
v0.3.2
2075ff3
Compare
Choose a tag to compare
v0.3.2

Dioxus 0.3 is bringing a lot of fantastic new features:

  • Massive performance improvements
  • Hot reloading for web and desktop
  • Autoformatting for RSX via dioxus fmt
  • New LiveView renderer
  • Input widgets for TUI
  • Lua plugin system for CLI and overhaul of CLI
  • Multi window desktop apps and direct access to Tao/Wry
  • General improvements to RSX (if chains, for loops, boolean attributes, any values)
  • Rusty event types with support for complex techniques like file uploading
  • Skia renderer and WGPU renderer
  • Chinese and Portuguese translations
  • A new landing page

For more details about each of these new improvements see the release blog post

Assets 2

v0.2.4

03 May 04:11
@jkelleyrtp jkelleyrtp
v0.2.4
a62e729
Compare
Choose a tag to compare
v0.2.4

Releasing Diouxs v0.2.4

This update is just a minor bump to Dioxus. A ton of bugs were fixed, and a few new features were added.

Notably

  • Option in props are now optional by default
  • Active_class for Links
  • Improve rsx! errors
  • Fix some bugs in hydration
  • Introduce a very young version of Liveview
  • Introduce a very young version of Dioxus Native (just the core bits)
  • use_eval for running JS

A bunch of bugs were fixed too!

Overall, this release will improve the stability, performance, and usability of Dioxus without any major breaking changes.

What's Changed

New Contributors

Full Changelog: v0.2.0...v0.2.4

Contributors

naturalethic, autarch, and 16 other contributors
Assets 2

v0.2.0

10 Mar 14:14
@jkelleyrtp jkelleyrtp
v0.2.0
1653278
Compare
Choose a tag to compare
v0.2.0

Dioxus v0.2 Release: TUI, Router, Fermi, and Tooling

March 9, 2022

Thanks to these amazing folks for their financial support on OpenCollective:

Thanks to these amazing folks for their code contributions:

Just over two months in, and we already a ton of awesome changes to Dioxus!

Dioxus is a recently-released library for building interactive user interfaces (GUI) with Rust. It is built around a Virtual DOM, making it portable for the web, desktop, server, mobile, and more. Dioxus looks and feels just like React, so if you know React, then you'll feel right at home.

fn app(cx: Scope) -> Element {
    let mut count = use_state(&cx, || 0);

    cx.render(rsx! {
        h1 { "Count: {count}" }
        button { onclick: move |_| count += 1, "+" }
        button { onclick: move |_| count -= 1, "-" }
    })
}

What's new?

A ton of stuff happened in this release; 550+ commits, 23 contributors, 2 minor releases, and 6 backers on Open Collective.

Some of the major new features include:

  • We now can render into the terminal, similar to Ink.JS - a huge thanks to @Demonthos
  • We have a new router in the spirit of React-Router @autarch
  • We now have Fermi for global state management in the spirit of Recoil.JS
  • Our desktop platform got major upgrades, getting closer to parity with Electron @mrxiaozhuox
  • Our CLI tools now support HTML-to-RSX translation for converting 3rd party HTML into Dioxus @mrxiaozhuox
  • Dioxus-Web is sped up by 2.5x with JS-based DOM manipulation (3x faster than React)

We also fixed and improved a bunch of stuff - check out the full list down below.

A New Renderer: Your terminal!

When Dioxus was initially released, we had very simple support for logging Dioxus elements out as TUI elements. In the past month or so, @Demonthos really stepped up and made the new crate a reality.

New Router

We totally revamped the router, switching away from the old yew-router approach to the more familiar React-Router. It's less type-safe but provides more flexibility and support for beautiful URLs.

Apps with routers are really simple now. It's easy to compose the "Router", a "Route", and "Links" to define how your app is laid out:

fn app(cx: Scope) -> Element {
    cx.render(rsx! {
        Router {
            onchange: move |_| log::info!("Route changed!"),
            ul {
                Link { to: "/",  li { "Go home!" } }
                Link { to: "users",  li { "List all users" } }
                Link { to: "blog", li { "Blog posts" } }
            }
            Route { to: "/", "Home" }
            Route { to: "/users", "User list" }
            Route { to: "/users/:name", User {} }
            Route { to: "/blog", "Blog list" }
            Route { to: "/blog/:post", BlogPost {} }
            Route { to: "", "Err 404 Route Not Found" }
        }
    })
}

We're also using hooks to parse the URL parameters and segments so you can interact with the router from anywhere deeply nested in your app.

#[derive(Deserialize)]
struct Query { name: String }

fn BlogPost(cx: Scope) -> Element {
    let post = use_route(&cx).segment("post")?;
    let query = use_route(&cx).query::<Query>()?;

    cx.render(rsx!{
        "Viewing post {post}"
        "Name selected: {query}"
    })
}

Give a big thanks to @autarch for putting in all the hard work to make this new router a reality.

The Router guide is available here - thanks to @dogedark.

Fermi for Global State Management

Managing state in your app can be challenging. Building global state management solutions can be even more challenging. For the first big attempt at building a global state management solution for Dioxus, we chose to keep it simple and follow in the footsteps of the Recoil.JS project.

Fermi uses the concept of "Atoms" for global state. These individual values can be get/set from anywhere in your app. Using state with Fermi is basically as simple as use_state.

// Create a single value in an "Atom"
static TITLE: Atom<&str> = |_| "Hello";

// Read the value from anywhere in the app, subscribing to any changes
fn app(cx: Scope) -> Element {
    let title = use_read(&cx, TITLE);
    cx.render(rsx!{
        h1 { "{title}" }
        Child {}
    })
}

// Set the value from anywhere in the app
fn Child(cx: Scope) -> Element {
    let set_title = use_set(&cx, TITLE);
    cx.render(rsx!{
        button {
            onclick: move |_| set_title("goodbye"),
            "Say goodbye"
        }
    })
}

Inline Props Macro

For internal components, explicitly declaring props structs can become tedious. That's why we've built the new inline_props macro. This macro lets you inline your props definition right into your component function arguments.

Simply add the inline_props macro to your component:

#[inline_props]
fn Child<'a>(
    cx: Scope,
    name: String,
    age: String,
    onclick: EventHandler<'a, ClickEvent>
) -> Element {
    cx.render(rsx!{
        button {
            "Hello, {name}"
            "You are {age} years old"
            onclick: move |evt| onclick.call(evt)
        }
    })
}

You won't be able to document each field or attach attributes so you should refrain from using it in libraries.

Props optional fields

Sometimes you don't want to specify every value in a component's props, since there might a lot. That's why the Props macro now supports optional fields. You can use a combination of default, strip_option, and optional to tune the exact behavior of properties fields.

#[derive(Props, PartialEq)]
struct ChildProps {
    #[props(default = "client")]
    name: String,

    #[props(default)]
    age: Option<u32>,

    #[props(optional)]
    age: Option<u32>,
}

// then to use the accompanying component
rsx!{
    Child {
        name: "asd",
    }
}

Dioxus Web Speed Boost

We've changed how DOM patching works in Dioxus-Web; now, all of the DOM manipulation code is written in TypeScript and shared between our web, desktop, and mobile runtimes.

On an M1-max, the "create-rows" operation used to take 45ms. Now, it takes a mere 17ms - 3x faster than React. We expect an upcoming optimization to bring this number as low as 3ms.

Under the hood, we have a new string interning engine to cache commonly used tags and values on the Rust <-> JS boundary, resulting in significant performance improvements.

Overall, Dioxus apps are even more snappy than before.

Before and after:
Before and After

Dioxus Desktop Window Context

A very welcome change, thanks AGAIN to @mrxiaozhuox is support for imperatively controlling the desktop window from your Dioxus code.

A bunch of new methods were added:

  • Minimize and maximize window
  • Close window
  • Focus window
  • Enable devtools on the fly

And more!

In addition, Dioxus Desktop now autoresolves asset locations, so you can easily add local images, JS, CSS, and then bundle it into an .app without hassle.

You can now build entirely borderless desktop apps:

img

CLI Tool

Thanks to the amazing work by @mrxiaozhuox, our CLI tool is fixed and working better than ever. The Dioxus-CLI sports a new development server, an HTML to RSX translation engine, a cargo fmt-style command, a configuration scheme, and much more.

Unlike its counterpart, Trunk.rs, the dioxus-cli supports running examples and tests, making it easier to test web-based projects and showcase web-focused libraries.

Async Improvements

Working with async isn't the easiest part of Rust. To help improve things, we've upgraded async support across the board in Dioxus.

First, we upgraded the use_future hook. It now supports dependencies, which let you regenerate a future on the fly as its computed values change. It's never been easier to add datafetching to your Rust Web Apps:

fn RenderDog(cx: Scope, breed: String) -> Element {
    let dog_request = use_future(&cx, (breed,), |(breed,)| async move {
        reqwest::get(format!("https://dog.ceo/api/breed/{}/images/random", breed))
            .await
            .unwrap()
            .json::<DogApi>()
            .await
    });

    cx.render(match dog_request.value() {
        Some(Ok(url)) => rsx!{ img { url: "{url}" } },
        Some(Err(url)) => rsx!{ span { "Loading dog failed" }  },
        None => rsx!{ "Loading dog..." }
    })
}

Additionally, we added better support for coroutines. You can now start, stop, resume, and message with asynchronous tasks. The coroutine is automatically exposed to the rest of your app via the Context API. For the vast majority of apps, Coroutines can satisfy all of your state management needs:

fn App(cx: Scope) -> Element {
    let sync_task = use_coroutine(&cx, |rx| async ...
Read more

Contributors

autarch, sassman, and 21 other contributors
Assets 2
0 Join discussion