Add additional scoping for head buffering

.changeset/pretty-bananas-own.md

@@ -0,0 +1,10 @@
+---
+'astro': patch
+---
+
+Fix MDX related head placement bugs
+
+This fixes a variety of head content placement bugs (such as page `<link>`) related to MDX, especially when used in content collections. Issues fixed:
+
+- Head content being placed in the body instead of the head.
+- Head content missing when rendering an MDX component from within a nested Astro component.

packages/astro/package.json

@@ -99,7 +99,7 @@
  "test:e2e:match": "playwright test -g"
  },
  "dependencies": {
- "@astrojs/compiler": "^1.0.1",
+ "@astrojs/compiler": "^1.1.0",
  "@astrojs/language-server": "^0.28.3",
  "@astrojs/markdown-remark": "^2.0.1",
  "@astrojs/telemetry": "^2.0.0",

packages/astro/src/content/internal.ts

@@ -4,6 +4,7 @@ import { prependForwardSlash } from '../core/path.js';
 import {
  createComponent,
  createHeadAndContent,
+ createScopedResult,
  renderComponent,
  renderScriptElement,
  renderStyleElement,
@@ -169,7 +170,7 @@ async function render({
 
  return createHeadAndContent(
  unescapeHTML(styles + links + scripts) as any,
- renderTemplate`${renderComponent(result, 'Content', mod.Content, props, slots)}`
+ renderTemplate`${renderComponent(createScopedResult(result), 'Content', mod.Content, props, slots)}`
  );
  },
  propagation: 'self',

packages/astro/src/core/app/common.ts

@@ -14,10 +14,12 @@ export function deserializeManifest(serializedManifest: SerializedSSRManifest):
  }
 
  const assets = new Set<string>(serializedManifest.assets);
+ const propagation = new Map(serializedManifest.propagation);
 
  return {
  ...serializedManifest,
  assets,
+ propagation,
  routes,
  };
 }

packages/astro/src/core/app/index.ts

@@ -193,6 +193,7 @@ export class App {
  request,
  origin: url.origin,
  pathname,
+ propagation: this.#manifest.propagation,
  scripts,
  links,
  route: routeData,

packages/astro/src/core/app/types.ts

@@ -1,9 +1,11 @@
 import type { MarkdownRenderingOptions } from '@astrojs/markdown-remark';
 import type {
  ComponentInstance,
+ PropagationHint,
  RouteData,
  SerializedRouteData,
  SSRLoadedRenderer,
+ SSRResult,
 } from '../../@types/astro';
 
 export type ComponentPath = string;
@@ -34,11 +36,13 @@ export interface SSRManifest {
  renderers: SSRLoadedRenderer[];
  entryModules: Record<string, string>;
  assets: Set<string>;
+ propagation: SSRResult['propagation'];
 }
 
-export type SerializedSSRManifest = Omit<SSRManifest, 'routes' | 'assets'> & {
+export type SerializedSSRManifest = Omit<SSRManifest, 'routes' | 'assets' | 'propagation'> & {
  routes: SerializedRouteInfo[];
  assets: string[];
+ propagation: readonly [string, PropagationHint][];
 };
 
 export type AdapterCreateExports<T = any> = (

packages/astro/src/core/build/generate.ts

@@ -376,6 +376,7 @@ async function generatePath(
  origin,
  pathname,
  request: createRequest({ url, headers: new Headers(), logging, ssr }),
+ propagation: internals.propagation,
  scripts,
  links,
  route: pageData.route,

packages/astro/src/core/build/internal.ts

@@ -4,6 +4,7 @@ import type { PageBuildData, ViteID } from './types';
 import { PageOptions } from '../../vite-plugin-astro/types';
 import { prependForwardSlash, removeFileExtension } from '../path.js';
 import { viteID } from '../util.js';
+import { SSRResult } from '../../@types/astro';
 
 export interface BuildInternals {
  /**
@@ -66,6 +67,7 @@ export interface BuildInternals {
  staticFiles: Set<string>;
  // The SSR entry chunk. Kept in internals to share between ssr/client build steps
  ssrEntryChunk?: OutputChunk;
+ propagation: SSRResult['propagation'];
 }
 
 /**
@@ -95,6 +97,7 @@ export function createBuildInternals(): BuildInternals {
  discoveredClientOnlyComponents: new Set(),
  discoveredScripts: new Set(),
  staticFiles: new Set(),
+ propagation: new Map(),
  };
 }
 

packages/astro/src/core/build/plugins/index.ts

@@ -8,13 +8,15 @@ import { pluginInternals } from './plugin-internals.js';
 import { pluginPages } from './plugin-pages.js';
 import { pluginPrerender } from './plugin-prerender.js';
 import { pluginSSR } from './plugin-ssr.js';
+import { astroHeadPropagationBuildPlugin } from '../../../vite-plugin-head-propagation/index.js';
 
 export function registerAllPlugins({ internals, options, register }: AstroBuildPluginContainer) {
  register(pluginAliasResolve(internals));
  register(pluginAnalyzer(internals));
  register(pluginInternals(internals));
  register(pluginPages(options, internals));
  register(pluginCSS(options, internals));
+ register(astroHeadPropagationBuildPlugin(options, internals));
  register(pluginPrerender(options, internals));
  register(astroConfigBuildPlugin(options, internals));
  register(pluginHoistedScripts(options, internals));

packages/astro/src/core/build/plugins/plugin-ssr.ts

@@ -211,6 +211,7 @@ function buildManifest(
  contentDir: getContentPaths(settings.config).contentDir,
  },
  pageMap: null as any,
+ propagation: Array.from(internals.propagation),
  renderers: [],
  entryModules,
  assets: staticFiles.map((s) => settings.config.base + s),

packages/astro/src/core/compile/compile.ts

@@ -42,6 +42,7 @@ export async function compile({
  sourcemap: 'both',
  internalURL: 'astro/server/index.js',
  astroGlobalArgs: JSON.stringify(astroConfig.site),
+ resultScopedSlot: true,
  preprocessStyle: createStylePreprocessor({
  filename,
  viteConfig,

packages/astro/src/core/render/result.ts

@@ -9,7 +9,7 @@ import type {
  SSRLoadedRenderer,
  SSRResult,
 } from '../../@types/astro';
-import { renderSlot, stringifyChunk } from '../../runtime/server/index.js';
+import { renderSlot, stringifyChunk, ScopeFlags, createScopedResult, ComponentSlots } from '../../runtime/server/index.js';
 import { renderJSX } from '../../runtime/server/jsx.js';
 import { AstroCookies } from '../cookies/index.js';
 import { AstroError, AstroErrorData } from '../errors/index.js';
@@ -55,10 +55,10 @@ function getFunctionExpression(slot: any) {
 
 class Slots {
  #result: SSRResult;
- #slots: Record<string, any> | null;
+ #slots: ComponentSlots | null;
  #loggingOpts: LogOptions;
 
- constructor(result: SSRResult, slots: Record<string, any> | null, logging: LogOptions) {
+ constructor(result: SSRResult, slots: ComponentSlots | null, logging: LogOptions) {
  this.#result = result;
  this.#slots = slots;
  this.#loggingOpts = logging;
@@ -89,6 +89,7 @@ class Slots {
  public async render(name: string, args: any[] = []) {
  if (!this.#slots || !this.has(name)) return;
 
+ const scoped = createScopedResult(this.#result, ScopeFlags.RenderSlot);
  if (!Array.isArray(args)) {
  warn(
  this.#loggingOpts,
@@ -97,26 +98,26 @@ class Slots {
  );
  } else if (args.length > 0) {
  const slotValue = this.#slots[name];
- const component = typeof slotValue === 'function' ? await slotValue() : await slotValue;
+ const component = typeof slotValue === 'function' ? await slotValue(scoped) : await slotValue;
 
  // Astro
  const expression = getFunctionExpression(component);
  if (expression) {
- const slot = expression(...args);
- return await renderSlot(this.#result, slot).then((res) =>
+ const slot = () => expression(...args);
+ return await renderSlot(scoped, slot).then((res) =>
  res != null ? String(res) : res
  );
  }
  // JSX
  if (typeof component === 'function') {
- return await renderJSX(this.#result, component(...args)).then((res) =>
+ return await renderJSX(scoped, (component as any)(...args)).then((res) =>
  res != null ? String(res) : res
  );
  }
  }
 
- const content = await renderSlot(this.#result, this.#slots[name]);
- const outHTML = stringifyChunk(this.#result, content);
+ const content = await renderSlot(scoped, this.#slots[name]);
+ const outHTML = stringifyChunk(scoped, content);
 
  return outHTML;
  }

packages/astro/src/runtime/server/index.ts

@@ -5,10 +5,13 @@ export { escapeHTML, HTMLBytes, HTMLString, markHTMLString, unescapeHTML } from
 export { renderJSX } from './jsx.js';
 export {
  addAttribute,
+ addScopeFlag,
  createHeadAndContent,
+ createScopedResult,
  defineScriptVars,
  Fragment,
  maybeRenderHead,
+ removeScopeFlag,
  renderAstroTemplateResult as renderAstroComponent,
  renderComponent,
  renderComponentToIterable,
@@ -23,15 +26,15 @@ export {
  renderTemplate,
  renderToString,
  renderUniqueStylesheet,
+ ScopeFlags,
  stringifyChunk,
  voidElementNames,
 } from './render/index.js';
 export type {
  AstroComponentFactory,
  AstroComponentInstance,
- AstroComponentSlots,
- AstroComponentSlotsWithValues,
  RenderInstruction,
+ ComponentSlots
 } from './render/index.js';
 
 import { markHTMLString } from './escape.js';

packages/astro/src/runtime/server/jsx.ts

@@ -12,7 +12,7 @@ import {
 } from './index.js';
 import { HTMLParts } from './render/common.js';
 import type { ComponentIterable } from './render/component';
-import { ScopeFlags } from './render/util.js';
+import { createScopedResult, ScopeFlags } from './render/scope.js';
 
 const ClientOnlyPlaceholder = 'astro-client-only';
 
@@ -95,8 +95,9 @@ 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));
+ const scoped = createScopedResult(result, ScopeFlags.JSX);
+ const html = markHTMLString(await renderToString(scoped, vnode.type as any, props, slots));
+ return html;
  }
  case !vnode.type && (vnode.type as any) !== 0:
  return '';

packages/astro/src/runtime/server/render/astro/factory.ts

@@ -3,7 +3,7 @@ import type { HeadAndContent } from './head-and-content';
 import type { RenderTemplateResult } from './render-template';
 
 import { HTMLParts } from '../common.js';
-import { ScopeFlags } from '../util.js';
+import { addScopeFlag, createScopedResult, ScopeFlags } from '../scope.js';
 import { isHeadAndContent } from './head-and-content.js';
 import { renderAstroTemplateResult } from './render-template.js';
 
@@ -28,8 +28,8 @@ export async function renderToString(
  props: any,
  children: any
 ): Promise<string> {
- result.scope |= ScopeFlags.Astro;
- const factoryResult = await componentFactory(result, props, children);
+ const scoped = createScopedResult(result, ScopeFlags.Astro);
+ const factoryResult = await componentFactory(scoped, props, children);
 
  if (factoryResult instanceof Response) {
  const response = factoryResult;

packages/astro/src/runtime/server/render/astro/index.ts

@@ -1,7 +1,7 @@
 export type { AstroComponentFactory } from './factory';
 export { isAstroComponentFactory, renderToString } from './factory.js';
 export { createHeadAndContent, isHeadAndContent } from './head-and-content.js';
-export type { AstroComponentInstance, ComponentSlots, ComponentSlotsWithValues } from './instance';
+export type { AstroComponentInstance } from './instance';
 export { createAstroComponentInstance, isAstroComponentInstance } from './instance.js';
 export {
  isRenderTemplateResult,

packages/astro/src/runtime/server/render/astro/instance.ts

@@ -1,17 +1,15 @@
 import type { SSRResult } from '../../../../@types/astro';
 import type { AstroComponentFactory, AstroFactoryReturnValue } from './factory.js';
-import type { renderTemplate } from './render-template.js';
+import type { ComponentSlots } from '../slot.js';
 
 import { HydrationDirectiveProps } from '../../hydration.js';
 import { isPromise } from '../../util.js';
 import { renderChild } from '../any.js';
 import { isAPropagatingComponent } from './factory.js';
 import { isHeadAndContent } from './head-and-content.js';
+import { createScopedResult, ScopeFlags } from '../scope.js';
 
 type ComponentProps = Record<string | number, any>;
-type ComponentSlotValue = () => ReturnType<typeof renderTemplate>;
-export type ComponentSlots = Record<string, ComponentSlotValue>;
-export type ComponentSlotsWithValues = Record<string, ReturnType<ComponentSlotValue>>;
 
 const astroComponentInstanceSym = Symbol.for('astro.componentInstance');
 
@@ -20,7 +18,7 @@ export class AstroComponentInstance {
 
  private readonly result: SSRResult;
  private readonly props: ComponentProps;
- private readonly slotValues: ComponentSlotsWithValues;
+ private readonly slotValues: ComponentSlots;
  private readonly factory: AstroComponentFactory;
  private returnValue: ReturnType<AstroComponentFactory> | undefined;
  constructor(
@@ -33,19 +31,21 @@ export class AstroComponentInstance {
  this.props = props;
  this.factory = factory;
  this.slotValues = {};
+ const scoped = createScopedResult(result, ScopeFlags.Slot);
  for (const name in slots) {
- this.slotValues[name] = slots[name]();
+ const value = slots[name](scoped);
+ this.slotValues[name] = () => value;
  }
  }
 
- async init() {
- this.returnValue = this.factory(this.result, this.props, this.slotValues);
+ async init(result: SSRResult) {
+ this.returnValue = this.factory(result, this.props, this.slotValues);
  return this.returnValue;
  }
 
  async *render() {
  if (this.returnValue === undefined) {
- await this.init();
+ await this.init(this.result);
  }
 
  let value: AstroFactoryReturnValue | undefined = this.returnValue;

packages/astro/src/runtime/server/render/common.ts

@@ -10,6 +10,7 @@ import {
 } from '../scripts.js';
 import { renderAllHeadContent } from './head.js';
 import { isSlotString, type SlotString } from './slot.js';
+import { ScopeFlags } from './scope.js';
 
 export const Fragment = Symbol.for('astro:fragment');
 export const Renderer = Symbol.for('astro:renderer');
@@ -48,6 +49,30 @@ export function stringifyChunk(result: SSRResult, chunk: string | SlotString | R
  }
  return renderAllHeadContent(result);
  }
+ case 'maybe-head': {
+ if (result._metadata.hasRenderedHead) {
+ return '';
+ }
+
+ const scope = instruction.scope;
+ switch (scope) {
+ // JSX with an Astro slot
+ case ScopeFlags.JSX | ScopeFlags.Slot | ScopeFlags.Astro:
+ case ScopeFlags.JSX | ScopeFlags.Astro | ScopeFlags.HeadBuffer:
+ case ScopeFlags.JSX | ScopeFlags.Slot | ScopeFlags.Astro | ScopeFlags.HeadBuffer: {
+ return '';
+ }
+
+ // Astro.slots.render('default') should never render head content.
+ case ScopeFlags.RenderSlot | ScopeFlags.Astro:
+ case ScopeFlags.RenderSlot | ScopeFlags.Astro | ScopeFlags.JSX:
+ case ScopeFlags.RenderSlot | ScopeFlags.Astro | ScopeFlags.JSX | ScopeFlags.HeadBuffer: {
+ return '';
+ }
+ }
+
+ return renderAllHeadContent(result);
+ }
  }
  } else {
  if (isSlotString(chunk as string)) {