From 53cb41e30ea5768bf33d9f6be608fb57d31b7b9e Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Wed, 18 Sep 2024 15:15:51 +0100 Subject: [PATCH] fix: correctly handle head propagation in content layer deferred rendering (#12014) * chore: run MDX tests against content layer * Handle head propagation in deferred rendering * Add changeset * Update test --- .changeset/beige-points-search.md | 5 +++++ packages/astro/src/content/runtime.ts | 13 ++++++------- .../content/vite-plugin-content-virtual-mod.ts | 8 ++++---- .../integrations/mdx/test/css-head-mdx.test.js | 1 + .../css-head-mdx/src/components/UsingMdx.astro | 6 +++--- .../css-head-mdx/src/content/config.ts | 18 ++++++++++++++++++ .../src/{content => data}/blog/_styles.css | 0 .../src/{content => data}/blog/using-mdx.mdx | 0 .../src/{content => data}/posts/test.mdx | 0 .../posts/using-component.mdx | 0 .../css-head-mdx/src/pages/posts/[post].astro | 8 ++++---- 11 files changed, 41 insertions(+), 18 deletions(-) create mode 100644 .changeset/beige-points-search.md create mode 100644 packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts rename packages/integrations/mdx/test/fixtures/css-head-mdx/src/{content => data}/blog/_styles.css (100%) rename packages/integrations/mdx/test/fixtures/css-head-mdx/src/{content => data}/blog/using-mdx.mdx (100%) rename packages/integrations/mdx/test/fixtures/css-head-mdx/src/{content => data}/posts/test.mdx (100%) rename packages/integrations/mdx/test/fixtures/css-head-mdx/src/{content => data}/posts/using-component.mdx (100%) diff --git a/.changeset/beige-points-search.md b/.changeset/beige-points-search.md new file mode 100644 index 000000000000..ed79099720e9 --- /dev/null +++ b/.changeset/beige-points-search.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes an issue where component styles were not correctly included in rendered MDX diff --git a/packages/astro/src/content/runtime.ts b/packages/astro/src/content/runtime.ts index 439d7e11e9cc..e446b3c93632 100644 --- a/packages/astro/src/content/runtime.ts +++ b/packages/astro/src/content/runtime.ts @@ -445,13 +445,12 @@ export async function renderEntry( try { // @ts-expect-error virtual module const { default: contentModules } = await import('astro:content-module-imports'); - const module = contentModules.get(entry.filePath); - const deferredMod = await module(); - return { - Content: deferredMod.Content, - headings: deferredMod.getHeadings?.() ?? [], - remarkPluginFrontmatter: deferredMod.frontmatter ?? {}, - }; + const renderEntryImport = contentModules.get(entry.filePath); + return render({ + collection: '', + id: entry.id, + renderEntryImport, + }); } catch (e) { // eslint-disable-next-line console.error(e); diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts index 6ffa37a4e1ec..d1a24004e4dd 100644 --- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts +++ b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts @@ -82,12 +82,12 @@ export function astroContentVirtualModPlugin({ const [, query] = id.split('?'); const params = new URLSearchParams(query); const fileName = params.get('fileName'); - let importerPath = undefined; + let importPath = undefined; if (fileName && URL.canParse(fileName, settings.config.root.toString())) { - importerPath = fileURLToPath(new URL(fileName, settings.config.root)); + importPath = fileURLToPath(new URL(fileName, settings.config.root)) } - if (importerPath) { - return await this.resolve(importerPath); + if (importPath) { + return await this.resolve(`${importPath}?${CONTENT_RENDER_FLAG}`); } } diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js index 083348015c54..6e31d972d2de 100644 --- a/packages/integrations/mdx/test/css-head-mdx.test.js +++ b/packages/integrations/mdx/test/css-head-mdx.test.js @@ -15,6 +15,7 @@ describe('Head injection w/ MDX', () => { integrations: [mdx()], // test suite was authored when inlineStylesheets defaulted to never build: { inlineStylesheets: 'never' }, + experimental: { contentLayer: true } }); }); diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro index 1804388b0524..3ef9d76390a2 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro @@ -1,8 +1,8 @@ --- -import { getEntryBySlug } from 'astro:content'; +import { getEntry, render } from 'astro:content'; -const launchWeek = await getEntryBySlug('blog', 'using-mdx'); -const { Content } = await launchWeek.render(); +const launchWeek = await getEntry('blog', 'using-mdx'); +const { Content } = await render(launchWeek); --- diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts new file mode 100644 index 000000000000..2c8944d51092 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts @@ -0,0 +1,18 @@ +import { defineCollection } from "astro:content"; +import { glob } from "astro/loaders" + +const posts = defineCollection({ + loader: glob({ + pattern: "*.mdx", + base: "src/data/posts", + }) +}); + +const blog = defineCollection({ + loader: glob({ + pattern: "*.mdx", + base: "src/data/blog", + }) +}); + +export const collections = { posts, blog }; diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css similarity index 100% rename from packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css rename to packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx similarity index 100% rename from packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx rename to packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx similarity index 100% rename from packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx rename to packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx similarity index 100% rename from packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx rename to packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro index 5afb5be92216..13a9e56dbf3f 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro @@ -1,17 +1,17 @@ --- -import { getCollection } from 'astro:content'; +import { getCollection, render } from 'astro:content'; import SmallCaps from '../../components/SmallCaps.astro'; import Layout from '../../layouts/ContentLayout.astro'; export async function getStaticPaths() { const entries = await getCollection('posts'); return entries.map(entry => { - return {params: { post: entry.slug }, props: { entry }, - }}); + return { params: { post: entry.id }, props: { entry }}; + }); } const { entry } = Astro.props; -const { Content } = await entry.render(); +const { Content } = await render(entry); ---