index.ts — astro Source File

Source Code

import type { ResolvedDevToolbarApp } from '../../../../../types/public/toolbar.js';
import { settings } from '../../settings.js';
import type { DevToolbarHighlight } from '../../ui-library/highlight.js';
import { positionHighlight } from '../utils/highlight.js';
import { closeOnOutsideClick } from '../utils/window.js';
import { processAnnotations } from './annotations.js';
import { type AuditRule, rulesCategories } from './rules/index.js';
import { DevToolbarAuditListItem } from './ui/audit-list-item.js';
import { DevToolbarAuditListWindow } from './ui/audit-list-window.js';
import { createAuditUI } from './ui/audit-ui.js';

const icon =
	'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 1 20 16" aria-hidden="true"><path fill="#fff" d="M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z"/></svg>';

export type Audit = {
	auditedElement: HTMLElement;
	rule: AuditRule;
	highlight: DevToolbarHighlight | null;
	card: HTMLElement | null;
};

try {
	customElements.define('astro-dev-toolbar-audit-window', DevToolbarAuditListWindow);
	customElements.define('astro-dev-toolbar-audit-list-item', DevToolbarAuditListItem);
} catch {}

let showState = false;

export default {
	id: 'astro:audit',
	name: 'Audit',
	icon: icon,
	async init(canvas, eventTarget) {
		let audits: Audit[] = [];
		let auditWindow = document.createElement(
			'astro-dev-toolbar-audit-window',
		) as DevToolbarAuditListWindow;
		let hasCreatedUI = false;
		auditWindow.popover = '';

		canvas.appendChild(auditWindow);

		await run();

		let mutationDebounce: ReturnType<typeof setTimeout>;
		const observer = new MutationObserver(() => {
			// We don't want to rerun the audit lints on every single mutation, so we'll debounce it.
			if (mutationDebounce) {
				clearTimeout(mutationDebounce);
			}

			mutationDebounce = setTimeout(() => {
				settings.logger.verboseLog('Rerunning audit lints because the DOM has been updated.');

				// Even though we're ready to run the lints, we'll wait for the next idle period to do so, as it is less likely
				// to interfere with any other work the browser is doing post-mutation. For instance, the page or the user might
				// be interacting with the newly added elements, or the browser might be doing some work (layout, paint, etc.)
				if ('requestIdleCallback' in window) {
					window.requestIdleCallback(
						async () => {
// ... (170 more lines)