summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--packages/astro/e2e/astro-envs.test.js7
-rw-r--r--packages/astro/e2e/css.test.js3
-rw-r--r--packages/astro/e2e/fixtures/astro-component/astro.config.mjs5
-rw-r--r--packages/astro/e2e/fixtures/astro-envs/astro.config.mjs3
-rw-r--r--packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs3
-rw-r--r--packages/astro/e2e/fixtures/lit-component/astro.config.mjs3
-rw-r--r--packages/astro/e2e/fixtures/prefetch/astro.config.mjs3
-rw-r--r--packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs3
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/astro.config.mjs3
-rw-r--r--packages/astro/e2e/hmr.test.js3
-rw-r--r--packages/astro/src/@types/astro.ts48
-rw-r--r--packages/astro/src/core/compile/compile.ts3
-rw-r--r--packages/astro/src/core/config/schema.ts14
-rw-r--r--packages/astro/src/runtime/client/dev-overlay/overlay.ts13
-rw-r--r--packages/astro/src/vite-plugin-astro-server/route.ts7
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 50cff6e89..2ebff460a 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 3e0486d0f..df50ee35d 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 44371fc32..6ffc82a08 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 1fee9eb36..28bce59c7 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 380a501ac..d24b4cc9a 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 1eab8f9ab..19da6f609 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 bec1677fd..745817a28 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 011b1a8b9..4c808ac5d 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 f4450f672..9ca3631ee 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 091aa716d..94aa68140 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 778b55080..24b7b195f 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -1157,6 +1157,34 @@ export interface AstroUserConfig {
/**
* @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
* @name Markdown Options
*/
markdown?: {
@@ -1381,25 +1409,6 @@ export interface AstroUserConfig {
/**
* @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
* @type {object}
* @version 3.5.0
@@ -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 f270e123e..2985dcab9 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 8fefa2106..30dafb8da 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 c99be9257..040efb953 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 {
}
</style>
- <div id="dev-overlay">
+ <div id="dev-overlay"${
+ ((window as DevOverlayMetadata)?.__astro_dev_overlay__?.defaultState ?? 'minimized') ===
+ 'minimized'
+ ? ' data-hidden '
+ : ''
+ }>
<div id="dev-bar">
<div id="bar-container">
${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 3323749de..a58f38a02 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: {},
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-11 18:32:47 +0000