Skip to content

Releases: DioxusLabs/dioxus

v0.3.2

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

Dioxus 0.3 is bringing a lot of fantastic new features:

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

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

Assets 2
Loading

v0.2.4

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

Releasing Diouxs v0.2.4

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

Notably

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

A bunch of bugs were fixed too!

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

What's Changed

New Contributors

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

Contributors

naturalethic, autarch, and 16 other contributors
Assets 2
Loading

v0.2.0

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

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

March 9, 2022

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

Thanks to these amazing folks for their code contributions:

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

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

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

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

What's new?

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

Some of the major new features include:

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

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

A New Renderer: Your terminal!

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

New Router

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

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

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

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

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

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

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

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

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

Fermi for Global State Management

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

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

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

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

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

Inline Props Macro

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

Simply add the inline_props macro to your component:

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

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

Props optional fields

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

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

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

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

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

Dioxus Web Speed Boost

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

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

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

Overall, Dioxus apps are even more snappy than before.

Before and after:
Before and After

Dioxus Desktop Window Context

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

A bunch of new methods were added:

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

And more!

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

You can now build entirely borderless desktop apps:

img

CLI Tool

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

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

Async Improvements

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

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

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

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

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

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

Contributors

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

v0.1.7

08 Jan 07:32
@jkelleyrtp jkelleyrtp
v0.1.7
b38f796
Compare
Choose a tag to compare
v0.1.7

Bug Fixes

  • tests

Commit Statistics

  • 1 commit contributed to the release over the course of 2 calendar days.
  • 1 commit where understood as conventional.
  • 0 issues like '(#ID)' where seen in commit messages

Commit Details

view details
Assets 2
Loading

Dioxus v0.1.0

03 Jan 07:31
@jkelleyrtp jkelleyrtp
v0.1.0
06276ed
Compare
Choose a tag to compare
Dioxus v0.1.0

Introducing Dioxus v0.1 ✨

Jan 3, 2022

@jkelleyrtp, @alexkirsz

After many months of work, we're very excited to release the first version of Dioxus!

Dioxus is a new library for building interactive user interfaces (GUI) with Rust. It is built around a Virtual DOM, making it portable for the web, desktop, server, mobile, and more.

Dioxus has the following design goals:

  • Familiar: Offer a React-like mental model and API surface
  • Robust: Avoid runtime bugs by moving rules and error handling into the type system
  • Performant: Scale to the largest apps and the largest teams
  • Productive: Comprehensive inline documentation, fast recompiles, and deeply integrated tooling
  • Extensible: Reusable hooks and components that work on every platform

Dioxus is designed to be familiar for developers already comfortable with React paradigms. Our goal is to ensure a smooth transition from TypeScript/React without having to learn any major new concepts.

To give you an idea of what Dioxus looks like, here's a simple counter app:

use dioxus::prelude::*;

fn main() {
	dioxus::desktop::launch(app)
}

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

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

This simple counter is a complete desktop application, running at native speeds on a native thread. Dioxus automatically shuttles all events from the WebView runtime into the application code. In our app, we can interact natively with system APIs, run multi-threaded code, and do anything a regular native Rust application might do. Running cargo build --release will compile a portable binary that looks and feels the same on Windows, macOS, and Linux. We can then use cargo-bundle to bundle our binary into a native .app/.exe/.deb.

Dioxus supports many of the same features React does including:

  • Server-side-rendering, pre-rendering, and hydration
  • Mobile, desktop, and web support
  • Suspense, fibers, coroutines, and error handling
  • Hooks, first-class state management, components
  • Fragments, conditional rendering, and custom elements

However, some things are different in Dioxus:

  • Automatic memoization (opt-out rather than opt-in)
  • No effects - effectual code can only originate from actions or coroutines
  • Suspense is implemented as hooks - not deeply ingrained within Dioxus Core
  • Async code is explicit with a preference for coroutines instead

As a demo, here's our teaser example running on all our current supported platforms:

Teaser Example

This very site is built with Dioxus, and the source code is available here.

To get started with Dioxus, check out any of the "Getting Started" guides for your platform of choice, or check out the GitHub Repository for more details.

Show me some examples of what can be built!

Why should I use Rust and Dioxus for frontend?

We believe that Rust's ability to write high-level and statically typed code should make it easier for frontend teams to take on even the most ambitious of projects. Rust projects can be refactored fearlessly: the powerful type system prevents an entire class of bugs at compile-time. No more cannot read property of undefined ever again! With Rust, all errors must be accounted for at compile time. You cannot ship an app that does not — in some way — handle its errors.

Difference from TypeScript/React:

