From 9bec6bc410f324a41c67e5d185fa86f78d7625f2 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 2 Feb 2023 14:21:32 -0500 Subject: [PATCH] Prevent eager rendering of head content in multi-level MDX layout (#6107) * Prevent eager rendering of head content in multi-level MDX layout * Adding a changeset * Remove old comment * Keep track of slot position as well --- .changeset/lucky-hounds-rhyme.md | 5 +++++ packages/astro/src/@types/astro.ts | 4 ++++ packages/astro/src/core/render/result.ts | 1 + packages/astro/src/runtime/server/jsx.ts | 2 ++ .../astro/src/runtime/server/render/astro/factory.ts | 2 ++ packages/astro/src/runtime/server/render/head.ts | 10 +++++++++- packages/astro/src/runtime/server/render/slot.ts | 6 +++++- packages/astro/src/runtime/server/render/util.ts | 6 ++++++ packages/integrations/mdx/test/css-head-mdx.test.js | 4 ++-- 9 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 .changeset/lucky-hounds-rhyme.md diff --git a/.changeset/lucky-hounds-rhyme.md b/.changeset/lucky-hounds-rhyme.md new file mode 100644 index 000000000000..51b1c012b13f --- /dev/null +++ b/.changeset/lucky-hounds-rhyme.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes head contents being placed in body in MDX components diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 7fab1556fe90..ea3e5cd3cf71 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -1449,6 +1449,10 @@ export interface SSRResult { ): AstroGlobal; resolve: (s: string) => Promise; response: ResponseInit; + // Bits 1 = astro, 2 = jsx, 4 = slot + // As rendering occurs these bits are manipulated to determine where content + // is within a slot. This is used for head injection. + scope: number; _metadata: SSRMetadata; } diff --git a/packages/astro/src/core/render/result.ts b/packages/astro/src/core/render/result.ts index 06c5e0698343..3a6b0bf964d6 100644 --- a/packages/astro/src/core/render/result.ts +++ b/packages/astro/src/core/render/result.ts @@ -156,6 +156,7 @@ export function createResult(args: CreateResultArgs): SSRResult { propagation: args.propagation ?? new Map(), propagators: new Map(), extraHead: [], + scope: 0, cookies, /** This function returns the `Astro` faux-global */ createAstro( diff --git a/packages/astro/src/runtime/server/jsx.ts b/packages/astro/src/runtime/server/jsx.ts index 651ccc945bc1..365345a56623 100644 --- a/packages/astro/src/runtime/server/jsx.ts +++ b/packages/astro/src/runtime/server/jsx.ts @@ -11,6 +11,7 @@ import { voidElementNames, } from './index.js'; import { HTMLParts } from './render/common.js'; +import { ScopeFlags } from './render/util.js'; import type { ComponentIterable } from './render/component'; const ClientOnlyPlaceholder = 'astro-client-only'; @@ -94,6 +95,7 @@ Did you forget to import the component or is it possible there is a typo?`); props[key] = value; } } + result.scope |= ScopeFlags.JSX; return markHTMLString(await renderToString(result, vnode.type as any, props, slots)); } case !vnode.type && (vnode.type as any) !== 0: diff --git a/packages/astro/src/runtime/server/render/astro/factory.ts b/packages/astro/src/runtime/server/render/astro/factory.ts index 0d8ffb7876a2..a1e7d0611343 100644 --- a/packages/astro/src/runtime/server/render/astro/factory.ts +++ b/packages/astro/src/runtime/server/render/astro/factory.ts @@ -5,6 +5,7 @@ import type { RenderTemplateResult } from './render-template'; import { HTMLParts } from '../common.js'; import { isHeadAndContent } from './head-and-content.js'; import { renderAstroTemplateResult } from './render-template.js'; +import { ScopeFlags } from '../util.js'; export type AstroFactoryReturnValue = RenderTemplateResult | Response | HeadAndContent; @@ -27,6 +28,7 @@ export async function renderToString( props: any, children: any ): Promise { + result.scope |= ScopeFlags.Astro; const factoryResult = await componentFactory(result, props, children); if (factoryResult instanceof Response) { diff --git a/packages/astro/src/runtime/server/render/head.ts b/packages/astro/src/runtime/server/render/head.ts index ade6a7355c48..72be58623401 100644 --- a/packages/astro/src/runtime/server/render/head.ts +++ b/packages/astro/src/runtime/server/render/head.ts @@ -1,7 +1,7 @@ import type { SSRResult } from '../../../@types/astro'; import { markHTMLString } from '../escape.js'; -import { renderElement } from './util.js'; +import { renderElement, ScopeFlags } from './util.js'; // Filter out duplicate elements in our set const uniqueElements = (item: any, index: number, all: any[]) => { @@ -52,6 +52,14 @@ export function* maybeRenderHead(result: SSRResult) { return; } + // Don't render the head inside of a JSX component that's inside of an Astro component + // as the Astro component will be the one to render the head. + switch(result.scope) { + case ScopeFlags.JSX | ScopeFlags.Slot | ScopeFlags.Astro: { + return; + } + } + // This is an instruction informing the page rendering that head might need rendering. // This allows the page to deduplicate head injections. yield { type: 'head', result } as const; diff --git a/packages/astro/src/runtime/server/render/slot.ts b/packages/astro/src/runtime/server/render/slot.ts index cd9225be42dc..1e2e946c3515 100644 --- a/packages/astro/src/runtime/server/render/slot.ts +++ b/packages/astro/src/runtime/server/render/slot.ts @@ -3,6 +3,7 @@ import type { RenderInstruction } from './types.js'; import { HTMLString, markHTMLString } from '../escape.js'; import { renderChild } from './any.js'; +import { ScopeFlags } from './util.js'; const slotString = Symbol.for('astro:slot-string'); @@ -20,8 +21,9 @@ export function isSlotString(str: string): str is any { return !!(str as any)[slotString]; } -export async function renderSlot(_result: any, slotted: string, fallback?: any): Promise { +export async function renderSlot(result: SSRResult, slotted: string, fallback?: any): Promise { if (slotted) { + result.scope |= ScopeFlags.Slot; let iterator = renderChild(slotted); let content = ''; let instructions: null | RenderInstruction[] = null; @@ -35,6 +37,8 @@ export async function renderSlot(_result: any, slotted: string, fallback?: any): content += chunk; } } + // Remove the flag since we are now outside of the scope. + result.scope &= ~ScopeFlags.Slot; return markHTMLString(new SlotString(content, instructions)); } return fallback; diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts index a95ef16f8722..3986f9d50aa7 100644 --- a/packages/astro/src/runtime/server/render/util.ts +++ b/packages/astro/src/runtime/server/render/util.ts @@ -128,3 +128,9 @@ export function renderElement( } return `<${name}${internalSpreadAttributes(props, shouldEscape)}>${children}`; } + +export const ScopeFlags = { + Astro: 1 << 0, + JSX: 1 << 1, + Slot: 1 << 2 +}; diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js index a6492c3ba17b..2b1dcdfe7bcd 100644 --- a/packages/integrations/mdx/test/css-head-mdx.test.js +++ b/packages/integrations/mdx/test/css-head-mdx.test.js @@ -23,10 +23,10 @@ describe('Head injection w/ MDX', () => { const html = await fixture.readFile('/indexThree/index.html'); const { document } = parseHTML(html); - const links = document.querySelectorAll('link[rel=stylesheet]'); + const links = document.querySelectorAll('head link[rel=stylesheet]'); expect(links).to.have.a.lengthOf(1); - const scripts = document.querySelectorAll('script[type=module]'); + const scripts = document.querySelectorAll('head script[type=module]'); expect(scripts).to.have.a.lengthOf(1); }); });