Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-31 23:31:30 -05:00
Code Issues Activity

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

Browse source 
* 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 <sarah@rainsberger.ca>

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Mads Erik Forberg 2024-01-03 14:20:07 +01:00 • committed by GitHub
parent f33fe3190b
commit 769826edbd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.changeset/stupid-peas-juggle.md Normal file
View file

@ -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" />
```

2
packages/astro/src/@types/astro.ts
View file

@ -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;
}

8
packages/astro/src/runtime/client/visible.ts
View file

@ -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);