generateHydrateScript() — astro Function Reference

Architecture documentation for the generateHydrateScript() function in hydration.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ generateHydrateScript() — astro Function Reference

Dependency Diagram

graph TD
  20e250e9_7b63_8490_c1a6_e215732e3843["generateHydrateScript()"]
  5c9b16ff_599b_b1b0_fd4a_a24ff528fd5b["hydration.ts"]
  20e250e9_7b63_8490_c1a6_e215732e3843 -->|defined in| 5c9b16ff_599b_b1b0_fd4a_a24ff528fd5b
  style 20e250e9_7b63_8490_c1a6_e215732e3843 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/hydration.ts lines 126–187

export async function generateHydrateScript(
	scriptOptions: HydrateScriptOptions,
	metadata: Required<AstroComponentMetadata>,
): Promise<SSRElement> {
	const { renderer, result, astroId, props, attrs } = scriptOptions;
	const { hydrate, componentUrl, componentExport } = metadata;

	if (!componentExport.value) {
		throw new AstroError({
			...AstroErrorData.NoMatchingImport,
			message: AstroErrorData.NoMatchingImport.message(metadata.displayName),
		});
	}

	const island: SSRElement = {
		children: '',
		props: {
			// This is for HMR, probably can avoid it in prod
			uid: astroId,
		},
	};

	// Attach renderer-provided attributes
	if (attrs) {
		for (const [key, value] of Object.entries(attrs)) {
			island.props[key] = escapeHTML(value);
		}
	}

	// Add component url
	island.props['component-url'] = await result.resolve(decodeURI(componentUrl));

	// Add renderer url
	if (renderer.clientEntrypoint) {
		island.props['component-export'] = componentExport.value;
		island.props['renderer-url'] = await result.resolve(
			decodeURI(renderer.clientEntrypoint.toString()),
		);
		island.props['props'] = escapeHTML(serializeProps(props, metadata));
	}

	island.props['ssr'] = '';
	island.props['client'] = hydrate;
	let beforeHydrationUrl = await result.resolve('astro:scripts/before-hydration.js');
	if (beforeHydrationUrl.length) {
		island.props['before-hydration-url'] = beforeHydrationUrl;
	}
	island.props['opts'] = escapeHTML(
		JSON.stringify({
			name: metadata.displayName,
			value: metadata.hydrateArgs || '',
		}),
	);

	transitionDirectivesToCopyOnIsland.forEach((name) => {
		if (typeof props[name] !== 'undefined') {
			island.props[name] = props[name];
		}
	});

	return island;
}