Skip to content

Releases: DioxusLabs/dioxus

Dioxus v0.6.1

18 Dec 02:31
@jkelleyrtp jkelleyrtp
v0.6.1
c2952a7
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
Dioxus v0.6.1 Latest
Latest

Dioxus 0.6.1: Bug fixes

This patch release fixes a number of issues during the 1st week of Dioxus 0.6 release.

Make sure you update your dioxus-cli!

cargo binstall dioxus-cli --version 0.6.1 --force

Also make sure to run cargo update to take advantage of the fixes in your app itself.

A list of the fixes

  • The CLI now installs the proper wasm-bindgen version dynamically instead of requiring a new download of dx
  • Our asset hot-reload is more resilient on web, fixing an issue where we accidentally broke some query parameters
  • Windows asset canonicalization is fixed (unc paths!) with manganis, fixing asset hot-reload
  • Our docs.rs build was failing due to our platform support list being wrong, this is fixed now
  • Android asset hot-reloading has been fixed/improved. The old version relied on the emulator being launched with su while the new one uses the /tmp directory to store hot-reloaded assets.
  • Occasionally toasts would be triggered but not inside the Dioxus runtime, leading to some panics
  • The "starting rebuild" toast wasn't being sent in some cases, this is fixed.
  • Sometimes the CLI would swallow cargo logs - this is fixed
  • The CLI now suggest to toggle trace mode for more information
  • The CLI now suggests to run the tailwind CLI if your project uses tailwind
  • Occasionally links in liveview would cause a full reload, this is fixed
  • We fixed a frame clipping issue with the CLI inline viewport
  • onmounted no longer fires multiple times

What's Changed

Full Changelog: v0.6.0...v0.6.1

Contributors

spookyvision, jkelleyrtp, and 2 other contributors
Assets 12
Loading

Dioxus 0.6

09 Dec 18:19
@jkelleyrtp jkelleyrtp
v0.6.0
30f760c
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
Dioxus 0.6

Dioxus 0.6

Dioxus is a framework for building fullstack web, desktop, and mobile apps with a single codebase. Our goal is to build a "Flutter but better." Dioxus focuses on first-class fullstack web support, type-safe server/client communication, and blazing fast performance.

With this release, we focused on making Dioxus easier to use, improving the developer experience, and fixing bugs.

Headlining the release is a complete overhaul of the Dioxus CLI:

We also improved the developer experience across the entire framework, fixing long standing bugs and improving tooling:

Interactive Command Line Tools

Dioxus 0.6 is shipping with a completely overhauled CLI experience! We’ve completely rewritten the CLI to support a ton of new features and improve stability:

image

The new CLI sports live progress bars, animations, an interactive filter system, the ability to change log levels on the fly, and more.

cli-new-a4f046c37f262d83.mp4

The CLI rewrite alone took more than half this release cycle. We went through several different design iterations and solved tons of bugs along the way. A few of the highlights:

  • You can manually rebuild your app by pressing r
  • You can toggle the log level of the CLI output on the fly and even inspect Cargo internal logs
  • We output all internal logs of the CLI so you can debug any issues
  • We capture logs for WASM tracing and panics
  • We dropped the outdir concept and instead use target/dx for all output.
    Inline support for iOS and Android emulators.

Android and iOS support for dx serve

With Dioxus 0.6, the dioxus CLI supports dx serve --platform ios/android out of the box! 🎉

While Dioxus has always had mobile, the Rust tooling for mobile has been extremely unstable. Users constantly ran into issues with tools like cargo-mobile and cargo-mobile2. These tools, while useful, take a different architectural approach than what is a good fit for Dioxus.

With this release, we wrote our entire mobile tooling system from scratch. Now, you can go from dx new to dx serve --platform ios in a matter of seconds.

image

The Android and iOS simulator targets support all the same features as desktop: hot-reloading, fast rebuilds, asset bundling, logging, etc. Dioxus is also the only Rust framework that supports main.rs for mobile - no other tools have supported the same main.rs for every platform until now.

Our inline mobile support requires no extra configurations, no manual setup for Gradle, Java, Cocoapods, and no other 3rd party tooling. If you already have the Android NDK or iOS Simulator installed, you currently are less than 30 seconds away from a production-ready mobile app written entirely in Rust.

dxnew-6ae881e7cb312845.mp4

Completely Revamped Hot-Reloading

We shipped massive improvements to the hot-reloading engine powering Dioxus. Our internal goal was to iterate on the Dioxus Docsite with zero full rebuilds.

This means we needed to add support for a number of new hot-reloading engine changes:

