dioxus icon indicating copy to clipboard operation
dioxus copied to clipboard

Unnecessary <pre> tags created in HTML

Open supetronix opened this issue 3 years ago • 2 comments

Problem:

  1. While using "conditional rendering" in web, it generates "empty pre" tags which seems odd. I checked "yew" and it doesn't happen there.

  2. Perhaps it is just me but "rsx! { }" and "rsx!( )" requirements are not consistent (for nested use within conditional rendering).

  3. 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

  1. 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.

  2. 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

  1. No "pre" tags are created when we are conditionally rendering HTML and don't want to output something.
  2. 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): Dioxus

2nd (Yew):

Yew

Environment:

  • Dioxus version: 0.2.4
  • Rust version: 1.62
  • OS info: MacOS
  • App platform: Web

supetronix avatar Jul 15 '22 05:07 supetronix

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

RubixDev avatar Sep 05 '23 02:09 RubixDev

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.

jkelleyrtp avatar Feb 23 '24 22:02 jkelleyrtp