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 <3019731+Princesseuh@users.noreply.github.com>

---------

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

.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

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;
 	}
 

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({

packages/astro/src/content/content-layer.ts

@@ -206,6 +206,7 @@ export class ContentLayer {
 						},
 						collectionWithResolvedSchema,
 						false,
+						!!this.#settings.config.experimental.svg
 					);
 
 					return parsedData;

packages/astro/src/content/runtime-assets.ts

@@ -7,6 +7,7 @@ export function createImage(
 	pluginContext: PluginContext,
 	shouldEmitFile: boolean,
 	entryFilePath: string,
+	experimentalSvgEnabled: boolean,
 ) {
 	return () => {
 		return z.string().transform(async (imagePath, ctx) => {
@@ -14,6 +15,7 @@ export function createImage(
 			const metadata = (await emitESMImage(
 				resolvedFilePath,
 				pluginContext.meta.watchMode,
+				experimentalSvgEnabled,
 				shouldEmitFile ? pluginContext.emitFile : undefined,
 			)) as OmitBrand<ImageMetadata>;
 

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;

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;

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,
 					);