Hot-reload formatted strings
Hot-reload nested rsx blocks
Hot-reload component properties and simple Rust expressions
Hot-reload mobile platforms and their bundled assets
The new hot-reloading engine almost feels like magic - you can quickly iterate on new designs - and even modify simple Rust code! - without waiting for full rebuilds:

dogapphr2-e0c61cc8f7dab6f1.mp4

Completely Revamped Autocomplete

Another huge overhaul in Dioxus 0.6: greatly improved autocomplete of rsx! {}. Our old implementation of rsx! {} suffered from poor integration with tools like Rust-analyzer which provide language-server integration for your code. If the input to the macro wasn’t perfectly parsable, we failed to generate any tokens at all, meaning rust-analyzer couldn’t jump in to provide completions.

The work to fix this was immense. Macro parsing libraries like syn don’t provide great facilities for “partial parsing” Rust code which is necessary for implementing better errors and autocomplete. We had to rewrite the entire internals of rsx! {} to support partial parsing of rsx! {} , but finally, in 0.6, we’re able to provide stellar autocomplete. Not only can we autocomplete Rust code in attribute positions, but with a few tricks, we’re able to automatically insert the appropriate braces next to element names:

image

Inline WASM stacktraces and tracing integration

Along with the rewrite of the CLI, we shipped a tracing integration for WASM apps that captures panics and logs and sends them dx in your terminal. When you build your app with debug symbols, stack traces directly integrate with your editor, allowing you to jump directly to the troublesome files from within your terminal.
image

Toasts and Loading Screens

As part of our CLI overhaul, we wanted to provide better feedback for developers when building web apps. Dioxus 0.6 will now show Popup Toasts and Loading Screens for web apps in development mode.

Now, when your app is building, Dioxus will render a loading screen with the current progress of the build:
image

Fullstack Desktop and Mobile

Additionally, we properly integrated server functions with native apps. Server functions finally work out-of-the-box when targeting desktop and mobile:

native-serverfn12-c825c80078382054.mp4

Stabilizing Manganis asset!() syst...

Read more

Contributors

srid, uzytkownik, and 45 other contributors
Assets 12
Loading

v0.6.0-rc.0

03 Dec 02:11
@jkelleyrtp jkelleyrtp
v0.6.0-rc.0
1a30a2f
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.6.0-rc.0

Dioxus v0.6 Release Candidate

The first release candidate for Dioxus v0.6 is here! Barring any other major issues, this version of Dioxus should be the version that gets shipped.

Our planned release date for v0.6.0 is one week from today: December 9, 2024.

Full list of changes in Dioxus v0.6

The v0.6.0 blog post is under construction but is mostly complete. Check out the full list at https://dioxuslabs.com/blog/release-060/

  • CLI support for Android and iOS simulator: simply dx serve --platform android
  • Overhauled interactive CLI inspired by Astro’s excellent tools
  • Proper ServerFn support for Desktop and Mobile apps for simple server RPC
  • Toasts and loading screens for web apps, inspired by many JS frameworks
  • Revamped autocomplete using Rust-analyzer itself (no 3rd party LSP integration needed)
  • Hotreloading of formatted strings, component properties, if/for blocks, and nested rsx!{}
  • Mobile hotreloading and bundled asset hotreloading
  • Stabilization of asset!() macro for including assets in your app and ecosystem crates
  • Streaming HTML support with integrated Suspense and server-compatible Error Boundaries
  • Ability to use ? in handlers, tasks, and components to bubble up errors to error boundaries
  • Static site generation support in the CLI
  • Head {}, Title {}, Meta {}, and Link {} elements for setting document attributes from components
  • dx bundle support for web, iOS, and Android (in addition to desktop)
  • json mode for the CLI for use by 3rd party tools
  • Proper preventDefault handling with synchronous event propagation
  • Child window support and WGPU integration
  • New onvisible and onresize event handlers for elements
  • and more!

Testing it out:

To install the CLI (instead of building from source) use:

cargo binstall dioxus-cli --version v0.6.0-rc.0

We have a number of new templates to get started, simple use dx new <path> and choose between a bare-bones templates, a full starter kit, and a large workspace setup.

New Features

Improvements to dx new to match cargo new

dx new has been re-written and cleaned up to match the same syntax as the familiar cargo new.

You can also now specify custom templates from git. We use this new feature to implement versioning of templates. You can see the different templates for v0.5 vs v0.6 in the branches list.

New templates

