diff options
| author |  Nate Moore <natemoo-re@users.noreply.github.com>
| 2022-05-19 15:21:48 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-05-19 15:21:48 -0500 |
| commit | b26d48d275630a0da38edcf2b6832720dc96636f (patch) | |
| tree | 8a267e5ab056d9efdc66ac5c2a4774372b28901a | |
| parent | 4dfd34192815c3b5ea8fb1eae56615f65bc20d45 (diff) | |
| download | astro-b26d48d275630a0da38edcf2b6832720dc96636f.tar.gz astro-b26d48d275630a0da38edcf2b6832720dc96636f.tar.zst astro-b26d48d275630a0da38edcf2b6832720dc96636f.zip | |
Defer head injection until `renderPage` (#3408)
* fix(#3195, #3197): only perform head injection for renderPage
* chore: add changeset
5 files changed, 45 insertions, 1 deletions
diff --git a/.changeset/fluffy-wolves-sneeze.md b/.changeset/fluffy-wolves-sneeze.md new file mode 100644 index 000000000..87efc45de --- /dev/null +++ b/.changeset/fluffy-wolves-sneeze.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix hydration when rendering `<head>` elements inside of a component diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts index 0d468a9d3..6cf520563 100644 --- a/packages/astro/src/runtime/server/index.ts +++ b/packages/astro/src/runtime/server/index.ts @@ -544,7 +544,7 @@ export async function renderToString( } let template = await renderAstroComponent(Component); - return replaceHeadInjection(result, template); + return template; } export async function renderPage( diff --git a/packages/astro/test/astro-partial-html.test.js b/packages/astro/test/astro-partial-html.test.js index 15fc5ee36..f47857dea 100644 --- a/packages/astro/test/astro-partial-html.test.js +++ b/packages/astro/test/astro-partial-html.test.js @@ -48,3 +48,24 @@ describe('Partial HTML', async () => { 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)); + }); +}); diff --git a/packages/astro/test/fixtures/astro-partial-html/src/components/Head.astro b/packages/astro/test/fixtures/astro-partial-html/src/components/Head.astro new file mode 100644 index 000000000..a77dd1dd8 --- /dev/null +++ b/packages/astro/test/fixtures/astro-partial-html/src/components/Head.astro @@ -0,0 +1,3 @@ +<head> + <title>Hello world!</title> +</head> diff --git a/packages/astro/test/fixtures/astro-partial-html/src/pages/head.astro b/packages/astro/test/fixtures/astro-partial-html/src/pages/head.astro new file mode 100644 index 000000000..635b09699 --- /dev/null +++ b/packages/astro/test/fixtures/astro-partial-html/src/pages/head.astro @@ -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> + |