diff options
| -rw-r--r-- | packages/astro/src/vite-plugin-markdown/images.ts | 34 | ||||
| -rw-r--r-- | packages/astro/src/vite-plugin-markdown/index.ts | 32 |
2 files changed, 41 insertions, 25 deletions
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')} - } - } - 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)}; |