feat: new event to toggle a plugin from itself (#8968)

withastro · Nov 1, 2023 · d0dc18c · d0dc18c
1 parent 49bb7be
commit d0dc18c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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 });
 		}
 	}