astro 4.0.0-beta.7 → 4.0.0

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "4.0.0-beta.7";
+const ASTRO_VERSION = "4.0.0";
 const SUPPORTED_MARKDOWN_FILE_EXTENSIONS = [
   ".markdown",
   ".mdown",

package/dist/core/dev/dev.js

@@ -21,7 +21,7 @@ async function dev(inlineConfig) {
       base: restart.container.settings.config.base
     })
   );
-  const currentVersion = "4.0.0-beta.7";
+  const currentVersion = "4.0.0";
   if (currentVersion.includes("-")) {
     logger.warn("SKIP_FORMAT", msg.prerelease({ currentVersion }));
   }

package/dist/core/messages.js

@@ -36,7 +36,7 @@ function serverStart({
   host,
   base
 }) {
-  const version = "4.0.0-beta.7";
+  const version = "4.0.0";
   const localPrefix = `${dim("\u2503")} Local    `;
   const networkPrefix = `${dim("\u2503")} Network  `;
   const emptyPrefix = " ".repeat(11);
@@ -258,7 +258,7 @@ function printHelp({
     message.push(
       linebreak(),
       `  ${bgGreen(black(` ${commandName} `))} ${green(
-        `v${"4.0.0-beta.7"}`
+        `v${"4.0.0"}`
       )} ${headline}`
     );
   }

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

@@ -101,7 +101,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 						box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 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);
 						width: 192px;
 						padding: 8px;
-						z-index: 9999999999;
+						z-index: 2000000010;
 						transform: translate(-50%, 0%);
 						position: fixed;
 						bottom: 72px;

package/dist/runtime/client/dev-overlay/overlay.js

@@ -40,7 +40,7 @@ class AstroDevOverlay extends HTMLElement {
 				bottom: 0px;
 				left: 50%;
 				transform: translate(-50%, 0%);
-				z-index: 9999999999;
+				z-index: 2000000010;
 				display: flex;
 				flex-direction: column;
 				align-items: center;
@@ -239,9 +239,12 @@ class AstroDevOverlay extends HTMLElement {
       this.shadowRoot?.append(pluginCanvas);
     });
     if ("requestIdleCallback" in window) {
-      window.requestIdleCallback(async () => {
-        this.plugins.map((plugin) => this.initPlugin(plugin));
-      });
+      window.requestIdleCallback(
+        async () => {
+          this.plugins.map((plugin) => this.initPlugin(plugin));
+        },
+        { timeout: 300 }
+      );
     } else {
       setTimeout(async () => {
         this.plugins.map((plugin) => this.initPlugin(plugin));
@@ -263,8 +266,8 @@ class AstroDevOverlay extends HTMLElement {
   attachEvents() {
     const items = this.shadowRoot.querySelectorAll(".item");
     items.forEach((item) => {
-      item.addEventListener("click", async (e) => {
-        const target = e.currentTarget;
+      item.addEventListener("click", async (event) => {
+        const target = event.currentTarget;
         if (!target || !(target instanceof HTMLElement))
           return;
         const id = target.dataset.pluginId;
@@ -273,6 +276,7 @@ class AstroDevOverlay extends HTMLElement {
         const plugin = this.getPluginById(id);
         if (!plugin)
           return;
+        event.stopPropagation();
         await this.togglePluginStatus(plugin);
       });
     });

package/dist/runtime/client/dev-overlay/plugins/audit/index.js

@@ -1,6 +1,7 @@
 import {
   attachTooltipToHighlight,
   createHighlight,
+  getElementsPositionInDocument,
   positionHighlight
 } from "../utils/highlight.js";
 import { createWindowElement } from "../utils/window.js";
@@ -104,7 +105,7 @@ var audit_default = {
 							margin: 0;
 							font-size: 22px;
 						}
-	
+
 						astro-dev-toolbar-icon {
 							width: 1em;
 						   height: 1em;
@@ -143,15 +144,18 @@ var audit_default = {
       const computedStyle = window.getComputedStyle(originalElement);
       const targetedElement = originalElement.children[0] || originalElement;
       if (targetedElement.offsetParent === null || computedStyle.display === "none") {
-        audits.push();
         return;
       }
       if (originalElement.nodeName === "IMG" && !originalElement.complete) {
-        await originalElement.decode();
+        return;
       }
       const rect = originalElement.getBoundingClientRect();
       const highlight = createHighlight(rect, "warning");
       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 });

package/dist/runtime/client/dev-overlay/plugins/utils/highlight.d.ts

@@ -2,8 +2,7 @@ import type { DevOverlayHighlight } from '../../ui-library/highlight.js';
 import type { Icon } from '../../ui-library/icons.js';
 export declare function createHighlight(rect: DOMRect, icon?: Icon): DevOverlayHighlight;
 export declare function getElementsPositionInDocument(el: Element): {
-    zIndex: number;
-    fixed: boolean;
+    isFixed: boolean;
 };
 export declare function positionHighlight(highlight: DevOverlayHighlight, rect: DOMRect): void;
 export declare function attachTooltipToHighlight(highlight: DevOverlayHighlight, tooltip: HTMLElement, originalElement: Element): void;

package/dist/runtime/client/dev-overlay/plugins/utils/highlight.js

@@ -11,23 +11,17 @@ function createHighlight(rect, icon) {
   return highlight;
 }
 function getElementsPositionInDocument(el) {
-  let highestZIndex = 0;
-  let fixed = false;
+  let isFixed = false;
   let current = el;
   while (current instanceof Element) {
     let style = getComputedStyle(current);
-    let zIndex = Number(style.zIndex);
-    if (!Number.isNaN(zIndex) && zIndex > highestZIndex) {
-      highestZIndex = zIndex;
-    }
     if (style.position === "fixed") {
-      fixed = true;
+      isFixed = true;
     }
     current = current.parentNode;
   }
   return {
-    zIndex: highestZIndex + 1,
-    fixed
+    isFixed
   };
 }
 function positionHighlight(highlight, rect) {
@@ -40,10 +34,8 @@ function positionHighlight(highlight, rect) {
 }
 function attachTooltipToHighlight(highlight, tooltip, originalElement) {
   highlight.shadowRoot.append(tooltip);
-  const originalZIndex = highlight.style.zIndex;
   ["mouseover", "focus"].forEach((event) => {
     highlight.addEventListener(event, () => {
-      highlight.style.zIndex = "9999999999";
       tooltip.dataset.show = "true";
       const originalRect = originalElement.getBoundingClientRect();
       const dialogRect = tooltip.getBoundingClientRect();
@@ -57,7 +49,6 @@ function attachTooltipToHighlight(highlight, tooltip, originalElement) {
   ["mouseout", "blur"].forEach((event) => {
     highlight.addEventListener(event, () => {
       tooltip.dataset.show = "false";
-      highlight.style.zIndex = originalZIndex;
     });
   });
 }

package/dist/runtime/client/dev-overlay/plugins/xray.js

@@ -92,9 +92,8 @@ var xray_default = {
         const rect = islandElement.getBoundingClientRect();
         const highlight = createHighlight(rect);
         const tooltip = buildIslandTooltip(island);
-        const { zIndex, fixed } = getElementsPositionInDocument(islandElement);
-        tooltip.style.zIndex = highlight.style.zIndex = zIndex + "";
-        if (fixed) {
+        const { isFixed } = getElementsPositionInDocument(islandElement);
+        if (isFixed) {
           tooltip.style.position = highlight.style.position = "fixed";
         }
         attachTooltipToHighlight(highlight, tooltip, islandElement);
@@ -122,13 +121,14 @@ var xray_default = {
           inlineTitle: `<code>client:${islandClientDirective}</code>`
         });
       }
-      if (Object.keys(islandProps).length > 0) {
+      const islandPropsEntries = Object.entries(islandProps).filter(
+        (prop) => !prop[0].startsWith("data-astro-cid-")
+      );
+      if (islandPropsEntries.length > 0) {
         tooltip.sections.push({
           title: "Props",
           content: `<pre><code>${JSON.stringify(
-            Object.fromEntries(
-              Object.entries(islandProps).map((prop) => [prop[0], prop[1][1]])
-            ),
+            Object.fromEntries(islandPropsEntries.map((prop) => [prop[0], prop[1][1]])),
             void 0,
             2
           )}</code></pre>`

package/dist/runtime/client/dev-overlay/ui-library/highlight.js

@@ -16,6 +16,7 @@ class DevOverlayHighlight extends HTMLElement {
 					width: 100%;
 					height: 100%;
 					position: absolute;
+					z-index: 2000000000;
 				}
 
 				.icon {

package/dist/runtime/client/dev-overlay/ui-library/tooltip.js

@@ -20,7 +20,7 @@ class DevOverlayTooltip extends HTMLElement {
 				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";
 				font-size: 14px;
 				margin: 0;
-				z-index: 9999999;
+				z-index: 2000000001;
 				max-width: 45ch;
 				width: fit-content;
 				min-width: 30ch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -158,7 +158,7 @@
     "yargs-parser": "^21.1.1",
     "zod": "^3.22.4",
     "@astrojs/internal-helpers": "0.2.1",
-    "@astrojs/markdown-remark": "4.0.0-beta.0",
+    "@astrojs/markdown-remark": "4.0.0",
     "@astrojs/telemetry": "3.0.4"
   },
   "optionalDependencies": {