Hotreloading of for/if/body, formatted strings, literals, component props, nested rsx, light CLI rewrite, cli TUI (#2258)

Hotreload the contents of for loops, if chains, component bodies, props, attributes, and any literals discovered in rsx!
Add a TUI renderer to the CLI.
Improve the CLI build system to be async and parallel.
Refactor RSX to allow partial expansion of expressions.
Merge autofmt implementations for consistency.
Merge the representation of elements and components under the hood.
Add a diagnostics system for rsx for improved error messages.
Drop interprocess and move to websockets for communication between the CLI and the server.
Assign IDs to nodes and attributes in a stable way to be used in non compiler contexts.
Add hotreloading to any body of component/for loop/if chain/etc.

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>
Co-authored-by: Liam Mitchell <liamkarlmitchell@gmail.com>
This commit is contained in:
authored and GitHub committed 2024-07-17 19:11:18 -07:00
1 parent 176e67e5b7
commit 88af3e7eff
181 files changed
+12755 -10806

No files matched your search

+48 -63
View File
@@ -5,8 +5,8 @@
use convert_case::{Case, Casing};
use dioxus_html::{map_html_attribute_to_rsx, map_html_element_to_rsx};
use dioxus_rsx::{
AttributeType, BodyNode, CallBody, Component, Element, ElementAttr, ElementAttrNamed,
ElementName, IfmtInput,
Attribute, AttributeName, AttributeValue, BodyNode, CallBody, Component, Element, ElementName,
HotLiteral, TemplateBody, TextNode,
};
pub use html_parser::{Dom, Node};
use proc_macro2::{Ident, Span};
@@ -14,17 +14,27 @@ use syn::{punctuated::Punctuated, LitStr};
/// Convert an HTML DOM tree into an RSX CallBody
pub fn rsx_from_html(dom: &Dom) -> CallBody {
CallBody {
roots: dom.children.iter().filter_map(rsx_node_from_html).collect(),
}
let nodes = dom
.children
.iter()
.filter_map(rsx_node_from_html)
.collect::<Vec<_>>();
let template = TemplateBody::new(nodes);
CallBody::new(template)
}
/// Convert an HTML Node into an RSX BodyNode
///
/// If the node is a comment, it will be ignored since RSX doesn't support comments
pub fn rsx_node_from_html(node: &Node) -> Option<BodyNode> {
use AttributeName::*;
use AttributeValue::*;
match node {
Node::Text(text) => Some(BodyNode::Text(ifmt_from_text(text))),
Node::Text(text) => Some(BodyNode::Text(TextNode::from_text(text))),
Node::Element(el) => {
let el_name = if let Some(name) = map_html_element_to_rsx(&el.name) {
ElementName::Ident(Ident::new(name, Span::call_site()))
@@ -42,68 +52,49 @@ pub fn rsx_node_from_html(node: &Node) -> Option<BodyNode> {
.attributes
.iter()
.map(|(name, value)| {
let value = ifmt_from_text(value.as_deref().unwrap_or("false"));
let value = HotLiteral::from_raw_text(value.as_deref().unwrap_or("false"));
let attr = if let Some(name) = map_html_attribute_to_rsx(name) {
let ident = if let Some(name) = name.strip_prefix("r#") {
let name = if let Some(name) = name.strip_prefix("r#") {
Ident::new_raw(name, Span::call_site())
} else {
Ident::new(name, Span::call_site())
};
ElementAttr {
value: dioxus_rsx::ElementAttrValue::AttrLiteral(value),
name: dioxus_rsx::ElementAttrName::BuiltIn(ident),
}
BuiltIn(name)
} else {
// If we don't recognize the attribute, we assume it's a custom attribute
ElementAttr {
value: dioxus_rsx::ElementAttrValue::AttrLiteral(value),
name: dioxus_rsx::ElementAttrName::Custom(LitStr::new(
name,
Span::call_site(),
)),
}
Custom(LitStr::new(name, Span::call_site()))
};
AttributeType::Named(ElementAttrNamed::new(el_name.clone(), attr))
Attribute::from_raw(attr, AttrLiteral(value))
})
.collect();
let class = el.classes.join(" ");
if !class.is_empty() {
attributes.push(AttributeType::Named(ElementAttrNamed::new(
el_name.clone(),
ElementAttr {
name: dioxus_rsx::ElementAttrName::BuiltIn(Ident::new(
"class",
Span::call_site(),
)),
value: dioxus_rsx::ElementAttrValue::AttrLiteral(ifmt_from_text(&class)),
},
)));
attributes.push(Attribute::from_raw(
BuiltIn(Ident::new("class", Span::call_site())),
AttrLiteral(HotLiteral::from_raw_text(&class)),
));
}
if let Some(id) = &el.id {
attributes.push(AttributeType::Named(ElementAttrNamed::new(
el_name.clone(),
ElementAttr {
name: dioxus_rsx::ElementAttrName::BuiltIn(Ident::new(
"id",
Span::call_site(),
)),
value: dioxus_rsx::ElementAttrValue::AttrLiteral(ifmt_from_text(id)),
},
)));
attributes.push(Attribute::from_raw(
BuiltIn(Ident::new("id", Span::call_site())),
AttrLiteral(HotLiteral::from_raw_text(id)),
));
}
let children = el.children.iter().filter_map(rsx_node_from_html).collect();
Some(BodyNode::Element(Element::new(
None,
el_name,
attributes,
Some(BodyNode::Element(Element {
name: el_name,
children,
Default::default(),
)))
raw_attributes: attributes,
merged_attributes: Default::default(),
diagnostics: Default::default(),
spreads: Default::default(),
brace: Default::default(),
}))
}
// We ignore comments
@@ -115,7 +106,7 @@ pub fn rsx_node_from_html(node: &Node) -> Option<BodyNode> {
pub fn collect_svgs(children: &mut [BodyNode], out: &mut Vec<BodyNode>) {
for child in children {
match child {
BodyNode::Component(comp) => collect_svgs(&mut comp.children, out),
BodyNode::Component(comp) => collect_svgs(&mut comp.children.roots, out),
BodyNode::Element(el) if el.name == "svg" => {
// we want to replace this instance with a component
@@ -128,18 +119,19 @@ pub fn collect_svgs(children: &mut [BodyNode], out: &mut Vec<BodyNode>) {
segments.push(new_name.clone().into());
// Replace this instance with a component
let mut new_comp = BodyNode::Component(Component::new(
syn::Path {
let mut new_comp = BodyNode::Component(Component {
name: syn::Path {
leading_colon: None,
segments,
},
None,
vec![],
vec![],
None,
None,
Default::default(),
));
generics: None,
spreads: Default::default(),
diagnostics: Default::default(),
fields: vec![],
children: TemplateBody::new(vec![]),
brace: Default::default(),
dyn_idx: Default::default(),
});
std::mem::swap(child, &mut new_comp);
@@ -153,10 +145,3 @@ pub fn collect_svgs(children: &mut [BodyNode], out: &mut Vec<BodyNode>) {
}
}
}
fn ifmt_from_text(text: &str) -> IfmtInput {
IfmtInput {
source: Some(LitStr::new(text, Span::call_site())),
segments: vec![],
}
}