addAttribute() — astro Function Reference

Architecture documentation for the addAttribute() function in util.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 4 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ addAttribute() — astro Function Reference

Dependency Diagram

graph TD
  f16d0d52_160f_152d_f7fe_a1fd178b948b["addAttribute()"]
  05241a8b_1820_8286_5770_4da18477ecde["util.ts"]
  f16d0d52_160f_152d_f7fe_a1fd178b948b -->|defined in| 05241a8b_1820_8286_5770_4da18477ecde
  e633602f_bff4_51c8_af7e_125333ca7141["internalSpreadAttributes()"]
  e633602f_bff4_51c8_af7e_125333ca7141 -->|calls| f16d0d52_160f_152d_f7fe_a1fd178b948b
  18707fa5_5c92_baf5_b50a_c1f739e143b2["toAttributeString()"]
  f16d0d52_160f_152d_f7fe_a1fd178b948b -->|calls| 18707fa5_5c92_baf5_b50a_c1f739e143b2
  30790445_2aea_3312_59dd_db6be23e86e9["toStyleString()"]
  f16d0d52_160f_152d_f7fe_a1fd178b948b -->|calls| 30790445_2aea_3312_59dd_db6be23e86e9
  f6bbb23c_1c60_095a_0b0e_96634b549f5f["isHttpUrl()"]
  f16d0d52_160f_152d_f7fe_a1fd178b948b -->|calls| f6bbb23c_1c60_095a_0b0e_96634b549f5f
  6a8bccff_747d_4ec9_706f_71a3b71d7341["handleBooleanAttribute()"]
  f16d0d52_160f_152d_f7fe_a1fd178b948b -->|calls| 6a8bccff_747d_4ec9_706f_71a3b71d7341
  style f16d0d52_160f_152d_f7fe_a1fd178b948b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/render/util.ts lines 84–147

export function addAttribute(value: any, key: string, shouldEscape = true, tagName = '') {
	if (value == null) {
		return '';
	}

	// compiler directives cannot be applied dynamically, log a warning and ignore.
	if (STATIC_DIRECTIVES.has(key)) {
		console.warn(`[astro] The "${key}" directive cannot be applied dynamically at runtime. It will not be rendered as an attribute.

Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the dynamic spread syntax (\`{...{ "${key}": value }}\`).`);
		return '';
	}

	// support "class" from an expression passed into an element (#782)
	if (key === 'class:list') {
		const listValue = toAttributeString(clsx(value), shouldEscape);
		if (listValue === '') {
			return '';
		}
		return markHTMLString(` ${key.slice(0, -5)}="${listValue}"`);
	}

	// support object styles for better JSX compat
	if (key === 'style' && !(value instanceof HTMLString)) {
		if (Array.isArray(value) && value.length === 2) {
			return markHTMLString(
				` ${key}="${toAttributeString(`${toStyleString(value[0])};${value[1]}`, shouldEscape)}"`,
			);
		}
		if (typeof value === 'object') {
			return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`);
		}
	}

	// support `className` for better JSX compat
	if (key === 'className') {
		return markHTMLString(` class="${toAttributeString(value, shouldEscape)}"`);
	}

	// Prevents URLs in attributes from being escaped in static builds
	if (typeof value === 'string' && value.includes('&') && isHttpUrl(value)) {
		return markHTMLString(` ${key}="${toAttributeString(value, false)}"`);
	}

	// Boolean values only need the key
	if (htmlBooleanAttributes.test(key)) {
		return handleBooleanAttribute(key, value, shouldEscape, tagName);
	}

	// Other attributes with an empty string value can omit rendering the value
	if (value === '') {
		return markHTMLString(` ${key}`);
	}

	// We cannot add it to htmlBooleanAttributes because it can be: boolean | "auto" | "manual"
	if (key === 'popover' && typeof value === 'boolean') {
		return handleBooleanAttribute(key, value, shouldEscape, tagName);
	}
	if (key === 'download' && typeof value === 'boolean') {
		return handleBooleanAttribute(key, value, shouldEscape, tagName);
	}

	return markHTMLString(` ${key}="${toAttributeString(value, shouldEscape)}"`);
}