Support client: directives on <script> tags

[zadeviggers]

Sometimes I want to add a teeny-tiny bit of interactivity to my site without having to add all the extra weight that comes with a whole front-end framework. This can easily be done using <script> tags inside of .astro files, but has the downside of not being able to use all of the client: directives available when using components from frameworks.
What I propose is allowing all of the existing client: directives (except maybe client:only - not sure how that would work) to be used on <script> tags inside of .astro files.
The current approach of only supporting the client: directives on components for fully-fledged front-end framework feels like it treats vanilla JavaScript as a second-class citizen, which just feels wrong.

I also considered supporting the client: directives on Astro components instead of just <script> tags, but decided against it because of the confusion that could create around what does/doesn't run on the server, and it would also make using the directives on scripts at the top level inside of routing .astro files (the ones in src/pages/) impossible.

[matthewp]

I like this idea!

[aFuzzyBear]

Im certain this was asked a while ago, mind you there is xelement that would help take care of this sort of issue, where you can apply your code to @visible @resize or even have it use the DOM mutation observer @observe to fire on certain dom changes,
I alway felt that <script> tags are sacrosanct in the respective fact that they are the gateway into JS-land on the client,
Partial Hydration is a technique used to help with the loading and execution of JS components, built using UI frameworks, where the astro-root gets wrapped around your island. This proposal would then suggest one further that the script is no longer sacrosanct instead each <script> is now wrapped under an astro-root, this doesnt feel like good html practice to me, personally I would like to see Astro go the other way and have something similar to qwik with their streaming of JS using html attributes for Server-Side Required Content, but that is a seperate PR,