refactor(markdown): Move astro:assets-specific code out of the main…

… Vite plugin
withastro · Sep 29, 2023 · ec952b4 · ec952b4
1 parent c3572fd
commit ec952b4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 deletions.
diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts
@@ -0,0 +1,34 @@
+export type MarkdownImagePath = { raw: string; resolved: string; safeName: string };
+
+export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: string) {
+	return `
+		import { getImage } from "astro:assets";
+		${imagePaths
+			.map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`)
+			.join('\n')}
+
+		const images = async function() {
+			return {
+				${imagePaths
+					.map((entry) => `"${entry.raw}": await getImage({src: Astro__${entry.safeName}})`)
+					.join(',\n')}
+				}
+			}
+
+			async function updateImageReferences(html) {
+				return images().then((images) => {
+					return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) =>
+					spreadAttributes({
+						src: images[imagePath].src,
+						...images[imagePath].attributes,
+					})
+					);
+				});
+			}
+
+			// NOTE: This causes a top-level await to appear in the user's code, which can break very easily due to a Rollup
+			// bug and certain adapters not supporting it correctly. See: https://github.com/rollup/rollup/issues/4708
+			// Tread carefully!
+			const html = await updateImageReferences(${JSON.stringify(html)});
+		`;
+}
diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts
@@ -16,6 +16,7 @@ import { isMarkdownFile } from '../core/util.js';
 import { shorthash } from '../runtime/server/shorthash.js';
 import type { PluginMetadata } from '../vite-plugin-astro/types.js';
 import { escapeViteEnvReferences, getFileInfo } from '../vite-plugin-utils/index.js';
+import { getMarkdownCodeForImages, type MarkdownImagePath } from './images.js';
 
 interface AstroPluginOptions {
 	settings: AstroSettings;
@@ -95,7 +96,7 @@ export default function markdown({ settings, logger }: AstroPluginOptions): Plug
 				const { headings, imagePaths: rawImagePaths, frontmatter } = renderResult.metadata;
 
 				// Resolve all the extracted images from the content
-				const imagePaths: { raw: string; resolved: string; safeName: string }[] = [];
+				const imagePaths: MarkdownImagePath[] = [];
 				for (const imagePath of rawImagePaths.values()) {
 					imagePaths.push({
 						raw: imagePath,
@@ -119,34 +120,15 @@ export default function markdown({ settings, logger }: AstroPluginOptions): Plug
 					astroServerRuntimeModulePath
 				)};
 				import { AstroError, AstroErrorData } from ${JSON.stringify(astroErrorModulePath)};
-
 				${layout ? `import Layout from ${JSON.stringify(layout)};` : ''}
-				import { getImage } from "astro:assets";
-				${imagePaths
-					.map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`)
-					.join('\n')}
-
-				const images = async function() {
-					return {
-						${imagePaths
-							.map((entry) => `"${entry.raw}": await getImage({src: Astro__${entry.safeName}})`)
-							.join(',\n')}
-					}
-				}
 
-				async function updateImageReferences(html) {
-					return images().then((images) => {
-						return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) =>
-							spreadAttributes({
-								src: images[imagePath].src,
-								...images[imagePath].attributes,
-							})
-						);
-					});
+				${
+					// Only include the code relevant to `astro:assets` if there's images in the file
+					imagePaths.length > 0
+						? getMarkdownCodeForImages(imagePaths, html)
+						: `const html = ${JSON.stringify(html)};`
 				}
 
-				const html = await updateImageReferences(${JSON.stringify(html)});
-
 				export const frontmatter = ${JSON.stringify(frontmatter)};
 				export const file = ${JSON.stringify(fileId)};
 				export const url = ${JSON.stringify(fileUrl)};