- ${builtinPlugins.map((plugin) => this.getPluginTemplate(plugin)).join('')}
-
- ${customPlugins.map((plugin) => this.getPluginTemplate(plugin)).join('')}
+
+
+
+ ${builtinPlugins.map((plugin) => this.getPluginTemplate(plugin)).join('')}
+
+ ${customPlugins.map((plugin) => this.getPluginTemplate(plugin)).join('')}
+
+
${getIconElement('arrow-down')?.outerHTML}
`;
this.attachClickEvents();
@@ -211,7 +235,7 @@ document.addEventListener('DOMContentLoaded', async () => {
plugin.status = 'ready';
if (import.meta.hot) {
- import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:init`, { msg: 'Hey!' });
+ import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:init`);
}
} catch (e) {
console.error(`Failed to init plugin ${plugin.id}, error: ${e}`);
@@ -253,6 +277,8 @@ document.addEventListener('DOMContentLoaded', async () => {
import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggle`, { state: plugin.active });
}
}
+
+ showMinimizeButton() {}
}
class DevOverlayCanvas extends HTMLElement {
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
index 7efe9ec1df78..9281a1571923 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
@@ -1,8 +1,3 @@
-const icons = {
- 'astro:logo': `
`,
- warning: `
`,
-} as const;
-
export type DefinedIcon = keyof typeof icons;
export type Icon = DefinedIcon | (string & NonNullable
);
@@ -24,3 +19,10 @@ export function getIconElement(
return svgFragment.firstElementChild as SVGElement;
}
+
+const icons = {
+ 'astro:logo': ``,
+ warning: ``,
+ 'arrow-down':
+ '',
+} as const;
diff --git a/packages/astro/src/vite-plugin-dev-tools/vite-plugin-dev-overlay.ts b/packages/astro/src/vite-plugin-dev-tools/vite-plugin-dev-overlay.ts
new file mode 100644
index 000000000000..e92952b003cf
--- /dev/null
+++ b/packages/astro/src/vite-plugin-dev-tools/vite-plugin-dev-overlay.ts
@@ -0,0 +1,27 @@
+import type * as vite from 'vite';
+import type { AstroPluginOptions } from '../@types/astro.js';
+
+const VIRTUAL_MODULE_ID = 'astro:dev-overlay';
+const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID;
+
+export default function astroDevOverlay({ settings }: AstroPluginOptions): vite.Plugin {
+ return {
+ name: 'astro:dev-overlay',
+ resolveId(id) {
+ if (id === VIRTUAL_MODULE_ID) {
+ return resolvedVirtualModuleId;
+ }
+ },
+ load(id) {
+ if (id === resolvedVirtualModuleId) {
+ return `
+ export const loadDevOverlayPlugins = async () => {
+ return [${settings.devOverlayPlugins
+ .map((plugin) => `(await import('${plugin}')).default`)
+ .join(',')}];
+ };
+ `;
+ }
+ },
+ };
+}
diff --git a/packages/astro/src/vite-plugin-dev-tools/vite-plugin-dev-tools.ts b/packages/astro/src/vite-plugin-dev-tools/vite-plugin-dev-tools.ts
deleted file mode 100644
index d766062e77ff..000000000000
--- a/packages/astro/src/vite-plugin-dev-tools/vite-plugin-dev-tools.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type * as vite from 'vite';
-import type { AstroPluginOptions } from '../@types/astro.js';
-
-const VIRTUAL_MODULE_ID = 'astro:dev-tools';
-const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID;
-
-export default function astroDevTools({ settings }: AstroPluginOptions): vite.Plugin {
- return {
- name: 'astro:dev-tools',
- resolveId(id) {
- if (id === VIRTUAL_MODULE_ID) {
- return resolvedVirtualModuleId;
- }
- },
- load(id) {
- if (id === resolvedVirtualModuleId) {
- return `
- export const loadDevToolsPlugins = async () => {
- return [${settings.config.devTools.plugins.map((p) => `(await import('${p}')).default`).join(',')}];
- };
- `;
- }
- },
- configureServer(server) {
- // Example: wait for a client to connect before sending a message
- server.ws.on('connection', () => {
- server.ws.send('astro-dev-tools', { msg: 'hello' });
- });
- },
- };
-}
-
-