astro 4.1.2 → 4.1.3

package/dist/runtime/client/{dev-overlay → dev-toolbar}/entrypoint.js

@@ -1,60 +1,60 @@
 import { settings } from "./settings.js";
-import { loadDevOverlayPlugins } from "astro:dev-overlay";
+import { loadDevToolbarApps } from "astro:dev-toolbar";
 let overlay;
 document.addEventListener("DOMContentLoaded", async () => {
   const [
-    customPluginsDefinitions,
-    { default: astroDevToolPlugin },
-    { default: astroAuditPlugin },
-    { default: astroXrayPlugin },
-    { default: astroSettingsPlugin },
-    { AstroDevOverlay, DevOverlayCanvas, getPluginIcon },
+    customAppsDefinitions,
+    { default: astroDevToolApp },
+    { default: astroAuditApp },
+    { default: astroXrayApp },
+    { default: astroSettingsApp },
+    { AstroDevToolbar, DevToolbarCanvas, getAppIcon },
     {
-      DevOverlayCard,
-      DevOverlayHighlight,
-      DevOverlayTooltip,
-      DevOverlayWindow,
-      DevOverlayToggle,
-      DevOverlayButton,
-      DevOverlayBadge,
-      DevOverlayIcon
+      DevToolbarCard,
+      DevToolbarHighlight,
+      DevToolbarTooltip,
+      DevToolbarWindow,
+      DevToolbarToggle,
+      DevToolbarButton,
+      DevToolbarBadge,
+      DevToolbarIcon
     }
   ] = await Promise.all([
-    loadDevOverlayPlugins(),
-    import("./plugins/astro.js"),
-    import("./plugins/audit/index.js"),
-    import("./plugins/xray.js"),
-    import("./plugins/settings.js"),
-    import("./overlay.js"),
+    loadDevToolbarApps(),
+    import("./apps/astro.js"),
+    import("./apps/audit/index.js"),
+    import("./apps/xray.js"),
+    import("./apps/settings.js"),
+    import("./toolbar.js"),
     import("./ui-library/index.js")
   ]);
-  customElements.define("astro-dev-toolbar", AstroDevOverlay);
-  customElements.define("astro-dev-toolbar-window", DevOverlayWindow);
-  customElements.define("astro-dev-toolbar-plugin-canvas", DevOverlayCanvas);
-  customElements.define("astro-dev-toolbar-tooltip", DevOverlayTooltip);
-  customElements.define("astro-dev-toolbar-highlight", DevOverlayHighlight);
-  customElements.define("astro-dev-toolbar-card", DevOverlayCard);
-  customElements.define("astro-dev-toolbar-toggle", DevOverlayToggle);
-  customElements.define("astro-dev-toolbar-button", DevOverlayButton);
-  customElements.define("astro-dev-toolbar-badge", DevOverlayBadge);
-  customElements.define("astro-dev-toolbar-icon", DevOverlayIcon);
+  customElements.define("astro-dev-toolbar", AstroDevToolbar);
+  customElements.define("astro-dev-toolbar-window", DevToolbarWindow);
+  customElements.define("astro-dev-toolbar-app-canvas", DevToolbarCanvas);
+  customElements.define("astro-dev-toolbar-tooltip", DevToolbarTooltip);
+  customElements.define("astro-dev-toolbar-highlight", DevToolbarHighlight);
+  customElements.define("astro-dev-toolbar-card", DevToolbarCard);
+  customElements.define("astro-dev-toolbar-toggle", DevToolbarToggle);
+  customElements.define("astro-dev-toolbar-button", DevToolbarButton);
+  customElements.define("astro-dev-toolbar-badge", DevToolbarBadge);
+  customElements.define("astro-dev-toolbar-icon", DevToolbarIcon);
   const deprecated = (Parent) => class extends Parent {
   };
-  customElements.define("astro-dev-overlay", deprecated(AstroDevOverlay));
-  customElements.define("astro-dev-overlay-window", deprecated(DevOverlayWindow));
-  customElements.define("astro-dev-overlay-plugin-canvas", deprecated(DevOverlayCanvas));
-  customElements.define("astro-dev-overlay-tooltip", deprecated(DevOverlayTooltip));
-  customElements.define("astro-dev-overlay-highlight", deprecated(DevOverlayHighlight));
-  customElements.define("astro-dev-overlay-card", deprecated(DevOverlayCard));
-  customElements.define("astro-dev-overlay-toggle", deprecated(DevOverlayToggle));
-  customElements.define("astro-dev-overlay-button", deprecated(DevOverlayButton));
-  customElements.define("astro-dev-overlay-badge", deprecated(DevOverlayBadge));
-  customElements.define("astro-dev-overlay-icon", deprecated(DevOverlayIcon));
+  customElements.define("astro-dev-overlay", deprecated(AstroDevToolbar));
+  customElements.define("astro-dev-overlay-window", deprecated(DevToolbarWindow));
+  customElements.define("astro-dev-overlay-plugin-canvas", deprecated(DevToolbarCanvas));
+  customElements.define("astro-dev-overlay-tooltip", deprecated(DevToolbarTooltip));
+  customElements.define("astro-dev-overlay-highlight", deprecated(DevToolbarHighlight));
+  customElements.define("astro-dev-overlay-card", deprecated(DevToolbarCard));
+  customElements.define("astro-dev-overlay-toggle", deprecated(DevToolbarToggle));
+  customElements.define("astro-dev-overlay-button", deprecated(DevToolbarButton));
+  customElements.define("astro-dev-overlay-badge", deprecated(DevToolbarBadge));
+  customElements.define("astro-dev-overlay-icon", deprecated(DevToolbarIcon));
   overlay = document.createElement("astro-dev-toolbar");
-  const preparePlugin = (pluginDefinition, builtIn) => {
+  const prepareApp = (appDefinition, builtIn) => {
     const eventTarget = new EventTarget();
-    const plugin = {
-      ...pluginDefinition,
+    const app = {
+      ...appDefinition,
       builtIn,
       active: false,
       status: "loading",
@@ -62,14 +62,14 @@ document.addEventListener("DOMContentLoaded", async () => {
       eventTarget
     };
     eventTarget.addEventListener("toggle-notification", (evt) => {
-      const target = overlay.shadowRoot?.querySelector(`[data-plugin-id="${plugin.id}"]`);
+      const target = overlay.shadowRoot?.querySelector(`[data-app-id="${app.id}"]`);
       if (!target)
         return;
       let newState = true;
       if (evt instanceof CustomEvent) {
         newState = evt.detail.state ?? true;
       }
-      plugin.notification.state = newState;
+      app.notification.state = newState;
       target.querySelector(".notification")?.toggleAttribute("data-active", newState);
     });
     const onToggleApp = async (evt) => {
@@ -77,18 +77,18 @@ document.addEventListener("DOMContentLoaded", async () => {
       if (evt instanceof CustomEvent) {
         newState = evt.detail.state ?? true;
       }
-      await overlay.setPluginStatus(plugin, newState);
+      await overlay.setAppStatus(app, newState);
     };
     eventTarget.addEventListener("toggle-app", onToggleApp);
     eventTarget.addEventListener("toggle-plugin", onToggleApp);
-    return plugin;
+    return app;
   };
-  const astromorePlugin = {
+  const astroMoreApp = {
     id: "astro:more",
     name: "More",
     icon: "dots-three",
     init(canvas, eventTarget) {
-      const hiddenPlugins = plugins.filter((p) => !p.builtIn).slice(overlay.customPluginsToShow);
+      const hiddenApps = apps.filter((p) => !p.builtIn).slice(overlay.customAppsToShow);
       createDropdown();
       document.addEventListener("astro:after-swap", createDropdown);
       function createDropdown() {
@@ -165,35 +165,35 @@ document.addEventListener("DOMContentLoaded", async () => {
         canvas.append(style);
         const dropdown = document.createElement("div");
         dropdown.id = "dropdown";
-        dropdown.toggleAttribute("data-no-notification", settings.config.disablePluginNotification);
-        for (const plugin of hiddenPlugins) {
+        dropdown.toggleAttribute("data-no-notification", settings.config.disableAppNotification);
+        for (const app of hiddenApps) {
           const buttonContainer = document.createElement("div");
           buttonContainer.classList.add("item");
           const button = document.createElement("button");
-          button.setAttribute("data-plugin-id", plugin.id);
+          button.setAttribute("data-app-id", app.id);
           const iconContainer = document.createElement("div");
           const iconElement = document.createElement("template");
-          iconElement.innerHTML = getPluginIcon(plugin.icon);
+          iconElement.innerHTML = getAppIcon(app.icon);
           iconContainer.append(iconElement.content.cloneNode(true));
           const notification = document.createElement("div");
           notification.classList.add("notification");
           iconContainer.append(notification);
           iconContainer.classList.add("icon");
           button.append(iconContainer);
-          button.append(document.createTextNode(plugin.name));
+          button.append(document.createTextNode(app.name));
           button.addEventListener("click", () => {
-            overlay.togglePluginStatus(plugin);
+            overlay.toggleAppStatus(app);
           });
           buttonContainer.append(button);
           dropdown.append(buttonContainer);
-          plugin.eventTarget.addEventListener("toggle-notification", (evt) => {
+          app.eventTarget.addEventListener("toggle-notification", (evt) => {
             if (!(evt instanceof CustomEvent))
               return;
             notification.toggleAttribute("data-active", evt.detail.state ?? true);
             eventTarget.dispatchEvent(
               new CustomEvent("toggle-notification", {
                 detail: {
-                  state: hiddenPlugins.some((p) => p.notification.state === true)
+                  state: hiddenApps.some((p) => p.notification.state === true)
                 }
               })
             );
@@ -203,17 +203,13 @@ document.addEventListener("DOMContentLoaded", async () => {
       }
     }
   };
-  const plugins = [
-    ...[
-      astroDevToolPlugin,
-      astroXrayPlugin,
-      astroAuditPlugin,
-      astroSettingsPlugin,
-      astromorePlugin
-    ].map((pluginDef) => preparePlugin(pluginDef, true)),
-    ...customPluginsDefinitions.map((pluginDef) => preparePlugin(pluginDef, false))
+  const apps = [
+    ...[astroDevToolApp, astroXrayApp, astroAuditApp, astroSettingsApp, astroMoreApp].map(
+      (appDef) => prepareApp(appDef, true)
+    ),
+    ...customAppsDefinitions.map((appDef) => prepareApp(appDef, false))
   ];
-  overlay.plugins = plugins;
+  overlay.apps = apps;
   document.body.append(overlay);
   document.addEventListener("astro:after-swap", () => {
     document.body.append(overlay);

package/dist/runtime/client/{dev-overlay → dev-toolbar}/settings.d.ts

@@ -1,9 +1,9 @@
 export interface Settings {
-    disablePluginNotification: boolean;
+    disableAppNotification: boolean;
     verbose: boolean;
 }
 export declare const defaultSettings: {
-    disablePluginNotification: false;
+    disableAppNotification: false;
     verbose: false;
 };
 export declare const settings: {

package/dist/runtime/client/{dev-overlay → dev-toolbar}/settings.js

@@ -1,17 +1,22 @@
 const defaultSettings = {
-  disablePluginNotification: false,
+  disableAppNotification: false,
   verbose: false
 };
 const settings = getSettings();
 function getSettings() {
   let _settings = { ...defaultSettings };
-  const overlaySettings = localStorage.getItem("astro:dev-overlay:settings");
-  if (overlaySettings) {
-    _settings = { ..._settings, ...JSON.parse(overlaySettings) };
+  const toolbarSettings = localStorage.getItem("astro:dev-toolbar:settings");
+  const oldSettings = localStorage.getItem("astro:dev-overlay:settings");
+  if (oldSettings && !toolbarSettings) {
+    localStorage.setItem("astro:dev-toolbar:settings", oldSettings);
+    localStorage.removeItem("astro:dev-overlay:settings");
+  }
+  if (toolbarSettings) {
+    _settings = { ..._settings, ...JSON.parse(toolbarSettings) };
   }
   function updateSetting(key, value) {
     _settings[key] = value;
-    localStorage.setItem("astro:dev-overlay:settings", JSON.stringify(_settings));
+    localStorage.setItem("astro:dev-toolbar:settings", JSON.stringify(_settings));
   }
   function log(message) {
     console.log(

package/dist/runtime/client/dev-toolbar/toolbar.d.ts

@@ -0,0 +1,45 @@
+import type { DevToolbarApp as DevToolbarAppDefinition } from '../../../@types/astro.js';
+import { type Icon } from './ui-library/icons.js';
+export type DevToolbarApp = DevToolbarAppDefinition & {
+    builtIn: boolean;
+    active: boolean;
+    status: 'ready' | 'loading' | 'error';
+    notification: {
+        state: boolean;
+    };
+    eventTarget: EventTarget;
+};
+export declare class AstroDevToolbar extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    delayedHideTimeout: number | undefined;
+    devToolbarContainer: HTMLDivElement | undefined;
+    apps: DevToolbarApp[];
+    hasBeenInitialized: boolean;
+    customAppsToShow: number;
+    constructor();
+    /**
+     * All one-time DOM setup runs through here. Only ever call this once,
+     * in connectedCallback(), and protect it from being called again.
+     */
+    init(): void;
+    connectedCallback(): void;
+    attachEvents(): void;
+    initApp(app: DevToolbarApp): Promise<void>;
+    getAppTemplate(app: DevToolbarApp): string;
+    getAppById(id: string): DevToolbarApp | undefined;
+    getAppCanvasById(id: string): HTMLElement | null;
+    toggleAppStatus(app: DevToolbarApp): Promise<void>;
+    setAppStatus(app: DevToolbarApp, newStatus: boolean): Promise<boolean>;
+    isHidden(): boolean;
+    getActiveApp(): DevToolbarApp | undefined;
+    clearDelayedHide(): void;
+    triggerDelayedHide(): void;
+    setToolbarVisible(newStatus: boolean): void;
+    setNotificationVisible(newStatus: boolean): void;
+}
+export declare class DevToolbarCanvas extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+}
+export declare function getAppIcon(icon: Icon): string;