Merge branch 'main' into 9009

.changeset/two-ads-bathe.md

@@ -0,0 +1,5 @@
+---
+"astro": minor
+---
+
+Adds support for page mutations to the audits in the dev toolbar. Astro will now rerun the audits whenever elements are added or deleted from the page.

.changeset/witty-wombats-attend.md

@@ -0,0 +1,5 @@
+---
+"astro": minor
+---
+
+Updates the UI for dev toolbar audits with new information

packages/astro/e2e/dev-toolbar-audits.test.js

@@ -44,6 +44,115 @@ test.describe('Dev Toolbar - Audits', () => {
 		await appButton.click();
 	});
 
+	test('can handle mutations', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/audits-mutations'));
+
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:audit"]');
+		await appButton.click();
+
+		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
+		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
+		await expect(auditHighlights).toHaveCount(1);
+
+		await page.click('body');
+
+		const badButton = page.locator('#bad-button');
+
+		let consolePromise = page.waitForEvent('console');
+		await badButton.click();
+		await consolePromise;
+
+		await appButton.click();
+		await expect(auditHighlights).toHaveCount(2);
+	});
+
+	test('multiple changes only result in one audit update', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		await page.evaluate(() => {
+			localStorage.setItem(
+				'astro:dev-toolbar:settings',
+				JSON.stringify({
+					verbose: true,
+				})
+			);
+		});
+
+		await page.goto(astro.resolveUrl('/audits-mutations'));
+
+		let logs = [];
+		page.on('console', (msg) => {
+			logs.push(msg.text());
+		});
+
+		const badButton = page.locator('#bad-button');
+
+		let consolePromise = page.waitForEvent('console', (msg) =>
+			msg.text().includes('Rerunning audit lints')
+		);
+		await badButton.click({ clickCount: 5 });
+		await consolePromise;
+
+		await page.click('body');
+
+		expect(
+			logs.filter((log) => log.includes('Rerunning audit lints because the DOM has been updated'))
+				.length === 1
+		).toBe(true);
+	});
+
+	test('handle mutations properly during view transitions', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		await page.evaluate(() => {
+			localStorage.setItem(
+				'astro:dev-toolbar:settings',
+				JSON.stringify({
+					verbose: true,
+				})
+			);
+		});
+
+		await page.goto(astro.resolveUrl('/audits-mutations'));
+
+		let logs = [];
+		page.on('console', (msg) => {
+			logs.push(msg.text());
+		});
+
+		const linkToOtherPage = page.locator('#link-to-2');
+		let consolePromise = page.waitForEvent('console');
+		await linkToOtherPage.click();
+		await consolePromise;
+
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:audit"]');
+
+		await appButton.click();
+
+		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
+		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
+		await expect(auditHighlights).toHaveCount(1);
+
+		await page.click('body');
+
+		const badButton = page.locator('#bad-button-2');
+
+		consolePromise = page.waitForEvent('console');
+		await badButton.click();
+		await consolePromise;
+
+		await appButton.click();
+		await expect(auditHighlights).toHaveCount(2);
+
+		// Make sure we only reran audits once
+		expect(
+			logs.filter((log) => log.includes('Rerunning audit lints because the DOM has been updated'))
+				.length === 1
+		).toBe(true);
+	});
+
 	test('does not warn for non-interactive element', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/a11y-exceptions'));
 

packages/astro/e2e/dev-toolbar.test.js

@@ -151,11 +151,11 @@ test.describe('Dev Toolbar', () => {
 		const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight');
 		await expect(auditHighlight).not.toBeVisible();
 
-		const auditWindow = auditCanvas.locator('astro-dev-toolbar-window');
+		const auditWindow = auditCanvas.locator('astro-dev-toolbar-audit-window');
 		await expect(auditWindow).toHaveCount(1);
 		await expect(auditWindow).toBeVisible();
 
-		await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible();
+		await expect(auditWindow.locator('.no-audit-container')).toBeVisible();
 	});
 
 	test('audit shows a window with list of problems', async ({ page, astro }) => {
@@ -166,7 +166,7 @@ test.describe('Dev Toolbar', () => {
 		await appButton.click();
 
 		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
-		const auditWindow = auditCanvas.locator('astro-dev-toolbar-window');
+		const auditWindow = auditCanvas.locator('astro-dev-toolbar-audit-window');
 		await expect(auditWindow).toHaveCount(1);
 		await expect(auditWindow).toBeVisible();
 
@@ -272,7 +272,6 @@ test.describe('Dev Toolbar', () => {
 		await appButton.click();
 
 		const myAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="my-plugin"]');
-		console.log(await myAppCanvas.innerHTML());
 		const myAppWindow = myAppCanvas.locator('astro-dev-toolbar-window');
 		await expect(myAppWindow).toHaveCount(1);
 		await expect(myAppWindow).toBeVisible();
@@ -307,8 +306,8 @@ test.describe('Dev Toolbar', () => {
 		await expect(customAppNotification).toHaveAttribute('data-level', 'warning');
 
 		await expect(customAppNotification).toBeVisible();
-  });
-  
+	});
+
 	test('can quit apps by clicking outside the window', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 

packages/astro/e2e/fixtures/dev-toolbar/src/pages/audits-mutations-2.astro

@@ -0,0 +1,29 @@
+---
+import Layout from "../layout/Layout.astro";
+---
+
+<Layout>
+<button id="bad-button-2">Click me to add an image that is missing an alt!</button>
+<a id="link-to-1" href="/audits-mutations">Go to Mutations 1</a>
+
+<br /><br /><br />
+<img src="" width="100" height="100" />
+
+<script>
+	document.addEventListener('astro:page-load', () => {
+		const badButton = document.getElementById('bad-button-2');
+		if (!badButton) return;
+
+		badButton.addEventListener('click', clickHandler);
+
+		function clickHandler() {
+			const img = document.createElement('img');
+			img.width = 100;
+			img.height = 100;
+
+			document.body.appendChild(img);
+			console.log("Image added to the page")
+		}
+	})
+</script>
+</Layout>

packages/astro/e2e/fixtures/dev-toolbar/src/pages/audits-mutations.astro

@@ -0,0 +1,28 @@
+---
+import Layout from "../layout/Layout.astro";
+---
+
+<Layout>
+<button id="bad-button">Click me to add an image that is missing an alt!</button>
+<a id="link-to-2" href="/audits-mutations-2">Go to Mutations 2</a>
+
+<img src="" width="100" height="100" />
+
+<script>
+	document.addEventListener('astro:page-load', () => {
+		const badButton = document.getElementById('bad-button');
+		if (!badButton) return;
+
+		badButton.addEventListener('click', clickHandler);
+
+		function clickHandler() {
+			const img = document.createElement('img');
+			img.width = 100;
+			img.height = 100;
+
+			document.body.appendChild(img);
+			console.log("Image added to the page")
+		}
+	})
+</script>
+</Layout>

packages/astro/package.json

@@ -124,7 +124,6 @@
     "@babel/plugin-transform-react-jsx": "^7.22.5",
     "@babel/traverse": "^7.23.3",
     "@babel/types": "^7.23.3",
-    "@medv/finder": "^3.1.0",
     "@shikijs/core": "^1.1.2",
     "@types/babel__core": "^7.20.4",
     "acorn": "^8.11.2",