We now have 3 new templates that are compatible with the new mobile features:

  • A simple bare-bones app
  • A featureful starter kit with styling and a suggested project structure
  • A large workspace setup with different platforms per-crate (separate web/desktop/mobile entrypoints)

Faster asset collection

We simplified our internal asset system to be extremely quick and to solve issues we encountered with custom linker setups. Now, you can use any linker you'd like and we won't have conflicts.

We also implemented "hot" caching of assets on the filesystem so we don't constantly copy assets between incremental builds.

Restoring manganis asset optimizations under a new syntax

We restored many of the manganis asset optimizations that we had disabled for several pre-releases while we worked out the syntax.

Now, you can pass any struct that implements "constant serialization" as "options" for manganis assets. The dioxus cli is able to deserialize these options during asset collection and apply relevant optimizations.

let asset = asset!("/assets/logo.png", ImageAssetOptions::new().with_format(ImageFormat::Avif));

We now have optimizations for JavaScript, CSS, JSON, images, videos, and folders - all of which can drastically improve your app's performance when used properly.

Merge onvisible support for elements

You can now attach on onvisible handler to elements that fires whenever an element's visibility changes. This uses an IntersectionObserver under the hood which previously required a lot of boilerplate to setup.

onVisible.mp4

Child window support and WGPU integration

Dioxus-desktop and dioxus-mobile now have support for child windows. This means you can create the desktop window and integrate it with an existing window. This new feature lets you integrate a dioxus app with an existing WGPU scene, unlocking a whole new world of possible apps like CAD tools, video editors, and more!

Screen.Recording.2024-10-24.at.4.15.51.PM.mov

We also added support for custom event loops so you can create dioxus-desktop apps with existing windows (for say, an EGUI integration).

Bug fixes

A number of bugs were fixed:

  • android app server fn endpoint was set incorrectly and has been fixed
  • basepath is fixed and now users tags in dev
  • various race conditions were fixed
  • various bugs in the new hotreloading engine were fixed

What's Changed

New Contributors

Full Changelog: v0.6.0-alpha.5...v0.6.0-rc.0

Contributors

ilaborie, rogusdev, and 6 other contributors
Assets 12
Loading

v0.6.0-alpha.5

16 Nov 05:15
@jkelleyrtp jkelleyrtp
v0.6.0-alpha.5
a0e649a
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.6.0-alpha.5 Pre-release
Pre-release

v0.6.0-alpha.5

This should be the final pre-release of 0.6. We are currently in a feature-freeze and any changes from here will be bug fixes and upgrades to documentation, should there need any.

A draft of the release is available at http://dioxuslabs.com/blog/release-060/.

alpha.4 and alpha.2 have much larger change lists for the full release cycle:
https://github.com/DioxusLabs/dioxus/releases/tag/v0.6.0-alpha.4
https://github.com/DioxusLabs/dioxus/releases/tag/v0.6.0-alpha.2

dx serve --platform android

In the last release we added support for iOS serve and now we are adding support for android serve!

image

faster wasm-bindgen and faster builds

We enabled the "parallel" feature on walrus and configured out logs to boost wasm-bindgen performance by 2-3x. When combined with debug=0, incremental builds are about 70-80% faster.

Deprecate relative asset paths

We are phasing out asset!("./assets/plah.png") in favor of the web-native syntax: asset!("/assets/plah.png"). This now throws a deprecation warning.

Fixes to reactivity

We fixed some show-stopper bugs with reactivity around ReadOnlySignals on component boundaries

CLI json output

The CLI now has a mode to emit logs in json so you can combine it with tools like jq for better script interoperability.

What's Changed

New Contributors

Full Changelog: v0.6.0-alpha.4...v0.6.0-alpha.5

Contributors

chungwong, Aandreba, and 8 other contributors
Assets 12
Loading

v0.6.0-alpha.4

01 Nov 23:52
@jkelleyrtp jkelleyrtp
v0.6.0-alpha.4
e0575b3
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.6.0-alpha.4 Pre-release
Pre-release

Dioxus v0.6.0-alpha.4

This release is planned to be the last release of the v0.6 alpha cycle fixing a number of bugs with hotreloading, assets, the router, and more.

To install the CLI (instead of building from source) use:

cargo binstall dioxus-cli --version v0.6.0-alpha.4

Major changes in this alpha:

Inline iOS support, android fixes:

bothmainmobile

Overhaul of the CLI:

We dropped the custom scroll behavior of the previous alpha in favor of a simple fixed viewport and traditional println!()-oriented history.

This provides more details while also allowing scrollback/selection/etc.

Screenshot 2024-10-13 at 10 18 50 PM

