michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix client:visible directive in safari (#3839)

Browse source 
* fix: client visible on safari

* chore: changeset

* refactor: wait for children with mutation observer

* fix: remove unecessary settimeout

* refactor: remove unecessary awaits
This commit is contained in:
Ben Holmes 2022-07-06 16:58:28 -04:00 committed by GitHub
parent b1c4600fd4
commit cd3f6348c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/twenty-meals-train.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix `client:visible` directive in safari

17
packages/astro/src/runtime/server/astro-island.ts
View file

@ -41,7 +41,20 @@ declare const Astro: {
public Component: any;
public hydrator: any;
static observedAttributes = ['props'];
async connectedCallback() {
connectedCallback() {
if(this.getAttribute('client') === 'only' || this.firstChild) {
this.childrenConnectedCallback();
} else {
// connectedCallback may run *before* children are rendered (ex. HTML streaming)
// If SSR children are expected, but not yet rendered,
// Wait with a mutation observer
new MutationObserver((_, mo) => {
mo.disconnect();
this.childrenConnectedCallback();
}).observe(this, { childList: true });
}
}
async childrenConnectedCallback() {
window.addEventListener('astro:hydrate', this.hydrate);
await import(this.getAttribute('before-hydration-url')!);
const opts = JSON.parse(this.getAttribute('opts')!) as Record<string, any>;
@ -57,7 +70,7 @@ declare const Astro: {
return this.hydrate;
},
opts,
this
this,
);
}
hydrate = () => {