From aeb7e1ac11ebf87847ed2fac89072aa2b4ac2aae Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 7 Jan 2025 17:07:33 +0000 Subject: [PATCH] fix(mdx): don't import image component when no images are used (#12921) * fix(mdx): don't import image component when no images are used * Fix test * Fix test --- .changeset/old-clouds-act.md | 5 +++++ packages/astro/test/content-collections-render.test.js | 2 +- .../astro/test/fixtures/ssr-api-route/src/pages/fail.js | 2 +- packages/astro/test/ssr-api-route.test.js | 2 +- .../astro/test/units/dev/collections-renderentry.test.js | 8 ++++---- .../integrations/mdx/src/rehype-images-to-component.ts | 5 ++--- packages/integrations/mdx/test/css-head-mdx.test.js | 6 +++--- packages/integrations/mdx/test/mdx-math.test.js | 4 ++-- 8 files changed, 19 insertions(+), 15 deletions(-) create mode 100644 .changeset/old-clouds-act.md diff --git a/.changeset/old-clouds-act.md b/.changeset/old-clouds-act.md new file mode 100644 index 000000000000..d8d6e4d8b8d7 --- /dev/null +++ b/.changeset/old-clouds-act.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': patch +--- + +Fixes a bug that caused Image component to be imported on MDX pages that did not include images diff --git a/packages/astro/test/content-collections-render.test.js b/packages/astro/test/content-collections-render.test.js index 972e4313a537..c7875c341854 100644 --- a/packages/astro/test/content-collections-render.test.js +++ b/packages/astro/test/content-collections-render.test.js @@ -202,7 +202,7 @@ describe('Content Collections - render()', () => { assert.equal($('ul li').length, 3); // Includes styles - assert.equal($('head > style').length, 2); + assert.equal($('head > style').length, 1); assert.ok($('head > style').text().includes("font-family: 'Comic Sans MS'")); }); diff --git a/packages/astro/test/fixtures/ssr-api-route/src/pages/fail.js b/packages/astro/test/fixtures/ssr-api-route/src/pages/fail.js index f9852dd93794..529a906a8a68 100644 --- a/packages/astro/test/fixtures/ssr-api-route/src/pages/fail.js +++ b/packages/astro/test/fixtures/ssr-api-route/src/pages/fail.js @@ -1,3 +1,3 @@ export async function GET({ request }) { - return fetch("https://http.im/status/500", request) + return fetch("https://httpstat.us/500", request) } diff --git a/packages/astro/test/ssr-api-route.test.js b/packages/astro/test/ssr-api-route.test.js index 8e9c1bb5efa8..34dffba8ae1a 100644 --- a/packages/astro/test/ssr-api-route.test.js +++ b/packages/astro/test/ssr-api-route.test.js @@ -141,7 +141,7 @@ describe('API routes in SSR', () => { const response = await fixture.fetch('/fail'); const text = await response.text(); assert.equal(response.status, 500); - assert.equal(text, ''); + assert.equal(text, '500 Internal Server Error'); }); it('Has valid api context', async () => { diff --git a/packages/astro/test/units/dev/collections-renderentry.test.js b/packages/astro/test/units/dev/collections-renderentry.test.js index c30c471b880b..298c433b8b16 100644 --- a/packages/astro/test/units/dev/collections-renderentry.test.js +++ b/packages/astro/test/units/dev/collections-renderentry.test.js @@ -101,7 +101,7 @@ describe('Content Collections - render()', () => { assert.equal($('ul li').length, 3); // Rendered the styles - assert.equal($('style').length, 2); + assert.equal($('style').length, 1); }, ); }); @@ -158,7 +158,7 @@ describe('Content Collections - render()', () => { assert.equal($('ul li').length, 3); // Rendered the styles - assert.equal($('style').length, 2); + assert.equal($('style').length, 1); }, ); }); @@ -225,7 +225,7 @@ describe('Content Collections - render()', () => { assert.equal($('ul li').length, 3); // Rendered the styles - assert.equal($('style').length, 2); + assert.equal($('style').length, 1); }, ); }); @@ -291,7 +291,7 @@ describe('Content Collections - render()', () => { assert.equal($('ul li').length, 3); // Rendered the styles - assert.equal($('style').length, 2); + assert.equal($('style').length, 1); }, ); }); diff --git a/packages/integrations/mdx/src/rehype-images-to-component.ts b/packages/integrations/mdx/src/rehype-images-to-component.ts index da2f25ee560e..8e8c9f3ae928 100644 --- a/packages/integrations/mdx/src/rehype-images-to-component.ts +++ b/packages/integrations/mdx/src/rehype-images-to-component.ts @@ -73,13 +73,12 @@ function getImageComponentAttributes(props: Properties): MdxJsxAttribute[] { export function rehypeImageToComponent() { return function (tree: Root, file: VFile) { - if (!file.data.astro?.imagePaths) return; - + if (!file.data.astro?.imagePaths?.length) return; const importsStatements: MdxjsEsm[] = []; const importedImages = new Map(); visit(tree, 'element', (node, index, parent) => { - if (!file.data.astro?.imagePaths || node.tagName !== 'img' || !node.properties.src) return; + if (!file.data.astro?.imagePaths?.length || node.tagName !== 'img' || !node.properties.src) return; const src = decodeURI(String(node.properties.src)); diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js index d55e2f52ac4e..3123b22cea71 100644 --- a/packages/integrations/mdx/test/css-head-mdx.test.js +++ b/packages/integrations/mdx/test/css-head-mdx.test.js @@ -28,7 +28,7 @@ describe('Head injection w/ MDX', () => { const { document } = parseHTML(html); const links = document.querySelectorAll('head link[rel=stylesheet]'); - assert.equal(links.length, 2); + assert.equal(links.length, 1); const scripts = document.querySelectorAll('script[type=module]'); assert.equal(scripts.length, 1); @@ -67,7 +67,7 @@ describe('Head injection w/ MDX', () => { const $ = cheerio.load(html); const headLinks = $('head link[rel=stylesheet]'); - assert.equal(headLinks.length, 2); + assert.equal(headLinks.length, 1); const bodyLinks = $('body link[rel=stylesheet]'); assert.equal(bodyLinks.length, 0); @@ -92,7 +92,7 @@ describe('Head injection w/ MDX', () => { const $ = cheerio.load(html); const headLinks = $('head link[rel=stylesheet]'); - assert.equal(headLinks.length, 2); + assert.equal(headLinks.length, 1); const bodyLinks = $('body link[rel=stylesheet]'); assert.equal(bodyLinks.length, 0); diff --git a/packages/integrations/mdx/test/mdx-math.test.js b/packages/integrations/mdx/test/mdx-math.test.js index a68c5cbe745c..ff54a1042765 100644 --- a/packages/integrations/mdx/test/mdx-math.test.js +++ b/packages/integrations/mdx/test/mdx-math.test.js @@ -28,7 +28,7 @@ describe('MDX math', () => { const mjxContainer = document.querySelector('mjx-container[jax="SVG"]'); assert.notEqual(mjxContainer, null); - const mjxStyle = document.querySelectorAll('style')[1].innerHTML; + const mjxStyle = document.querySelectorAll('style')[0].innerHTML; assert.equal( mjxStyle.includes('mjx-container[jax="SVG"]'), true, @@ -62,7 +62,7 @@ describe('MDX math', () => { const mjxContainer = document.querySelector('mjx-container[jax="CHTML"]'); assert.notEqual(mjxContainer, null); - const mjxStyle = document.querySelectorAll('style')[1].innerHTML; + const mjxStyle = document.querySelectorAll('style')[0].innerHTML; assert.equal( mjxStyle.includes('mjx-container[jax="CHTML"]'), true,