Skip to content

Releases: DioxusLabs/dioxus

Dioxus v0.7.0-alpha.1

31 May 22:38
@jkelleyrtp jkelleyrtp
v0.7.0-alpha.1
662cf0d
Compare
Choose a tag to compare
Dioxus v0.7.0-alpha.1 Pre-release
Pre-release

Fixes, blitz update, and subsecond custom linker setup

This release fixes a number of issues found in Dioxus v0.7.0-alpha.0.

A few updates include

  • better support for custom linkers with the subsecond hotpatching engine
  • updating to blitz 0.1-alpha.1 which fixes bugs, performance, and adds more CSS compatibility
  • arm64 linux binstall builds
  • component library demo site (http://dioxuslabs.github.io/components/)
  • fix wasm-opt with rust 1.87
  • fix vcs in dx new
  • add support for dylib/so/dll bundling
  • fix tls binding across hotpatch boundaries
  • fix lld/mold flags with subsecond
  • hash assets outside the asset!() macro, instead during dx build

Random updates

TODOs before final release

  • Crash analytics monitoring #4224
  • WGPU canvas PR #3979
  • Offline support #4155
  • Error type unification #4205
  • Prelude cleanup
  • More bug fixes
  • Cleaning up PR queue
  • SDK Release
  • Component library release
  • Blog posts
Loading

Dioxus v0.7.0-alpha.0

14 May 08:25
@jkelleyrtp jkelleyrtp
v0.7.0-alpha.0
fa012f3
Compare
Choose a tag to compare
Dioxus v0.7.0-alpha.0 Pre-release
Pre-release

Note

These release notes are a draft for the full release and thus are incomplete. Not all features might be merged yet!
We are releasing v0.7.0-alpha.0 with many docs and features incomplete, please be patient while we fill everything out.

Hot-patching, Native, Bundle Splitting, Radix-UI, more!

Welcome back to another Dioxus release! If you’re new here, Dioxus (dye • ox • us) is a framework for building cross-platform apps in Rust. We make it easy to ship fullstack web, desktop, and mobile apps with a single codebase.

Dioxus 0.7 delivers on a number of promises we made to expand the capabilities of Rust GUI. Mature frameworks like Flutter and React Native sport capable hot-reload systems, popular component frameworks, and render natively. Now, Dioxus is on par with the “state of the art”, and in many ways, is even better.

In this release, we’re shipping some incredible features. The highlights of this release include:

  • Dioxus Native: WGPU-based HTML/CSS Dioxus renderer built on Firefox’s Gecko engine
  • Subsecond: Hot-patching of Rust code at runtime
  • WASM-Split: Code splitting and tree shaking for WebAssembly
  • Dioxus-UI: Shadcn-UI implementation for Dioxus

Dioxus 0.7 also brings a number of other exciting new features:

  • Automatic tailwind: zero-setup tailwind support built-in!
  • LLMs.txt: first-party context file to supercharge AI coding models
  • MCP Server: add context, resources, and tools to VSCode, Cursor, and Claude
  • Blitz: our modular HTML/CSS renderer powering Dioxus Native, available for everyone!
  • Dioxus Playground: online WASM/WASI playground with integrated hot-patching
  • Fullstack WebSockets: websockets in a single line of code
  • Integrated Debugger Support: open CodeLLDB or nvim DAP with a single keystroke
  • Fullstack status codes: Integration of status codes and custom errors in fullstack
  • Configurable Mobile Builds: Customize your AndroidManifest and Info.plist

Plus, a number of quality-of-life upgrades:

  • one-line installer ( curl -sSL http://dioxus.dev/install.sh | sh )
  • dx self-update and update notifications
  • automatically open simulators
  • dx compatibility with non-dioxus projects
  • Better log coloring
  • desktop and mobile toasts
  • improved website landing page and migration to http://dioxus.dev hostname
  • Reduced flicker on CSS hot-reloads
  • HTML streaming now waits for the router to render
  • Axum 0.8 upgrade

And many, many bugs fixed:

  • Issues with synchronous multi-window
  • Tab focusing
  • Hot-reloaded assets not being re-processed

Note from the author

Dioxus 0.7 marks the second anniversary of me (Jonathan Kelley) going full time on Dioxus. How time flies! In the past two years we shipped so much:

  • Template Hot-Reloading and Autoformatting
  • Migration to Signals
  • First-party Android and iOS tooling
  • Server Function integration
  • Linker-based asset system
  • and so much more!

The road here has been long and frankly, lots of work. When we started out, the Rust ecosystem had very few good solutions to the basic problems in application development. Even now, the Rust hotpatching and native renderers - while incredible achievements on their own - are just “par for the course” for application development.

With Dioxus 0.7, I feel like the Dioxus foundations are finally solid. We have excellent developer tools, lightning-fast hotpatching, a great asset system, a solid RPC solution, bundle splitting, automatic optimizations, autocomplete, autoformatting, a capable state management solution, comprehensive docs, and funding for the foreseeable future. It’s always nice to see that decisions to adopt industry-standard tech pay-off (Rust GUIs in 2025 article).

What of the future? I finally feel like we’re on the “other side” of the once-impossible problems. With hot-patching and the native renderer behind us, we’re quite free to work on smaller projects. We could definitely use better marketing, more tutorial videos, better starter templates, and ecosystem growth (native APIs in 0.8!). Thanks for all the support so far!

Rust Hot-patching

The biggest feature of this release: Dioxus now supports hot-patching of Rust code at runtime! You can now iterate on your app’s frontend and backend simultaneously without skipping a beat.

We’ve been working on this feature for almost an entire year, so this is a very special release for us. The tool powering this hot-patching is called Subsecond and works across all major platforms: Web (WASM), Desktop (macOS, Linux, Windows), and even mobile (iOS, Android):

ios-binarypatch.mp4
hotpatch-android.mp4

Subsecond works in tandem with the Dioxus CLI to enable hot-patching for any Rust project. Simply run dx serve on your project and all subsecond::call sites will be hot-patched. For example, here’s Subsecond working with a Ratatui app:

subsecond-tui.mp4

The infrastructure to support Subsecond is quite complex; consequently, we plan to only ship the Subsecond engine within the Dioxus CLI itself. However, we still want the ecosystem to experience the magic of Subsecond, so we’ve done two things:

  • Make dx a standalone runner, not tied to Dioxus
  • Integrated hotpatching with our new Dioxus Playground

Hot-patching Rust code is no simple feat. To achieve a segfault-free experience, we recommend framework authors to tie into Subsecond’s minimal runtime. For application developers, you can simply use subsecond::call(some_fn) at clean integration points to take advantage of hot-patching. If you use Dioxus, hot-patching comes directly integrated with components and server functions.

pub fn launch() {
    loop {
        std::thread::sleep(std::time::Duration::from_secs(1));
        subsecond::call(|| tick());
    }
}

fn tick() {
    println!("edit me to see the loop in action!!!!!!!!! ");
}

While in theory we could implicitly override calls to tick with function detouring, we instead chose explicit integration points. Hot-patching encounters a significant challenge with changes to struct layout and alignment, and implicit patching exacerbates these safety issues. Explicit integration provides an opportunity frameworks to “re-instance” changed structs and guarantees a segfault-free experience at the cost of losing some runtime state.

We expect folks to use Subsecond outside of Dioxus, namely in web development, so we’ve provided a few starter-integrations for popular libraries:

  • Axum
  • Bevy
  • Ratatui

Hot-patching covers nearly every case in Dioxus - there’s so much you can hot-reload:

Under the hood, we implemented a form of incremental linking / binary patching tailored for running apps. This is not too distant from the idea laid out by Andrew Kelley for Zig. We have yet to release an in-depth technical writeup about how Subsecond works, but if you’re really interested, come join us at the Seattle RustConf and learn about it during our talk!

Dioxus Native

blitzvssafari

WASM Bundle Splitting and Lazy Loading

bundle-split.mp4

Component Library: Radix Primitives and ShadCN-UI

LLMs.txt, Cursor Rules, MCP Server, and Vibe-Coding

DioxusLabs/docsite#467

vibe-code-2.mp4

Automatic Tailwind

  • dx now detects a tailwind.css file in the root of your crate
  • customize the input and output files in your dioxus.toml
  • Automatically downloads the tailwind binary in the background
tailwind-inline.mp4

Blitz 0.1

We’re extremely excited to release Blitz: our modular HTML/CSS rendering engine.

Blitz combines a number of exciting projects to bring customizable HTML rendering engine to everyone. Blitz is a result of collaboration across many projects: Firefox, Google, Servo, and Bevy. We’re leveraging a number of powerful libraries:

  • Taffy: our high-performance flexbox layout engine
  • Stylo: Firefox and Servo’s shared CSS resolution engine
  • Vello: Google’s GPU compute renderer

Blitz is an extremely capable renderer, often producing results indistinguishable from browsers like Chrome and Safari:

Not every CSS feature is supported yet, with some bugs like incorrect writing direction or the occasional layout quirk. Our support matrix is here: https://blitz-website.fly.dev/support-matrix

The samples that Blitz can create are quite incredible. Servo’s website:

blitz-servo

Hackernews:
blitz-hn

The BBC:

blitz-bbc

Do note that Blitz is still very young and doesn’t always produce the best outputs, especially on pages that require JavaScript to function properly or use less-popular CSS features:

Blitz also provides a pluggable layer for interactivity, supporting actions like text inputs, pluggable widgets, form submissions, hover styling, and more. Here’s Dioxus-Motion working alongside our interactivity layer to provide high quality animations:

Bear in mind that Blitz is still considered a “work in progress.” We have not focused on performance

Integrated Debugger

To date, debugging Rust apps with VSCode hasn’t been particularly easy. Each combination of launch targets, flags, and arguments required a new entry ...

Read more
Loading

Dioxus v0.6.3

08 Feb 00:47
@jkelleyrtp jkelleyrtp
v0.6.3
fc1f1c2
This commit was signed with the committer’s verified signature.
jkelleyrtp Jonathan Kelley
GPG key ID: 1FBB50F7EB0A08BE
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
Dioxus v0.6.3 Latest
Latest

This release fixes a number of bugs and cleans up the internal implementations of a few APIs.

Notably

  • Fixes in dx html -> rsx translation
  • Fixes for bundling .exe on windows
  • Proper handling of gitignored manganis assets
  • Support for android device hot-reloading over adb
  • Fixes to template partialeq that enable view transitions in the router

To upgrade:

  • run cargo update
  • install the new CLI with cargo binstall dioxus-cli --force

What's Changed

Read more

Contributors

liigo, tdomhan, and 27 other contributors
Assets 13

Dioxus v0.6.2

22 Jan 03:35
@jkelleyrtp jkelleyrtp
v0.6.2
0120373
This commit was signed with the committer’s verified signature.
jkelleyrtp Jonathan Kelley
GPG key ID: 1FBB50F7EB0A08BE
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
Dioxus v0.6.2

Dioxus 0.6.2: Bug fixes and quality-of-life features

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

Make sure you update your dioxus-cli!

cargo binstall dioxus-cli --version 0.6.2 --force

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

What's new?

Features:

  • iPadOS support for dx serve
  • Cache-busting for .wasm files
  • Serving on 0.0.0.0 for device hot-reload support
  • out_dir support for dx bundle
  • per-app session cache for storing temp values during dx serve
  • Cuter dx serve extra info panel

Notable Fixes:

  • Hashing of executables in dx serve
  • Fix using o to open files
  • Fix expression autocompelte in rsx!
  • Fix some issues with minification dropping function names and classes
  • Use your android sdk's adb
  • Fix some dx translate class translation issues
  • Fix a number of issues with dx bundle

What's Changed

New Contributors

Read more

Contributors

liigo, tdomhan, and 22 other contributors
Loading

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
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
Dioxus v0.6.1

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