From 34e96b141a4be9045468bf4dcba9a80384b9aded Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 29 Nov 2023 18:49:48 +0100 Subject: [PATCH] feat: unflag dev overlay (#9232) * feat: unflag dev overlay * fix: oops * fix: check for both config existing * fix: don't use flag in e2e tests * Disable view transition tests * Disable more * even more --------- Co-authored-by: Matthew Phillips --- packages/astro/e2e/astro-envs.test.js | 7 ++- packages/astro/e2e/css.test.js | 3 ++ .../fixtures/astro-component/astro.config.mjs | 5 +- .../e2e/fixtures/astro-envs/astro.config.mjs | 3 ++ .../e2e/fixtures/dev-overlay/astro.config.mjs | 3 -- .../fixtures/lit-component/astro.config.mjs | 3 ++ .../e2e/fixtures/prefetch/astro.config.mjs | 3 ++ .../e2e/fixtures/tailwindcss/astro.config.mjs | 3 ++ .../view-transitions/astro.config.mjs | 3 ++ packages/astro/e2e/hmr.test.js | 3 ++ packages/astro/src/@types/astro.ts | 48 +++++++++++-------- packages/astro/src/core/compile/compile.ts | 3 +- packages/astro/src/core/config/schema.ts | 14 +++++- .../src/runtime/client/dev-overlay/overlay.ts | 13 ++++- .../src/vite-plugin-astro-server/route.ts | 7 ++- 15 files changed, 88 insertions(+), 33 deletions(-) diff --git a/packages/astro/e2e/astro-envs.test.js b/packages/astro/e2e/astro-envs.test.js index 50cff6e895..2ebff460a2 100644 --- a/packages/astro/e2e/astro-envs.test.js +++ b/packages/astro/e2e/astro-envs.test.js @@ -1,7 +1,12 @@ import { expect } from '@playwright/test'; import { testFactory } from './test-utils.js'; -const test = testFactory({ root: './fixtures/astro-envs/' }); +const test = testFactory({ + root: './fixtures/astro-envs/', + devOverlay: { + enabled: false, + } +}); let devServer; diff --git a/packages/astro/e2e/css.test.js b/packages/astro/e2e/css.test.js index 3e0486d0f3..df50ee35d0 100644 --- a/packages/astro/e2e/css.test.js +++ b/packages/astro/e2e/css.test.js @@ -3,6 +3,9 @@ import { testFactory } from './test-utils.js'; const test = testFactory({ root: './fixtures/css/', + devOverlay: { + enabled: false, + }, }); let devServer; diff --git a/packages/astro/e2e/fixtures/astro-component/astro.config.mjs b/packages/astro/e2e/fixtures/astro-component/astro.config.mjs index 44371fc32b..6ffc82a088 100644 --- a/packages/astro/e2e/fixtures/astro-component/astro.config.mjs +++ b/packages/astro/e2e/fixtures/astro-component/astro.config.mjs @@ -3,5 +3,8 @@ import preact from '@astrojs/preact' // https://astro.build/config export default defineConfig({ - integrations: [preact()] + integrations: [preact()], + devOverlay: { + enabled: false, + } }); diff --git a/packages/astro/e2e/fixtures/astro-envs/astro.config.mjs b/packages/astro/e2e/fixtures/astro-envs/astro.config.mjs index 1fee9eb36b..28bce59c7a 100644 --- a/packages/astro/e2e/fixtures/astro-envs/astro.config.mjs +++ b/packages/astro/e2e/fixtures/astro-envs/astro.config.mjs @@ -5,5 +5,8 @@ import vue from '@astrojs/vue'; export default defineConfig({ site: 'http://example.com', base: '/blog', + devOverlay: { + enabled: false, + }, integrations: [vue()], }); diff --git a/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs b/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs index 380a501ac4..d24b4cc9a2 100644 --- a/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs +++ b/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs @@ -2,7 +2,4 @@ import preact from '@astrojs/preact'; export default { integrations: [preact()], - experimental: { - devOverlay: true - } }; diff --git a/packages/astro/e2e/fixtures/lit-component/astro.config.mjs b/packages/astro/e2e/fixtures/lit-component/astro.config.mjs index 1eab8f9ab8..19da6f6090 100644 --- a/packages/astro/e2e/fixtures/lit-component/astro.config.mjs +++ b/packages/astro/e2e/fixtures/lit-component/astro.config.mjs @@ -4,4 +4,7 @@ import lit from '@astrojs/lit'; // https://astro.build/config export default defineConfig({ integrations: [lit()], + devOverlay: { + enabled: false, + } }); diff --git a/packages/astro/e2e/fixtures/prefetch/astro.config.mjs b/packages/astro/e2e/fixtures/prefetch/astro.config.mjs index bec1677fd8..745817a28d 100644 --- a/packages/astro/e2e/fixtures/prefetch/astro.config.mjs +++ b/packages/astro/e2e/fixtures/prefetch/astro.config.mjs @@ -2,5 +2,8 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({ + devOverlay: { + enabled: false, + }, prefetch: true }); diff --git a/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs b/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs index 011b1a8b99..4c808ac5db 100644 --- a/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs +++ b/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs @@ -9,6 +9,9 @@ export default defineConfig({ configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)), }), ], + devOverlay: { + enabled: false, + }, vite: { build: { assetsInlineLimit: 0, diff --git a/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs b/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs index f4450f6728..9ca3631ee0 100644 --- a/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs +++ b/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs @@ -13,6 +13,9 @@ export default defineConfig({ '/redirect-two': '/two', '/redirect-external': 'http://example.com/', }, + devOverlay: { + enabled: false, + }, vite: { build: { assetsInlineLimit: 0, diff --git a/packages/astro/e2e/hmr.test.js b/packages/astro/e2e/hmr.test.js index 091aa716d6..94aa68140c 100644 --- a/packages/astro/e2e/hmr.test.js +++ b/packages/astro/e2e/hmr.test.js @@ -3,6 +3,9 @@ import { testFactory } from './test-utils.js'; const test = testFactory({ root: './fixtures/hmr/', + devOverlay: { + enabled: false, + }, }); let devServer; diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 778b55080b..24b7b195f9 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -1154,6 +1154,34 @@ export interface AstroUserConfig { remotePatterns?: Partial[]; }; + /** + * @docs + * @kind heading + * @name Dev Overlay Options + */ + devOverlay?: { + /** + * @docs + * @name devOverlay.enabled + * @type {boolean} + * @default `true` + * @description + * Whether to enable the dev overlay. This overlay 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 overlay for yourself, run `npm run astro preferences disable devOverlay`. To disable the overlay for all your Astro projects, run `npm run astro preferences disable devOverlay --global`. + */ + enabled: boolean; + /** + * @docs + * @name devOverlay.defaultState + * @type {'minimized' | 'expanded'} + * @default `minimized` + * @description + * Whether the dev overlay should be expanded or minimized by default. + */ + defaultState: 'minimized' | 'expanded'; + }; + /** * @docs * @kind heading @@ -1379,25 +1407,6 @@ export interface AstroUserConfig { */ optimizeHoistedScript?: boolean; - /** - * @docs - * @name experimental.devOverlay - * @type {boolean} - * @default `false` - * @version 3.4.0 - * @description - * Enable a dev overlay in development mode. This overlay allows you to inspect your page islands, see helpful audits on performance and accessibility, and more. - * - * ```js - * { - * experimental: { - * devOverlay: true, - * }, - * } - * ``` - */ - devOverlay?: boolean; - /** * @docs * @name experimental.i18n @@ -2517,6 +2526,7 @@ export interface DevOverlayPlugin { export type DevOverlayMetadata = Window & typeof globalThis & { __astro_dev_overlay__: { + defaultState: AstroConfig['devOverlay']['defaultState']; root: string; version: string; debugInfo: string; diff --git a/packages/astro/src/core/compile/compile.ts b/packages/astro/src/core/compile/compile.ts index f270e123eb..2985dcab96 100644 --- a/packages/astro/src/core/compile/compile.ts +++ b/packages/astro/src/core/compile/compile.ts @@ -46,7 +46,8 @@ export async function compile({ scopedStyleStrategy: astroConfig.scopedStyleStrategy, resultScopedSlot: true, transitionsAnimationURL: 'astro/components/viewtransitions.css', - annotateSourceFile: !viteConfig.isProduction && astroConfig.experimental.devOverlay, + annotateSourceFile: + !viteConfig.isProduction && astroConfig.devOverlay && astroConfig.devOverlay.enabled, preprocessStyle: createStylePreprocessor({ filename, viteConfig, diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index 8fefa2106d..30dafb8daf 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -41,6 +41,10 @@ const ASTRO_CONFIG_DEFAULTS = { image: { service: { entrypoint: 'astro/assets/services/sharp', config: {} }, }, + devOverlay: { + enabled: true, + defaultState: 'minimized', + }, compressHTML: true, server: { host: false, @@ -54,7 +58,6 @@ const ASTRO_CONFIG_DEFAULTS = { redirects: {}, experimental: { optimizeHoistedScript: false, - devOverlay: false, contentCollectionCache: false, }, } satisfies AstroUserConfig & { server: { open: boolean } }; @@ -223,6 +226,14 @@ export const AstroConfigSchema = z.object({ .default([]), }) .default(ASTRO_CONFIG_DEFAULTS.image), + devOverlay: z + .object({ + enabled: z.boolean().default(ASTRO_CONFIG_DEFAULTS.devOverlay.enabled), + defaultState: z + .enum(['minimized', 'expanded']) + .default(ASTRO_CONFIG_DEFAULTS.devOverlay.defaultState), + }) + .default(ASTRO_CONFIG_DEFAULTS.devOverlay), markdown: z .object({ syntaxHighlight: z @@ -299,7 +310,6 @@ export const AstroConfigSchema = z.object({ .boolean() .optional() .default(ASTRO_CONFIG_DEFAULTS.experimental.optimizeHoistedScript), - devOverlay: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.devOverlay), i18n: z.optional( z .object({ diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index c99be9257a..040efb9533 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -1,5 +1,8 @@ /* eslint-disable no-console */ -import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js'; +import type { + DevOverlayMetadata, + DevOverlayPlugin as DevOverlayPluginDefinition, +} from '../../../@types/astro.js'; import { settings } from './settings.js'; import { getIconElement, isDefinedIcon, type Icon } from './ui-library/icons.js'; @@ -23,6 +26,7 @@ export class AstroDevOverlay extends HTMLElement { plugins: DevOverlayPlugin[] = []; HOVER_DELAY = 750; hasBeenInitialized = false; + // TODO: This should be dynamic based on the screen size or at least configurable, erika - 2023-11-29 customPluginsToShow = 3; constructor() { @@ -257,7 +261,12 @@ export class AstroDevOverlay extends HTMLElement { } -
+
${this.plugins diff --git a/packages/astro/src/vite-plugin-astro-server/route.ts b/packages/astro/src/vite-plugin-astro-server/route.ts index 3323749dee..a58f38a02b 100644 --- a/packages/astro/src/vite-plugin-astro-server/route.ts +++ b/packages/astro/src/vite-plugin-astro-server/route.ts @@ -12,8 +12,8 @@ import type { import { getInfoOutput } from '../cli/info/index.js'; import { ASTRO_VERSION } from '../core/constants.js'; import { AstroErrorData, isAstroError } from '../core/errors/index.js'; -import { sequence } from '../core/middleware/index.js'; import { req } from '../core/messages.js'; +import { sequence } from '../core/middleware/index.js'; import { loadMiddleware } from '../core/middleware/loadMiddleware.js'; import { createRenderContext, @@ -384,7 +384,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa children: '', }); - if (settings.config.experimental.devOverlay) { + if (settings.config.devOverlay.enabled) { scripts.add({ props: { type: 'module', @@ -394,13 +394,12 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa }); const additionalMetadata: DevOverlayMetadata['__astro_dev_overlay__'] = { + defaultState: settings.config.devOverlay.defaultState, root: fileURLToPath(settings.config.root), version: ASTRO_VERSION, debugInfo: await getInfoOutput({ userConfig: settings.config, print: false }), }; - settings.config; - // Additional data for the dev overlay scripts.add({ props: {},