DioxusLabs/dioxus (dioxus)
### [`v0.5.6`](https://togithub.com/DioxusLabs/dioxus/compare/v0.5.1...v0.5.6)
[Compare Source](https://togithub.com/DioxusLabs/dioxus/compare/v0.5.1...v0.5.6)
### [`v0.5.1`](https://togithub.com/DioxusLabs/dioxus/releases/tag/v0.5.1): : Bug fixes!
[Compare Source](https://togithub.com/DioxusLabs/dioxus/compare/v0.5.0...v0.5.1)
#### 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
- fix: remove misplaced 'a' from cli help text by [@simonsan](https://togithub.com/simonsan) in [https://github.com/DioxusLabs/dioxus/pull/2166](https://togithub.com/DioxusLabs/dioxus/pull/2166)
- fix(generational-box): polished README.md by [@Andrew15-5](https://togithub.com/Andrew15-5) in [https://github.com/DioxusLabs/dioxus/pull/2168](https://togithub.com/DioxusLabs/dioxus/pull/2168)
- fix: Hide launch mod when disabled by [@marc2332](https://togithub.com/marc2332) in [https://github.com/DioxusLabs/dioxus/pull/2171](https://togithub.com/DioxusLabs/dioxus/pull/2171)
- fix: Reflect that `create` command was renamed to `new` by [@foresterre](https://togithub.com/foresterre) in [https://github.com/DioxusLabs/dioxus/pull/2174](https://togithub.com/DioxusLabs/dioxus/pull/2174)
- Fix: Move dioxus_core::diff::node logs from info to trace by [@marko-lazic](https://togithub.com/marko-lazic) in [https://github.com/DioxusLabs/dioxus/pull/2182](https://togithub.com/DioxusLabs/dioxus/pull/2182)
- Bump rfd to version 0.14 fixing 2149 by [@davidMcneil](https://togithub.com/davidMcneil) in [https://github.com/DioxusLabs/dioxus/pull/2161](https://togithub.com/DioxusLabs/dioxus/pull/2161)
- Fix the mobile feature on the dioxus crate by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2185](https://togithub.com/DioxusLabs/dioxus/pull/2185)
- Fix hydration for static text nodes at the root of the template by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2184](https://togithub.com/DioxusLabs/dioxus/pull/2184)
- Fix child routers with the web history by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2172](https://togithub.com/DioxusLabs/dioxus/pull/2172)
- Make Leptos iteration example equivalent of Dioxus iteration example by [@gbj](https://togithub.com/gbj) in [https://github.com/DioxusLabs/dioxus/pull/2191](https://togithub.com/DioxusLabs/dioxus/pull/2191)
- docs: :memo: new readme translated into Turkish by [@Tahinli](https://togithub.com/Tahinli) in [https://github.com/DioxusLabs/dioxus/pull/2196](https://togithub.com/DioxusLabs/dioxus/pull/2196)
- fix: typo by [@loverdos](https://togithub.com/loverdos) in [https://github.com/DioxusLabs/dioxus/pull/2202](https://togithub.com/DioxusLabs/dioxus/pull/2202)
- Fix for Counters sample code in README by [@ekanna](https://togithub.com/ekanna) in [https://github.com/DioxusLabs/dioxus/pull/2209](https://togithub.com/DioxusLabs/dioxus/pull/2209)
- chore: Clean up `use_on_destroy` docs by [@marc2332](https://togithub.com/marc2332) in [https://github.com/DioxusLabs/dioxus/pull/2199](https://togithub.com/DioxusLabs/dioxus/pull/2199)
- Fix for Counters sample code in Readme by [@ekanna](https://togithub.com/ekanna) in [https://github.com/DioxusLabs/dioxus/pull/2213](https://togithub.com/DioxusLabs/dioxus/pull/2213)
- Fix typo is style tag removal causing style attributes to not be removed by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2220](https://togithub.com/DioxusLabs/dioxus/pull/2220)
- Fix rendering aborted nodes in SSR by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2218](https://togithub.com/DioxusLabs/dioxus/pull/2218)
- Fix and test spawn_forever by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2216](https://togithub.com/DioxusLabs/dioxus/pull/2216)
- Reuse placeholder nodes on each thread to reduce allocation by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2217](https://togithub.com/DioxusLabs/dioxus/pull/2217)
- Re-export generational box error types from the signals crate by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2212](https://togithub.com/DioxusLabs/dioxus/pull/2212)
- Fix firefox refreshing loop in debug mode by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2214](https://togithub.com/DioxusLabs/dioxus/pull/2214)
- Implement the "Toggle Developer Tools" menu item in desktop by [@mullr](https://togithub.com/mullr) in [https://github.com/DioxusLabs/dioxus/pull/2198](https://togithub.com/DioxusLabs/dioxus/pull/2198)
- Fixes to autofmt, make it more aggressive by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2230](https://togithub.com/DioxusLabs/dioxus/pull/2230)
- Fix hydration for non-bubbling events by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2234](https://togithub.com/DioxusLabs/dioxus/pull/2234)
- Fix: requeue events, process events by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2236](https://togithub.com/DioxusLabs/dioxus/pull/2236)
- Feat: provide root context as method on virtualdom by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2243](https://togithub.com/DioxusLabs/dioxus/pull/2243)
- Fix: memory leak on listeners for elements by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2244](https://togithub.com/DioxusLabs/dioxus/pull/2244)
- Fix memory leak in owner by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2245](https://togithub.com/DioxusLabs/dioxus/pull/2245)
- Use a VecDequeue instead of a vec for bytes by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2246](https://togithub.com/DioxusLabs/dioxus/pull/2246)
- Fix recycling on component callbacks by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2247](https://togithub.com/DioxusLabs/dioxus/pull/2247)
#### New Contributors
- [@simonsan](https://togithub.com/simonsan) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2166](https://togithub.com/DioxusLabs/dioxus/pull/2166)
- [@foresterre](https://togithub.com/foresterre) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2174](https://togithub.com/DioxusLabs/dioxus/pull/2174)
- [@marko-lazic](https://togithub.com/marko-lazic) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2182](https://togithub.com/DioxusLabs/dioxus/pull/2182)
- [@davidMcneil](https://togithub.com/davidMcneil) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2161](https://togithub.com/DioxusLabs/dioxus/pull/2161)
- [@gbj](https://togithub.com/gbj) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2191](https://togithub.com/DioxusLabs/dioxus/pull/2191)
- [@loverdos](https://togithub.com/loverdos) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2202](https://togithub.com/DioxusLabs/dioxus/pull/2202)
- [@ekanna](https://togithub.com/ekanna) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2209](https://togithub.com/DioxusLabs/dioxus/pull/2209)
- [@mullr](https://togithub.com/mullr) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2198](https://togithub.com/DioxusLabs/dioxus/pull/2198)
**Full Changelog**: https://github.com/DioxusLabs/dioxus/compare/v0.5.0...v0.5.1
### [`v0.5.0`](https://togithub.com/DioxusLabs/dioxus/releases/tag/v0.5.0)
[Compare Source](https://togithub.com/DioxusLabs/dioxus/compare/v0.4.3...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](https://dioxuslabs.com/blog/release-050)**
##### 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 `` 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!
#### 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.
```rust
// 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.
```rust
// 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:
```rust
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:
```rust
// 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
```rust
#[component]
fn MyComponent(name: String) -> Element {
rsx! { "Hello {name}!" }
}
```
And inside that component, you can use runtime functions directly
```rust
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, `Element`s 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](https://togithub.com/matthunz/dioxus-lazy) 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 🎉**
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` is `Copy`, even if the inner `T` values is not. This is enabled by our new [generational-box](https://crates.io/crates/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:
```rust
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 not needing to explicitly `Clone` anything.
##### Smarter subscriptions
Signals are smarter about what components rerun when they are changed. A component will only rerun if you read the value of the signal in the component (not in an async task or event handler). In this example, only the child will re-render when the button is clicked because only the child component is reading the signal:
```rust
fn Parent() -> Element {
let mut state = use_signal(|| 0);
rsx! {
button { onclick: move |_| state += 1, "increment" }
Child { state }
}
}
#[component]
fn Child(state: Signal) -> Element {
rsx! { "{state}" }
}
```
Smarter subscriptions let us merge several different hooks into signals. For example, we were able to remove an entire crate dedicated to state management: Fermi. Fermi provided what was essentially a `use_state` API where statics were used as keys. This meant you could declare some global state, and then read it in your components:
```rust
static COUNT: Atom = Atom::new(|| 0);
fn Demo(cx: Scope) -> Element {
let mut count = use_read_atom(cx, &COUNT);
rsx! { "{count}" }
}
```
Since fermi didn’t support smart subscriptions, you had to explicitly declare use the right `use_read`/ `use_write` hooks to subscribe to the value. In Dioxus 0.5, we just use signals, eliminating the need for any sort of external state management solution altogether.
```rust
// You can use a lazily initialized signal called
// GlobalSignal in static instead of special Fermi atoms
static COUNT: GlobalSignal = Signal::global(|| 0);
// Using the GlobalSignal is just the same as any other signal!
// No need for use_read or use_write
fn Demo() -> Element {
rsx! { "{COUNT}" }
}
```
Signals even work with the context API, so you can quickly share state between components in your app:
```rust
fn Parent() -> Element {
// Create a new signal and provide it to the context API
// without a special use_shared_state hook
let mut state = use_context_provider(|| Signal::new(0));
rsx! {
button { onclick: move |_| state += 1, "Increment" }
Child {}
}
}
fn Child() -> Element {
// Get the state from the context API
let state = use_context::>();
rsx! { "{state}" }
}
```
Smart subscriptions also apply to hooks. Hooks like `use_future` and `use_memo` will now automatically add signals you read inside the hook to the dependencies of the hook:
```rust
// You can use a lazily initialized signal called GlobalSignal in static instead of special Fermi atoms
static COUNT: GlobalSignal = Signal::global(|| 0);
fn App() -> Element {
// Because we read COUNT inside the memo, it is automatically added to the memo's dependencies
// If we change COUNT, then the memo knows it needs to rerun
let memo = use_memo(move || COUNT() / 2);
rsx! { "{memo}" }
}
```
#### Event System Rewrite
***
Since it’s release, dioxus has used a synthetic event system to create a cross platform event API. Synthetic events can be incredibly useful to make events work across platforms and even serialize them across the network, but they do have some drawbacks.
Dioxus 0.5 finally exposes the underlying event type for each platform along with a trait with a cross platform API. This has two advantages:
1. You can get whatever information you need from the platform event type or pass that type to another library:
```rust
fn Button() -> Element {
rsx! {
button {
onclick: move |event| {
let web_sys_event: web_sys::MouseEvent = event.web_event();
web_sys::console::log_1(&web_sys_event.related_target.into());
}
}
}
}
```
1. Dioxus can bundle split code for events apps don’t use. For a hello world example, this shrinks the gzipped size ~25%!
Again, this seems like a small change on the surface, but opens up dozens of new use cases and possible libraries you can build with dioxus.
#### Cross platform launch
***
Dioxus 0.5 introduces a new cross platform API to launch your app. This makes it easy to target multiple platforms with the same application. Instead of pulling in a separate renderer package, you can now enable a feature on the dioxus crate and call the launch function from the prelude:
```toml
[dependencies]
dioxus = "0.5"
[features]
default = []
desktop = ["dioxus/desktop"]
fullstack = ["dioxus/fullstack"]
server = ["dioxus/axum"]
web = ["dioxus/web"]
```
```rust
use dioxus::prelude::*;
fn main() {
dioxus::launch(|| rsx!{ "hello world" })
}
```
With that single application, you can easily target:
```bash
### Desktop
dx serve --platform desktop
### SPA web
dx serve --platform web
### Or a fullstack application
dx serve --platform fullstack
```
The CLI is now smart enough to automatically pass in the appropriate build features depending on the platform you’re targeting.
#### Asset System Beta
***
Currently assets in dioxus (and web applications in general) can be difficult to get right. Links to your asset can easily get out of date, the link to your asset can be different between desktop and web applications, and you need to manually add assets you want to use into your bundled application. In addition to all of that, assets can be a huge performance bottleneck.
Lets take a look at the dioxus mobile guide in the docsite as an example:
The 0.4 mobile guide takes 7 seconds to load and transfers 9 MB of resources. The page has 6 different large image files which slows down the page loading times significantly. We could switch to a more optimized image format like `avif` , but manually converting every screenshot is tedious and time consuming.
Lets take a look at the 0.5 mobile guide with the new asset system:
The new mobile guide takes less than 1 second to load and requires only 1/3 of the resources with the exact same images!
Dioxus 0.5 introduces a new asset system called [manganis](https://togithub.com/DioxusLabs/collect-assets). Manganis integrates with the CLI to check, bundle and optimize assets in your application. The API is currently unstable so the asset system is currently published as a separate crate. In the new asset system, you can just wrap your assets in the `mg!` macro and they will automatically be picked up by the CLI. You can read more about the new asset system in the [manganis docs](https://docs.rs/crate/manganis/latest).
As we continue to iterate on the 0.5 release, we plan to add hot reloading to manganis assets, so you can interactively add new the features to your app like CSS, images, tailwind classes, and more without forcing a complete reload.
#### CSS Hot Reloading
***
As part of our asset system overhaul, we implemented hotreloading of CSS files in the asset directory. If a CSS file appears in your RSX, the `dx` CLI will watch that file and immediately stream its updates to the running app. This works for web, desktop, and fullstack, with mobile support coming in a future mobile-centric update.
https://github.com/DioxusLabs/dioxus/assets/66571940/ece55e95-cf2b-4216-b04e-fe3c23d9ff78
What’s even niftier is that you can stream these changes to several devices at once, unlocking simultaneous hotreloading across all devices that you target:
https://github.com/DioxusLabs/dioxus/assets/66571940/315264fc-be68-4c47-b2fc-9a2233ccffc1
#### 5x Faster Desktop Rendering
***
Dioxus implements several optimizations to make diffing rendering fast. [Templates](https://dioxuslabs.com/blog/templates-diffing) let dioxus skip diffing on any static parts of the rsx macro. However, diffing is only one side of the story. After you create a list of changes you need to make to the DOM, you need to apply them.
We developed [sledgehammer](https://togithub.com/ealmloff/sledgehammer_bindgen) for dioxus web to make applying those mutations as fast as possible. It makes manipulating the DOM from Rust almost as [fast as native JavaScript](https://krausest.github.io/js-framework-benchmark/2023/table_chrome\_114.0.5735.90.html).
In dioxus 0.5, we apply that same technique to apply changes across the network as fast as possible. Instead of using json to communicate changes to the desktop and liveview renderers, dioxus 0.5 uses a binary protocol.
For render intensive workloads, the new renderer takes only 1/5 the time to apply the changes in the browser with 1/2 the latency. Here is one of the benchmarks we developed while working on the new binary protocol. In dioxus 0.4, the renderer was constantly freezing. In dioxus 0.5, it runs smoothly:
**Dioxus 0.4**
https://github.com/DioxusLabs/dioxus/assets/66571940/d8c09989-ce99-4b80-b5a7-8ffaf53dbf87
**Dioxus 0.5**
https://github.com/DioxusLabs/dioxus/assets/66571940/2166880c-b7ce-414d-8f55-570b84a246f0
#### Spreading props
***
One common pattern when creating components is providing some additional functionality to a specific element. When you wrap an element, it is often useful to provide some control over what attributes are set in the final element. Instead of manually copying over each attribute from the element, dioxus 0.5 supports extending specific elements and spreading the attributes into an element:
```rust
#[derive(Props, PartialEq, Clone)]
struct Props {
// You can extend a specific element or global attributes
#[props(extends = img)]
attributes: Vec,
}
fn ImgPlus(props: Props) -> Element {
rsx! {
// You can spread those attributes into any element
img { ..props.attributes }
}
}
fn app() -> Element {
rsx! {
ImgPlus {
// You can use any attributes you would normally use on the img element
width: "10px",
height: "10px",
src: "https://example.com/image.png",
}
}
}
```
#### Shorthand attributes
***
Another huge quality-of-life feature we added was the ability to use shorthand struct initialization syntax to pass attributes into elements and components. We got tired of passing `class: class` everywhere and decided to finally implement this long awaited feature, at the expense of some code breakage. Now, it’s super simple to declare attributes from props:
```rust
#[component]
fn ImgPlus(class: String, id: String, src: String) -> Element {
rsx! {
img { class, id, src }
}
}
```
This feature works for anything implementing `IntoAttribute`, meaning signals also benefit from shorthand initialization. While signals as attributes don’t yet skip diffing, we plan to add this as a performance optimization throughout the 0.5 release cycle.
#### Multi-line attribute merging
***
Another amazing feature added this cycle was attribute merging. When working with libraries like tailwind, you’ll occasionally want to make certain attributes conditional. Before, you had to format the attribute using an empty string. Now, you can simply add an extra attribute with a conditional, and the attribute will be merged using a space as a delimiter:
```rust
#[component]
fn Blog(enabled: bool) -> Element {
rsx! {
div {
class: "bg-gray-200 border rounded shadow",
class: if enabled { "text-white" }
}
}
}
```
This is particularly important when using libraries like tailwind where attributes need to be parsed at compile time but also dynamic at runtime. This syntax integrates with the tailwind compiler, removing the runtime overhead for libraries like tailwind-merge.
#### Server function streaming
***
Dioxus 0.5 supports the latest version of [the server functions crate](https://crates.io/crates/server_fn) which supports streaming data. Server functions can now choose to stream data to or from the client. This makes it easier to do a whole class of tasks on the server.
Creating a streaming server function is as easy as defining the output type and returning a TextStream from the server function. Streaming server functions are great for updating the client during any long running task.
We built an AI text generation example here: https://github.com/ealmloff/dioxus-streaming-llm that uses Kalosm and local LLMS to serve what is essentially a clone of OpenAI’s ChatGPT endpoint on commodity hardware.
```rust
#[server(output = StreamingText)]
pub async fn mistral(text: String) -> Result {
let text_generation_stream = todo!();
Ok(TextStream::new(text_generation_stream))
}
```
https://github.com/DioxusLabs/dioxus/assets/66571940/251f6bf8-4337-4781-a9b4-a22b60ab856e
Side note, the AI metaframework used here - [Kalosm](https://floneum.com/kalosm/) - is maintained by the Dioxus core team member ealmloff, and his AI GUI app Floneum is built with Dioxus!
#### Fullstack CLI platform
***
The CLI now supports a `fullstack` platform with hot reloading and parallel builds for the client and sever. You can now serve your fullstack app with the `dx` command:
```bash
dx serve
### Or with an explicit platform
dx serve --platform fullstack
```
#### Liveview router support
***
[#1505](https://togithub.com/DioxusLabs/dioxus/pull/1505)
@[DonAlonzo](https://togithub.com/DonAlonzo) added liveview support for the router in dioxus 0.5. The router will now work out of the box with your liveview apps!
#### Custom Asset Handlers
***
[#1719](https://togithub.com/DioxusLabs/dioxus/pull/1719)
[@willcrichton](https://togithub.com/willcrichton) added support for custom asset handlers to dioxus desktop. Custom asset handlers let you efficiently stream data from your rust code into the browser without going through javascript. This is great for high bandwidth communication like [video streaming](https://togithub.com/DioxusLabs/dioxus/pull/1727):
https://github.com/DioxusLabs/dioxus/assets/66571940/ab5fa136-166a-44e3-9053-42418ca45439
Now, you can do things like work with gstreamer or webrtc and pipe data directly into the webview without needing to encode/decode frames by hand.
#### Native File Handling
***
This is a bit smaller of a tweak, but now we properly support file drops for desktop:
https://github.com/DioxusLabs/dioxus/assets/66571940/e78ddc32-3f30-4a8c-9053-37b592a13cf6
Previously we just gave you the option to intercept filedrops but now it’s natively integrated into the event systme.
#### Error handling
***
Error handling: You can use error boundaries and the throw trait to easily handle errors higher up in your app
Dioxus provides a much easier way to handle errors: throwing them. Throwing errors combines the best parts of an error state and early return: you can easily throw an error with `?`, but you keep information about the error so that you can handle it in a parent component.
You can call `throw` on any `Result` type that implements `Debug` to turn it into an error state and then use `?` to return early if you do hit an error. You can capture the error state with an `ErrorBoundary` component that will render the a different component if an error is thrown in any of its children.
```rust
fn Parent() -> Element {
rsx! {
ErrorBoundary {
handle_error: |error| rsx! {
"Oops, we encountered an error. Please report {error} to the developer of this application"
},
ThrowsError {}
}
}
}
fn ThrowsError() -> Element {
let name: i32 = use_hook(|| "1.234").parse().throw()?;
todo!()
}
```
You can even nest `ErrorBoundary` components to capture errors at different levels of your app.
```rust
fn App() -> Element {
rsx! {
ErrorBoundary {
handle_error: |error| rsx! {
"Hmm, something went wrong. Please report {error} to the developer"
},
Parent {}
}
}
}
fn Parent() -> Element {
rsx! {
ErrorBoundary {
handle_error: |error| rsx! {
"The child component encountered an error: {error}"
},
ThrowsError {}
}
}
}
fn ThrowsError() -> Element {
let name: i32 = use_hook(|| "1.234").parse().throw()?;
todo!()
}
```
This pattern is particularly helpful whenever your code generates a non-recoverable error. You can gracefully capture these "global" error states without panicking or handling state for each error yourself.
#### Hotreloading by default and “develop” mode for desktop
***
We shipped hotreloading in 0.3, added it to desktop in 0.4, and now we’re finally enabling it by default in 0.5. By default, when you `dx serve` your app, hotreloading is enabled in development mode.
Additionally, we’ve drastically improved the developer experience of building desktop apps. When we can’t hotreload the app and have to do a full recompile, we now preserve the state of the open windows and resume that state. This means your app won’t block your entire screen on every edit and it will maintain its size and position, leading to a more magical experience. Once you’ve played with it, you can never go back - it’s that good.
https://github.com/DioxusLabs/dioxus/assets/66571940/21dfca22-14ea-47f9-a2de-9853609a9dd4
#### Updates to the dioxus template
***
With this update, our newest core team member Miles (lovingly, [@Doge](https://togithub.com/Doge) on our discord) put serious work into overhauling documentation and our templates. We now have templates to create new dioxus apps for web, desktop, mobile, tui, and fullstack under one command.
https://github.com/DioxusLabs/dioxus/assets/66571940/7c6062ea-22a4-4c2a-bd7e-ca6f28cf1dbf
We also updated the default app you get when using `dx new` to be closer to the traditional create-react-app. The template is now seeded with assets, CSS, and some basic deploy configuration. Plus, it includes links to useful resources like dioxus-std, the VSCode Extension, docs, tutorials, and more.
#### Dioxus-Community and Dioxus-std
***
The Dioxus Community is something special: discord members marc and Doge have been hard at working updating important ecosystem crates for the 0.5 release. With this release, important crates like icons, charts, and the dioxus-specific standard library are ready to use right out the gate. The `Dioxus Community` project is a new GitHub organization that keeps important crates up-to-date even when the original maintainers step down. If you build a library for Dioxus, we’ll be happy to help maintain it, keeping it at what is essentially “Tier 2” support.
#### Coming soon
***
At a certain point we had to stop adding new features to this release. There’s plenty of cool projects on the horizon:
- Stabilizing and more deeply integrating the asset system
- Bundle splitting the outputted `.wasm` directly - with lazy components
- Islands and resumable interactivity (serializing signals!)
- Server components and merging LiveView into fullstack
- Enhanced Devtools (potentially featuring some AI!) and testing framework
- Complete mobile overhaul
- Fullstack overhaul with websockets, SSE, progressive forms, and more
#### Sneak Peek: Dioxus-Blitz revival using Servo
***
We’re not going to say much about this now, but here’s a sneak peek at “Blitz 2.0”… we’re finally integrating servo into blitz so you can render natively with WGPU using the same CSS engine that powers Firefox. To push this effort forward, we’ve brought the extremely talented Nico Burns (the wizard behind our layout library Taffy) on full time. More about this later, but here’s a little demo of [google.com](http://google.com) being rendered at 900 FPS entirely on the GPU:
Admittedly the current iteration is not quite there (google.com is in fact a little wonky) but we’re progressing rapidly here and are quickly approaching something quite usable. The repo is here if you want to take a look and get involved:
#### How can you contribute?
***
Well, that’s it for the new features. We might’ve missed a few things (there’s so much new!). If you find Dioxus as exciting as we do, we’d love your help to completely transform app development. We’d love contributions including:
- Translating docs into your native language
- Attempting “Good First Issues”
- Improving our documentation
- Contributing to the CLI
- Help answer questions from the discord community
That’s it! We’re super grateful for the community support and excited for the rest of 2024.
Build cool things! ✌️
#### Full Changelog (since 0.4.3)
- Add into attribute value impl for String by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1651](https://togithub.com/DioxusLabs/dioxus/pull/1651)
- Fix string memory leak by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1634](https://togithub.com/DioxusLabs/dioxus/pull/1634)
- Add a noop evaluator to the ssr renderer by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1612](https://togithub.com/DioxusLabs/dioxus/pull/1612)
- Add debug information to borrows and ownership in signals by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1383](https://togithub.com/DioxusLabs/dioxus/pull/1383)
- Remove the ignore leaks in flag MIRI by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1580](https://togithub.com/DioxusLabs/dioxus/pull/1580)
- Fix hot reloading svg elements by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1664](https://togithub.com/DioxusLabs/dioxus/pull/1664)
- Make the layer module public in fullstack by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1485](https://togithub.com/DioxusLabs/dioxus/pull/1485)
- Make optional props accept Nothing, T or Option by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1674](https://togithub.com/DioxusLabs/dioxus/pull/1674)
- Fix missing items in hot reloading diffing by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1653](https://togithub.com/DioxusLabs/dioxus/pull/1653)
- Fix use shared state lint in release mode by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1576](https://togithub.com/DioxusLabs/dioxus/pull/1576)
- Use indentation settings in dx fmt and vscode extension by [@ColonelThirtyTwo](https://togithub.com/ColonelThirtyTwo) in [https://github.com/DioxusLabs/dioxus/pull/1597](https://togithub.com/DioxusLabs/dioxus/pull/1597)
- Add an optional cleanup closure to the use effect hook by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1650](https://togithub.com/DioxusLabs/dioxus/pull/1650)
- Use a temp directory for the hot reloading pipe by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1697](https://togithub.com/DioxusLabs/dioxus/pull/1697)
- Add a warning about wry gnu support to Dioxus desktop by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1681](https://togithub.com/DioxusLabs/dioxus/pull/1681)
- Fix disconnects that happen while a server function is being resolved by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1698](https://togithub.com/DioxusLabs/dioxus/pull/1698)
- Wasm target check before build by [@Exotik850](https://togithub.com/Exotik850) in [https://github.com/DioxusLabs/dioxus/pull/1689](https://togithub.com/DioxusLabs/dioxus/pull/1689)
- Add read untracked to signals by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1593](https://togithub.com/DioxusLabs/dioxus/pull/1593)
- Add loading attribute to img element by [@ColonelThirtyTwo](https://togithub.com/ColonelThirtyTwo) in [https://github.com/DioxusLabs/dioxus/pull/1699](https://togithub.com/DioxusLabs/dioxus/pull/1699)
- Fix recycling nodes in native core by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1363](https://togithub.com/DioxusLabs/dioxus/pull/1363)
- Fix doc tests by adding formatting to CLI README by [@benmanns](https://togithub.com/benmanns) in [https://github.com/DioxusLabs/dioxus/pull/1706](https://togithub.com/DioxusLabs/dioxus/pull/1706)
- fix: dx create not work by [@mrxiaozhuox](https://togithub.com/mrxiaozhuox) in [https://github.com/DioxusLabs/dioxus/pull/1709](https://togithub.com/DioxusLabs/dioxus/pull/1709)
- Fix: command error with dx build --verbose by [@x-falcon](https://togithub.com/x-falcon) in [https://github.com/DioxusLabs/dioxus/pull/1715](https://togithub.com/DioxusLabs/dioxus/pull/1715)
- Autoformat ignores files in `.gitignore` by [@Exotik850](https://togithub.com/Exotik850) in [https://github.com/DioxusLabs/dioxus/pull/1704](https://togithub.com/DioxusLabs/dioxus/pull/1704)
- add error log when root element isn't found by [@w3irdrobot](https://togithub.com/w3irdrobot) in [https://github.com/DioxusLabs/dioxus/pull/1724](https://togithub.com/DioxusLabs/dioxus/pull/1724)
- Make hot reload error only show once by [@Exotik850](https://togithub.com/Exotik850) in [https://github.com/DioxusLabs/dioxus/pull/1725](https://togithub.com/DioxusLabs/dioxus/pull/1725)
- Bump actions/upload-artifact from 3 to 4 by [@dependabot](https://togithub.com/dependabot) in [https://github.com/DioxusLabs/dioxus/pull/1726](https://togithub.com/DioxusLabs/dioxus/pull/1726)
- Fix typo in `lazynodes` module docs by [@tigerros](https://togithub.com/tigerros) in [https://github.com/DioxusLabs/dioxus/pull/1759](https://togithub.com/DioxusLabs/dioxus/pull/1759)
- feat(liveview): add rocket adapter by [@KABBOUCHI](https://togithub.com/KABBOUCHI) in [https://github.com/DioxusLabs/dioxus/pull/1761](https://togithub.com/DioxusLabs/dioxus/pull/1761)
- Send mount event when hydrating by [@hampuslidin](https://togithub.com/hampuslidin) in [https://github.com/DioxusLabs/dioxus/pull/1764](https://togithub.com/DioxusLabs/dioxus/pull/1764)
- Implemented From\> for ReadOnlySignal by [@werner291](https://togithub.com/werner291) in [https://github.com/DioxusLabs/dioxus/pull/1772](https://togithub.com/DioxusLabs/dioxus/pull/1772)
- Add doc comment on generated inline properties struct by [@hampuslidin](https://togithub.com/hampuslidin) in [https://github.com/DioxusLabs/dioxus/pull/1775](https://togithub.com/DioxusLabs/dioxus/pull/1775)
- fix empty render causing panic ([#1769](https://togithub.com/DioxusLabs/dioxus/issues/1769)) by [@abhijeetbhagat](https://togithub.com/abhijeetbhagat) in [https://github.com/DioxusLabs/dioxus/pull/1774](https://togithub.com/DioxusLabs/dioxus/pull/1774)
- Add Cargo Arguments and Cross-Architecture Support by [@Bennett-Petzold](https://togithub.com/Bennett-Petzold) in [https://github.com/DioxusLabs/dioxus/pull/1777](https://togithub.com/DioxusLabs/dioxus/pull/1777)
- Fix invalid locations never being dropped by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1747](https://togithub.com/DioxusLabs/dioxus/pull/1747)
- Fix the on double click event and depreciate ondblclick by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1743](https://togithub.com/DioxusLabs/dioxus/pull/1743)
- Clear the cache on rebuild in the incremental renderer by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1741](https://togithub.com/DioxusLabs/dioxus/pull/1741)
- Fix spawn forever by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1708](https://togithub.com/DioxusLabs/dioxus/pull/1708)
- Make the type name optional in the server function docs by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1748](https://togithub.com/DioxusLabs/dioxus/pull/1748)
- Don't cache assets in the CLI by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1742](https://togithub.com/DioxusLabs/dioxus/pull/1742)
- Fix rsx rosetta element and attribute mapping by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1782](https://togithub.com/DioxusLabs/dioxus/pull/1782)
- Fix non string layout attributes in rink by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1781](https://togithub.com/DioxusLabs/dioxus/pull/1781)
- Bump the version of Salvo by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1738](https://togithub.com/DioxusLabs/dioxus/pull/1738)
- Add custom asset handler to desktop config by [@willcrichton](https://togithub.com/willcrichton) in [https://github.com/DioxusLabs/dioxus/pull/1719](https://togithub.com/DioxusLabs/dioxus/pull/1719)
- Add a video streaming example by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1727](https://togithub.com/DioxusLabs/dioxus/pull/1727)
- add default menu bar in dioxus-desktop to resolve [#1691](https://togithub.com/DioxusLabs/dioxus/issues/1691) by [@pascalbehmenburg](https://togithub.com/pascalbehmenburg) in [https://github.com/DioxusLabs/dioxus/pull/1696](https://togithub.com/DioxusLabs/dioxus/pull/1696)
- Update to wry 0.34.0 by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1428](https://togithub.com/DioxusLabs/dioxus/pull/1428)
- Fix event multi node event bubbling by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1393](https://togithub.com/DioxusLabs/dioxus/pull/1393)
- Make cx.spawn poll the task before returning `TaskId` by [@Exotik850](https://togithub.com/Exotik850) in [https://github.com/DioxusLabs/dioxus/pull/1710](https://togithub.com/DioxusLabs/dioxus/pull/1710)
- Binary protocol for desktop and liveview by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1534](https://togithub.com/DioxusLabs/dioxus/pull/1534)
- Implement multiple optional attributes by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1463](https://togithub.com/DioxusLabs/dioxus/pull/1463)
- Feat: add global context functions by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/1572](https://togithub.com/DioxusLabs/dioxus/pull/1572)
- rename IntoDynNode and IntoTemplate traits by [@Erithax](https://togithub.com/Erithax) in [https://github.com/DioxusLabs/dioxus/pull/1624](https://togithub.com/DioxusLabs/dioxus/pull/1624)
- Document and improve the throw trait by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1618](https://togithub.com/DioxusLabs/dioxus/pull/1618)
- Make hydration more resilient by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1732](https://togithub.com/DioxusLabs/dioxus/pull/1732)
- Updated packages and comments referencing old CLI location by [@kraemahz](https://togithub.com/kraemahz) in [https://github.com/DioxusLabs/dioxus/pull/1786](https://togithub.com/DioxusLabs/dioxus/pull/1786)
- Fix typo which resolves [#1789](https://togithub.com/DioxusLabs/dioxus/issues/1789) by [@pascalbehmenburg](https://togithub.com/pascalbehmenburg) in [https://github.com/DioxusLabs/dioxus/pull/1790](https://togithub.com/DioxusLabs/dioxus/pull/1790)
- Rework Event System by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1402](https://togithub.com/DioxusLabs/dioxus/pull/1402)
- Unify Collecting and Optimizing Assets by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1369](https://togithub.com/DioxusLabs/dioxus/pull/1369)
- Automatically derive standard query parsing in the router macro by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1680](https://togithub.com/DioxusLabs/dioxus/pull/1680)
- Fix the ondouble click event by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1795](https://togithub.com/DioxusLabs/dioxus/pull/1795)
- Refactor desktop crate, update to wry 0.35, use muda for Menu by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/1787](https://togithub.com/DioxusLabs/dioxus/pull/1787)
- feat: props spread by [@atty303](https://togithub.com/atty303) in [https://github.com/DioxusLabs/dioxus/pull/1349](https://togithub.com/DioxusLabs/dioxus/pull/1349)
- Serializing FormData while form 'onsubmit'. by [@bunnyBites](https://togithub.com/bunnyBites) in [https://github.com/DioxusLabs/dioxus/pull/1610](https://togithub.com/DioxusLabs/dioxus/pull/1610)
- Add a simple nix dev shell by [@srid](https://togithub.com/srid) in [https://github.com/DioxusLabs/dioxus/pull/1542](https://togithub.com/DioxusLabs/dioxus/pull/1542)
- Bump tauri bundler for using proxy to fetch resources by [@divinerapier](https://togithub.com/divinerapier) in [https://github.com/DioxusLabs/dioxus/pull/1603](https://togithub.com/DioxusLabs/dioxus/pull/1603)
- Try making the cache faster using mozilla's cache by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/1552](https://togithub.com/DioxusLabs/dioxus/pull/1552)
- Enable the liveview router history by default if the feature is enabled by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1736](https://togithub.com/DioxusLabs/dioxus/pull/1736)
- Optimize fullstack compile times by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1655](https://togithub.com/DioxusLabs/dioxus/pull/1655)
- Pull out CLI configs into a separate library by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1622](https://togithub.com/DioxusLabs/dioxus/pull/1622)
- Add file property to drag data by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/992](https://togithub.com/DioxusLabs/dioxus/pull/992)
- Fix: move miri and playwright to the main CI so it gets run less by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/1798](https://togithub.com/DioxusLabs/dioxus/pull/1798)
- Bump follow-redirects from 1.15.1 to 1.15.4 in /packages/extension by [@dependabot](https://togithub.com/dependabot) in [https://github.com/DioxusLabs/dioxus/pull/1799](https://togithub.com/DioxusLabs/dioxus/pull/1799)
- Tweak CI with new caching by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/1800](https://togithub.com/DioxusLabs/dioxus/pull/1800)
- bump the ci by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/1801](https://togithub.com/DioxusLabs/dioxus/pull/1801)
- Fix leak in the render macro by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1700](https://togithub.com/DioxusLabs/dioxus/pull/1700)
- feat: `--split-line-attributes` parameter for CLI `fmt` by [@marc2332](https://togithub.com/marc2332) in [https://github.com/DioxusLabs/dioxus/pull/1701](https://togithub.com/DioxusLabs/dioxus/pull/1701)
- fix: no project-name in argument of `dx create` by [@tkr-sh](https://togithub.com/tkr-sh) in [https://github.com/DioxusLabs/dioxus/pull/1803](https://togithub.com/DioxusLabs/dioxus/pull/1803)
- using cargo.toml version by [@hem1t](https://togithub.com/hem1t) in [https://github.com/DioxusLabs/dioxus/pull/1813](https://togithub.com/DioxusLabs/dioxus/pull/1813)
- Only support manganis in the CLI by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1807](https://togithub.com/DioxusLabs/dioxus/pull/1807)
- Disambiguate if expressions in rsx by requiring curlies, allow shorthand component/element initialization by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/1810](https://togithub.com/DioxusLabs/dioxus/pull/1810)
- Enable serde dependency in the html crate even if eval is disabled by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1817](https://togithub.com/DioxusLabs/dioxus/pull/1817)
- check for duplicate event listeners in the rsx macro by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1812](https://togithub.com/DioxusLabs/dioxus/pull/1812)
- Fix muda segfault by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/1819](https://togithub.com/DioxusLabs/dioxus/pull/1819)
- Fix mount event by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1823](https://togithub.com/DioxusLabs/dioxus/pull/1823)
- dioxus-cli: Fix panic when using dev profile by [@hampuslidin](https://togithub.com/hampuslidin) in [https://github.com/DioxusLabs/dioxus/pull/1824](https://togithub.com/DioxusLabs/dioxus/pull/1824)
- Fix the web form event by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/1833](https://togithub.com/DioxusLabs/dioxus/pull/1833)
- Bump actions/github-script from 6 to 7 by [@dependabot](https://togithub.com/dependabot) in [https://github.com/DioxusLabs/dioxus/pull/1835](https://togithub.com/DioxusLabs/dioxus/pull/1835)
- Minor fixes in cli by [@hem1t](https://togithub.com/hem1t) in [https://github.com/DioxusLabs/dioxus/pull/1837](https://togithub.com/DioxusLabs/dioxus/pull/1837)
- `init` subcommand by [@hem1t](https://togithub.com/hem1t) in [https://github.com/DioxusLabs/dioxus/pull/1840](https://togithub.com/DioxusLabs/dioxus/pull/1840)
- Aggregating input values into arrays if required by [@serzhiio](https://togithub.com/serzhiio) in [https://github.com/DioxusLabs/dioxus/pull/1836](https://togithub.com/DioxusLabs/dioxus/pull/1836)
- fix wording in CLI message by [@gramidt](https://togithub.com/gramidt) in [https://github.com/DioxusLabs/dioxus/pull/1844](https://togithub.com/DioxusLabs/dioxus/pull/1844)
- Adding MathML Core support to rsx by [@Ameyanagi](https://togithub.com/Ameyanagi) in [https://github.com/DioxusLabs/dioxus/pull/1846](https://togithub.com/DioxusLabs/dioxus/pull/1846)
- Bump h2 from 0.3.23 to 0.3.24 by [@dependabot](https://togithub.com/dependabot) in [https://github.com/DioxusLabs/dioxus/pull/1849](https://togithub.com/DioxusLabs/dioxus/pull/1849)
- dioxus-web: Add `Config::rootelement` by [@mirkootter](https://togithub.com/mirkootter) in [https://github.com/DioxusLabs/dioxus/pull/1851](https://togithub.com
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
[ ] If you want to rebase/retry this PR, check this box
This PR contains the following updates:
0.2->0.5Release Notes
DioxusLabs/dioxus (dioxus)
### [`v0.5.6`](https://togithub.com/DioxusLabs/dioxus/compare/v0.5.1...v0.5.6) [Compare Source](https://togithub.com/DioxusLabs/dioxus/compare/v0.5.1...v0.5.6) ### [`v0.5.1`](https://togithub.com/DioxusLabs/dioxus/releases/tag/v0.5.1): : Bug fixes! [Compare Source](https://togithub.com/DioxusLabs/dioxus/compare/v0.5.0...v0.5.1) #### 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 - fix: remove misplaced 'a' from cli help text by [@simonsan](https://togithub.com/simonsan) in [https://github.com/DioxusLabs/dioxus/pull/2166](https://togithub.com/DioxusLabs/dioxus/pull/2166) - fix(generational-box): polished README.md by [@Andrew15-5](https://togithub.com/Andrew15-5) in [https://github.com/DioxusLabs/dioxus/pull/2168](https://togithub.com/DioxusLabs/dioxus/pull/2168) - fix: Hide launch mod when disabled by [@marc2332](https://togithub.com/marc2332) in [https://github.com/DioxusLabs/dioxus/pull/2171](https://togithub.com/DioxusLabs/dioxus/pull/2171) - fix: Reflect that `create` command was renamed to `new` by [@foresterre](https://togithub.com/foresterre) in [https://github.com/DioxusLabs/dioxus/pull/2174](https://togithub.com/DioxusLabs/dioxus/pull/2174) - Fix: Move dioxus_core::diff::node logs from info to trace by [@marko-lazic](https://togithub.com/marko-lazic) in [https://github.com/DioxusLabs/dioxus/pull/2182](https://togithub.com/DioxusLabs/dioxus/pull/2182) - Bump rfd to version 0.14 fixing 2149 by [@davidMcneil](https://togithub.com/davidMcneil) in [https://github.com/DioxusLabs/dioxus/pull/2161](https://togithub.com/DioxusLabs/dioxus/pull/2161) - Fix the mobile feature on the dioxus crate by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2185](https://togithub.com/DioxusLabs/dioxus/pull/2185) - Fix hydration for static text nodes at the root of the template by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2184](https://togithub.com/DioxusLabs/dioxus/pull/2184) - Fix child routers with the web history by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2172](https://togithub.com/DioxusLabs/dioxus/pull/2172) - Make Leptos iteration example equivalent of Dioxus iteration example by [@gbj](https://togithub.com/gbj) in [https://github.com/DioxusLabs/dioxus/pull/2191](https://togithub.com/DioxusLabs/dioxus/pull/2191) - docs: :memo: new readme translated into Turkish by [@Tahinli](https://togithub.com/Tahinli) in [https://github.com/DioxusLabs/dioxus/pull/2196](https://togithub.com/DioxusLabs/dioxus/pull/2196) - fix: typo by [@loverdos](https://togithub.com/loverdos) in [https://github.com/DioxusLabs/dioxus/pull/2202](https://togithub.com/DioxusLabs/dioxus/pull/2202) - Fix for Counters sample code in README by [@ekanna](https://togithub.com/ekanna) in [https://github.com/DioxusLabs/dioxus/pull/2209](https://togithub.com/DioxusLabs/dioxus/pull/2209) - chore: Clean up `use_on_destroy` docs by [@marc2332](https://togithub.com/marc2332) in [https://github.com/DioxusLabs/dioxus/pull/2199](https://togithub.com/DioxusLabs/dioxus/pull/2199) - Fix for Counters sample code in Readme by [@ekanna](https://togithub.com/ekanna) in [https://github.com/DioxusLabs/dioxus/pull/2213](https://togithub.com/DioxusLabs/dioxus/pull/2213) - Fix typo is style tag removal causing style attributes to not be removed by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2220](https://togithub.com/DioxusLabs/dioxus/pull/2220) - Fix rendering aborted nodes in SSR by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2218](https://togithub.com/DioxusLabs/dioxus/pull/2218) - Fix and test spawn_forever by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2216](https://togithub.com/DioxusLabs/dioxus/pull/2216) - Reuse placeholder nodes on each thread to reduce allocation by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2217](https://togithub.com/DioxusLabs/dioxus/pull/2217) - Re-export generational box error types from the signals crate by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2212](https://togithub.com/DioxusLabs/dioxus/pull/2212) - Fix firefox refreshing loop in debug mode by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2214](https://togithub.com/DioxusLabs/dioxus/pull/2214) - Implement the "Toggle Developer Tools" menu item in desktop by [@mullr](https://togithub.com/mullr) in [https://github.com/DioxusLabs/dioxus/pull/2198](https://togithub.com/DioxusLabs/dioxus/pull/2198) - Fixes to autofmt, make it more aggressive by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2230](https://togithub.com/DioxusLabs/dioxus/pull/2230) - Fix hydration for non-bubbling events by [@ealmloff](https://togithub.com/ealmloff) in [https://github.com/DioxusLabs/dioxus/pull/2234](https://togithub.com/DioxusLabs/dioxus/pull/2234) - Fix: requeue events, process events by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2236](https://togithub.com/DioxusLabs/dioxus/pull/2236) - Feat: provide root context as method on virtualdom by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2243](https://togithub.com/DioxusLabs/dioxus/pull/2243) - Fix: memory leak on listeners for elements by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2244](https://togithub.com/DioxusLabs/dioxus/pull/2244) - Fix memory leak in owner by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2245](https://togithub.com/DioxusLabs/dioxus/pull/2245) - Use a VecDequeue instead of a vec for bytes by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2246](https://togithub.com/DioxusLabs/dioxus/pull/2246) - Fix recycling on component callbacks by [@jkelleyrtp](https://togithub.com/jkelleyrtp) in [https://github.com/DioxusLabs/dioxus/pull/2247](https://togithub.com/DioxusLabs/dioxus/pull/2247) #### New Contributors - [@simonsan](https://togithub.com/simonsan) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2166](https://togithub.com/DioxusLabs/dioxus/pull/2166) - [@foresterre](https://togithub.com/foresterre) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2174](https://togithub.com/DioxusLabs/dioxus/pull/2174) - [@marko-lazic](https://togithub.com/marko-lazic) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2182](https://togithub.com/DioxusLabs/dioxus/pull/2182) - [@davidMcneil](https://togithub.com/davidMcneil) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2161](https://togithub.com/DioxusLabs/dioxus/pull/2161) - [@gbj](https://togithub.com/gbj) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2191](https://togithub.com/DioxusLabs/dioxus/pull/2191) - [@loverdos](https://togithub.com/loverdos) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2202](https://togithub.com/DioxusLabs/dioxus/pull/2202) - [@ekanna](https://togithub.com/ekanna) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2209](https://togithub.com/DioxusLabs/dioxus/pull/2209) - [@mullr](https://togithub.com/mullr) made their first contribution in [https://github.com/DioxusLabs/dioxus/pull/2198](https://togithub.com/DioxusLabs/dioxus/pull/2198) **Full Changelog**: https://github.com/DioxusLabs/dioxus/compare/v0.5.0...v0.5.1 ### [`v0.5.0`](https://togithub.com/DioxusLabs/dioxus/releases/tag/v0.5.0) [Compare Source](https://togithub.com/DioxusLabs/dioxus/compare/v0.4.3...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](https://dioxuslabs.com/blog/release-050)** ##### 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 `` 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! #### 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. ```rust // 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. ```rust // 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: ```rust 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: ```rust // 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 ```rust #[component] fn MyComponent(name: String) -> Element { rsx! { "Hello {name}!" } } ``` And inside that component, you can use runtime functions directly ```rust 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, `Element`s 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](https://togithub.com/matthunz/dioxus-lazy) 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 🎉**Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR was generated by Mend Renovate. View the repository job log.