Container API: Passing rendered components via `renderToString`'s options parameter does not work as expected.

shoogstoel commented 2 weeks ago

Astro Info

Astro                    v5.0.0-beta.4
Node                     v21.7.3
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/alpinejs
                         astro-icon

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

While building a component library based on a design system I wanted to display the source code of each individual component. Since Astro 4.9.0, this is possible using the experimental Container API.

This works as expected as long as I do not pass components as slots to renderToString. Trying to display those as text (using set:text) does not render the childrens' HTML correctly. However, when used with set:html instead, I get the correctly displayed childrens' HTML, but lose the parent's.

I am not sure what the expected behaviour is, or if there is some sort of workaround I am not aware of. Right now it looks like that I cannot display component source code with Astro's current Container API.

What's the expected result?

To me, the expected result is the entire parent component with the children as proper HTML, along the lines of:

<!DOCTYPE html><article class="card" data-astro-cid-dohjnao5 data-astro-source-file="/home/projects/qgnirvqgmy.github/src/components/Card.astro" data-astro-source-loc="15:23"> <h1 data-astro-cid-dohjnao5 data-astro-source-file="/home/projects/qgnirvqgmy.github/src/components/Card.astro" data-astro-source-loc="16:7"></h1> <!DOCTYPE html><div class="rich-text" data-astro-source-file="/home/projects/qgnirvqgmy.github/src/components/RichText.astro" data-astro-source-loc="4:24">  <p data-astro-source-file="/home/projects/qgnirvqgmy.github/src/components/RichText.astro" data-astro-source-loc="6:4">Some placeholder text.</p>  </div> </article>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-nswts2?file=src%2Fpages%2Findex.astro

ematipico commented 1 week ago

I believe the issue is that each component is rendered as it was a full-fledged Astro page, so you get the <!DOCTYPE>, which I think is the bug.

ematipico commented 1 week ago

ight now it looks like that I cannot display component source code with Astro's current Container API.

The container isn't meant to render the source code. The container API renders a component, so probably there's some misunderstanding in what you're trying to achieve. Can you please be more specific in about what you're trying to do?

Why do you pass your slot as string? Why don't you pass the slot as a component? I am trying to understand better your use case. Probably the word "source code" is making things more confused in my head

JonathonRP commented 12 hours ago

@ematipico

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-nswts2?file=src%2Fpages%2Findex.astro

I have similar use case, I am trying to make download and have my resume in astro and svelte components but use a basiclayout component to supply scss. doing this to avoid having a hidden/private page that would only be used to render the component with scss.

this is the issue - trying to get scss included this is what I get when I supply only the resume which is closer to what I want

withastro / astro