astro 3.3.4 → 3.4.0

package/dist/core/create-vite.js

@@ -13,6 +13,7 @@ import astroPostprocessVitePlugin from "../vite-plugin-astro-postprocess/index.j
 import { vitePluginAstroServer } from "../vite-plugin-astro-server/index.js";
 import astroVitePlugin from "../vite-plugin-astro/index.js";
 import configAliasVitePlugin from "../vite-plugin-config-alias/index.js";
+import astroDevOverlay from "../vite-plugin-dev-overlay/vite-plugin-dev-overlay.js";
 import envVitePlugin from "../vite-plugin-env/index.js";
 import astroHeadPlugin from "../vite-plugin-head/index.js";
 import htmlVitePlugin from "../vite-plugin-html/index.js";
@@ -105,7 +106,8 @@ async function createVite(commandConfig, { settings, logger, mode, command, fs =
       astroContentAssetPropagationPlugin({ mode, settings }),
       vitePluginSSRManifest(),
       astroAssetsPlugin({ settings, logger, mode }),
-      astroTransitions()
+      astroTransitions(),
+      astroDevOverlay({ settings, logger })
     ],
     publicDir: fileURLToPath(settings.config.publicDir),
     root: fileURLToPath(settings.config.root),

package/dist/core/dev/dev.js

@@ -20,7 +20,7 @@ async function dev(inlineConfig) {
       base: restart.container.settings.config.base
     })
   );
-  const currentVersion = "3.3.4";
+  const currentVersion = "3.4.0";
   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.3.4";
+  const version = "3.4.0";
   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.3.4"}`
