feat: add progress to asset generation (#8357)

Author: itsmatteomanf

.changeset/polite-scissors-invent.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+---
+
+Added counter to show progress for assets image generation.
+Fixed small unit of measurement error.

packages/astro/src/assets/build/generate.ts

@@ -155,12 +155,12 @@ export async function generateImage(
 	};
 }
 
-export function getStaticImageList(): Iterable<
-	[string, { path: string; options: ImageTransform }]
+export function getStaticImageList(): Map<
+	string, { path: string; options: ImageTransform }
 > {
 	if (!globalThis?.astroAsset?.staticImages) {
-		return [];
+		return new Map();
 	}
 
-	return globalThis.astroAsset.staticImages?.entries();
+	return globalThis.astroAsset.staticImages;
 }

packages/astro/src/core/build/generate.ts

@@ -196,9 +196,12 @@ export async function generatePages(opts: StaticBuildOptions, internals: BuildIn
 		}
 	}
 
-	logger.info(null, `\n${bgGreen(black(` generating optimized images `))}`);
-	for (const imageData of getStaticImageList()) {
-		await generateImage(pipeline, imageData[1].options, imageData[1].path);
+	const staticImageList = getStaticImageList()
+
+	if (staticImageList.size) logger.info(null, `\n${bgGreen(black(` generating optimized images `))}`); let count = 0;
+	for (const imageData of staticImageList.entries()) {
+		count++
+		await generateImage(pipeline, imageData[1].options, imageData[1].path, count, staticImageList.size);
 	}
 
 	delete globalThis?.astroAsset?.addStaticImage;
@@ -211,7 +214,7 @@ export async function generatePages(opts: StaticBuildOptions, internals: BuildIn
 	logger.info(null, dim(`Completed in ${getTimeStat(timer, performance.now())}.\n`));
 }
 
-async function generateImage(pipeline: BuildPipeline, transform: ImageTransform, path: string) {
+async function generateImage(pipeline: BuildPipeline, transform: ImageTransform, path: string, count: number, totalCount: number) {
 	const logger = pipeline.getLogger();
 	let timeStart = performance.now();
 	const generationData = await generateImageInternal(pipeline, transform, path);
@@ -225,8 +228,9 @@ async function generateImage(pipeline: BuildPipeline, transform: ImageTransform,
 	const timeIncrease = `(+${timeChange})`;
 	const statsText = generationData.cached
 		? `(reused cache entry)`
-		: `(before: ${generationData.weight.before}kb, after: ${generationData.weight.after}kb)`;
-	logger.info(null, `  ${green('▶')} ${path} ${dim(statsText)} ${dim(timeIncrease)}`);
+		: `(before: ${generationData.weight.before}kB, after: ${generationData.weight.after}kB)`;
+	const counter = `(${count}/${totalCount})`;
+	logger.info(null, `  ${green('▶')} ${path} ${dim(statsText)} ${dim(timeIncrease)} ${dim(counter)}}`);
 }
 
 async function generatePage(
@@ -390,10 +394,10 @@ function getInvalidRouteSegmentError(
 		...AstroErrorData.InvalidDynamicRoute,
 		message: invalidParam
 			? AstroErrorData.InvalidDynamicRoute.message(
-					route.route,
-					JSON.stringify(invalidParam),
-					JSON.stringify(received)
-			  )
+				route.route,
+				JSON.stringify(invalidParam),
+				JSON.stringify(received)
+			)
 			: `Generated path for ${route.route} is invalid.`,
 		hint,
 	});