AstroIsland Class — astro Architecture

Source Code

packages/astro/src/runtime/server/astro-island.ts lines 49–211

	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') ||
				document.readyState === 'interactive' ||
				document.readyState === 'complete'
			) {
				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
				// for a special marker inserted when rendering islands that signals the end of the island
				const onConnected = () => {
					document.removeEventListener('DOMContentLoaded', onConnected);
					mo.disconnect();
					this.childrenConnectedCallback();
				};
				const mo = new MutationObserver(() => {
					if (
						this.lastChild?.nodeType === Node.COMMENT_NODE &&
						this.lastChild.nodeValue === 'astro:end'
					) {
						this.lastChild.remove();
						onConnected();
					}
				});
				mo.observe(this, { childList: true });
				// in case the marker comment got stripped and the mutation observer waited indefinitely,
				// also wait for DOMContentLoaded as a last resort
				document.addEventListener('DOMContentLoaded', onConnected);
			}
		}

		async childrenConnectedCallback() {
			let beforeHydrationUrl = this.getAttribute('before-hydration-url');
			if (beforeHydrationUrl) {
				await import(beforeHydrationUrl);
			}
			this.start();
		}

		async start() {
			const opts = JSON.parse(this.getAttribute('opts')!) as Record<string, any>;
			const directive = this.getAttribute('client') as directiveAstroKeys;
			if (Astro[directive] === undefined) {
				window.addEventListener(`astro:${directive}`, () => this.start(), { once: true });
				return;
			}
			try {
				await Astro[directive]!(
					async () => {
						const rendererUrl = this.getAttribute('renderer-url');
						const [componentModule, { default: hydrator }] = await Promise.all([
							import(this.getAttribute('component-url')!),
							rendererUrl ? import(rendererUrl) : () => () => {},
						]);
						const componentExport = this.getAttribute('component-export') || 'default';
						if (!componentExport.includes('.')) {
							this.Component = componentModule[componentExport];
						} else {
							this.Component = componentModule;
							for (const part of componentExport.split('.')) {
								this.Component = this.Component[part];
							}
						}
						this.hydrator = hydrator;
						return this.hydrate;
					},
					opts,
					this,
				);
			} catch (e) {