astro 4.4.14 → 4.5.0

package/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.d.ts

@@ -0,0 +1,23 @@
+import type { Icon } from '../../../ui-library/icons.js';
+import type { Audit } from '../index.js';
+export declare function createRoundedBadge(icon: Icon): {
+    badge: import("../../../ui-library/badge.js").DevToolbarBadge;
+    updateCount: (count: number) => void;
+};
+export declare class DevToolbarAuditListWindow extends HTMLElement {
+    _audits: Audit[];
+    shadowRoot: ShadowRoot;
+    badges: {
+        [key: string]: {
+            badge: HTMLElement;
+            updateCount: (count: number) => void;
+        };
+    };
+    get audits(): Audit[];
+    set audits(value: Audit[]);
+    constructor();
+    connectedCallback(): void;
+    updateAuditList(): void;
+    updateBadgeCounts(): void;
+    render(): void;
+}

package/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.js

@@ -0,0 +1,384 @@
+import { getAuditCategory, rulesCategories } from "../rules/index.js";
+function createRoundedBadge(icon) {
+  const badge = document.createElement("astro-dev-toolbar-badge");
+  badge.shadowRoot.innerHTML += `
+		<style>
+			:host>div {
+				padding: 12px 8px;
+				font-size: 14px;
+				display: flex;
+				gap: 4px;
+			}
+		</style>
+	`;
+  badge.innerHTML = `<astro-dev-toolbar-icon icon="${icon}"></astro-dev-toolbar-icon>0`;
+  return {
+    badge,
+    updateCount: (count) => {
+      if (count === 0) {
+        badge.badgeStyle = "green";
+      } else {
+        badge.badgeStyle = "purple";
+      }
+      badge.innerHTML = `<astro-dev-toolbar-icon icon="${icon}"></astro-dev-toolbar-icon>${count}`;
+    }
+  };
+}
+class DevToolbarAuditListWindow extends HTMLElement {
+  _audits = [];
+  shadowRoot;
+  badges = {};
+  get audits() {
+    return this._audits;
+  }
+  set audits(value) {
+    this._audits = value;
+    this.render();
+  }
+  constructor() {
+    super();
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `<style>
+			:host {
+				box-sizing: border-box;
+				display: flex;
+				flex-direction: column;
+				background: linear-gradient(0deg, #13151a, #13151a), linear-gradient(0deg, #343841, #343841);
+				border: 1px solid rgba(52, 56, 65, 1);
+				width: min(640px, 100%);
+				max-height: 480px;
+				border-radius: 12px;
+				padding: 24px;
+				font-family:
+					ui-sans-serif,
+					system-ui,
+					-apple-system,
+					BlinkMacSystemFont,
+					"Segoe UI",
+					Roboto,
+					"Helvetica Neue",
+					Arial,
+					"Noto Sans",
+					sans-serif,
+					"Apple Color Emoji",
+					"Segoe UI Emoji",
+					"Segoe UI Symbol",
+					"Noto Color Emoji";
+				color: rgba(191, 193, 201, 1);
+				position: fixed;
+				z-index: 999999999;
+				bottom: 72px;
+				left: 50%;
+				transform: translateX(-50%);
+				box-shadow:
+					0px 0px 0px 0px rgba(19, 21, 26, 0.3),
+					0px 1px 2px 0px rgba(19, 21, 26, 0.29),
+					0px 4px 4px 0px rgba(19, 21, 26, 0.26),
+					0px 10px 6px 0px rgba(19, 21, 26, 0.15),
+					0px 17px 7px 0px rgba(19, 21, 26, 0.04),
+					0px 26px 7px 0px rgba(19, 21, 26, 0.01);
+			}
+
+			@media (forced-colors: active) {
+				:host {
+					background: white;
+				}
+			}
+
+			@media (max-width: 640px) {
+				:host {
+					border-radius: 0;
+				}
+			}
+
+			hr,
+			::slotted(hr) {
+				border: 1px solid rgba(27, 30, 36, 1);
+				margin: 1em 0;
+			}
+
+			.reset-button {
+				text-align: left;
+				border: none;
+				margin: 0;
+				width: auto;
+				overflow: visible;
+				background: transparent;
+				font: inherit;
+				line-height: normal;
+				-webkit-font-smoothing: inherit;
+				-moz-osx-font-smoothing: inherit;
+				-webkit-appearance: none;
+				padding: 0;
+			}
+
+			:host {
+				left: initial;
+				top: 8px;
+				right: 8px;
+				transform: none;
+				width: 350px;
+				min-height: 350px;
+				max-height: 420px;
+				padding: 0;
+				overflow: hidden;
+			}
+
+			hr {
+				margin: 0;
+			}
+
+			header {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+			}
+
+			header > section {
+				display: flex;
+				align-items: center;
+				gap: 1em;
+				padding: 18px;
+			}
+
+			header.category-header {
+				background: rgba(27, 30, 36, 1);
+				padding: 10px 16px;
+				position: sticky;
+				top: 0;
+			}
+
+			header.category-header astro-dev-toolbar-icon {
+				opacity: 0.6;
+			}
+
+			#audit-counts {
+				display: flex;
+				gap: 0.5em;
+			}
+
+			#audit-counts > div {
+				display: flex;
+				gap: 8px;
+				align-items: center;
+			}
+
+			ul,
+			li {
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+
+			h1 {
+				font-size: 24px;
+				font-weight: 600;
+				color: #fff;
+				margin: 0;
+			}
+
+			h2 {
+				font-weight: 600;
+				margin: 0;
+				color: white;
+				font-size: 14px;
+			}
+
+			h3 {
+				font-weight: normal;
+				margin: 0;
+				color: white;
+				font-size: 14px;
+			}
+
+			.audit-header {
+				display: flex;
+				gap: 8px;
+				align-items: center;
+			}
+
+			.audit-selector {
+				color: white;
+				font-size: 12px;
+				font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+					"Liberation Mono", "Courier New", monospace;
+				border: 1px solid rgba(255, 255, 255, 0.1);
+				border-radius: 4px;
+				padding: 4px 6px;
+			}
+
+			[active] .audit-selector:hover {
+				text-decoration: underline;
+				cursor: pointer;
+			}
+
+			.selector-title-container {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			astro-dev-toolbar-icon {
+				color: white;
+				fill: white;
+				display: inline-block;
+				height: 16px;
+				width: 16px;
+			}
+
+			#audit-list {
+				display: flex;
+				flex-direction: column;
+				overflow: auto;
+				overscroll-behavior: contain;
+				height: 100%;
+			}
+
+			#back-to-list {
+				display: none;
+				align-items: center;
+				justify-content: center;
+				background: rgba(27, 30, 36, 1);
+				gap: 8px;
+				padding: 8px;
+				color: white;
+				font-size: 14px;
+				padding-right: 24px;
+			}
+
+			#back-to-list:hover {
+				cursor: pointer;
+				background: #313236;
+			}
+
+			#back-to-list:has(+ #audit-list astro-dev-toolbar-audit-list-item[active]) {
+				display: flex;
+			}
+
+			.no-audit-container {
+				display: flex;
+				flex-direction: column;
+				padding: 24px;
+			}
+
+			.no-audit-container h1 {
+				font-size: 20px;
+			}
+
+			.no-audit-container astro-dev-toolbar-icon {
+				width: auto;
+				height: auto;
+				margin: 0 auto;
+			}
+</style>
+
+<template id="category-template">
+	<div>
+		<header class="category-header">
+		</header>
+		<div class="category-content"></div>
+	</div>
+</template>
+
+<header>
+	<section id="header-left">
+		<h1>Audit</h1>
+		<section id="audit-counts"></section>
+	</section>
+</header>
+<hr />
+<button id="back-to-list" class="reset-button">
+	<astro-dev-toolbar-icon icon="arrow-left"></astro-dev-toolbar-icon>
+	Back to list
+</button>
+<div id="audit-list"></div>
+		`;
+    const auditCounts = this.shadowRoot.getElementById("audit-counts");
+    if (auditCounts) {
+      rulesCategories.forEach((category) => {
+        const headerEntryContainer = document.createElement("div");
+        const auditCount = this.audits.filter(
+          (audit) => getAuditCategory(audit.rule) === category.code
+        ).length;
+        const categoryBadge = createRoundedBadge(category.icon);
+        categoryBadge.updateCount(auditCount);
+        headerEntryContainer.append(categoryBadge.badge);
+        auditCounts.append(headerEntryContainer);
+        this.badges[category.code] = categoryBadge;
+      });
+    }
+    const backToListButton = this.shadowRoot.getElementById("back-to-list");
+    if (backToListButton) {
+      backToListButton.addEventListener("click", () => {
+        const activeAudit = this.shadowRoot.querySelector(
+          "astro-dev-toolbar-audit-list-item[active]"
+        );
+        if (activeAudit) {
+          activeAudit.toggleAttribute("active", false);
+        }
+      });
+    }
+  }
+  connectedCallback() {
+    this.render();
+  }
+  updateAuditList() {
+    const auditListContainer = this.shadowRoot.getElementById("audit-list");
+    if (auditListContainer) {
+      auditListContainer.innerHTML = "";
+      if (this.audits.length > 0) {
+        for (const category of rulesCategories) {
+          const template = this.shadowRoot.getElementById(
+            "category-template"
+          );
+          if (!template)
+            return;
+          const clone = document.importNode(template.content, true);
+          const categoryContainer = clone.querySelector("div");
+          const categoryHeader = clone.querySelector(".category-header");
+          categoryHeader.innerHTML = `<astro-dev-toolbar-icon icon="${category.icon}"></astro-dev-toolbar-icon><h2>${category.name}</h2>`;
+          categoryContainer.append(categoryHeader);
+          const categoryContent = clone.querySelector(".category-content");
+          const categoryAudits = this.audits.filter(
+            (audit) => getAuditCategory(audit.rule) === category.code
+          );
+          for (const audit of categoryAudits) {
+            if (audit.card)
+              categoryContent.append(audit.card);
+          }
+          categoryContainer.append(categoryContent);
+          auditListContainer.append(categoryContainer);
+        }
+      } else {
+        const noAuditContainer = document.createElement("div");
+        noAuditContainer.classList.add("no-audit-container");
+        noAuditContainer.innerHTML = `
+					<header>
+						<h1></astro-dev-toolbar-icon>No accessibility or performance issues detected.</h1>
+					</header>
+					<p>
+						Nice work! This app scans the page and highlights common accessibility and performance issues for you, like a missing "alt" attribute on an image, or a image not using performant attributes.
+					</p>
+					<astro-dev-toolbar-icon icon="houston-detective"></astro-dev-toolbar-icon>
+					`;
+        auditListContainer.append(noAuditContainer);
+      }
+    }
+  }
+  updateBadgeCounts() {
+    for (const category of rulesCategories) {
+      const auditCount = this.audits.filter(
+        (audit) => getAuditCategory(audit.rule) === category.code
+      ).length;
+      this.badges[category.code].updateCount(auditCount);
+    }
+  }
+  render() {
+    this.updateAuditList();
+    this.updateBadgeCounts();
+  }
+}
+export {
+  DevToolbarAuditListWindow,
+  createRoundedBadge
+};

