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

[OliverSpeir]

Note from @Adammatthiesen during talking and docing

We could make the explanation of attributes causing scripts to become is:inline more emphasized

[JusticeMatthew]

If nothing else this 100% should get added:

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

It's pretty common for some TS+script related comments to arise in the discord resulting from this misunderstanding

[sarah11918]

<script>s are typescript by default

This feels like it could be messaged in the same way we say that your entire Astro project is Typescript, which means some editor errors unless you opt for a less-strict setting for checking.