From 8dbac81059b038443cfe5aab9e24381cc18a36dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20H=C3=B8iby?= Date: Tue, 2 Jan 2024 13:26:08 +0100 Subject: [PATCH 1/4] Update directives-reference.mdx with optional root margin Documentation for optional root margin on client visible. This documents this pr https://github.com/withastro/astro/pull/9363 --- src/content/docs/en/reference/directives-reference.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx index e9ac11aaccfb3..c22741850151b 100644 --- a/src/content/docs/en/reference/directives-reference.mdx +++ b/src/content/docs/en/reference/directives-reference.mdx @@ -141,6 +141,12 @@ Load and hydrate the component JavaScript once the component has entered the use ``` +🆕 **New Feature - Optional rootMargin:** This feature allows for earlier component hydration in scenarios like slow internet connections or when components alter the page layout after loading. By setting a rootMargin, hydration is initiated when this specified margin around the component enters the viewport, rather than the component itself. +```astro + +``` +Implementing a rootMargin, such as "200px", is beneficial for reducing layout shifts(CLS) and ensuring components are interactively ready sooner, enhancing the stability and responsiveness of the page. + ### `client:media` - **Priority:** Low From 0caa999c785f5749b047604ea9b9b61ddaa89b83 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Wed, 3 Jan 2024 16:14:29 +0000 Subject: [PATCH 2/4] sarah editing pass --- src/content/docs/en/reference/directives-reference.mdx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx index c22741850151b..a8693319f98b1 100644 --- a/src/content/docs/en/reference/directives-reference.mdx +++ b/src/content/docs/en/reference/directives-reference.mdx @@ -3,6 +3,8 @@ title: Template Directives Reference i18nReady: true --- +import Since from '~/components/Since.astro'; + **Template directives** are a special kind of HTML attribute available inside of any Astro component template (`.astro` files), and some can also be used in `.mdx` files. Template directives are used to control an element or component's behavior in some way. A template directive could enable some compiler feature that makes your life easier (like using `class:list` instead of `class`). Or, a directive could tell the Astro compiler to do something special with that component (like hydrating with `client:load`). @@ -141,11 +143,14 @@ Load and hydrate the component JavaScript once the component has entered the use ``` -🆕 **New Feature - Optional rootMargin:** This feature allows for earlier component hydration in scenarios like slow internet connections or when components alter the page layout after loading. By setting a rootMargin, hydration is initiated when this specified margin around the component enters the viewport, rather than the component itself. +#### `client:visible={rootMargin}` +

+ +Optionally, pass a value to start hydrating the component JavaScript when a specified margin (in pixels) around the component enters the viewport, rather than the component itself. ```astro ``` -Implementing a rootMargin, such as "200px", is beneficial for reducing layout shifts(CLS) and ensuring components are interactively ready sooner, enhancing the stability and responsiveness of the page. +Specifying a `rootMargin` value can reduce layout shifts (CLS), allow more time for a component to hydrate on slower internet connections, and make components interactive sooner, enhancing the stability and responsiveness of the page. ### `client:media` From b55b2e8be17d63b94d0ec576012910a4ff9354f7 Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 3 Jan 2024 13:59:50 -0500 Subject: [PATCH 3/4] fix: update for new syntax --- src/content/docs/en/reference/directives-reference.mdx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx index a8693319f98b1..abcd2c179ae6c 100644 --- a/src/content/docs/en/reference/directives-reference.mdx +++ b/src/content/docs/en/reference/directives-reference.mdx @@ -143,13 +143,15 @@ Load and hydrate the component JavaScript once the component has entered the use ``` -#### `client:visible={rootMargin}` +#### `client:visible={{rootMargin}}`

-Optionally, pass a value to start hydrating the component JavaScript when a specified margin (in pixels) around the component enters the viewport, rather than the component itself. +Optionally, pass a value to specify options to pass to the underlying `IntersectionObserver`. Currently, the only option supported is `rootMargin`. When `rootMargin` is specified, the component JavaScript will hydrate when a specified margin (in pixels) around the component enters the viewport, rather than the component itself. + ```astro - + ``` + Specifying a `rootMargin` value can reduce layout shifts (CLS), allow more time for a component to hydrate on slower internet connections, and make components interactive sooner, enhancing the stability and responsiveness of the page. ### `client:media` @@ -261,7 +263,7 @@ const message = "Astro is awesome!"; ``` :::caution -Using `define:vars` on a `