getWidths() — astro Function Reference

Architecture documentation for the getWidths() function in layout.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ getWidths() — astro Function Reference

Dependency Diagram

graph TD
  09de41f8_580a_32a5_f2f5_2ede18abe36e["getWidths()"]
  2f6ec35e_f910_f4f1_2246_f872e6b9468b["layout.ts"]
  09de41f8_580a_32a5_f2f5_2ede18abe36e -->|defined in| 2f6ec35e_f910_f4f1_2246_f872e6b9468b
  style 09de41f8_580a_32a5_f2f5_2ede18abe36e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/assets/layout.ts lines 43–88

export const getWidths = ({
	width,
	layout,
	breakpoints = DEFAULT_RESOLUTIONS,
	originalWidth,
}: {
	width?: number;
	layout: ImageLayout;
	breakpoints?: Array<number>;
	originalWidth?: number;
}): Array<number> => {
	const smallerThanOriginal = (w: number) => !originalWidth || w <= originalWidth;

	// For full-width layout we return all breakpoints smaller than the original image width
	if (layout === 'full-width') {
		return breakpoints.filter(smallerThanOriginal);
	}
	// For other layouts we need a width to generate breakpoints. If no width is provided, we return an empty array
	if (!width) {
		return [];
	}
	const doubleWidth = width * 2;
	// For fixed layout we want to return the 1x and 2x widths. We only do this if the original image is large enough to do this though.
	const maxSize = originalWidth ? Math.min(doubleWidth, originalWidth) : doubleWidth;
	if (layout === 'fixed') {
		return originalWidth && width > originalWidth ? [originalWidth] : [width, maxSize];
	}

	// For constrained layout we want to return all breakpoints smaller than 2x requested width.
	if (layout === 'constrained') {
		return (
			[
				// Always include the image at 1x and 2x the specified width
				width,
				doubleWidth,
				...breakpoints,
			]
				// Filter out any resolutions that are larger than the double-resolution image or source image
				.filter((w) => w <= maxSize)
				// Sort the resolutions in ascending order
				.sort((a, b) => a - b)
		);
	}

	return [];
};