From 47604bd5b5bb2ea63922b657bac104c010575c20 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Fri, 1 Dec 2023 16:15:35 -0500 Subject: [PATCH] Rename Dev Overlay to Dev Toolbar (#9271) * Add more dev overlay tests * Rename Dev Overlay to Dev Toolbar * Add config option and preferences * Fix build * Alias the event names * Add changeset --- .changeset/lemon-crews-juggle.md | 9 ++ packages/astro/e2e/dev-overlay.test.js | 118 +++++++++++++++--- .../src/pages/audit-no-warning.astro | 5 + .../src/pages/xray-no-islands.astro | 5 + packages/astro/src/@types/astro.ts | 47 ++++++- packages/astro/src/core/config/schema.ts | 12 ++ packages/astro/src/core/config/settings.ts | 2 +- packages/astro/src/integrations/index.ts | 6 +- packages/astro/src/preferences/defaults.ts | 2 +- .../runtime/client/dev-overlay/entrypoint.ts | 43 +++++-- .../src/runtime/client/dev-overlay/overlay.ts | 37 +++--- .../client/dev-overlay/plugins/astro.ts | 34 ++--- .../client/dev-overlay/plugins/audit.ts | 8 +- .../client/dev-overlay/plugins/settings.ts | 10 +- .../dev-overlay/plugins/utils/highlight.ts | 2 +- .../dev-overlay/plugins/utils/window.ts | 2 +- .../client/dev-overlay/plugins/xray.ts | 6 +- .../client/dev-overlay/ui-library/button.ts | 3 +- .../src/vite-plugin-astro-server/route.ts | 2 +- .../vite-plugin-dev-overlay.ts | 2 +- 20 files changed, 274 insertions(+), 81 deletions(-) create mode 100644 .changeset/lemon-crews-juggle.md create mode 100644 packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro create mode 100644 packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro diff --git a/.changeset/lemon-crews-juggle.md b/.changeset/lemon-crews-juggle.md new file mode 100644 index 0000000000..b404f73484 --- /dev/null +++ b/.changeset/lemon-crews-juggle.md @@ -0,0 +1,9 @@ +--- +'astro': major +--- + +Renames Dev Overlay to Dev Toolbar + +The previously named Dev Overlay is now known as the Astro Dev Toolbar. Additionally what were called Plugins are now Toolbar Apps. This updates our references to reflect. + +As there were a lot of APIs that used these names, the existing APIs are left in place, and aliases for the new Toolbar based names are included as well, which is what will be documented. diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js index 1a358487cb..a5e3560e90 100644 --- a/packages/astro/e2e/dev-overlay.test.js +++ b/packages/astro/e2e/dev-overlay.test.js @@ -19,14 +19,14 @@ test.describe('Dev Overlay', () => { test('dev overlay exists in the page', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const devOVerlay = page.locator('astro-dev-overlay'); + const devOVerlay = page.locator('astro-dev-toolbar'); await expect(devOVerlay).toHaveCount(1); }); test('shows plugin name on hover', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const overlay = page.locator('astro-dev-overlay'); + const overlay = page.locator('astro-dev-toolbar'); const pluginButton = overlay.locator('button[data-plugin-id="astro"]'); const pluginButtonTooltip = pluginButton.locator('.item-tooltip'); await pluginButton.hover(); @@ -37,14 +37,14 @@ test.describe('Dev Overlay', () => { test('can open Astro plugin', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const overlay = page.locator('astro-dev-overlay'); + const overlay = page.locator('astro-dev-toolbar'); const pluginButton = overlay.locator('button[data-plugin-id="astro"]'); await pluginButton.click(); const astroPluginCanvas = overlay.locator( - 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro"]' + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]' ); - const astroWindow = astroPluginCanvas.locator('astro-dev-overlay-window'); + const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window'); await expect(astroWindow).toHaveCount(1); await expect(astroWindow).toBeVisible(); @@ -56,18 +56,18 @@ test.describe('Dev Overlay', () => { test('xray shows highlights and tooltips', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const overlay = page.locator('astro-dev-overlay'); + const overlay = page.locator('astro-dev-toolbar'); const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]'); await pluginButton.click(); const xrayCanvas = overlay.locator( - 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:xray"]' + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]' ); - const xrayHighlight = xrayCanvas.locator('astro-dev-overlay-highlight'); + const xrayHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight'); await expect(xrayHighlight).toBeVisible(); await xrayHighlight.hover(); - const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-overlay-tooltip'); + const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-toolbar-tooltip'); await expect(xrayHighlightTooltip).toBeVisible(); // Toggle plugin off @@ -76,21 +76,41 @@ test.describe('Dev Overlay', () => { await expect(xrayHighlightTooltip).not.toBeVisible(); }); + test('xray shows no islands message when there are none', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/xray-no-islands')); + + const overlay = page.locator('astro-dev-toolbar'); + const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]'); + await pluginButton.click(); + + const xrayCanvas = overlay.locator( + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]' + ); + const auditHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight'); + await expect(auditHighlight).not.toBeVisible(); + + const xrayWindow = xrayCanvas.locator('astro-dev-toolbar-window'); + await expect(xrayWindow).toHaveCount(1); + await expect(xrayWindow).toBeVisible(); + + await expect(xrayWindow.locator('astro-dev-toolbar-icon[icon=lightbulb]')).toBeVisible(); + }); + test('audit shows higlights and tooltips', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const overlay = page.locator('astro-dev-overlay'); + const overlay = page.locator('astro-dev-toolbar'); const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]'); await pluginButton.click(); const auditCanvas = overlay.locator( - 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:audit"]' + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]' ); - const auditHighlight = auditCanvas.locator('astro-dev-overlay-highlight'); + const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight'); await expect(auditHighlight).toBeVisible(); await auditHighlight.hover(); - const auditHighlightTooltip = auditHighlight.locator('astro-dev-overlay-tooltip'); + const auditHighlightTooltip = auditHighlight.locator('astro-dev-toolbar-tooltip'); await expect(auditHighlightTooltip).toBeVisible(); // Toggle plugin off @@ -99,17 +119,37 @@ test.describe('Dev Overlay', () => { await expect(auditHighlightTooltip).not.toBeVisible(); }); + test('audit shows no issues message when there are no issues', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/audit-no-warning')); + + const overlay = page.locator('astro-dev-toolbar'); + const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]'); + await pluginButton.click(); + + const auditCanvas = overlay.locator( + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]' + ); + const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight'); + await expect(auditHighlight).not.toBeVisible(); + + const auditWindow = auditCanvas.locator('astro-dev-toolbar-window'); + await expect(auditWindow).toHaveCount(1); + await expect(auditWindow).toBeVisible(); + + await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible(); + }); + test('can open Settings plugin', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const overlay = page.locator('astro-dev-overlay'); + const overlay = page.locator('astro-dev-toolbar'); const pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]'); await pluginButton.click(); const settingsPluginCanvas = overlay.locator( - 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:settings"]' + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]' ); - const settingsWindow = settingsPluginCanvas.locator('astro-dev-overlay-window'); + const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window'); await expect(settingsWindow).toHaveCount(1); await expect(settingsWindow).toBeVisible(); @@ -117,4 +157,50 @@ test.describe('Dev Overlay', () => { await pluginButton.click(); await expect(settingsWindow).not.toBeVisible(); }); + + test('Opening a plugin closes the currently opened plugin', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const overlay = page.locator('astro-dev-toolbar'); + let pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]'); + await pluginButton.click(); + + const settingsPluginCanvas = overlay.locator( + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]' + ); + const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window'); + await expect(settingsWindow).toHaveCount(1); + await expect(settingsWindow).toBeVisible(); + + // Click the astro plugin + pluginButton = overlay.locator('button[data-plugin-id="astro"]'); + await pluginButton.click(); + + const astroPluginCanvas = overlay.locator( + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]' + ); + const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window'); + await expect(astroWindow).toHaveCount(1); + await expect(astroWindow).toBeVisible(); + + await expect(settingsWindow).not.toBeVisible(); + }); + + test('Settings plugin contains message on disabling the overlay', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const overlay = page.locator('astro-dev-toolbar'); + let pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]'); + await pluginButton.click(); + + const settingsPluginCanvas = overlay.locator( + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]' + ); + const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window'); + await expect(settingsWindow).toHaveCount(1); + await expect(settingsWindow).toBeVisible(); + + const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide overlay' }); + await expect(hideOverlay).toBeVisible(); + }); }); diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro b/packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro new file mode 100644 index 0000000000..9d0c285877 --- /dev/null +++ b/packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro @@ -0,0 +1,5 @@ +--- + +--- + +Astro logo diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro b/packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro new file mode 100644 index 0000000000..f408d45cb0 --- /dev/null +++ b/packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro @@ -0,0 +1,5 @@ +--- + +--- + +
no islands on this page
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 8cb9a0f683..a689c0479e 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -1159,6 +1159,7 @@ export interface AstroUserConfig { * @docs * @kind heading * @name Dev Overlay Options + * @deprecated Use `devToolbar` instead. */ devOverlay?: { /** @@ -1183,6 +1184,34 @@ export interface AstroUserConfig { defaultState: 'minimized' | 'expanded'; }; + /** + * @docs + * @kind heading + * @name Dev Toolbar Options + */ + devToolbar?: { + /** + * @docs + * @name devToolbar.enabled + * @type {boolean} + * @default `true` + * @description + * Whether to enable the Astro Dev Toolbar. This toolbar allows you to inspect your page islands, see helpful audits on performance and accessibility, and more. + * + * This option is scoped to the entire project, to only disable the toolbar for yourself, run `npm run astro preferences disable devToolbar`. To disable the toolbar for all your Astro projects, run `npm run astro preferences disable devToolbar --global`. + */ + enabled: boolean; + /** + * @docs + * @name devToolbar.defaultState + * @type {'minimized' | 'expanded'} + * @default `minimized` + * @description + * Whether the Dev Toolbar should be expanded or minimized by default. + */ + defaultState: 'minimized' | 'expanded'; + }; + /** * @docs * @kind heading @@ -1716,7 +1745,7 @@ export interface AstroSettings { * Map of directive name (e.g. `load`) to the directive script code */ clientDirectives: Map; - devOverlayPlugins: string[]; + devToolbarApps: string[]; middlewares: { pre: string[]; post: string[] }; tsConfig: TSConfig | undefined; tsConfigPath: string | undefined; @@ -2292,7 +2321,11 @@ export interface AstroIntegration { injectScript: (stage: InjectedScriptStage, content: string) => void; injectRoute: (injectRoute: InjectedRoute) => void; addClientDirective: (directive: ClientDirectiveConfig) => void; + /** + * @deprecated Use `addDevToolbarApp` instead. + */ addDevOverlayPlugin: (entrypoint: string) => void; + addDevToolbarApp: (entrypoint: string) => void; addMiddleware: (mid: AstroIntegrationMiddleware) => void; logger: AstroIntegrationLogger; // TODO: Add support for `injectElement()` for full HTML element injection, not just scripts. @@ -2563,6 +2596,18 @@ export type DevOverlayMetadata = Window & declare global { interface HTMLElementTagNameMap { + 'astro-dev-toolbar': AstroDevOverlay; + 'astro-dev-toolbar-window': DevOverlayWindow; + 'astro-dev-toolbar-plugin-canvas': DevOverlayCanvas; + 'astro-dev-toolbar-tooltip': DevOverlayTooltip; + 'astro-dev-toolbar-highlight': DevOverlayHighlight; + 'astro-dev-toolbar-toggle': DevOverlayToggle; + 'astro-dev-toolbar-badge': DevOverlayBadge; + 'astro-dev-toolbar-button': DevOverlayButton; + 'astro-dev-toolbar-icon': DevOverlayIcon; + 'astro-dev-toolbar-card': DevOverlayCard; + + // Deprecated names 'astro-dev-overlay': AstroDevOverlay; 'astro-dev-overlay-window': DevOverlayWindow; 'astro-dev-overlay-plugin-canvas': DevOverlayCanvas; diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index 855bad4615..95e3964b43 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -45,6 +45,10 @@ const ASTRO_CONFIG_DEFAULTS = { enabled: true, defaultState: 'minimized', }, + devToolbar: { + enabled: true, + defaultState: 'minimized', + }, compressHTML: true, server: { host: false, @@ -236,6 +240,14 @@ export const AstroConfigSchema = z.object({ .default(ASTRO_CONFIG_DEFAULTS.devOverlay.defaultState), }) .default(ASTRO_CONFIG_DEFAULTS.devOverlay), + devToolbar: z + .object({ + enabled: z.boolean().default(ASTRO_CONFIG_DEFAULTS.devToolbar.enabled), + defaultState: z + .enum(['minimized', 'expanded']) + .default(ASTRO_CONFIG_DEFAULTS.devToolbar.defaultState), + }) + .default(ASTRO_CONFIG_DEFAULTS.devToolbar), markdown: z .object({ syntaxHighlight: z diff --git a/packages/astro/src/core/config/settings.ts b/packages/astro/src/core/config/settings.ts index 4dc4beca89..ef92d6e7d9 100644 --- a/packages/astro/src/core/config/settings.ts +++ b/packages/astro/src/core/config/settings.ts @@ -102,7 +102,7 @@ export function createBaseSettings(config: AstroConfig): AstroSettings { clientDirectives: getDefaultClientDirectives(), middlewares: { pre: [], post: [] }, watchFiles: [], - devOverlayPlugins: [], + devToolbarApps: [], timer: new AstroTimer(), }; } diff --git a/packages/astro/src/integrations/index.ts b/packages/astro/src/integrations/index.ts index 2f5bc675b2..9031eeb2df 100644 --- a/packages/astro/src/integrations/index.ts +++ b/packages/astro/src/integrations/index.ts @@ -141,7 +141,11 @@ export async function runHookConfigSetup({ updatedSettings.watchFiles.push(path instanceof URL ? fileURLToPath(path) : path); }, addDevOverlayPlugin: (entrypoint) => { - updatedSettings.devOverlayPlugins.push(entrypoint); + // TODO add a deprecation warning in Astro 5. + hooks.addDevToolbarApp(entrypoint); + }, + addDevToolbarApp: (entrypoint) => { + updatedSettings.devToolbarApps.push(entrypoint); }, addClientDirective: ({ name, entrypoint }) => { if (updatedSettings.clientDirectives.has(name) || addedClientDirectives.has(name)) { diff --git a/packages/astro/src/preferences/defaults.ts b/packages/astro/src/preferences/defaults.ts index db9cfde876..f1c4d78135 100644 --- a/packages/astro/src/preferences/defaults.ts +++ b/packages/astro/src/preferences/defaults.ts @@ -1,5 +1,5 @@ export const DEFAULT_PREFERENCES = { - devOverlay: { + devToolbar: { /** Specifies whether the user has the Dev Overlay enabled */ enabled: true, }, diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts index 70b310fd0b..119da70316 100644 --- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts +++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts @@ -34,18 +34,31 @@ document.addEventListener('DOMContentLoaded', async () => { ]); // Register custom elements - customElements.define('astro-dev-overlay', AstroDevOverlay); - customElements.define('astro-dev-overlay-window', DevOverlayWindow); - customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas); - customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip); - customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight); - customElements.define('astro-dev-overlay-card', DevOverlayCard); - customElements.define('astro-dev-overlay-toggle', DevOverlayToggle); - customElements.define('astro-dev-overlay-button', DevOverlayButton); - customElements.define('astro-dev-overlay-badge', DevOverlayBadge); - customElements.define('astro-dev-overlay-icon', DevOverlayIcon); + customElements.define('astro-dev-toolbar', AstroDevOverlay); + customElements.define('astro-dev-toolbar-window', DevOverlayWindow); + customElements.define('astro-dev-toolbar-plugin-canvas', DevOverlayCanvas); + customElements.define('astro-dev-toolbar-tooltip', DevOverlayTooltip); + customElements.define('astro-dev-toolbar-highlight', DevOverlayHighlight); + customElements.define('astro-dev-toolbar-card', DevOverlayCard); + customElements.define('astro-dev-toolbar-toggle', DevOverlayToggle); + customElements.define('astro-dev-toolbar-button', DevOverlayButton); + customElements.define('astro-dev-toolbar-badge', DevOverlayBadge); + customElements.define('astro-dev-toolbar-icon', DevOverlayIcon); - overlay = document.createElement('astro-dev-overlay'); + // Add deprecated names + const deprecated = (Parent: any) => class extends Parent{}; + customElements.define('astro-dev-overlay', deprecated(AstroDevOverlay)); + customElements.define('astro-dev-overlay-window', deprecated(DevOverlayWindow)); + customElements.define('astro-dev-overlay-plugin-canvas', deprecated(DevOverlayCanvas)); + customElements.define('astro-dev-overlay-tooltip', deprecated(DevOverlayTooltip)); + customElements.define('astro-dev-overlay-highlight', deprecated(DevOverlayHighlight)); + customElements.define('astro-dev-overlay-card', deprecated(DevOverlayCard)); + customElements.define('astro-dev-overlay-toggle', deprecated(DevOverlayToggle)); + customElements.define('astro-dev-overlay-button', deprecated(DevOverlayButton)); + customElements.define('astro-dev-overlay-badge', deprecated(DevOverlayBadge)); + customElements.define('astro-dev-overlay-icon', deprecated(DevOverlayIcon)); + + overlay = document.createElement('astro-dev-toolbar'); const preparePlugin = ( pluginDefinition: DevOverlayPluginDefinition, @@ -76,14 +89,18 @@ document.addEventListener('DOMContentLoaded', async () => { target.querySelector('.notification')?.toggleAttribute('data-active', newState); }); - eventTarget.addEventListener('toggle-plugin', async (evt) => { + const onToggleApp = async (evt: Event) => { let newState = undefined; if (evt instanceof CustomEvent) { newState = evt.detail.state ?? true; } await overlay.setPluginStatus(plugin, newState); - }); + }; + + eventTarget.addEventListener('toggle-app', onToggleApp); + // Deprecated + eventTarget.addEventListener('toggle-plugin', onToggleApp); return plugin; }; diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index 798be5e7d8..7cd92d160a 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -15,7 +15,8 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & { }; eventTarget: EventTarget; }; -const WS_EVENT_NAME = 'astro-dev-overlay'; +const WS_EVENT_NAME = 'astro-dev-toolbar'; +const WS_EVENT_NAME_DEPRECATED = 'astro-dev-overlay'; const HOVER_DELAY = 2 * 1000; export class AstroDevOverlay extends HTMLElement { @@ -43,12 +44,12 @@ export class AstroDevOverlay extends HTMLElement { /* Important! Reset all inherited styles to initial */ all: initial; z-index: 999999; - view-transition-name: astro-dev-overlay; + view-transition-name: astro-dev-toolbar; display: contents; } - ::view-transition-old(astro-dev-overlay), - ::view-transition-new(astro-dev-overlay) { + ::view-transition-old(astro-dev-toolbar), + ::view-transition-new(astro-dev-toolbar) { animation: none; } @@ -273,7 +274,7 @@ export class AstroDevOverlay extends HTMLElement { // Create plugin canvases this.plugins.forEach(async (plugin) => { if (settings.config.verbose) console.log(`Creating plugin canvas for ${plugin.id}`); - const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas'); + const pluginCanvas = document.createElement('astro-dev-toolbar-plugin-canvas'); pluginCanvas.dataset.pluginId = plugin.id; this.shadowRoot?.append(pluginCanvas); }); @@ -384,6 +385,7 @@ export class AstroDevOverlay extends HTMLElement { if (import.meta.hot) { import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:initialized`); + import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${plugin.id}:initialized`); } } catch (e) { console.error(`Failed to init plugin ${plugin.id}, error: ${e}`); @@ -404,7 +406,7 @@ export class AstroDevOverlay extends HTMLElement { getPluginCanvasById(id: string) { return this.shadowRoot.querySelector( - `astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]` + `astro-dev-toolbar-plugin-canvas[data-plugin-id="${id}"]` ); } @@ -462,17 +464,24 @@ export class AstroDevOverlay extends HTMLElement { pluginCanvas.removeAttribute('data-active'); } - plugin.eventTarget.dispatchEvent( - new CustomEvent('plugin-toggled', { - detail: { - state: plugin.active, - plugin, - }, - }) - ); + [ + 'app-toggled', + // Deprecated + 'plugin-toggled' + ].forEach(eventName => { + plugin.eventTarget.dispatchEvent( + new CustomEvent(eventName, { + detail: { + state: plugin.active, + plugin, + }, + }) + ); + }); if (import.meta.hot) { import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active }); + import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${plugin.id}:toggled`, { state: plugin.active }); } return true; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts index 15f7205bdd..d3f0d03e67 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -87,7 +87,7 @@ export default { justify-content: center; } - #buttons-container astro-dev-overlay-card { + #buttons-container astro-dev-toolbar-card { flex: 1; } @@ -222,7 +222,7 @@ export default { height: 1px; } - #integration-list astro-dev-overlay-card, .integration-skeleton { + #integration-list astro-dev-toolbar-card, .integration-skeleton { min-width: 240px; height: 160px; } @@ -242,7 +242,7 @@ export default { } } - #integration-list astro-dev-overlay-card .integration-image { + #integration-list astro-dev-toolbar-card .integration-image { width: 40px; height: 40px; background-color: var(--integration-image-background, white); @@ -253,12 +253,12 @@ export default { margin-bottom: 8px; } - #integration-list astro-dev-overlay-card img { + #integration-list astro-dev-toolbar-card img { width: 24px; height: 24px; } - #integration-list astro-dev-overlay-card astro-dev-overlay-icon { + #integration-list astro-dev-toolbar-card astro-dev-toolbar-icon { width: 24px; height: 24px; color: #fff; @@ -287,26 +287,26 @@ export default { color: rgba(145, 152, 173, 1); } - #links astro-dev-overlay-icon { + #links astro-dev-toolbar-icon { width: 1.5em; height: 1.5em; display: block; } - #integration-list astro-dev-overlay-card svg { + #integration-list astro-dev-toolbar-card svg { width: 24px; height: 24px; vertical-align: bottom; } - #integration-list astro-dev-overlay-card h3 { + #integration-list astro-dev-toolbar-card h3 { margin: 0; margin-bottom: 8px; color: white; white-space: nowrap; } - #integration-list astro-dev-overlay-card p { + #integration-list astro-dev-toolbar-card p { font-size: 14px; } @@ -320,11 +320,11 @@ export default {
${astroLogo} - ${ + ${ (window as DevOverlayMetadata).__astro_dev_overlay__.version - } + }
- Copy debug info + Copy debug info
@@ -345,9 +345,9 @@ export default { ${links .map( (link) => - `` : `>${link.icon}` - }${link.name}` + }${link.name}` ) .join('')} @@ -376,7 +376,7 @@ export default { const copyDebugButton = canvas.querySelector('#copy-debug-button'); if (!copyDebugButton) return; - copyDebugButton.innerHTML = 'Copy debug info '; + copyDebugButton.innerHTML = 'Copy debug info '; } function refreshIntegrationList() { @@ -387,7 +387,7 @@ export default { const fragment = document.createDocumentFragment(); for (const integration of integrationData.data) { - const integrationComponent = document.createElement('astro-dev-overlay-card'); + const integrationComponent = document.createElement('astro-dev-toolbar-card'); integrationComponent.link = integration.homepageUrl; const integrationContainer = document.createElement('div'); @@ -402,7 +402,7 @@ export default { img.alt = integration.title; integrationImage.append(img); } else { - const icon = document.createElement('astro-dev-overlay-icon'); + const icon = document.createElement('astro-dev-toolbar-icon'); icon.icon = iconForIntegration(integration); integrationImage.append(icon); integrationImage.style.setProperty( diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts index 515b85b71d..51d63f7ab4 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts @@ -79,7 +79,7 @@ export default { font-size: 22px; } - astro-dev-overlay-icon { + astro-dev-toolbar-icon { width: 1em; height: 1em; padding: 8px; @@ -89,7 +89,7 @@ export default { }
-

No issues detected.

+

No issues detected.

` ); @@ -106,7 +106,7 @@ export default { const noAuditBlock = canvas.getElementById('no-audit'); if (noAuditBlock) { const devOverlayRect = document - .querySelector('astro-dev-overlay') + .querySelector('astro-dev-toolbar') ?.shadowRoot.querySelector('#dev-overlay') ?.getBoundingClientRect(); @@ -145,7 +145,7 @@ export default { } function buildAuditTooltip(rule: AuditRule, element: Element) { - const tooltip = document.createElement('astro-dev-overlay-tooltip'); + const tooltip = document.createElement('astro-dev-toolbar-tooltip'); tooltip.sections = [ { diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts index b0a262dfa4..daf1cae000 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts @@ -18,7 +18,7 @@ const settingsRows = [ settingKey: 'disablePluginNotification', changeEvent: (evt: Event) => { if (evt.currentTarget instanceof HTMLInputElement) { - const devOverlay = document.querySelector('astro-dev-overlay'); + const devOverlay = document.querySelector('astro-dev-toolbar'); if (devOverlay) { devOverlay.setNotificationVisible(!evt.currentTarget.checked); @@ -57,7 +57,7 @@ export default { function createSettingsWindow() { const windowElement = createWindowElement( `
-

Settings

+

Settings

@@ -150,7 +150,7 @@ export default { switch (setting.input) { case 'checkbox': { - const astroToggle = document.createElement('astro-dev-overlay-toggle'); + const astroToggle = document.createElement('astro-dev-toolbar-toggle'); astroToggle.input.addEventListener('change', setting.changeEvent); astroToggle.input.checked = settings.config[setting.settingKey]; label.append(astroToggle); diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts index 218ad310c0..9dad2b0f59 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts @@ -2,7 +2,7 @@ import type { DevOverlayHighlight } from '../../ui-library/highlight.js'; import type { Icon } from '../../ui-library/icons.js'; export function createHighlight(rect: DOMRect, icon?: Icon) { - const highlight = document.createElement('astro-dev-overlay-highlight'); + const highlight = document.createElement('astro-dev-toolbar-highlight'); if (icon) highlight.icon = icon; highlight.tabIndex = 0; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts index 7b152cc551..fb107e19c8 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts @@ -1,5 +1,5 @@ export function createWindowElement(content: string) { - const windowElement = document.createElement('astro-dev-overlay-window'); + const windowElement = document.createElement('astro-dev-toolbar-window'); windowElement.innerHTML = content; return windowElement; } diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts index 56934d4e7e..ed1be3edea 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts @@ -48,7 +48,7 @@ export default { font-size: 22px; } - astro-dev-overlay-icon { + astro-dev-toolbar-icon { width: 1em; height: 1em; padding: 8px; @@ -58,7 +58,7 @@ export default { }
-

No islands detected.

+

No islands detected.

` ); @@ -111,7 +111,7 @@ export default { } function buildIslandTooltip(island: HTMLElement) { - const tooltip = document.createElement('astro-dev-overlay-tooltip'); + const tooltip = document.createElement('astro-dev-toolbar-tooltip'); tooltip.sections = []; const islandProps = island.getAttribute('props') diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts index 7c39fdc1d6..f2bd75d702 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts @@ -72,7 +72,8 @@ export class DevOverlayButton extends HTMLElement { border-color: rgba(249, 196, 215, 0.33); } - ::slotted(astro-dev-overlay-icon) { + ::slotted(astro-dev-overlay-icon), + ::slotted(astro-dev-toolbar-icon) { display: inline-block; height: 1em; width: 1em; diff --git a/packages/astro/src/vite-plugin-astro-server/route.ts b/packages/astro/src/vite-plugin-astro-server/route.ts index 510658345e..e677a81a74 100644 --- a/packages/astro/src/vite-plugin-astro-server/route.ts +++ b/packages/astro/src/vite-plugin-astro-server/route.ts @@ -401,7 +401,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa if ( settings.config.devOverlay.enabled && - (await settings.preferences.get('devOverlay.enabled')) + (await settings.preferences.get('devToolbar.enabled')) ) { scripts.add({ props: { diff --git a/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts b/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts index 5c3aabe5ac..201e6aac63 100644 --- a/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts +++ b/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts @@ -16,7 +16,7 @@ export default function astroDevOverlay({ settings }: AstroPluginOptions): vite. if (id === resolvedVirtualModuleId) { return ` export const loadDevOverlayPlugins = async () => { - return [${settings.devOverlayPlugins + return [${settings.devToolbarApps .map((plugin) => `(await import('${plugin}')).default`) .join(',')}]; };