Conditional rendering doesn't work directly on scripts

[mayank99]

Astro Info

Astro                    v5.0.0-beta.12
Node                     v18.20.3
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

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

No response

Describe the Bug

When conditionally rendering a <script>, Astro does not process it (i.e. typescript and npm imports do not work). I believe this is supposed to work after withastro/astro#11791.

{condition && <script src="../main.ts"></script>}

As a workaround, I moved the <script> into a separate Astro component, and conditionally rendered that component, after which it started working as intended (i.e. Astro processes it).

{condition && <ComponentContainingScript />}

What's the expected result?

The behavior should be the same whether the <script> is rendered conditionally or whether a component containing the <script> is rendered conditionally.

Link to Minimal Reproducible Example

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

Participation

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

[bluwy]

Hmm looks like it inherited some caveats with styles where the compiler would bail optimizing any styles/scripts if they're within a JSX interpolation. The compiler needs to be tweaked to process them instead of inlining it as plain strings. (playground)

I'll move this to the compiler repo as a change is needed there to fix this (if possible).