[MDX] Support `img` component prop for optimized images (#8468)

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

1 files changed, 9 insertions, 3 deletions

diff --git a/packages/integrations/mdx/src/remark-images-to-component.ts b/packages/integrations/mdx/src/remark-images-to-component.ts
index bb9657f42..40d414b5c 100644
--- a/packages/integrations/mdx/src/remark-images-to-component.ts
+++ b/packages/integrations/mdx/src/remark-images-to-component.ts
@@ -4,6 +4,10 @@ import type { MdxJsxFlowElement, MdxjsEsm } from 'mdast-util-mdx';
 import { visit } from 'unist-util-visit';
 import { jsToTreeNode } from './utils.js';
 
+export const ASTRO_IMAGE_ELEMENT = 'astro-image';
+export const ASTRO_IMAGE_IMPORT = '__AstroImage__';
+export const USES_ASTRO_IMAGE_FLAG = '__usesAstroImage';
+
 export function remarkImageToComponent() {
 	return function (tree: any, file: MarkdownVFile) {
 		if (!file.data.imagePaths) return;
@@ -48,7 +52,7 @@ export function remarkImageToComponent() {
 
 				// Build a component that's equivalent to <Image src={importName} alt={node.alt} title={node.title} />
 				const componentElement: MdxJsxFlowElement = {
-					name: '__AstroImage__',
+					name: ASTRO_IMAGE_ELEMENT,
 					type: 'mdxJsxFlowElement',
 					attributes: [
 						{
@@ -92,7 +96,9 @@ export function remarkImageToComponent() {
 		// Add all the import statements to the top of the file for the images
 		tree.children.unshift(...importsStatements);
 
-		// Add an import statement for the Astro Image component, we rename it to avoid conflicts
-		tree.children.unshift(jsToTreeNode(`import { Image as __AstroImage__ } from "astro:assets";`));
+		tree.children.unshift(jsToTreeNode(`import { Image as ${ASTRO_IMAGE_IMPORT} } from "astro:assets";`));
+		// Export `__usesAstroImage` to pick up `astro:assets` usage in the module graph.
+		// @see the '@astrojs/mdx-postprocess' plugin
+		tree.children.push(jsToTreeNode(`export const ${USES_ASTRO_IMAGE_FLAG} = true`));
 	};
 }