summaryrefslogtreecommitdiff
path: root/packages/integrations/mdx/src/remark-images-to-component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/integrations/mdx/src/remark-images-to-component.ts')
-rw-r--r--packages/integrations/mdx/src/remark-images-to-component.ts12
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`));
};
}