ServerIslandComponent Class — astro Architecture

Source Code

packages/astro/src/runtime/server/render/server-islands.ts lines 55–226

export class ServerIslandComponent {
	result: SSRResult;
	props: Record<string | number, any>;
	slots: ComponentSlots;
	displayName: string;
	hostId: string | undefined;
	islandContent: string | undefined;
	componentPath: string | undefined;
	componentExport: string | undefined;
	componentId: string | undefined;
	constructor(
		result: SSRResult,
		props: Record<string | number, any>,
		slots: ComponentSlots,
		displayName: string,
	) {
		this.result = result;
		this.props = props;
		this.slots = slots;
		this.displayName = displayName;
	}

	async init(): Promise<ThinHead> {
		const content = await this.getIslandContent();

		if (this.result.cspDestination) {
			this.result._metadata.extraScriptHashes.push(
				await generateCspDigest(SERVER_ISLAND_REPLACER, this.result.cspAlgorithm),
			);
			const contentDigest = await generateCspDigest(content, this.result.cspAlgorithm);
			this.result._metadata.extraScriptHashes.push(contentDigest);
		}

		return createThinHead();
	}
	async render(destination: RenderDestination) {
		const hostId = await this.getHostId();
		const islandContent = await this.getIslandContent();
		destination.write(createRenderInstruction({ type: 'server-island-runtime' }));
		destination.write('<!--[if astro]>server-island-start<![endif]-->');
		// Render the slots
		for (const name in this.slots) {
			if (name === 'fallback') {
				await renderChild(destination, this.slots.fallback(this.result));
			}
		}
		destination.write(
			`<script type="module" data-astro-rerun data-island-id="${hostId}">${islandContent}</script>`,
		);
	}

	getComponentPath(): string {
		if (this.componentPath) {
			return this.componentPath;
		}
		const componentPath = this.props['server:component-path'];
		if (!componentPath) {
			throw new Error(`Could not find server component path`);
		}
		this.componentPath = componentPath;
		return componentPath;
	}

	getComponentExport(): string {
		if (this.componentExport) {
			return this.componentExport;
		}
		const componentExport = this.props['server:component-export'];
		if (!componentExport) {
			throw new Error(`Could not find server component export`);
		}
		this.componentExport = componentExport;
		return componentExport;
	}

	async getHostId() {
		if (!this.hostId) {
			this.hostId = await crypto.randomUUID();
		}
		return this.hostId;
	}