default.init() — astro Function Reference

Architecture documentation for the default.init() function in xray.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient

Entity Profile

DevToolbar→ ToolbarClient→ default.init() — astro Function Reference

Dependency Diagram

graph TD
  9206e7dd_51a0_00f5_d7df_681a68f7a422["default.init()"]
  46c759e3_5d77_eae5_955d_7af4606860d2["xray.ts"]
  9206e7dd_51a0_00f5_d7df_681a68f7a422 -->|defined in| 46c759e3_5d77_eae5_955d_7af4606860d2
  style 9206e7dd_51a0_00f5_d7df_681a68f7a422 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts lines 26–182

	init(canvas, eventTarget) {
		let islandsOverlays: { highlightElement: DevToolbarHighlight; island: HTMLElement }[] = [];

		addIslandsOverlay();

		document.addEventListener('astro:after-swap', addIslandsOverlay);
		document.addEventListener('astro:page-load', refreshIslandsOverlayPositions);

		closeOnOutsideClick(eventTarget);
		synchronizePlacementOnUpdate(eventTarget, canvas);

		function addIslandsOverlay() {
			islandsOverlays.forEach(({ highlightElement }) => {
				highlightElement.remove();
			});
			islandsOverlays = [];

			const islands = document.querySelectorAll<HTMLElement>('astro-island');

			if (islands.length === 0) {
				const window = createWindowElement(
					`<style>
						header {
							display: flex;
						}

						h1 {
							display: flex;
							align-items: center;
							gap: 8px;
							font-weight: 600;
							color: #fff;
							margin: 0;
							font-size: 22px;
						}

						astro-dev-toolbar-icon {
							width: 1em;
						   height: 1em;
						   padding: 8px;
							display: block;
							background: #5f9ea0;
							border-radius: 9999px;
						}
					</style>
					<header>
						<h1><astro-dev-toolbar-icon icon="lightbulb"></astro-dev-toolbar-icon>No islands detected.</h1>
					</header>
					<p>
						It looks like there are no interactive component islands on this page. Did you forget to add a client directive to your interactive UI component?
					</p>
					`,
				);

				canvas.append(window);
				return;
			}

			islands.forEach((island) => {
				const computedStyle = window.getComputedStyle(island);
				const islandElement = (island.children[0] as HTMLElement) || island;

				// If the island is hidden, don't show an overlay on it
				// TODO: For `client:only` islands, it might not have finished loading yet, so we should wait for that
				if (islandElement.offsetParent === null || computedStyle.display === 'none') {
					return;
				}

				const rect = islandElement.getBoundingClientRect();
				const highlight = createHighlight(rect);
				const tooltip = buildIslandTooltip(island);

				// Set the highlight/tooltip as being fixed position the highlighted element
				// is fixed. We do this so that we don't mistakenly take scroll position
				// into account when setting the tooltip/highlight positioning.
				//
				// We only do this once due to how expensive computed styles are to calculate,
				// and are unlikely to change. If that turns out to be wrong, reconsider this.
				const { isFixed } = getElementsPositionInDocument(islandElement);
				if (isFixed) {
					tooltip.style.position = highlight.style.position = 'fixed';