+//! 
+//! "children"
+//!
+//! // The regular syntax can be used inside JSX children (and vice versa)
+//! div { class: "inner", "More content" }
+//! for item in items {
+//! "{item}"
+//! }
+//!
+//! }
+//! ```
+//!
+//! The syntax follows the regular rsx! rules:
+//! - Text nodes are quoted string literals (`"Hello, world!"
+//!
+//! "Hello"
`) +//! - Attribute values are literals (`class="abc"`) or braced expressions (`onclick={move |_| ...}`) +//! - Shorthand attributes are supported (`` is `class: class`) +//! - Spread attributes use `{..props}` +//! +//! The parsed result is the same [`Element`]/[`Component`] AST as the regular syntax, so +//! templates, hot-reloading, and diagnostics work identically. + +use crate::innerlude::*; +use proc_macro2::{Delimiter, Group, TokenStream as TokenStream2}; +use syn::{ + Expr, Ident, LitBool, LitFloat, LitInt, LitStr, Token, braced, + ext::IdentExt, + parse::{Parse, ParseBuffer, ParseStream}, + punctuated::Punctuated, + spanned::Spanned, + token::Brace, +}; + +/// Parse a JSX/XML-like tag into a [`BodyNode`]. Expects the stream to be pointing at a `<` token. +pub(crate) fn parse_jsx_node(stream: ParseStream) -> syn::Result` is equivalent to `div { class }`
+ match &name {
+ AttributeName::BuiltIn(ident) => AttributeValue::Shorthand(ident.clone()),
+ _ => {
+ return Err(syn::Error::new(
+ name.span(),
+ "custom attributes must have a value",
+ ));
+ }
+ }
+ };
+
+ let mut attribute = Attribute::from_raw(name, value);
+
+ // Attributes in tags don't have commas, but stray ones are accepted for
+ // compatibility with the regular syntax
+ attribute.comma = stream.parse::().ok();
+
+ attributes.push(attribute);
+ }
+
+ Ok((attributes, spreads))
+}
+
+/// Parse the end of an open tag (`>` or `/>`), children, and the closing tag if there is one
+///
+/// A brace token is synthesized from the span of the open tag's `>` so that consumers that expect
+/// a braced body (completion hints, autofmt, ...) treat the tag as a complete node.
+fn parse_tag_end_and_children(
+ stream: ParseStream,
+ name: &str,
+ parse_close_name: impl FnOnce(ParseStream) -> syn::Result<()>,
+) -> syn::Result<(Brace, Vec)> {
+ // Self-closing tag: ``
+ if stream.peek(Token![/]) {
+ stream.parse::()?;
+ let gt = stream.parse::]>()?;
+ return Ok((synthetic_brace(gt), Vec::new()));
+ }
+
+ let gt = stream.parse::]>()?;
+
+ let mut children = Vec::new();
+ loop {
+ if stream.peek(Token![<]) && stream.peek2(Token![/]) {
+ break;
+ }
+
+ if stream.is_empty() {
+ return Err(syn::Error::new(
+ gt.span(),
+ format!("missing closing tag ``"),
+ ));
+ }
+
+ // Children of JSX tags are regular body nodes, so both syntaxes can be mixed freely
+ children.push(stream.parse::()?);
+ }
+
+ stream.parse::()?;
+ stream.parse::()?;
+ parse_close_name(stream)?;
+ stream.parse::]>()?;
+
+ Ok((synthetic_brace(gt), children))
+}
+
+fn synthetic_brace(gt: Token![>]) -> Brace {
+ let mut group = Group::new(Delimiter::Brace, TokenStream2::new());
+ group.set_span(gt.span());
+ Brace {
+ span: group.delim_span(),
+ }
+}
+
+fn path_to_string(path: &syn::Path) -> String {
+ use quote::ToTokens;
+ let mut name = path.to_token_stream().to_string();
+ name.retain(|c| !c.is_whitespace());
+ name
+}
+
+#[cfg(test)]
+mod tests {
+ use super::*;
+ use quote::quote;
+
+ fn parse(input: proc_macro2::TokenStream) -> BodyNode {
+ syn::parse2::(input).unwrap()
+ }
+
+ #[test]
+ fn parses_basic_element() {
+ let node = parse(quote! { });
+ let BodyNode::Element(el) = node else {
+ panic!("expected element")
+ };
+ assert_eq!(el.name, "img");
+ assert!(el.children.is_empty());
+ assert!(el.diagnostics.is_empty());
+ }
+
+ #[test]
+ fn parses_nested_elements() {
+ let node = parse(quote! {
+ "children" });
+ let BodyNode::Component(comp) = node else {
+ panic!("expected component")
+ };
+ assert_eq!(comp.fields.len(), 1);
+ assert_eq!(comp.children.roots.len(), 1);
+ assert!(comp.diagnostics.is_empty());
+ }
+
+ #[test]
+ fn parses_component_path_and_generics() {
+ let node = parse(quote! { /> });
+ let BodyNode::Component(comp) = node else {
+ panic!("expected component")
+ };
+ assert!(comp.generics.is_some());
+
+ let node = parse(quote! { >"child" > });
+ let BodyNode::Component(comp) = node else {
+ panic!("expected component")
+ };
+ assert!(comp.generics.is_some());
+ assert_eq!(comp.children.roots.len(), 1);
+ }
+
+ #[test]
+ fn parses_web_component() {
+ let node = parse(quote! { (quote! {
"Hello"
});
+ let BodyNode::Element(el) = node else {
+ panic!("expected element")
+ };
+ assert_eq!(el.name, "div");
+ assert_eq!(el.raw_attributes.len(), 1);
+ assert_eq!(el.raw_attributes[0].name.to_string(), "class");
+ assert_eq!(el.children.len(), 1);
+ assert!(el.diagnostics.is_empty());
+ }
+
+ #[test]
+ fn parses_self_closing_element() {
+ let node = parse(quote! { });
+ let BodyNode::Element(el) = node else {
+ panic!("expected element")
+ };
+ assert_eq!(el.name, "img");
+ assert!(el.children.is_empty());
+ assert!(el.diagnostics.is_empty());
+ }
+
+ #[test]
+ fn parses_nested_elements() {
+ let node = parse(quote! {
+
+
+ });
+ let BodyNode::Element(el) = node else {
+ panic!("expected element")
+ };
+ assert_eq!(el.children.len(), 2);
+ }
+
+ #[test]
+ fn parses_component() {
+ let node = parse(quote! { "Title"
+"Body {text}"
+
+ p { class: "regular", "regular" }
+ {some_expr}
+ for item in items {
+ "{item}"
+ }
+ if cond {
+ "conditional"
+ }
+
+ });
+ let BodyNode::Element(el) = node else {
+ panic!("expected element")
+ };
+ assert_eq!(el.children.len(), 5);
+ }
+
+ #[test]
+ fn merges_attributes() {
+ let node = parse(quote! { });
+ let BodyNode::Element(el) = node else {
+ panic!("expected element")
+ };
+ assert_eq!(el.merged_attributes.len(), 1);
+ assert!(el.diagnostics.is_empty());
+ }
+
+ #[test]
+ fn rejects_invalid_input() {
+ // Mismatched closing tag
+ assert!(syn::parse2::"hi" }).is_err());
+ assert!(syn::parse2::(quote! { "hi" }).is_err());
+
+ // Missing closing tag
+ assert!(syn::parse2::(quote! { (quote! { <>"hi" }).is_err());
+
+ // Unbraced expression values
+ assert!(syn::parse2::(quote! { }).is_err());
+ }
+
+ #[test]
+ fn compiles_to_template() {
+ use quote::ToTokens;
+
+ let body: crate::CallBody = syn::parse2(quote! {
+ "#
+ );
+}
+
+#[test]
+fn jsx_components() {
+ #[component]
+ fn Wrapper(title: String, children: Element) -> Element {
+ rsx! {
+
+
+ }
+ }
+
+ assert_eq!(
+ dioxus_ssr::render_element(rsx! {
+
+
+ }),
+ "
"hi" }).is_err());
+
+ // Stray closing tag
+ assert!(syn::parse2::(quote! {
}).is_err());
+
+ // Fragments are not supported
+ assert!(syn::parse2::
+
+ })
+ .unwrap();
+
+ let block: crate::CallBody = syn::parse2(quote! {
+ div { class: "container",
+ h1 { "Hello, {name}!" }
+ button { onclick: move |_| println!("clicked"), "Click" }
+ MyComponent { prop: "value" }
+ }
+ })
+ .unwrap();
+
+ // Tag syntax should generate exactly the same code as the equivalent block syntax
+ assert_eq!(
+ body.to_token_stream().to_string(),
+ block.to_token_stream().to_string()
+ );
+ }
+}
diff --git a/packages/rsx/src/lib.rs b/packages/rsx/src/lib.rs
index 6b98d6976c..2afab2557f 100644
--- a/packages/rsx/src/lib.rs
+++ b/packages/rsx/src/lib.rs
@@ -20,6 +20,7 @@ mod element;
mod fill_order;
mod forloop;
mod ifchain;
+mod jsx;
mod node;
mod raw_expr;
mod rsx_block;
@@ -70,6 +71,7 @@ pub(crate) mod innerlude {
pub use crate::expr_node::*;
pub use crate::forloop::*;
pub use crate::ifchain::*;
+ pub(crate) use crate::jsx::*;
pub use crate::node::*;
pub use crate::raw_expr::*;
pub use crate::rsx_block::*;
diff --git a/packages/rsx/src/node.rs b/packages/rsx/src/node.rs
index c082ae1fa8..b89aa155fe 100644
--- a/packages/rsx/src/node.rs
+++ b/packages/rsx/src/node.rs
@@ -39,6 +39,11 @@ impl Parse for BodyNode {
return Ok(BodyNode::Text(stream.parse()?));
}
+ // A `<` token switches into the JSX/XML-like tag syntax
+ if stream.peek(Token![<]) {
+ return parse_jsx_node(stream);
+ }
+
// Transform for loops into into_iter calls
if stream.peek(Token![for]) {
return Ok(BodyNode::ForLoop(stream.parse()?));
diff --git a/packages/rsx/src/raw_expr.rs b/packages/rsx/src/raw_expr.rs
index 599a9516a7..e072b68e5a 100644
--- a/packages/rsx/src/raw_expr.rs
+++ b/packages/rsx/src/raw_expr.rs
@@ -22,19 +22,22 @@ impl Parse for PartialExpr {
// - another braced group
// - an identifier
// - a string literal
+ // - a `<` (the start of a JSX-style tag)
let mut is_braced = false;
if let Some((TokenTree::Group(group), next)) = input.fork().cursor().token_tree() {
let next_char_is_a_comma = next.punct().is_some_and(|(tt, _)| tt.as_char() == ',');
let next_is_a_braced_exp = next.group(Delimiter::Brace).is_some();
let next_is_an_ident = next.ident().is_some();
let next_is_a_string_literal = next.literal().is_some();
+ let next_is_a_lt = next.punct().is_some_and(|(tt, _)| tt.as_char() == '<');
if group.delimiter() == Delimiter::Brace
&& (next.eof()
|| next_char_is_a_comma
|| next_is_a_braced_exp
|| next_is_an_ident
- || next_is_a_string_literal)
+ || next_is_a_string_literal
+ || next_is_a_lt)
{
is_braced = true
}
diff --git a/packages/ssr/tests/jsx_syntax.rs b/packages/ssr/tests/jsx_syntax.rs
new file mode 100644
index 0000000000..b75822618b
--- /dev/null
+++ b/packages/ssr/tests/jsx_syntax.rs
@@ -0,0 +1,77 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+
+#[test]
+fn jsx_elements() {
+ let name = "world";
+ assert_eq!(
+ dioxus_ssr::render_element(rsx! {
+ "Hello, {name}!"
+ +
+
+
+ }),
+ r#""Hello, {name}!"
+
+ Hello, world!
"{title}"
+ {children} +"body"
+hi
body
jsx child
"#
+ );
+}
+
+#[test]
+fn jsx_event_handlers_and_shorthand() {
+ fn App() -> Element {
+ let disabled = true;
+ rsx! {
+
+ }
+ }
+
+ let mut dom = VirtualDom::new(App);
+ dom.rebuild(&mut dioxus_core::NoOpMutations);
+
+ assert_eq!(
+ dioxus_ssr::render(&dom),
+ ""
+ );
+}
regular child
012many