Nested list components using JSX expressions throw error

TheOtterlord commented 1 year ago

What version of `astro` are you using?

2.6.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux

What browser are you using?

Firefox

Describe the Bug

This isn't a vital bug (at least not this reproduction) because it misuses li elements.

If you nest a list of li elements in a JSX expression, surrounded by an li element, Astro throws an error.

---
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <ul>
            <li>
                {
                    [''].map(() => (
                        <li></li>
                    ))
                }
            </li>
        </ul>
    </body>
</html>

What's the expected result?

Correctly render the elements

Link to Minimal Reproducible Example

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

Participation

[ ] I am willing to submit a pull request for this issue.

natemoo-re commented 1 year ago

Ah yes, one of our fun compiler edge cases. Because li > li isn't valid, the compiler silently "corrects" the markup but ends up breaking the expression in the process. It's definitely worth rethinking how that works, but it's a huge task so I'm not sure when we'll be able to tackle it.

Temporary workaround if this output is ever needed for some reason... wrapping invalid markup in a <Fragment> or using set:html usually does the trick.

RobertDS07 commented 1 year ago

@natemoo-re, but is there any motivation to have li > li? Considering the HTML standard, it mentions how li can be used. In this case, an error is expected, and it would be strange if there weren't an error, don't you think?

MoustaphaDev commented 11 months ago

@RobertDS07 I think the issue is that the compiler shouldn't generate invalid code when the markup is invalid, it should try to correct it

withastro / compiler