Simplified head injection

[matthewp]

Changes

• This simplifies conditional head injection, fixing a lot of bugs related to CSS being out of place when using multiple levels of layouts with slots.
• Instead of rendering the head to a string in place, calls to renderHead and maybeRenderHead now instead yield out an instruction. At the page level this instruction is checked and if the head hasn't been rendered it will be.
• This means that head rendering is handled at the page level. This is the same mechanism used to inject the client directives and that seems to have worked well.
• Fixes Duplicate css and js bundle tags when mdx is rendered in sub-layout #5715
• Fixes Duplicate stylesheet injection in production build #5834

Testing

• Unit tests added for multiple levels of layouts, including layouts that do not include explicit head tags.

Docs

N/A, bug fix

[changeset-bot]

🦋 Changeset detected

Latest commit: 03f66b5

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[matthewp]

Removing this function because it causes head rendering to be async. We weren't utilizing this capability anyways. When/if we allow components to inject head content we'll likely want to bring this back, through a small refactor.

[matthewp]

this is a rendering instruction, like what we have for client directives, which tells the page renderer to inject head at the point (if it hasn't already been injected).

[bholmesdev]

Change makes sense to me! All for sticking with existing patterns. Should get ahead of future issues

[robknight]

There seems to be a bug in the MDX integration test here:

 it('only injects contents into head', async () => {
                        const html = await fixture.readFile('/indexThree/index.html');
                        const { document } = parseHTML(html);

                        const links = document.querySelectorAll('link[rel=stylesheet]');
                        expect(links).to.have.a.lengthOf(1);

                        const scripts = document.querySelectorAll('script[type=module]');
                        expect(scripts).to.have.a.lengthOf(1);
                });

The selector is not scoped to the head tag, so it will match on any link or script tag anywhere in the document.

As per #6057, it seems that this update causes scripts and styles to be inserted into the body, both within MDX documents and components that include layouts, causing a flash of unstyled content. I've also seen this in my own site.