Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

unnest astro-island class (#10839)

Browse source
This commit is contained in:
Joe Pea 2024-04-22 11:13:15 -07:00 committed by GitHub
parent 8e6eb624ae
commit b0de82b1e9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 165 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -44,17 +44,17 @@ declare const Astro: {
return Object.fromEntries(Object.entries(raw).map(([key, value]) => [key, reviveTuple(value)]));
};
if (!customElements.get('astro-island')) {
customElements.define(
'astro-island',
class extends HTMLElement {
// 🌊🏝️🌴
class AstroIsland extends HTMLElement {
public Component: any;
public hydrator: any;
static observedAttributes = ['props'];
disconnectedCallback() {
document.removeEventListener('astro:after-swap', this.unmount);
document.addEventListener('astro:after-swap', this.unmount, { once: true });
}
connectedCallback() {
if (
!this.hasAttribute('await-children') ||
@ -86,6 +86,7 @@ declare const Astro: {
document.addEventListener('DOMContentLoaded', onConnected);
}
}
async childrenConnectedCallback() {
let beforeHydrationUrl = this.getAttribute('before-hydration-url');
if (beforeHydrationUrl) {
@ -93,6 +94,7 @@ declare const Astro: {
}
this.start();
}
async start() {
const opts = JSON.parse(this.getAttribute('opts')!) as Record<string, any>;
const directive = this.getAttribute('client') as directiveAstroKeys;
@ -125,12 +127,10 @@ declare const Astro: {
);
} catch (e) {
// eslint-disable-next-line no-console
console.error(
`[astro-island] Error hydrating ${this.getAttribute('component-url')}`,
e
);
console.error(`[astro-island] Error hydrating ${this.getAttribute('component-url')}`, e);
}
}
hydrate = async () => {
// The client directive needs to load the hydrator code before it can hydrate
if (!this.hydrator) return;
@ -200,14 +200,18 @@ declare const Astro: {
this.removeAttribute('ssr');
this.dispatchEvent(new CustomEvent('astro:hydrate'));
};
attributeChangedCallback() {
this.hydrate();
}
unmount = () => {
// If element wasn't persisted, fire unmount event
if (!this.isConnected) this.dispatchEvent(new CustomEvent('astro:unmount'));
};
}
);
if (!customElements.get('astro-island')) {
customElements.define('astro-island', AstroIsland);
}
}