astroDevToolbar() — astro Function Reference

Architecture documentation for the astroDevToolbar() function in vite-plugin-dev-toolbar.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ astroDevToolbar() — astro Function Reference

Dependency Diagram

graph TD
  b877640b_5201_a1d9_b4f0_8b82c7bb891a["astroDevToolbar()"]
  2c450f40_35a1_631d_078f_d2de72a7448a["vite-plugin-dev-toolbar.ts"]
  b877640b_5201_a1d9_b4f0_8b82c7bb891a -->|defined in| 2c450f40_35a1_631d_078f_d2de72a7448a
  style b877640b_5201_a1d9_b4f0_8b82c7bb891a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/toolbar/vite-plugin-dev-toolbar.ts lines 10–128

export default function astroDevToolbar({ settings, logger }: AstroPluginOptions): vite.Plugin {
	let telemetryTimeout: ReturnType<typeof setTimeout>;

	return {
		name: 'astro:dev-toolbar',
		config() {
			return {
				optimizeDeps: {
					// Optimize CJS dependencies used by the dev toolbar
					include: ['astro > aria-query', 'astro > axobject-query'],
				},
			};
		},
		resolveId: {
			filter: {
				id: new RegExp(`^${VIRTUAL_MODULE_ID}$`),
			},
			handler() {
				return RESOLVED_VIRTUAL_MODULE_ID;
			},
		},
		configureServer(server) {
			server.hot.on('astro:devtoolbar:error:load', (args) => {
				logger.error(
					'toolbar',
					`Failed to load dev toolbar app from ${args.entrypoint}: ${args.error}`,
				);
			});

			server.hot.on('astro:devtoolbar:error:init', (args) => {
				logger.error(
					'toolbar',
					`Failed to initialize dev toolbar app ${args.app.name} (${args.app.id}):\n${args.error}`,
				);
			});

			server.hot.on('astro:devtoolbar:app:toggled', (args) => {
				// Debounce telemetry to avoid recording events when the user is rapidly toggling apps for debugging
				clearTimeout(telemetryTimeout);
				telemetryTimeout = setTimeout(() => {
					let nameToRecord = args?.app?.id;
					// Only record apps names for apps that are built-in
					if (!nameToRecord || !nameToRecord.startsWith('astro:')) {
						nameToRecord = 'other';
					}
					telemetry.record(
						eventAppToggled({
							appName: nameToRecord,
						}),
					);
				}, 200);
			});
		},
		load: {
			filter: {
				id: new RegExp(`^${RESOLVED_VIRTUAL_MODULE_ID}$`),
			},
			handler() {
				return {
					code: `
						export const loadDevToolbarApps = async () => {
							return (await Promise.all([${settings.devToolbarApps
								.map(
									(plugin) =>
										`safeLoadPlugin(${JSON.stringify(
											plugin,
										)}, async () => (await import(${JSON.stringify(
											typeof plugin === 'string' ? plugin : plugin.entrypoint.toString(),
										)})).default, ${JSON.stringify(
											typeof plugin === 'string' ? plugin : plugin.entrypoint.toString(),
										)})`,
								)
								.join(',')}]));
						};

						async function safeLoadPlugin(appDefinition, importEntrypoint, entrypoint) {
							try {
								let app;
								if (typeof appDefinition === 'string') {
									app = await importEntrypoint();