michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Defer head injection until renderPage (#3408)

Browse source 
* fix(#3195, #3197): only perform head injection for renderPage

* chore: add changeset
This commit is contained in:
Nate Moore 2022-05-19 15:21:48 -05:00 committed by GitHub
parent 4dfd341928
commit b26d48d275
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fluffy-wolves-sneeze.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix hydration when rendering `<head>` elements inside of a component

2
packages/astro/src/runtime/server/index.ts
View file

@ -544,7 +544,7 @@ export async function renderToString(
} }
let template = await renderAstroComponent(Component); let template = await renderAstroComponent(Component);
return replaceHeadInjection(result, template); return template;
} }
export async function renderPage( export async function renderPage(

21
packages/astro/test/astro-partial-html.test.js
View file

@ -48,3 +48,24 @@ describe('Partial HTML', async () => {
expect(href).to.be.ok; expect(href).to.be.ok;
}); });
}); });
describe('Head Component', async () => {
let fixture;
before(async () => {
fixture = await loadFixture({
root: './fixtures/astro-partial-html/',
});
await fixture.build();
});
it('injects Astro hydration scripts', async () => {
const html = await fixture.readFile('/head/index.html');
const $ = cheerio.load(html);
const hydrationId = $('astro-root').attr('uid');
const script = $('script').html();
expect(script).to.match(new RegExp(hydrationId));
});
});

3
packages/astro/test/fixtures/astro-partial-html/src/components/Head.astro vendored Normal file
View file

@ -0,0 +1,3 @@
<head>
<title>Hello world!</title>
</head>

15
packages/astro/test/fixtures/astro-partial-html/src/pages/head.astro vendored Normal file
View file

@ -0,0 +1,15 @@
---
import Head from '../components/Head.astro';
import Component from '../components/Component.jsx';
---
<html>
<!-- <head> element delegated to component -->
<Head />
<body>
<Component client:load>
<h1>JSX Partial HTML</h1>
</Component>
</body>
</html>