astro 3.4.1 → 3.4.2

package/components/ViewTransitions.astro

@@ -5,9 +5,23 @@ export interface Props {
 	fallback?: Fallback;
 }
 
-const { fallback = 'animate' } = Astro.props as Props;
+const { fallback = 'animate' } = Astro.props;
 ---
 
+<style is:global>
+	/* Route announcer */
+	.astro-route-announcer {
+		position: absolute;
+		left: 0;
+		top: 0;
+		clip: rect(0 0 0 0);
+		clip-path: inset(50%);
+		overflow: hidden;
+		white-space: nowrap;
+		width: 1px;
+		height: 1px;
+	}
+</style>
 <meta name="astro-view-transitions-enabled" content="true" />
 <meta name="astro-view-transitions-fallback" content={fallback} />
 <script>

package/components/viewtransitions.css

@@ -54,16 +54,3 @@
 		animation: none !important;
 	}
 }
-
-/* Route announcer */
-.astro-route-announcer {
-	position: absolute;
-	left: 0;
-	top: 0;
-	clip: rect(0 0 0 0);
-	clip-path: inset(50%);
-	overflow: hidden;
-	white-space: nowrap;
-	width: 1px;
-	height: 1px;
-}

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "3.4.1";
+const ASTRO_VERSION = "3.4.2";
 const SUPPORTED_MARKDOWN_FILE_EXTENSIONS = [
   ".markdown",
   ".mdown",

package/dist/core/dev/dev.js

@@ -20,7 +20,7 @@ async function dev(inlineConfig) {
       base: restart.container.settings.config.base
     })
   );
-  const currentVersion = "3.4.1";
+  const currentVersion = "3.4.2";
   if (currentVersion.includes("-")) {
     logger.warn(null, msg.prerelease({ currentVersion }));
   }

package/dist/core/messages.js

@@ -50,7 +50,7 @@ function serverStart({
   base,
   isRestart = false
 }) {
-  const version = "3.4.1";
+  const version = "3.4.2";
   const localPrefix = `${dim("\u2503")} Local    `;
   const networkPrefix = `${dim("\u2503")} Network  `;
   const emptyPrefix = " ".repeat(11);
@@ -235,7 +235,7 @@ function printHelp({
     message.push(
       linebreak(),
       `  ${bgGreen(black(` ${commandName} `))} ${green(
-        `v${"3.4.1"}`
+        `v${"3.4.2"}`
       )} ${headline}`
     );
   }

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

@@ -39,7 +39,7 @@ document.addEventListener("DOMContentLoaded", async () => {
       status: "loading",
       eventTarget
     };
-    eventTarget.addEventListener("plugin-notification", (evt) => {
+    eventTarget.addEventListener("toggle-notification", (evt) => {
       const target = overlay.shadowRoot?.querySelector(`[data-plugin-id="${plugin.id}"]`);
       if (!target)
         return;
@@ -49,6 +49,13 @@ document.addEventListener("DOMContentLoaded", async () => {
       }
       target.querySelector(".notification")?.toggleAttribute("data-active", newState);
     });
+    eventTarget.addEventListener("toggle-plugin", (evt) => {
+      let newState = void 0;
+      if (evt instanceof CustomEvent) {
+        newState = evt.detail.state ?? true;
+      }
+      overlay.togglePluginStatus(plugin, newState);
+    });
     return plugin;
   };
   const customPluginsDefinitions = await loadDevOverlayPlugins();

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

@@ -84,7 +84,7 @@ class AstroDevOverlay extends HTMLElement {
 				overflow: hidden;
 			}
 
-			#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus {
+			#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus-visible {
 				background: rgba(27, 30, 36, 1);
 				cursor: pointer;
 				outline-offset: -3px;
@@ -103,6 +103,33 @@ class AstroDevOverlay extends HTMLElement {
 				background: rgba(71, 78, 94, 1);
 			}
 
+			#dev-bar .item-tooltip {
+				background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
+				border: 1px solid rgba(52, 56, 65, 1);
+				border-radius: 4px;
+				padding: 4px 8px;
+				position: absolute;
+				top: -40px;
+				opacity: 0;
+				transition: opacity 0.2s ease-in-out 0s;
+				pointer-events: none;
+			}
+
+			#dev-bar .item-tooltip::after{
+				content: '';
+				position: absolute;
+				left: calc(50% - 5px);
+				bottom: -6px;
+				border-left: 5px solid transparent;
+				border-right: 5px solid transparent;
+				border-top: 5px solid #343841;
+			}
+
+			#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
+				transition: opacity 0.2s ease-in-out 200ms;
+				opacity: 1;
+			}
+
 			#dev-bar #bar-container .item.active .notification {
 				border-color: rgba(71, 78, 94, 1);
 			}
@@ -317,7 +344,7 @@ class AstroDevOverlay extends HTMLElement {
       await plugin.init?.(shadowRoot, plugin.eventTarget);
       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}`);
@@ -327,7 +354,7 @@ class AstroDevOverlay extends HTMLElement {
   getPluginTemplate(plugin) {
     return `<button class="item" data-plugin-id="${plugin.id}">
 				<div class="icon">${this.getPluginIcon(plugin.icon)}<div class="notification"></div></div>
-				<span class="sr-only">${plugin.name}</span>
+				<span class="item-tooltip">${plugin.name}</span>
 			</button>`;
   }
   getPluginIcon(icon) {
@@ -350,7 +377,7 @@ class AstroDevOverlay extends HTMLElement {
     target.classList.toggle("active", plugin.active);
     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
@@ -358,7 +385,7 @@ 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 });
     }
   }
   toggleMinimizeButton(newStatus) {

package/dist/runtime/server/render/astro/instance.js

@@ -16,8 +16,15 @@ class AstroComponentInstance {
     this.factory = factory;
     this.slotValues = {};
     for (const name in slots) {
-      const value = slots[name](result);
-      this.slotValues[name] = () => value;
+      let didRender = false;
+      let value = slots[name](result);
+      this.slotValues[name] = () => {
+        if (!didRender) {
+          didRender = true;
+          return value;
+        }
+        return slots[name](result);
+      };
     }
   }
   async init(result) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",