Ensure that maybeRenderHead runs last (#3821)

* Ensure that maybeRenderHead runs last * Adds a changeset * Make work with MDX
withastro · Jul 6, 2022 · c2165c3 · c2165c3
1 parent 5ac0f78
commit c2165c3
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 8 deletions.
diff --git a/.changeset/hip-months-invent.md b/.changeset/hip-months-invent.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix for putting the <head> into its own component
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -707,7 +707,6 @@ export async function renderPage(
 	children: any,
 	streaming: boolean
 ): Promise<Response> {
-	let iterable: AsyncIterable<any>;
 	if (!componentFactory.isAstroComponentFactory) {
 		const pageProps: Record<string, any> = { ...(props ?? {}), 'server:root': true };
 		const output = await renderComponent(
@@ -719,12 +718,17 @@ export async function renderPage(
 		);
 		let html = output.toString();
 		if (!/<!doctype html/i.test(html)) {
-			html = `<!DOCTYPE html>\n${await maybeRenderHead(result)}${html}`;
+			let rest = html;
+			html = `<!DOCTYPE html>`;
+			for await(let chunk of maybeRenderHead(result)) {
+				html += chunk;
+			}
+			html += rest;
 		}
 		return new Response(html, {
 			headers: new Headers([
 				['Content-Type', 'text/html; charset=utf-8'],
-				['Content-Length', `${Buffer.byteLength(html, 'utf-8')}`],
+				['Content-Length', Buffer.byteLength(html, 'utf-8').toString()],
 			]),
 		});
 	}
@@ -769,7 +773,7 @@ export async function renderPage(
 				i++;
 			}
 			const bytes = encoder.encode(body);
-			headers.set('Content-Length', `${bytes.byteLength}`);
+			headers.set('Content-Length', bytes.byteLength.toString());
 		}
 
 		let response = createResponse(body, { ...init, headers });
@@ -789,7 +793,7 @@ const uniqueElements = (item: any, index: number, all: any[]) => {
 };
 
 const alreadyHeadRenderedResults = new WeakSet<SSRResult>();
-export async function renderHead(result: SSRResult): Promise<string> {
+export function renderHead(result: SSRResult): Promise<string> {
 	alreadyHeadRenderedResults.add(result);
 	const styles = Array.from(result.styles)
 		.filter(uniqueElements)
@@ -811,11 +815,11 @@ export async function renderHead(result: SSRResult): Promise<string> {
 // This accomodates the fact that using a <head> is optional in Astro, so this
 // is called before a component's first non-head HTML element. If the head was
 // already injected it is a noop.
-export function maybeRenderHead(result: SSRResult): string | Promise<string> {
+export async function* maybeRenderHead(result: SSRResult): AsyncIterable<string> {
 	if (alreadyHeadRenderedResults.has(result)) {
-		return '';
+		return;
 	}
-	return renderHead(result);
+	yield renderHead(result);
 }
 
 export async function* renderAstroComponent(

diff --git a/packages/astro/test/astro-head.test.js b/packages/astro/test/astro-head.test.js
@@ -0,0 +1,23 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Head in its own component', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/astro-head/',
+			site: 'https://mysite.dev/',
+			base: '/blog',
+		});
+		await fixture.build();
+	});
+
+	it('Styles are appended to the head and not the body', async () => {
+		let html = await fixture.readFile('/head-own-component/index.html');
+		let $ = cheerio.load(html);
+		expect($('link[rel=stylesheet]')).to.have.a.lengthOf(1, 'one stylesheet overall');
+		expect($('head link[rel=stylesheet]')).to.have.a.lengthOf(1, 'stylesheet is in the head');
+	});
+});
diff --git a/packages/astro/test/fixtures/astro-head/src/components/Head.astro b/packages/astro/test/fixtures/astro-head/src/components/Head.astro
@@ -0,0 +1,11 @@
+---
+// Head.astro
+const { title } = Astro.props;
+---
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <title>{title}</title>
+</head>
diff --git a/packages/astro/test/fixtures/astro-head/src/pages/head-own-component.astro b/packages/astro/test/fixtures/astro-head/src/pages/head-own-component.astro
@@ -0,0 +1,16 @@
+---
+// Layout.astro
+import Head from "../components/Head.astro";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<Head title="title"/>
+<body>
+	<h1>Title Here</h1>
+	<style>
+		body {
+			background: green;
+		}
+	</style>
+</body>