rehypeImageToComponent() — astro Function Reference

Architecture documentation for the rehypeImageToComponent() function in rehype-images-to-component.ts from the astro codebase.

Function typescript CoreAstro RoutingSystem calls 1

Entity Profile

CoreAstro→ RoutingSystem→ rehypeImageToComponent() — astro Function Reference

Dependency Diagram

graph TD
  1ca83ac9_edae_bc8f_d933_95d82dc31af5["rehypeImageToComponent()"]
  315ab74a_5989_663f_988a_f9092ffec496["rehype-images-to-component.ts"]
  1ca83ac9_edae_bc8f_d933_95d82dc31af5 -->|defined in| 315ab74a_5989_663f_988a_f9092ffec496
  96fae009_1947_4b99_49f6_41ff2c0e5601["getImageComponentAttributes()"]
  1ca83ac9_edae_bc8f_d933_95d82dc31af5 -->|calls| 96fae009_1947_4b99_49f6_41ff2c0e5601
  style 1ca83ac9_edae_bc8f_d933_95d82dc31af5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/mdx/src/rehype-images-to-component.ts lines 74–188

export function rehypeImageToComponent() {
	return function (tree: Root, file: VFile) {
		if (!file.data.astro?.localImagePaths?.length && !file.data.astro?.remoteImagePaths?.length)
			return;
		const importsStatements: MdxjsEsm[] = [];
		const importedImages = new Map<string, string>();

		visit(tree, 'element', (node, index, parent) => {
			if (node.tagName !== 'img' || !node.properties.src) return;

			const src = decodeURI(String(node.properties.src));

			const isLocalImage = file.data.astro?.localImagePaths?.includes(src);
			const isRemoteImage = file.data.astro?.remoteImagePaths?.includes(src);

			let element: MdxJsxFlowElementHast;
			if (isLocalImage) {
				let importName = importedImages.get(src);

				if (!importName) {
					importName = `__${importedImages.size}_${src.replace(/\W/g, '_')}__`;

					importsStatements.push({
						type: 'mdxjsEsm',
						value: '',
						data: {
							estree: {
								type: 'Program',
								sourceType: 'module',
								body: [
									{
										attributes: [],
										type: 'ImportDeclaration',
										source: {
											type: 'Literal',
											value: src,
											raw: JSON.stringify(src),
										},
										specifiers: [
											{
												type: 'ImportDefaultSpecifier',
												local: { type: 'Identifier', name: importName },
											},
										],
									},
								],
							},
						},
					});
					importedImages.set(src, importName);
				}

				// Build a component that's equivalent to <Image src={importName} {...attributes} />
				element = {
					name: ASTRO_IMAGE_ELEMENT,
					type: 'mdxJsxFlowElement',
					attributes: [
						...getImageComponentAttributes(node.properties),
						{
							name: 'src',
							type: 'mdxJsxAttribute',
							value: {
								type: 'mdxJsxAttributeValueExpression',
								value: importName,
								data: {
									estree: {
										type: 'Program',
										sourceType: 'module',
										comments: [],
										body: [
											{
												type: 'ExpressionStatement',
												expression: { type: 'Identifier', name: importName },
											},
										],
									},
								},
							},
						},
					],
					children: [],