fix(toolbar): Fix loading third-party apps using absolute paths (#9834)

* fix(toolbar): Fix loading third-party apps using absolute paths

* chore: changeset

* fix: pass entrypoint correctly

* Update .changeset/real-lamps-design.md

---------

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

.changeset/real-lamps-design.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes third-party dev toolbar apps not loading correctly when using absolute paths on Windows

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

@@ -215,4 +215,22 @@ test.describe('Dev Toolbar', () => {
 		const hideToolbar = settingsWindow.getByRole('heading', { name: 'Hide toolbar' });
 		await expect(hideToolbar).toBeVisible();
 	});
+
+	test('supports third-party apps', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="my-plugin"]');
+		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();
+
+		// Toggle app off
+		await appButton.click();
+		await expect(myAppWindow).not.toBeVisible();
+	});
 });

packages/astro/e2e/fixtures/dev-toolbar/astro.config.mjs

@@ -1,5 +1,6 @@
 import preact from '@astrojs/preact';
+import { myIntegration } from './custom-integration.js';
 
 export default {
-	integrations: [preact()],
+	integrations: [preact(), myIntegration()],
 };

packages/astro/e2e/fixtures/dev-toolbar/custom-integration.js

@@ -0,0 +1,17 @@
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/** @type {() => import('astro').AstroIntegration} */
+export function myIntegration() {
+	return {
+		name: 'my-integration',
+		hooks: {
+			'astro:config:setup': ({ addDevToolbarApp }) => {
+				const importPath = dirname(fileURLToPath(import.meta.url));
+				const pluginPath = join(importPath, 'custom-plugin.js');
+
+				addDevToolbarApp(pluginPath);
+			},
+		},
+	};
+}

packages/astro/e2e/fixtures/dev-toolbar/custom-plugin.js

@@ -0,0 +1,20 @@
+export default {
+	id: 'my-plugin',
+	name: 'My Plugin',
+	icon: 'astro:logo',
+	init(canvas) {
+		const astroWindow = document.createElement('astro-dev-toolbar-window');
+		const myButton = document.createElement('astro-dev-toolbar-button');
+		myButton.size = 'medium';
+		myButton.buttonStyle = 'purple';
+		myButton.innerText = 'Click me!';
+
+		myButton.addEventListener('click', () => {
+			console.log('Clicked!');
+		});
+
+		astroWindow.appendChild(myButton);
+
+		canvas.appendChild(astroWindow);
+	},
+};

packages/astro/src/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.ts

@@ -65,13 +65,18 @@ export default function astroDevToolbar({ settings, logger }: AstroPluginOptions
 				return `
 					export const loadDevToolbarApps = async () => {
 						return (await Promise.all([${settings.devToolbarApps
-							.map((plugin) => `safeLoadPlugin(${JSON.stringify(plugin)})`)
+							.map(
+								(plugin) =>
+									`safeLoadPlugin(async () => (await import(${JSON.stringify(
+										plugin
+									)})).default, ${JSON.stringify(plugin)})`
+							)
 							.join(',')}])).filter(app => app);
 					};
 
-					async function safeLoadPlugin(entrypoint) {
+					async function safeLoadPlugin(importEntrypoint, entrypoint) {
 						try {
-							const app = (await import(/* @vite-ignore */ entrypoint)).default;
+							const app = await importEntrypoint();
 
 							if (typeof app !== 'object' || !app.id || !app.name) {
 								throw new Error("Apps must default export an object with an id, and a name.");