dioxus
dioxus copied to clipboard
Unnecessary <pre> tags created in HTML
Problem:
-
While using "conditional rendering" in web, it generates "empty pre" tags which seems odd. I checked "yew" and it doesn't happen there.
-
Perhaps it is just me but "rsx! { }" and "rsx!( )" requirements are not consistent (for nested use within conditional rendering).
-
In "yew" you can only provide an "if" condition but in "Dioxus" you must provide "else" clause too, unless you use ".then", there must be a good reason for this but it just seems unnecessary code.
I am new to both Yew and Dioxus, although not to development, so I apologize if I missed something and unknowingly opened an unnecessary defect.
Steps To Reproduce
-
Attaching two screenshots. First one is for "Dioxus" where in HTML you will see "pre" tags, when "if" condition doesn't match and else part executes, which returns "none". In 2nd screenshot, from "yew", similar if condition is tested and it doesn't create extra "pre" tags.
-
In "Dioxus" (first screenshot) you will see that line "11" can only work if I use "rsx! (cx, ...)" while code in "if let some" block (line 4 just below there) can work with just "rsx!{ } ".
Expected behavior
- No "pre" tags are created when we are conditionally rendering HTML and don't want to output something.
- Either "rsx!{}" is allowed nested in conditional "if" or not allowed at all. It will be difficult to remember when which variant can be used, IMHO.
Screenshots
1st (Dioxus):

2nd (Yew):
Environment:
- Dioxus version: 0.2.4
- Rust version: 1.62
- OS info: MacOS
- App platform: Web
As mentioned in https://github.com/nissy-dev/dioxus-free-icons/issues/14, this is the current explanation:
https://github.com/DioxusLabs/dioxus/blob/94004cfe19c1efb851b3d8147f608990c9ab21b5/packages/core/src/diff.rs#L29-L39
Revisiting this from way in the future - I think we can just use comment nodes instead of <pre> elements. Need to be careful that comment nodes don't get merged, but it should work.