docs: 🧵 Merged client-scripts page content into hydration page to flo…

…w better and slimmer sidebar

docs/public/_redirects

@@ -1,2 +1,3 @@
 /config/plugins https://iles-docs.netlify.app/guide/plugins 301
 /guide/comparisons https://iles-docs.netlify.app/faqs 301
+/guide/client-scripts https://iles-docs.netlify.app/guide/hydration#client-script-block 301

docs/src/pages/guide/frameworks.mdx

@@ -6,7 +6,7 @@
 [Preact]: /guide/plugins#preactpreset-vite
 [SolidJS]: /guide/plugins#vite-plugin-solid
 [Svelte]: /guide/plugins#sveltejsvite-plugin-svelte
-[vanilla JS]: /guide/client-scripts#vanilla-components
+[vanilla JS]: /guide/hydration#vanilla-components
 
 [useDark]: https://vueuse.org/core/usedark/
 

docs/src/pages/guide/hydration.mdx

@@ -11,6 +11,13 @@
 [Demo]: https://the-vue-point-with-iles.netlify.app/cat-zone
 [blog repo]: https://github.com/ElMassimo/iles/blob/main/playground/the-vue-point/src/components/CatDisplay.vue
 
+[previous section]: /guide/hydration
+[strategies]: /guide/hydration#clientload
+[strategy]: /guide/hydration#clientload
+[layout]: /guide/development#layouts
+[components]: /guide/development#components
+[frameworks]: /guide/frameworks
+
 # Hydration Directives <Logo/>
 
 <Iles/> uses the Islands Architecture. It creates fast, static web pages with only small interactive parts, like a carousel that requires JavaScript.
@@ -123,6 +130,98 @@ Prefer one of the previous strategies whenever possible.
 
 [layout shift]: https://web.dev/cls/
 
