createHighlight() — astro Function Reference

Architecture documentation for the createHighlight() function in highlight.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient calls 1

Entity Profile

DevToolbar→ ToolbarClient→ createHighlight() — astro Function Reference

Dependency Diagram

graph TD
  10601dbc_206b_a957_fc0d_fe24ec4b3969["createHighlight()"]
  21d4971d_ea22_2699_3ba8_0047fd0c2969["highlight.ts"]
  10601dbc_206b_a957_fc0d_fe24ec4b3969 -->|defined in| 21d4971d_ea22_2699_3ba8_0047fd0c2969
  bd4cc7f9_e33a_cc94_f9b7_c99ef385e4ef["positionHighlight()"]
  10601dbc_206b_a957_fc0d_fe24ec4b3969 -->|calls| bd4cc7f9_e33a_cc94_f9b7_c99ef385e4ef
  style 10601dbc_206b_a957_fc0d_fe24ec4b3969 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts lines 4–26

export function createHighlight(
	rect: DOMRect,
	icon?: Icon,
	additionalAttributes?: Record<string, string>,
) {
	const highlight = document.createElement('astro-dev-toolbar-highlight');
	if (icon) highlight.icon = icon;

	if (additionalAttributes) {
		for (const [key, value] of Object.entries(additionalAttributes)) {
			highlight.setAttribute(key, value);
		}
	}

	highlight.tabIndex = 0;

	if (rect.width === 0 || rect.height === 0) {
		highlight.style.display = 'none';
	} else {
		positionHighlight(highlight, rect);
	}
	return highlight;
}