Update guides/client-side-scripts/

[OliverSpeir]

https://docs.astro.build/en/guides/client-side-scripts/

Here are some of the things I've noticed about this page that I think could be updated to fall more inline with Astro docs style guide and be more correct

1. There are a lot of Notes that I think could be upgraded to actual content

2. #client-side-scripts section could be omitted and possibly have some of its content moved into a second paragraph in the overview as it seems to function as an overview to me

3. The first sentence implies that <script>s in Astro are standard HTML scripts which they are not, Astro does magic here with its processing

   You can add interactivity to your Astro components without using a UI framework like React, Svelte, Vue, etc. using standard HTML <script> tags.

4. Improvements to #script-processing

   • TypeScript is fully supported, including importing TypeScript files.

     • Instead of saying typescript is supported it would be more correct to say that <script>s are typescript by default, and you will get lint errors unless you opt out of ts checking them

   • The processed script will be injected at where it’s declared with type="module".

     • This sentence is a bit clunky, instead of saying that scripts appear where they are written ( which I think goes without saying ) we could just say that all scripts get type="module" added

   • If your component is used several times on a page, the script will only be included once.

     • This sentence is also a bit clunky in my opinion, maybe something like "If you write a <script> in a component and use that component multiple times in a page, the <script will be deduplicated" or something but this is just a minor nit since I'm already going through this whole page haha

   • The entire section starting at "The type="module" attribute makes the browser treat the script as a JavaScript module. This has several performance benefits:" is not actually Astro specific and we are venturing into the realm of teaching how HTML and JS actually work, which is fine but I think since this page was written we've shifted the style guide to a harder line of only including astro specific elements. Maybe we could link to some resources ( MDN, HTML spec etc )

     • If we do keep this section, I think the Note about Async could be dropped
     • I think it is important to note that the information here is assuming that the type="module" scripts are external, which they were always when this was written (v4 astro hoisted and didn't inline scripts) and so some of the information is misleading
       • My writing this discussion was born out of learning about the behavior of inline module scripts, check out this GitHub repo if you want to see my exploration lol

5. #common-script-patterns is a lot of non astro specific content

   • I think its valuable, but it also predates the style guideline of only including astro specific content
   • This information is just standard html and js behavior
   • #handle-onclick-and-other-events the note in this section is redundant in my opinion as we explain this in the previous section
   • #pass-frontmatter-variables-to-scripts This section is a very common question in the discord, and many people do not enjoy this answer, as it is quite verbose and relatively complicated, maybe a simpler example could also be added where we use a second <script> and give attributes to it and then query select or get element by id that second script and use its attributes
   • #combining-scripts-and-ui-frameworks This section feels more like information than an example, and if we were to make it a full example I think we would do well to show an actual example or link to the previous heading where we show using a custom element, as people don't always read the full page

[OliverSpeir]

Maybe this would be a fun talking and docing project

[OliverSpeir]

Also think it would be good to add something like guides/styling/#bundle-control to this page explaining about inlining, like the inline limit and what happens after it’s reached