+## 🍰 Client Script Block 
+
+<Iles/> provides support for a `script client` block in Vue single-file components.
+
+Sometimes you need client-side code that does not map to a component. Alternatively, you can use [vanilla](#vanilla-components) components.
+
+```vue
+<script client:load lang="ts">
+console.log('Powered by îles 🏝', 'https://iles-docs.netlify.app')
+</script>
+```
+
+<Tip warn>
+Client script blocks are completely detached from the Vue component, which will be statically pre-rendered. The [strategy] is applied to the script, __not__ the component.
+</Tip>
+
+The script will be injected every time the component is rendered, and it's
+guaranteed to execute after all elements rendered by the component are in the DOM.
+
+```vue
+<script client:load lang="ts">
+document.getElementById('sidebar').classList.toggle('live') // always works
+</script>
+
+<template>
+  <div id="sidebar"/>
+</template>
+```
+
+> If you need code to execute once, use `script client` in a [layout].
+
+### Execution Strategies <Logo/>
+
+Other [strategies] that we saw in the [previous section] are supported,
+but you must export `onLoad`.
+
+This function will be called when the condition for the selected strategy is met—when the element becomes visible if using `client:visible`, when the media query matches if using `client:media`, etc.
+
+```vue
+<script client:visible lang="ts">
+console.log('Not necessarily visible')
+
+export function onLoad () {
+  console.log('Now visible')
+}
+</script>
+```
+
+## 🍦 Vanilla Components
+
+`.js` and `.ts` files can also be used as client scripts in <Iles/>, and you can
+choose where to place them by rendering them as islands.
+
+```vue
+<script setup lang="ts">
+import GalleryPreloader from '~/logic/imagePreloader' // .ts
+</script>
+
+<template>
+  <GalleryPreloader client:visible/>
+  ...
+</template>
+```
+
+<Tip warn>
+You must provide a `client:` [strategy] when using vanilla components.
+</Tip>
+
+Vanilla components should export a function to call when the selected
+[hydration strategy][strategy] is fulfilled.
+
+```ts
+export const onLoad = () => fetch('/images').then(...)
+```
+
+If you need to use the provided parameters, use the `OnLoadFn` typings:
+
+```ts
+import type { OnLoadFn } from 'iles'
+
+export const onLoad: OnLoadFn = (el, props, slots) => {
+  // Do whatever you need with the element.
+}
+```
+
+<Tip title="Why not use a renderless component?">
+The benefit is that vanilla JS doesn't require a runtime, so the final
+bundle size will be smaller.
+
+If your app already [uses a framework][frameworks] in some of the islands, then use whatever you find more natural.
+</Tip>
+
 ## 💫 Suspense
 
 Îles automatically wraps îslands with the Vue [Suspense] component when they use the `<script setup>` with top-level `await` expressions.

docs/src/pages/guide/introduction.mdx

@@ -11,7 +11,7 @@ tocLevel: 3
 [Preact]: /guide/plugins#preactpreset-vite
 [SolidJS]: /guide/plugins#vite-plugin-solid
 [Svelte]: /guide/plugins#sveltejsvite-plugin-svelte
-[vanilla JS]: /guide/client-scripts#vanilla-components
+[vanilla JS]: /guide/hydration#vanilla-components
 
 [hydration]: /guide/hydration
 [markdown]: /guide/markdown

docs/src/pages/guide/pwa.mdx

@@ -6,7 +6,7 @@
 [autoUpdate]: https://vite-plugin-pwa.netlify.app/guide/auto-update.html
 [PWA configuration]: https://github.com/ElMassimo/iles/blob/main/docs/iles.config.ts
 [ReloadPrompt component]: https://github.com/ElMassimo/iles/blob/main/docs/src/components/ReloadPrompt.vue
-[client script block]: /guide/client-scripts
+[client script block]: /guide/hydration#client-script-block
 [@userquin]: https://twitter.com/userquin
 
 # Progressive Web Application (PWA)

docs/src/pages/guide/turbo.mdx

@@ -1,7 +1,7 @@
 [quicklink]: https://github.com/GoogleChromeLabs/quicklink
 [hotwired]: https://github.com/hotwired/turbo
 [turbo]: /config#turbo-experimental
-[client scripts]: /guide/client-scripts
+[client scripts]: /guide/hydration#client-script-block
 [islands]: /guide/hydration
 [supported frameworks]: /guide/frameworks
 [modules]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts

docs/src/pages/recipes/vanilla-vue-to-iles.mdx

@@ -19,7 +19,6 @@ image: 'assets/recipes/vanilla-vue-to-iles/vanilla-vue.jpg'
 [project structure]: /guide/development
 [frameworks]: /guide/frameworks
 [client directives]: /guide/hydration
-[client scripts]: /guide/client-scripts
 
 New to Vue? 💚 Scaffold a new Vue project using the following command. Then, convert it into an îles project.
 
@@ -244,7 +243,7 @@ npx iles build # or pnpm, yarn, bun
 
 Check the `dist` folder to see the three HTML pages generated along with their CSS assets. 
 
-Note that `zero` JavaScript is shipped. To add interactive Islands, refer to the [frameworks] and [hydration] pages to learn about hydration client scripts.
+Note that `zero` JavaScript is shipped. To add interactive îslands, refer to the [hydration] and [frameworks] pages.
 
 <Image src='@/assets/recipes/vanilla-vue-to-iles/iles-build.jpg' alt="Iles Build" wide narrow={false} />
 
@@ -268,6 +267,6 @@ If you used Netlify Drop, once deployment has completed successfully, click the
 
 Now, learn about the [project structure] to familiarize yourself with the various conventions and best practices in îles.
 
-To add interactive îslands to your static Îles site, explore using [frameworks], [client directives], and [client scripts].
+To add interactive îslands to your static Îles site, explore using [hydration] and [frameworks].
 
 Well Done. Have a joyful Îles experience!

docs/src/site.ts

@@ -38,7 +38,6 @@ const site = {
         { text: 'Static Assets', link: '/guide/static-assets' },
         { text: 'Hydration', link: '/guide/hydration' },
         { text: 'Frameworks', link: '/guide/frameworks' },
-        { text: 'Client Scripts', link: '/guide/client-scripts' },
         { text: 'Routing', link: '/guide/routing' },
         { text: 'Turbo', link: '/guide/turbo' },
         { text: 'RSS Feeds', link: '/guide/rss' },

packages/iles/src/node/plugin/wrap.ts

@@ -48,7 +48,7 @@ export async function wrapIslandsInSFC (config: AppConfig, code: string, filenam
   if (errors.length > 0) return
 
   if ((scriptClient && 'setup' in scriptClient.attrs) || (scriptSetup && Object.keys(scriptSetup.attrs).some(attr => attr.startsWith('client:'))))
-    throw new Error('Incorrect usage of hydration strategy in script setup.\nSee https://iles-docs.netlify.app/guide/client-scripts#client-script-block')
+    throw new Error('Incorrect usage of hydration strategy in script setup.\nSee https://iles-docs.netlify.app/guide/hydration#client-script-block')
 
   if (!template?.ast?.children.length) {
     if (scriptClient) { throw new Error(`Vue components with <script client:...> must define a template containing at least one tag. No valid template found in ${filename}`) }