fix(svg): conditional opt-in (#12694)

* fix(svg): conditional opt-in * add todo * Update packages/astro/src/assets/utils/node/emitAsset.ts Co-authored-by: Erika <[email protected]> --------- Co-authored-by: Erika <[email protected]>
withastro · Dec 10, 2024 · 495f46b · 495f46b
1 parent 7dc2fca
commit 495f46b
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 3 deletions.
diff --git a/.changeset/fast-adults-lick.md b/.changeset/fast-adults-lick.md
@@ -0,0 +1,6 @@
+---
+'@astrojs/markdoc': patch
+'astro': patch
+---
+
+Fixes a bug where the experimental feature `experimental.svg` was incorrectly used when generating ESM images
diff --git a/packages/astro/src/assets/utils/node/emitAsset.ts b/packages/astro/src/assets/utils/node/emitAsset.ts
@@ -15,6 +15,7 @@ export async function emitESMImage(
 	_watchMode: boolean,
 	// FIX: in Astro 6, this function should not be passed in dev mode at all.
 	// Or rethink the API so that a function that throws isn't passed through.
+	experimentalSvgEnabled: boolean,
 	fileEmitter?: FileEmitter,
 ): Promise<ImageMetadataWithContents | undefined> {
 	if (!id) {
@@ -44,7 +45,8 @@ export async function emitESMImage(
 	});
 
 	// Attach file data for SVGs
-	if (fileMetadata.format === 'svg') {
+	// TODO: this is a workaround to prevent a memory leak, and it must be fixed before we remove the experimental flag, see
+	if (fileMetadata.format === 'svg' && experimentalSvgEnabled === true) {
 		emittedImage.contents = fileData;
 	}
 

diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts
@@ -205,7 +205,12 @@ export default function assets({ settings }: { settings: AstroSettings }): vite.
 					}
 
 					const emitFile = shouldEmitFile ? this.emitFile : undefined;
-					const imageMetadata = await emitESMImage(id, this.meta.watchMode, emitFile);
+					const imageMetadata = await emitESMImage(
+						id,
+						this.meta.watchMode,
+						!!settings.config.experimental.svg,
+						emitFile,
+					);
 
 					if (!imageMetadata) {
 						throw new AstroError({

diff --git a/packages/astro/src/content/content-layer.ts b/packages/astro/src/content/content-layer.ts
@@ -206,6 +206,7 @@ export class ContentLayer {
 						},
 						collectionWithResolvedSchema,
 						false,
+						!!this.#settings.config.experimental.svg
 					);
 
 					return parsedData;

diff --git a/packages/astro/src/content/runtime-assets.ts b/packages/astro/src/content/runtime-assets.ts
@@ -7,13 +7,15 @@ export function createImage(
 	pluginContext: PluginContext,
 	shouldEmitFile: boolean,
 	entryFilePath: string,
+	experimentalSvgEnabled: boolean,
 ) {
 	return () => {
 		return z.string().transform(async (imagePath, ctx) => {
 			const resolvedFilePath = (await pluginContext.resolve(imagePath, entryFilePath))?.id;
 			const metadata = (await emitESMImage(
 				resolvedFilePath,
 				pluginContext.meta.watchMode,
+				experimentalSvgEnabled,
 				shouldEmitFile ? pluginContext.emitFile : undefined,
 			)) as OmitBrand<ImageMetadata>;
 

diff --git a/packages/astro/src/content/utils.ts b/packages/astro/src/content/utils.ts
@@ -164,6 +164,7 @@ export async function getEntryDataAndImages<
 	},
 	collectionConfig: CollectionConfig,
 	shouldEmitFile: boolean,
+	experimentalSvgEnabled: boolean,
 	pluginContext?: PluginContext,
 ): Promise<{ data: TOutputData; imageImports: Array<string> }> {
 	let data: TOutputData;
@@ -182,7 +183,12 @@ export async function getEntryDataAndImages<
 	if (typeof schema === 'function') {
 		if (pluginContext) {
 			schema = schema({
-				image: createImage(pluginContext, shouldEmitFile, entry._internal.filePath),
+				image: createImage(
+					pluginContext,
+					shouldEmitFile,
+					entry._internal.filePath,
+					experimentalSvgEnabled,
+				),
 			});
 		} else if (collectionConfig.type === CONTENT_LAYER_TYPE) {
 			schema = schema({
@@ -257,12 +263,14 @@ export async function getEntryData(
 	},
 	collectionConfig: CollectionConfig,
 	shouldEmitFile: boolean,
+	experimentalSvgEnabled: boolean,
 	pluginContext?: PluginContext,
 ) {
 	const { data } = await getEntryDataAndImages(
 		entry,
 		collectionConfig,
 		shouldEmitFile,
+		experimentalSvgEnabled,
 		pluginContext,
 	);
 	return data;

diff --git a/packages/astro/src/content/vite-plugin-content-imports.ts b/packages/astro/src/content/vite-plugin-content-imports.ts
@@ -245,6 +245,7 @@ async function getContentEntryModule(
 				{ id, collection, _internal, unvalidatedData },
 				collectionConfig,
 				params.shouldEmitFile,
+				!!params.config.experimental.svg,
 				pluginContext,
 			)
 		: unvalidatedData;
@@ -280,6 +281,7 @@ async function getDataEntryModule(
 				{ id, collection, _internal, unvalidatedData },
 				collectionConfig,
 				params.shouldEmitFile,
+				!!params.config.experimental.svg,
 				pluginContext,
 			)
 		: unvalidatedData;

diff --git a/packages/integrations/markdoc/src/content-entry-type.ts b/packages/integrations/markdoc/src/content-entry-type.ts
@@ -312,6 +312,7 @@ async function emitOptimizedImages(
 					const src = await emitESMImage(
 						resolved.id,
 						ctx.pluginContext.meta.watchMode,
+						!!ctx.astroConfig.experimental.svg,
 						ctx.pluginContext.emitFile,
 					);
-Original file line number
+Diff line change
@@ Expand Up / @@ -206,6 +206,7 @@ export class ContentLayer { @@
     						},
     						collectionWithResolvedSchema,
     						false,
+    						!!this.#settings.config.experimental.svg
     					);
     					return parsedData;
@@ Expand Down @@