headElements() — astro Function Reference

Source Code

packages/astro/src/vite-plugin-app/pipeline.ts lines 74–157

	async headElements(routeData: RouteData): Promise<HeadElements> {
		const { manifest, runtimeMode, settings } = this;
		const filePath = new URL(`${routeData.component}`, manifest.rootDir);
		const scripts = new Set<SSRElement>();

		// Inject HMR scripts
		if (settings) {
			if (isPage(filePath, settings) && runtimeMode === 'development') {
				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: fileURLToPath(settings.config.root),
						version: ASTRO_VERSION,
						latestAstroVersion: settings.latestAstroVersion,
						// TODO: Currently the debug info is always fetched, which slows things down.
						// We should look into not loading it if the dev toolbar is disabled. And when
						// enabled, it would nice to request the debug info through import.meta.hot
						// when the button is click to defer execution as much as possible
						debugInfo: await this.getDebugInfo(),
						placement: settings.config.devToolbar.placement,
					};

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

			// TODO: We should allow adding generic HTML elements to the head, not just scripts
			for (const script of settings.scripts) {
				if (script.stage === 'head-inline') {
					scripts.add({
						props: {},
						children: script.content,
					});
				} else if (script.stage === 'page' && isPage(filePath, settings)) {
					scripts.add({
						props: { type: 'module', src: `/@id/${PAGE_SCRIPT_ID}` },
						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.
		const links = new Set<SSRElement>();

		const styles = new Set<SSRElement>();
		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 });
		}