swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

codify "platform" into resolution logic, server-fn/fullstack overhaul (#4596)

Browse Source 
overhaul dioxus fullstack using a new implementation of server_fn

This PR is a complete rewrite of dioxus fullstack designed to improve compatibility with axum and to fix a number of compilation errors based on feature flag unification plumbing through macros.
This commit is contained in:
Jonathan Kelley authored and GitHub committed 2025-10-03 18:26:19 -07:00
1 parent 8421c3aef0
commit f2b1c6d97f
424 files changed
+17284 -6624
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/09-reference/all_events.rs
+71
View File
@@ -0,0 +1,71 @@
//! This example shows how to listen to all events on a div and log them to the console.
//!
//! The primary demonstration here is the properties on the events themselves, hoping to give you some inspiration
//! on adding interactivity to your own application.
use dioxus::prelude::*;
use std::{collections::VecDeque, fmt::Debug, rc::Rc};
const STYLE: Asset = asset!("/examples/assets/events.css");
fn main() {
dioxus::launch(app);
}
fn app() -> Element {
// Using a VecDeque so its cheap to pop old events off the front
let mut events = use_signal(VecDeque::new);
// All events and their data implement Debug, so we can re-cast them as Rc<dyn Debug> instead of their specific type
let mut log_event = move |event: Rc<dyn Debug>| {
// Only store the last 20 events
if events.read().len() >= 20 {
events.write().pop_front();
}
events.write().push_back(event);
};
let random_text = "This is some random repeating text. ".repeat(1000);
rsx! {
Stylesheet { href: STYLE }
div { id: "container",
// focusing is necessary to catch keyboard events
div { id: "receiver", tabindex: 0,
onmousemove: move |event| log_event(event.data()),
onclick: move |event| log_event(event.data()),
ondoubleclick: move |event| log_event(event.data()),
onmousedown: move |event| log_event(event.data()),
onmouseup: move |event| log_event(event.data()),
onwheel: move |event| log_event(event.data()),
onkeydown: move |event| log_event(event.data()),
onkeyup: move |event| log_event(event.data()),
onkeypress: move |event| log_event(event.data()),
onfocusin: move |event| log_event(event.data()),
onfocusout: move |event| log_event(event.data()),
"Hover, click, type or scroll to see the info down below"
}
div {
style: "padding: 50px;",
div {
style: "text-align: center; padding: 20px; font-family: sans-serif; overflow: auto; height: 400px;",
onscroll: move |event: Event<ScrollData>| {
log_event(event.data());
},
div { style: "margin: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 5px;",
p { "{random_text}" }
}
}
}
div { id: "log",
for event in events.read().iter() {
div { "{event:?}" }
}
}
}
}
}
examples/09-reference/generic_component.rs
+28
View File
@@ -0,0 +1,28 @@
//! This example demonstrates how to create a generic component in Dioxus.
//!
//! Generic components can be useful when you want to create a component that renders differently depending on the type
//! of data it receives. In this particular example, we're just using a type that implements `Display` and `PartialEq`,
use dioxus::prelude::*;
use std::fmt::Display;
fn main() {
dioxus::launch(app);
}
fn app() -> Element {
rsx! {
generic_child { data: 0 }
}
}
#[derive(PartialEq, Props, Clone)]
struct GenericChildProps<T: Display + PartialEq + Clone + 'static> {
data: T,
}
fn generic_child<T: Display + PartialEq + Clone>(props: GenericChildProps<T>) -> Element {
rsx! {
div { "{props.data}" }
}
}
examples/09-reference/optional_props.rs
+72
View File
@@ -0,0 +1,72 @@
//! Optional props
//!
//! This example demonstrates how to use optional props in your components. The `Button` component has several props,
//! and we use a variety of attributes to set them.
use dioxus::prelude::*;
fn main() {
dioxus::launch(app);
}
fn app() -> Element {
rsx! {
// We can set some of the props, and the rest will be filled with their default values
// By default `c` can take a `None` value, but `d` is required to wrap a `Some` value
Button {
a: "asd".to_string(),
// b can be omitted, and it will be filled with its default value
c: "asd".to_string(),
d: Some("asd".to_string()),
e: Some("asd".to_string()),
}
Button {
a: "asd".to_string(),
b: "asd".to_string(),
// We can omit the `Some` on `c` since Dioxus automatically transforms Option<T> into optional
c: "asd".to_string(),
d: Some("asd".to_string()),
e: "asd".to_string(),
}
// `b` and `e` are omitted
Button {
a: "asd".to_string(),
c: "asd".to_string(),
d: Some("asd".to_string()),
}
}
}
#[derive(Props, PartialEq, Clone)]
struct ButtonProps {
a: String,
#[props(default)]
b: String,
c: Option<String>,
#[props(!optional)]
d: Option<String>,
#[props(optional)]
e: SthElse<String>,
}
type SthElse<T> = Option<T>;
#[allow(non_snake_case)]
fn Button(props: ButtonProps) -> Element {
rsx! {
button {
"{props.a} | "
"{props.b:?} | "
"{props.c:?} | "
"{props.d:?} | "
"{props.e:?}"
}
}
}
examples/09-reference/rsx_usage.rs
+333
View File
@@ -0,0 +1,333 @@
//! A tour of the rsx! macro
//! ------------------------
//!
//! This example serves as an informal quick reference of all the things that the rsx! macro can do.
//!
//! A full in-depth reference guide is available at: https://www.notion.so/rsx-macro-basics-ef6e367dec124f4784e736d91b0d0b19
//!
//! ### Elements
//! - Create any element from its tag
//! - Accept compile-safe attributes for each tag
//! - Display documentation for elements
//! - Arguments instead of String
//! - Text
//! - Inline Styles
//!
//! ## General Concepts
//! - Iterators
//! - Keys
//! - Match statements
//! - Conditional Rendering
//!
//! ### Events
//! - Handle events with the "onXYZ" syntax
//! - Closures can capture their environment with the 'static lifetime
//!
//!
//! ### Components
//! - Components can be made by specifying the name
//! - Components can be referenced by path
//! - Components may have optional parameters
//! - Components may have their properties specified by spread syntax
//! - Components may accept child nodes
//! - Components that accept "onXYZ" get those closures bump allocated
//!
//! ### Fragments
//! - Allow fragments using the built-in `Fragment` component
//! - Accept a list of vnodes as children for a Fragment component
//! - Allow keyed fragments in iterators
//! - Allow top-level fragments
fn main() {
dioxus::launch(app)
}
use core::{fmt, str::FromStr};
use std::fmt::Display;
use baller::Baller;
use dioxus::prelude::*;
fn app() -> Element {
let formatting = "formatting!";
let formatting_tuple = ("a", "b");
let lazy_fmt = format_args!("lazily formatted text");
let asd = 123;
rsx! {
div {
// Elements
div {}
h1 {"Some text"}
h1 {"Some text with {formatting}"}
h1 {"Formatting basic expressions {formatting_tuple.0} and {formatting_tuple.1}"}
h1 {"Formatting without interpolation " {formatting_tuple.0} "and" {formatting_tuple.1} }
h2 {
"Multiple"
"Text"
"Blocks"
"Use comments as separators in html"
}
div {
h1 {"multiple"}
h2 {"nested"}
h3 {"elements"}
}
div {
class: "my special div",
h1 {"Headers and attributes!"}
}
div {
h1 {"Style attributes!"}
p {
"hello"
b {
"world"
}
i {
"foo"
}
span {
style: "color: red;font-style:italic",
"red"
}
span {
color: "blue",
font_weight: "bold",
"attr_blue"
}
}
}
div {
// pass simple rust expressions in
class: "{lazy_fmt}",
id: format_args!("attributes can be passed lazily with std::fmt::Arguments"),
class: "asd",
class: "{asd}",
// if statements can be used to conditionally render attributes
class: if formatting.contains("form") { "{asd}" },
// longer if chains also work
class: if formatting.contains("form") { "{asd}" } else if formatting.contains("my other form") { "{asd}" },
class: if formatting.contains("form") { "{asd}" } else if formatting.contains("my other form") { "{asd}" } else { "{asd}" },
div {
class: format_args!("Arguments can be passed in through curly braces for complex {asd}")
}
}
// dangerous_inner_html for both html and svg
div { dangerous_inner_html: "<p>hello dangerous inner html</p>" }
svg { dangerous_inner_html: "<circle r='50' cx='50' cy='50' />" }
// Built-in idents can be used
use {}
link {
as: "asd"
}
// Expressions can be used in element position too:
{rsx!(p { "More templating!" })}
// Iterators
{(0..10).map(|i| rsx!(li { "{i}" }))}
// Iterators within expressions
{
let data = std::collections::HashMap::<&'static str, &'static str>::new();
// Iterators *should* have keys when you can provide them.
// Keys make your app run faster. Make sure your keys are stable, unique, and predictable.
// Using an "ID" associated with your data is a good idea.
data.into_iter().map(|(k, v)| rsx!(li { key: "{k}", "{v}" }))
}
// Matching
match true {
true => rsx!( h1 {"Top text"}),
false => rsx!( h1 {"Bottom text"})
}
// Conditional rendering
// Dioxus conditional rendering is based around None/Some. We have no special syntax for conditionals.
// You can convert a bool condition to rsx! with .then and .or
{true.then(|| rsx!(div {}))}
// Alternatively, you can use the "if" syntax - but both branches must be resolve to Element
if false {
h1 {"Top text"}
} else {
h1 {"Bottom text"}
}
// Using optionals for diverging branches
// Note that since this is wrapped in curlies, it's interpreted as an expression
{if true {
Some(rsx!(h1 {"Top text"}))
} else {
None
}}
// returning "None" without a diverging branch is a bit noisy... but rare in practice
{None as Option<()>}
// can also just use empty fragments
Fragment {}
// Fragments let you insert groups of nodes without a parent.
// This lets you make components that insert elements as siblings without a container.
div {"A"}
Fragment {
div {"B"}
div {"C"}
Fragment {
"D"
Fragment {
"E"
"F"
}
}
}
// Components
// Can accept any paths
// Notice how you still get syntax highlighting and IDE support :)
Baller {}
baller::Baller {}
crate::baller::Baller {}
// Can take properties
Taller { a: "asd" }
// Can take optional properties
Taller { a: "asd" }
// Can pass in props directly as an expression
{
let props = TallerProps {a: "hello", children: VNode::empty() };
rsx!(Taller { ..props })
}
// Spreading can also be overridden manually
Taller {
a: "not ballin!",
..TallerProps { a: "ballin!", children: VNode::empty() }
}
// Can take children too!
Taller { a: "asd", div {"hello world!"} }
// This component's props are defined *inline* with the `component` macro
WithInline { text: "using functionc all syntax" }
// Components can be generic too
// This component takes i32 type to give you typed input
TypedInput::<i32> {}
// Type inference can be used too
TypedInput { initial: 10.0 }
// generic with the `component` macro
Label { text: "hello generic world!" }
Label { text: 99.9 }
// Lowercase components work too, as long as they are access using a path
baller::lowercase_component {}
// For in-scope lowercase components, use the `self` keyword
self::lowercase_helper {}
// helper functions
// Anything that implements IntoVnode can be dropped directly into Rsx
{helper("hello world!")}
// Strings can be supplied directly
{String::from("Hello world!")}
// So can format_args
// todo(jon): this is broken in edition 2024
// {format_args!("Hello {}!", "world")}
// Or we can shell out to a helper function
{format_dollars(10, 50)}
}
}
}
fn format_dollars(dollars: u32, cents: u32) -> String {
format!("${dollars}.{cents:02}")
}
fn helper(text: &str) -> Element {
rsx! {
p { "{text}" }
}
}
// no_case_check disables PascalCase checking if you *really* want a snake_case component.
// This will likely be deprecated/removed in a future update that will introduce a more polished linting system,
// something like Clippy.
#[component(no_case_check)]
fn lowercase_helper() -> Element {
rsx! {
"asd"
}
}
mod baller {
use super::*;
#[component]
/// This component totally balls
pub fn Baller() -> Element {
rsx! { "ballin'" }
}
// no_case_check disables PascalCase checking if you *really* want a snake_case component.
// This will likely be deprecated/removed in a future update that will introduce a more polished linting system,
// something like Clippy.
#[component(no_case_check)]
pub fn lowercase_component() -> Element {
rsx! { "look ma, no uppercase" }
}
}
/// Documentation for this component is visible within the rsx macro
#[component]
pub fn Taller(
/// Fields are documented and accessible in rsx!
a: &'static str,
children: Element,
) -> Element {
rsx! { {&children} }
}
#[derive(Props, Clone, PartialEq, Eq)]
pub struct TypedInputProps<T: 'static + Clone + PartialEq> {
#[props(optional, default)]
initial: Option<T>,
}
#[allow(non_snake_case)]
pub fn TypedInput<T>(props: TypedInputProps<T>) -> Element
where
T: FromStr + fmt::Display + PartialEq + Clone + 'static,
<T as FromStr>::Err: std::fmt::Display,
{
if let Some(props) = props.initial {
return rsx! { "{props}" };
}
VNode::empty()
}
#[component]
fn WithInline(text: String) -> Element {
rsx! {
p { "{text}" }
}
}
#[component]
fn Label<T: Clone + PartialEq + Display + 'static>(text: T) -> Element {
rsx! {
p { "{text}" }
}
}
examples/09-reference/shorthand.rs
+44
View File
@@ -0,0 +1,44 @@
//! Dioxus supports shorthand syntax for creating elements and components.
use dioxus::prelude::*;
fn main() {
dioxus::launch(app);
}
fn app() -> Element {
let a = 123;
let b = 456;
let c = 789;
let class = "class";
let id = "id";
// todo: i'd like it for children on elements to be inferred as the children of the element
// also should shorthands understand references/dereferences?
// ie **a, *a, &a, &mut a, etc
let children = rsx! { "Child" };
let onclick = move |_| println!("Clicked!");
rsx! {
div { class, id, {&children} }
Component { a, b, c, children, onclick }
Component { a, ..ComponentProps { a: 1, b: 2, c: 3, children: VNode::empty(), onclick: Default::default() } }
}
}
#[component]
fn Component(
a: i32,
b: i32,
c: i32,
children: Element,
onclick: EventHandler<MouseEvent>,
) -> Element {
rsx! {
div { "{a}" }
div { "{b}" }
div { "{c}" }
div { {children} }
div { onclick }
}
}
examples/09-reference/simple_list.rs
+38
View File
@@ -0,0 +1,38 @@
//! A few ways of mapping elements into rsx! syntax
//!
//! Rsx allows anything that's an iterator where the output type implements Into<Element>, so you can use any of the following:
use dioxus::prelude::*;
fn main() {
dioxus::launch(app);
}
fn app() -> Element {
rsx!(
div {
// Use Map directly to lazily pull elements
{(0..10).map(|f| rsx! { "{f}" })}
// Collect into an intermediate collection if necessary, and call into_iter
{["a", "b", "c", "d", "e", "f"]
.into_iter()
.map(|f| rsx! { "{f}" })
.collect::<Vec<_>>()
.into_iter()}
// Use optionals
{Some(rsx! { "Some" })}
// use a for loop where the body itself is RSX
for name in 0..10 {
div { "{name}" }
}
// Or even use an unterminated conditional
if true {
"hello world!"
}
}
)
}
examples/09-reference/spread.rs
+43
View File
@@ -0,0 +1,43 @@
//! This example demonstrates how to use the spread operator to pass attributes to child components.
//!
//! This lets components like the `Link` allow the user to extend the attributes of the underlying `a` tag.
//! These attributes are bundled into a `Vec<Attribute>` which can be spread into the child component using the `..` operator.
use dioxus::prelude::*;
fn main() {
let dom = VirtualDom::prebuilt(app);
let html = dioxus_ssr::render(&dom);
println!("{}", html);
}
fn app() -> Element {
rsx! {
SpreadableComponent {
width: "10px",
extra_data: "hello{1}",
extra_data2: "hello{2}",
height: "10px",
left: 1,
"data-custom-attribute": "value",
}
}
}
#[derive(Props, PartialEq, Clone)]
struct Props {
#[props(extends = GlobalAttributes)]
attributes: Vec<Attribute>,
extra_data: String,
extra_data2: String,
}
#[component]
fn SpreadableComponent(props: Props) -> Element {
rsx! {
audio { ..props.attributes, "1: {props.extra_data}\n2: {props.extra_data2}" }
}
}
examples/09-reference/web_component.rs
+32
View File
@@ -0,0 +1,32 @@
//! Dioxus allows webcomponents to be created with a simple syntax.
//!
//! Read more about webcomponents [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
//!
//! We typically suggest wrapping webcomponents in a strongly typed interface using a component.
use dioxus::prelude::*;
fn main() {
dioxus::launch(app);
}
fn app() -> Element {
rsx! {
div {
h1 { "Web Components" }
CoolWebComponent { my_prop: "Hello, world!".to_string() }
}
}
}
/// A web-component wrapped with a strongly typed interface using a component
#[component]
fn CoolWebComponent(my_prop: String) -> Element {
rsx! {
// rsx! takes a webcomponent as long as its tag name is separated with dashes
web-component {
// Since web-components don't have built-in attributes, the attribute names must be passed as a string
"my-prop": my_prop,
}
}
}
examples/09-reference/xss_safety.rs
+25
View File
@@ -0,0 +1,25 @@
//! XSS Safety
//!
//! This example proves that Dioxus is safe from XSS attacks.
use dioxus::prelude::*;
fn main() {
dioxus::launch(app);
}
fn app() -> Element {
let mut contents = use_signal(|| String::from("<script>alert(\"hello world\")</script>"));
rsx! {
div {
h1 {"Dioxus is XSS-Safe"}
h3 { "{contents}" }
input {
value: "{contents}",
r#type: "text",
oninput: move |e| contents.set(e.value()),
}
}
}
}