From db83237dd3690051203461b6449e116737aee389 Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Fri, 29 Sep 2023 23:14:09 +0200 Subject: [PATCH] refactor(markdown): Move `astro:assets`-specific code out of the main Vite plugin (#8704) --- .../astro/src/vite-plugin-markdown/images.ts | 34 +++++++++++++++++++ .../astro/src/vite-plugin-markdown/index.ts | 32 ++++------------- 2 files changed, 41 insertions(+), 25 deletions(-) create mode 100644 packages/astro/src/vite-plugin-markdown/images.ts diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts new file mode 100644 index 000000000..959d34ec9 --- /dev/null +++ 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 index 6422f7305..3c8a1af46 100644 --- 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')} - } + ${ + // 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)};` } - async function updateImageReferences(html) { - return images().then((images) => { - return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => - spreadAttributes({ - src: images[imagePath].src, - ...images[imagePath].attributes, - }) - ); - }); - } - - 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)};