updateAuditList() — astro Function Reference

Architecture documentation for the updateAuditList() function in audit-list-window.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient called by 1

Entity Profile

DevToolbar→ ToolbarClient→ updateAuditList() — astro Function Reference

Dependency Diagram

graph TD
  9736be38_ee05_cbf0_e178_b03c45dfb723["updateAuditList()"]
  2820377c_6ad7_088f_76c0_f267b0ec96bf["DevToolbarAuditListWindow"]
  9736be38_ee05_cbf0_e178_b03c45dfb723 -->|defined in| 2820377c_6ad7_088f_76c0_f267b0ec96bf
  b1f505f4_335a_1bb7_8c09_8beca849d12a["render()"]
  b1f505f4_335a_1bb7_8c09_8beca849d12a -->|calls| 9736be38_ee05_cbf0_e178_b03c45dfb723
  style 9736be38_ee05_cbf0_e178_b03c45dfb723 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts lines 350–397

	updateAuditList() {
		const auditListContainer = this.shadowRoot.getElementById('audit-list');
		if (auditListContainer) {
			auditListContainer.innerHTML = '';

			if (this.audits.length > 0) {
				for (const category of rulesCategories) {
					const template = this.shadowRoot.getElementById(
						'category-template',
					) as HTMLTemplateElement;
					if (!template) return;

					const clone = document.importNode(template.content, true);
					const categoryContainer = clone.querySelector('div')!;
					const categoryHeader = clone.querySelector('.category-header')!;
					categoryHeader.innerHTML = `<astro-dev-toolbar-icon icon="${category.icon}"></astro-dev-toolbar-icon><h2>${category.name}</h2>`;
					categoryContainer.append(categoryHeader);

					const categoryContent = clone.querySelector('.category-content')!;

					const categoryAudits = this.audits.filter(
						(audit) => getAuditCategory(audit.rule) === category.code,
					);

					for (const audit of categoryAudits) {
						if (audit.card) categoryContent.append(audit.card);
					}

					categoryContainer.append(categoryContent);
					auditListContainer.append(categoryContainer);
				}
			} else {
				const noAuditContainer = document.createElement('div');
				noAuditContainer.classList.add('no-audit-container');
				noAuditContainer.innerHTML = `
					<header>
						<h1></astro-dev-toolbar-icon>No accessibility or performance issues detected.</h1>
					</header>
					<p>
						Nice work! This app scans the page and highlights common accessibility and performance issues for you, like a missing "alt" attribute on an image, or a image not using performant attributes.
					</p>
					<astro-dev-toolbar-icon icon="houston-detective"></astro-dev-toolbar-icon>
					`;

				auditListContainer.append(noAuditContainer);
			}
		}
	}