TypeScript is still fundamentally JavaScript. If you've written enough TypeScript, you might be bogged down with lots of configuration options, lack of proper support for "go-to-source," or incorrect ad-hoc typing. With Rust, strong types are built-in, saving tons of headache like cannot read property of undefined.

By using Rust, we gain:

  • Strong types for every library
  • Immutability by default
  • A simple and intuitive module system
  • Integrated documentation (go to source actually goes to source instead of the .d.ts file)
  • Advanced pattern matching
  • Clean, efficient, composable iterators
  • Inline built-in unit/integration testing
  • High quality error handling
  • Flexible standard library and traits
  • Powerful macro system
  • Access to the crates.io ecosystem

Dioxus itself leverages this platform to provide the following guarantees:

  • Correct use of immutable data structures
  • Guaranteed handling of errors and null-values in components
  • Native performance on mobile
  • Direct access to system IO

And much more. Dioxus makes Rust apps just as fast to write as React apps, but affords more robustness, giving your frontend team greater confidence in making big changes in shorter timespans.

Semantically, TypeScript-React and Rust-Dioxus are very similar. In TypeScript, we would declare a simple component as:

type CardProps = {
  title: string,
  paragraph: string,
};

const Card: FunctionComponent<CardProps> = (props) => {
  let [count, set_count] = use_state(0);
  return (
    <aside>
      <h2>{props.title}</h2>
      <p> {props.paragraph} </p>
	  <button onclick={() => set_count(count + 1)}> Count {count} </button>
    </aside>
  );
};

In Dioxus, we would define the same component in a similar fashion:

#[derive(Props, PartialEq)]
struct CardProps {
	title: String,
	paragraph: String
}

static Card: Component<CardProps> = |cx| {
	let mut count = use_state(&cx, || 0);
	cx.render(rsx!(
		aside {
			h2 { "{cx.props.title}" }
			p { "{cx.props.paragraph}" }
			button { onclick: move |_| count+=1, "Count: {count}" }
		}
	))
};

However, we recognize that not every project needs Rust - many are fine with JavaScript! We also acknowledge that Rust/Wasm/Dioxus does not fix "everything that is wrong with frontend development." There are always going to be new patterns, frameworks, and languages that solve these problems better than Rust and Dioxus.

As a general rule of thumb, Dioxus is for you if:

  • your app will become very large
  • you need to share code across many platforms
  • you want a fast way to build for desktop
  • you want to avoid electron or need direct access to hardware
  • you're tired of JavaScript tooling

Today, to publish a Dioxus app, you don't need NPM/WebPack/Parcel/etc. Dioxus simply builds with cargo, and for web builds, Dioxus happily works with the popular trunk project.

Show me more

Here, we'll dive into some features of Dioxus and why it's so fun to use. The guide serves as a deeper and more comprehensive look at what Dioxus can do.

Building a new project is simple

To start a new project, all you need is Cargo, which comes with Rust. For a simple desktop app, all we'll need is the dioxus crate with the appropriate desktop feature. We start by initializing a new binary crate:

$ cargo init dioxus_example
$ cd dioxus_example

We then add a dependency on Dioxus to the Cargo.toml file, with the "desktop" feature enabled:

[dependencies]
dioxus = { version = "*", features = ["desktop"] }

We can add our counter from above.

use dioxus::prelude::*;

fn main() {
	dioxus::desktop::launch(app)
}

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

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

And voilà! We can cargo run our app

Simple Counter Desktop App

Support for JSX-style templating

Dioxus ships with a templating macro called RSX, a spin on React's JSX. RSX is very similar to regular struct syntax for Rust so it integrates well with your IDE. If used with Rust-Analyzer (not tested anywhere else) RSX supports code-folding, block selection, bracket pair colorizing, autocompletion, symbol renaming — pretty much anything you would expect from writing regular struct-style code.

rsx! {
	div { "Hello world" }
	button {
		onclick: move |_| log::info!("button pressed"),
		"Press me"
	}
}

If macros aren't your style, you can always drop down to the factory API:

LazyNodes::new(|f| {
	f.fragment([
		f.element(div, [f.text("hello world")], [], None, None)
		f.element(
			button,
			[f.text("Press Me")],
			[on::click(move |_| log::info!("button pressed"))],
			None,
			None
		)
	])
})

The rsx! macro generates idiomatic Rust code that uses the factory API — no different than what you'd write by hand yourself.

To make it easier to work with RSX, we've built a small VSCode extension with useful utilities. This extension provides a command that converts a selected block of HTML into RSX so you can easily reuse existing web templates.

Dioxus is perfected for the IDE

Note: all IDE-related features have only been tested with [Rust-Analyzer](https://github.com/rust-analyzer/...

Read more
Assets 2
Loading