prepareForClientOnlyComponents() — astro Function Reference

Architecture documentation for the prepareForClientOnlyComponents() function in router.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine called by 1

Entity Profile

CoreAstro→ RenderingEngine→ prepareForClientOnlyComponents() — astro Function Reference

Dependency Diagram

graph TD
  11d91b21_1089_a190_f404_3fb15118fd0f["prepareForClientOnlyComponents()"]
  2b5c33e2_176e_e839_f05f_7f10493f4f74["router.ts"]
  11d91b21_1089_a190_f404_3fb15118fd0f -->|defined in| 2b5c33e2_176e_e839_f05f_7f10493f4f74
  6b23b6bb_d4a4_83cb_3896_2e31c0316793["transition()"]
  6b23b6bb_d4a4_83cb_3896_2e31c0316793 -->|calls| 11d91b21_1089_a190_f404_3fb15118fd0f
  style 11d91b21_1089_a190_f404_3fb15118fd0f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/transitions/router.ts lines 680–733

async function prepareForClientOnlyComponents(
	newDocument: Document,
	toLocation: URL,
	signal: AbortSignal,
) {
	// Any client:only component on the next page?
	if (newDocument.body.querySelector(`astro-island[client='only']`)) {
		// Load the next page with an empty module loader cache
		const nextPage = document.createElement('iframe');
		// with srcdoc resolving imports does not work on webkit browsers
		nextPage.src = toLocation.href;
		nextPage.style.display = 'none';
		document.body.append(nextPage);
		// silence the iframe's console
		// @ts-ignore
		nextPage.contentWindow!.console = Object.keys(console).reduce((acc: any, key) => {
			acc[key] = () => {};
			return acc;
		}, {});
		await hydrationDone(nextPage);

		const nextHead = nextPage.contentDocument?.head;
		if (nextHead) {
			// Collect the vite ids of all styles present in the next head
			const viteIds = [...nextHead.querySelectorAll(`style[${VITE_ID}]`)].map((style) =>
				style.getAttribute(VITE_ID),
			);
			// Copy required styles to the new document if they are from hydration.
			viteIds.forEach((id) => {
				const style = nextHead.querySelector(`style[${VITE_ID}="${id}"]`);
				if (style && !newDocument.head.querySelector(`style[${VITE_ID}="${id}"]`)) {
					newDocument.head.appendChild(style.cloneNode(true));
				}
			});
		}

		// return a promise that resolves when all astro-islands are hydrated
		async function hydrationDone(loadingPage: HTMLIFrameElement) {
			if (!signal.aborted) {
				await new Promise((r) =>
					loadingPage.contentWindow?.addEventListener('load', r, { once: true }),
				);
			}
			return new Promise<void>(async (r) => {
				for (let count = 0; count <= 20; ++count) {
					if (signal.aborted) break;
					if (!loadingPage.contentDocument!.body.querySelector('astro-island[ssr]')) break;
					await new Promise((r2) => setTimeout(r2, 50));
				}
				r();
			});
		}
	}
}