Hotreloading for manganis assets in all platforms (except Android)

All asset!() calls now support hotreloading:

bundled-ios-reload.mp4

Asset system changes

We adjusted the path format of the asset!() macro to force leading slashes. This will eventually let us support relative paths to assets as well as make it clear that you cannot include assets from outside the package directory:

Screenshot 2024-10-15 at 8 35 48 PM

onresize handler

You can now attach onresize to your elements and track changes to element size without an Observer.

Fullstack server functions for iOS/Android/Desktop

By default, in dev, server functions are now callable from native apps without any additional configuration.

Keep in mind that in production you will still want to set the endpoint of your server.

Improved compile times

We cut the workspace into smaller pieces that include fewer dependencies. This should improve build times by about 50%.

Docsite improvements

We have been using the docsite as a canary for many of the new features (like static-site-generation) and you can test drive it at https://dioxuslabs.com.

Bug fixes

We fixed a ton of bugs, so things should be more reliable, faster, and hopefully more intuitive.

Known issues remaining:

  • non-serve commands are too verbose
  • dx bundle is pointing to the wrong directory
  • base_path is getting set properly in some scenarios

What's Changed

Read more

Contributors

srid, ilaborie, and 21 other contributors
Assets 12
Loading

v0.6.0-alpha.2

07 Aug 23:39
@ealmloff ealmloff
v0.6.0-alpha.2
506d47f
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.6.0-alpha.2 Pre-release
Pre-release

Dioxus 0.6.0 Alpha

Dioxus 0.6 includes improvements to several areas of dioxus. The highlights are:

  • Asset improvements
  • Head elements
  • RSX autocomplete
  • Improved hot reloading
  • Suspense and streaming
  • Error boundaries
  • A new TUI!
  • Documentation improvements
  • Blitz rewrite

Asset Stabilization

We introduced our new asset system, Manganis, in an alpha state with the 0.5 release. Dioxus 0.6 stabilizes the asset system and fixes several bugs and performance issues. You can try out the new linker based asset system by including an asset! anywhere in your code. It will automatically be optimized and bundled across all platforms:

rsx! {
    img { src: asset!("./assets/myimg.png") }
}

Head Elements

In addition to the Manganis asset system, dioxus 0.6 includes a new way to include assets into your html. The new Script, Link, Style , and Meta components let you link to assets anywhere in your html. These components will automatically be hoisted into the <head> across all platforms and deduplicated by the source:

#[component]
fn MyStyledComponent() -> {
    rsx! {
        head::Link {
            rel: "stylesheet",
            href: asset!("./assets/style.css")
        }
        "This component is styled"
    }
}

Autocomplete and improved errors for RSX

RSX now supports autocomplete everywhere. In addition to expressions, elements, components and attributes now autocomplete correctly:

autocomplete.mov

The new version of RSX also features better error messages for incorrect markup:

Incorrect markup error message

Supercharged Hot Reloading

In 0.6, RSX hot reloading is much more consistent. You can move around and duplicate expressions anywhere in an rsx block or create new literals anywhere in an rsx block. This means you can now create new formatted text nodes, new formatted attributes or tweak properties on the fly without recompiling!

hot-reloading.mov

Suspense and Streaming

Async is a core component of any UI framework. Dioxus provides hooks to handle async state. You can start a future and handle the loading and resolved states within the component:

#[component]
fn Article() -> Element {
    // Use resource starts a future in the background and returns the current state
    let article = use_resource(fetch_article);

    rsx! {
        // You can match the state of the future to render either a loading state or the resolved state
        match article() {
            Some(article) => rsx! { "{article}" },
            None =>  rsx! { p { "Loading..." } }
        }
    }
}

This works ok if you have a single future, but it quickly gets messy when combining many futures into one UI:

#[component]
fn Article() -> Element {
    // Use resource starts a future in the background and returns the current state
    let Some(title) = use_resource(fetch_title).cloned() else {
         return rsx! { "loading..." }
    };
    let Some(article) = use_resource(fetch_article).cloned() else {
         return rsx! { "loading..." }
    };
    let Some(category) = use_resource(move || article.title()).cloned() else {
         return rsx! { "loading..." }
    };

    rsx! {
        Title { "{title}" }
        Body { category, article }
    }
}

In addition to hooks, we need a way to display a different state when async is loading. Dioxus 0.6 introduces a new core primitive for async UI called suspense boundaries. A suspense boundary is a component that renders a placeholder when any child component is loading:

rsx! {
    SuspenseBoundary {
        fallback: |context: SuspenseContext| rsx! {
                // Render a loading placeholder if any child component is suspended
                "Loading..."
        },
        Article {}
    }
}

