refactor: dev overlay to make it easier to work with VT (#8966)

Author: Princesseuh

.changeset/healthy-hornets-kiss.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix Dev Overlay not working properly when view transitions are enabled

packages/astro/src/@types/astro.ts

@@ -21,7 +21,11 @@ import type { TSConfig } from '../core/config/tsconfig.js';
 import type { AstroCookies } from '../core/cookies/index.js';
 import type { ResponseWithEncoding } from '../core/endpoint/index.js';
 import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger/core.js';
+import type { AstroDevOverlay, DevOverlayCanvas } from '../runtime/client/dev-overlay/overlay.js';
+import type { DevOverlayHighlight } from '../runtime/client/dev-overlay/ui-library/highlight.js';
 import type { Icon } from '../runtime/client/dev-overlay/ui-library/icons.js';
+import type { DevOverlayTooltip } from '../runtime/client/dev-overlay/ui-library/tooltip.js';
+import type { DevOverlayWindow } from '../runtime/client/dev-overlay/ui-library/window.js';
 import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js';
 import type { OmitIndexSignature, Simplify } from '../type-utils.js';
 import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js';
@@ -2322,3 +2326,13 @@ export type DevOverlayMetadata = Window &
 			root: string;
 		};
 	};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'astro-dev-overlay': AstroDevOverlay;
+		'astro-dev-overlay-window': DevOverlayWindow;
+		'astro-dev-overlay-plugin-canvas': DevOverlayCanvas;
+		'astro-dev-overlay-tooltip': DevOverlayTooltip;
+		'astro-dev-overlay-highlight': DevOverlayHighlight;
+	}
+}

packages/astro/src/runtime/client/dev-overlay/entrypoint.ts

@@ -0,0 +1,84 @@
+import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js';
+import { type AstroDevOverlay, type DevOverlayPlugin } from './overlay.js';
+
+let overlay: AstroDevOverlay;
+
+document.addEventListener('DOMContentLoaded', async () => {
+	const [
+		{ loadDevOverlayPlugins },
+		{ default: astroDevToolPlugin },
+		{ default: astroAuditPlugin },
+		{ default: astroXrayPlugin },
+		{ AstroDevOverlay, DevOverlayCanvas },
+		{ DevOverlayCard },
+		{ DevOverlayHighlight },
+		{ DevOverlayTooltip },
+		{ DevOverlayWindow },
+	] = await Promise.all([
+		// @ts-expect-error
+		import('astro:dev-overlay'),
+		import('./plugins/astro.js'),
+		import('./plugins/audit.js'),
+		import('./plugins/xray.js'),
+		import('./overlay.js'),
+		import('./ui-library/card.js'),
+		import('./ui-library/highlight.js'),
+		import('./ui-library/tooltip.js'),
+		import('./ui-library/window.js'),
+	]);
+
+	// Register custom elements
+	customElements.define('astro-dev-overlay', AstroDevOverlay);
+	customElements.define('astro-dev-overlay-window', DevOverlayWindow);
+	customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas);
+	customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip);
+	customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight);
+	customElements.define('astro-dev-overlay-card', DevOverlayCard);
+
+	overlay = document.createElement('astro-dev-overlay');
+
+	const preparePlugin = (
+		pluginDefinition: DevOverlayPluginDefinition,
+		builtIn: boolean
+	): DevOverlayPlugin => {
+		const eventTarget = new EventTarget();
+		const plugin = {
+			...pluginDefinition,
+			builtIn: builtIn,
+			active: false,
+			status: 'loading' as const,
+			eventTarget: eventTarget,
+		};
+
+		// Events plugins can send to the overlay to update their status
+		eventTarget.addEventListener('plugin-notification', (evt) => {
+			const target = overlay.shadowRoot?.querySelector(`[data-plugin-id="${plugin.id}"]`);
+			if (!target) return;
+
+			let newState = true;
+			if (evt instanceof CustomEvent) {
+				newState = evt.detail.state ?? true;
+			}
+
+			target.querySelector('.notification')?.toggleAttribute('data-active', newState);
+		});
+
+		return plugin;
+	};
+
+	const customPluginsDefinitions = (await loadDevOverlayPlugins()) as DevOverlayPluginDefinition[];
+	const plugins: DevOverlayPlugin[] = [
+		...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin].map((pluginDef) =>
+			preparePlugin(pluginDef, true)
+		),
+		...customPluginsDefinitions.map((pluginDef) => preparePlugin(pluginDef, false)),
+	];
+
+	overlay.plugins = plugins;
+
+	document.body.append(overlay);
+
+	document.addEventListener('astro:after-swap', () => {
+		document.body.append(overlay);
+	});
+});