From d0dc18cd1cb71708c9319cfd13e9e14bf8f9a229 Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Wed, 1 Nov 2023 17:56:59 +0100
Subject: [PATCH] feat: new event to toggle a plugin from itself (#8968)

---
 .../src/runtime/client/dev-overlay/entrypoint.ts      | 11 ++++++++++-
 .../astro/src/runtime/client/dev-overlay/overlay.ts   |  6 +++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
index fe7efcccc232..61c5e779bf6c 100644
--- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
@@ -51,7 +51,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 		};
 
 		// Events plugins can send to the overlay to update their status
-		eventTarget.addEventListener('plugin-notification', (evt) => {
+		eventTarget.addEventListener('toggle-notification', (evt) => {
 			const target = overlay.shadowRoot?.querySelector(`[data-plugin-id="${plugin.id}"]`);
 			if (!target) return;
 
@@ -63,6 +63,15 @@ document.addEventListener('DOMContentLoaded', async () => {
 			target.querySelector('.notification')?.toggleAttribute('data-active', newState);
 		});
 
+		eventTarget.addEventListener('toggle-plugin', (evt) => {
+			let newState = undefined;
+			if (evt instanceof CustomEvent) {
+				newState = evt.detail.state ?? true;
+			}
+
+			overlay.togglePluginStatus(plugin, newState);
+		});
+
 		return plugin;
 	};
 
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 00ca35569be0..98912ce6674b 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -363,7 +363,7 @@ export class AstroDevOverlay extends HTMLElement {
 			plugin.status = 'ready';
 
 			if (import.meta.hot) {
-				import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:init`);
+				import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:initialized`);
 			}
 		} catch (e) {
 			console.error(`Failed to init plugin ${plugin.id}, error: ${e}`);
@@ -402,7 +402,7 @@ export class AstroDevOverlay extends HTMLElement {
 		this.getPluginCanvasById(plugin.id)?.toggleAttribute('data-active', plugin.active);
 
 		plugin.eventTarget.dispatchEvent(
-			new CustomEvent('plugin-toggle', {
+			new CustomEvent('plugin-toggled', {
 				detail: {
 					state: plugin.active,
 					plugin,
@@ -411,7 +411,7 @@ export class AstroDevOverlay extends HTMLElement {
 		);
 
 		if (import.meta.hot) {
-			import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggle`, { state: plugin.active });
+			import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active });
 		}
 	}