In any child component, you can just bubble up the pending state with ? to pause rendering until the future is finished:

#[component]
fn Article() -> Element {
    let title = use_resource(fetch_title).suspend()?;
    let article = use_resource(fetch_article).suspend()?;
    let category = use_resource(move || article.title()).suspend()?;

    // Since we bubbled up all the pending futures with `?` we can just
    // handle the happy path in the component
    rsx! {
        Title { "{title}" }
        Body { category, article }
    }
}

Along with suspense boundaries, dioxus fullstack also supports streaming each suspense boundary in from the server. Instead of waiting for the whole page to load, dioxus fullstack streams in each chunk with the resolved futures as they finish:

streaming.mov

Error boundaries

0.6 also introduces error boundaries which let you display an error message if any child component runs into an error:

#[component]
fn Root() -> Element {
    rsx! {
        ErrorBoundary {
            handle_error: |errors: ErrorContext| {
                match errors.show() {
                    // Render the view the child component through with the error
                    Some(view) => view,
                    // Or a fallback if the error doesn't come with a view
                    None => rsx! {
                        pre {
                            color: "red",
                            "oops, we ran into an error\n{errors:#?}"
                        }
                    }
                }
            },
            Contents {}
        }
    }
}

You can throw an error from any child component while rendering or handling events:

#[component]
fn Double(input: String) -> Element {
    // You can use ? to throw an event during rendering
    let parsed: f32 = input.parse()?;
    let doubled = parsed * 2.0;
    
    rsx! {
        "{doubled}"
    }
}

#[component]
fn DoubleButton(mut count: Signal<u8>) -> Element {
    rsx! {
        button {
            onclick: move |_| {
                // Errors can have an associated view which the error boundary can
                // choose to show
                let doubled = count().checked_mul(2).show(|_|
                    rsx! { "multiplying {count} by 2 would overflow the u8" }
                )?;
                count.set(doubled);

                Ok(())
            },
            "Double!"
        }
    }
}

DX TUI

The Dioxus CLI has been rewritten to support a TUI with build progress, and multiple views for logs. It has shortcuts for common actions, and displays progress in both the TUI and the site as the project loads:

tui.mov

Blitz Rewrite

Blitz has been rewritten to use Firefox's browser engine, Stylo. The new version of Blitz is much more capable with proper accessibility support, IME support, and better text support. Blitz should be a drop in replacement for dioxus desktop for the small subset of HTML it supports. Keep in mind Blitz is still experimental and not ready for production use. You can try Blitz by adding dioxus_blitz from the git repo:

cargo add dioxus-blitz --git https://github.com/DioxusLabs/blitz

Launching your Dioxus app with the blitz renderer:

dioxus_blitz::launch(app);

Dioxus with Blitz

Ergonomic tweaks

Dioxus 0.6 also includes a number of smaller ergonomic tweaks that should help dioxus feel a lot more consistent

Static Generation

Dioxus 0.6 splits out static generation into its own platform to make it easier to set up:

//! Static generation works out of the box with the router. Just add a router anywhere in your app and it will generate any static routes for you!

#![allow(unused)]
use dioxus::prelude::*;

// Generate all routes and output them to the static path
fn main() {
    launch(|| {
        rsx! {
            Router::<Route> {}
        }
    });
}

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

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

#[component]
fn Blog() -> Element {
    rsx! {
        Link { to: Route::Home {}, "Go to counter" }
        table {
            tbody {
                for _ in 0..100 {
                    tr {
                        for _ in 0..100 {
                            td { "hello!" }
                        }
                    }
                }
            }
        }
    }
}

#[component]
fn Home() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        Link { to: Route::Blog {}, "Go to blog" }
        div {
            h1 { "High-Five counter: {count}" }
            button { onclick: move |_| count += 1, "Up high!" }
            button { onclick: move |_| count -= 1, "Down low!" }
        }
    }
}

Fullstack State

Fullstack state now propagates from the launch builder into server functions which makes it much easier to set up state that is shared throughout your application like a database pool:

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

#[server]
async fn get_server_data() -> Result<String, ServerFnError> {
     let FromContext(context): FromContext<u32> = extract().await?;
     Ok(format!("the context was {context}"))
}

Callbacks

Dioxus 0.6 expands EventHandlers into callbacks which let you bot...

Read more

Contributors

uzytkownik, ilaborie, and 34 other contributors
Assets 12
Loading

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!

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
Loading

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 54
Loading
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
Loading

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
Loading