default.init() — astro Function Reference

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts lines 33–228

	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 () => {
							run().then(() => {
								if (showState) createAuditsUI();
							});
						},
						{ timeout: 300 },
					);
				} else {
					// Fallback for old versions of Safari, we'll assume that things are less likely to be busy after 150ms.
					setTimeout(async () => {
						run().then(() => {
							if (showState) createAuditsUI();
						});
					}, 150);
				}
			}, 250);
		});

		setupObserver();

		document.addEventListener('astro:before-preparation', () => {
			observer.disconnect();
		});
		document.addEventListener('astro:after-swap', async () => {
			run();
		});
		document.addEventListener('astro:page-load', async () => {
			refreshLintPositions();

			// HACK: View transitions add a route announcer after this event, so we need to wait for it to be added
			setTimeout(() => {
				setupObserver();
			}, 100);
		});

		eventTarget.addEventListener('app-toggled', (event: any) => {
			if (event.detail.state === true) {
				showState = true;
				createAuditsUI();
			} else {
				showState = false;
			}
		});

		closeOnOutsideClick(eventTarget, () => {
			const activeAudits = audits.filter((audit) => audit.card?.hasAttribute('active'));

			if (activeAudits.length > 0) {
				activeAudits.forEach((audit) => {
					audit.card?.toggleAttribute('active', false);
				});
				return true;
			}