+        `v${"3.4.0"}`
       )} ${headline}`
     );
   }

package/dist/core/render/core.js

@@ -29,6 +29,7 @@ async function renderPage({ mod, renderContext, env, cookies }) {
     clientDirectives: env.clientDirectives,
     compressHTML: env.compressHTML,
     request: renderContext.request,
+    partial: !!mod.partial,
     site: env.site,
     scripts: renderContext.scripts,
     ssr: env.ssr,

package/dist/core/render/result.d.ts

@@ -16,6 +16,7 @@ export interface CreateResultArgs {
     renderers: SSRLoadedRenderer[];
     clientDirectives: Map<string, string>;
     compressHTML: boolean;
+    partial: boolean;
     resolve: (s: string) => Promise<string>;
     /**
      * Used for `Astro.site`

package/dist/core/render/result.js

@@ -96,6 +96,7 @@ function createResult(args) {
     renderers: args.renderers,
     clientDirectives: args.clientDirectives,
     compressHTML: args.compressHTML,
+    partial: args.partial,
     pathname: args.pathname,
     cookies,
     /** This function returns the `Astro` faux-global */

package/dist/integrations/index.js

@@ -83,6 +83,9 @@ async function runHookConfigSetup({
         addWatchFile: (path) => {
           updatedSettings.watchFiles.push(path instanceof URL ? fileURLToPath(path) : path);
         },
+        addDevOverlayPlugin: (entrypoint) => {
+          updatedSettings.devOverlayPlugins.push(entrypoint);
+        },
         addClientDirective: ({ name, entrypoint }) => {
           if (updatedSettings.clientDirectives.has(name) || addedClientDirectives.has(name)) {
             throw new Error(
@@ -160,16 +163,6 @@ async function runHookConfigDone({
                   );
                 }
               }
-              if (!validationResult.assets) {
-                logger.warn(
-                  "astro",
-                  `The selected adapter ${adapter.name} does not support image optimization. To allow your project to build with the original, unoptimized images, the image service has been automatically switched to the 'noop' option. See https://docs.astro.build/en/reference/configuration-reference/#imageservice`
-                );
-                settings.config.image.service = {
-                  entrypoint: "astro/assets/services/noop",
-                  config: {}
-                };
-              }
             }
             settings.adapter = adapter;
           },

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,446 @@
+import { loadDevOverlayPlugins } from "astro:dev-overlay";
+import astroDevToolPlugin from "./plugins/astro.js";
+import astroAuditPlugin from "./plugins/audit.js";
+import astroXrayPlugin from "./plugins/xray.js";
+import { DevOverlayCard } from "./ui-library/card.js";
+import { DevOverlayHighlight } from "./ui-library/highlight.js";
+import { getIconElement, isDefinedIcon } from "./ui-library/icons.js";
+import { DevOverlayTooltip } from "./ui-library/tooltip.js";
+import { DevOverlayWindow } from "./ui-library/window.js";
+document.addEventListener("DOMContentLoaded", async () => {
+  const WS_EVENT_NAME = "astro-dev-overlay";
+  const HOVER_DELAY = 750;
+  const builtinPlugins = [
+    astroDevToolPlugin,
+    astroXrayPlugin,
+    astroAuditPlugin
+  ].map((plugin) => ({
+    ...plugin,
+    active: false,
+    status: "loading",
+    eventTarget: new EventTarget()
+  }));
+  const customPluginsImports = await loadDevOverlayPlugins();
+  const customPlugins = [];
+  customPlugins.push(
+    ...customPluginsImports.map((plugin) => ({
+      ...plugin,
+      active: false,
+      status: "loading",
+      eventTarget: new EventTarget()
+    }))
+  );
+  const plugins = [...builtinPlugins, ...customPlugins];
+  for (const plugin of plugins) {
+    plugin.eventTarget.addEventListener("plugin-notification", (evt) => {
+      const target = overlay.shadowRoot?.querySelector(`[data-plugin-id="${plugin.id}"]`);
+      if (!target)
+        return;
+      let newState = true;
+      if (evt instanceof CustomEvent) {
+        newState = evt.detail.state ?? true;
+      }
+      target.querySelector(".notification")?.toggleAttribute("data-active", newState);
+    });
+  }
+  class AstroDevOverlay extends HTMLElement {
+    shadowRoot;
+    hoverTimeout;
+    isHidden = () => this.devOverlay?.hasAttribute("data-hidden") ?? true;
+    devOverlay;
+    constructor() {
+      super();
+      this.shadowRoot = this.attachShadow({ mode: "closed" });
+    }
+    // connect component
+    async connectedCallback() {
+      this.shadowRoot.innerHTML = `
+    <style>
+			#dev-overlay {
+				position: fixed;
+				bottom: 7.5%;
+				left: calc(50% + 32px);
+				transform: translate(-50%, 0%);
+				z-index: 999999;
+				display: flex;
+				gap: 8px;
+				align-items: center;
+				transition: bottom 0.2s ease-in-out;
+				pointer-events: none;
+			}
+
+			#dev-overlay[data-hidden] {
+				bottom: -40px;
+			}
+
+			#dev-overlay[data-hidden]:hover, #dev-overlay[data-hidden]:focus-within {
+				bottom: -35px;
+				cursor: pointer;
+			}
+
+			#dev-overlay[data-hidden] #minimize-button {
+				visibility: hidden;
+			}
+
+      #dev-bar {
+				height: 56px;
+				overflow: hidden;
+				pointer-events: auto;
+
+				background: linear-gradient(180deg, #13151A 0%, rgba(19, 21, 26, 0.88) 100%);
+				box-shadow: 0px 0px 0px 0px #13151A4D;
+				border: 1px solid #343841;
+				border-radius: 9999px;
+			}
+
+			#dev-bar .item {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 64px;
+				border: 0;
+				background: transparent;
+				color: white;
+				font-family: system-ui, sans-serif;
+				font-size: 1rem;
+				line-height: 1.2;
+				white-space: nowrap;
+				text-decoration: none;
+				padding: 0;
+				margin: 0;
+				overflow: hidden;
+			}
+
+			#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus {
+				background: rgba(27, 30, 36, 1);
+				cursor: pointer;
+				outline-offset: -3px;
+			}
+
+			#dev-bar .item:first-of-type {
+				border-top-left-radius: 9999px;
+				border-bottom-left-radius: 9999px;
+			}
+
+			#dev-bar .item:last-of-type {
+				border-top-right-radius: 9999px;
+				border-bottom-right-radius: 9999px;
+			}
+			#dev-bar #bar-container .item.active {
+				background: rgba(71, 78, 94, 1);
+			}
+
+			#dev-bar #bar-container .item.active .notification {
+				border-color: rgba(71, 78, 94, 1);
+			}
+
+			#dev-bar .item .icon {
+				position: relative;
+				max-width: 24px;
+				max-height: 24px;
+				user-select: none;
+			}
+
+			#dev-bar .item svg {
+				width: 24px;
+				height: 24px;
+				display: block;
+				margin: auto;
+			}
+
+			#dev-bar .item .notification {
+				display: none;
+				position: absolute;
+				top: -2px;
+				right: 0;
+				width: 8px;
+				height: 8px;
+				border-radius: 9999px;
+				border: 1px solid rgba(19, 21, 26, 1);
+				background: #B33E66;
+			}
+
+			#dev-bar .item .notification[data-active] {
+				display: block;
+			}
+
+			#dev-bar #bar-container {
+				height: 100%;
+				display: flex;
+			}
+
+			#dev-bar .separator {
+				background: rgba(52, 56, 65, 1);
+				width: 1px;
+			}
+
+			astro-overlay-plugin-canvas {
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+
+			astro-overlay-plugin-canvas:not([data-active]) {
+				display: none;
+			}
+
+			#minimize-button {
+				width: 32px;
+				height: 32px;
+				background: rgba(255, 255, 255, 0.75);
+				border-radius: 9999px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				opacity: 0;
+				transition: opacity 0.2s ease-in-out;
+				pointer-events: auto;
+				border: 0;
+				color: white;
+				font-family: system-ui, sans-serif;
+				font-size: 1rem;
+				line-height: 1.2;
+				white-space: nowrap;
+				text-decoration: none;
+				padding: 0;
+				margin: 0;
+			}
+
+			#minimize-button:hover, #minimize-button:focus {
+				cursor: pointer;
+				background: rgba(255, 255, 255, 0.90);
+			}
+
+			#minimize-button svg {
+				width: 16px;
+				height: 16px;
+			}
+
+			.sr-only {
+				position: absolute;
+				width: 1px;
+				height: 1px;
+				padding: 0;
+				margin: -1px;
+				overflow: hidden;
+				clip: rect(0, 0, 0, 0);
+				white-space: nowrap;
+				border-width: 0;
+			}
+    </style>
+
+		<div id="dev-overlay">
+			<div id="dev-bar">
+				<div id="bar-container">
+					${builtinPlugins.map((plugin) => this.getPluginTemplate(plugin)).join("")}
+					<div class="separator"></div>
+					${customPlugins.map((plugin) => this.getPluginTemplate(plugin)).join("")}
+				</div>
+			</div>
+			<button id="minimize-button">${getIconElement("arrow-down")?.outerHTML}</button>
+		</div>`;
+      this.devOverlay = this.shadowRoot.querySelector("#dev-overlay");
+      this.attachEvents();
+      if ("requestIdleCallback" in window) {
+        window.requestIdleCallback(async () => {
+          await this.initAllPlugins();
+        });
+      } else {
+        setTimeout(async () => {
+          await this.initAllPlugins();
+        }, 200);
+      }
+    }
+    attachEvents() {
+      const items = this.shadowRoot.querySelectorAll(".item");
+      items.forEach((item) => {
+        item.addEventListener("click", async (e) => {
+          const target = e.currentTarget;
+          if (!target || !(target instanceof HTMLElement))
+            return;
+          const id = target.dataset.pluginId;
+          if (!id)
+            return;
+          const plugin = this.getPluginById(id);
+          if (!plugin)
+            return;
+          if (plugin.status === "loading") {
+            await this.initPlugin(plugin);
+          }
+          this.togglePluginStatus(plugin);
+        });
+      });
+      const minimizeButton = this.shadowRoot.querySelector("#minimize-button");
+      if (minimizeButton && this.devOverlay) {
+        minimizeButton.addEventListener("click", () => {
+          this.toggleOverlay(false);
+          this.toggleMinimizeButton(false);
+        });
+      }
+      const devBar = this.shadowRoot.querySelector("#dev-bar");
+      if (devBar) {
+        ["mouseenter", "focusin"].forEach((event) => {
+          devBar.addEventListener(event, () => {
+            if (this.hoverTimeout) {
+              window.clearTimeout(this.hoverTimeout);
+            }
+            if (this.isHidden()) {
+              this.hoverTimeout = window.setTimeout(() => {
+                this.toggleOverlay(true);
+              }, HOVER_DELAY);
+            } else {
+              this.hoverTimeout = window.setTimeout(() => {
+                this.toggleMinimizeButton(true);
+              }, HOVER_DELAY);
+            }
+          });
+        });
+        devBar.addEventListener("mouseleave", () => {
+          if (this.hoverTimeout) {
+            window.clearTimeout(this.hoverTimeout);
+          }
+          if (!this.isHidden()) {
+            this.hoverTimeout = window.setTimeout(() => {
+              this.toggleMinimizeButton(false);
+            }, HOVER_DELAY);
+          }
+        });
+        devBar.addEventListener("click", () => {
+          if (!this.isHidden())
+            return;
+          this.toggleOverlay(true);
+        });
+        devBar.addEventListener("keyup", (event) => {
+          if (event.code === "Space" || event.code === "Enter") {
+            if (!this.isHidden())
+              return;
+            this.toggleOverlay(true);
+          }
+        });
+      }
+    }
+    async initAllPlugins() {
+      await Promise.all(
+        plugins.filter((plugin) => plugin.status === "loading").map((plugin) => this.initPlugin(plugin))
+      );
+    }
+    async initPlugin(plugin) {
+      if (plugin.status === "ready")
+        return;
+      const shadowRoot = this.getPluginCanvasById(plugin.id).shadowRoot;
+      try {
+        console.info(`Initing plugin ${plugin.id}`);
+        await plugin.init?.(shadowRoot, plugin.eventTarget);
+        plugin.status = "ready";
+        if (import.meta.hot) {
+          import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:init`);
+        }
+      } catch (e) {
+        console.error(`Failed to init plugin ${plugin.id}, error: ${e}`);
+        plugin.status = "error";
+      }
+    }
+    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>
+			</button>`;
+    }
+    getPluginIcon(icon) {
+      if (isDefinedIcon(icon)) {
+        return getIconElement(icon)?.outerHTML;
+      }
+      return icon;
+    }
+    getPluginById(id) {
+      return plugins.find((plugin) => plugin.id === id);
+    }
+    getPluginCanvasById(id) {
+      return this.shadowRoot.querySelector(`astro-overlay-plugin-canvas[data-plugin-id="${id}"]`);
+    }
+    togglePluginStatus(plugin, status) {
+      plugin.active = status ?? !plugin.active;
+      const target = this.shadowRoot.querySelector(`[data-plugin-id="${plugin.id}"]`);
+      if (!target)
+        return;
+      target.classList.toggle("active", plugin.active);
+      this.getPluginCanvasById(plugin.id)?.toggleAttribute("data-active", plugin.active);
+      plugin.eventTarget.dispatchEvent(
+        new CustomEvent("plugin-toggle", {
+          detail: {
+            state: plugin.active,
+            plugin
+          }
+        })
+      );
+      if (import.meta.hot) {
+        import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggle`, { state: plugin.active });
+      }
+    }
+    toggleMinimizeButton(newStatus) {
+      const minimizeButton = this.shadowRoot.querySelector("#minimize-button");
+      if (!minimizeButton)
+        return;
+      if (newStatus !== void 0) {
+        if (newStatus === true) {
+          minimizeButton.removeAttribute("inert");
+          minimizeButton.style.opacity = "1";
+        } else {
+          minimizeButton.setAttribute("inert", "");
+          minimizeButton.style.opacity = "0";
+        }
+      } else {
+        minimizeButton.toggleAttribute("inert");
+        minimizeButton.style.opacity = minimizeButton.hasAttribute("inert") ? "0" : "1";
+      }
+    }
+    toggleOverlay(newStatus) {
+      const barContainer = this.shadowRoot.querySelector("#bar-container");
+      const devBar = this.shadowRoot.querySelector("#dev-bar");
+      if (newStatus !== void 0) {
+        if (newStatus === true) {
+          this.devOverlay?.removeAttribute("data-hidden");
+          barContainer?.removeAttribute("inert");
+          devBar?.removeAttribute("tabindex");
+        } else {
+          this.devOverlay?.setAttribute("data-hidden", "");
+          barContainer?.setAttribute("inert", "");
+          devBar?.setAttribute("tabindex", "0");
+        }
+      } else {
+        this.devOverlay?.toggleAttribute("data-hidden");
+        barContainer?.toggleAttribute("inert");
+        if (this.isHidden()) {
+          devBar?.setAttribute("tabindex", "0");
+        } else {
+          devBar?.removeAttribute("tabindex");
+        }
+      }
+    }
+  }
+  class DevOverlayCanvas extends HTMLElement {
+    shadowRoot;
+    constructor() {
+      super();
+      this.shadowRoot = this.attachShadow({ mode: "closed" });
+    }
+    // connect component
+    async connectedCallback() {
+      this.shadowRoot.innerHTML = ``;
+    }
+  }
+  customElements.define("astro-dev-overlay", AstroDevOverlay);
+  customElements.define("astro-overlay-window", DevOverlayWindow);
+  customElements.define("astro-overlay-plugin-canvas", DevOverlayCanvas);
+  customElements.define("astro-overlay-tooltip", DevOverlayTooltip);
+  customElements.define("astro-overlay-highlight", DevOverlayHighlight);
+  customElements.define("astro-overlay-card", DevOverlayCard);
+  const overlay = document.createElement("astro-dev-overlay");
+  overlay.style.zIndex = "999999";
+  document.body.append(overlay);
+  plugins.forEach((plugin) => {
+    const pluginCanvas = document.createElement("astro-overlay-plugin-canvas");
+    pluginCanvas.dataset.pluginId = plugin.id;
+    overlay.shadowRoot?.append(pluginCanvas);
+  });
+});

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    id: string;
+    name: string;
+    icon: "astro:logo";
+    init(canvas: ShadowRoot): void;
+};
+export default _default;

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

@@ -0,0 +1,66 @@
+var astro_default = {
+  id: "astro",
+  name: "Astro",
+  icon: "astro:logo",
+  init(canvas) {
+    const astroWindow = document.createElement("astro-overlay-window");
+    astroWindow.windowTitle = "Astro";
+    astroWindow.windowIcon = "astro:logo";
+    astroWindow.innerHTML = `
+			<style>
+				#buttons-container {
+					display: flex;
+					gap: 16px;
+					justify-content: center;
+				}
+
+				#buttons-container astro-overlay-card {
+					flex: 1;
+				}
+
+				footer {
+					display: flex;
+					justify-content: center;
+					gap: 24px;
+				}
+
+				footer a {
+					color: rgba(145, 152, 173, 1);
+				}
+
+				footer a:hover {
+					color: rgba(204, 206, 216, 1);
+				}
+
+				#main-container {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					height: 100%;
+				}
+
+				p {
+					margin-top: 0;
+				}
+			</style>
+
+			<div id="main-container">
+				<div>
+					<p>Welcome to Astro!</p>
+					<div id="buttons-container">
+						<astro-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-overlay-card>
+						<astro-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-overlay-card>
+					</div>
+				</div>
+				<footer>
+					<a href="https://discord.gg/astro" target="_blank">Join the Astro Discord</a>
+					<a href="https://astro.build" target="_blank">Visit Astro.build</a>
+				</footer>
+			</div>
+		`;
+    canvas.append(astroWindow);
+  }
+};
+export {
+  astro_default as default
+};

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    id: string;
+    name: string;
+    icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 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>";
+    init(canvas: ShadowRoot, eventTarget: EventTarget): void;
+};
+export default _default;