package/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.d.ts

@@ -0,0 +1,6 @@
+import type { Audit } from '../index.js';
+import type { DevToolbarAuditListItem } from './audit-list-item.js';
+export declare function createAuditUI(audit: Audit, audits: Audit[]): {
+    highlight: import("../../../ui-library/highlight.js").DevToolbarHighlight;
+    card: DevToolbarAuditListItem;
+};

package/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.js

@@ -0,0 +1,126 @@
+import { escape as escapeHTML } from "html-escaper";
+import {
+  attachTooltipToHighlight,
+  createHighlight,
+  getElementsPositionInDocument
+} from "../../utils/highlight.js";
+import { resolveAuditRule } from "../rules/index.js";
+function truncate(val, maxLength) {
+  return val.length > maxLength ? val.slice(0, maxLength - 1) + "…" : val;
+}
+function createAuditUI(audit, audits) {
+  const rect = audit.auditedElement.getBoundingClientRect();
+  const highlight = createHighlight(rect, "warning", { "data-audit-code": audit.rule.code });
+  const resolvedAuditRule = resolveAuditRule(audit.rule, audit.auditedElement);
+  const tooltip = buildAuditTooltip(resolvedAuditRule, audit.auditedElement);
+  const card = buildAuditCard(resolvedAuditRule, highlight, audit.auditedElement, audits);
+  ["focus", "mouseover"].forEach((event) => {
+    const attribute = event === "focus" ? "active" : "hovered";
+    highlight.addEventListener(event, () => {
+      if (event === "focus") {
+        audits.forEach((adt) => {
+          if (adt.card)
+            adt.card.toggleAttribute("active", false);
+        });
+        if (!card.isManualFocus)
+          card.scrollIntoView();
+        card.toggleAttribute("active", true);
+      } else {
+        card.toggleAttribute(attribute, true);
+      }
+    });
+  });
+  highlight.addEventListener("mouseout", () => {
+    card.toggleAttribute("hovered", false);
+  });
+  const { isFixed } = getElementsPositionInDocument(audit.auditedElement);
+  if (isFixed) {
+    tooltip.style.position = highlight.style.position = "fixed";
+  }
+  attachTooltipToHighlight(highlight, tooltip, audit.auditedElement);
+  return { highlight, card };
+}
+function buildAuditTooltip(rule, element) {
+  const tooltip = document.createElement("astro-dev-toolbar-tooltip");
+  const { title, message } = rule;
+  tooltip.sections = [
+    {
+      icon: "warning",
+      title: escapeHTML(title)
+    },
+    {
+      content: escapeHTML(message)
+    }
+  ];
+  const elementFile = element.getAttribute("data-astro-source-file");
+  const elementPosition = element.getAttribute("data-astro-source-loc");
+  if (elementFile) {
+    const elementFileWithPosition = elementFile + (elementPosition ? ":" + elementPosition : "");
+    tooltip.sections.push({
+      content: elementFileWithPosition.slice(
+        window.__astro_dev_toolbar__.root.length - 1
+        // We want to keep the final slash, so minus one.
+      ),
+      clickDescription: "Click to go to file",
+      async clickAction() {
+        await fetch("/__open-in-editor?file=" + encodeURIComponent(elementFileWithPosition));
+      }
+    });
+  }
+  return tooltip;
+}
+function buildAuditCard(rule, highlightElement, auditedElement, audits) {
+  const card = document.createElement(
+    "astro-dev-toolbar-audit-list-item"
+  );
+  card.clickAction = () => {
+    if (card.hasAttribute("active"))
+      return;
+    audits.forEach((audit) => {
+      audit.card?.toggleAttribute("active", false);
+    });
+    highlightElement.scrollIntoView();
+    card.isManualFocus = true;
+    highlightElement.focus();
+    card.isManualFocus = false;
+  };
+  const selectorTitleContainer = document.createElement("section");
+  selectorTitleContainer.classList.add("selector-title-container");
+  const selector = document.createElement("span");
+  const selectorName = truncate(auditedElement.tagName.toLowerCase(), 8);
+  selector.classList.add("audit-selector");
+  selector.innerHTML = escapeHTML(selectorName);
+  const title = document.createElement("h3");
+  title.classList.add("audit-title");
+  title.innerText = rule.title;
+  selectorTitleContainer.append(selector, title);
+  card.append(selectorTitleContainer);
+  const extendedInfo = document.createElement("div");
+  extendedInfo.classList.add("extended-info");
+  const selectorButton = document.createElement("button");
+  selectorButton.className = "audit-selector reset-button";
+  selectorButton.innerHTML = `${selectorName} <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M128,136v64a8,8,0,0,1-16,0V155.32L45.66,221.66a8,8,0,0,1-11.32-11.32L100.68,144H56a8,8,0,0,1,0-16h64A8,8,0,0,1,128,136ZM208,32H80A16,16,0,0,0,64,48V96a8,8,0,0,0,16,0V48H208V176H160a8,8,0,0,0,0,16h48a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Z"></path></svg>`;
+  selectorButton.addEventListener("click", () => {
+    highlightElement.scrollIntoView();
+    highlightElement.focus();
+  });
+  extendedInfo.append(title.cloneNode(true));
+  extendedInfo.append(selectorButton);
+  extendedInfo.append(document.createElement("hr"));
+  const message = document.createElement("p");
+  message.classList.add("audit-message");
+  message.innerHTML = rule.message;
+  extendedInfo.appendChild(message);
+  const description = rule.description;
+  if (description) {
+    const descriptionElement = document.createElement("p");
+    descriptionElement.classList.add("audit-description");
+    descriptionElement.innerHTML = description;
+    extendedInfo.appendChild(descriptionElement);
+  }
+  card.shadowRoot.appendChild(extendedInfo);
+  return card;
+}
+export {
+  createAuditUI
+};

