ItemDescription based on <p> may induce hard to find hydration errors

[blset]

in the source below

what about div instead of p ?

I've been caught several times putting div content in ItemDescription which triggers the good old textbookcase hydration error div inside p.
but it's not accurately pin pointed in devtools so it takes time to track if you forgot about it

view! {
      <p
          class=move || {
              format!("singlestage-item-description {}", class.get().unwrap_or_default())
          }

          {..global_attrs_1}
          {..global_attrs_2}
      >
          {children()}
      </p>
  }

[adoyle0]

Hm, I'm not sure. I get what you're saying, but the component is based on shadcn which uses <p>.

I think most users familiar with shadcn would expect it to be a <p>, and I think the most common use case is to just write some text, so having to write <p> manually most of the time would be annoying. And I think code transcribed from shadcn to singlestage could break. Those are my thoughts.

What are you trying to put in there that can't just be its own <div> outside of ItemDescription? Or just not wrapped in a <div> to begin with?

If you wrap your content in <div class="singlestage-item-description"> does it display properly? I suppose there could be a <ItemDescription as_child=true> variant that renders a <div> instead of a <p> although it's technically not "as child". Maybe it's close enough.

I've been trying to decide what as_child could mean for singlestage because it doesn't/shouldn't work quite the same as radix/shadcn, but I feel like it might be something that someone in your position might just try.

render_as is another prop I introduced for links that may apply here. As in <Link render_as="button" variant="outline" ... /> which renders a Link that looks like a Button, rather than rendering a button that acts like a link. So maybe <ItemDescription render_as="inner"> or something.

[adoyle0]

I guess in this case as_child would be close enough, because a Link can also render_as="badge". Neither name is perfectly accurate.

[blset]

all right then I will use<div class="singlestage-item-description">

I was naively putting some div content as a child of ItemDescription and this produces a hydration error because a div cannot be in a p https://book.leptos.dev/ssr/24_hydration_bugs.html#invalid-html

so maybe at least in the doc, it's worth mentioning that it is a p and not a div and that as such it does not accept any html as child

[adoyle0]

... as child

I'll add as_child to ItemDescription.

It'll behave the same as what you're going to do, let me know how it goes if you have the time