astro 4.4.14 → 4.5.0

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

@@ -1,25 +1,15 @@
-import { finder } from "@medv/finder";
-import {
-  attachTooltipToHighlight,
-  createHighlight,
-  getElementsPositionInDocument,
-  positionHighlight
-} from "../utils/highlight.js";
-import { closeOnOutsideClick, createWindowElement } from "../utils/window.js";
-import { a11y } from "./a11y.js";
-import { perf } from "./perf.js";
+import { settings } from "../../settings.js";
+import { positionHighlight } from "../utils/highlight.js";
+import { closeOnOutsideClick } from "../utils/window.js";
+import { rulesCategories } from "./rules/index.js";
+import { DevToolbarAuditListItem } from "./ui/audit-list-item.js";
+import { DevToolbarAuditListWindow } from "./ui/audit-list-window.js";
+import { createAuditUI } from "./ui/audit-ui.js";
 const icon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 1 20 16"><path fill="#fff" d="M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z"/></svg>';
-const rules = [...a11y, ...perf];
-const dynamicAuditRuleKeys = ["title", "message"];
-function resolveAuditRule(rule, element) {
-  let resolved = { ...rule };
-  for (const key of dynamicAuditRuleKeys) {
-    const value = rule[key];
-    if (typeof value === "string")
-      continue;
-    resolved[key] = value(element);
-  }
-  return resolved;
+try {
+  customElements.define("astro-dev-toolbar-audit-window", DevToolbarAuditListWindow);
+  customElements.define("astro-dev-toolbar-audit-list-item", DevToolbarAuditListItem);
+} catch (e) {
 }
 var audit_default = {
   id: "astro:audit",
@@ -27,201 +17,116 @@ var audit_default = {
   icon,
   async init(canvas, eventTarget) {
     let audits = [];
+    let auditWindow = document.createElement(
+      "astro-dev-toolbar-audit-window"
+    );
+    let hasCreatedUI = false;
+    canvas.appendChild(auditWindow);
     await lint();
-    document.addEventListener("astro:after-swap", async () => lint());
-    document.addEventListener("astro:page-load", async () => refreshLintPositions);
-    closeOnOutsideClick(eventTarget);
-    async function lint() {
-      audits.forEach(({ highlightElement }) => {
-        highlightElement.remove();
-      });
-      audits = [];
-      canvas.getElementById("no-audit")?.remove();
-      const selectorCache = /* @__PURE__ */ new Map();
-      for (const rule of rules) {
-        const elements = selectorCache.get(rule.selector) ?? document.querySelectorAll(rule.selector);
-        let matches = [];
-        if (typeof rule.match === "undefined") {
-          matches = Array.from(elements);
+    let mutationDebounce;
+    const observer = new MutationObserver(() => {
+      if (mutationDebounce) {
+        clearTimeout(mutationDebounce);
+      }
+      mutationDebounce = setTimeout(() => {
+        settings.logger.verboseLog("Rerunning audit lints because the DOM has been updated.");
+        if ("requestIdleCallback" in window) {
+          window.requestIdleCallback(
+            async () => {
+              lint();
+            },
+            { timeout: 300 }
+          );
         } else {
-          for (const element of elements) {
-            if (await rule.match(element)) {
-              matches.push(element);
-            }
-          }
-        }
-        for (const element of matches) {
-          if (audits.some((audit) => audit.auditedElement === element))
-            continue;
-          await createAuditProblem(rule, element);
+          setTimeout(() => {
+            lint();
+          }, 150);
         }
+      }, 250);
+    });
+    setupObserver();
+    document.addEventListener("astro:before-preparation", () => {
+      observer.disconnect();
+    });
+    document.addEventListener("astro:after-swap", async () => {
+      lint();
+    });
+    document.addEventListener("astro:page-load", async () => {
+      refreshLintPositions();
+      setTimeout(() => {
+        setupObserver();
+      }, 100);
+    });
+    eventTarget.addEventListener("app-toggled", (event) => {
+      if (event.detail.state === true) {
+        createAuditsUI();
       }
-      if (audits.length > 0) {
-        eventTarget.dispatchEvent(
-          new CustomEvent("toggle-notification", {
-            detail: {
-              state: true
-            }
-          })
-        );
-        const auditListWindow = createWindowElement(
-          `
-					<style>
-						astro-dev-toolbar-window {
-  	          left: initial;
-              top: 8px;
-              right: 8px;
-              transform: none;
-              width: 320px;
-              max-height: 320px;
-              padding: 0;
-              overflow: hidden;
-						}
-
-						hr {
-						  margin: 0;
-						}
-
-						header {
-						  display: flex;
-							justify-content: space-between;
-							align-items: center;
-						  padding: 18px;
-						}
-
-						h1 {
-						  font-size: 22px;
-  						font-weight: 600;
-  						color: #fff;
-						}
-
-						ul, li {
-						  margin: 0;
-							padding: 0;
-							list-style: none;
-						}
-
-						h1, h2 {
-						  margin: 0;
-						}
-
-						h3 {
-      		    margin: 0;
-              margin-bottom: 8px;
-              color: white;
-              white-space: nowrap;
-						}
-
-						.audit-title {
-						  font-weight: bold;
-							color: white;
-							margin-right: 1ch;
-						}
-
-						#audit-list {
-  						display: flex;
-              flex-direction: column;
-              overflow: auto;
-						}
-					</style>
-
-					<header>
-					  <h1>Audits</h1>
-						<astro-dev-toolbar-badge size="large">${audits.length} problem${audits.length > 1 ? "s" : ""} found</astro-dev-toolbar-badge>
-					</header>
-					<hr />`
-        );
-        const auditListUl = document.createElement("ul");
-        auditListUl.id = "audit-list";
-        audits.forEach((audit, index) => {
-          const resolvedRule = resolveAuditRule(audit.rule, audit.auditedElement);
-          const card = document.createElement("astro-dev-toolbar-card");
-          card.shadowRoot.innerHTML = `
-					<style>
-					 :host>button {
-						  text-align: left;
-							box-shadow: none !important;
-							${index + 1 < audits.length ? "border-radius: 0 !important;" : "border-radius: 0 0 8px 8px !important;"}
-						}
-
-						:host>button:hover {
-						  cursor: pointer;
-						}
-					</style>`;
-          card.clickAction = () => {
-            audit.highlightElement.scrollIntoView();
-            audit.highlightElement.focus();
-          };
-          const h3 = document.createElement("h3");
-          h3.innerText = finder(audit.auditedElement);
-          card.appendChild(h3);
-          const div = document.createElement("div");
-          const title = document.createElement("span");
-          title.classList.add("audit-title");
-          title.innerHTML = resolvedRule.title;
-          div.appendChild(title);
-          card.appendChild(div);
-          auditListUl.appendChild(card);
+    });
+    closeOnOutsideClick(eventTarget, () => {
+      const activeAudits = audits.filter((audit) => audit.card?.hasAttribute("active"));
+      if (activeAudits.length > 0) {
+        activeAudits.forEach((audit) => {
+          audit.card?.toggleAttribute("active", false);
         });
-        auditListWindow.appendChild(auditListUl);
-        canvas.append(auditListWindow);
-      } else {
-        eventTarget.dispatchEvent(
-          new CustomEvent("toggle-notification", {
-            detail: {
-              state: false
-            }
-          })
-        );
-        const window2 = createWindowElement(
-          `<style>
-						header {
-							display: flex;
-						}
-
-						h1 {
-							display: flex;
-							align-items: center;
-							gap: 8px;
-							font-weight: 600;
-							color: #fff;
-							margin: 0;
-							font-size: 22px;
-						}
-
-						astro-dev-toolbar-icon {
-							width: 1em;
-						   height: 1em;
-						   padding: 8px;
-							display: block;
-							background: green;
-							border-radius: 9999px;
-						}
-					</style>
-					<header>
-						<h1><astro-dev-toolbar-icon icon="check-circle"></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>
-					`
-        );
-        canvas.append(window2);
+        return true;
       }
-      ["scroll", "resize"].forEach((event) => {
-        window.addEventListener(event, refreshLintPositions);
-      });
+      return false;
+    });
+    async function createAuditsUI() {
+      if (hasCreatedUI)
+        return;
+      const fragment = document.createDocumentFragment();
+      for (const audit of audits) {
+        const { card, highlight } = createAuditUI(audit, audits);
+        audit.card = card;
+        audit.highlight = highlight;
+        fragment.appendChild(highlight);
+      }
+      auditWindow.audits = audits;
+      canvas.appendChild(fragment);
+      hasCreatedUI = true;
     }
-    function refreshLintPositions() {
-      const noAuditBlock = canvas.getElementById("no-audit");
-      if (noAuditBlock) {
-        const devOverlayRect = document.querySelector("astro-dev-toolbar")?.shadowRoot.querySelector("#dev-toolbar-root")?.getBoundingClientRect();
-        noAuditBlock.style.top = `${(devOverlayRect?.top ?? 0) - (devOverlayRect?.height ?? 0) - 16}px`;
+    async function lint() {
+      if (audits.length > 0) {
+        audits.forEach((audit) => {
+          audit.highlight?.remove();
+          audit.card?.remove();
+        });
+        audits = [];
+        hasCreatedUI = false;
       }
-      audits.forEach(({ highlightElement, auditedElement }) => {
-        const rect = auditedElement.getBoundingClientRect();
-        positionHighlight(highlightElement, rect);
-      });
+      const selectorCache = /* @__PURE__ */ new Map();
+      for (const ruleCategory of rulesCategories) {
+        for (const rule of ruleCategory.rules) {
+          const elements = selectorCache.get(rule.selector) ?? document.querySelectorAll(rule.selector);
+          let matches = [];
+          if (typeof rule.match === "undefined") {
+            matches = Array.from(elements);
+          } else {
+            for (const element of elements) {
+              try {
+                if (await rule.match(element)) {
+                  matches.push(element);
+                }
+              } catch (e) {
+                settings.logger.error(`Error while running audit's match function: ${e}`);
+              }
+            }
+          }
+          for (const element of matches) {
+            if (audits.some((audit) => audit.auditedElement === element))
+              continue;
+            await createAuditProblem(rule, element);
+          }
+        }
+      }
+      eventTarget.dispatchEvent(
+        new CustomEvent("toggle-notification", {
+          detail: {
+            state: audits.length > 0
+          }
+        })
+      );
     }
     async function createAuditProblem(rule, originalElement) {
       const computedStyle = window.getComputedStyle(originalElement);
@@ -232,52 +137,28 @@ var audit_default = {
       if (originalElement.nodeName === "IMG" && !originalElement.complete) {
         return;
       }
-      const rect = originalElement.getBoundingClientRect();
-      const highlight = createHighlight(rect, "warning", { "data-audit-code": rule.code });
-      const tooltip = buildAuditTooltip(rule, originalElement);
-      const { isFixed } = getElementsPositionInDocument(originalElement);
-      if (isFixed) {
-        tooltip.style.position = highlight.style.position = "fixed";
-      }
-      attachTooltipToHighlight(highlight, tooltip, originalElement);
-      canvas.append(highlight);
       audits.push({
-        highlightElement: highlight,
         auditedElement: originalElement,
-        rule
+        rule,
+        card: null,
+        highlight: null
       });
     }
-    function buildAuditTooltip(rule, element) {
-      const tooltip = document.createElement("astro-dev-toolbar-tooltip");
-      const { title, message } = resolveAuditRule(rule, element);
-      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 refreshLintPositions() {
+      audits.forEach(({ highlight, auditedElement }) => {
+        const rect = auditedElement.getBoundingClientRect();
+        if (highlight)
+          positionHighlight(highlight, rect);
+      });
     }
-    function escapeHtml(unsafe) {
-      return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+    ["scroll", "resize"].forEach((event) => {
+      window.addEventListener(event, refreshLintPositions);
+    });
+    function setupObserver() {
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
     }
   }
 };

package/dist/runtime/client/dev-toolbar/apps/audit/{a11y.js → rules/a11y.js}

@@ -262,8 +262,8 @@ const a11y = [
     }
   },
   {
-    code: "a11y-invalid-attribute",
-    title: "Attributes important for accessibility should have a valid value",
+    code: "a11y-invalid-href",
+    title: "Invalid `href` attribute",
     message: "`href` should not be empty, `'#'`, or `javascript:`.",
     selector: 'a[href]:is([href=""], [href="#"], [href^="javascript:" i])'
   },
@@ -306,6 +306,7 @@ const a11y = [
   {
     code: "a11y-missing-attribute",
     title: "Required attributes missing.",
+    description: "Some HTML elements require additional attributes for accessibility. For example, an `img` element requires an `alt` attribute, this attribute is used to describe the content of the image for screen readers.",
     message: (element) => {
       const requiredAttributes = a11y_required_attributes[element.localName];
       const missingAttributes = requiredAttributes.filter(
@@ -448,6 +449,7 @@ const a11y = [
   {
     code: "a11y-no-noninteractive-tabindex",
     title: "Invalid `tabindex` on non-interactive element",
+    description: 'The `tabindex` attribute should only be used on interactive elements, as it can be confusing for keyboard-only users to navigate through non-interactive elements. If your element is only conditionally interactive, consider using `tabindex="-1"` to make it focusable only when it is actually interactive.',
     message: (element) => `${element.localName} elements should not have \`tabindex\` attribute`,
     selector: "[tabindex]",
     match(element) {

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

@@ -0,0 +1,35 @@
+type DynamicString = string | ((element: Element) => string);
+export interface AuditRule {
+    code: string;
+    title: DynamicString;
+    message: DynamicString;
+    description?: DynamicString;
+}
+export interface ResolvedAuditRule {
+    code: string;
+    title: string;
+    message: string;
+    description?: string;
+}
+export interface AuditRuleWithSelector extends AuditRule {
+    selector: string;
+    match?: (element: Element) => boolean | null | undefined | void | Promise<boolean> | Promise<void> | Promise<null> | Promise<undefined>;
+}
+export declare const rulesCategories: ({
+    code: string;
+    name: string;
+    icon: "person-arms-spread";
+    rules: AuditRuleWithSelector[];
+} | {
+    code: string;
+    name: string;
+    icon: "gauge";
+    rules: AuditRuleWithSelector[];
+})[];
+export declare function resolveAuditRule(rule: AuditRule, element: Element): ResolvedAuditRule;
+export declare function getAuditCategory(rule: AuditRule): 'perf' | 'a11y';
+export declare const categoryLabel: {
+    perf: string;
+    a11y: string;
+};
+export {};

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

@@ -0,0 +1,40 @@
+import { settings } from "../../../settings.js";
+import { a11y } from "./a11y.js";
+import { perf } from "./perf.js";
+const rulesCategories = [
+  { code: "a11y", name: "Accessibility", icon: "person-arms-spread", rules: a11y },
+  { code: "perf", name: "Performance", icon: "gauge", rules: perf }
+];
+const dynamicAuditRuleKeys = ["title", "message", "description"];
+function resolveAuditRule(rule, element) {
+  let resolved = { ...rule };
+  for (const key of dynamicAuditRuleKeys) {
+    const value = rule[key];
+    if (typeof value === "string")
+      continue;
+    try {
+      if (!value) {
+        resolved[key] = "";
+        continue;
+      }
+      resolved[key] = value(element);
+    } catch (err) {
+      settings.logger.error(`Error resolving dynamic audit rule ${rule.code}'s ${key}: ${err}`);
+      resolved[key] = "Error resolving dynamic rule";
+    }
+  }
+  return resolved;
+}
+function getAuditCategory(rule) {
+  return rule.code.split("-")[0];
+}
+const categoryLabel = {
+  perf: "performance",
+  a11y: "accessibility"
+};
+export {
+  categoryLabel,
+  getAuditCategory,
+  resolveAuditRule,
+  rulesCategories
+};

package/dist/runtime/client/dev-toolbar/apps/audit/{perf.js → rules/perf.js}

@@ -21,7 +21,7 @@ const perf = [
   },
   {
     code: "perf-use-loading-lazy",
-    title: 'Use the loading="lazy" attribute',
+    title: "Unoptimized loading attribute",
     message: (element) => `This ${element.nodeName} tag is below the fold and could be lazy-loaded to improve performance.`,
     selector: 'img:not([loading]), img[loading="eager"], iframe:not([loading]), iframe[loading="eager"]',
     match(element) {
@@ -35,7 +35,7 @@ const perf = [
   },
   {
     code: "perf-use-loading-eager",
-    title: 'Use the loading="eager" attribute',
+    title: "Unoptimized loading attribute",
     message: (element) => `This ${element.nodeName} tag is above the fold and could be eagerly-loaded to improve performance.`,
     selector: 'img[loading="lazy"], iframe[loading="lazy"]',
     match(element) {

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

@@ -0,0 +1,7 @@
+export declare class DevToolbarAuditListItem extends HTMLElement {
+    clickAction?: () => void | (() => Promise<void>);
+    shadowRoot: ShadowRoot;
+    isManualFocus: boolean;
+    constructor();
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,137 @@
+class DevToolbarAuditListItem extends HTMLElement {
+  clickAction;
+  shadowRoot;
+  isManualFocus;
+  constructor() {
+    super();
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    this.isManualFocus = false;
+    this.shadowRoot.innerHTML = `
+			<style>
+				:host>button, :host>div {
+					box-sizing: border-box;
+					padding: 16px;
+					background: transparent;
+					border: none;
+					border-bottom: 1px solid #1F2433;
+					text-decoration: none;
+					width: 100%;
+	    		height: 100%;
+				}
+
+				h1, h2, h3, h4, h5, h6 {
+					color: #fff;
+					font-weight: 600;
+				}
+
+				:host>button:hover, :host([hovered])>button {
+					background: #FFFFFF20;
+				}
+
+				svg {
+					display: block;
+					margin: 0 auto;
+				}
+
+			:host>button#astro-overlay-card {
+			  text-align: left;
+				box-shadow: none;
+				display: flex;
+				align-items: center;
+				overflow: hidden;
+				gap: 8px;
+			}
+
+			:host(:not([active]))>button:hover {
+			  cursor: pointer;
+			}
+
+			.extended-info {
+				display: none;
+				color: white;
+				font-size: 14px;
+			}
+
+			.extended-info hr {
+				border: 1px solid rgba(27, 30, 36, 1);
+			}
+
+			:host([active]) .extended-info {
+				display: block;
+				position: absolute;
+				height: 100%;
+				top: 98px;
+				height: calc(100% - 98px);
+				background: #0d0e12;
+				user-select: text;
+				overflow: auto;
+				border: none;
+				z-index: 1000000000;
+				flex-direction: column;
+			}
+
+			:host([active])>button#astro-overlay-card {
+				display: none;
+			}
+
+			.audit-title {
+				margin: 0;
+				margin-bottom: 4px;
+			}
+
+			.extended-info .audit-selector {
+				font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid transparent;
+				user-select: none;
+				color: rgba(191, 193, 201, 1);
+			}
+
+			.extended-info .audit-selector:hover {
+				border-bottom: 1px solid rgba(255, 255, 255);
+				cursor: pointer;
+				color: #fff;
+			}
+
+			.audit-selector svg {
+				width: 16px;
+				height: 16px;
+    		display: inline;
+			}
+
+			.extended-info .audit-description {
+				color: rgba(191, 193, 201, 1);
+			}
+
+			.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;
+				color: white;
+			}
+			</style>
+
+			<button id="astro-overlay-card">
+				<slot />
+			</button>
+		`;
+  }
+  connectedCallback() {
+    if (this.clickAction) {
+      this.shadowRoot.getElementById("astro-overlay-card")?.addEventListener("click", this.clickAction);
+    }
+  }
+}
+export {
+  DevToolbarAuditListItem
+};