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

Fix head propagation for MDX components (#7838)

Browse source
This commit is contained in:
Bjorn Lu 2023-07-28 18:00:53 +08:00 committed by GitHub
parent 365701f491
commit e50f646758
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 15 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/friendly-bulldogs-flash.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix head propagation for MDX components

2
packages/astro/src/@types/astro.ts
View file

@ -2033,8 +2033,6 @@ export interface SSRMetadata {
headInTree: boolean;
extraHead: string[];
propagators: Map<AstroComponentFactory, AstroComponentInstance>;
// Used to key track of unique content; links and script tags
contentKeys: Set<string>;
}
/* Preview server stuff */

6
packages/astro/src/content/runtime.ts
View file

@ -7,7 +7,7 @@ import {
createHeadAndContent,
renderComponent,
renderTemplate,
renderUniqueScriptElement,
renderScriptElement,
renderUniqueStylesheet,
unescapeHTML,
type AstroComponentFactory,
@ -303,9 +303,7 @@ async function render({
.join('');
}
if (Array.isArray(collectedScripts)) {
scripts = collectedScripts
.map((script: any) => renderUniqueScriptElement(result, script))
.join('');
scripts = collectedScripts.map((script: any) => renderScriptElement(script)).join('');
}
let props = baseProps;

1
packages/astro/src/core/render/result.ts
View file

@ -258,7 +258,6 @@ export function createResult(args: CreateResultArgs): SSRResult {
headInTree: false,
extraHead: [],
propagators: new Map(),
contentKeys: new Set(),
},
};

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

@ -27,7 +27,6 @@ export {
renderSlotToString,
renderTemplate,
renderToString,
renderUniqueScriptElement,
renderUniqueStylesheet,
voidElementNames,
} from './render/index.js';

10
packages/astro/src/runtime/server/render/astro/instance.ts
View file

@ -37,6 +37,7 @@ export class AstroComponentInstance {
}
async init(result: SSRResult) {
if (this.returnValue !== undefined) return this.returnValue;
this.returnValue = this.factory(result, this.props, this.slotValues);
return this.returnValue;
}
@ -72,7 +73,7 @@ function validateComponentProps(props: any, displayName: string) {
}
}
export async function createAstroComponentInstance(
export function createAstroComponentInstance(
result: SSRResult,
displayName: string,
factory: AstroComponentFactory,
@ -81,16 +82,9 @@ export async function createAstroComponentInstance(
) {
validateComponentProps(props, displayName);
const instance = new AstroComponentInstance(result, props, slots, factory);
if (isAPropagatingComponent(result, factory) && !result._metadata.propagators.has(factory)) {
result._metadata.propagators.set(factory, instance);
// Call component instances that might have head content to be propagated up.
const returnValue = await instance.init(result);
if (isHeadAndContent(returnValue)) {
result._metadata.extraHead.push(returnValue.head);
}
}
return instance;
}

5
packages/astro/src/runtime/server/render/astro/render.ts
View file

@ -71,12 +71,12 @@ export async function renderToReadableStream(
// If the Astro component returns a Response on init, return that response
if (templateResult instanceof Response) return templateResult;
let renderedFirstPageChunk = false;
if (isPage) {
await bufferHeadContent(result);
}
let renderedFirstPageChunk = false;
return new ReadableStream({
start(controller) {
const destination: RenderDestination = {
@ -158,6 +158,7 @@ async function bufferHeadContent(result: SSRResult) {
if (done) {
break;
}
// Call component instances that might have head content to be propagated up.
const returnValue = await value.init(result);
if (isHeadAndContent(returnValue)) {
result._metadata.extraHead.push(returnValue.head);

2
packages/astro/src/runtime/server/render/component.ts
View file

@ -420,7 +420,7 @@ async function renderAstroComponent(
props: Record<string | number, any>,
slots: any = {}
): Promise<RenderInstance> {
const instance = await createAstroComponentInstance(result, displayName, Component, props, slots);
const instance = createAstroComponentInstance(result, displayName, Component, props, slots);
// Eagerly render the component so they are rendered in parallel
const chunks: RenderDestinationChunk[] = [];

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

@ -6,6 +6,6 @@ export { renderHTMLElement } from './dom.js';
export { maybeRenderHead, renderHead } from './head.js';
export { renderPage } from './page.js';
export { renderSlot, renderSlotToString, type ComponentSlots } from './slot.js';
export { renderScriptElement, renderUniqueScriptElement, renderUniqueStylesheet } from './tags.js';
export { renderScriptElement, renderUniqueStylesheet } from './tags.js';
export type { RenderInstruction } from './types';
export { addAttribute, defineScriptVars, voidElementNames } from './util.js';

33
packages/astro/src/runtime/server/render/tags.ts
View file

@ -9,45 +9,14 @@ export function renderScriptElement({ props, children }: SSRElement) {
});
}
export function renderUniqueScriptElement(result: SSRResult, { props, children }: SSRElement) {
if (
Array.from(result.scripts).some((s) => {
if (s.props.type === props.type && s.props.src === props.src) {
return true;
}
if (!props.src && s.children === children) return true;
})
)
return '';
const key = `script-${props.type}-${props.src}-${children}`;
if (checkOrAddContentKey(result, key)) return '';
return renderScriptElement({ props, children });
}
export function renderUniqueStylesheet(result: SSRResult, sheet: StylesheetAsset) {
if (sheet.type === 'external') {
if (Array.from(result.styles).some((s) => s.props.href === sheet.src)) return '';
const key = 'link-external-' + sheet.src;
if (checkOrAddContentKey(result, key)) return '';
return renderElement('link', {
props: {
rel: 'stylesheet',
href: sheet.src,
},
children: '',
});
return renderElement('link', { props: { rel: 'stylesheet', href: sheet.src }, children: '' });
}
if (sheet.type === 'inline') {
if (Array.from(result.styles).some((s) => s.children.includes(sheet.content))) return '';
const key = `link-inline-` + sheet.content;
if (checkOrAddContentKey(result, key)) return '';
return renderElement('style', { props: { type: 'text/css' }, children: sheet.content });
}
}
function checkOrAddContentKey(result: SSRResult, key: string): boolean {
if (result._metadata.contentKeys.has(key)) return true;
result._metadata.contentKeys.add(key);
return false;
}