package/dist/runtime/client/dev-toolbar/apps/utils/window.d.ts

@@ -1,2 +1,2 @@
 export declare function createWindowElement(content: string): import("../../ui-library/window.js").DevToolbarWindow;
-export declare function closeOnOutsideClick(eventTarget: EventTarget): void;
+export declare function closeOnOutsideClick(eventTarget: EventTarget, additionalCheck?: (target: Element) => boolean): void;

package/dist/runtime/client/dev-toolbar/apps/utils/window.js

@@ -3,7 +3,7 @@ function createWindowElement(content) {
   windowElement.innerHTML = content;
   return windowElement;
 }
-function closeOnOutsideClick(eventTarget) {
+function closeOnOutsideClick(eventTarget, additionalCheck) {
   function onPageClick(event) {
     const target = event.target;
     if (!target)
@@ -12,6 +12,8 @@ function closeOnOutsideClick(eventTarget) {
       return;
     if (target.closest("astro-dev-toolbar"))
       return;
+    if (additionalCheck && additionalCheck(target))
+      return;
     eventTarget.dispatchEvent(
       new CustomEvent("toggle-app", {
         detail: {

package/dist/runtime/client/dev-toolbar/entrypoint.js

@@ -51,6 +51,12 @@ document.addEventListener("DOMContentLoaded", async () => {
   customElements.define("astro-dev-overlay-badge", deprecated(DevToolbarBadge));
   customElements.define("astro-dev-overlay-icon", deprecated(DevToolbarIcon));
   overlay = document.createElement("astro-dev-toolbar");
+  const notificationLevels = ["error", "warning", "info"];
+  const notificationSVGs = {
+    error: '<svg viewBox="0 0 10 10"><rect width="9" height="9" x=".5" y=".5" fill="#B33E66" stroke="#13151A" rx="4.5"/></svg>',
+    warning: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" fill="none"><path fill="#B58A2D" stroke="#13151A" d="M7.29904 1.25c-.57735-1-2.02073-1-2.59808 0l-3.4641 6C.65951 8.25 1.3812 9.5 2.5359 9.5h6.9282c1.1547 0 1.8764-1.25 1.299-2.25l-3.46406-6Z"/></svg>',
+    info: '<svg viewBox="0 0 10 10"><rect width="9" height="9" x=".5" y=".5" fill="#3645D9" stroke="#13151A" rx="1.5"/></svg>'
+  };
   const prepareApp = (appDefinition, builtIn) => {
     const eventTarget = new EventTarget();
     const app = {
@@ -58,19 +64,26 @@ document.addEventListener("DOMContentLoaded", async () => {
       builtIn,
       active: false,
       status: "loading",
-      notification: { state: false },
+      notification: { state: false, level: void 0 },
       eventTarget
     };
     eventTarget.addEventListener("toggle-notification", (evt) => {
+      if (!(evt instanceof CustomEvent))
+        return;
       const target = overlay.shadowRoot?.querySelector(`[data-app-id="${app.id}"]`);
-      if (!target)
+      const notificationElement = target?.querySelector(".notification");
+      if (!target || !notificationElement)
         return;
-      let newState = true;
-      if (evt instanceof CustomEvent) {
-        newState = evt.detail.state ?? true;
-      }
+      let newState = evt.detail.state ?? true;
+      let level = notificationLevels.includes(evt?.detail?.level) ? evt.detail.level : "error";
       app.notification.state = newState;
-      target.querySelector(".notification")?.toggleAttribute("data-active", newState);
+      if (newState)
+        app.notification.level = level;
+      notificationElement.toggleAttribute("data-active", newState);
+      if (newState) {
+        notificationElement.setAttribute("data-level", level);
+        notificationElement.innerHTML = notificationSVGs[level];
+      }
     });
     const onToggleApp = async (evt) => {
       let newState = void 0;
@@ -112,12 +125,13 @@ document.addEventListener("DOMContentLoaded", async () => {
 						display: none;
 						position: absolute;
 						top: -4px;
-						right: -6px;
-						width: 8px;
-						height: 8px;
-						border-radius: 9999px;
-						border: 1px solid rgba(19, 21, 26, 1);
-						background: #B33E66;
+						right: -5px;
+						width: 12px;
+						height: 10px;
+					}
+
+					.notification svg {
+						display: block;
 					}
 
 					#dropdown:not([data-no-notification]) .notification[data-active] {
@@ -189,11 +203,25 @@ document.addEventListener("DOMContentLoaded", async () => {
           app.eventTarget.addEventListener("toggle-notification", (evt) => {
             if (!(evt instanceof CustomEvent))
               return;
-            notification.toggleAttribute("data-active", evt.detail.state ?? true);
+            let newState = evt.detail.state ?? true;
+            let level = notificationLevels.includes(evt?.detail?.level) ? evt.detail.level : "error";
+            notification.toggleAttribute("data-active", newState);
+            if (newState) {
+              notification.setAttribute("data-level", level);
+              notification.innerHTML = notificationSVGs[level];
+            }
+            app.notification.state = newState;
+            if (newState)
+              app.notification.level = level;
             eventTarget.dispatchEvent(
               new CustomEvent("toggle-notification", {
                 detail: {
-                  state: hiddenApps.some((p) => p.notification.state === true)
+                  state: hiddenApps.some((p) => p.notification.state === true),
+                  level: ["error", "warning", "info"].find(
+                    (notificationLevel) => hiddenApps.some(
+                      (p) => p.notification.state === true && p.notification.level === notificationLevel
+                    )
+                  ) ?? "error"
                 }
               })
             );

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

@@ -10,7 +10,9 @@ export declare const settings: {
     readonly config: Settings;
     updateSetting: (key: keyof Settings, value: boolean) => void;
     logger: {
-        log: (message: string) => void;
+        log: (message: string, level?: 'log' | 'warn' | 'error') => void;
+        warn: (message: string) => void;
+        error: (message: string) => void;
         verboseLog: (message: string) => void;
     };
 };

package/dist/runtime/client/dev-toolbar/settings.js

@@ -18,8 +18,8 @@ function getSettings() {
     _settings[key] = value;
     localStorage.setItem("astro:dev-toolbar:settings", JSON.stringify(_settings));
   }
-  function log(message) {
-    console.log(
+  function log(message, level = "log") {
+    console[level](
       `%cAstro`,
       "background: linear-gradient(66.77deg, #D83333 0%, #F041FF 100%); color: white; padding-inline: 4px; border-radius: 2px; font-family: monospace;",
       message
@@ -32,6 +32,12 @@ function getSettings() {
     updateSetting,
     logger: {
       log,
+      warn: (message) => {
+        log(message, "warn");
+      },
+      error: (message) => {
+        log(message, "error");
+      },
       verboseLog: (message) => {
         if (_settings.verbose) {
           log(message);