assets() — astro Function Reference

Architecture documentation for the assets() function in vite-plugin-assets.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 1

Entity Profile

CoreAstro→ RenderingEngine→ assets() — astro Function Reference

Dependency Diagram

graph TD
  30294376_3f32_df23_ceab_b49cc1f67409["assets()"]
  7b37cc1c_ed73_6e29_d070_6510e98b551d["vite-plugin-assets.ts"]
  30294376_3f32_df23_ceab_b49cc1f67409 -->|defined in| 7b37cc1c_ed73_6e29_d070_6510e98b551d
  4e4e0263_5c5a_c0ed_6422_495426645954["addStaticImageFactory()"]
  30294376_3f32_df23_ceab_b49cc1f67409 -->|calls| 4e4e0263_5c5a_c0ed_6422_495426645954
  style 30294376_3f32_df23_ceab_b49cc1f67409 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/assets/vite-plugin-assets.ts lines 118–321

export default function assets({ fs, settings, sync, logger }: Options): vite.Plugin[] {
	let resolvedConfig: vite.ResolvedConfig;
	let shouldEmitFile = false;
	let isBuild = false;

	globalThis.astroAsset = {
		referencedImages: new Set(),
	};

	const imageComponentPrefix = settings.config.image.responsiveStyles ? 'Responsive' : '';
	return [
		// Expose the components and different utilities from `astro:assets`
		{
			name: 'astro:assets',
			config(_, env) {
				isBuild = env.command === 'build';
			},
			resolveId: {
				filter: {
					id: new RegExp(`^(${VIRTUAL_SERVICE_ID}|${VIRTUAL_MODULE_ID})$`),
				},
				async handler(id) {
					if (id === VIRTUAL_SERVICE_ID) {
						if (isAstroServerEnvironment(this.environment)) {
							return await this.resolve(settings.config.image.service.entrypoint);
						}
						return await this.resolve('astro/assets/services/noop');
					}
					if (id === VIRTUAL_MODULE_ID) {
						return RESOLVED_VIRTUAL_MODULE_ID;
					}
				},
			},
			load: {
				filter: {
					id: new RegExp(`^(${RESOLVED_VIRTUAL_MODULE_ID})$`),
				},
				handler() {
					return {
						code: `
							import { getConfiguredImageService as _getConfiguredImageService } from "astro/assets";
							export { isLocalService } from "astro/assets";
							import { getImage as getImageInternal } from "astro/assets";
							export { default as Image } from "astro/components/${imageComponentPrefix}Image.astro";
							export { default as Picture } from "astro/components/${imageComponentPrefix}Picture.astro";
							import { inferRemoteSize as inferRemoteSizeInternal } from "astro/assets/utils/inferRemoteSize.js";

							export { default as Font } from "astro/components/Font.astro";
							export * from "${RUNTIME_VIRTUAL_MODULE_ID}";
							
							export const getConfiguredImageService = _getConfiguredImageService;

							export const viteFSConfig = ${JSON.stringify(resolvedConfig.server.fs ?? {})};

							export const safeModulePaths = new Set(${JSON.stringify(
								// @ts-expect-error safeModulePaths is internal to Vite
								Array.from(resolvedConfig.safeModulePaths ?? []),
							)});

							const assetQueryParams = ${
								settings.adapter?.client?.assetQueryParams
									? `new URLSearchParams(${JSON.stringify(
											Array.from(settings.adapter.client.assetQueryParams.entries()),
										)})`
									: 'undefined'
							};
							export const imageConfig = ${JSON.stringify(settings.config.image)};
							Object.defineProperty(imageConfig, 'assetQueryParams', {
								value: assetQueryParams,
								enumerable: false,
								configurable: true,
							});
              export const inferRemoteSize = async (url) => {
                const service = await _getConfiguredImageService()

                return service.getRemoteSize?.(url, imageConfig) ?? inferRemoteSizeInternal(url)
              }
							// This is used by the @astrojs/node integration to locate images.
							// It's unused on other platforms, but on some platforms like Netlify (and presumably also Vercel)
							// new URL("dist/...") is interpreted by the bundler as a signal to include that directory
							// in the Lambda bundle, which would bloat the bundle with images.