start() — astro Function Reference

Architecture documentation for the start() function in astro-island.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine called by 1

Entity Profile

CoreAstro→ RenderingEngine→ start() — astro Function Reference

Dependency Diagram

graph TD
  bdd8d9f0_00a8_70f4_1362_3c68fe814fe5["start()"]
  02e19bde_95de_08cd_0c93_61e01849e86b["AstroIsland"]
  bdd8d9f0_00a8_70f4_1362_3c68fe814fe5 -->|defined in| 02e19bde_95de_08cd_0c93_61e01849e86b
  63d8a9e0_75ca_ac42_b069_6928c8be4c0c["childrenConnectedCallback()"]
  63d8a9e0_75ca_ac42_b069_6928c8be4c0c -->|calls| bdd8d9f0_00a8_70f4_1362_3c68fe814fe5
  style bdd8d9f0_00a8_70f4_1362_3c68fe814fe5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/astro-island.ts lines 99–132

		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) {
				console.error(`[astro-island] Error hydrating ${this.getAttribute('component-url')}`, e);
			}
		}