karaxnim / karax

Karax. Single page applications for Nim.
MIT License
1.08k stars 91 forks source link

verbatim shouldn't create a wrapper div #200

Closed ajusa closed 1 year ago

ajusa commented 3 years ago

Using verbatim shouldn't cause a wrapper div to be created, it isn't always the desired behavior. https://github.com/karaxnim/karax/pull/160 tries addressing this with a new verbatimRaw, but I would suggest just not having verbatim create a div at all, it is super easy for the user to add a wrapper div if needed. Also, verbatim must have a parent HTML element anyway.

I'd also argue that it is pretty unintuitive for a hidden element to be created if you just want to display something like & properly.

Araq commented 3 years ago

Agreed.

timotheecour commented 3 years ago

agreed; if you have a working PR that avoids creating a div with verbatim, then https://github.com/karaxnim/karax/pull/160 can be closed

jyapayne commented 3 years ago

160 is incorrect anyways. Example:

let node = "This is an inner div <div>inner div</div>".verbatimRaw
# node == VNode("This is an inner div ")

It completely discards any other children. You probably shouldn't do this anyways (not the point of verbatim), but it also shouldn't result in discarded data.

The reason why verbatim currently uses a div is because of the above. To capture many children in one node. The way around this would be to make toDom return a list of nodes and all the places that call it be modified to handle a list of nodes. Then the surrounding div for verbatim could be removed.

dom96 commented 3 years ago

I recall that React has a special <>/</> syntax. Maybe we could similarly create a special "empty" node which allows a list of nodes to be returned without any additional tags being output?

jyapayne commented 3 years ago

Hmm, that could work as well

hamidb80 commented 1 year ago

other frameworks append custom html comments to solve this problem iirc:

<!-- start arbitrary text #1 -->
...
<!-- end arbitrary text #1 -->
geotre commented 1 year ago

Completed in #270