feat: support setting rootMargin for client:visible (#9363)

* feat: support setting rootMargin for `client:visible` This support adding optional `rootMargin` to the `IntersectionObserver` options. This gives the developer the optional choice to hydrate a bit before the astro-island enters the viewport. * chore: update type for client:visible * chore: added changeset * chore: update types * fix: check if value is string * Update stupid-peas-juggle.md * fix: update .changeset/stupid-peas-juggle.md Co-authored-by: Sarah Rainsberger <[email protected]> --------- Co-authored-by: Florian Lefebvre <[email protected]> Co-authored-by: Bjorn Lu <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>
withastro · Jan 3, 2024 · 769826e · 769826e
1 parent f33fe31
commit 769826e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/.changeset/stupid-peas-juggle.md b/.changeset/stupid-peas-juggle.md
@@ -0,0 +1,10 @@
+---
+'astro': minor
+---
+
+Extends the `client:visible` directive by adding an optional `rootMargin` property. This allows a component to be hydrated when it is close to the viewport instead of waiting for it to become visible.
+
+```html
+<!-- Load component when it's within 200px away from entering the viewport -->
+<Component client:visible="200px" />
+```
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -70,7 +70,7 @@ export interface AstroBuiltinProps {
 	'client:load'?: boolean;
 	'client:idle'?: boolean;
 	'client:media'?: string;
-	'client:visible'?: boolean;
+	'client:visible'?: string|boolean;
 	'client:only'?: boolean | string;
 }
 

diff --git a/packages/astro/src/runtime/client/visible.ts b/packages/astro/src/runtime/client/visible.ts
@@ -5,12 +5,16 @@ import type { ClientDirective } from '../../@types/astro.js';
  * We target the children because `astro-island` is set to `display: contents`
  * which doesn't work with IntersectionObserver
  */
-const visibleDirective: ClientDirective = (load, _options, el) => {
+const visibleDirective: ClientDirective = (load, options, el) => {
 	const cb = async () => {
 		const hydrate = await load();
 		await hydrate();
 	};
 
+	const ioOptions = {
+		rootMargin: typeof options.value === 'string' ? options.value : undefined,
+	};
+
 	const io = new IntersectionObserver((entries) => {
 		for (const entry of entries) {
 			if (!entry.isIntersecting) continue;
@@ -19,7 +23,7 @@ const visibleDirective: ClientDirective = (load, _options, el) => {
 			cb();
 			break; // break loop on first match
 		}
-	});
+	}, ioOptions);
 
 	for (const child of el.children) {
 		io.observe(child);