Processed inline scripts

[trail flicker]

Is there a way for Astro to process my js scripts at build time, and then inline them?
I'd like to write my theme switching code in a js file but still avoid FOUC.

Can I somehow make Astro use blocking="render" or is that a bad idea?

[cloud adder]

I don't think this is possible at the moment... There is a proposal in the roadmap repo from Chris, but while there is traction on the proposal, this is from mid-2024... So I guess technically it might be difficult to implement (and/or necessit more deeper change to support that).

So, yes, this is not ideal... But for a feature like a theme switch, you can minify the code in advance with online tools like minify-js then copy/paste that code in an inline script tag. Again this is not ideal, but with a small feature I think this is the best option...

[unreal wolf]

Since astro 5 now “direct renders” scripts you can count on scripts below 4kb being inlines

[trail flicker]

I'm not sure how to trigger what you mean

How would I include the script for this to happen?

[unreal wolf]

any script under 4kb gets inlined

it can be written in the <script> body or included via src

[trail flicker]

Will it get inlined in the exact location? out of curiosity, doesn't matter in my case.

[unreal wolf]

Yeah

It probably does matter a bit for FOUC I think you want it in head if possible

https://docs.astro.build/en/guides/styling/#bundle-control this bit also applies to scripts as well btw

But probably don’t want to bump it up too much

[trail flicker]

You're right, putting it at the bottom of the body content did produce FOUC, so after that I put it in the head