headElements() — astro Function Reference

Architecture documentation for the headElements() function in pipeline.ts from the astro codebase.

Function typescript CoreAstro CoreMiddleware

Entity Profile

CoreAstro→ CoreMiddleware→ headElements() — astro Function Reference

Dependency Diagram

graph TD
  d438c0b2_133e_5c3c_c6e2_2c000fbb64d8["headElements()"]
  1856d10d_49b6_d49e_0f37_cbee2beb3083["NonRunnablePipeline"]
  d438c0b2_133e_5c3c_c6e2_2c000fbb64d8 -->|defined in| 1856d10d_49b6_d49e_0f37_cbee2beb3083
  style d438c0b2_133e_5c3c_c6e2_2c000fbb64d8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/core/app/dev/pipeline.ts lines 51–123

	async headElements(routeData: RouteData): Promise<HeadElements> {
		const { assetsPrefix, base } = this.manifest;
		const routeInfo = this.manifest.routes.find((route) => route.routeData === routeData);
		// may be used in the future for handling rel=modulepreload, rel=icon, rel=manifest etc.
		const links = new Set<never>();
		const scripts = new Set<SSRElement>();
		const styles = createStylesheetElementSet(routeInfo?.styles ?? [], base, assetsPrefix);

		for (const script of routeInfo?.scripts ?? []) {
			if ('stage' in script) {
				if (script.stage === 'head-inline') {
					scripts.add({
						props: {},
						children: script.children,
					});
				}
			} else {
				scripts.add(createModuleScriptElement(script));
			}
		}

		scripts.add({
			props: { type: 'module', src: '/@vite/client' },
			children: '',
		});

		if (this.manifest.devToolbar.enabled) {
			scripts.add({
				props: {
					type: 'module',
					src: '/@id/astro/runtime/client/dev-toolbar/entrypoint.js',
				},
				children: '',
			});

			const additionalMetadata: DevToolbarMetadata['__astro_dev_toolbar__'] = {
				root: this.manifest.rootDir.toString(),
				version: ASTRO_VERSION,
				latestAstroVersion: this.manifest.devToolbar.latestAstroVersion,
				debugInfo: this.manifest.devToolbar.debugInfoOutput ?? '',
				placement: this.manifest.devToolbar.placement,
			};

			// Additional data for the dev overlay
			const children = `window.__astro_dev_toolbar__ = ${JSON.stringify(additionalMetadata)}`;
			scripts.add({ props: {}, children });
		}

		const { devCSSMap } = await import('virtual:astro:dev-css-all');

		const importer = devCSSMap.get(routeData.component);
		let css = new Set<ImportedDevStyle>();
		if (importer) {
			const cssModule = await importer();
			css = cssModule.css;
		} else {
			this.logger.warn(
				'assets',
				`Unable to find CSS for ${routeData.component}. This is likely a bug in Astro.`,
			);
		}

		// Pass framework CSS in as style tags to be appended to the page.
		for (const { id, url: src, content } of css) {
			// Vite handles HMR for styles injected as scripts
			scripts.add({ props: { type: 'module', src }, children: '' });
			// But we still want to inject the styles to avoid FOUC. The style tags
			// should emulate what Vite injects so further HMR works as expected.
			styles.add({ props: { 'data-vite-dev-id': id }, children: content });
		}

		return { scripts, styles, links };
	}