From d690a2c8a721a83167585d748dbd1c55c0423205 Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Mon, 8 Jan 2024 17:45:02 -0500 Subject: [PATCH 1/4] refactor(toolbar): Rename every internal reference of overlay/plugins to toolbar/apps --- ...ev-overlay.test.js => dev-toolbar.test.js} | 156 ++++++------ .../astro.config.mjs | 0 .../{dev-overlay => dev-toolbar}/package.json | 2 +- .../src/components/HelloWorld.tsx | 0 .../src/pages/audit-no-warning.astro | 0 .../src/pages/index.astro | 0 .../src/pages/tooltip-position.astro | 0 .../src/pages/xray-no-islands.astro | 0 packages/astro/src/@types/astro.ts | 69 ++--- .../client/dev-overlay/ui-library/index.ts | 8 - .../plugins => dev-toolbar/apps}/astro.ts | 10 +- .../apps}/audit/a11y.ts | 0 .../apps}/audit/index.ts | 16 +- .../plugins => dev-toolbar/apps}/settings.ts | 18 +- .../apps}/utils/highlight.ts | 6 +- .../apps}/utils/icons.ts | 0 .../apps}/utils/window.ts | 0 .../plugins => dev-toolbar/apps}/xray.ts | 18 +- .../entrypoint.ts | 149 ++++++----- .../{dev-overlay => dev-toolbar}/settings.ts | 12 +- .../overlay.ts => dev-toolbar/toolbar.ts} | 239 +++++++++--------- .../ui-library/badge.ts | 2 +- .../ui-library/button.ts | 3 +- .../ui-library/card.ts | 2 +- .../ui-library/highlight.ts | 2 +- .../ui-library/icon.ts | 2 +- .../ui-library/icons.ts | 0 .../client/dev-toolbar/ui-library/index.ts | 8 + .../ui-library/toggle.ts | 2 +- .../ui-library/tooltip.ts | 6 +- .../ui-library/window.ts | 4 +- .../src/vite-plugin-astro-server/route.ts | 10 +- .../vite-plugin-dev-overlay.ts | 2 +- pnpm-lock.yaml | 2 +- 34 files changed, 364 insertions(+), 384 deletions(-) rename packages/astro/e2e/{dev-overlay.test.js => dev-toolbar.test.js} (50%) rename packages/astro/e2e/fixtures/{dev-overlay => dev-toolbar}/astro.config.mjs (100%) rename packages/astro/e2e/fixtures/{dev-overlay => dev-toolbar}/package.json (84%) rename packages/astro/e2e/fixtures/{dev-overlay => dev-toolbar}/src/components/HelloWorld.tsx (100%) rename packages/astro/e2e/fixtures/{dev-overlay => dev-toolbar}/src/pages/audit-no-warning.astro (100%) rename packages/astro/e2e/fixtures/{dev-overlay => dev-toolbar}/src/pages/index.astro (100%) rename packages/astro/e2e/fixtures/{dev-overlay => dev-toolbar}/src/pages/tooltip-position.astro (100%) rename packages/astro/e2e/fixtures/{dev-overlay => dev-toolbar}/src/pages/xray-no-islands.astro (100%) delete mode 100644 packages/astro/src/runtime/client/dev-overlay/ui-library/index.ts rename packages/astro/src/runtime/client/{dev-overlay/plugins => dev-toolbar/apps}/astro.ts (98%) rename packages/astro/src/runtime/client/{dev-overlay/plugins => dev-toolbar/apps}/audit/a11y.ts (100%) rename packages/astro/src/runtime/client/{dev-overlay/plugins => dev-toolbar/apps}/audit/index.ts (94%) rename packages/astro/src/runtime/client/{dev-overlay/plugins => dev-toolbar/apps}/settings.ts (88%) rename packages/astro/src/runtime/client/{dev-overlay/plugins => dev-toolbar/apps}/utils/highlight.ts (93%) rename packages/astro/src/runtime/client/{dev-overlay/plugins => dev-toolbar/apps}/utils/icons.ts (100%) rename packages/astro/src/runtime/client/{dev-overlay/plugins => dev-toolbar/apps}/utils/window.ts (100%) rename packages/astro/src/runtime/client/{dev-overlay/plugins => dev-toolbar/apps}/xray.ts (93%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/entrypoint.ts (60%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/settings.ts (71%) rename packages/astro/src/runtime/client/{dev-overlay/overlay.ts => dev-toolbar/toolbar.ts} (58%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/ui-library/badge.ts (96%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/ui-library/button.ts (94%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/ui-library/card.ts (96%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/ui-library/highlight.ts (96%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/ui-library/icon.ts (95%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/ui-library/icons.ts (100%) create mode 100644 packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/ui-library/toggle.ts (96%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/ui-library/tooltip.ts (96%) rename packages/astro/src/runtime/client/{dev-overlay => dev-toolbar}/ui-library/window.ts (97%) diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-toolbar.test.js similarity index 50% rename from packages/astro/e2e/dev-overlay.test.js rename to packages/astro/e2e/dev-toolbar.test.js index 0a0fca6dd4ce..107c80b08f2a 100644 --- a/packages/astro/e2e/dev-overlay.test.js +++ b/packages/astro/e2e/dev-toolbar.test.js @@ -2,7 +2,7 @@ import { expect } from '@playwright/test'; import { testFactory } from './test-utils.js'; const test = testFactory({ - root: './fixtures/dev-overlay/', + root: './fixtures/dev-toolbar/', }); let devServer; @@ -15,54 +15,50 @@ test.afterAll(async () => { await devServer.stop(); }); -test.describe('Dev Overlay', () => { - test('dev overlay exists in the page', async ({ page, astro }) => { +test.describe('Dev Toolbar', () => { + test('dev toolbar exists in the page', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); const devToolbar = page.locator('astro-dev-toolbar'); await expect(devToolbar).toHaveCount(1); }); - test('shows plugin name on hover', async ({ page, astro }) => { + test('shows app name on hover', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - 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(); + const toolbar = page.locator('astro-dev-toolbar'); + const appButton = toolbar.locator('button[data-app-id="astro"]'); + const appButtonTooltip = appButton.locator('.item-tooltip'); + await appButton.hover(); - await expect(pluginButtonTooltip).toBeVisible(); + await expect(appButtonTooltip).toBeVisible(); }); - test('can open Astro plugin', async ({ page, astro }) => { + test('can open Astro app', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const overlay = page.locator('astro-dev-toolbar'); - const pluginButton = overlay.locator('button[data-plugin-id="astro"]'); - await pluginButton.click(); + const toolbar = page.locator('astro-dev-toolbar'); + const appButton = toolbar.locator('button[data-app-id="astro"]'); + await appButton.click(); - const astroPluginCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]' - ); - const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window'); + const astroAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro"]'); + const astroWindow = astroAppCanvas.locator('astro-dev-toolbar-window'); await expect(astroWindow).toHaveCount(1); await expect(astroWindow).toBeVisible(); - // Toggle plugin off - await pluginButton.click(); + // Toggle app off + await appButton.click(); await expect(astroWindow).not.toBeVisible(); }); test('xray shows highlights and tooltips', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const overlay = page.locator('astro-dev-toolbar'); - const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]'); - await pluginButton.click(); + const toolbar = page.locator('astro-dev-toolbar'); + const appButton = toolbar.locator('button[data-app-id="astro:xray"]'); + await appButton.click(); - const xrayCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]' - ); + const xrayCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:xray"]'); const xrayHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight'); await expect(xrayHighlight).toBeVisible(); @@ -70,8 +66,8 @@ test.describe('Dev Overlay', () => { const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-toolbar-tooltip'); await expect(xrayHighlightTooltip).toBeVisible(); - // Toggle plugin off - await pluginButton.click(); + // Toggle app off + await appButton.click(); await expect(xrayHighlight).not.toBeVisible(); await expect(xrayHighlightTooltip).not.toBeVisible(); }); @@ -79,13 +75,11 @@ test.describe('Dev Overlay', () => { 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 toolbar = page.locator('astro-dev-toolbar'); + const appButton = toolbar.locator('button[data-app-id="astro:xray"]'); + await appButton.click(); - const xrayCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]' - ); + const xrayCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:xray"]'); const auditHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight'); await expect(auditHighlight).not.toBeVisible(); @@ -99,13 +93,11 @@ test.describe('Dev Overlay', () => { test('audit shows higlights and tooltips', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const overlay = page.locator('astro-dev-toolbar'); - const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]'); - await pluginButton.click(); + const toolbar = page.locator('astro-dev-toolbar'); + const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); + await appButton.click(); - const auditCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]' - ); + const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]'); const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight'); await expect(auditHighlight).toBeVisible(); @@ -113,8 +105,8 @@ test.describe('Dev Overlay', () => { const auditHighlightTooltip = auditHighlight.locator('astro-dev-toolbar-tooltip'); await expect(auditHighlightTooltip).toBeVisible(); - // Toggle plugin off - await pluginButton.click(); + // Toggle app off + await appButton.click(); await expect(auditHighlight).not.toBeVisible(); await expect(auditHighlightTooltip).not.toBeVisible(); }); @@ -122,13 +114,11 @@ test.describe('Dev Overlay', () => { 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 toolbar = page.locator('astro-dev-toolbar'); + const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); + await appButton.click(); - const auditCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]' - ); + const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]'); const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight'); await expect(auditHighlight).not.toBeVisible(); @@ -142,13 +132,11 @@ test.describe('Dev Overlay', () => { test('adjusts tooltip position if off-screen', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/tooltip-position')); - const overlay = page.locator('astro-dev-toolbar'); - const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]'); - await pluginButton.click(); + const toolbar = page.locator('astro-dev-toolbar'); + const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); + await appButton.click(); - const auditCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]' - ); + const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]'); const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight'); for (const highlight of await auditHighlights.all()) { await expect(highlight).toBeVisible(); @@ -165,68 +153,66 @@ test.describe('Dev Overlay', () => { } }); - test('can open Settings plugin', async ({ page, astro }) => { + test('can open Settings app', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - const overlay = page.locator('astro-dev-toolbar'); - const pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]'); - await pluginButton.click(); + const toolbar = page.locator('astro-dev-toolbar'); + const appButton = toolbar.locator('button[data-app-id="astro:settings"]'); + await appButton.click(); - const settingsPluginCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]' + const settingsAppCanvas = toolbar.locator( + 'astro-dev-toolbar-app-canvas[data-app-id="astro:settings"]' ); - const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window'); + const settingsWindow = settingsAppCanvas.locator('astro-dev-toolbar-window'); await expect(settingsWindow).toHaveCount(1); await expect(settingsWindow).toBeVisible(); - // Toggle plugin off - await pluginButton.click(); + // Toggle app off + await appButton.click(); await expect(settingsWindow).not.toBeVisible(); }); - test('Opening a plugin closes the currently opened plugin', async ({ page, astro }) => { + test('Opening a app closes the currently opened app', 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 toolbar = page.locator('astro-dev-toolbar'); + let appButton = toolbar.locator('button[data-app-id="astro:settings"]'); + await appButton.click(); - const settingsPluginCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]' + const settingsAppCanvas = toolbar.locator( + 'astro-dev-toolbar-app-canvas[data-app-id="astro:settings"]' ); - const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window'); + const settingsWindow = settingsAppCanvas.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(); + // Click the astro app + appButton = toolbar.locator('button[data-app-id="astro"]'); + await appButton.click(); - const astroPluginCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]' - ); - const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window'); + const astroAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro"]'); + const astroWindow = astroAppCanvas.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 }) => { + test('Settings app contains message on disabling the toolbar', 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 toolbar = page.locator('astro-dev-toolbar'); + let appButton = toolbar.locator('button[data-app-id="astro:settings"]'); + await appButton.click(); - const settingsPluginCanvas = overlay.locator( - 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]' + const settingsAppCanvas = toolbar.locator( + 'astro-dev-toolbar-app-canvas[data-app-id="astro:settings"]' ); - const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window'); + const settingsWindow = settingsAppCanvas.locator('astro-dev-toolbar-window'); await expect(settingsWindow).toHaveCount(1); await expect(settingsWindow).toBeVisible(); - const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide toolbar' }); - await expect(hideOverlay).toBeVisible(); + const hideToolbar = settingsWindow.getByRole('heading', { name: 'Hide toolbar' }); + await expect(hideToolbar).toBeVisible(); }); }); diff --git a/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs b/packages/astro/e2e/fixtures/dev-toolbar/astro.config.mjs similarity index 100% rename from packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs rename to packages/astro/e2e/fixtures/dev-toolbar/astro.config.mjs diff --git a/packages/astro/e2e/fixtures/dev-overlay/package.json b/packages/astro/e2e/fixtures/dev-toolbar/package.json similarity index 84% rename from packages/astro/e2e/fixtures/dev-overlay/package.json rename to packages/astro/e2e/fixtures/dev-toolbar/package.json index 6cd05404d6a2..611f6aae4ede 100644 --- a/packages/astro/e2e/fixtures/dev-overlay/package.json +++ b/packages/astro/e2e/fixtures/dev-toolbar/package.json @@ -1,5 +1,5 @@ { - "name": "@e2e/dev-overlay", + "name": "@e2e/dev-toolbar", "version": "0.0.0", "private": true, "dependencies": { diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx b/packages/astro/e2e/fixtures/dev-toolbar/src/components/HelloWorld.tsx similarity index 100% rename from packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx rename to packages/astro/e2e/fixtures/dev-toolbar/src/components/HelloWorld.tsx diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/audit-no-warning.astro similarity index 100% rename from packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro rename to packages/astro/e2e/fixtures/dev-toolbar/src/pages/audit-no-warning.astro diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/index.astro similarity index 100% rename from packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro rename to packages/astro/e2e/fixtures/dev-toolbar/src/pages/index.astro diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/tooltip-position.astro similarity index 100% rename from packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro rename to packages/astro/e2e/fixtures/dev-toolbar/src/pages/tooltip-position.astro diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/xray-no-islands.astro similarity index 100% rename from packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro rename to packages/astro/e2e/fixtures/dev-toolbar/src/pages/xray-no-islands.astro diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 97429212c698..e7099ad38af4 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -21,18 +21,18 @@ import type { TSConfig } from '../core/config/tsconfig.js'; import type { AstroCookies } from '../core/cookies/index.js'; import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger/core.js'; import type { AstroPreferences } from '../preferences/index.js'; -import type { AstroDevOverlay, DevOverlayCanvas } from '../runtime/client/dev-overlay/overlay.js'; -import type { Icon } from '../runtime/client/dev-overlay/ui-library/icons.js'; +import type { AstroDevToolbar, DevToolbarCanvas } from '../runtime/client/dev-toolbar/toolbar.js'; +import type { Icon } from '../runtime/client/dev-toolbar/ui-library/icons.js'; import type { - DevOverlayBadge, - DevOverlayButton, - DevOverlayCard, - DevOverlayHighlight, - DevOverlayIcon, - DevOverlayToggle, - DevOverlayTooltip, - DevOverlayWindow, -} from '../runtime/client/dev-overlay/ui-library/index.js'; + DevToolbarBadge, + DevToolbarButton, + DevToolbarCard, + DevToolbarHighlight, + DevToolbarIcon, + DevToolbarToggle, + DevToolbarTooltip, + DevToolbarWindow, +} from '../runtime/client/dev-toolbar/ui-library/index.js'; import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js'; import type { DeepPartial, OmitIndexSignature, Simplify } from '../type-utils.js'; import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js'; @@ -2331,6 +2331,7 @@ export interface AstroIntegration { addClientDirective: (directive: ClientDirectiveConfig) => void; /** * @deprecated Use `addDevToolbarApp` instead. + * TODO: Fully remove in Astro 5.0 */ addDevOverlayPlugin: (entrypoint: string) => void; addDevToolbarApp: (entrypoint: string) => void; @@ -2598,11 +2599,12 @@ export interface DevToolbarApp { beforeTogglingOff?(canvas: ShadowRoot): boolean | Promise; } +// TODO: Remove in Astro 5.0 export type DevOverlayPlugin = DevToolbarApp; -export type DevOverlayMetadata = Window & +export type DevToolbarMetadata = Window & typeof globalThis & { - __astro_dev_overlay__: { + __astro_dev_toolbar__: { root: string; version: string; debugInfo: string; @@ -2611,27 +2613,28 @@ 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; + 'astro-dev-toolbar': AstroDevToolbar; + 'astro-dev-toolbar-window': DevToolbarWindow; + 'astro-dev-toolbar-app-canvas': DevToolbarCanvas; + 'astro-dev-toolbar-tooltip': DevToolbarTooltip; + 'astro-dev-toolbar-highlight': DevToolbarHighlight; + 'astro-dev-toolbar-toggle': DevToolbarToggle; + 'astro-dev-toolbar-badge': DevToolbarBadge; + 'astro-dev-toolbar-button': DevToolbarButton; + 'astro-dev-toolbar-icon': DevToolbarIcon; + 'astro-dev-toolbar-card': DevToolbarCard; // Deprecated names - 'astro-dev-overlay': AstroDevOverlay; - 'astro-dev-overlay-window': DevOverlayWindow; - 'astro-dev-overlay-plugin-canvas': DevOverlayCanvas; - 'astro-dev-overlay-tooltip': DevOverlayTooltip; - 'astro-dev-overlay-highlight': DevOverlayHighlight; - 'astro-dev-overlay-toggle': DevOverlayToggle; - 'astro-dev-overlay-badge': DevOverlayBadge; - 'astro-dev-overlay-button': DevOverlayButton; - 'astro-dev-overlay-icon': DevOverlayIcon; - 'astro-dev-overlay-card': DevOverlayCard; + // TODO: Remove in Astro 5.0 + 'astro-dev-overlay': AstroDevToolbar; + 'astro-dev-overlay-window': DevToolbarWindow; + 'astro-dev-overlay-plugin-canvas': DevToolbarCanvas; + 'astro-dev-overlay-tooltip': DevToolbarTooltip; + 'astro-dev-overlay-highlight': DevToolbarHighlight; + 'astro-dev-overlay-toggle': DevToolbarToggle; + 'astro-dev-overlay-badge': DevToolbarBadge; + 'astro-dev-overlay-button': DevToolbarButton; + 'astro-dev-overlay-icon': DevToolbarIcon; + 'astro-dev-overlay-card': DevToolbarCard; } } diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/index.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/index.ts deleted file mode 100644 index a9c039a417ff..000000000000 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export { DevOverlayBadge } from './badge.js'; -export { DevOverlayButton } from './button.js'; -export { DevOverlayCard } from './card.js'; -export { DevOverlayHighlight } from './highlight.js'; -export { DevOverlayIcon } from './icon.js'; -export { DevOverlayToggle } from './toggle.js'; -export { DevOverlayTooltip } from './tooltip.js'; -export { DevOverlayWindow } from './window.js'; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts similarity index 98% rename from packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts rename to packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts index d3f0d03e6789..bbc52d12ba8f 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts @@ -1,4 +1,4 @@ -import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js'; +import type { DevToolbarApp, DevToolbarMetadata } from '../../../../@types/astro.js'; import { isDefinedIcon, type Icon } from '../ui-library/icons.js'; import { colorForIntegration, iconForIntegration } from './utils/icons.js'; import { createWindowElement } from './utils/window.js'; @@ -35,7 +35,7 @@ export default { document.addEventListener('astro:after-swap', createCanvas); - eventTarget.addEventListener('plugin-toggled', async (event) => { + eventTarget.addEventListener('app-toggled', async (event) => { resetDebugButton(); if (!(event instanceof CustomEvent)) return; @@ -321,7 +321,7 @@ export default {
${astroLogo} ${ - (window as DevOverlayMetadata).__astro_dev_overlay__.version + (window as DevToolbarMetadata).__astro_dev_toolbar__.version }
Copy debug info @@ -360,7 +360,7 @@ export default { copyDebugButton?.addEventListener('click', () => { navigator.clipboard.writeText( - '```\n' + (window as DevOverlayMetadata).__astro_dev_overlay__.debugInfo + '\n```' + '```\n' + (window as DevToolbarMetadata).__astro_dev_toolbar__.debugInfo + '\n```' ); copyDebugButton.textContent = 'Copied to clipboard!'; @@ -436,4 +436,4 @@ export default { integrationList.append(fragment); } }, -} satisfies DevOverlayPlugin; +} satisfies DevToolbarApp; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/audit/a11y.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/a11y.ts similarity index 100% rename from packages/astro/src/runtime/client/dev-overlay/plugins/audit/a11y.ts rename to packages/astro/src/runtime/client/dev-toolbar/apps/audit/a11y.ts diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/audit/index.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts similarity index 94% rename from packages/astro/src/runtime/client/dev-overlay/plugins/audit/index.ts rename to packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts index 175fe0ab66c1..639e16269cf4 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/audit/index.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts @@ -1,5 +1,5 @@ -import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../../@types/astro.js'; -import type { DevOverlayHighlight } from '../../ui-library/highlight.js'; +import type { DevToolbarApp, DevToolbarMetadata } from '../../../../../@types/astro.js'; +import type { DevToolbarHighlight } from '../../ui-library/highlight.js'; import { attachTooltipToHighlight, createHighlight, @@ -49,7 +49,7 @@ export default { name: 'Audit', icon: icon, async init(canvas, eventTarget) { - let audits: { highlightElement: DevOverlayHighlight; auditedElement: HTMLElement }[] = []; + let audits: { highlightElement: DevToolbarHighlight; auditedElement: HTMLElement }[] = []; await lint(); @@ -62,14 +62,14 @@ export default { if (!target.closest) return; if (target.closest('astro-dev-toolbar')) return; eventTarget.dispatchEvent( - new CustomEvent('toggle-plugin', { + new CustomEvent('toggle-app', { detail: { state: false, }, }) ); } - eventTarget.addEventListener('plugin-toggled', (event: any) => { + eventTarget.addEventListener('app-toggled', (event: any) => { if (event.detail.state === true) { document.addEventListener('click', onPageClick, true); } else { @@ -167,7 +167,7 @@ export default { if (noAuditBlock) { const devOverlayRect = document .querySelector('astro-dev-toolbar') - ?.shadowRoot.querySelector('#dev-overlay') + ?.shadowRoot.querySelector('#dev-toolbar-root') ?.getBoundingClientRect(); noAuditBlock.style.top = `${ @@ -240,7 +240,7 @@ export default { tooltip.sections.push({ content: elementFileWithPosition.slice( - (window as DevOverlayMetadata).__astro_dev_overlay__.root.length - 1 // We want to keep the final slash, so minus one. + (window as DevToolbarMetadata).__astro_dev_toolbar__.root.length - 1 // We want to keep the final slash, so minus one. ), clickDescription: 'Click to go to file', async clickAction() { @@ -263,4 +263,4 @@ export default { .replace(/'/g, '''); } }, -} satisfies DevOverlayPlugin; +} satisfies DevToolbarApp; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts similarity index 88% rename from packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts rename to packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts index dc5fe4ae3637..7e7fa5e3a594 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts @@ -1,4 +1,4 @@ -import type { DevOverlayPlugin } from '../../../../@types/astro.js'; +import type { DevToolbarApp } from '../../../../@types/astro.js'; import { settings, type Settings } from '../settings.js'; import { createWindowElement } from './utils/window.js'; @@ -15,24 +15,24 @@ const settingsRows = [ name: 'Disable notifications', description: 'Hide notification badges in the toolbar.', input: 'checkbox', - settingKey: 'disablePluginNotification', + settingKey: 'disableAppNotification', changeEvent: (evt: Event) => { if (evt.currentTarget instanceof HTMLInputElement) { - const devOverlay = document.querySelector('astro-dev-toolbar'); + const devToolbar = document.querySelector('astro-dev-toolbar'); - if (devOverlay) { - devOverlay.setNotificationVisible(!evt.currentTarget.checked); + if (devToolbar) { + devToolbar.setNotificationVisible(!evt.currentTarget.checked); } - settings.updateSetting('disablePluginNotification', evt.currentTarget.checked); + settings.updateSetting('disableAppNotification', evt.currentTarget.checked); const action = evt.currentTarget.checked ? 'disabled' : 'enabled'; - settings.log(`Plugin notification badges ${action}`); + settings.log(`App notification badges ${action}`); } }, }, { name: 'Verbose logging', - description: 'Logs dev overlay events in the browser console.', + description: 'Logs dev toolbar events in the browser console.', input: 'checkbox', settingKey: 'verbose', changeEvent: (evt: Event) => { @@ -168,4 +168,4 @@ export default { } } }, -} satisfies DevOverlayPlugin; +} satisfies DevToolbarApp; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts similarity index 93% rename from packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts rename to packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts index 726905b71d4b..1ceb1f4e6c93 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts @@ -1,4 +1,4 @@ -import type { DevOverlayHighlight } from '../../ui-library/highlight.js'; +import type { DevToolbarHighlight } from '../../ui-library/highlight.js'; import type { Icon } from '../../ui-library/icons.js'; export function createHighlight(rect: DOMRect, icon?: Icon) { @@ -33,7 +33,7 @@ export function getElementsPositionInDocument(el: Element) { }; } -export function positionHighlight(highlight: DevOverlayHighlight, rect: DOMRect) { +export function positionHighlight(highlight: DevToolbarHighlight, rect: DOMRect) { highlight.style.display = 'block'; // If the highlight is fixed, don't position based on scroll const scrollY = highlight.style.position === 'fixed' ? 0 : window.scrollY; @@ -45,7 +45,7 @@ export function positionHighlight(highlight: DevOverlayHighlight, rect: DOMRect) } export function attachTooltipToHighlight( - highlight: DevOverlayHighlight, + highlight: DevToolbarHighlight, tooltip: HTMLElement, originalElement: Element ) { diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/icons.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/icons.ts similarity index 100% rename from packages/astro/src/runtime/client/dev-overlay/plugins/utils/icons.ts rename to packages/astro/src/runtime/client/dev-toolbar/apps/utils/icons.ts diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts similarity index 100% rename from packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts rename to packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts similarity index 93% rename from packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts rename to packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts index edc038df7afe..e6f8638a4469 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts @@ -1,5 +1,5 @@ -import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js'; -import type { DevOverlayHighlight } from '../ui-library/highlight.js'; +import type { DevToolbarApp, DevToolbarMetadata } from '../../../../@types/astro.js'; +import type { DevToolbarHighlight } from '../ui-library/highlight.js'; import { attachTooltipToHighlight, createHighlight, @@ -16,7 +16,7 @@ export default { name: 'Inspect', icon: icon, init(canvas, eventTarget) { - let islandsOverlays: { highlightElement: DevOverlayHighlight; island: HTMLElement }[] = []; + let islandsOverlays: { highlightElement: DevToolbarHighlight; island: HTMLElement }[] = []; addIslandsOverlay(); @@ -31,7 +31,7 @@ export default { event.preventDefault(); event.stopPropagation(); eventTarget.dispatchEvent( - new CustomEvent('toggle-plugin', { + new CustomEvent('toggle-app', { detail: { state: false, }, @@ -39,7 +39,7 @@ export default { ); } - eventTarget.addEventListener('plugin-toggled', (event: any) => { + eventTarget.addEventListener('app-toggled', (event: any) => { if (event.detail.state === true) { document.addEventListener('click', onPageClick, true); } else { @@ -61,7 +61,7 @@ export default { header { display: flex; } - + h1 { display: flex; align-items: center; @@ -71,7 +71,7 @@ export default { margin: 0; font-size: 22px; } - + astro-dev-toolbar-icon { width: 1em; height: 1em; @@ -181,7 +181,7 @@ export default { await fetch( '/__open-in-editor?file=' + encodeURIComponent( - (window as DevOverlayMetadata).__astro_dev_overlay__.root + + (window as DevToolbarMetadata).__astro_dev_toolbar__.root + islandComponentPath.slice(1) ) ); @@ -192,4 +192,4 @@ export default { return tooltip; } }, -} satisfies DevOverlayPlugin; +} satisfies DevToolbarApp; diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts similarity index 60% rename from packages/astro/src/runtime/client/dev-overlay/entrypoint.ts rename to packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts index fa3020b03c98..289d9ac2165b 100644 --- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts @@ -1,73 +1,71 @@ -import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js'; -import type { AstroDevOverlay, DevOverlayPlugin } from './overlay.js'; +import type { DevToolbarApp as DevToolbarAppDefinition } from '../../../@types/astro.js'; import { settings } from './settings.js'; +import type { AstroDevToolbar, DevToolbarApp } from './toolbar.js'; // @ts-expect-error -import { loadDevOverlayPlugins } from 'astro:dev-overlay'; +import { loadDevToolbarApps } from 'astro:dev-overlay'; -let overlay: AstroDevOverlay; +let overlay: AstroDevToolbar; document.addEventListener('DOMContentLoaded', async () => { const [ - customPluginsDefinitions, - { default: astroDevToolPlugin }, - { default: astroAuditPlugin }, - { default: astroXrayPlugin }, - { default: astroSettingsPlugin }, - { AstroDevOverlay, DevOverlayCanvas, getPluginIcon }, + customAppsDefinitions, + { default: astroDevToolApp }, + { default: astroAuditApp }, + { default: astroXrayApp }, + { default: astroSettingsApp }, + { AstroDevToolbar, DevToolbarCanvas, getAppIcon }, { - DevOverlayCard, - DevOverlayHighlight, - DevOverlayTooltip, - DevOverlayWindow, - DevOverlayToggle, - DevOverlayButton, - DevOverlayBadge, - DevOverlayIcon, + DevToolbarCard, + DevToolbarHighlight, + DevToolbarTooltip, + DevToolbarWindow, + DevToolbarToggle, + DevToolbarButton, + DevToolbarBadge, + DevToolbarIcon, }, ] = await Promise.all([ - loadDevOverlayPlugins() as DevOverlayPluginDefinition[], - import('./plugins/astro.js'), - import('./plugins/audit/index.js'), - import('./plugins/xray.js'), - import('./plugins/settings.js'), - import('./overlay.js'), + loadDevToolbarApps() as DevToolbarAppDefinition[], + import('./apps/astro.js'), + import('./apps/audit/index.js'), + import('./apps/xray.js'), + import('./apps/settings.js'), + import('./toolbar.js'), import('./ui-library/index.js'), ]); // Register custom elements - 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); + customElements.define('astro-dev-toolbar', AstroDevToolbar); + customElements.define('astro-dev-toolbar-window', DevToolbarWindow); + customElements.define('astro-dev-toolbar-app-canvas', DevToolbarCanvas); + customElements.define('astro-dev-toolbar-tooltip', DevToolbarTooltip); + customElements.define('astro-dev-toolbar-highlight', DevToolbarHighlight); + customElements.define('astro-dev-toolbar-card', DevToolbarCard); + customElements.define('astro-dev-toolbar-toggle', DevToolbarToggle); + customElements.define('astro-dev-toolbar-button', DevToolbarButton); + customElements.define('astro-dev-toolbar-badge', DevToolbarBadge); + customElements.define('astro-dev-toolbar-icon', DevToolbarIcon); // Add deprecated names + // TODO: Remove in Astro 5.0 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)); + customElements.define('astro-dev-overlay', deprecated(AstroDevToolbar)); + customElements.define('astro-dev-overlay-window', deprecated(DevToolbarWindow)); + customElements.define('astro-dev-overlay-plugin-canvas', deprecated(DevToolbarCanvas)); + customElements.define('astro-dev-overlay-tooltip', deprecated(DevToolbarTooltip)); + customElements.define('astro-dev-overlay-highlight', deprecated(DevToolbarHighlight)); + customElements.define('astro-dev-overlay-card', deprecated(DevToolbarCard)); + customElements.define('astro-dev-overlay-toggle', deprecated(DevToolbarToggle)); + customElements.define('astro-dev-overlay-button', deprecated(DevToolbarButton)); + customElements.define('astro-dev-overlay-badge', deprecated(DevToolbarBadge)); + customElements.define('astro-dev-overlay-icon', deprecated(DevToolbarIcon)); overlay = document.createElement('astro-dev-toolbar'); - const preparePlugin = ( - pluginDefinition: DevOverlayPluginDefinition, - builtIn: boolean - ): DevOverlayPlugin => { + const prepareApp = (appDefinition: DevToolbarAppDefinition, builtIn: boolean): DevToolbarApp => { const eventTarget = new EventTarget(); - const plugin = { - ...pluginDefinition, + const app = { + ...appDefinition, builtIn: builtIn, active: false, status: 'loading' as const, @@ -75,9 +73,9 @@ document.addEventListener('DOMContentLoaded', async () => { eventTarget: eventTarget, }; - // Events plugins can send to the overlay to update their status + // Events apps can send to the overlay to update their status eventTarget.addEventListener('toggle-notification', (evt) => { - const target = overlay.shadowRoot?.querySelector(`[data-plugin-id="${plugin.id}"]`); + const target = overlay.shadowRoot?.querySelector(`[data-app-id="${app.id}"]`); if (!target) return; let newState = true; @@ -85,7 +83,7 @@ document.addEventListener('DOMContentLoaded', async () => { newState = evt.detail.state ?? true; } - plugin.notification.state = newState; + app.notification.state = newState; target.querySelector('.notification')?.toggleAttribute('data-active', newState); }); @@ -96,22 +94,23 @@ document.addEventListener('DOMContentLoaded', async () => { newState = evt.detail.state ?? true; } - await overlay.setPluginStatus(plugin, newState); + await overlay.setAppStatus(app, newState); }; eventTarget.addEventListener('toggle-app', onToggleApp); // Deprecated + // TODO: Remove in Astro 5.0 eventTarget.addEventListener('toggle-plugin', onToggleApp); - return plugin; + return app; }; - const astromorePlugin = { + const astroMoreApp = { id: 'astro:more', name: 'More', icon: 'dots-three', init(canvas, eventTarget) { - const hiddenPlugins = plugins.filter((p) => !p.builtIn).slice(overlay.customPluginsToShow); + const hiddenApps = apps.filter((p) => !p.builtIn).slice(overlay.customAppsToShow); createDropdown(); @@ -192,17 +191,17 @@ document.addEventListener('DOMContentLoaded', async () => { const dropdown = document.createElement('div'); dropdown.id = 'dropdown'; - dropdown.toggleAttribute('data-no-notification', settings.config.disablePluginNotification); + dropdown.toggleAttribute('data-no-notification', settings.config.disableAppNotification); - for (const plugin of hiddenPlugins) { + for (const app of hiddenApps) { const buttonContainer = document.createElement('div'); buttonContainer.classList.add('item'); const button = document.createElement('button'); - button.setAttribute('data-plugin-id', plugin.id); + button.setAttribute('data-app-id', app.id); const iconContainer = document.createElement('div'); const iconElement = document.createElement('template'); - iconElement.innerHTML = getPluginIcon(plugin.icon); + iconElement.innerHTML = getAppIcon(app.icon); iconContainer.append(iconElement.content.cloneNode(true)); const notification = document.createElement('div'); @@ -211,16 +210,16 @@ document.addEventListener('DOMContentLoaded', async () => { iconContainer.classList.add('icon'); button.append(iconContainer); - button.append(document.createTextNode(plugin.name)); + button.append(document.createTextNode(app.name)); button.addEventListener('click', () => { - overlay.togglePluginStatus(plugin); + overlay.toggleAppStatus(app); }); buttonContainer.append(button); dropdown.append(buttonContainer); - plugin.eventTarget.addEventListener('toggle-notification', (evt) => { + app.eventTarget.addEventListener('toggle-notification', (evt) => { if (!(evt instanceof CustomEvent)) return; notification.toggleAttribute('data-active', evt.detail.state ?? true); @@ -228,7 +227,7 @@ document.addEventListener('DOMContentLoaded', async () => { eventTarget.dispatchEvent( new CustomEvent('toggle-notification', { detail: { - state: hiddenPlugins.some((p) => p.notification.state === true), + state: hiddenApps.some((p) => p.notification.state === true), }, }) ); @@ -238,20 +237,16 @@ document.addEventListener('DOMContentLoaded', async () => { canvas.append(dropdown); } }, - } satisfies DevOverlayPluginDefinition; - - const plugins: DevOverlayPlugin[] = [ - ...[ - astroDevToolPlugin, - astroXrayPlugin, - astroAuditPlugin, - astroSettingsPlugin, - astromorePlugin, - ].map((pluginDef) => preparePlugin(pluginDef, true)), - ...customPluginsDefinitions.map((pluginDef) => preparePlugin(pluginDef, false)), + } satisfies DevToolbarAppDefinition; + + const apps: DevToolbarApp[] = [ + ...[astroDevToolApp, astroXrayApp, astroAuditApp, astroSettingsApp, astroMoreApp].map( + (appDef) => prepareApp(appDef, true) + ), + ...customAppsDefinitions.map((appDef) => prepareApp(appDef, false)), ]; - overlay.plugins = plugins; + overlay.apps = apps; document.body.append(overlay); diff --git a/packages/astro/src/runtime/client/dev-overlay/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/settings.ts similarity index 71% rename from packages/astro/src/runtime/client/dev-overlay/settings.ts rename to packages/astro/src/runtime/client/dev-toolbar/settings.ts index d3f1c0d36989..9939fd4b9c58 100644 --- a/packages/astro/src/runtime/client/dev-overlay/settings.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/settings.ts @@ -1,10 +1,10 @@ export interface Settings { - disablePluginNotification: boolean; + disableAppNotification: boolean; verbose: boolean; } export const defaultSettings = { - disablePluginNotification: false, + disableAppNotification: false, verbose: false, } satisfies Settings; @@ -12,15 +12,15 @@ export const settings = getSettings(); function getSettings() { let _settings: Settings = { ...defaultSettings }; - const overlaySettings = localStorage.getItem('astro:dev-overlay:settings'); + const toolbarSettings = localStorage.getItem('astro:dev-toolbar:settings'); - if (overlaySettings) { - _settings = { ..._settings, ...JSON.parse(overlaySettings) }; + if (toolbarSettings) { + _settings = { ..._settings, ...JSON.parse(toolbarSettings) }; } function updateSetting(key: keyof Settings, value: Settings[typeof key]) { _settings[key] = value; - localStorage.setItem('astro:dev-overlay:settings', JSON.stringify(_settings)); + localStorage.setItem('astro:dev-toolbar:settings', JSON.stringify(_settings)); } function log(message: string) { diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts similarity index 58% rename from packages/astro/src/runtime/client/dev-overlay/overlay.ts rename to packages/astro/src/runtime/client/dev-toolbar/toolbar.ts index f85972418aaa..8e1c714014d6 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts @@ -1,12 +1,9 @@ /* eslint-disable no-console */ -import type { - DevOverlayMetadata, - DevOverlayPlugin as DevOverlayPluginDefinition, -} from '../../../@types/astro.js'; +import type { DevToolbarApp as DevToolbarAppDefinition } from '../../../@types/astro.js'; import { settings } from './settings.js'; import { getIconElement, isDefinedIcon, type Icon } from './ui-library/icons.js'; -export type DevOverlayPlugin = DevOverlayPluginDefinition & { +export type DevToolbarApp = DevToolbarAppDefinition & { builtIn: boolean; active: boolean; status: 'ready' | 'loading' | 'error'; @@ -16,18 +13,20 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & { eventTarget: EventTarget; }; const WS_EVENT_NAME = 'astro-dev-toolbar'; +// TODO: Remove in Astro 5.0 const WS_EVENT_NAME_DEPRECATED = 'astro-dev-overlay'; + const HOVER_DELAY = 2 * 1000; const DEVBAR_HITBOX_ABOVE = 42; -export class AstroDevOverlay extends HTMLElement { +export class AstroDevToolbar extends HTMLElement { shadowRoot: ShadowRoot; delayedHideTimeout: number | undefined; - devOverlay: HTMLDivElement | undefined; - plugins: DevOverlayPlugin[] = []; + devToolbarContainer: HTMLDivElement | undefined; + apps: DevToolbarApp[] = []; hasBeenInitialized = false; // TODO: This should be dynamic based on the screen size or at least configurable, erika - 2023-11-29 - customPluginsToShow = 3; + customAppsToShow = 3; constructor() { super(); @@ -54,7 +53,7 @@ export class AstroDevOverlay extends HTMLElement { animation: none; } - #dev-overlay { + #dev-toolbar-root { position: fixed; bottom: 0px; left: 50%; @@ -67,11 +66,11 @@ export class AstroDevOverlay extends HTMLElement { pointer-events: none; } - #dev-overlay[data-hidden] { + #dev-toolbar-root[data-hidden] { bottom: -40px; } - #dev-overlay[data-hidden] #dev-bar .item { + #dev-toolbar-root[data-hidden] #dev-bar .item { opacity: 0.2; } @@ -215,7 +214,7 @@ export class AstroDevOverlay extends HTMLElement { background: #B33E66; } - #dev-overlay:not([data-no-notification]) #dev-bar .item .notification[data-active] { + #dev-toolbar-root:not([data-no-notification]) #dev-bar .item .notification[data-active] { display: block; } @@ -229,66 +228,62 @@ export class AstroDevOverlay extends HTMLElement { width: 1px; } -
- ${this.plugins - .filter( - (plugin) => plugin.builtIn && !['astro:settings', 'astro:more'].includes(plugin.id) - ) - .map((plugin) => this.getPluginTemplate(plugin)) + ${this.apps + .filter((app) => app.builtIn && !['astro:settings', 'astro:more'].includes(app.id)) + .map((app) => this.getAppTemplate(app)) .join('')} ${ - this.plugins.filter((plugin) => !plugin.builtIn).length > 0 - ? `
${this.plugins - .filter((plugin) => !plugin.builtIn) - .slice(0, this.customPluginsToShow) - .map((plugin) => this.getPluginTemplate(plugin)) + this.apps.filter((app) => !app.builtIn).length > 0 + ? `
${this.apps + .filter((app) => !app.builtIn) + .slice(0, this.customAppsToShow) + .map((app) => this.getAppTemplate(app)) .join('')}` : '' } ${ - this.plugins.filter((plugin) => !plugin.builtIn).length > this.customPluginsToShow - ? this.getPluginTemplate( - this.plugins.find((plugin) => plugin.builtIn && plugin.id === 'astro:more')! + this.apps.filter((app) => !app.builtIn).length > this.customAppsToShow + ? this.getAppTemplate( + this.apps.find((app) => app.builtIn && app.id === 'astro:more')! ) : '' }
- ${this.getPluginTemplate( - this.plugins.find((plugin) => plugin.builtIn && plugin.id === 'astro:settings')! - )} + ${this.getAppTemplate(this.apps.find((app) => app.builtIn && app.id === 'astro:settings')!)}
`; - this.devOverlay = this.shadowRoot.querySelector('#dev-overlay')!; + this.devToolbarContainer = this.shadowRoot.querySelector('#dev-toolbar-root')!; this.attachEvents(); - // 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-toolbar-plugin-canvas'); - pluginCanvas.dataset.pluginId = plugin.id; - this.shadowRoot?.append(pluginCanvas); + // Create app canvases + this.apps.forEach(async (app) => { + if (settings.config.verbose) console.log(`Creating app canvas for ${app.id}`); + const appCanvas = document.createElement('astro-dev-toolbar-app-canvas'); + appCanvas.dataset.appId = app.id; + this.shadowRoot?.append(appCanvas); }); - // Init plugin lazily, so that the page can load faster. + // Init app lazily, so that the page can load faster. // Fallback to setTimeout for Safari (sad!) if ('requestIdleCallback' in window) { window.requestIdleCallback( async () => { - this.plugins.map((plugin) => this.initPlugin(plugin)); + this.apps.map((app) => this.initApp(app)); }, { timeout: 300 } ); } else { setTimeout(async () => { - this.plugins.map((plugin) => this.initPlugin(plugin)); + this.apps.map((app) => this.initApp(app)); }, 300); } } @@ -302,9 +297,9 @@ export class AstroDevOverlay extends HTMLElement { this.hasBeenInitialized = true; } - // Run this every time to make sure the correct plugin is open. - this.plugins.forEach(async (plugin) => { - await this.setPluginStatus(plugin, plugin.active); + // Run this every time to make sure the correct app is open. + this.apps.forEach(async (app) => { + await this.setAppStatus(app, app.active); }); } @@ -314,28 +309,28 @@ export class AstroDevOverlay extends HTMLElement { item.addEventListener('click', async (event) => { const target = event.currentTarget; if (!target || !(target instanceof HTMLElement)) return; - const id = target.dataset.pluginId; + const id = target.dataset.appId; if (!id) return; - const plugin = this.getPluginById(id); - if (!plugin) return; + const app = this.getAppById(id); + if (!app) return; event.stopPropagation(); - await this.togglePluginStatus(plugin); + await this.toggleAppStatus(app); }); }); (['mouseenter', 'focusin'] as const).forEach((event) => { - this.devOverlay!.addEventListener(event, () => { + this.devToolbarContainer!.addEventListener(event, () => { this.clearDelayedHide(); if (this.isHidden()) { - this.setOverlayVisible(true); + this.setToolbarVisible(true); } }); }); (['mouseleave', 'focusout'] as const).forEach((event) => { - this.devOverlay!.addEventListener(event, () => { + this.devToolbarContainer!.addEventListener(event, () => { this.clearDelayedHide(); - if (this.getActivePlugin() || this.isHidden()) { + if (this.getActiveApp() || this.isHidden()) { return; } this.triggerDelayedHide(); @@ -345,124 +340,125 @@ export class AstroDevOverlay extends HTMLElement { document.addEventListener('keyup', (event) => { if (event.key !== 'Escape') return; if (this.isHidden()) return; - const activePlugin = this.getActivePlugin(); - if (activePlugin) { - this.togglePluginStatus(activePlugin); + const activeApp = this.getActiveApp(); + if (activeApp) { + this.toggleAppStatus(activeApp); } else { - this.setOverlayVisible(false); + this.setToolbarVisible(false); } }); } - async initPlugin(plugin: DevOverlayPlugin) { - const shadowRoot = this.getPluginCanvasById(plugin.id)!.shadowRoot!; - plugin.status = 'loading'; + async initApp(app: DevToolbarApp) { + const shadowRoot = this.getAppCanvasById(app.id)!.shadowRoot!; + app.status = 'loading'; try { - if (settings.config.verbose) console.info(`Initializing plugin ${plugin.id}`); + if (settings.config.verbose) console.info(`Initializing app ${app.id}`); - await plugin.init?.(shadowRoot, plugin.eventTarget); - plugin.status = 'ready'; + await app.init?.(shadowRoot, app.eventTarget); + app.status = 'ready'; 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`); + import.meta.hot.send(`${WS_EVENT_NAME}:${app.id}:initialized`); + import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${app.id}:initialized`); } } catch (e) { - console.error(`Failed to init plugin ${plugin.id}, error: ${e}`); - plugin.status = 'error'; + console.error(`Failed to init app ${app.id}, error: ${e}`); + app.status = 'error'; } } - getPluginTemplate(plugin: DevOverlayPlugin) { - return ``; } - getPluginById(id: string) { - return this.plugins.find((plugin) => plugin.id === id); + getAppById(id: string) { + return this.apps.find((app) => app.id === id); } - getPluginCanvasById(id: string) { + getAppCanvasById(id: string) { return this.shadowRoot.querySelector( - `astro-dev-toolbar-plugin-canvas[data-plugin-id="${id}"]` + `astro-dev-toolbar-app-canvas[data-app-id="${id}"]` ); } - async togglePluginStatus(plugin: DevOverlayPlugin) { - const activePlugin = this.getActivePlugin(); - if (activePlugin) { - const closePlugin = await this.setPluginStatus(activePlugin, false); + async toggleAppStatus(app: DevToolbarApp) { + const activeApp = this.getActiveApp(); + if (activeApp) { + const closeApp = await this.setAppStatus(activeApp, false); - // If the plugin returned false, don't open the new plugin, the old plugin didn't want to close - if (!closePlugin) return; + // If the app returned false, don't open the new app, the old app didn't want to close + if (!closeApp) return; } - // TODO(fks): Handle a plugin that hasn't loaded yet. + // TODO(fks): Handle a app that hasn't loaded yet. // Currently, this will just do nothing. - if (plugin.status !== 'ready') return; + if (app.status !== 'ready') return; - // Open the selected plugin. If the selected plugin was - // already the active plugin then the desired outcome - // was to close that plugin, so no action needed. - if (plugin !== activePlugin) { - await this.setPluginStatus(plugin, true); + // Open the selected app. If the selected app was + // already the active app then the desired outcome + // was to close that app, so no action needed. + if (app !== activeApp) { + await this.setAppStatus(app, true); } } - async setPluginStatus(plugin: DevOverlayPlugin, newStatus: boolean) { - const pluginCanvas = this.getPluginCanvasById(plugin.id); - if (!pluginCanvas) return false; + async setAppStatus(app: DevToolbarApp, newStatus: boolean) { + const appCanvas = this.getAppCanvasById(app.id); + if (!appCanvas) return false; - if (plugin.active && !newStatus && plugin.beforeTogglingOff) { - const shouldToggleOff = await plugin.beforeTogglingOff(pluginCanvas.shadowRoot!); + if (app.active && !newStatus && app.beforeTogglingOff) { + const shouldToggleOff = await app.beforeTogglingOff(appCanvas.shadowRoot!); - // If the plugin returned false, don't toggle it off, maybe the plugin showed a confirmation dialog or similar + // If the app returned false, don't toggle it off, maybe the app showed a confirmation dialog or similar if (!shouldToggleOff) return false; } - plugin.active = newStatus ?? !plugin.active; - const mainBarButton = this.shadowRoot.querySelector(`[data-plugin-id="${plugin.id}"]`); - const moreBarButton = this.getPluginCanvasById('astro:more')?.shadowRoot?.querySelector( - `[data-plugin-id="${plugin.id}"]` + app.active = newStatus ?? !app.active; + const mainBarButton = this.shadowRoot.querySelector(`[data-app-id="${app.id}"]`); + const moreBarButton = this.getAppCanvasById('astro:more')?.shadowRoot?.querySelector( + `[data-app-id="${app.id}"]` ); if (mainBarButton) { - mainBarButton.classList.toggle('active', plugin.active); + mainBarButton.classList.toggle('active', app.active); } if (moreBarButton) { - moreBarButton.classList.toggle('active', plugin.active); + moreBarButton.classList.toggle('active', app.active); } - if (plugin.active) { - pluginCanvas.style.display = 'block'; - pluginCanvas.setAttribute('data-active', ''); + if (app.active) { + appCanvas.style.display = 'block'; + appCanvas.setAttribute('data-active', ''); } else { - pluginCanvas.style.display = 'none'; - pluginCanvas.removeAttribute('data-active'); + appCanvas.style.display = 'none'; + appCanvas.removeAttribute('data-active'); } [ 'app-toggled', // Deprecated + // TODO: Remove in Astro 5.0 'plugin-toggled', ].forEach((eventName) => { - plugin.eventTarget.dispatchEvent( + app.eventTarget.dispatchEvent( new CustomEvent(eventName, { detail: { - state: plugin.active, - plugin, + state: app.active, + app, }, }) ); }); 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, + import.meta.hot.send(`${WS_EVENT_NAME}:${app.id}:toggled`, { state: app.active }); + import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${app.id}:toggled`, { + state: app.active, }); } @@ -470,11 +466,11 @@ export class AstroDevOverlay extends HTMLElement { } isHidden(): boolean { - return this.devOverlay?.hasAttribute('data-hidden') ?? true; + return this.devToolbarContainer?.hasAttribute('data-hidden') ?? true; } - getActivePlugin(): DevOverlayPlugin | undefined { - return this.plugins.find((plugin) => plugin.active); + getActiveApp(): DevToolbarApp | undefined { + return this.apps.find((app) => app.active); } clearDelayedHide() { @@ -485,25 +481,25 @@ export class AstroDevOverlay extends HTMLElement { triggerDelayedHide() { this.clearDelayedHide(); this.delayedHideTimeout = window.setTimeout(() => { - this.setOverlayVisible(false); + this.setToolbarVisible(false); this.delayedHideTimeout = undefined; }, HOVER_DELAY); } - setOverlayVisible(newStatus: boolean) { + setToolbarVisible(newStatus: boolean) { const barContainer = this.shadowRoot.querySelector('#bar-container'); const devBar = this.shadowRoot.querySelector('#dev-bar'); const devBarHitboxAbove = this.shadowRoot.querySelector('#dev-bar-hitbox-above'); if (newStatus === true) { - this.devOverlay?.removeAttribute('data-hidden'); + this.devToolbarContainer?.removeAttribute('data-hidden'); barContainer?.removeAttribute('inert'); devBar?.removeAttribute('tabindex'); if (devBarHitboxAbove) devBarHitboxAbove.style.height = '0'; return; } if (newStatus === false) { - this.devOverlay?.setAttribute('data-hidden', ''); + this.devToolbarContainer?.setAttribute('data-hidden', ''); barContainer?.setAttribute('inert', ''); devBar?.setAttribute('tabindex', '0'); if (devBarHitboxAbove) devBarHitboxAbove.style.height = `${DEVBAR_HITBOX_ABOVE}px`; @@ -512,17 +508,16 @@ export class AstroDevOverlay extends HTMLElement { } setNotificationVisible(newStatus: boolean) { - const devOverlayElement = this.shadowRoot.querySelector('#dev-overlay'); - devOverlayElement?.toggleAttribute('data-no-notification', !newStatus); + this.devToolbarContainer?.toggleAttribute('data-no-notification', !newStatus); - const moreCanvas = this.getPluginCanvasById('astro:more'); + const moreCanvas = this.getAppCanvasById('astro:more'); moreCanvas?.shadowRoot ?.querySelector('#dropdown') ?.toggleAttribute('data-no-notification', !newStatus); } } -export class DevOverlayCanvas extends HTMLElement { +export class DevToolbarCanvas extends HTMLElement { shadowRoot: ShadowRoot; constructor() { @@ -542,7 +537,7 @@ export class DevOverlayCanvas extends HTMLElement { } } -export function getPluginIcon(icon: Icon) { +export function getAppIcon(icon: Icon) { if (isDefinedIcon(icon)) { return getIconElement(icon).outerHTML; } diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/badge.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/badge.ts similarity index 96% rename from packages/astro/src/runtime/client/dev-overlay/ui-library/badge.ts rename to packages/astro/src/runtime/client/dev-toolbar/ui-library/badge.ts index 5a8eea07ed9f..9d10b65be27a 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/badge.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/badge.ts @@ -1,7 +1,7 @@ type BadgeSize = 'small' | 'large'; type BadgeStyle = 'purple' | 'gray' | 'red' | 'green' | 'yellow'; -export class DevOverlayBadge extends HTMLElement { +export class DevToolbarBadge extends HTMLElement { size: BadgeSize = 'small'; badgeStyle: BadgeStyle = 'purple'; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts similarity index 94% rename from packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts rename to packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts index f2bd75d70269..3f625376d774 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts @@ -1,7 +1,7 @@ type ButtonSize = 'small' | 'medium' | 'large'; type ButtonStyle = 'ghost' | 'outline' | 'purple' | 'gray' | 'red'; -export class DevOverlayButton extends HTMLElement { +export class DevToolbarButton extends HTMLElement { size: ButtonSize = 'small'; buttonStyle: ButtonStyle = 'purple'; @@ -72,6 +72,7 @@ export class DevOverlayButton extends HTMLElement { border-color: rgba(249, 196, 215, 0.33); } + /* TODO: Remove "astro-dev-overlay-icon" in Astro 5.0 */ ::slotted(astro-dev-overlay-icon), ::slotted(astro-dev-toolbar-icon) { display: inline-block; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/card.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/card.ts similarity index 96% rename from packages/astro/src/runtime/client/dev-overlay/ui-library/card.ts rename to packages/astro/src/runtime/client/dev-toolbar/ui-library/card.ts index 90d4739f165f..7331a88b2a3f 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/card.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/card.ts @@ -1,4 +1,4 @@ -export class DevOverlayCard extends HTMLElement { +export class DevToolbarCard extends HTMLElement { link?: string | undefined | null; clickAction?: () => void | (() => Promise); shadowRoot: ShadowRoot; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/highlight.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/highlight.ts similarity index 96% rename from packages/astro/src/runtime/client/dev-overlay/ui-library/highlight.ts rename to packages/astro/src/runtime/client/dev-toolbar/ui-library/highlight.ts index 16d02df0cc7a..7605ef4760b2 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/highlight.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/highlight.ts @@ -1,6 +1,6 @@ import { getIconElement, isDefinedIcon, type Icon } from './icons.js'; -export class DevOverlayHighlight extends HTMLElement { +export class DevToolbarHighlight extends HTMLElement { icon?: Icon | undefined | null; shadowRoot: ShadowRoot; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/icon.ts similarity index 95% rename from packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts rename to packages/astro/src/runtime/client/dev-toolbar/ui-library/icon.ts index 3211e1857620..193be65f33cf 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/icon.ts @@ -1,6 +1,6 @@ import { getIconElement, isDefinedIcon, type Icon } from './icons.js'; -export class DevOverlayIcon extends HTMLElement { +export class DevToolbarIcon extends HTMLElement { _icon: Icon | undefined = undefined; shadowRoot: ShadowRoot; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/icons.ts similarity index 100% rename from packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts rename to packages/astro/src/runtime/client/dev-toolbar/ui-library/icons.ts diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts new file mode 100644 index 000000000000..c515dccfc721 --- /dev/null +++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts @@ -0,0 +1,8 @@ +export { DevToolbarBadge } from './badge.js'; +export { DevToolbarButton } from './button.js'; +export { DevToolbarCard } from './card.js'; +export { DevToolbarHighlight } from './highlight.js'; +export { DevToolbarIcon } from './icon.js'; +export { DevToolbarToggle } from './toggle.js'; +export { DevToolbarTooltip } from './tooltip.js'; +export { DevToolbarWindow } from './window.js'; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts similarity index 96% rename from packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts rename to packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts index 1fb0b686a9d1..9b45fb14d78a 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts @@ -1,4 +1,4 @@ -export class DevOverlayToggle extends HTMLElement { +export class DevToolbarToggle extends HTMLElement { shadowRoot: ShadowRoot; input: HTMLInputElement; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/tooltip.ts similarity index 96% rename from packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts rename to packages/astro/src/runtime/client/dev-toolbar/ui-library/tooltip.ts index 9f7224ca479f..b0d92cd931c1 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/tooltip.ts @@ -1,6 +1,6 @@ import { getIconElement, isDefinedIcon, type Icon } from './icons.js'; -export interface DevOverlayTooltipSection { +export interface DevToolbarTooltipSection { title?: string; inlineTitle?: string; icon?: Icon; @@ -9,8 +9,8 @@ export interface DevOverlayTooltipSection { clickDescription?: string; } -export class DevOverlayTooltip extends HTMLElement { - sections: DevOverlayTooltipSection[] = []; +export class DevToolbarTooltip extends HTMLElement { + sections: DevToolbarTooltipSection[] = []; shadowRoot: ShadowRoot; constructor() { diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts similarity index 97% rename from packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts rename to packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts index bab936d4bbd8..f1032d2a9860 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts @@ -1,4 +1,4 @@ -export class DevOverlayWindow extends HTMLElement { +export class DevToolbarWindow extends HTMLElement { shadowRoot: ShadowRoot; constructor() { @@ -34,7 +34,7 @@ export class DevOverlayWindow extends HTMLElement { background: white; } } - + @media (max-width: 640px) { :host { border-radius: 0; diff --git a/packages/astro/src/vite-plugin-astro-server/route.ts b/packages/astro/src/vite-plugin-astro-server/route.ts index e37850acce24..deeb19c47a9f 100644 --- a/packages/astro/src/vite-plugin-astro-server/route.ts +++ b/packages/astro/src/vite-plugin-astro-server/route.ts @@ -2,7 +2,7 @@ import type http from 'node:http'; import { fileURLToPath } from 'node:url'; import type { ComponentInstance, - DevOverlayMetadata, + DevToolbarMetadata, ManifestData, MiddlewareHandler, RouteData, @@ -24,6 +24,7 @@ import { import { createRequest } from '../core/request.js'; import { matchAllRoutes } from '../core/routing/index.js'; import { isPage, resolveIdToUrl } from '../core/util.js'; +import { normalizeTheLocale } from '../i18n/index.js'; import { createI18nMiddleware, i18nPipelineHook } from '../i18n/middleware.js'; import { getSortedPreloadedMatches } from '../prerender/routing.js'; import { isServerLikeOutput } from '../prerender/utils.js'; @@ -34,7 +35,6 @@ import { preload } from './index.js'; import { getComponentMetadata } from './metadata.js'; import { handle404Response, writeSSRResult, writeWebResponse } from './response.js'; import { getScriptsForURL } from './scripts.js'; -import { normalizeTheLocale } from '../i18n/index.js'; const clientLocalsSymbol = Symbol.for('astro.locals'); @@ -401,12 +401,12 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa scripts.add({ props: { type: 'module', - src: await resolveIdToUrl(moduleLoader, 'astro/runtime/client/dev-overlay/entrypoint.js'), + src: await resolveIdToUrl(moduleLoader, 'astro/runtime/client/dev-toolbar/entrypoint.js'), }, children: '', }); - const additionalMetadata: DevOverlayMetadata['__astro_dev_overlay__'] = { + const additionalMetadata: DevToolbarMetadata['__astro_dev_toolbar__'] = { root: fileURLToPath(settings.config.root), version: ASTRO_VERSION, debugInfo: await getInfoOutput({ userConfig: settings.config, print: false }), @@ -415,7 +415,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa // Additional data for the dev overlay scripts.add({ props: {}, - children: `window.__astro_dev_overlay__ = ${JSON.stringify(additionalMetadata)}`, + children: `window.__astro_dev_toolbar__ = ${JSON.stringify(additionalMetadata)}`, }); } } 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 d8227a8af082..a12c5048344c 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 @@ -23,7 +23,7 @@ export default function astroDevOverlay({ settings }: AstroPluginOptions): vite. async load(id) { if (id === resolvedVirtualModuleId) { return ` - export const loadDevOverlayPlugins = async () => { + export const loadDevToolbarApps = async () => { return [${settings.devToolbarApps .map((plugin) => `(await import(${JSON.stringify(plugin)})).default`) .join(',')}]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7dd02558ad6a..b561445202e5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -959,7 +959,7 @@ importers: specifier: ^18.0.0 version: 18.2.0(react@18.2.0) - packages/astro/e2e/fixtures/dev-overlay: + packages/astro/e2e/fixtures/dev-toolbar: dependencies: '@astrojs/preact': specifier: workspace:* From 5f25224cfbe24de9db173fbc56ce18546d67f822 Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 10 Jan 2024 15:46:32 -0500 Subject: [PATCH 2/4] refactor: rename vite plugin --- packages/astro/src/core/create-vite.ts | 6 +++--- .../vite-plugin-dev-toolbar.ts} | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) rename packages/astro/src/{vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts => vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.ts} (84%) diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index 4ce605b9f52d..99082b830419 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -16,8 +16,9 @@ import astroPostprocessVitePlugin from '../vite-plugin-astro-postprocess/index.j import { vitePluginAstroServer } from '../vite-plugin-astro-server/index.js'; import astroVitePlugin from '../vite-plugin-astro/index.js'; import configAliasVitePlugin from '../vite-plugin-config-alias/index.js'; -import astroDevOverlay from '../vite-plugin-dev-overlay/vite-plugin-dev-overlay.js'; +import astroDevToolbar from '../vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.js'; import envVitePlugin from '../vite-plugin-env/index.js'; +import vitePluginFileURL from '../vite-plugin-fileurl/index.js'; import astroHeadPlugin from '../vite-plugin-head/index.js'; import htmlVitePlugin from '../vite-plugin-html/index.js'; import { astroInjectEnvTsPlugin } from '../vite-plugin-inject-env-ts/index.js'; @@ -33,7 +34,6 @@ import type { Logger } from './logger/core.js'; import { createViteLogger } from './logger/vite.js'; import { vitePluginMiddleware } from './middleware/vite-plugin.js'; import { joinPaths } from './path.js'; -import vitePluginFileURL from '../vite-plugin-fileurl/index.js'; interface CreateViteOptions { settings: AstroSettings; @@ -141,7 +141,7 @@ export async function createVite( astroAssetsPlugin({ settings, logger, mode }), astroPrefetch({ settings }), astroTransitions({ settings }), - astroDevOverlay({ settings, logger }), + astroDevToolbar({ settings, logger }), vitePluginFileURL({}), !!settings.config.i18n && astroInternationalization({ settings }), ], diff --git a/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts b/packages/astro/src/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.ts similarity index 84% rename from packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts rename to packages/astro/src/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.ts index a12c5048344c..4e9526993ca6 100644 --- a/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts +++ b/packages/astro/src/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.ts @@ -1,12 +1,12 @@ import type * as vite from 'vite'; import type { AstroPluginOptions } from '../@types/astro.js'; -const VIRTUAL_MODULE_ID = 'astro:dev-overlay'; +const VIRTUAL_MODULE_ID = 'astro:dev-toolbar'; const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID; -export default function astroDevOverlay({ settings }: AstroPluginOptions): vite.Plugin { +export default function astroDevToolbar({ settings }: AstroPluginOptions): vite.Plugin { return { - name: 'astro:dev-overlay', + name: 'astro:dev-toolbar', config() { return { optimizeDeps: { From ac76403718155b2af833d5d86396ebcbbae8a2ef Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 10 Jan 2024 15:55:04 -0500 Subject: [PATCH 3/4] fix: update import --- packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts index 289d9ac2165b..a1d5484e3ac2 100644 --- a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts @@ -2,7 +2,7 @@ import type { DevToolbarApp as DevToolbarAppDefinition } from '../../../@types/a import { settings } from './settings.js'; import type { AstroDevToolbar, DevToolbarApp } from './toolbar.js'; // @ts-expect-error -import { loadDevToolbarApps } from 'astro:dev-overlay'; +import { loadDevToolbarApps } from 'astro:dev-toolbar'; let overlay: AstroDevToolbar; From 32034f9fb4bc598395d93706b63b5620dce440a0 Mon Sep 17 00:00:00 2001 From: Princesseuh <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 10 Jan 2024 16:19:37 -0500 Subject: [PATCH 4/4] nit: add setting fallback --- packages/astro/src/runtime/client/dev-toolbar/settings.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/astro/src/runtime/client/dev-toolbar/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/settings.ts index 9939fd4b9c58..6e3656dca32c 100644 --- a/packages/astro/src/runtime/client/dev-toolbar/settings.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/settings.ts @@ -14,6 +14,13 @@ function getSettings() { let _settings: Settings = { ...defaultSettings }; const toolbarSettings = localStorage.getItem('astro:dev-toolbar:settings'); + // TODO: Remove in Astro 5.0 + const oldSettings = localStorage.getItem('astro:dev-overlay:settings'); + if (oldSettings && !toolbarSettings) { + localStorage.setItem('astro:dev-toolbar:settings', oldSettings); + localStorage.removeItem('astro:dev-overlay:settings'); + } + if (toolbarSettings) { _settings = { ..._settings, ...JSON.parse(toolbarSettings) }; }