michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor(markdown): Move astro:assets-specific code out of the main Vite plugin (#8704)

Browse source
This commit is contained in:
Erika 2023-09-29 23:14:09 +02:00 committed by GitHub
parent 148b5b8769
commit db83237dd3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/astro/src/vite-plugin-markdown/images.ts Normal file
View file

@ -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)});
`;
}

32
packages/astro/src/vite-plugin-markdown/index.ts
View file

@ -16,6 +16,7 @@ import { isMarkdownFile } from '../core/util.js';
import { shorthash } from '../runtime/server/shorthash.js'; import { shorthash } from '../runtime/server/shorthash.js';
import type { PluginMetadata } from '../vite-plugin-astro/types.js'; import type { PluginMetadata } from '../vite-plugin-astro/types.js';
import { escapeViteEnvReferences, getFileInfo } from '../vite-plugin-utils/index.js'; import { escapeViteEnvReferences, getFileInfo } from '../vite-plugin-utils/index.js';
import { getMarkdownCodeForImages, type MarkdownImagePath } from './images.js';
interface AstroPluginOptions { interface AstroPluginOptions {
settings: AstroSettings; settings: AstroSettings;
@ -95,7 +96,7 @@ export default function markdown({ settings, logger }: AstroPluginOptions): Plug
const { headings, imagePaths: rawImagePaths, frontmatter } = renderResult.metadata; const { headings, imagePaths: rawImagePaths, frontmatter } = renderResult.metadata;
// Resolve all the extracted images from the content // 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()) { for (const imagePath of rawImagePaths.values()) {
imagePaths.push({ imagePaths.push({
raw: imagePath, raw: imagePath,
@ -119,34 +120,15 @@ export default function markdown({ settings, logger }: AstroPluginOptions): Plug
astroServerRuntimeModulePath astroServerRuntimeModulePath
)}; )};
import { AstroError, AstroErrorData } from ${JSON.stringify(astroErrorModulePath)}; import { AstroError, AstroErrorData } from ${JSON.stringify(astroErrorModulePath)};
${layout ? `import Layout from ${JSON.stringify(layout)};` : ''} ${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 { // Only include the code relevant to `astro:assets` if there's images in the file
${imagePaths imagePaths.length > 0
.map((entry) => `"${entry.raw}": await getImage({src: Astro__${entry.safeName}})`) ? getMarkdownCodeForImages(imagePaths, html)
.join(',\n')} : `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 frontmatter = ${JSON.stringify(frontmatter)};
export const file = ${JSON.stringify(fileId)}; export const file = ${JSON.stringify(fileId)};
export const url = ${JSON.stringify(fileUrl)}; export const url = ${JSON.stringify(fileUrl)};